diff --git a/apps/cms/config/sync/system.menu.meta.yml b/apps/cms/config/sync/system.menu.meta.yml
new file mode 100644
index 000000000..ef60f59a2
--- /dev/null
+++ b/apps/cms/config/sync/system.menu.meta.yml
@@ -0,0 +1,8 @@
+uuid: ed03f628-2d83-4f82-aeb8-6c59d150757d
+langcode: en
+status: true
+dependencies: {  }
+id: meta
+label: Meta
+description: 'Meta links.'
+locked: false
diff --git a/apps/preview/.lagoon.env b/apps/preview/.lagoon.env
index 752e3109d..e10314091 100644
--- a/apps/preview/.lagoon.env
+++ b/apps/preview/.lagoon.env
@@ -1 +1,2 @@
+PROJECT_NAME="example"
 DRUPAL_URL="https://nginx.${LAGOON_ENVIRONMENT}.${LAGOON_PROJECT}.ch4.amazee.io"
diff --git a/apps/website/package.json b/apps/website/package.json
index 2954fe07e..8ba4d3ae7 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -8,7 +8,7 @@
     "@amazeelabs/gatsby-plugin-operations": "^1.1.3",
     "@amazeelabs/gatsby-plugin-static-dirs": "^1.0.1",
     "@amazeelabs/gatsby-source-silverback": "^1.14.0",
-    "@amazeelabs/publisher": "^2.4.17",
+    "@amazeelabs/publisher": "^2.4.30",
     "@amazeelabs/strangler-netlify": "^1.1.9",
     "@amazeelabs/token-auth-middleware": "^1.1.1",
     "@custom/cms": "workspace:*",
diff --git a/packages/drupal/test_content/content/menu_link_content/4aa4a86f-8e0f-441d-8fcb-ac95b15ed13c.yml b/packages/drupal/test_content/content/menu_link_content/4aa4a86f-8e0f-441d-8fcb-ac95b15ed13c.yml
new file mode 100644
index 000000000..430e6e5b4
--- /dev/null
+++ b/packages/drupal/test_content/content/menu_link_content/4aa4a86f-8e0f-441d-8fcb-ac95b15ed13c.yml
@@ -0,0 +1,68 @@
+_meta:
+  version: '1.0'
+  entity_type: menu_link_content
+  uuid: 4aa4a86f-8e0f-441d-8fcb-ac95b15ed13c
+  bundle: menu_link_content
+  default_langcode: en
+default:
+  enabled:
+    -
+      value: true
+  title:
+    -
+      value: 'Meta item 2'
+  menu_name:
+    -
+      value: meta
+  link:
+    -
+      uri: 'internal:/'
+      title: ''
+      options: {  }
+  external:
+    -
+      value: false
+  rediscover:
+    -
+      value: true
+  weight:
+    -
+      value: -49
+  expanded:
+    -
+      value: false
+  content_translation_source:
+    -
+      value: und
+  content_translation_outdated:
+    -
+      value: false
+  content_translation_uid:
+    -
+      target_id: 1
+  content_translation_status:
+    -
+      value: true
+  content_translation_created:
+    -
+      value: 1716899458
+translations:
+  de:
+    title:
+      -
+        value: 'Meta item 2 DE'
+    content_translation_source:
+      -
+        value: en
+    content_translation_outdated:
+      -
+        value: false
+    content_translation_uid:
+      -
+        target_id: 1
+    content_translation_status:
+      -
+        value: true
+    content_translation_created:
+      -
+        value: 1716900493
diff --git a/packages/drupal/test_content/content/menu_link_content/679de789-7c88-494e-866d-062c2abf8fbb.yml b/packages/drupal/test_content/content/menu_link_content/679de789-7c88-494e-866d-062c2abf8fbb.yml
new file mode 100644
index 000000000..5c8065b71
--- /dev/null
+++ b/packages/drupal/test_content/content/menu_link_content/679de789-7c88-494e-866d-062c2abf8fbb.yml
@@ -0,0 +1,68 @@
+_meta:
+  version: '1.0'
+  entity_type: menu_link_content
+  uuid: 679de789-7c88-494e-866d-062c2abf8fbb
+  bundle: menu_link_content
+  default_langcode: en
+default:
+  enabled:
+    -
+      value: true
+  title:
+    -
+      value: 'Meta item 1'
+  menu_name:
+    -
+      value: meta
+  link:
+    -
+      uri: 'internal:/'
+      title: ''
+      options: {  }
+  external:
+    -
+      value: false
+  rediscover:
+    -
+      value: true
+  weight:
+    -
+      value: -50
+  expanded:
+    -
+      value: false
+  content_translation_source:
+    -
+      value: und
+  content_translation_outdated:
+    -
+      value: false
+  content_translation_uid:
+    -
+      target_id: 1
+  content_translation_status:
+    -
+      value: true
+  content_translation_created:
+    -
+      value: 1716899070
+translations:
+  de:
+    title:
+      -
+        value: 'Meta item 1 DE'
+    content_translation_source:
+      -
+        value: en
+    content_translation_outdated:
+      -
+        value: false
+    content_translation_uid:
+      -
+        target_id: 1
+    content_translation_status:
+      -
+        value: true
+    content_translation_created:
+      -
+        value: 1716900444
diff --git a/packages/drupal/test_content/content/menu_link_content/72904161-a94f-4934-98aa-f4b67e2dc9d5.yml b/packages/drupal/test_content/content/menu_link_content/72904161-a94f-4934-98aa-f4b67e2dc9d5.yml
new file mode 100644
index 000000000..34c48f445
--- /dev/null
+++ b/packages/drupal/test_content/content/menu_link_content/72904161-a94f-4934-98aa-f4b67e2dc9d5.yml
@@ -0,0 +1,73 @@
+_meta:
+  version: '1.0'
+  entity_type: menu_link_content
+  uuid: 72904161-a94f-4934-98aa-f4b67e2dc9d5
+  bundle: menu_link_content
+  default_langcode: en
+  depends:
+    679de789-7c88-494e-866d-062c2abf8fbb: menu_link_content
+default:
+  enabled:
+    -
+      value: true
+  title:
+    -
+      value: 'Meta item child - should be ignored'
+  menu_name:
+    -
+      value: meta
+  link:
+    -
+      uri: 'internal:/'
+      title: ''
+      options: {  }
+  external:
+    -
+      value: false
+  rediscover:
+    -
+      value: true
+  weight:
+    -
+      value: -50
+  expanded:
+    -
+      value: false
+  parent:
+    -
+      value: 'menu_link_content:679de789-7c88-494e-866d-062c2abf8fbb'
+  content_translation_source:
+    -
+      value: und
+  content_translation_outdated:
+    -
+      value: false
+  content_translation_uid:
+    -
+      target_id: 1
+  content_translation_status:
+    -
+      value: true
+  content_translation_created:
+    -
+      value: 1716899647
+translations:
+  de:
+    title:
+      -
+        value: 'Meta item child - should be ignored DE'
+    content_translation_source:
+      -
+        value: en
+    content_translation_outdated:
+      -
+        value: false
+    content_translation_uid:
+      -
+        target_id: 1
+    content_translation_status:
+      -
+        value: true
+    content_translation_created:
+      -
+        value: 1716900507
diff --git a/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml b/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml
index dfac09fa5..9c608e7ff 100644
--- a/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml
+++ b/packages/drupal/test_content/content/node/a397ca48-8fad-411e-8901-0eba2feb989c.yml
@@ -11,43 +11,31 @@ _meta:
     72187a1f-3e48-4b45-a9b7-189c6fd7ee26: media
 default:
   revision_uid:
-    -
-      target_id: 1
+    - target_id: 1
   status:
-    -
-      value: true
+    - value: true
   uid:
-    -
-      target_id: 1
+    - target_id: 1
   title:
-    -
-      value: 'Blocks: complete'
+    - value: 'Blocks: complete'
   created:
-    -
-      value: 1686759493
+    - value: 1686759493
   promote:
-    -
-      value: false
+    - value: false
   sticky:
-    -
-      value: false
+    - value: false
   moderation_state:
-    -
-      value: published
+    - value: published
   path:
-    -
-      alias: /blocks-complete
+    - alias: /blocks-complete
       langcode: en
       pathauto: 0
   content_translation_source:
-    -
-      value: und
+    - value: und
   content_translation_outdated:
-    -
-      value: false
+    - value: false
   body:
-    -
-      value: |-
+    - value: |-
         <!-- wp:custom/hero {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"],"headline":"All kinds of blocks with maximum data","lead":"Lead text","ctaUrl":"https://example.com","ctaText":"CTA text","formId":"contact"} /-->
 
         <!-- wp:custom/content -->
@@ -143,40 +131,29 @@ default:
 translations:
   de:
     status:
-      -
-        value: true
+      - value: true
     uid:
-      -
-        target_id: 1
+      - target_id: 1
     title:
-      -
-        value: 'Blocks: complete DE'
+      - value: 'Blocks: complete DE'
     created:
-      -
-        value: 1687338353
+      - value: 1687338353
     promote:
-      -
-        value: false
+      - value: false
     sticky:
-      -
-        value: false
+      - value: false
     moderation_state:
-      -
-        value: published
+      - value: published
     path:
-      -
-        alias: /blocks-complete
+      - alias: /blocks-complete
         langcode: de
         pathauto: 0
     content_translation_source:
-      -
-        value: en
+      - value: en
     content_translation_outdated:
-      -
-        value: false
+      - value: false
     body:
-      -
-        value: |-
+      - value: |-
           <!-- wp:custom/hero {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"],"headline":"All kinds of blocks with maximum data DE","lead":"Lead text DE"} /-->
 
           <!-- wp:custom/content -->
@@ -215,4 +192,4 @@ translations:
           <!-- /wp:paragraph -->
           <!-- /wp:custom/content -->
         format: gutenberg
-        summary: ''
+        summary: ''
\ No newline at end of file
diff --git a/packages/schema/src/operations/Frame.gql b/packages/schema/src/operations/Frame.gql
index 71e0dca6f..fe939e41b 100644
--- a/packages/schema/src/operations/Frame.gql
+++ b/packages/schema/src/operations/Frame.gql
@@ -7,6 +7,9 @@ query Frame {
       }
     }
   }
+  metaNavigation: metaNavigations {
+    ...Navigation
+  }
   mainNavigation: mainNavigations {
     ...Navigation
   }
diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql
index 4c0150a42..4df4d5852 100644
--- a/packages/schema/src/schema.graphql
+++ b/packages/schema/src/schema.graphql
@@ -118,6 +118,11 @@ interface Navigation {
   items: [NavigationItem]!
 }
 
