diff --git a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript
index 20049093..52e925da 100644
--- a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript
+++ b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript
@@ -8,7 +8,7 @@ page {
     bodyTagCObject = COA
     bodyTagCObject {
         10 = TEXT
-        10.value = <body class="antialiased text-gray-800 font-sans lg:pt-8
+        10.value = <body class="antialiased text-gray-800 font-sans pt-14 lg:pt-8
         20 = TEXT
         20 {
             field = tx_eptheme_bodyclass
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
index 88d50d1c..46c0d0a6 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
@@ -5,7 +5,7 @@
       xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
 
     <f:section name="Main">
-        <div class="relative z-40 lg:container bg-white">
+        <div class="fixed top-0 left-0 inset-x-0 z-40 lg:relative lg:container bg-white shadow-md lg:shadow-none">
             <div class="flex items-center lg:items-end justify-between px-4 py-2 lg:px-0 lg:pt-4 lg:pb-0">
                 <a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
                    class="block lg:pb-4"
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
index 22af564a..0f947a58 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
@@ -3,77 +3,111 @@
       xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
-    <div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen z-100 overflow-y-scroll bg-cover bg-gray-700 transform hidden"
+    <div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-gray-700 transform hidden"
          data-controller="overlay-toggle"
          data-overlay-toggle-id-value="mobilenav"
          data-overlay-toggle-target="overlay"
          data-action="overlay-toggle:toggle@window->overlay-toggle#toggle">
-        <div class="relative bg-ep-primary">
-            <div class="fixed top-0 left-0 inset-x-0 px-8 py-2 flex justify-end bg-ep-primary">
+        <div class="fixed top-0 left-0 z-100 inset-x-0 px-4 py-2 flex justify-between bg-white shadow-md">
+            <a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
+               class="block lg:pb-4"
+               title="{settings.defaultTitle}">
+                <img class="block h-10 lg:h-12 w-auto" src="{f:uri.image(src: settings.logoImage)}" alt="{settings.defaultTitle}">
+            </a>
+            <div class="flex lg:hidden items-center space-x-4">
+                <f:if condition="{data.tx_eptheme_hide_searchbar}">
+                    <f:else>
+                        <button class="focus:outline-none text-gray-800"
+                                data-controller="overlay-toggle"
+                                data-overlay-toggle-id-value="search"
+                                data-action="overlay-toggle#invokeToggle">
+                            <svg class="w-8 h-8 text-gray-800">
+                                <use href="#icon-search"></use>
+                            </svg>
+                        </button>
+                    </f:else>
+                </f:if>
                 <button class="focus:outline-none" data-action="overlay-toggle#invokeToggle">
-                    <svg class="w-10 h-10 text-white">
+                    <svg class="w-8 h-8">
                         <use href="#icon-close"></use>
                     </svg>
                 </button>
             </div>
-            <ul class="m-0 px-0 pb-4 pt-12">
-                <f:for each="{topnav}" as="topitem">
-                    <li class="py-2 px-8 hover:bg-ep-primary-light{f:if(condition: topitem.active, then: ' bg-ep-primary-light')}">
-                        <a class="block text-xl text-white hover:text-white hover:text-white focus:text-white uppercase font-bold"
-                           href="{topitem.link}"{f:if(condition: '{topitem.data.doktype} == 3', then: ' target="_blank"')}
-                           title="{topitem.title}">
+        </div>
+        <div class="h-full w-full overflow-y-scroll">
+            <div class="relative bg-ep-primary">
+                <ul class="m-0 px-0 py-4">
+                    <f:for each="{topnav}" as="topitem">
+                        <li class="py-2 px-4 hover:bg-ep-primary-light{f:if(condition: topitem.active, then: ' bg-ep-primary-light')}">
+                            <a class="block text-xl text-white hover:text-white hover:text-white focus:text-white uppercase font-bold"
+                               href="{topitem.link}"{f:if(condition: '{topitem.data.doktype} == 3', then: ' target="_blank"')}
+                            title="{topitem.title}">
                             {topitem.title}
-                        </a>
+                            </a>
+                        </li>
+                    </f:for>
+                </ul>
+            </div>
+            <ul class="m-0 p-4 divide-y divide-ep-primary-50">
+                <f:for each="{mobilenav}" as="subitem">
+                    <li class="py-2 pr-4"
+                        data-controller="collapse"
+                        data-collapse-collapsed-value="true">
+                        <div class="flex items-center justify-between">
+                            <a href="{subitemlink}"
+                               class="uppercase text-xl text-white hover:text-white focus:text-white"
+                               title="{subitem.title}">
+                                {subitem.title}
+                            </a>
+                            <button class="focus:outline-none"
+                                    data-action="collapse#toggle">
+                                <svg class="h-6 w-6 transform text-white" data-collapse-target="icon">
+                                    <use href="#icon-chevron-down"></use>
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="transform"
+                             data-collapse-target="container">
+                            <f:for each="{subitem.children}" as="subsubitem">
+                                <a href="{subsubitem.link}"{f:if(condition: '{subsubitem.data.doktype} == 3', then: ' _target="blank"')}
+                                class="block text-lg leading-loose text-white hover:text-white focus:text-white"
+                                title="{subsubitem.title}">
+                                {subsubitem.title}
+                                </a>
+                            </f:for>
+                        </div>
                     </li>
                 </f:for>
             </ul>
-        </div>
-        <ul class="m-0 px-8 py-4 divide-y divide-overlay-white">
-            <f:for each="{mobilenav}" as="subitem">
-                <li class="py-2 pr-4"
-                    data-controller="collapse"
-                    data-collapse-collapsed-value="true">
-                    <div class="flex items-center justify-between">
-                        <a href="{subitemlink}"
-                           class="uppercase text-xl text-white hover:text-white focus:text-white"
-                           title="{subitem.title}">
-                            {subitem.title}
-                        </a>
-                        <button class="focus:outline-none"
-                                data-action="collapse#toggle">
-                            <svg class="h-6 w-6 transform text-white" data-collapse-target="icon">
-                                <use href="#icon-chevron-down"></use>
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="transform"
-                         data-collapse-target="container">
-                        <f:for each="{subitem.children}" as="subsubitem">
-                            <a href="{subsubitem.link}"{f:if(condition: '{subsubitem.data.doktype} == 3', then: ' _target="blank"')}
-                               class="block text-lg leading-loose text-white hover:text-white focus:text-white"
-                               title="{subsubitem.title}">
-                                {subsubitem.title}
-                            </a>
-                        </f:for>
-                    </div>
-                </li>
-            </f:for>
-        </ul>
-        <div class="px-8 py-4">
-            <div class="border-t-4 border-ep-primary mb-4"></div>
-            <p class="text-2xl text-white uppercase font-bold mb-1">Du hast Fragen?</p>
-            <p class="text-xl text-white uppercase mb-4">Wir können helfen!</p>
-            <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" class="btn btn--secondary block mb-1" rel="nofollow">
-                Anrufen
-            </a>
-            <a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}" class="btn btn--secondary block mb-1" rel="nofollow" target="_blank">
-                Whatsapp
-            </a>
-            <f:if condition="{settings.faqPageUid}">
-                <a href="{f:uri.typolink(parameter: settings.faqPageUid)}" class="btn btn--secondary block">
-                    FAQ
+            <div class="px-4 py-4">
+                <div class="border-t-4 border-ep-primary mb-4"></div>
+                <p class="text-2xl text-white uppercase font-bold mb-1">
+                    Du hast Fragen?
+                </p>
+                <p class="text-xl text-white uppercase mb-4">
+                    Wir können helfen!
+                </p>
+                <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
+                   class="button button--primary block mb-1"
+                   title="Anrufen"
+                   rel="nofollow">
+                    Anrufen
                 </a>
-            </f:if>
+                <a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}"
+                   class="button button--primary block mb-1"
+                   title="WhatsApp"
+                   rel="nofollow"
+                   target="_blank">
+                    Whatsapp
+                </a>
+                <f:if condition="{settings.faqPageUid}">
+                    <a href="{f:uri.typolink(parameter: settings.faqPageUid)}"
+                       class="button button--primary block"
+                       title="FAQ">
+                        FAQ
+                    </a>
+                </f:if>
+            </div>
         </div>
     </div>
 
