diff --git a/apps/nuxt3-ssr/components/header/Catalogue.vue b/apps/nuxt3-ssr/components/header/Catalogue.vue
index 89757d05c0..ec49684ba3 100644
--- a/apps/nuxt3-ssr/components/header/Catalogue.vue
+++ b/apps/nuxt3-ssr/components/header/Catalogue.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import type { UIResource, UIResourceType } from "~/interfaces/types";
+
 const route = useRoute();
 const config = useRuntimeConfig();
 
 const props = defineProps<{
-  catalogue: any;
+  catalogue?: UIResource;
   variableCount: number;
+  resourceTypes: UIResourceType[];
 }>();
 
 const cohortOnly = computed(() => {
@@ -23,18 +26,16 @@ if (route.params.resourceType) {
   });
 }
 
-if (props.catalogue.resources_groupBy?.length) {
-  props.catalogue.resources_groupBy.forEach(
-    (sub: { type: { name: string }; count: string }) => {
-      const resourceTypeMetadata = getResourceMetadataForType(sub.type.name);
-      menu.push({
-        label: resourceTypeMetadata.plural,
-        link:
-          `/${route.params.schema}/ssr-catalogue/${catalogueRouteParam}/` +
-          resourceTypeMetadata.path,
-      });
-    }
-  );
+if (props.resourceTypes.length > 0) {
+  props.resourceTypes.forEach((resourceType) => {
+    const resourceTypeMetadata = getResourceMetadataForType(
+      resourceType.type.name
+    );
+    menu.push({
+      label: resourceTypeMetadata.plural,
+      link: `/${route.params.schema}/ssr-catalogue/${catalogueRouteParam}/${resourceTypeMetadata.path}`,
+    });
+  });
 }
 
 if (!cohortOnly.value && props.variableCount > 0)
@@ -73,7 +74,9 @@ if (!cohortOnly.value) {
       <div class="items-center justify-between hidden xl:flex h-25">
         <Logo
           :link="`/${route.params.schema}/ssr-catalogue/${catalogueRouteParam}`"
-          :image="catalogueRouteParam === 'all' ? null : catalogue?.logo?.url"
+          :image="
+            catalogueRouteParam === 'all' ? undefined : catalogue?.logo?.url
+          "
         />
         <MainNavigation :navigation="menu" :invert="true" />
         <!--  <div class="w-[450px]">
@@ -91,7 +94,7 @@ if (!cohortOnly.value) {
             <LogoMobile
               :link="`/${route.params.schema}/ssr-catalogue/${catalogueRouteParam}`"
               :image="
-                catalogueRouteParam === 'all' ? null : catalogue?.logo?.url
+                catalogueRouteParam === 'all' ? undefined : catalogue?.logo?.url
               "
             />
           </div>
diff --git a/apps/nuxt3-ssr/components/layouts/DetailPage.vue b/apps/nuxt3-ssr/components/layouts/DetailPage.vue
index 37af0b9161..185107bb52 100644
--- a/apps/nuxt3-ssr/components/layouts/DetailPage.vue
+++ b/apps/nuxt3-ssr/components/layouts/DetailPage.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 const route = useRoute();
 const headerData = await useHeaderData();
-const catalogue = headerData.catalogue;
-const variableCount = headerData.variableCount;
 
 const bannerData = await useBannerData();
 const bannerHtml = computed(() => {
@@ -15,8 +13,9 @@ const bannerHtml = computed(() => {
 
   <HeaderCatalogue
     v-if="route.params.catalogue"
-    :catalogue="catalogue"
-    :variableCount="variableCount"
+    :catalogue="headerData.catalogue"
+    :variableCount="headerData.variableCount"
+    :resourceTypes="headerData.resourceTypes"
   />
 
   <HeaderGlobal v-else />
diff --git a/apps/nuxt3-ssr/components/layouts/LandingPage.vue b/apps/nuxt3-ssr/components/layouts/LandingPage.vue
index 6949828213..efce719671 100644
--- a/apps/nuxt3-ssr/components/layouts/LandingPage.vue
+++ b/apps/nuxt3-ssr/components/layouts/LandingPage.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
 const route = useRoute();
 const headerData = await useHeaderData();
-const catalogue = headerData.catalogue;
-const variableCount = headerData.variableCount;
-
 const bannerData = await useBannerData();
 const bannerHtml = computed(() => {
   return bannerData.data;
@@ -15,8 +12,9 @@ const bannerHtml = computed(() => {
 
   <HeaderCatalogue
     v-if="route.params.catalogue"
-    :catalogue="catalogue"
-    :variableCount="variableCount"
+    :catalogue="headerData.catalogue"
+    :variableCount="headerData.variableCount"
+    :resourceTypes="headerData.resourceTypes"
   />
   <HeaderGlobal v-else />
   <Container>
diff --git a/apps/nuxt3-ssr/components/layouts/SearchPage.vue b/apps/nuxt3-ssr/components/layouts/SearchPage.vue
index cdb4aa8516..c83889bdb4 100644
--- a/apps/nuxt3-ssr/components/layouts/SearchPage.vue
+++ b/apps/nuxt3-ssr/components/layouts/SearchPage.vue
@@ -1,9 +1,6 @@
 <script setup>
 const route = useRoute();
 const headerData = await useHeaderData();
-const catalogue = headerData.catalogue;
-const variableCount = headerData.variableCount;
-
 const bannerData = await useBannerData();
 const bannerHtml = computed(() => {
   return bannerData.data;
@@ -15,8 +12,9 @@ const bannerHtml = computed(() => {
 
   <HeaderCatalogue
     v-if="route.params.catalogue"
-    :catalogue="catalogue"
-    :variableCount="variableCount"
+    :catalogue="headerData.catalogue"
+    :variableCount="headerData.variableCount"
+    :resourceTypes="headerData.resourceTypes"
   />
 
   <HeaderGlobal v-else />
diff --git a/apps/nuxt3-ssr/composables/useHeaderData.ts b/apps/nuxt3-ssr/composables/useHeaderData.ts
index 3f5695ff16..f1f1dfc68c 100644
--- a/apps/nuxt3-ssr/composables/useHeaderData.ts
+++ b/apps/nuxt3-ssr/composables/useHeaderData.ts
@@ -1,48 +1,74 @@
+import type { UIResource, UIResourceType } from "~/interfaces/types";
+
+interface Resp<T> {
+  data: T;
+  error?: any;
+}
+
+interface IHeaderQuery {
+  Resources: UIResource[];
+  Variables_agg: { count: number };
+  Resources_groupBy: UIResourceType[];
+}
+
 export async function useHeaderData() {
   const route = useRoute();
   const scoped = route.params.catalogue !== "all";
   const catalogueRouteParam = route.params.catalogue;
 
-  const { data, error } = await $fetch(`/${route.params.schema}/graphql`, {
-    key: `header-${route.params.catalogue}`,
-    method: "POST",
-    body: {
-      query: `
-            query HeaderQuery($networksFilter:ResourcesFilter, $variablesFilter:VariablesFilter) {
-              Resources(filter:$networksFilter) {
+  const { data, error } = await $fetch<Resp<IHeaderQuery>>(
+    `/${route.params.schema}/graphql`,
+    {
+      method: "POST",
+      body: {
+        query: `
+            query HeaderQuery($resourceFilter:ResourcesFilter, $variablesFilter:VariablesFilter) {
+              Resources(filter:$resourceFilter) {
                 id,
-                resources_agg { count }
-                resources_groupBy { count , type {name}}
                 logo { url }
-            }
-            Variables_agg(filter:$variablesFilter) {
+              }
+              Variables_agg(filter:$variablesFilter) {
+                  count
+              }
+              Resources_groupBy(filter:$resourceFilter) {
+                type { name, definition }
                 count
-            }
-          }`,
-      variables: {
-        networksFilter: scoped
-          ? { id: { equals: catalogueRouteParam } }
-          : undefined,
-        variablesFilter: scoped
-          ? {
-              _or: [
-                { resource: { id: { equals: catalogueRouteParam } } },
-                //also include network of networks
-                {
-                  resource: {
-                    type: { name: { equals: "Network" } },
+              }
+            }`,
+        variables: {
+          resourceFilter: scoped
+            ? {
+                _or: [
+                  { partOfResources: { id: { equals: catalogueRouteParam } } },
+                  {
                     partOfResources: {
-                      id: { equals: catalogueRouteParam },
+                      partOfResources: { id: { equals: catalogueRouteParam } },
+                    },
+                  },
+                ],
+              }
+            : undefined,
+          variablesFilter: scoped
+            ? {
+                _or: [
+                  { resource: { id: { equals: catalogueRouteParam } } },
+                  //also include network of networks
+                  {
+                    resource: {
+                      type: { name: { equals: "Network" } },
+                      partOfResources: {
+                        id: { equals: catalogueRouteParam },
+                      },
                     },
                   },
-                },
-              ],
-            }
-          : //should only include harmonised variables
-            { resource: { type: { name: { equals: "Network" } } } },
+                ],
+              }
+            : //should only include harmonised variables
+              { resource: { type: { name: { equals: "Network" } } } },
+        },
       },
-    },
-  });
+    }
+  );
 
   if (error) {
     const contextMsg = "Error on fetching page header data";
@@ -50,8 +76,11 @@ export async function useHeaderData() {
     throw new Error(contextMsg);
   }
 
-  const catalogue = data.Resources ? data.Resources[0] : null;
+  const catalogue = data.Resources ? data.Resources[0] : undefined;
   const variableCount = data.Variables_agg.count || 0;
+  const resourceTypes = data.Resources_groupBy.filter(
+    (resourceType: { count: number }) => resourceType.count > 0
+  );
 
-  return { catalogue, variableCount };
+  return { catalogue, variableCount, resourceTypes };
 }
diff --git a/apps/nuxt3-ssr/interfaces/types.ts b/apps/nuxt3-ssr/interfaces/types.ts
index 4e42c820d1..ac08fb5e57 100644
--- a/apps/nuxt3-ssr/interfaces/types.ts
+++ b/apps/nuxt3-ssr/interfaces/types.ts
@@ -468,3 +468,16 @@ export type IResourceTypeMetadata = {
   path: string;
   description?: string;
 };
+
+export interface UIResourceType {
+  type: {
+    name: string;
+    definition?: string;
+  };
+  count: number;
+}
+
+export interface UIResource {
+  id: string;
+  logo: { url: string };
+}
diff --git a/apps/nuxt3-ssr/tests/header-items.spec.ts b/apps/nuxt3-ssr/tests/header-items.spec.ts
index b758958156..a342bcac8b 100644
--- a/apps/nuxt3-ssr/tests/header-items.spec.ts
+++ b/apps/nuxt3-ssr/tests/header-items.spec.ts
@@ -16,5 +16,12 @@ test("should show variables in menu if there are variables", async ({
   goto,
 }) => {
   await goto("/catalogue-demo/ssr-catalogue/all", { waitUntil: "hydration" });
-  await expect(page.getByRole("navigation")).toContainText("Variables");
+  await expect(page.getByRole("navigation")).toContainText("Resources");
+  await expect(page.getByRole("navigation")).toContainText("Cohort studies");
+  await expect(page.getByRole("navigation")).toContainText("Cohort studies");
+  await expect(page.getByRole("navigation")).toContainText("Data sources");
+  await expect(page.getByRole("navigation")).toContainText("Databanks");
+  await expect(page.getByRole("navigation")).toContainText("More");
+  await page.getByRole("button", { name: "More" }).hover();
+  await page.locator("li").filter({ hasText: "Variables" });
 });