+type MetaNavigation implements Navigation @menu(menu_id: "meta") {
+  locale: Locale! @resolveEntityLanguage
+  items: [NavigationItem]! @lang @resolveMenuItems(max_level: 1)
+}
+
 type MainNavigation implements Navigation @menu(menu_id: "main") {
   locale: Locale! @resolveEntityLanguage
   items: [NavigationItem]! @lang @resolveMenuItems
@@ -277,6 +282,18 @@ enum CTAIconPosition {
   BEFORE
 }
 
+type BlockImageWithText @type(id: "custom/image-with-text") {
+  image: MediaImage @resolveEditorBlockMedia
+  textContent: BlockMarkup @resolveEditorBlockChildren @seek(pos: 0)
+}
+
+type BlockQuote @type(id: "custom/quote") {
+  quote: Markup @resolveEditorBlockAttribute(key: "quote")
+  author: String @resolveEditorBlockAttribute(key: "author")
+  role: String @resolveEditorBlockAttribute(key: "role")
+  image: MediaImage @resolveEditorBlockMedia
+}
+
 type BlockImageWithText @type(id: "custom/image-with-text") {
   image: MediaImage @resolveEditorBlockMedia
   imagePosition: ImagePosition!
@@ -328,6 +345,10 @@ type Query {
   previewDrupalPage(id: ID!, rid: ID, locale: String!): DrupalPage
     @fetchEntity(type: "node", id: "$id", rid: "$rid", language: "$locale")
 
+  metaNavigations: [MetaNavigation]
+    @gatsbyNodes(type: "MetaNavigation")
+    @menuTranslations(menu_id: "meta")
+
   mainNavigations: [MainNavigation]
     @gatsbyNodes(type: "MainNavigation")
     @menuTranslations(menu_id: "main")
diff --git a/packages/ui/src/components/Client/DesktopMenu.tsx b/packages/ui/src/components/Client/DesktopMenu.tsx
index 756031972..db77d54de 100644
--- a/packages/ui/src/components/Client/DesktopMenu.tsx
+++ b/packages/ui/src/components/Client/DesktopMenu.tsx
@@ -34,7 +34,7 @@ export function DesktopMenuDropDown({
           <PopoverButton
             className={clsx(
               'flex items-center text-base font-medium ml-8 hover:text-blue-600',
-              open ? 'text-blue-600' : 'text-gray-600',
+              open ? 'text-blue-600' : 'text-gray-900',
             )}
             onClick={() => avoidFocusOnClick()}
           >
diff --git a/packages/ui/src/components/Client/MobileMenu.tsx b/packages/ui/src/components/Client/MobileMenu.tsx
index 022402639..e44e0f829 100644
--- a/packages/ui/src/components/Client/MobileMenu.tsx
+++ b/packages/ui/src/components/Client/MobileMenu.tsx
@@ -97,7 +97,7 @@ export function MobileMenuDropdown({
             className={clsx(
               'flex w-full items-center justify-between py-4 leading-[1.25rem]',
               open && 'text-blue-600',
-              !open && 'text-gray-600',
+              !open && 'text-gray-900',
               open && nestLevel === 1 && 'bg-blue-100',
               !open && nestLevel === 1 && 'border-b border-b-blue-100',
               nestLevel === 1 && 'px-8 text-lg',
diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx
index 9a7c6d0e5..6fafb4f0a 100644
--- a/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx
+++ b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx
@@ -1,5 +1,5 @@
 import { FrameQuery, OperationExecutor } from '@custom/schema';
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { Default as FrameStory } from '../Routes/Frame.stories';
@@ -9,11 +9,7 @@ export default {
   component: BreadCrumbs,
   parameters: {
     layout: 'fullscreen',
-    location: new URL('local:/gatsby-turbo'),
   },
-} satisfies Meta<typeof BreadCrumbs>;
-
-export const Default = {
   render: () => {
     return (
       <OperationExecutor executor={FrameStory.args} id={FrameQuery}>
@@ -21,4 +17,16 @@ export const Default = {
       </OperationExecutor>
     );
   },
+} satisfies Meta<typeof BreadCrumbs>;
+
+export const Simple = {
+  parameters: {
+    location: new URL('local:/gatsby-turbo'),
+  },
+};
+
+export const Truncated: StoryObj<typeof BreadCrumbs> = {
+  parameters: {
+    location: new URL('local:/gatsby-turbo-more-more-more'),
+  },
 };
diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.tsx
index 431291137..6d17d7194 100644
--- a/packages/ui/src/components/Molecules/Breadcrumbs.tsx
+++ b/packages/ui/src/components/Molecules/Breadcrumbs.tsx
@@ -1,13 +1,25 @@
 import { Link } from '@custom/schema';
-import { ChevronRightIcon } from '@heroicons/react/24/outline';
+import {
+  ChevronRightIcon,
+  EllipsisHorizontalIcon,
+} from '@heroicons/react/24/outline';
 import clsx from 'clsx';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { isTruthy } from '../../utils/isTruthy';
+import { truncateString } from '../../utils/stringTruncation';
 import { useBreadcrumbs } from '../Routes/Menu';
 
 export function BreadCrumbs() {
   const breadcrumbs = useBreadcrumbs();
+  const [hideInnerBreadcrumbs, setHideInnerBreadcrumbs] = useState(false);
+  const [toggleMoreBreadcrumbs, setToggleMoreBreadcrumbs] = useState(false);
+
+  useEffect(() => {
+    breadcrumbs.length > 5 &&
+      toggleMoreBreadcrumbs === false &&
+      setHideInnerBreadcrumbs(true);
+  }, [hideInnerBreadcrumbs, breadcrumbs, toggleMoreBreadcrumbs]);
 
   if (!breadcrumbs.length) {
     return null;
@@ -16,38 +28,91 @@ export function BreadCrumbs() {
   return (
     <div className="container-page">
       <nav className="pt-5 container-content" aria-label="Breadcrumb">
-        <ol className={'rounded-lg inline-block py-2.5'}>
+        <ol
+          className={
+            'rounded-lg items-center overflow-x-scroll flex py-2.5 container'
+          }
+        >
           {breadcrumbs?.filter(isTruthy).map(({ title, target, id }, index) => (
-            <li className="inline-flex items-center" key={id}>
-              {index > 0 ? (
-                <div aria-hidden="true">
-                  <ChevronRightIcon className={'w-4 h-4 text-gray-400 mr-4'} />
-                </div>
-              ) : null}
-              <Link
-                href={target}
-                title={title}
+            <>
+              {hideInnerBreadcrumbs === true && index === 1 && (
+                <>
+                  <div aria-hidden="true">
+                    <ChevronRightIcon
+                      className={
+                        'hidden sm:flex rotate-180 sm:rotate-0 w-4 h-4 text-gray-400 mr-4'
+                      }
+                    />
+                  </div>
+                  <button
+                    className="mr-4 hidden sm:flex items-center rounded-sm px-1 py-2 bg-gray-100 hover:bg-gray-200 h-2"
+                    onClick={() => {
+                      setHideInnerBreadcrumbs(false);
+                      setToggleMoreBreadcrumbs(true);
+                    }}
+                  >
+                    <EllipsisHorizontalIcon className="w-4 text-gray-900" />
+                  </button>
+                </>
+              )}
+              <li
                 className={clsx(
-                  'inline-flex items-center text-sm font-medium hover:text-blue-600',
-                  index === breadcrumbs?.length - 1
-                    ? 'pointer-events-none text-gray-500'
-                    : 'text-gray-700',
+                  '',
+                  index < breadcrumbs.length - 1
+                    ? 'hidden sm:inline-flex sm:items-center'
+                    : 'inline-flex items-center',
                 )}
+                key={id}
               >
-                {target === '/' && (
-                  <svg
-                    className="w-4 h-4 mr-4"
+                {index > 0 ? (
+                  <div
                     aria-hidden="true"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
+                    className={clsx(
+                      hideInnerBreadcrumbs === true &&
+                        index > 0 &&
+                        index < breadcrumbs.length - 1 &&
+                        'hidden',
+                    )}
                   >
-                    <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
-                  </svg>
-                )}
-                <span className="mr-4">{title}</span>
-              </Link>
-            </li>
+                    <ChevronRightIcon
+                      className={
+                        'rotate-180 sm:rotate-0 w-4 h-4 text-gray-400 mr-4'
+                      }
+                    />
+                  </div>
+                ) : null}
+                <Link
+                  href={target}
+                  title={title}
+                  className={clsx(
+                    'inline-flex items-center text-sm font-medium hover:text-blue-600 whitespace-nowrap',
+                    index < breadcrumbs.length - 1 &&
+                      hideInnerBreadcrumbs !== true
+                      ? 'hidden sm:inline-flex sm:items-center'
+                      : 'inline-flex items-center',
+                    hideInnerBreadcrumbs === true &&
+                      index > 0 &&
+                      index < breadcrumbs.length - 1 &&
+                      'hidden',
+                  )}
+                >
+                  {target === '/' && (
+                    <svg
+                      className="w-4 h-4 mr-4"
+                      aria-hidden="true"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
+                    </svg>
+                  )}
+                  <span className="mr-4">
+                    {truncateString({ value: title, maxChar: 20 })}
+                  </span>
+                </Link>
+              </li>
+            </>
           ))}
         </ol>
       </nav>
diff --git a/packages/ui/src/components/Molecules/FadeUp.tsx b/packages/ui/src/components/Molecules/FadeUp.tsx
new file mode 100644
index 000000000..3c592af7e
--- /dev/null
+++ b/packages/ui/src/components/Molecules/FadeUp.tsx
@@ -0,0 +1,47 @@
+'use client';
+import clsx from 'clsx';
+import { motion } from 'framer-motion';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
+
+export function FadeUp({
+  yGap,
+  children,
+  className,
+}: PropsWithChildren<{ yGap: number; className?: string }>) {
+  const [reducedMotion, setReducedMotion] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+    const handleChange = () => {
+      setReducedMotion(mediaQuery.matches);
+    };
+
+    // Set the initial value
+    handleChange();
+
+    // Add the event listener
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      // Clean up the event listener on unmount
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [reducedMotion]);
+
+  console.log('reducedMotion:', reducedMotion);
+  return (
+    <motion.div
+      className={clsx(
+        className,
+        reducedMotion ? 'reducedMotion: On' : 'reducedMotion: Off',
+      )}
+      transition={{ duration: 0.8 }}
+      style={{ opacity: reducedMotion ? 1 : 0, y: reducedMotion ? 0 : yGap }}
+      viewport={{ once: true }}
+      whileInView={{ opacity: 1, y: 0 }}
+    >
+      {children}
+    </motion.div>
+  );
+}
diff --git a/packages/ui/src/components/Molecules/LanguageSwitcher.tsx b/packages/ui/src/components/Molecules/LanguageSwitcher.tsx
index 234c27439..5dc030e15 100644
--- a/packages/ui/src/components/Molecules/LanguageSwitcher.tsx
+++ b/packages/ui/src/components/Molecules/LanguageSwitcher.tsx
@@ -1,30 +1,90 @@
 import { Link, Locale, useLocation } from '@custom/schema';
+import { Menu, Transition } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import clsx from 'clsx';
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { useTranslations } from '../../utils/translations';
 
+function getLanguageName(locale: string) {
+  const languageNames = new Intl.DisplayNames([locale], {
+    type: 'language',
+  });
+  return languageNames.of(locale);
+}
+
 export function LanguageSwitcher() {
   const translations = useTranslations();
   const [location] = useLocation();
+
   return (
-    <ul className="flex gap-2 uppercase">
-      {Object.values(Locale).map((locale) => (
-        <li key={locale}>
-          {translations[locale] ? (
-            <Link
-              href={translations[locale]!}
-              className={clsx('text-gray-500', {
-                underline: location.pathname !== translations[locale],
-              })}
-            >
-              {locale}
-            </Link>
-          ) : (
-            <span className="text-gray-400">{locale}</span>
-          )}
-        </li>
-      ))}
-    </ul>
+    <div className="relative inline-block text-left">
+      <Menu as="div" className="relative inline-block text-left">
+        <div>
+          {Object.values(Locale).map((locale) => (
+            <React.Fragment key={locale}>
+              {translations[locale] &&
+              location.pathname !== translations[locale] ? null : (
+                <Menu.Button className="inline-flex justify-center w-full rounded-md font-medium bg-white text-sm hover:text-blue-600">
+                  {getLanguageName(locale)}
+                  <ChevronDownIcon
+                    className="ml-1 h-5 w-5"
+                    aria-hidden="true"
+                  />
+                </Menu.Button>
+              )}
+            </React.Fragment>
+          ))}
+        </div>
+
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-200"
+          enterFrom="opacity-0 translate-y-1"
+          enterTo="opacity-100 translate-y-0"
+          leave="transition ease-in duration-150"
+          leaveFrom="opacity-100 translate-y-0"
+          leaveTo="opacity-0 translate-y-1"
+        >
+          <Menu.Items className="origin-top-right absolute z-50 right-0 mt-2 w-48 rounded bg-white shadow-md ring-1 ring-gray-100">
+            <div className="py-1">
+              {Object.values(Locale).map((locale) => (
+                <React.Fragment key={locale}>
+                  {translations[locale] &&
+                  location.pathname !== translations[locale] ? (
+                    <Menu.Item>
+                      {({ focus }) =>
+                        translations[locale] ? (
+                          <Link
+                            href={translations[locale]!}
+                            className={clsx(
+                              focus ? 'text-blue-600' : 'text-gray-500',
+                              'block px-4 py-2 text-sm',
+                            )}
+                          >
+                            {getLanguageName(locale as string)}
+                          </Link>
+                        ) : (
+                          <span
+                            className={clsx(
+                              focus
+                                ? 'bg-gray-100 text-gray-900'
+                                : 'text-gray-500',
+                              'block px-3.5 py-2 text-sm',
+                            )}
+                          >
+                            {getLanguageName(locale as string)}
+                          </span>
+                        )
+                      }
+                    </Menu.Item>
+                  ) : null}
+                </React.Fragment>
+              ))}
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </div>
   );
 }
diff --git a/packages/ui/src/components/Organisms/Footer.tsx b/packages/ui/src/components/Organisms/Footer.tsx
index 73dc34bdf..9db0493f1 100644
--- a/packages/ui/src/components/Organisms/Footer.tsx
+++ b/packages/ui/src/components/Organisms/Footer.tsx
@@ -22,7 +22,7 @@ export function Footer() {
     <footer
       id="footer"
       className={
-        'container-page relative z-10 bg-gray-100 text-gray-500 py-4 lg:py-16'
+        'container-page relative z-10 bg-gray-100 text-gray-500 py-12 lg:py-16'
       }
     >
       <h2 className={'sr-only'}>Footer</h2>
@@ -130,7 +130,9 @@ export function Footer() {
           </div>
           <nav>
             <ul
-              className={'md:ml-[5.625rem] flex flex-wrap justify-between grow'}
+              className={
+                '!pl-0 md:ml-[5.625rem] flex flex-wrap justify-between grow'
+              }
               aria-label="Footer Primary"
             >
               {items.map((item, key) => (
@@ -138,14 +140,14 @@ export function Footer() {
                   <li
                     key={key + 'header'}
                     className={
-                      'block mb-3 lg:mr-5 last:mr-0 md:mb-0 md:text-left w-1/2 lg:w-auto'
+                      'block mb-3 pr-5 lg:pr-8 last:pr-0 md:mb-0 md:text-left w-1/2 lg:w-auto'
                     }
                   >
                     {item.target ? (
                       <Link
                         href={item.target!}
                         className={
-                          'text-gray-900 block hover:underline transition-all font-bold text-[0.875rem] leading-[1.313rem] uppercase mb-4'
+                          'text-gray-900 block hover:underline transition-all font-semibold text-[0.875rem] leading-[1.313rem] uppercase mb-4'
                         }
                       >
                         {item.title}
@@ -153,7 +155,7 @@ export function Footer() {
                     ) : (
                       <span
                         className={
-                          'block transition-all font-bold text-[0.875rem] leading-[1.313rem] uppercase mb-4'
+                          'block transition-all font-semibold text-[0.875rem] leading-[1.313rem] uppercase mb-4'
                         }
                       >
                         {item.title}
@@ -164,7 +166,7 @@ export function Footer() {
                           <Link
                             key={child.target}
                             href={child.target}
-                            className="block transition-all text-base mb-4 hover:underline"
+                            className="text-gray-500 font-normal block transition-all text-base mb-4 hover:underline"
                           >
                             {child.title}
                           </Link>
diff --git a/packages/ui/src/components/Organisms/Header.stories.tsx b/packages/ui/src/components/Organisms/Header.stories.tsx
index 8450caff8..9b961a583 100644
--- a/packages/ui/src/components/Organisms/Header.stories.tsx
+++ b/packages/ui/src/components/Organisms/Header.stories.tsx
@@ -68,7 +68,36 @@ export const Idle = {
             id: '8',
             title: 'Super Gatsby Turbo',
             target: '/gatsby-turbo' as Url,
-            parent: '6',
+            parent: '7',
+          },
+          {
+            id: '9',
+            title: 'Drupal Turbo This is a little extra long',
+            target: '/gatsby-turbo-more-more' as Url,
+            parent: '8',
+          },
+          {
+            id: '10',
+            title: 'Drupal Turbo This is a little extra long breadcrumb title',
+            target: '/gatsby-turbo-more-more-more' as Url,
+            parent: '9',
+          },
+        ],
+      },
+    ],
+    metaNavigation: [
+      {
+        locale: Locale.En,
+        items: [
+          {
+            id: '1',
+            title: 'Imprint',
+            target: '/imprint' as Url,
+          },
+          {
+            id: '2',
+            title: 'Privacy',
+            target: '/privacy' as Url,
           },
         ],
       },
diff --git a/packages/ui/src/components/Organisms/Header.tsx b/packages/ui/src/components/Organisms/Header.tsx
index ba89fc7ea..b33b8fae2 100644
--- a/packages/ui/src/components/Organisms/Header.tsx
+++ b/packages/ui/src/components/Organisms/Header.tsx
@@ -27,17 +27,39 @@ function useHeaderNavigation(lang: string = 'en') {
       ?.items.filter(isTruthy) || []
   );
 }
+function useMetaNavigation(lang: string = 'en') {
+  return (
+    useOperation(FrameQuery)
+      .data?.metaNavigation?.filter((nav) => nav?.locale === lang)
+      .pop()
+      ?.items.filter(isTruthy) || []
+  );
+}
 
 export function Header() {
   const intl = useIntl();
   const items = buildNavigationTree(useHeaderNavigation(intl.locale));
 
+  const metaItems = buildNavigationTree(useMetaNavigation(intl.locale));
+
   return (
     <MobileMenuProvider>
       <div className="container-page">
         <header className="container-content">
-          <div className="hidden md:flex">
-            <UserActions iconWidth="16" iconHeight="16" />
+          <div className="hidden md:flex py-2 border-b border-gray-200 md:align-bottom md:gap-x-8">
+            <nav className={'flex justify-end gap-x-6 w-full'}>
+              {metaItems.map((item, key) => (
+                <Link
+                  key={key}
+                  href={item.target}
+                  className="text-sm font-medium text-gray-900 hover:text-blue-600 leading-6 mt-px"
+                  activeClassName={'font-bold text-blue-200'}
+                >
+                  {item.title}
+                </Link>
+              ))}
+            </nav>
+            <UserActions />
           </div>
           <nav
             className="border-b border-b-gray-200 z-20 relative mx-auto flex items-center justify-between py-6"
@@ -64,12 +86,7 @@ export function Header() {
               </Link>
             </div>
             <div className="flex md:hidden">
-              <UserActions
-                iconWidth="23"
-                iconHeight="23"
-                showIconText={false}
-                isDesktop={false}
-              />
+              <UserActions />
               <MobileMenuButton className="inline-flex items-center justify-center rounded-md text-gray-700 ml-5 sm:ml-7 cursor-pointer"></MobileMenuButton>
             </div>
             <div className={'hidden md:flex'}>
@@ -78,7 +95,7 @@ export function Header() {
                   <Link
                     key={key}
                     href={item.target}
-                    className="text-base font-medium text-gray-600 ml-8 hover:text-blue-600"
+                    className="text-base font-medium text-gray-900 ml-8 hover:text-blue-600"
                     activeClassName={'font-bold text-blue-200'}
                   >
                     {item.title}
@@ -124,15 +141,15 @@ export function Header() {
             </div>
           </nav>
           <MobileMenu>
-            <div className="mt-6 flow-root">
-              <div className="-my-6 divide-y divide-gray-500/10">
+            <div className="flow-root">
+              <div className="divide-y divide-gray-500/10">
                 <div>
                   {items.map((item) =>
                     item.children.length === 0 ? (
                       <Link
                         key={item.title}
                         href={item.target}
-                        className="block hover:text-blue-600 py-4 px-8 text-lg text-gray-600 border-b border-b-solid border-b-blue-100"
+                        className="block hover:text-blue-600 py-4 px-8 text-lg text-gray-900 border-b border-b-blue-100"
                       >
                         {item.title}
                       </Link>
@@ -146,7 +163,7 @@ export function Header() {
                           key={item.target}
                           href={item.target}
                           title={item.title}
-                          className="block hover:text-blue-600 py-4 pr-8 pl-10 text-base text-gray-600"
+                          className="block hover:text-blue-600 py-4 pr-8 pl-10 text-base text-gray-900"
                         >
                           {item.title}
                         </Link>
@@ -156,7 +173,7 @@ export function Header() {
                               key={child.target}
                               href={child.target}
                               title={child.title}
-                              className="block hover:text-blue-600 py-4 pr-8 pl-10 text-base text-gray-600"
+                              className="block hover:text-blue-600 py-4 pr-8 pl-10 text-base text-gray-900"
                             >
                               {child.title}
                             </Link>
@@ -182,6 +199,18 @@ export function Header() {
                 </div>
               </div>
             </div>
+            <nav className={'flex flex-col gap-y-6 w-full mt-10 px-8'}>
+              {metaItems.map((item, key) => (
+                <Link
+                  key={key}
+                  href={item.target}
+                  className="text-base font-medium text-gray-900 hover:text-blue-600"
+                  activeClassName={'font-bold text-blue-200'}
+                >
+                  {item.title}
+                </Link>
+              ))}
+            </nav>
           </MobileMenu>
         </header>
       </div>
@@ -189,21 +218,9 @@ export function Header() {
   );
 }
 
-function UserActions({
-  isDesktop = true,
-}: {
-  iconWidth: string;
-  iconHeight: string;
-  showIconText?: boolean;
-  isDesktop?: boolean;
-}) {
+function UserActions() {
   return (
-    <div
-      className={clsx(
-        'flex w-full justify-end md:py-3.5 md:px-3 0',
-        isDesktop && 'border-b border-gray-300 border-opacity-30',
-      )}
-    >
+    <div>
       <LanguageSwitcher />
     </div>
   );
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx
index 363257b8c..2a74999f9 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx
@@ -8,31 +8,35 @@ import {
 import clsx from 'clsx';
 import React from 'react';
 
+import { FadeUp } from '../../Molecules/FadeUp';
+
 export function BlockCta(props: BlockCtaFragment) {
   return (
-    <div className="container-page">
-      <div className="container-content">
-        <div className="container-text my-2 lg:my-3">
-          <Link
-            className={clsx(
-              {
-                'flex-row-reverse':
-                  props.iconPosition === CtaIconPosition.Before,
-              },
-              'text-blue-600 hover:text-white border border-blue-600 hover:bg-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg  py-2 px-3 gap-2 flex flex-row items-center text-xs leading-[1.125rem] font-medium text-center w-fit transition-all duration-200 ease-in-out group',
-            )}
-            href={props.url ?? ('/' as Url)}
-            target={props.openInNewTab ? '_blank' : '_self'}
-            rel="noreferrer"
-          >
-            {props.text}
-            {!!props.icon && props.icon === CtaIconType.Arrow && (
-              <ArrowRightIcon />
-            )}
-          </Link>
+    <FadeUp yGap={50}>
+      <div className="container-page">
+        <div className="container-content">
+          <div className="container-text my-2 lg:my-3">
+            <Link
+              className={clsx(
+                {
+                  'flex-row-reverse':
+                    props.iconPosition === CtaIconPosition.Before,
+                },
+                'text-blue-600 hover:text-white border border-blue-600 hover:bg-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg  py-2 px-3 gap-2 flex flex-row items-center text-xs leading-[1.125rem] font-medium text-center w-fit transition-all duration-200 ease-in-out group',
+              )}
+              href={props.url ?? ('/' as Url)}
+              target={props.openInNewTab ? '_blank' : '_self'}
+              rel="noreferrer"
+            >
+              {props.text}
+              {!!props.icon && props.icon === CtaIconType.Arrow && (
+                <ArrowRightIcon />
+              )}
+            </Link>
+          </div>
         </div>
       </div>
-    </div>
+    </FadeUp>
   );
 }
 
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx b/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx
index 5190988c5..ff22d3f4a 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockForm.tsx
@@ -19,7 +19,7 @@ export function BlockForm(
   }
 
   return (
-    <div className="container-page">
+    <div className="container-page my-10">
       <div className="container-content">
         <div className={clsx('container-text', props.className)}>
           <SilverbackIframe
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
index 271c36326..0c6d05b7a 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 
+import { FadeUp } from '../../Molecules/FadeUp';
+
 export function BlockHorizontalSeparator() {
   return (
-    <div className="container-page">
+    <FadeUp yGap={50} className="container-page my-8">
       <div className="container-content">
-        <hr className="container-text my-8 text-gray-200" />
+        <hr className="container-text text-gray-200" />
       </div>
-    </div>
+    </FadeUp>
   );
 }
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx b/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx
index 0b3472b57..98ca13bbe 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx
@@ -1,20 +1,27 @@
 import { BlockImageTeasersFragment, Image, Link } from '@custom/schema';
+import clsx from 'clsx';
 import React from 'react';
 
 import { isTruthy } from '../../../utils/isTruthy';
+import { FadeUp } from '../../Molecules/FadeUp';
 
 export function BlockImageTeasers(props: BlockImageTeasersFragment) {
   return (
-    // eslint-disable-next-line tailwindcss/no-custom-classname
-    <section className="container-page my-16 block-background-image-cards">
-      <div className="container-content text-center">
-        <div className="grid grid-cols-2 gap-2">
-          {props.teasers.filter(isTruthy).map((teaser, index) => (
-            <BlockImageTeaser key={index} {...teaser} />
-          ))}
+    <FadeUp yGap={50} className="my-10 block-background-image-cards">
+      <section>
+        <div className="text-center">
+          <div
+            className={clsx('grid gap-2', {
+              'grid-cols-2': props.teasers.filter(isTruthy).length > 1,
+            })}
+          >
+            {props.teasers.filter(isTruthy).map((teaser, index) => (
+              <BlockImageTeaser key={index} {...teaser} />
+            ))}
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
+    </FadeUp>
   );
 }
 
@@ -24,10 +31,10 @@ export function BlockImageTeaser(
   props: BlockImageTeasersFragment['teasers'][0],
 ) {
   return (
-    <div className="p-8 col-span-2 lg:col-span-1 text-left h-72 lg:h-96 relative bg-gray-900">
+    <div className="p-8 pl-5 md:pl-14 lg:pl-20 col-span-2 lg:col-span-1 text-left h-72 lg:h-96 relative bg-gray-900">
       {props.image ? (
         <Image
-          className="object-cover w-full h-72 lg:h-96 mb-5 absolute top-0 left-0"
+          className="object-cover w-full h-72 lg:h-96 absolute top-0 left-0"
           source={props.image.source}
           alt={props.image.alt}
         />
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockImageWithText.tsx b/packages/ui/src/components/Organisms/PageContent/BlockImageWithText.tsx
index 26cbc5406..f179c667f 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockImageWithText.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockImageWithText.tsx
@@ -6,38 +6,41 @@ import {
 import clsx from 'clsx';
 import React from 'react';
 
+import { FadeUp } from '../../Molecules/FadeUp';
 import { BlockMarkup } from './BlockMarkup';
 
 export function BlockImageWithText(props: BlockImageWithTextFragment) {
   return (
-    <div className="container-page">
-      <div className="container-content my-12 lg:my-16">
-        <div
-          className={clsx(
-            'flex flex-col lg:flex-row gap-8 lg:gap-16 items-start lg:items-center',
-            {
-              'lg:flex-row-reverse':
-                props.imagePosition === ImagePosition.Right,
-            },
-          )}
-        >
-          {!!props.image?.source && (
-            <div className={'lg:w-1/2 self-start'}>
-              <Image
-                className="object-cover w-full"
-                source={props.image.source}
-                alt={props.image.alt || ''}
-              />
-            </div>
-          )}
-
-          <div className={'lg:w-1/2 nested-container'}>
-            {props.textContent?.markup && (
-              <BlockMarkup {...props.textContent} />
+    <FadeUp yGap={50}>
+      <div className="container-page">
+        <div className="container-content my-12 lg:my-16">
+          <div
+            className={clsx(
+              'flex flex-col lg:flex-row gap-8 lg:gap-16 items-start lg:items-center',
+              {
+                'lg:flex-row-reverse':
+                  props.imagePosition === ImagePosition.Right,
+              },
+            )}
+          >
+            {!!props.image?.source && (
+              <div className={'lg:w-1/2 self-start'}>
+                <Image
+                  className="object-cover w-full"
+                  source={props.image.source}
+                  alt={props.image.alt || ''}
+                />
+              </div>
             )}
+
+            <div className={'lg:w-1/2 nested-container'}>
+              {props.textContent?.markup && (
+                <BlockMarkup {...props.textContent} />
+              )}
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </FadeUp>
   );
 }
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
index 0a6746f30..d59b68162 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockMarkup.tsx
@@ -5,6 +5,8 @@ import { selectAll } from 'hast-util-select';
 import React, { PropsWithChildren } from 'react';
 import { Plugin } from 'unified';
 
+import { FadeUp } from '../../Molecules/FadeUp';
+
 const unorderedItems: Plugin<[], Element> = () => (tree) => {
   selectAll('ul > li', tree).forEach((node) => {
     node.properties!.unordered = true;
@@ -13,7 +15,7 @@ const unorderedItems: Plugin<[], Element> = () => (tree) => {
 
 export function BlockMarkup(props: BlockMarkupFragment) {
   return (
-    <div className="container-page mt-10">
+    <FadeUp yGap={50} className="container-page my-10">
       <div className="container-content">
         <div className="container-text">
           <div
@@ -51,6 +53,6 @@ export function BlockMarkup(props: BlockMarkupFragment) {
           </div>
         </div>
       </div>
-    </div>
+    </FadeUp>
   );
 }
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx b/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx
index 532bd8697..5a7119563 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockMedia.tsx
@@ -2,27 +2,25 @@ import { BlockMediaFragment, Html, Image } from '@custom/schema';
 import React from 'react';
 
 import { UnreachableCaseError } from '../../../utils/unreachable-case-error';
-import { ScrollPop } from '../../Client/ScrollPop';
+import { FadeUp } from '../../Molecules/FadeUp';
 
 export function BlockMedia(props: BlockMediaFragment) {
   if (!props.media) {
     return null;
   }
   return (
-    <ScrollPop>
-      <div className="container-page">
-        <div className="container-content">
-          <figure className="mt-16 container-text">
-            <Media {...props.media} />
-            {props.caption ? (
-              <figcaption className="mt-3 flex justify-center gap-x-2 text-sm leading-6 text-gray-500">
-                <Html markup={props.caption} />
-              </figcaption>
-            ) : null}
-          </figure>
-        </div>
+    <FadeUp yGap={50} className="container-page my-10">
+      <div className="container-content">
+        <figure className="container-text">
+          <Media {...props.media} />
+          {props.caption ? (
+            <figcaption className="mt-3 flex justify-center gap-x-2 text-sm leading-6 text-gray-500">
+              <Html markup={props.caption} />
+            </figcaption>
+          ) : null}
+        </figure>
       </div>
-    </ScrollPop>
+    </FadeUp>
   );
 }
 
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx
index a26e8d355..1ec381e43 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockQuote.tsx
@@ -1,53 +1,59 @@
 import { BlockQuoteFragment, Html, Image } from '@custom/schema';
 import React from 'react';
 
+import { FadeUp } from '../../Molecules/FadeUp';
+
 export function BlockQuote(props: BlockQuoteFragment) {
   return (
-    <div className="container-page">
-      <div className="container-content">
-        <div className="container-text">
-          <div className="prose lg:prose-xl prose-p:text-xl prose-p:font-bold prose-p:leading-8 prose-p:text-[#111928]">
-            <blockquote className="border-l-0 relative pl-0 pb-8 pt-16">
-              <svg
-                width="32"
-                height="24"
-                viewBox="0 0 32 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                role="img"
-                aria-labelledby="quote-svg-title"
-              >
-                <title id="quote-svg-title">Quote Symbol</title>
-                <path
-                  d="M18.6893 24V14.1453C18.6893 6.54 23.664 1.38533 30.6667 0L31.9933 2.868C28.7507 4.09066 26.6667 7.71867 26.6667 10.6667H32V24H18.6893ZM0 24V14.1453C0 6.54 4.99733 1.384 12 0L13.328 2.868C10.084 4.09066 8 7.71867 8 10.6667L13.3107 10.6667V24H0Z"
-                  fill="#9CA3AF"
-                />
-              </svg>
-              <p>{props.quote && <Html markup={props.quote} />}</p>
-              <div className="flex not-prose items-center flex-wrap">
-                {props.image && (
-                  <Image
-                    className="w-6 h-6 rounded-full object-contain mr-3.5 "
-                    source={props.image.source}
-                    alt={props.image.alt || 'Author image'}
+    <FadeUp yGap={50} className="container-page mt-16 mb-8">
+      <div className="container-page">
+        <div className="container-content">
+          <div className="container-text">
+            <div className="prose lg:prose-xl prose-p:text-xl prose-p:font-bold prose-p:leading-8 prose-p:text-[#111928]">
+              <blockquote className="border-l-0 relative pl-0">
+                <svg
+                  width="32"
+                  height="24"
+                  viewBox="0 0 32 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  role="img"
+                  aria-labelledby="quote-svg-title"
+                >
+                  <title id="quote-svg-title">Quote Symbol</title>
+                  <path
+                    d="M18.6893 24V14.1453C18.6893 6.54 23.664 1.38533 30.6667 0L31.9933 2.868C28.7507 4.09066 26.6667 7.71867 26.6667 10.6667H32V24H18.6893ZM0 24V14.1453C0 6.54 4.99733 1.384 12 0L13.328 2.868C10.084 4.09066 8 7.71867 8 10.6667L13.3107 10.6667V24H0Z"
+                    fill="#9CA3AF"
                   />
-                )}
-                <div className="not-italic text-base font-semibold">
-                  {props.author && <p className="not-prose">{props.author}</p>}
+                </svg>
+                <p>{props.quote && <Html markup={props.quote} />}</p>
+                <div className="flex not-prose items-center flex-wrap">
+                  {props.image && (
+                    <Image
+                      className="w-6 h-6 rounded-full object-contain mr-3.5 "
+                      source={props.image.source}
+                      alt={props.image.alt || 'Author image'}
+                    />
+                  )}
+                  <div className="not-italic text-base font-semibold">
+                    {props.author && (
+                      <p className="not-prose">{props.author}</p>
+                    )}
+                  </div>
+                  {props.role && (
+                    <p className="not-prose flex">
+                      <span className="ml-3 text-base">/</span>
+                      <span className="mt-0.5 not-italic text-gray-500 text-sm ml-3">
+                        {props.role}
+                      </span>
+                    </p>
+                  )}
                 </div>
-                {props.role && (
-                  <p className="not-prose flex">
-                    <span className="ml-3 text-base">/</span>
-                    <span className="mt-0.5 not-italic text-gray-500 text-sm ml-3">
-                      {props.role}
-                    </span>
-                  </p>
-                )}
-              </div>
-            </blockquote>
+              </blockquote>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </FadeUp>
   );
 }
diff --git a/packages/ui/src/components/Organisms/PageHero.tsx b/packages/ui/src/components/Organisms/PageHero.tsx
index 237765e00..471b75609 100644
--- a/packages/ui/src/components/Organisms/PageHero.tsx
+++ b/packages/ui/src/components/Organisms/PageHero.tsx
@@ -17,7 +17,7 @@ export function PageHero(props: NonNullable<PageFragment['hero']>) {
 function DefaultHero(props: NonNullable<PageFragment['hero']>) {
   return (
     <>
-      <section className="default-hero relative isolate overflow-hidden bg-gray-900 pt-12 pb-24 min-h-[20rem] lg:min-h-[33rem]">
+      <section className="default-hero relative isolate overflow-hidden bg-gray-900 pt-12 pb-24 min-h-[20rem] lg:min-h-[33rem] container-page">
         {props.image ? (
           <Image
             alt={props.image.alt}
@@ -27,7 +27,7 @@ function DefaultHero(props: NonNullable<PageFragment['hero']>) {
             data-test-id={'hero-image'}
           />
         ) : null}
-        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="container-content">
           <div className="mx-auto max-w-2xl lg:mx-0">
             <h1 className="text-5xl font-extrabold tracking-tight leading-tight text-white drop-shadow-md">
               {props.headline}
@@ -82,33 +82,37 @@ function FormHero(props: NonNullable<PageFragment['hero']>) {
           </>
         ) : null}
 
-        <div className="px-4 pb-[22rem] lg:pb-96 mx-auto max-w-screen-sm text-center lg:px-6 relative">
-          <h1 className="text-4xl tracking-tight font-extrabold text-white drop-shadow-md">
-            {props.headline}
-          </h1>
-          {props.lead ? (
-            <p className="mt-6 text-lg leading-4 text-gray-300">{props.lead}</p>
-          ) : null}
-          {props.ctaText && props.ctaUrl ? (
-            <Link
-              href={props.ctaUrl}
-              className="mt-7 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-            >
-              <svg
-                className="mr-2 -ml-1 w-4 h-4"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
+        <div className="px-4 pb-[22rem] lg:pb-96 container-page text-center lg:px-6 relative">
+          <div className="max-w-screen-xl mx-auto">
+            <h1 className="text-4xl tracking-tight font-extrabold text-white drop-shadow-md">
+              {props.headline}
+            </h1>
+            {props.lead ? (
+              <p className="mt-6 text-lg leading-4 text-gray-300">
+                {props.lead}
+              </p>
+            ) : null}
+            {props.ctaText && props.ctaUrl ? (
+              <Link
+                href={props.ctaUrl}
+                className="mt-7 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
               >
-                <path
-                  fillRule="evenodd"
-                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-                  clipRule="evenodd"
-                ></path>
-              </svg>
-              {props.ctaText}
-            </Link>
-          ) : null}
+                <svg
+                  className="mr-2 -ml-1 w-4 h-4"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                    clipRule="evenodd"
+                  ></path>
+                </svg>
+                {props.ctaText}
+              </Link>
+            ) : null}
+          </div>
         </div>
       </div>
       {props.formUrl ? (
@@ -126,34 +130,38 @@ function NoImageHero(props: NonNullable<PageFragment['hero']>) {
   return (
     <>
       <BreadCrumbs />
-      <section className="relative isolate overflow-hidden pt-12 sm:pt-20 px-6 lg:px-8">
-        <div className="mx-auto max-w-3xl">
-          <h1 className="text-4xl font-extrabold tracking-tight leading-tight">
-            {props.headline}
-          </h1>
-          {props.lead ? (
-            <p className="mt-4 text-lg leading-8 text-gray-500">{props.lead}</p>
-          ) : null}
-          {props.ctaText && props.ctaUrl ? (
-            <Link
-              href={props.ctaUrl}
-              className="mt-5 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-            >
-              <svg
-                className="mr-2 -ml-1 w-4 h-4"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
+      <section className="relative isolate overflow-hidden pt-12 sm:pt-20 container-page">
+        <div className="container-content">
+          <div className="container-text">
+            <h1 className="text-4xl font-extrabold tracking-tight leading-tight">
+              {props.headline}
+            </h1>
+            {props.lead ? (
+              <p className="mt-4 text-lg leading-8 text-gray-500">
+                {props.lead}
+              </p>
+            ) : null}
+            {props.ctaText && props.ctaUrl ? (
+              <Link
+                href={props.ctaUrl}
+                className="mt-5 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
               >
-                <path
-                  fillRule="evenodd"
-                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-                  clipRule="evenodd"
-                ></path>
-              </svg>
-              {props.ctaText}
-            </Link>
-          ) : null}
+                <svg
+                  className="mr-2 -ml-1 w-4 h-4"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                    clipRule="evenodd"
+                  ></path>
+                </svg>
+                {props.ctaText}
+              </Link>
+            ) : null}
+          </div>
         </div>
       </section>
     </>
diff --git a/packages/ui/src/components/Routes/Frame.stories.tsx b/packages/ui/src/components/Routes/Frame.stories.tsx
index a100b1016..12ce001f4 100644
--- a/packages/ui/src/components/Routes/Frame.stories.tsx
+++ b/packages/ui/src/components/Routes/Frame.stories.tsx
@@ -24,6 +24,7 @@ export const Default = {
   args: {
     mainNavigation: HeaderStory.args.mainNavigation,
     footerNavigation: FooterStory.args.footerNavigation,
+    metaNavigation: HeaderStory.args.metaNavigation,
     stringTranslations: [],
   },
 } satisfies StoryObj<FrameQuery>;
diff --git a/packages/ui/src/components/Routes/Menu.tsx b/packages/ui/src/components/Routes/Menu.tsx
index 17c733fc2..ce1243d13 100644
--- a/packages/ui/src/components/Routes/Menu.tsx
+++ b/packages/ui/src/components/Routes/Menu.tsx
@@ -82,9 +82,11 @@ export function useMenuAncestors(path: string, menuName: MenuNameType) {
   }
   if (ancestors.length > 0) {
     ancestors.push({ id: '_', target: '/' as Url, title: 'Home' });
+    // Pop off the current path, we dont care about it
+    ancestors.reverse().pop();
   }
 
-  return ancestors.reverse();
+  return ancestors;
 }
 
 export const useBreadcrumbs = (menuName?: MenuNameType, path?: string) => {
diff --git a/packages/ui/src/components/Routes/Page.stories.tsx b/packages/ui/src/components/Routes/Page.stories.tsx
index cad363277..a745acbc4 100644
--- a/packages/ui/src/components/Routes/Page.stories.tsx
+++ b/packages/ui/src/components/Routes/Page.stories.tsx
@@ -20,6 +20,9 @@ import { Page } from './Page';
 
 export default {
   component: Page,
+  parameters: {
+    layout: 'fullscreen',
+  },
 } satisfies Meta<typeof Page>;
 
 export const Default = {
diff --git a/packages/ui/src/pages.stories.tsx b/packages/ui/src/pages.stories.tsx
index f6967bafe..b886093f0 100644
--- a/packages/ui/src/pages.stories.tsx
+++ b/packages/ui/src/pages.stories.tsx
@@ -17,6 +17,7 @@ import { Default as PageStory } from './components/Routes/Page.stories';
 export default {
   title: 'Pages',
   parameters: {
+    layout: 'fullscreen',
     chromatic: {
       // We don't want to snapshot page examples, that just causes a lot of noise.
       disableSnapshot: true,
diff --git a/packages/ui/src/postcss.config.cjs b/packages/ui/src/postcss.config.cjs
index c1c15e247..00af9fd0b 100644
--- a/packages/ui/src/postcss.config.cjs
+++ b/packages/ui/src/postcss.config.cjs
@@ -3,6 +3,7 @@ module.exports = {
     'postcss-import-ext-glob': {},
     'postcss-import': {},
     tailwindcss: require('./tailwind.config.cjs'),
+    'postcss-nested': {},
     autoprefixer: {},
     'postcss-prefix-selector': {
       prefix:
diff --git a/packages/ui/src/tailwind.css b/packages/ui/src/tailwind.css
index 18682f9a6..de9c5d51f 100644
--- a/packages/ui/src/tailwind.css
+++ b/packages/ui/src/tailwind.css
@@ -43,3 +43,48 @@
 .default-hero + .block-background-image-cards {
   @apply mt-2 px-0;
 }
+
+/*
+  Table styling within prose or from drupal gutenberg blocks.
+  This component uses the following Table Flowbite styling ported over the tailwind css:
+  https://flowbite.com/docs/components/tables/#default-table
+ */
+.wp-block-table {
+  @apply w-full block overflow-x-auto;
+}
+
+.wp-block-table table,
+.prose table {
+  @apply w-full text-sm text-left rtl:text-right text-gray-500;
+
+  thead {
+    @apply text-xs uppercase bg-gray-50;
+
+    th {
+      @apply px-6 py-3 text-gray-500 leading-[1.125rem];
+    }
+  }
+
+  tbody {
+    tr {
+      @apply bg-white border-b hover:bg-gray-50;
+
+      th {
+        @apply px-6 py-4 font-medium text-gray-900 whitespace-nowrap;
+      }
+
+      td {
+        @apply px-6 py-4 text-gray-500;
+
+        a {
+          @apply font-medium text-blue-600 hover:underline;
+        }
+      }
+    }
+  }
+}
+
+.wp-block-table table + figcaption,
+.prose table + figcaption {
+  @apply mt-3 flex justify-center gap-x-2 text-sm leading-6 text-gray-500;
+}
diff --git a/packages/ui/src/utils/stringTruncation.ts b/packages/ui/src/utils/stringTruncation.ts
new file mode 100644
index 000000000..a4bbb6e6a
--- /dev/null
+++ b/packages/ui/src/utils/stringTruncation.ts
@@ -0,0 +1,24 @@
+export const truncateString = ({
+  value,
+  maxChar,
+}: {
+  value: string;
+  maxChar: number;
+}): string => {
+  if (value.length <= maxChar) {
+    return value;
+  }
+
+  // Split the string into words
+  const words = value.split(' ');
+
+  let result = '';
+  for (const word of words) {
+    if (result.length + word.length + 1 > maxChar) {
+      break;
+    }
+    result += (result ? ' ' : '') + word;
+  }
+
+  return result + '...';
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e274343f9..809e44551 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -281,8 +281,8 @@ importers:
         specifier: ^1.14.0
         version: 1.14.0(@types/node@20.11.17)(gatsby-plugin-sharp@5.13.1)(gatsby@5.13.1)(typescript@4.9.5)
       '@amazeelabs/publisher':
-        specifier: ^2.4.17
-        version: 2.4.17(@types/react@18.2.46)(react@18.2.0)(typescript@4.9.5)
+        specifier: ^2.4.30
+        version: 2.4.30(@types/react@18.2.46)(react@18.2.0)(typescript@4.9.5)
       '@amazeelabs/strangler-netlify':
         specifier: ^1.1.9
         version: 1.1.9(happy-dom@12.10.3)(react@18.2.0)
@@ -1062,49 +1062,43 @@ packages:
     dev: false
     optional: true
 
-  /@amazeelabs/publisher-elements@2.0.23:
-    resolution: {integrity: sha512-LmYk1V7FKzufu6UVjJAB76tihwZRfCZFBZhnmrWjSyXzZ+Ml2HBy47jatWYor4Nb1b7MvXWLr6xfgu+UD7f+4g==}
+  /@amazeelabs/publisher-shared@2.0.25:
+    resolution: {integrity: sha512-PVNFWaPVFV+aEj4UzwpxHqQgeG+Hr3/0f7NzHidhsXQJjnbdYlyRqGuKtVXi2/8GywtpUWJyG4QXwwq47z6rwg==}
     dev: false
 
-  /@amazeelabs/publisher-shared@2.0.19:
-    resolution: {integrity: sha512-8rPaUoxF1PfI9QZ4gRPz9LbJYh41MZ6u/BnPF3vv/QfMx64jvYgfnE8Cdlrk3ZB6SZJJZ1bkBQX7RjB+OK64lQ==}
+  /@amazeelabs/publisher-ui@2.4.16:
+    resolution: {integrity: sha512-a1h+PwRaXybvnt8MGCaVaQ6caqK/heVSnK/5LGcD/ZYJIM1I5JKnQnSri2FeAwJz0iMCF32avoTZg7vKvzxFHA==}
     dev: false
 
-  /@amazeelabs/publisher-ui@2.4.5:
-    resolution: {integrity: sha512-QNbwIr+fORh3HQ0HO9Y8bruL93+mhtd74twolljZWC5gaPEbrMcyiwZ0TkOYxz6uNhRPW84Wd53lxhfD/tylbQ==}
-    dev: false
-
-  /@amazeelabs/publisher@2.4.17(@types/react@18.2.46)(react@18.2.0)(typescript@4.9.5):
-    resolution: {integrity: sha512-RNhMaomyZ7AMLo1uSdgRkT1SE+blajApdVb0daRwNCV0b1BTwNILkxCcwilL/g34adfDD/PZLAO+pCWRZcfuSg==}
+  /@amazeelabs/publisher@2.4.30(@types/react@18.2.46)(react@18.2.0)(typescript@4.9.5):
+    resolution: {integrity: sha512-X/HIYtavRwDQoTxXB6j3tuDaMLgWb+o0ZcHj+vCf/dTdTwhmZKqXPcUvDei5D/Sc+5tHV4SiOUePUCInC6OwKg==}
     engines: {node: '>=16'}
     hasBin: true
     dependencies:
-      '@amazeelabs/publisher-elements': 2.0.23
-      '@amazeelabs/publisher-shared': 2.0.19
-      '@amazeelabs/publisher-ui': 2.4.5
+      '@amazeelabs/publisher-shared': 2.0.25
+      '@amazeelabs/publisher-ui': 2.4.16
       '@slack/webhook': 7.0.2
       cookie-parser: 1.4.6
       cors: 2.8.5
-      express: 4.18.2
+      express: 4.19.2
       express-basic-auth: 1.2.1
-      express-session: 1.17.3
-      express-ws: 5.0.2(express@4.18.2)
+      express-session: 1.18.0
+      express-ws: 5.0.2(express@4.19.2)
       fs-extra: 11.2.0
-      http-proxy-middleware: 2.0.6
+      http-proxy-middleware: 3.0.0
       http-terminator: 3.2.0
       memorystore: 1.6.7
       node-fetch: 3.3.2
       referrer-policy: 1.2.0
       rxjs: 7.8.1
-      sequelize: 6.37.2(sqlite3@5.1.7)
+      sequelize: 6.37.3(sqlite3@5.1.7)
       simple-oauth2: 5.0.0
       sqlite3: 5.1.7
       strip-ansi: 7.1.0
       terminate: 2.6.1
       ts-import: 4.0.0-beta.10(typescript@4.9.5)
-      zustand: 4.4.7(@types/react@18.2.46)(react@18.2.0)
+      zustand: 4.5.2(@types/react@18.2.46)(react@18.2.0)
     transitivePeerDependencies:
-      - '@types/express'
       - '@types/react'
       - bluebird
       - bufferutil
@@ -5456,7 +5450,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
       chalk: 4.1.2
       jest-message-util: 29.7.0
       jest-util: 29.7.0
@@ -5477,14 +5471,14 @@ packages:
       '@jest/test-result': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       ci-info: 3.9.0
       exit: 0.1.2
       graceful-fs: 4.2.11
       jest-changed-files: 29.7.0
-      jest-config: 29.7.0(@types/node@18.19.31)
+      jest-config: 29.7.0(@types/node@20.11.17)
       jest-haste-map: 29.7.0
       jest-message-util: 29.7.0
       jest-regex-util: 29.6.3
@@ -5519,7 +5513,7 @@ packages:
     dependencies:
       '@jest/fake-timers': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
       jest-mock: 29.7.0
     dev: true
 
@@ -5546,7 +5540,7 @@ packages:
     dependencies:
       '@jest/types': 29.6.3
       '@sinonjs/fake-timers': 10.3.0
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
       jest-message-util: 29.7.0
       jest-mock: 29.7.0
       jest-util: 29.7.0
@@ -5579,7 +5573,7 @@ packages:
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
       '@jridgewell/trace-mapping': 0.3.25
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
       chalk: 4.1.2
       collect-v8-coverage: 1.0.2
       exit: 0.1.2
@@ -5676,7 +5670,7 @@ packages:
       '@jest/schemas': 29.6.3
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
       '@types/yargs': 17.0.32
       chalk: 4.1.2
     dev: true
@@ -8159,7 +8153,7 @@ packages:
     engines: {node: '>= 18', npm: '>= 8.6.0'}
     dependencies:
       '@slack/types': 2.11.0
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
       axios: 1.6.8
     transitivePeerDependencies:
       - debug
@@ -9659,7 +9653,7 @@ packages:
   /@types/cors@2.8.17:
     resolution: {integrity: sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==}
     dependencies:
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
 
   /@types/cross-spawn@6.0.6:
     resolution: {integrity: sha512-fXRhhUkG4H3TQk5dBhQ7m/JDdSNHKwR2BBia62lhwEIq9xGiQKLxd6LymNhn47SjXhsUEPmxi+PKw2OkW4LLjA==}
@@ -9778,7 +9772,7 @@ packages:
   /@types/graceful-fs@4.1.9:
     resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==}
     dependencies:
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
     dev: true
 
   /@types/hast@2.3.10:
@@ -10088,7 +10082,7 @@ packages:
   /@types/wait-on@5.3.4:
     resolution: {integrity: sha512-EBsPjFMrFlMbbUFf9D1Fp+PAB2TwmUn7a3YtHyD9RLuTIk1jDd8SxXVAoez2Ciy+8Jsceo2MYEYZzJ/DvorOKw==}
     dependencies:
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
     dev: true
 
   /@types/wordpress__block-editor@11.5.0(react-dom@18.2.0)(react@18.2.0):
@@ -12444,6 +12438,7 @@ packages:
   /are-we-there-yet@3.0.1:
     resolution: {integrity: sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    deprecated: This package is no longer supported.
     requiresBuild: true
     dependencies:
       delegates: 1.0.0
@@ -14454,6 +14449,10 @@ packages:
   /cookie-signature@1.0.6:
     resolution: {integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==}
 
+  /cookie-signature@1.0.7:
+    resolution: {integrity: sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==}
+    dev: false
+
   /cookie@0.4.1:
     resolution: {integrity: sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==}
     engines: {node: '>= 0.6'}
@@ -16570,7 +16569,7 @@ packages:
     dependencies:
       '@types/cookie': 0.4.1
       '@types/cors': 2.8.17
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
       accepts: 1.3.8
       base64id: 2.0.0
       cookie: 0.4.2
@@ -17950,12 +17949,12 @@ packages:
       on-headers: 1.0.2
     dev: false
 
-  /express-session@1.17.3:
-    resolution: {integrity: sha512-4+otWXlShYlG1Ma+2Jnn+xgKUZTMJ5QD3YvfilX3AcocOAbIkVylSWEklzALe/+Pu4qV6TYBj5GwOBFfdKqLBw==}
+  /express-session@1.18.0:
+    resolution: {integrity: sha512-m93QLWr0ju+rOwApSsyso838LQwgfs44QtOP/WBiwtAgPIo/SAh1a5c6nn2BR6mFNZehTpqKDESzP+fRHVbxwQ==}
     engines: {node: '>= 0.8.0'}
     dependencies:
-      cookie: 0.4.2
-      cookie-signature: 1.0.6
+      cookie: 0.6.0
+      cookie-signature: 1.0.7
       debug: 2.6.9
       depd: 2.0.0
       on-headers: 1.0.2
@@ -17966,19 +17965,6 @@ packages:
       - supports-color
     dev: false
 
-  /express-ws@5.0.2(express@4.18.2):
-    resolution: {integrity: sha512-0uvmuk61O9HXgLhGl3QhNSEtRsQevtmbL94/eILaliEADZBHZOQUAiHFrGPrgsjikohyrmSG5g+sCfASTt0lkQ==}
-    engines: {node: '>=4.5.0'}
-    peerDependencies:
-      express: ^4.0.0 || ^5.0.0-alpha.1
-    dependencies:
-      express: 4.18.2
-      ws: 7.5.9
-    transitivePeerDependencies:
-      - bufferutil
-      - utf-8-validate
-    dev: false
-
   /express-ws@5.0.2(express@4.19.2):
     resolution: {integrity: sha512-0uvmuk61O9HXgLhGl3QhNSEtRsQevtmbL94/eILaliEADZBHZOQUAiHFrGPrgsjikohyrmSG5g+sCfASTt0lkQ==}
     engines: {node: '>=4.5.0'}
@@ -17992,45 +17978,6 @@ packages:
       - utf-8-validate
     dev: false
 
-  /express@4.18.2:
-    resolution: {integrity: sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==}
-    engines: {node: '>= 0.10.0'}
-    dependencies:
-      accepts: 1.3.8
-      array-flatten: 1.1.1
-      body-parser: 1.20.1
-      content-disposition: 0.5.4
-      content-type: 1.0.5
-      cookie: 0.5.0
-      cookie-signature: 1.0.6
-      debug: 2.6.9
-      depd: 2.0.0
-      encodeurl: 1.0.2
-      escape-html: 1.0.3
-      etag: 1.8.1
-      finalhandler: 1.2.0
-      fresh: 0.5.2
-      http-errors: 2.0.0
-      merge-descriptors: 1.0.1
-      methods: 1.1.2
-      on-finished: 2.4.1
-      parseurl: 1.3.3
-      path-to-regexp: 0.1.7
-      proxy-addr: 2.0.7
-      qs: 6.11.0
-      range-parser: 1.2.1
-      safe-buffer: 5.2.1
-      send: 0.18.0
-      serve-static: 1.15.0
-      setprototypeof: 1.2.0
-      statuses: 2.0.1
-      type-is: 1.6.18
-      utils-merge: 1.0.1
-      vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
   /express@4.19.1:
     resolution: {integrity: sha512-K4w1/Bp7y8iSiVObmCrtq8Cs79XjJc/RU2YYkZQ7wpUu5ZyZ7MtPHkqoMz4pf+mgXfNvo2qft8D9OnrH2ABk9w==}
     engines: {node: '>= 0.10.0'}
@@ -20164,6 +20111,7 @@ packages:
   /gauge@4.0.4:
     resolution: {integrity: sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    deprecated: This package is no longer supported.
     requiresBuild: true
     dependencies:
       aproba: 2.0.0
@@ -21337,7 +21285,7 @@ packages:
       - supports-color
     dev: true
 
-  /http-proxy-middleware@2.0.6:
+  /http-proxy-middleware@2.0.6(debug@4.3.4):
     resolution: {integrity: sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -21347,7 +21295,7 @@ packages:
         optional: true
     dependencies:
       '@types/http-proxy': 1.17.14
-      http-proxy: 1.18.1
+      http-proxy: 1.18.1(debug@4.3.4)
       is-glob: 4.0.3
       is-plain-obj: 3.0.0
       micromatch: 4.0.5
@@ -21355,33 +21303,18 @@ packages:
       - debug
     dev: false
 
-  /http-proxy-middleware@2.0.6(debug@4.3.4):
-    resolution: {integrity: sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      '@types/express': ^4.17.13
-    peerDependenciesMeta:
-      '@types/express':
-        optional: true
+  /http-proxy-middleware@3.0.0:
+    resolution: {integrity: sha512-36AV1fIaI2cWRzHo+rbcxhe3M3jUDCNzc4D5zRl57sEWRAxdXYtw7FSQKYY6PDKssiAKjLYypbssHk+xs/kMXw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@types/http-proxy': 1.17.14
+      debug: 4.3.4
       http-proxy: 1.18.1(debug@4.3.4)
       is-glob: 4.0.3
       is-plain-obj: 3.0.0
       micromatch: 4.0.5
     transitivePeerDependencies:
-      - debug
-    dev: false
-
-  /http-proxy@1.18.1:
-    resolution: {integrity: sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==}
-    engines: {node: '>=8.0.0'}
-    dependencies:
-      eventemitter3: 4.0.7
-      follow-redirects: 1.15.6
-      requires-port: 1.0.0
-    transitivePeerDependencies:
-      - debug
+      - supports-color
     dev: false
 
   /http-proxy@1.18.1(debug@4.3.4):
@@ -22560,7 +22493,7 @@ packages:
       '@jest/expect': 29.7.0
       '@jest/test-result': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
       chalk: 4.1.2
       co: 4.6.0
       dedent: 1.5.1
@@ -22609,46 +22542,6 @@ packages:
       - ts-node
     dev: true
 
-  /jest-config@29.7.0(@types/node@18.19.31):
-    resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    peerDependencies:
-      '@types/node': '*'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      ts-node:
-        optional: true
-    dependencies:
-      '@babel/core': 7.24.4
-      '@jest/test-sequencer': 29.7.0
-      '@jest/types': 29.6.3
-      '@types/node': 18.19.31
-      babel-jest: 29.7.0(@babel/core@7.24.4)
-      chalk: 4.1.2
-      ci-info: 3.9.0
-      deepmerge: 4.3.1
-      glob: 7.2.3
-      graceful-fs: 4.2.11
-      jest-circus: 29.7.0
-      jest-environment-node: 29.7.0
-      jest-get-type: 29.6.3
-      jest-regex-util: 29.6.3
-      jest-resolve: 29.7.0
-      jest-runner: 29.7.0
-      jest-util: 29.7.0
-      jest-validate: 29.7.0
-      micromatch: 4.0.5
-      parse-json: 5.2.0
-      pretty-format: 29.7.0
-      slash: 3.0.0
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - babel-plugin-macros
-      - supports-color
-    dev: true
-
   /jest-config@29.7.0(@types/node@20.11.17):
     resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -22724,7 +22617,7 @@ packages:
       '@jest/environment': 29.7.0
       '@jest/fake-timers': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
       jest-mock: 29.7.0
       jest-util: 29.7.0
     dev: true
@@ -22745,7 +22638,7 @@ packages:
     dependencies:
       '@jest/types': 29.6.3
       '@types/graceful-fs': 4.1.9
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
       anymatch: 3.1.3
       fb-watchman: 2.0.2
       graceful-fs: 4.2.11
@@ -22814,7 +22707,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
       jest-util: 29.7.0
     dev: true
 
@@ -22910,7 +22803,7 @@ packages:
       '@jest/test-result': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
       chalk: 4.1.2
       emittery: 0.13.1
       graceful-fs: 4.2.11
@@ -22941,7 +22834,7 @@ packages:
       '@jest/test-result': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
       chalk: 4.1.2
       cjs-module-lexer: 1.2.3
       collect-v8-coverage: 1.0.2
@@ -22999,7 +22892,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
       chalk: 4.1.2
       ci-info: 3.9.0
       graceful-fs: 4.2.11
@@ -23052,7 +22945,7 @@ packages:
     dependencies:
       '@jest/test-result': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       emittery: 0.13.1
@@ -23080,7 +22973,7 @@ packages:
     resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
       jest-util: 29.7.0
       merge-stream: 2.0.0
       supports-color: 8.1.1
@@ -25633,6 +25526,7 @@ packages:
   /npmlog@6.0.2:
     resolution: {integrity: sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    deprecated: This package is no longer supported.
     requiresBuild: true
     dependencies:
       are-we-there-yet: 3.0.1
@@ -29692,8 +29586,8 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: false
 
-  /sequelize@6.37.2(sqlite3@5.1.7):
-    resolution: {integrity: sha512-bnb7swGANONXCTrVyebpOOZssLwQrVkYX2tcC6qOIvH+P+OhsoMBi7c3GXI5bC+Z4b4tOl+kQy6yeqLCZ1YQAQ==}
+  /sequelize@6.37.3(sqlite3@5.1.7):
+    resolution: {integrity: sha512-V2FTqYpdZjPy3VQrZvjTPnOoLm0KudCRXfGWp48QwhyPPp2yW8z0p0sCYZd/em847Tl2dVxJJ1DR+hF+O77T7A==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       ibm_db: '*'
@@ -33762,7 +33656,7 @@ packages:
   /wkx@0.5.0:
     resolution: {integrity: sha512-Xng/d4Ichh8uN4l0FToV/258EjMGU9MGcA0HV2d9B/ZpZB3lqQm7nkOdZdm5GhKtLLhAE7PiVQwN4eN+2YJJUg==}
     dependencies:
-      '@types/node': 18.19.31
+      '@types/node': 20.11.17
     dev: false
 
   /wordwrap@1.0.0:
@@ -34133,6 +34027,26 @@ packages:
       use-sync-external-store: 1.2.0(react@18.2.0)
     dev: false
 
+  /zustand@4.5.2(@types/react@18.2.46)(react@18.2.0):
+    resolution: {integrity: sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0.6'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      '@types/react': 18.2.46
+      react: 18.2.0
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false
+
   /zwitch@1.0.5:
     resolution: {integrity: sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==}
     dev: false
diff --git a/tests/e2e/helpers/quick-actions.ts b/tests/e2e/helpers/quick-actions.ts
new file mode 100644
index 000000000..7763de229
--- /dev/null
+++ b/tests/e2e/helpers/quick-actions.ts
@@ -0,0 +1,23 @@
+import { type Page } from '@playwright/test';
+
+export enum SiteLanguage {
+  English = 'English',
+  Deutsch = 'Deutsch',
+}
+
+export class QuickActions {
+  private page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  async changeLanguageTo(language: SiteLanguage): Promise<void> {
+    // Open the language switcher.
+    await this.page
+      .locator("(//button[contains(@aria-haspopup, 'menu')])[1]")
+      .click();
+    // look for the language and click on it.
+    await this.page.locator("//a[contains(text(),'" + language + "')]").click();
+  }
+}
diff --git a/tests/e2e/specs/decap/decap-pages.spec.ts b/tests/e2e/specs/decap/decap-pages.spec.ts
index e2044ae79..1daf4204f 100644
--- a/tests/e2e/specs/decap/decap-pages.spec.ts
+++ b/tests/e2e/specs/decap/decap-pages.spec.ts
@@ -1,9 +1,12 @@
 import { expect, test } from '@playwright/test';
 
 import { websiteUrl } from '../../helpers/url';
+import { QuickActions, SiteLanguage } from '../../helpers/quick-actions';
 
 test.describe('decap pages', () => {
   test('example decap page is rendered', async ({ page }) => {
+    const quickActions = new QuickActions(page);
+
     await page.goto(websiteUrl('/en/decap-example'));
     const content = page.getByRole('main');
     await expect(
@@ -12,7 +15,10 @@ test.describe('decap pages', () => {
     await expect(
       content.getByText('This page was created with Decap CMS'),
     ).toBeVisible();
-    await page.getByRole('link', { name: 'de' }).click();
+
+    // Change language to German.
+    await quickActions.changeLanguageTo(SiteLanguage.Deutsch);
+
     await expect(
       content.getByRole('heading', { name: 'Decap Beispiel' }),
     ).toBeVisible();
diff --git a/tests/e2e/specs/drupal/content-hub.spec.ts b/tests/e2e/specs/drupal/content-hub.spec.ts
index 718996d73..d5da66ac3 100644
--- a/tests/e2e/specs/drupal/content-hub.spec.ts
+++ b/tests/e2e/specs/drupal/content-hub.spec.ts
@@ -1,6 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 import { websiteUrl } from '../../helpers/url';
+import { QuickActions, SiteLanguage } from '../../helpers/quick-actions';
 
 test.describe('content hub', () => {
   test.beforeEach(async ({ page }) => {
@@ -33,8 +34,10 @@ test.describe('content hub', () => {
   });
 
   test('returns language specific results', async ({ page }) => {
+    const quickActions = new QuickActions(page);
     await page.goto(websiteUrl('/en/content-hub'));
-    await page.getByRole('link', { name: 'de' }).click();
+    // Change language to German.
+    await quickActions.changeLanguageTo(SiteLanguage.Deutsch);
     const content = await page.getByRole('main');
     await expect(content.getByText('Architektur')).toBeVisible();
     await expect(content.getByText('Architecture')).not.toBeVisible();
diff --git a/tests/e2e/specs/drupal/drupal-pages.spec.ts b/tests/e2e/specs/drupal/drupal-pages.spec.ts
index a019a74e6..2c05b1b29 100644
--- a/tests/e2e/specs/drupal/drupal-pages.spec.ts
+++ b/tests/e2e/specs/drupal/drupal-pages.spec.ts
@@ -1,6 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 import { websiteUrl } from '../../helpers/url';
+import { QuickActions, SiteLanguage } from '../../helpers/quick-actions';
 
 test.describe('drupal pages', () => {
   test('example drupal page is rendered', async ({ page }) => {
@@ -11,8 +12,9 @@ test.describe('drupal pages', () => {
     ).toBeVisible();
   });
   test('example drupal page is translated', async ({ page }) => {
+    const quickActions = new QuickActions(page);
     await page.goto(websiteUrl('/en/privacy'));
-    await page.getByRole('link', { name: 'de' }).click();
+    await quickActions.changeLanguageTo(SiteLanguage.Deutsch);
     await expect(
       page.getByRole('heading', { name: 'Privatsphäre' }),
     ).toBeVisible();
diff --git a/tests/e2e/specs/drupal/homepage.spec.ts b/tests/e2e/specs/drupal/homepage.spec.ts
index 89fc70f33..8372443bd 100644
--- a/tests/e2e/specs/drupal/homepage.spec.ts
+++ b/tests/e2e/specs/drupal/homepage.spec.ts
@@ -1,6 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 import { websiteUrl } from '../../helpers/url';
+import { QuickActions, SiteLanguage } from '../../helpers/quick-actions';
 
 test.describe('the homepage', () => {
   test('exists in english', async ({ page }) => {
@@ -12,9 +13,10 @@ test.describe('the homepage', () => {
   });
 
   test('exists in german', async ({ page }) => {
+    const quickActions = new QuickActions(page);
     await page.goto(websiteUrl('/en'));
     const content = await page.getByRole('main');
-    await page.getByRole('link', { name: 'de' }).click();
+    await quickActions.changeLanguageTo(SiteLanguage.Deutsch);
     await expect(
       content.getByRole('heading', { name: 'Architektur' }),
     ).toBeVisible();
diff --git a/tests/e2e/specs/drupal/menus.spec.ts b/tests/e2e/specs/drupal/menus.spec.ts
index 06f7f85be..2435656bb 100644
--- a/tests/e2e/specs/drupal/menus.spec.ts
+++ b/tests/e2e/specs/drupal/menus.spec.ts
@@ -1,25 +1,28 @@
 import { expect, test } from '@playwright/test';
 
 import { websiteUrl } from '../../helpers/url';
+import { QuickActions, SiteLanguage } from '../../helpers/quick-actions';
 
 test.describe('menus', () => {
   test('main navigation', async ({ page }) => {
+    const quickActions = new QuickActions(page);
     await page.goto(websiteUrl('/en'));
     const mainNav = page.getByRole('banner').getByRole('navigation');
     await expect(mainNav.getByText('Architecture')).toBeVisible();
     await expect(mainNav.getByText('Architektur')).not.toBeVisible();
-    await page.getByRole('link', { name: 'de' }).click();
+    await quickActions.changeLanguageTo(SiteLanguage.Deutsch);
     await expect(mainNav.getByText('Architecture')).not.toBeVisible();
     await expect(mainNav.getByText('Gatsby')).not.toBeVisible();
     await expect(mainNav.getByText('Architektur')).toBeVisible();
   });
 
   test('footer navigation', async ({ page }) => {
+    const quickActions = new QuickActions(page);
     await page.goto(websiteUrl('/en'));
     const footerNav = page.getByRole('contentinfo').getByRole('navigation');
     await expect(footerNav.getByText('Privacy')).toBeVisible();
     await expect(footerNav.getByText('Privatsphäre')).not.toBeVisible();
-    await page.getByRole('link', { name: 'de' }).click();
+    await quickActions.changeLanguageTo(SiteLanguage.Deutsch);
     await expect(footerNav.getByText('Privacy')).not.toBeVisible();
     await expect(footerNav.getByText('Privatsphäre')).toBeVisible();
   });
diff --git a/tests/schema/specs/blocks.spec.ts b/tests/schema/specs/blocks.spec.ts
index 6ac6df879..de9ae4ed0 100644
--- a/tests/schema/specs/blocks.spec.ts
+++ b/tests/schema/specs/blocks.spec.ts
@@ -55,6 +55,23 @@ test('Blocks', async () => {
           icon
           iconPosition
         }
+        ... on BlockImageWithText {
+          image {
+            __typename
+          }
+          textContent {
+            __typename
+            markup
+          }
+        }
+        ... on BlockQuote {
+          quote
+          author
+          role
+          image {
+            __typename
+          }
+        }
         ... on BlockImageWithText {
           image {
             __typename
@@ -100,19 +117,16 @@ test('Blocks', async () => {
       }
     }
   `);
-
   const firstParagraph = result.data.complete.content[0];
   firstParagraph.markup = firstParagraph.markup.replace(
     /data-id="\d+"/,
     'data-id="[numeric]"',
   );
-
   for (const block of result.data.complete.content) {
     if (block.__typename === 'BlockCta') {
       block.url = block.url.replace(/media\/\d+/, 'media/[numeric]');
     }
   }
-
   expect(result).toMatchInlineSnapshot(`
     {
       "data": {
@@ -337,7 +351,6 @@ test('Blocks', async () => {
       },
     }
   `);
-
   const german = await fetch(gql`
     {
       page: _loadDrupalPage(id: "a397ca48-8fad-411e-8901-0eba2feb989c:de") {
@@ -355,7 +368,6 @@ test('Blocks', async () => {
   );
   expect(germanForm.url).toBe('http://127.0.0.1:8000/de/form/contact');
 });
-
 test('Block - info grid', async () => {
   const result = await fetch(gql`
     {
diff --git a/tests/schema/specs/menu.spec.ts b/tests/schema/specs/menu.spec.ts
new file mode 100644
index 000000000..54e7757f0
--- /dev/null
+++ b/tests/schema/specs/menu.spec.ts
@@ -0,0 +1,52 @@
+import gql from 'noop-tag';
+import { expect, test } from 'vitest';
+
+import { fetch } from '../lib.js';
+
+test('Meta', async () => {
+  const result = await fetch(gql`
+    {
+      metaNavigations {
+        locale
+        items {
+          title
+          target
+        }
+      }
+    }
+  `);
+  expect(result).toMatchInlineSnapshot(`
+    {
+      "data": {
+        "metaNavigations": [
+          {
+            "items": [
+              {
+                "target": "/en",
+                "title": "Meta item 1",
+              },
+              {
+                "target": "/en",
+                "title": "Meta item 2",
+              },
+            ],
+            "locale": "en",
+          },
+          {
+            "items": [
+              {
+                "target": "/de",
+                "title": "Meta item 1 DE",
+              },
+              {
+                "target": "/de",
+                "title": "Meta item 2 DE",
+              },
+            ],
+            "locale": "de",
+          },
+        ],
+      },
+    }
+  `);
+});