diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html
index b2ce66fe..6739094e 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html
@@ -1,139 +1,165 @@
 <html data-namespace-typo3-fluid="true" lang="en"
       xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
-    <f:section name="Main">
-        <f:if condition="{pricetable -> f:count()} == 0">
-            <f:then>
-                <f:render partial="NotBookable" arguments="{_all}"/>
-            </f:then>
-            <f:else>
-                <div class="w-full max-w-full overflow-x-scroll">
-                    <table class="min-w-full border border-gray-200 border-collapse mb-8">
-                        <thead>
-                        <tr>
-                            <th class="text-left">
-                                Zimmertyp
-                            </th>
-                            <th class="text-left">
-                                Preis/Pers.
-                            </th>
-                            <th class="text-left">
-                                inkl.
-                            </th>
-                            <th></th>
-                            <th class="hidden lg:table-cell"></th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                            <f:for each="{pricetable}" as="row" iteration="iteration">
-                                <tr class="even:bg-gray-50">
-                                    <td class="px-2 py-1 border border-gray-200 whitespace-nowrap">
-                                        {row.roomName}
-                                        <div class="lg:hidden">
-                                            <f:if condition="{row.roomAvailable}">
-                                                <f:then>
-                                                    <a href="{row.bookingUrl}">
-                                                        Jetzt buchen <i class="fa fa-angle-right"></i>
-                                                    </a>
-                                                </f:then>
-                                                <f:else>
-                                                    <span>ausgebucht</span>
-                                                </f:else>
-                                            </f:if>
-                                        </div>
-                                    </td>
-                                    <td class="px-2 py-1 border border-gray-200">
-                                        <f:if condition="{row.roomAvailable}">
+    <f:if condition="{pricetable -> f:count()} == 0">
+        <f:then>
+            <f:render partial="NotBookable" arguments="{_all}"/>
+        </f:then>
+        <f:else>
+            <div class="w-full max-w-full overflow-x-scroll"
+                 data-controller="pricetable"
+                 data-pricetable-show-all-rows-value="true">
+                <table class="min-w-full border border-gray-200 border-collapse mb-8">
+                    <thead>
+                    <tr>
+                        <th class="text-left">
+                            Zimmertyp
+                        </th>
+                        <th class="text-left">
+                            Preis/Pers.
+                        </th>
+                        <th class="text-left">
+                            inkl.
+                        </th>
+                        <th></th>
+                        <th class="hidden lg:table-cell"></th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                        <f:for each="{pricetable}" as="row" iteration="iteration">
+                            <tr class="even:bg-gray-50">
+                                <td class="px-2 py-1 border border-gray-200 whitespace-nowrap">
+                                    {row.roomName}
+                                    <div class="lg:hidden">
+                                        <f:if condition="{row.available}">
                                             <f:then>
-                                                {row.roomPrice} €
+                                                <a href="{row.bookingUrl}">
+                                                    Jetzt buchen <i class="fa fa-angle-right"></i>
+                                                </a>
                                             </f:then>
                                             <f:else>
-                                                <s>{row.roomPrice} €</s>
+                                                <span>ausgebucht</span>
                                             </f:else>
                                         </f:if>
