diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/favicon_ser.ico b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/favicon_ser.ico
new file mode 100644
index 00000000..6e5d52dd
Binary files /dev/null and b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/favicon_ser.ico differ
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_typography.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_typography.scss
index f7e3a891..397212ed 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_typography.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_typography.scss
@@ -19,7 +19,8 @@ h4,
 }
 
 .headline--underlined:after {
-    @apply block border-b-4 border-ep-primary-light sbw:border-sbw-primary pb-4 mb-4 -mt-2 w-20;
+    @apply block border-b-4 border-ep-primary-light pb-4 mb-4 -mt-2 w-20;
+    @apply sbw:border-sbw-primary ser:border-ser-secondary;
     content: '';
 }
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
index daf9b4f0..b8e9ebaa 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
@@ -11,6 +11,7 @@
     @apply sbw:hover:bg-sbw-primary-dark sbw:group-hover:bg-sbw-primary-dark;
     @apply snz:hover:bg-snz-primary-dark snz:group-hover:bg-snz-primary-dark;
     @apply uch:hover:bg-uch-primary-dark uch:group-hover:bg-uch-primary-dark;
+    @apply ser:hover:bg-ser-primary ser:group-hover:bg-ser-primary;
 
     &--active,
     &--secondary {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_contact-bar.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_contact-bar.scss
index 1ac407f8..55e8824f 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_contact-bar.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_contact-bar.scss
@@ -9,6 +9,7 @@
 
 .contact-bar__item {
     @apply flex-1 text-white py-2 bg-ep-primary-dark border-r border-white last:border-0;
+    @apply ser:bg-ser-primary;
 
     @screen md {
         @apply flex flex-none items-start transition-transform duration-300 ease-in-out p-1 shadow-md focus:text-white border-0;
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_topnav.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_topnav.scss
new file mode 100644
index 00000000..1496ce71
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_topnav.scss
@@ -0,0 +1,12 @@
+.topnav {
+    @apply hidden lg:block w-full fixed top-0 inset-x-0 z-50 bg-ep-primary-medium ser:bg-ser-primary shadow;
+}
+
+.topnav__nav {
+    @apply flex justify-between m-0 p-0 w-full;
+}
+
+.topnav__item {
+    @apply flex items-center justify-center w-16 h-8 text-white hover:text-white focus:text-white hover:bg-ep-secondary border-l border-r border-overlay-white-50;
+    @apply ser:hover:bg-ser-secondary;
+}
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 8cdb1c0b..779bdae1 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
@@ -15,6 +15,7 @@
 }
 
 @layer components {
+    @import "components/topnav";
     @import "components/background";
     @import "components/badges";
     @import "components/buttons";
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
index a803fd81..302ca6e5 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
@@ -3,7 +3,7 @@
       xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
       xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
-    <div class="bg-ep-primary-dark sbw:bg-sbw-primary-80 uch:bg-uch-primary-80 mt-8">
+    <div class="bg-ep-primary-dark sbw:bg-sbw-primary-80 uch:bg-uch-primary-80 ser:bg-ser-primary mt-8">
         <f:if condition="{settings.themekey} == 'ep'">
             <f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'transform -translate-y-2 text-white'}"/>
         </f:if>
@@ -87,7 +87,7 @@
         </div>
     </div>
 
-    <div class="bg-ep-primary-dark sbw:bg-sbw-primary-dark pt-4 pb-16 md:py-4 text-sm lg:text-base text-white">
+    <div class="bg-ep-primary-dark sbw:bg-sbw-primary-dark ser:bg-ser-primary pt-4 pb-16 md:py-4 text-sm lg:text-base text-white">
         <div class="container">
             <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
                 <div class="md:col-span-4 text-center md:text-left">
@@ -174,7 +174,7 @@
     <button type="button"
             data-controller="scroll-top"
             data-action="scroll-top#scroll"
-            class="hidden fixed bottom-0 right-0 mb-16 md:mb-8 mr-4 md:mr-8 z-10 h-10 w-10 flex items-center justify-center rounded bg-ep-secondary-80">
+            class="hidden fixed bottom-0 right-0 mb-16 md:mb-8 mr-4 md:mr-8 z-10 h-10 w-10 flex items-center justify-center rounded bg-ep-secondary-80 ser:bg-ser-secondary">
         <svg class="w-8 h-8 text-white">
             <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-chevron-up"></use>
         </svg>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
index 59fb9b82..a6f4b237 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
@@ -23,7 +23,7 @@
                             </f:alias>
                             <div class="absolute left-0 bottom-0 inset-x-0 px-4 py-8 w-full md:bottom-1/2 md:transform md:translate-y-1/2">
                                 <div class="lg:container px-0">
-                                    <div class="p-4 bg-ep-primary-dark-80 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80 mb-4 md:p-8 md:max-w-2xl">
+                                    <div class="p-4 bg-ep-primary-dark-80 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80 ser:bg-ser-primary-80 mb-4 md:p-8 md:max-w-2xl">
                                         <span class="block text-2xl md:text-4xl lg:text-5xl max-w-sm md:max-w-none font-black text-white uppercase mb-4 md:mb-8">
                                             {slide.headline}
                                         </span>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
index 06113bb8..28b632ac 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
@@ -19,7 +19,7 @@
             </f:alias>
             <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 snz:bg-snz-primary-80 uch:bg-uch-primary-80 mb-4 md:p-8 md:max-w-2xl">
+                    <div class="p-4 bg-ep-primary-dark-80 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80 ser:bg-ser-primary-80 mb-4 md:p-8 md:max-w-2xl">
                         <span class="block text-xl md:text-2xl text-white uppercase">
                             {slide.headline}
                         </span>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
index ebda8fd9..c8d71d34 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
@@ -4,10 +4,10 @@
 
     <f:if condition="{settings.hideAreaNavigation}">
         <f:else>
-            <div class="hidden lg:block w-full fixed top-0 inset-x-0 z-50 bg-ep-primary-medium ser:bg-ser-primary shadow">
+            <div class="topnav">
                 <div class="container">
-                    <nav role="navigation" class="flex justify-between m-0 p-0 w-full">
-                        <f:link.typolink parameter="9" class="flex items-center justify-center w-16 h-8 text-white hover:text-white focus:text-white hover:bg-ep-secondary border-l border-r border-overlay-white-50" title="E&amp;P">
+                    <nav role="navigation" class="topnav__nav">
+                        <f:link.typolink parameter="9" class="topnav__item" title="E&amp;P">
                             <svg class="w-5 h-5">
                                 <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-home"></use>
                             </svg>
@@ -15,7 +15,7 @@
                         <f:if condition="{settings.topNavPid}">
                             <div class="flex-1 flex items-center divide-x divide-overlay-white-50">
                                 <f:for each="{topnav}" as="menuitem">
-                                    <a class="block flex flex-grow h-8 justify-center items-center uppercase text-sm leading-none text-white hover:text-white focus:text-white hover:bg-ep-secondary{f:if(condition: menuitem.data.tx_eptheme_navitemclass, then: ' {menuitem.data.tx_eptheme_navitemclass}')}{f:if(condition: '{menuitem.active} or {menuitem.data.uid} == {settings.forceActiveTopnavUid}', then: ' bg-ep-secondary')}"
+                                    <a class="topnav__item flex-grow{f:if(condition: menuitem.data.tx_eptheme_navitemclass, then: ' {menuitem.data.tx_eptheme_navitemclass}')}{f:if(condition: '{menuitem.active} or {menuitem.data.uid} == {settings.forceActiveTopnavUid}', then: ' bg-ep-secondary')}"
                                        href="{menuitem.link}"{f:if(condition: '{menuitem.data.doktype} == 3', then: ' target="_blank"')}
                                        title="{menuitem.title}">
                                         {menuitem.title}
@@ -24,7 +24,7 @@
                             </div>
                         </f:if>
                         <f:if condition="{settings.myEpPageUid}">
-                            <f:link.typolink parameter="{settings.myEpPageUid}" class="flex items-center justify-center w-16 h-8 text-white hover:text-white focus:text-white hover:bg-ep-secondary border-l border-r border-overlay-white-50" title="My E&P">
+                            <f:link.typolink parameter="{settings.myEpPageUid}" class="topnav__item" title="My E&P">
                                 <svg class="w-5 h-5">
                                     <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-user"></use>
                                 </svg>
diff --git a/tailwind.config.js b/tailwind.config.js
index 76a5a806..9320a5d7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -127,6 +127,7 @@ module.exports = {
                     primary: '#006fb6',
                     secondary: '#e85243',
                     'primary-light': '#04A4CC',
+                    'primary-80': tinycolor('#006fb6').setAlpha(0.8).toRgbString(),
                 },
             },
             backgroundImage: {
@@ -148,7 +149,7 @@ module.exports = {
     },
     variants: {
         extend: {
-            backgroundColor: [ 'sbw', 'sbw-hover', 'sbw-group-hover', 'snz', 'snz-hover', 'snz-group-hover', 'uch', 'uch-hover', 'uch-group-hover', 'ser', 'ser-hover', 'even', 'odd' ],
+            backgroundColor: [ 'sbw', 'sbw-hover', 'sbw-group-hover', 'snz', 'snz-hover', 'snz-group-hover', 'uch', 'uch-hover', 'uch-group-hover', 'ser', 'ser-hover', 'ser-group-hover', 'even', 'odd' ],
             borderWidth: [ 'even', 'odd', 'first', 'last' ],
             textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover', 'ser', 'ser-hover' ],
             borderColor: [ 'sbw','snz', 'uch', 'ser' ],