diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
index 3a9b67f3..6e716af3 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
@@ -1,111 +1,87 @@
 <html data-namespace-typo3-fluid="true" lang="en"
       xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
-      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
+      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
-    <div class="bg-cover bg-center bg-header-season-{product.region.season} mb-4">
-        <div class="md:container">
-            <div class="md:flex md:flex-row-reverse md:items-stretch">
-                <div class="md:w-5/12 md:py-4 splide"
-                     data-controller="slider"
-                     data-slider-preset-value="content">
-                    <div class="splide__track">
-                        <ul class="splide__list">
-                            <f:for each="{product.images}" as="image" iteration="iteration">
-                                <li class="splide__slide h-64 md:h-auto">
-                                    <picture class="w-full h-full">
-                                        <source srcset="{f:uri.image(image: image, width: '585')}" media="(min-width: 768px)">
-                                        <source srcset="{f:uri.image(image: image, width: '400')}" media="(max-width: 767px)">
-                                        <img class="block w-full h-full object-cover"
-                                             src="{f:uri.image(image: image, width: '400')}"
-                                             alt="{image.alternative}">
-                                    </picture>
-                                </li>
-                            </f:for>
-                        </ul>
-                    </div>
-                    <div class="splide__arrows absolute z-10 top-1/2 left-0 transform -translate-y-1/2 w-full flex justify-between">
-                        <button type="button"
-                                class="splide__arrow splide__arrow--prev">
-                            <svg class="w-10 h-10 text-white pointer-events-none">
-                                <use href="#icon-chevron-left"></use>
-                            </svg>
-                        </button>
-                        <button type="button"
-                                class="splide__arrow splide__arrow--next">
-                            <svg class="w-10 h-10 text-white pointer-events-none">
-                                <use href="#icon-chevron-right"></use>
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden md:flex md:flex-col md:justify-between md:items-center md:w-2/12 md:px-8">
-                    <f:if condition="{settings.showSkipassBadge} && {product.skipassIncluded}">
-                        <f:link.typolink parameter="{settings.skipassPageUid}"
-                                         title="Skipass inklusive">
-                            <f:if condition="{product.badge}">
-                                <f:then>
-                                    <f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
-                                             class="block w-20 h-auto mx-auto"
-                                             alt="Skipass inklusive" />
-                                </f:then>
-                                <f:else>
-                                    <f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
-                                             class="block w-20 xl:w-auto h-auto mx-auto"
-                                             alt="Skipass inklusive" />
-                                </f:else>
-                            </f:if>
-                        </f:link.typolink>
-                    </f:if>
-                </div>
-                <div class="px-4 md:px-0 md:w-5/12 md:self-center py-4">
-                    <div class="relative z-10 max-w-md shadow-md -mt-16 md:mt-0">
-                        <div class="bg-concept-{product.concept.code} text-white text-xl px-4 py-2 leading-none">
-                            {product.concept.name}
-                        </div>
-                        <div class="bg-white p-4">
-                            <span class="headline--3">
-                                {product.name}{f:if(condition: product.subline, then: ' {product.subline}')}
-                            </span>
-                            <span class="block">
-                                {product.region.name}
-                            </span>
-                            <div class="flex space-x-4 mt-4">
-                                <svg class="w-8 h-6 md:w-10 md:h-8">
-                                    <use href="#icon-flag-{product.country.code -> f:format.case(mode: 'lower')}"></use>
-                                </svg>
-                                <f:if condition="{hotel}">
-                                    <f:then>
-                                        <a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
-                                            <svg class="w-4 h-4 md:w-6 md:h-6 text-white">
-                                                <use href="#icon-location-marker"></use>
+    <div class="splide"
+         data-controller="slider"
+         data-slider-preset-value="header">
+        <div class="splide__track">
+            <ul class="splide__list">
+                <f:for each="{product.images}" as="image" iteration="iteration">
+                    <li class="splide__slide">
+                        <div class="relative max-w-screen-2xl mx-auto h-80 lg:h-96 mb-8">
+                            <picture>
+                                <source srcset="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeader')}" media="(min-width: 768px)">
+                                <source srcset="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeader')}" media="(max-width: 767px)">
+                                <img class="block w-full h-full object-cover"
+                                     src="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeader')}"
+                                     alt="{image.alternative}">
+                            </picture>
+                            <div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:transform md:translate-y-1/2">
+                                <div class="lg:container">
+                                    <div class="p-4 bg-ep-primary-dark-80 sbw:bg-sbw-primary-80 mb-4 md:p-8 md:max-w-2xl">
+                                        <span class="block text-xl md:text-2xl font-bold text-white uppercase">
+                                            {product.name}{f:if(condition: product.subline, then: ' {product.subline}')}
+                                        </span>
+                                        <span class="block text-2xl md:text-3xl lg:text-4xl font-bold text-white uppercase">
+                                            {product.region.name}
+                                        </span>
+                                        <div class="flex space-x-4 mt-4">
+                                            <svg class="w-8 h-6 md:w-10 md:h-8">
+                                                <use href="#icon-flag-{product.country.code -> f:format.case(mode: 'lower')}"></use>
                                             </svg>