-                                    </td>
-                                    <td class="px-2 py-1 border border-gray-200">
-                                        <f:if condition="{row.dateBusIncluded}">
-                                            <span data-cooltipz-dir="top" aria-label="Busfahrt inklusive" role="tooltip">
-                                                <i class="fa fa-bus"></i>
-                                            </span>
-                                        </f:if>
-                                        <f:if condition="{row.dateSkipassIncluded}">
-                                            <span data-cooltipz-dir="top" aria-label="Skipass inklusive" role="tooltip">
-                                                <i class="fa fa-tag"></i>
-                                            </span>
-                                        </f:if>
-                                    </td>
-                                    <td class="px-2 py-1 border border-gray-200">
-                                        <f:if condition="{row.roomOptionalServices}">
-                                            <f:render section="Modal" arguments="{index: iteration.cycle, services: row.roomOptionalServices}"/>
-                                        </f:if>
-                                    </td>
-                                    <td class="hidden lg:table-cell px-2 py-1 border border-gray-200">
-                                        <f:if condition="{row.roomAvailable}">
-                                            <f:then>
-                                                <a class="button button--small button--booking" href="{row.bookingUrl}" target="_blank">Buchen</a>
-                                            </f:then>
-                                            <f:else>
-                                                <span class="label label-default">ausgebucht</span>
-                                            </f:else>
-                                        </f:if>
-                                    </td>
-                                </tr>
-                            </f:for>
-                        </tbody>
-                    </table>
-                </div>
-            </f:else>
-        </f:if>
-    </f:section>
-
-    <f:section name="Modal">
-        <a href="#" data-toggle="modal" data-target="#optservices{index}"><i class="fa fa-plus-circle"></i></a>
-        <div class="modal fade" id="optservices{index}" role="dialog">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button"
-                                class="close"
-                                data-dismiss="modal">
-                            <span>&times;</span>
-                        </button>
-                        <h5 class="modal-title">Optionale Zusatzleistungen</h5>
+                                    </div>
+                                </td>
+                                <td class="px-2 py-1 border border-gray-200">
+                                    <f:if condition="{row.available}">
+                                        <f:then>
+                                            {row.minPrice} €
+                                        </f:then>
+                                        <f:else>
+                                            <s>{row.minPrice} €</s>
+                                        </f:else>
+                                    </f:if>
+                                </td>
+                                <td class="px-2 py-1 border border-gray-200">
+                                    <f:if condition="{row.busIncluded}">
+                                        <span data-cooltipz-dir="top"
+                                              aria-label="Busfahrt"
+                                              role="tooltip"
+                                              data-pricetable-target="busIcon"
+                                              data-bus-included="{row.busIncluded}"
+                                              data-bus-price="{row.busPrice}">
+                                            <svg class="w-4 h-4 md:w-5 md:h-5">
+                                                <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-bus"></use>
+                                            </svg>
+                                        </span>
+                                    </f:if>
+                                    <f:if condition="{row.skipassIncluded}">
+                                        <span data-cooltipz-dir="top"
+                                              aria-label="Skipass"
+                                              role="tooltip">
+                                          <svg class="w-4 h-4 md:w-5 md:h-5">
+                                              <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-tag"></use>
+                                          </svg>
+                                        </span>
+                                    </f:if>
+                                </td>
+                                <td class="px-2 py-1 border border-gray-200">
+                                    <f:if condition="{row.optionalServices} && {row.available}">
+                                        <button type="button"
+                                                data-action="pricetable#openModal"
+                                                data-type="options"
+                                                data-uid="{row.roomUid}"
+                                                data-cooltipz-dir="top"
+                                                aria-label="Alle Zusatzleistungen anzeigen"
+                                                role="tooltip">
+                                            <svg class="w-4 h-4 md:w-5 md:h-5">
+                                                <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-plus-circle"></use>
+                                            </svg>
+                                        </button>
+                                    </f:if>
+                                </td>
+                                <td class="hidden lg:table-cell px-2 py-1 border border-gray-200">
+                                    <f:if condition="{row.available}">
+                                        <f:then>
+                                            <a class="button button--small w-full"
+                                               href="{row.bookingUrl}"
+                                               title="{row.roomName} buchen"
+                                               target="_blank">
+                                                <span class="font-bold normal-case whitespace-nowrap">
+                                                    Jetzt buchen
+                                                </span>
+                                            </a>
+                                        </f:then>
+                                        <f:else>
+                                            <span class="label label-default">ausgebucht</span>
+                                        </f:else>
+                                    </f:if>
+                                </td>
+                            </tr>
+                        </f:for>
+                    </tbody>
+                </table>
+            </div>
+        </f:else>
+    </f:if>
+    <div class="hidden fixed inset-0 w-full h-full z-50"
+         data-controller="modal"
+         data-action="pricetable:options-modal:open@window->modal#open">
+        <div class="absolute inset-0 w-full h-full bg-overlay-black z-25"
+             data-action="click->modal#close"></div>
+        <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 w-full max-w-xl px-4">
+            <div class="shadow flex items-center justify-between p-4 bg-ep-primary-light text-white rounded-t">
+                <span class="text-xl font-bold">
+                    Optionale Zusatzleistungen
+                </span>
+                <button type="button"
+                        class="inline-block"
+                        data-action="modal#close">
+                    <svg class="w-8 h-8">
+                        <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-close"></use>
+                    </svg>
+                </button>
+            </div>
+            <div class="h-128 p-4 overflow-y-scroll bg-white rounded-b">
+                <f:for each="{pricetable}" as="row">
+                    <div class="hidden"
+                         data-modal-target="content"
+                         data-uid="{row.roomUid}">
+                        <f:for each="{row.optionalServices}" as="section">
+                            <div class="py-2 -mx-1">
+                                <div class="font-bold text-xl px-1">
+                                    {section.label}
+                                </div>
+                                <f:for each="{section.services}" as="service">
+                                    <dl class="flex items-start justify-between p-1 hover:bg-gray-50">
+                                        <dt class="font-normal">
+                                            {service.label}:
+                                        </dt>
+                                        <dd class="whitespace-nowrap">
+                                            {service.price} €
+                                        </dd>
+                                    </dl>
+                                </f:for>
+                            </div>
+                        </f:for>
                     </div>
-                    <div class="modal-body">
-                        <div class="table-responsive">
-                            <f:render section="OptionalServices" arguments="{services: services}"/>
-                        </div>
-                    </div>
-                </div>
+                </f:for>
             </div>
         </div>
-    </f:section>
-
-    <f:section name="OptionalServices">
-        <v:variable.set name="sectionLabels" value="{
-            BUS: 'Anreise',
-            VPF: 'Verpflegung',
-            SPA: 'Skipass',
-            KUR: 'Kurse',
-            VER: 'Verleih'
-        }"/>
-        <table class="table table-striped services">
-            <f:for each="{services}" as="section" key="serviceKey">
-                <tr>
-                    <th colspan="2">{v:variable.get(name: 'sectionLabels.{serviceKey}')}</th>
-                </tr>
-                <f:for each="{section}" as="service">
-                    <tr>
-                        <td>{service.label}</td>
-                        <td>{service.price}€</td>
-                    </tr>
-                </f:for>
-            </f:for>
-        </table>
-    </f:section>
+    </div>
 
 </html>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/PricetableHtml.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/PricetableHtml.html
index f5218595..1e40c9d1 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/PricetableHtml.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/PricetableHtml.html
@@ -1,11 +1,10 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
-      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
       data-namespace-typo3-fluid="true">
 
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <f:render partial="Pricetable" section="Main" arguments="{_all}"/>
+        <f:render partial="Pricetable" arguments="{_all}"/>
     </f:section>
 
 </html>
