diff --git a/components/Header.tsx b/components/Header.tsx
index 722cb1e9..025ff7c1 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -19,8 +19,21 @@ import { getMetaTitles } from '@/utils/metadata';
 import TopToolBar from './common/TopToolBar';
 import { useCustomComponent } from './paths/custom';
 
-const getMenuStructure = (pages, rootId) => {
-  const menuLevelItems = [];
+import { MainMenu, MenuItem } from 'common/__generated__/graphql';
+
+export type NavItem = {
+  id: string;
+  name: string;
+  slug: string;
+  urlPath: string;
+  active: boolean;
+  children: MenuItem[] | null;
+};
+
+export type NavItems = NavItem[] | null;
+
+const getMenuStructure: NavItems = (pages, rootId: string) => {
+  const menuLevelItems: NavItems = [];
   pages.forEach((page) => {
     if (page.parent.id === rootId) {
       menuLevelItems.push({
@@ -36,13 +49,22 @@ const getMenuStructure = (pages, rootId) => {
   return menuLevelItems.length > 0 ? menuLevelItems : null;
 };
 
+// Set active page per pathname and active branch
 const setActivePages = (navLinks, pathname, activeBranch) => {
+  let hasActivePage = false;
   navLinks.forEach((page) => {
-    page.active = activeBranch === page.slug || pathname === page.urlPath;
+    let childHasActivePage = false;
     if (page.children) {
-      setActivePages(page.children, pathname, activeBranch);
+      const activeChild = setActivePages(page.children, pathname, activeBranch);
+      if (activeChild) childHasActivePage = true;
     }
+    page.active =
+      activeBranch === page.slug ||
+      decodeURI(pathname) === page.urlPath ||
+      childHasActivePage;
+    if (page.active) hasActivePage = true;
   });
+  return hasActivePage;
 };
 
 function createLocalizeMenuItem(currentLocale, primaryLocale) {
@@ -72,11 +94,12 @@ function Header() {
   const isAuthenticated = status === 'authenticated';
   const { navigationTitle: siteTitle } = getMetaTitles(plan);
 
-  const navLinks = useMemo(() => {
+  const navLinks: NavItems = useMemo(() => {
     let links = [];
 
-    const pageMenuItems = plan.mainMenu.items
-      .filter((item) => item.__typename == 'PageMenuItem')
+    const mainMenu = plan.mainMenu as MainMenu;
+    const pageMenuItems: MenuItem[] = mainMenu.items
+      .filter((item) => item?.__typename == 'PageMenuItem')
       .map(createLocalizeMenuItem(locale, plan.primaryLanguage));
 
     if (pageMenuItems.length > 0) {
@@ -110,6 +133,7 @@ function Header() {
 
   const googleAnalyticsId = theme.settings?.googleAnalyticsId;
 
+  console.log('navlinks', navLinks);
   return (
     <header style={{ position: 'relative' }}>
       <SkipToContent />
diff --git a/components/paths/custom/zurich/GlobalNav.tsx b/components/paths/custom/zurich/GlobalNav.tsx
index c34059c5..ae9ad93b 100644
--- a/components/paths/custom/zurich/GlobalNav.tsx
+++ b/components/paths/custom/zurich/GlobalNav.tsx
@@ -6,7 +6,7 @@ import { Collapse, Nav, Navbar, NavItem } from 'reactstrap';
 import styled, { useTheme } from 'styled-components';
 
 import { getThemeStaticURL } from '@/common/theme';
-
+import { NavItem as NavItemType } from '@/components/Header';
 //import NavDropdown, { type NavDropdownProps } from '@/components/common/NavDropdown';
 //import type { GlobalNavProps } from '@/components/common/GlobalNav';
 
@@ -108,7 +108,7 @@ const NavLink = styled.div`
       color: ${(props) => props.theme.neutralDark};
 
       .highlighter {
-        color: var(--hover-color);
+        color: var(--stzh-color-primary);
       }
     }
 
@@ -124,7 +124,7 @@ const NavHighlighter = styled.span`
   color: var(--stzh-base-color);
 
   &.active {
-    color: var(--hover-color);
+    color: var(--stzh-color-primary);
   }
 `;
 
@@ -157,22 +157,43 @@ const StyledHeaderMain = styled.div`
   }
 `;
 
-function GlobalNav(props) {
+type GlobalNavProps = {
+  siteTitle: string;
+  ownerName: string;
+  navItems: NavItemType[];
+  activeBranch: string;
+  activePath: string;
+  isDark?: boolean;
+};
+
+function GlobalNav(props: GlobalNavProps) {
   const { siteTitle, ownerName, navItems, activeBranch, activePath } = props;
   const theme = useTheme();
 
-  const [subNavState, setSubNavState] = useState(null);
-
   // Handle custom category page hierarchy --------------------------------------
   const activePathParts = activePath.split('/');
   const isSubCategory =
     activePathParts[1] === 'bereiche' && activePathParts.length >= 4;
-  if (isSubCategory && navItems[0].children.length > 1) {
+  if (
+    isSubCategory &&
+    navItems[0].children &&
+    navItems[0].children.length > 1
+  ) {
     navItems[0].children[0].active = false;
     navItems[0].children[1].active = true;
   }
   // ----------------------------------------------------------------------------
 
+  // Check if we need to open subnav by default (active top level has children)
+  const activeMainItemIndex = navItems.findIndex((item) => item.active);
+  const initialSubnav =
+    navItems[activeMainItemIndex]?.children &&
+    navItems[activeMainItemIndex]?.children.length > 0
+      ? navItems[activeMainItemIndex].id
+      : null;
+
+  const [subNavState, setSubNavState] = useState<string | null>(initialSubnav);
+
   const orgLogo = useMemo(() => {
     const url = getThemeStaticURL(theme.themeLogoUrl);
     return (
@@ -297,8 +318,8 @@ function GlobalNav(props) {
                     className="stzh-appnav__items sc-stzh-appnav sc-stzh-appnav-s me-auto"
                   >
                     {navItems
-                      .find((item) => item.id === subNavState)
-                      .children.map((item) => (
+                      ?.find((item) => item.id === subNavState)
+                      ?.children?.map((item) => (
                         <NavItem
                           className="sc-stzh-link-h sc-stzh-link-s"
                           key={item.id}