-                                        </a>
-                                    </f:then>
-                                    <f:else>
-                                        <a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
-                                            <svg class="w-4 h-4 md:w-6 md:h-6 text-white">
-                                                <use href="#icon-location-marker"></use>
-                                            </svg>
-                                        </a>
-                                    </f:else>
-                                </f:if>
+                                            <f:if condition="{hotel}">
+                                                <f:then>
+                                                    <a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
+                                                        <svg class="w-4 h-4 md:w-6 md:h-6 text-white">
+                                                            <use href="#icon-location-marker"></use>
+                                                        </svg>
+                                                    </a>
+                                                </f:then>
+                                                <f:else>
+                                                    <a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
+                                                        <svg class="w-4 h-4 md:w-6 md:h-6 text-white">
+                                                            <use href="#icon-location-marker"></use>
+                                                        </svg>
+                                                    </a>
+                                                </f:else>
+                                            </f:if>
+                                        </div>
+                                        <f:if condition="{referringUrl}">
+                                            <a href="{referringUrl}" class="button button--small mt-8">
+                                                <svg class="w-4 h-4 text-white">
+                                                    <use href="#icon-chevron-left"></use>
+                                                </svg>
+                                                <span>
+                                                    {backlinkLabel}
+                                                </span>
+                                            </a>
+                                        </f:if>
+                                    </div>
+                                </div>
+                                <f:render partial="Badge" arguments="{badge: product.badge}"/>
                             </div>
+                            <f:if condition="{settings.showSkipassBadge} && {product.skipassIncluded}">
+                                <f:link.typolink parameter="{settings.skipassPageUid}"
+                                                 title="Skipass inklusive"
+                                                 class="herounit__badge herounit__badge--skipass">
+                                    <p class="uppercase text-4xl font-bold leading-7 mb-2">
+                                        Ski-<br>Pass
+                                    </p>
+                                    <p class="uppercase">
+                                        inklusive
+                                    </p>
+                                </f:link.typolink>
+                            </f:if>
+                            <f:if condition="{slide.image.0.description}">
+                                <div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-gray-700">
+                                    {slide.image.0.description -> f:format.htmlspecialchars()}
+                                </div>
+                            </f:if>
                         </div>
-                        <f:render partial="Badge" arguments="{badge: product.badge}"/>
-                    </div>
-                    <f:if condition="{referringUrl}">
-                        <a href="{referringUrl}" class="button button--small mt-8">
-                            <svg class="w-4 h-4 text-white">
-                                <use href="#icon-chevron-left"></use>
-                            </svg>
-                            <span>
-                                {backlinkLabel}
-                            </span>
-                        </a>
-                    </f:if>
-                </div>
-            </div>
+                    </li>
+                </f:for>
+            </ul>
         </div>
     </div>
 
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 dfd88d8f..398d319d 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
@@ -1,7 +1,6 @@
 <html data-namespace-typo3-fluid="true" lang="en"
       xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
-      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
+      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
     <f:layout name="Default"/>
 
