diff --git a/.github/workflows/high_content_volume.yml b/.github/workflows/high_content_volume.yml
new file mode 100644
index 000000000..02edab017
--- /dev/null
+++ b/.github/workflows/high_content_volume.yml
@@ -0,0 +1,50 @@
+name: High Content Volume
+on:
+  workflow_dispatch:
+
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 1
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: TurboRepo local server
+        uses: felixmosh/turborepo-gh-artifacts@v2
+        with:
+          server-token: 'local'
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Prepare
+        run: pnpm turbo:prep
+        env:
+          TURBO_API: 'http://127.0.0.1:9080'
+          TURBO_TOKEN: 'local'
+          TURBO_TEAM: 'local'
+
+      - name: 'Drupal: Start'
+        run: pnpm --filter "@custom/cms" start &
+
+      - name: 'Gatsby: Clean'
+        run: pnpm --filter "@custom/website" clean
+
+      - name: 'Drupal: Create content'
+        run: pnpm --filter "@custom/cms" drush php:script scripts/create-lots-of-content/run.php
+
+      - name: 'Gatsby: Full build'
+        run: pnpm --filter "@custom/website" build:gatsby
+
+      - name: 'Gatsby: Incremental build without new content'
+        run: pnpm --filter "@custom/website" build:gatsby
+
+      - name: 'Drupal: Create more content'
+        run: pnpm --filter "@custom/cms" drush php:script scripts/create-lots-of-content/create-100-pages.php
+
+      - name: 'Gatsby: Incremental build with new content'
+        run: pnpm --filter "@custom/website" build:gatsby
diff --git a/.idea/runConfigurations/Test_Format.xml b/.idea/runConfigurations/Fix_Formatting.xml
similarity index 65%
rename from .idea/runConfigurations/Test_Format.xml
rename to .idea/runConfigurations/Fix_Formatting.xml
index d9d140b46..0189aa8e3 100644
--- a/.idea/runConfigurations/Test_Format.xml
+++ b/.idea/runConfigurations/Fix_Formatting.xml
@@ -1,9 +1,9 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="Test Format" type="js.build_tools.npm" folderName="_Root">
+  <configuration default="false" name="Fix Formatting" type="js.build_tools.npm" folderName="_Root">
     <package-json value="$PROJECT_DIR$/package.json" />
     <command value="run" />
     <scripts>
-      <script value="test:format" />
+      <script value="test:format:fix" />
     </scripts>
     <node-interpreter value="project" />
     <envs />
diff --git a/.prettierignore b/.prettierignore
index 189e95f3a..6ad8630f6 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -2,3 +2,4 @@ _local
 apps
 packages
 tests
+.turbo
diff --git a/INIT.md b/INIT.md
index 98c56377e..5575b37e7 100644
--- a/INIT.md
+++ b/INIT.md
@@ -97,7 +97,7 @@ Update the auth key for Gatsby user.
 ```ts
 const authKey = randomString(32);
 replace(
-  'apps/website/gatsby-config.js',
+  'apps/website/gatsby-config.mjs',
   "auth_key: 'cfdb0555111c0f8924cecab028b53474'",
   `auth_key: '${authKey}'`,
 );
diff --git a/apps/cms/scripts/create-lots-of-content/create-100-pages.php b/apps/cms/scripts/create-lots-of-content/create-100-pages.php
new file mode 100644
index 000000000..a204b13c9
--- /dev/null
+++ b/apps/cms/scripts/create-lots-of-content/create-100-pages.php
@@ -0,0 +1,99 @@
+<?php
+
+use Drupal\Component\Utility\Random;
+use Drupal\media\Entity\Media;
+use Drupal\node\Entity\Node;
+
+
+/** @var \Drupal\file\FileRepositoryInterface $fileRepository */
+$fileRepository = \Drupal::service('file.repository');
+$random = new Random();
+
+$imageData = file_get_contents(__DIR__ . '/tiny.png');
+
+for ($pageIndex = 1; $pageIndex <= 100; $pageIndex++) {
+
+  // Prepare images.
+  /** @var \Drupal\file\FileInterface[] $images */
+  $images = [];
+  for ($i = 1; $i <= 4; $i++) {
+    $images[$i] = $fileRepository->writeData($imageData, "public://" . $random->machineName(32) . ".png");
+  }
+
+  // Prepare image media entities.
+  /** @var \Drupal\media\MediaInterface[] $media */
+  $media = [];
+  foreach ($images as $i => $image) {
+    $media[$i] = Media::create([
+      'name' => $random->name(),
+      'bundle' => 'image',
+      'uid' => 1,
+      'status' => TRUE,
+      'field_media_image' => [
+        'target_id' => $image->id(),
+        'alt' => 'Alt text',
+        'title' => 'Title text',
+      ],
+    ]);
+    $media[$i]->save();
+  }
+  $mediaIds = array_map(fn ($media) => $media->id(), $media);
+
+  // Create a page.
+  $title = $random->name();
+  $node = Node::create([
+    'type' => 'page',
+    'status' => TRUE,
+    'uid' => 1,
+    'title' => $title,
+    'moderation_state' => 'published',
+    'body' => [
+      'value' => pageBody($mediaIds, FALSE),
+      'format' => 'gutenberg',
+      'summary' => '',
+    ],
+  ]);
+  $node->addTranslation('de', [
+    'title' => $title . ' DE',
+    'uid' => 1,
+    'body' => [
+      'value' => pageBody($mediaIds, TRUE),
+      'format' => 'gutenberg',
+      'summary' => '',
+    ],
+  ]);
+  $node->save();
+}
+
+function pageBody(array $mediaIds, bool $isGerman): string {
+  $suffix = $isGerman ? ' DE' : '';
+  return <<<EOT
+<!-- wp:custom/hero {"mediaEntityIds":["$mediaIds[1]"],"headline":"Stub page$suffix","lead":"Lead text$suffix"} /-->
+
+<!-- wp:custom/content -->
+<!-- wp:paragraph -->
+<p>Some content$suffix</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:drupalmedia/drupal-media-entity {"mediaEntityIds":["$mediaIds[2]"],"caption":"Caption$suffix"} /-->
+
+<!-- wp:paragraph -->
+<p>Some content$suffix</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:drupalmedia/drupal-media-entity {"mediaEntityIds":["$mediaIds[3]"],"caption":"Caption$suffix"} /-->
+
+<!-- wp:paragraph -->
+<p><meta charset="utf-8">Some content$suffix</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:drupalmedia/drupal-media-entity {"mediaEntityIds":["$mediaIds[4]"],"caption":"Caption$suffix"} /-->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->
+<!-- /wp:custom/content -->
+EOT;
+}
+
+
diff --git a/apps/cms/scripts/create-lots-of-content/run.php b/apps/cms/scripts/create-lots-of-content/run.php
new file mode 100644
index 000000000..d284a93f5
--- /dev/null
+++ b/apps/cms/scripts/create-lots-of-content/run.php
@@ -0,0 +1,21 @@
+<?php
+
+$amount = 200;
+$total = $amount * 100;
+
+echo "Gonna create $total pages.\n";
+
+for ($i = 1; $i <= $amount; $i++) {
+
+  // The more pages we create in a single run, the slower Drupal works and the
+  // more memory is eaten by PHP. So we create pages in batches.
+  exec('../vendor/bin/drush php:script ' . __DIR__ . '/create-100-pages.php');
+
+  if ($i !== 1) {
+    echo "\r";
+  }
+  $percent = number_format(100 * $i / $amount, 2);
+  echo "Progress $percent%";
+}
+
+echo "\nDone!\n";
diff --git a/apps/cms/scripts/create-lots-of-content/tiny.png b/apps/cms/scripts/create-lots-of-content/tiny.png
new file mode 100644
index 000000000..7325b04e8
Binary files /dev/null and b/apps/cms/scripts/create-lots-of-content/tiny.png differ
diff --git a/apps/decap/data/page/decap-example.yml b/apps/decap/data/page/decap-example.yml
index 1b954393c..65f5a8516 100644
--- a/apps/decap/data/page/decap-example.yml
+++ b/apps/decap/data/page/decap-example.yml
@@ -1,6 +1,6 @@
 de:
   path: /de/decap-example
-  title: Decap Beispiel
+  title: Decap Beispiel!
   teaserImage: /apps/decap/media/landscape.jpg
   hero:
     headline: Decap Beispiel
@@ -12,7 +12,7 @@ de:
 en:
   id: BTPzQnq79fWNOF1dFmESP
   path: /en/decap-example
-  title: Decap example
+  title: Decap example!
   teaserImage: /apps/decap/media/landscape.jpg
   hero:
     headline: Decap Example
diff --git a/apps/decap/src/collections/translatables.ts b/apps/decap/src/collections/translatables.ts
index b9b096f7d..90a36e859 100644
--- a/apps/decap/src/collections/translatables.ts
+++ b/apps/decap/src/collections/translatables.ts
@@ -58,15 +58,17 @@ export function getTranslatables(
         Object.keys(data).forEach((langcode) => {
           Object.keys(data[langcode]).forEach((key) => {
             Object.keys(data).forEach((locale) => {
-              translations.push([
-                `${key}:${locale}`,
-                {
-                  __typename: 'DecapTranslatableString',
-                  source: translationSources[key],
-                  language: locale as Locale,
-                  translation: data[locale][key],
-                },
-              ]);
+              if (translationSources[key]) {
+                translations.push([
+                  `${key}:${locale}`,
+                  {
+                    __typename: 'DecapTranslatableString',
+                    source: translationSources[key],
+                    language: locale as Locale,
+                    translation: data[locale][key],
+                  },
+                ]);
+              }
             });
           });
         });
diff --git a/apps/decap/turbo.json b/apps/decap/turbo.json
index af21adb24..97069118f 100644
--- a/apps/decap/turbo.json
+++ b/apps/decap/turbo.json
@@ -5,12 +5,12 @@
     "prep:vite": {
       "dependsOn": ["^prep"],
       "inputs": ["src/**", "vite.config.js"],
-      "outputs": ["build/**"]
+      "outputs": ["dist/**"]
     },
     "prep:scripts": {
       "dependsOn": ["^prep"],
       "inputs": ["src/**", "tsup.config.js"],
-      "outputs": ["dist/**"]
+      "outputs": ["build/**"]
     },
     "prep": {
       "dependsOn": ["prep:vite", "prep:scripts"]
diff --git a/package.json b/package.json
index 631a049b9..4d6bf087b 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,10 @@
   "scripts": {
     "postinstall": "husky install || true",
     "commit": "git-cz",
-    "test:format": "pnpm test:format:root && pnpm test:format:workspaces",
-    "test:format:root": "pnpm prettier --check '**/*.{js,cjs,mjs,ts,jsx,tsx,gql,graphql,graphqls,md,mdx,json}' --ignore-path='./.prettierignore'",
-    "test:format:workspaces": "pnpm --workspace-concurrency=1 -r exec prettier --check '**/*.{js,cjs,mjs,ts,jsx,tsx,gql,graphql,graphqls,md,mdx,json}' --ignore-path='./.gitignore'",
+    "test:format": "pnpm test:format:root --check && pnpm test:format:workspaces --check",
+    "test:format:fix": "pnpm test:format:root --write && pnpm test:format:workspaces --write",
+    "test:format:root": "pnpm prettier '**/*.{js,cjs,mjs,ts,jsx,tsx,gql,graphql,graphqls,md,mdx,json}' --ignore-path='./.prettierignore'",
+    "test:format:workspaces": "pnpm --workspace-concurrency=1 -r exec prettier '**/*.{js,cjs,mjs,ts,jsx,tsx,gql,graphql,graphqls,md,mdx,json}' --ignore-path='./.gitignore'",
     "turbo:local": "if [ -z $CI ]; then echo $(date)$RANDOM > apps/cms/turbo-seed.txt; fi",
     "turbo:test": "pnpm turbo:local && turbo test:unit --no-daemon --go-fallback --output-logs=new-only && turbo test:integration --no-daemon --go-fallback --output-logs=new-only --concurrency=1",
     "turbo:test:quick": "pnpm turbo:local && turbo test:unit --no-daemon --go-fallback --output-logs=new-only",
diff --git a/packages/schema/src/operations/Frame.gql b/packages/schema/src/operations/Frame.gql
index a6fd41b2d..71e0dca6f 100644
--- a/packages/schema/src/operations/Frame.gql
+++ b/packages/schema/src/operations/Frame.gql
@@ -1,4 +1,12 @@
 query Frame {
+  websiteSettings {
+    homePage {
+      translations {
+        locale
+        path
+      }
+    }
+  }
   mainNavigation: mainNavigations {
     ...Navigation
   }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 9deab932d..6c22c8620 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -76,7 +76,6 @@
     "@swc/core": "^1.3.102",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.10",
     "@testing-library/react": "^14.1.2",
     "@types/hast": "^2.3.9",
diff --git a/packages/ui/src/components/Client/DesktopMenu.tsx b/packages/ui/src/components/Client/DesktopMenu.tsx
index f500a582b..dc6442c48 100644
--- a/packages/ui/src/components/Client/DesktopMenu.tsx
+++ b/packages/ui/src/components/Client/DesktopMenu.tsx
@@ -1,7 +1,10 @@
 'use client';
-import { Popover, Transition } from '@headlessui/react';
+import { Disclosure, Popover, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
-import React, { Fragment, PropsWithChildren } from 'react';
+import clsx from 'clsx';
+import React, { PropsWithChildren } from 'react';
+
+import { avoidFocusOnClick } from '../../utils/avoidFocusOnClick';
 
 export function DesktopMenu({ children }: PropsWithChildren<{}>) {
   return (
@@ -17,27 +20,71 @@ export function DesktopMenuDropDown({
 }: PropsWithChildren<{ title: string }>) {
   return (
     <Popover className="relative">
-      <Popover.Button className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
-        {title}
-        <ChevronDownIcon
-          className="h-5 w-5 flex-none text-gray-400"
-          aria-hidden="true"
-        />
-      </Popover.Button>
-
-      <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"
-      >
-        <Popover.Panel className="absolute -left-8 top-full z-10 mt-3 w-56 rounded-xl bg-white p-2 shadow-lg ring-1 ring-gray-900/5">
-          {children}
-        </Popover.Panel>
-      </Transition>
+      {({ open }) => (
+        <React.Fragment>
+          <Popover.Button
+            className={clsx(
+              'flex items-center text-base font-medium ml-8 hover:text-blue-600',
+              open ? 'text-blue-600' : 'text-gray-600',
+            )}
+            onClick={() => avoidFocusOnClick()}
+          >
+            {title}
+            <ChevronDownIcon
+              className={clsx(
+                'h-5 w-5 flex-none text-blue-600',
+                open && 'rotate-180',
+              )}
+              aria-hidden="true"
+            />
+          </Popover.Button>
+          <Transition
+            as={React.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"
+          >
+            <Popover.Panel
+              static
+              className="absolute left-8 top-full z-10 mt-3 w-56 rounded bg-white shadow-md ring-1 ring-gray-100"
+            >
+              {children}
+            </Popover.Panel>
+          </Transition>
+        </React.Fragment>
+      )}
     </Popover>
   );
 }
+
+export function DesktopMenuDropdownDisclosure({
+  title,
+  children,
+}: PropsWithChildren<{ title: string }>) {
+  return (
+    <Disclosure as="div" className="">
+      {({ open }) => (
+        <div className={clsx('m-1.5 rounded', open && 'bg-gray-100')}>
+          <Disclosure.Button
+            className={clsx(
+              'flex w-full items-center justify-between px-2 py-1 text-sm leading-[1.25rem] hover:text-blue-600',
+              open ? 'text-blue-600 font-medium' : 'text-gray-500',
+            )}
+          >
+            {title}
+            <ChevronDownIcon
+              className={clsx('h-5 w-5 flex-none text-blue-600', {
+                'rotate-180': open,
+              })}
+              aria-hidden="true"
+            />
+          </Disclosure.Button>
+          <Disclosure.Panel className="">{children}</Disclosure.Panel>
+        </div>
+      )}
+    </Disclosure>
+  );
+}
diff --git a/packages/ui/src/components/Client/MobileMenu.tsx b/packages/ui/src/components/Client/MobileMenu.tsx
index 29132d9cc..9652da9de 100644
--- a/packages/ui/src/components/Client/MobileMenu.tsx
+++ b/packages/ui/src/components/Client/MobileMenu.tsx
@@ -3,6 +3,7 @@ import { Dialog, Disclosure } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import clsx from 'clsx';
 import React, { createContext, PropsWithChildren } from 'react';
+import { useIntl } from 'react-intl';
 
 const MobileMenuContext = createContext({
   isOpen: false,
@@ -24,23 +25,29 @@ export function MobileMenuButton(
   props: PropsWithChildren<{ className?: string }>,
 ) {
   const { isOpen, setIsOpen } = React.useContext(MobileMenuContext);
+  const intl = useIntl();
   return (
     <button
       type="button"
       className={props.className}
       onClick={() => setIsOpen(!isOpen)}
     >
-      {props.children}
+      <span className="sr-only">
+        {intl.formatMessage({
+          defaultMessage: 'Open main navigation',
+          id: 'e7yFQY',
+        })}
+      </span>
+      {!isOpen ? <HamburgerLogo /> : <CloseIcon />}
     </button>
   );
 }
-
 export function MobileMenu({ children }: PropsWithChildren<{}>) {
   const { isOpen, setIsOpen } = React.useContext(MobileMenuContext);
   return (
     <Dialog as="div" className="lg:hidden" open={isOpen} onClose={setIsOpen}>
       <div className="fixed inset-0 z-10" />
-      <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+      <Dialog.Panel className="fixed border-t border-t-solid border-t-blue-100 top-[5.75rem] inset-y-0 right-0 w-full overflow-y-auto bg-white py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 z-20">
         {children}
       </Dialog.Panel>
     </Dialog>
@@ -68,25 +75,76 @@ export function MobileMenuLink({
 export function MobileMenuDropdown({
   title,
   children,
-}: PropsWithChildren<{ title: string }>) {
+  nestLevel,
+}: PropsWithChildren<{ title: string; nestLevel: number }>) {
   return (
-    <Disclosure as="div" className="-mx-3">
+    <Disclosure as="div" className="">
       {({ open }) => (
-        <>
-          <Disclosure.Button className="flex w-full items-center justify-between rounded-lg py-2 pl-3 pr-3.5 text-base font-semibold leading-7 hover:bg-gray-50">
+        <div
+          className={clsx(
+            '',
+            open && nestLevel === 2 && 'bg-gray-100 rounded mx-8',
+          )}
+        >
+          <Disclosure.Button
+            className={clsx(
+              'flex w-full items-center justify-between py-4 leading-[1.25rem]',
+              open && 'text-blue-600',
+              !open && 'text-gray-600',
+              open && nestLevel === 1 && 'bg-blue-100',
+              !open &&
+                nestLevel === 1 &&
+                'border-b border-b-solid border-b-blue-100',
+              nestLevel === 1 && 'px-8 text-lg',
+              !open && nestLevel === 2 && 'px-10',
+              open && nestLevel === 2 && 'px-2',
+            )}
+          >
             {title}
             <ChevronDownIcon
-              className={clsx('h-5 w-5 flex-none', {
+              className={clsx('h-5 w-5 flex-none text-blue-600', {
                 'rotate-180': open,
               })}
               aria-hidden="true"
             />
           </Disclosure.Button>
-          <Disclosure.Panel className="mt-2 space-y-2">
-            {children}
-          </Disclosure.Panel>
-        </>
+          <Disclosure.Panel className="">{children}</Disclosure.Panel>
+        </div>
       )}
     </Disclosure>
   );
 }
+
+function HamburgerLogo() {
+  return (
+    <svg
+      width="21"
+      height="23"
+      viewBox="0 0 21 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.03394 0.00125289H19.8146C21.3951 -0.0663573 21.3951 2.62517 19.8146 2.55756H5.09285C3.54107 2.62517 3.48072 0.00125289 5.0325 0.00125289H5.03394ZM19.8146 10.2233C21.3348 10.2233 21.3348 12.778 19.8146 12.778H11.481C9.92922 12.778 9.92922 10.2233 11.481 10.2233H19.8146ZM19.8146 20.4453C21.3348 20.4453 21.3348 23 19.8146 23H1.14013C-0.380039 23 -0.380039 20.4453 1.14013 20.4453H19.8146Z"
+        fill="#1A56DB"
+      />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.3493 10.4989L20.612 2.24836C20.859 2.00136 20.9978 1.66636 20.9978 1.31706C20.9978 0.967751 20.859 0.632753 20.612 0.385757C20.3651 0.138761 20.0301 0 19.6808 0C19.3316 0 18.9966 0.138761 18.7496 0.385757L10.5 8.6494L2.25035 0.385757C2.00338 0.138761 1.66842 3.10129e-07 1.31915 3.12731e-07C0.969886 3.15334e-07 0.634924 0.138761 0.387954 0.385757C0.140984 0.632753 0.00223861 0.967751 0.0022386 1.31706C0.0022386 1.66636 0.140984 2.00136 0.387954 2.24836L8.65072 10.4989L0.387954 18.7494C0.265025 18.8713 0.167453 19.0164 0.100868 19.1763C0.0342819 19.3361 0 19.5075 0 19.6807C0 19.8539 0.0342819 20.0253 0.100868 20.1852C0.167453 20.345 0.265025 20.4901 0.387954 20.612C0.50988 20.7349 0.654938 20.8325 0.814763 20.8991C0.974587 20.9657 1.14601 21 1.31915 21C1.49229 21 1.66372 20.9657 1.82355 20.8991C1.98337 20.8325 2.12843 20.7349 2.25035 20.612L10.5 12.3484L18.7496 20.612C18.8716 20.7349 19.0166 20.8325 19.1765 20.8991C19.3363 20.9657 19.5077 21 19.6808 21C19.854 21 20.0254 20.9657 20.1852 20.8991C20.3451 20.8325 20.4901 20.7349 20.612 20.612C20.735 20.4901 20.8325 20.345 20.8991 20.1852C20.9657 20.0253 21 19.8539 21 19.6807C21 19.5075 20.9657 19.3361 20.8991 19.1763C20.8325 19.0164 20.735 18.8713 20.612 18.7494L12.3493 10.4989Z"
+        fill="#1A56DB"
+      />
+    </svg>
+  );
+}
diff --git a/packages/ui/src/components/Molecules/LanguageSwitcher.stories.tsx b/packages/ui/src/components/Molecules/LanguageSwitcher.stories.tsx
index b8f3298a2..2ca738dc9 100644
--- a/packages/ui/src/components/Molecules/LanguageSwitcher.stories.tsx
+++ b/packages/ui/src/components/Molecules/LanguageSwitcher.stories.tsx
@@ -1,15 +1,29 @@
-import { Url } from '@custom/schema';
+import { FrameQuery, registerExecutor, Url } from '@custom/schema';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { Translations, TranslationsProvider } from '../../utils/translations';
+import { Default } from '../Routes/Frame.stories';
 import { LanguageSwitcher } from './LanguageSwitcher';
 
-const TranslationsDecorator = ((Story, ctx) => (
-  <TranslationsProvider defaultTranslations={ctx.args}>
-    <Story />
-  </TranslationsProvider>
-)) as Decorator<Translations>;
+const TranslationsDecorator = ((Story, ctx) => {
+  registerExecutor(FrameQuery, {
+    ...Default.args,
+    websiteSettings: {
+      homePage: {
+        translations: [
+          { locale: 'en', path: '/en/home' as Url },
+          { locale: 'de', path: '/de/home' as Url },
+        ],
+      },
+    },
+  });
+  return (
+    <TranslationsProvider defaultTranslations={ctx.args}>
+      <Story />
+    </TranslationsProvider>
+  );
+}) as Decorator<Translations>;
 
 export default {
   component: LanguageSwitcher,
@@ -35,3 +49,13 @@ export const Full = {
     en: '/en/english-version' as Url,
   },
 } satisfies Story;
+
+export const Homepage = {
+  args: {
+    de: '/de/home' as Url,
+    en: '/en/home' as Url,
+  },
+  parameters: {
+    location: new URL('local:/de'),
+  },
+} satisfies Story;
diff --git a/packages/ui/src/components/Molecules/LanguageSwitcher.tsx b/packages/ui/src/components/Molecules/LanguageSwitcher.tsx
index 5b6817fa2..234c27439 100644
--- a/packages/ui/src/components/Molecules/LanguageSwitcher.tsx
+++ b/packages/ui/src/components/Molecules/LanguageSwitcher.tsx
@@ -8,13 +8,13 @@ export function LanguageSwitcher() {
   const translations = useTranslations();
   const [location] = useLocation();
   return (
-    <ul className="flex gap-2">
+    <ul className="flex gap-2 uppercase">
       {Object.values(Locale).map((locale) => (
         <li key={locale}>
           {translations[locale] ? (
             <Link
               href={translations[locale]!}
-              className={clsx({
+              className={clsx('text-gray-500', {
                 underline: location.pathname !== translations[locale],
               })}
             >
diff --git a/packages/ui/src/components/Molecules/Loading.tsx b/packages/ui/src/components/Molecules/Loading.tsx
index 71eae4d85..97b2a0cbd 100644
--- a/packages/ui/src/components/Molecules/Loading.tsx
+++ b/packages/ui/src/components/Molecules/Loading.tsx
@@ -2,8 +2,10 @@ import React from 'react';
 
 export function Loading() {
   return (
-    <div className="animate-pulse text-xl font-bold italic text-indigo-600 text-center my-8">
-      Loading&hellip;
+    <div className="flex items-center justify-center">
+      <div className="my-8 px-3 py-1 text-xs font-medium leading-none text-center text-blue-800 bg-blue-200 rounded-full animate-pulse dark:bg-blue-900 dark:text-blue-200">
+        loading...
+      </div>
     </div>
   );
 }
diff --git a/packages/ui/src/components/Molecules/SearchForm.tsx b/packages/ui/src/components/Molecules/SearchForm.tsx
index 26b7afea4..e043a6fcd 100644
--- a/packages/ui/src/components/Molecules/SearchForm.tsx
+++ b/packages/ui/src/components/Molecules/SearchForm.tsx
@@ -33,7 +33,7 @@ export function SearchForm() {
             navigate(location, { ...values, page: 1 });
           })}
         >
-          <div className="w-full sm:max-w-xs">
+          <div className="mr-2 mb-2 w-full sm:max-w-xs">
             <label htmlFor="keyword" className="sr-only">
               {intl.formatMessage({
                 defaultMessage: 'Keyword',
@@ -42,7 +42,7 @@ export function SearchForm() {
             </label>
             <input
               {...register('keyword')}
-              className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              className="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus-within:border-gray-300 focus:ring-0"
               placeholder={intl.formatMessage({
                 defaultMessage: 'Keyword',
                 id: 'fe0rMF',
@@ -51,7 +51,7 @@ export function SearchForm() {
           </div>
           <button
             type="submit"
-            className="mt-3 inline-flex w-full items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:ml-3 sm:mt-0 sm:w-auto"
+            className="mb-2 py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-indigo-600 sm:w-fit hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-600 dark:focus:ring-indigo-600"
           >
             {intl.formatMessage({ defaultMessage: 'Search', id: 'xmcVZ0' })}
           </button>
diff --git a/packages/ui/src/components/Organisms/ContentHub.tsx b/packages/ui/src/components/Organisms/ContentHub.tsx
index ad44e000a..32e47b53e 100644
--- a/packages/ui/src/components/Organisms/ContentHub.tsx
+++ b/packages/ui/src/components/Organisms/ContentHub.tsx
@@ -24,7 +24,11 @@ export function ContentHub({ pageSize = 10 }: { pageSize: number }) {
     <div className="mx-auto max-w-6xl">
       <SearchForm />
       {error ? (
-        <p className="text-red-500 italic text-center my-8">{error}</p>
+        <div className="flex items-center justify-center">
+          <div className="my-8 px-3 py-1 text-xs font-medium leading-none text-center text-red-500 bg-red-100 rounded-full">
+            {error}
+          </div>
+        </div>
       ) : null}
       {isLoading ? <Loading /> : null}
       {data?.contentHub.total === 0 ? (
@@ -37,14 +41,43 @@ export function ContentHub({ pageSize = 10 }: { pageSize: number }) {
           <ul className="my-8 grid md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
             {data?.contentHub.items.filter(isTruthy).map((item) => (
               <li key={item.path}>
-                <Link href={item.path}>
-                  {item.teaserImage ? (
-                    <Image {...item.teaserImage} className="w-full" />
-                  ) : (
-                    <div className="aspect-[4/3] bg-indigo-200" />
-                  )}
-                  <div className="mt-2 font-bold">{item.title}</div>
-                </Link>
+                <div className="max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 overflow-hidden">
+                  <Link href={item.path} className="rounded-t-lg">
+                    {item.teaserImage ? (
+                      <Image {...item.teaserImage} className="w-full" />
+                    ) : (
+                      <div className="aspect-[4/3] bg-indigo-200" />
+                    )}
+                  </Link>
+                  <div className="p-5">
+                    <Link href={item.path}>
+                      <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+                        {item.title}
+                      </h5>
+                    </Link>
+                    <Link
+                      href={item.path}
+                      className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+                    >
+                      Read more
+                      <svg
+                        className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
+                        aria-hidden="true"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 14 10"
+                      >
+                        <path
+                          stroke="currentColor"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M1 5h12m0 0L9 1m4 4L9 9"
+                        />
+                      </svg>
+                    </Link>
+                  </div>
+                </div>
               </li>
             ))}
           </ul>
diff --git a/packages/ui/src/components/Organisms/Footer.stories.tsx b/packages/ui/src/components/Organisms/Footer.stories.tsx
index 1d773a29b..086f62743 100644
--- a/packages/ui/src/components/Organisms/Footer.stories.tsx
+++ b/packages/ui/src/components/Organisms/Footer.stories.tsx
@@ -21,12 +21,48 @@ export const Footer = {
       {
         locale: Locale.En,
         items: [
-          { title: 'About', target: '/about' as Url },
-          { title: 'Blog', target: '/blog' as Url },
-          { title: 'Jobs', target: '/jobs' as Url },
-          { title: 'Press', target: '/press' as Url },
-          { title: 'Accessibility', target: '/accessibility' as Url },
-          { title: 'Partners', target: '/partners' as Url },
+          {
+            id: '1',
+            title: 'About',
+            target: '/about' as Url,
+          },
+          {
+            id: '2',
+            title: 'Blog',
+            target: '/blog' as Url,
+          },
+          {
+            id: '3',
+            title: 'Jobs',
+            target: '/jobs' as Url,
+          },
+          {
+            id: '4',
+            title: 'Press',
+            target: '/press' as Url,
+          },
+          {
+            id: '5',
+            title: 'Accessibility',
+            target: '/accessibility' as Url,
+          },
+          {
+            id: '6',
+            title: 'Partners',
+            target: '/partners' as Url,
+          },
+          {
+            id: '7',
+            title: 'Drupal',
+            target: '/drupal' as Url,
+            parent: '0',
+          },
+          {
+            id: '8',
+            title: 'Gatsby',
+            target: '/gatsby' as Url,
+            parent: '0',
+          },
         ].map((item, index) => ({
           ...item,
           id: index.toString(),
diff --git a/packages/ui/src/components/Organisms/Footer.tsx b/packages/ui/src/components/Organisms/Footer.tsx
index 814594d5b..23fbcdc99 100644
--- a/packages/ui/src/components/Organisms/Footer.tsx
+++ b/packages/ui/src/components/Organisms/Footer.tsx
@@ -19,39 +19,197 @@ export function Footer() {
   const intl = useIntl();
   const items = buildNavigationTree(useFooterNavigation(intl.locale));
   return (
-    <footer className="bg-white">
-      <div className="mx-auto max-w-7xl overflow-hidden py-20 px-6 sm:py-24 lg:px-8">
-        <nav
-          className="-mb-6 columns-2 sm:flex sm:justify-center sm:space-x-12"
-          aria-label="Footer"
-        >
-          {items.filter(isTruthy).map((item) => (
-            <div key={item.title} className="pb-6">
-              <Link
-                href={item.target}
-                className="text-sm leading-6 text-gray-600 hover:text-gray-900"
+    <footer
+      id="footer"
+      className={'relative z-10 bg-gray-100 text-gray-500 p-4 lg:py-16'}
+    >
+      <h2 className={'sr-only'}>Footer</h2>
+      <div className="container mx-auto pb-8">
+        <div className="lg:px-6 flex flex-wrap justify-between">
+          <div className={'w-full mb-8 md:mb-0 md:w-1/4'}>
+            <a href="/" className={'mb-4 block'}>
+              <svg
+                width="168"
+                height="14"
+                viewBox="0 0 168 14"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                {item.title}
-              </Link>
+                <mask
+                  id="mask0_176_129733"
+                  maskUnits="userSpaceOnUse"
+                  x="0"
+                  y="0"
+                  width="168"
+                  height="14"
+                >
+                  <path d="M167.999 0H0V14H167.999V0Z" fill="white" />
+                </mask>
+                <g mask="url(#mask0_176_129733)">
+                  <path
+                    d="M165.267 13.4665C166.124 13.1115 166.793 12.6068 167.276 11.9537C167.758 11.3007 168 10.5279 168 9.63681C168 8.99092 167.864 8.45054 167.591 8.01709C167.318 7.58365 166.934 7.22149 166.439 6.93063C165.943 6.63976 165.372 6.4045 164.725 6.22343C164.078 6.04235 163.385 5.89406 162.65 5.77715C162.167 5.70015 161.723 5.61175 161.317 5.5148C160.911 5.41784 160.558 5.29522 160.26 5.14694C159.962 4.99866 159.729 4.81758 159.565 4.60371C159.4 4.38984 159.318 4.14175 159.318 3.85659C159.318 3.50726 159.445 3.2107 159.699 2.96403C159.952 2.71879 160.295 2.53059 160.726 2.40226C161.157 2.27394 161.653 2.20835 162.212 2.20835C162.733 2.20835 163.227 2.27679 163.697 2.41224C164.166 2.5477 164.609 2.75159 165.02 3.02249C165.432 3.29339 165.798 3.62418 166.115 4.012L167.658 2.28677C167.303 1.80913 166.864 1.39849 166.345 1.05488C165.824 0.712681 165.225 0.450333 164.546 0.269255C163.867 0.0881779 163.108 -0.00164795 162.271 -0.00164795C161.484 -0.00164795 160.757 0.0924553 160.091 0.279236C159.424 0.467443 158.836 0.735494 158.329 1.08339C157.821 1.43271 157.427 1.85618 157.149 2.35379C156.87 2.85139 156.73 3.41031 156.73 4.03053C156.73 4.65076 156.841 5.14837 157.063 5.60177C157.285 6.05375 157.612 6.4487 158.044 6.78519C158.475 7.12168 159.001 7.39544 159.624 7.60931C160.246 7.82318 160.957 7.99428 161.757 8.1226C162.1 8.17393 162.443 8.23239 162.784 8.29655C163.127 8.36214 163.456 8.43913 163.774 8.52896C164.092 8.62021 164.374 8.73285 164.621 8.8683C164.869 9.00375 165.065 9.16629 165.212 9.35307C165.358 9.54128 165.431 9.76371 165.431 10.0218C165.431 10.4096 165.281 10.7361 164.983 11.0013C164.684 11.2665 164.304 11.4661 163.84 11.603C163.377 11.7384 162.885 11.8069 162.364 11.8069C161.463 11.8069 160.623 11.6301 159.841 11.2736C159.06 10.9186 158.283 10.3069 157.509 9.44147L156.043 11.4191C156.538 11.988 157.093 12.4599 157.709 12.8349C158.325 13.2099 159.01 13.4979 159.766 13.6975C160.52 13.8971 161.349 13.9984 162.251 13.9984C163.406 13.9984 164.413 13.8201 165.27 13.4651M143.663 2.49922H147.737C148.434 2.49922 149 2.63182 149.431 2.89702C149.862 3.16222 150.078 3.56002 150.078 4.08899C150.078 4.42548 149.986 4.71635 149.802 4.96159C149.619 5.20682 149.361 5.39788 149.031 5.53333C148.7 5.66879 148.332 5.73723 147.926 5.73723H143.661V2.50064L143.663 2.49922ZM143.663 7.90873H148.137C148.581 7.90873 149.007 7.97004 149.413 8.09266C149.819 8.21528 150.149 8.40634 150.403 8.66441C150.656 8.9239 150.784 9.2661 150.784 9.69242C150.784 10.0931 150.679 10.4324 150.47 10.7104C150.26 10.9885 149.966 11.1952 149.585 11.3307C149.204 11.4661 148.754 11.5346 148.233 11.5346H143.663V7.90873ZM148.233 13.803C148.892 13.803 149.524 13.7289 150.127 13.5806C150.731 13.4323 151.27 13.2028 151.746 12.8919C152.222 12.5811 152.596 12.1676 152.869 11.6515C153.142 11.1353 153.277 10.508 153.277 9.77083C153.277 9.11211 153.135 8.53894 152.849 8.05416C152.563 7.56939 152.18 7.17444 151.697 6.87074C151.214 6.56704 150.68 6.35032 150.098 6.22057L150.04 6.60839C150.865 6.38882 151.494 6.02096 151.925 5.50339C152.356 4.98725 152.572 4.3599 152.572 3.62275C152.572 2.88561 152.394 2.28535 152.038 1.78061C151.683 1.27588 151.156 0.892333 150.457 0.627133C149.759 0.361933 148.896 0.229333 147.867 0.229333H141.24V13.8059H148.228L148.233 13.803ZM135.12 10.8174L134.511 8.62591H127.39L126.514 10.8174H135.12ZM126.361 13.803L129.998 5.48486C130.099 5.22679 130.209 4.96159 130.322 4.68926C130.437 4.41835 130.55 4.13319 130.665 3.83662C130.78 3.53863 130.886 3.24491 130.988 2.95405C131.089 2.66319 131.184 2.3823 131.274 2.10997L130.703 2.12993C130.778 2.36234 130.868 2.62469 130.969 2.91555C131.07 3.20642 131.179 3.50441 131.292 3.80811C131.407 4.11181 131.518 4.40695 131.625 4.69068C131.733 4.97442 131.838 5.22108 131.939 5.42782L135.595 13.8044H138.203L132.281 0.232184H129.786L123.845 13.8059H126.358L126.361 13.803ZM121.176 13.803V11.4761H114.532V0.232184H112.057V13.8059H121.176V13.803ZM91.2451 5.7358H83.267V7.98572H91.2451V5.7358ZM92.2924 13.803V11.5146H84.4473V2.5206H92.2168V0.232184H82.0097V13.8059H92.2924V13.803ZM76.7689 5.7358H68.7909V7.98572H76.7689V5.7358ZM77.8162 13.803V11.5146H69.9712V2.5206H77.7406V0.232184H67.5335V13.8059H77.8162V13.803ZM63.8637 13.803V11.4561H54.1327L54.9896 12.1149L63.6523 1.97737V0.232184H52.3419V2.61756H61.3868L60.53 1.91891L51.8462 12.0407V13.8059H63.8623L63.8637 13.803ZM46.2302 10.8174L45.6211 8.62591H38.5L37.6235 10.8174H46.2302ZM37.4709 13.803L41.1085 5.48486C41.2107 5.22679 41.3185 4.96159 41.4319 4.68926C41.5453 4.41693 41.6601 4.13319 41.7749 3.83662C41.8897 3.53863 41.9976 3.24491 42.0984 2.95405C42.1992 2.66319 42.2944 2.3823 42.384 2.10997L41.8127 2.12993C41.8883 2.36234 41.9779 2.62469 42.0788 2.91555C42.1796 3.20642 42.2888 3.50441 42.4022 3.80811C42.517 4.11181 42.6276 4.40695 42.7354 4.69068C42.8432 4.97442 42.9483 5.22108 43.0491 5.42782L46.7049 13.8044H49.3133L43.3907 0.232184H40.8956L34.9548 13.8059H37.4681L37.4709 13.803ZM19.8556 13.803V8.59027C19.8556 7.43964 19.8303 6.3988 19.7799 5.46775C19.7295 4.5367 19.6273 3.60564 19.4747 2.67602L19.2087 3.56857L23.6906 13.8073H25.543L30.0977 3.56715L29.8316 2.67459C29.679 3.63131 29.5768 4.57804 29.5264 5.5148C29.476 6.45298 29.4508 7.47671 29.4508 8.58884V13.8044H31.9067V0.232184H29.2058L24.042 11.7313L25.2797 11.7513L20.1356 0.232184H17.3969V13.8059H19.8528L19.8556 13.803ZM11.2754 10.8174L10.6664 8.62591H3.54238L2.66589 10.8174H11.2726H11.2754ZM2.51607 13.803L6.15367 5.48486C6.25588 5.22679 6.36369 4.96159 6.4771 4.68926C6.59191 4.41835 6.70533 4.13319 6.82014 3.83662C6.93495 3.53863 7.04136 3.24491 7.14357 2.95405C7.24579 2.66319 7.3396 2.3823 7.4292 2.10997L6.85794 2.12993C6.93355 2.36234 7.02316 2.62469 7.12397 2.91555C7.22618 3.20642 7.33399 3.50441 7.44741 3.80811C7.56222 4.11181 7.67283 4.40695 7.78064 4.69068C7.88845 4.97442 7.99347 5.22108 8.09428 5.42782L11.7501 13.8044H14.3586L8.43591 0.232184H5.94084L0 13.8059H2.51327L2.51607 13.803Z"
+                    fill="#1D1D1B"
+                  />
+                </g>
+                <mask
+                  id="mask1_176_129733"
+                  maskUnits="userSpaceOnUse"
+                  x="0"
+                  y="0"
+                  width="168"
+                  height="14"
+                >
+                  <path d="M168 0H0V14H168V0Z" fill="white" />
+                </mask>
+                <g mask="url(#mask1_176_129733)">
+                  <path
+                    d="M108.051 11.5175H95.9463V13.8059H108.051V11.5175Z"
+                    fill="#1D1D1B"
+                  />
+                </g>
+              </svg>
+            </a>
+            <div className="sm:flex sm:items-center sm:justify-between">
+              <div className="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
+                <a
+                  href="#"
+                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </a>
+                <a
+                  href="#"
+                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                  >
+                    <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+                  </svg>
+                </a>
+                <a
+                  href="#"
+                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </a>
+                <a
+                  href="#"
+                  className="text-gray-400 hover:text-blue-600 dark:hover:text-white"
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </a>
+              </div>
             </div>
-          ))}
-        </nav>
-        <p className="mt-10 text-center text-xs leading-5 text-gray-500">
-          &copy;{' '}
-          {intl.formatMessage(
-            {
-              defaultMessage: '{year} {company_name}. All rights reserved.',
-              id: 'qA8qQH',
-            },
-            {
-              year: 2024,
-              company_name: intl.formatMessage({
-                defaultMessage: 'Company name',
-                id: 'FPGwAt',
-              }),
-            },
-          )}
-        </p>
+          </div>
+          <nav>
+            <ul
+              className={'md:ml-[5.625rem] flex flex-wrap justify-between grow'}
+              aria-label="Footer Primary"
+            >
+              {items.map((item, key) => (
+                <>
+                  <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'
+                    }
+                  >
+                    {item.target ? (
+                      <Link
+                        href={item.target!}
+                        className={
+                          'text-gray-900 block hover:text-blue-600 transition-all font-bold text-[0.875rem] leading-[1.313rem] uppercase mb-4'
+                        }
+                      >
+                        {item.title}
+                      </Link>
+                    ) : (
+                      <span
+                        className={
+                          'block transition-all font-bold text-[0.875rem] leading-[1.313rem] uppercase mb-4'
+                        }
+                      >
+                        {item.title}
+                      </span>
+                    )}
+                    {item.children.length > 0
+                      ? item.children.map((child) => (
+                          <Link
+                            key={child.target}
+                            href={child.target}
+                            className="block transition-all text-base mb-4 hover:text-blue-600"
+                          >
+                            {child.title}
+                          </Link>
+                        ))
+                      : null}
+                  </li>
+                </>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      </div>
+      <div
+        className={
+          'container mx-auto w-full border-t border-t-gray-200 text-center'
+        }
+      >
+        <div className={'text-base'}>
+          <p className="mt-10 text-center text-xs leading-5 text-gray-500">
+            &copy;{' '}
+            {intl.formatMessage(
+              {
+                defaultMessage: '{year} {company_name}. All rights reserved.',
+                id: 'qA8qQH',
+              },
+              {
+                year: 2024,
+                company_name: intl.formatMessage({
+                  defaultMessage: 'Company name',
+                  id: 'FPGwAt',
+                }),
+              },
+            )}
+          </p>
+        </div>
       </div>
     </footer>
   );
diff --git a/packages/ui/src/components/Organisms/Header.stories.tsx b/packages/ui/src/components/Organisms/Header.stories.tsx
index 8e245b299..147096668 100644
--- a/packages/ui/src/components/Organisms/Header.stories.tsx
+++ b/packages/ui/src/components/Organisms/Header.stories.tsx
@@ -55,6 +55,18 @@ export const Idle = {
             target: '/gatsby' as Url,
             parent: '2',
           },
+          {
+            id: '7',
+            title: 'Gatsby Turbo',
+            target: '/gatsby-turbo' as Url,
+            parent: '6',
+          },
+          {
+            id: '8',
+            title: 'Super Gatsby Turbo',
+            target: '/gatsby-turbo' as Url,
+            parent: '6',
+          },
         ],
       },
     ],
@@ -86,7 +98,10 @@ export const Expanded: StoryObj<FrameQuery> = {
       await userEvent.click(
         await navigation.findByRole('button', { name: 'Products' }),
       );
-      await navigation.findByRole('link', { name: 'Drupal' });
+      userEvent.click(
+        await navigation.findByRole('button', { name: 'Gatsby' }),
+      );
+      await navigation.findByRole('link', { name: 'Gatsby Turbo' });
     }
   },
 };
diff --git a/packages/ui/src/components/Organisms/Header.tsx b/packages/ui/src/components/Organisms/Header.tsx
index 5e0dd6936..dacd4f058 100644
--- a/packages/ui/src/components/Organisms/Header.tsx
+++ b/packages/ui/src/components/Organisms/Header.tsx
@@ -1,12 +1,15 @@
-import { FrameQuery, Link } from '@custom/schema';
-import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
+import { FrameQuery, Link, Url } from '@custom/schema';
+import clsx from 'clsx';
 import React from 'react';
 import { useIntl } from 'react-intl';
 
 import { isTruthy } from '../../utils/isTruthy';
 import { buildNavigationTree } from '../../utils/navigation';
 import { useOperation } from '../../utils/operation';
-import { DesktopMenu, DesktopMenuDropDown } from '../Client/DesktopMenu';
+import {
+  DesktopMenuDropDown,
+  DesktopMenuDropdownDisclosure,
+} from '../Client/DesktopMenu';
 import {
   MobileMenu,
   MobileMenuButton,
@@ -31,114 +34,127 @@ export function Header() {
 
   return (
     <MobileMenuProvider>
-      <header className="bg-white">
+      <header className="max-w-screen-xl mx-auto">
+        <div className="hidden md:flex">
+          <UserActions iconWidth="16" iconHeight="16" />
+        </div>
         <nav
-          className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
+          className="border-b border-b-gray-200 z-20 relative mx-auto flex items-center justify-between py-6 px-3.5"
           aria-label="Global"
         >
           <div className="flex lg:flex-1">
-            <a href="#" className="-m-1.5 p-1.5">
+            <Link href={'/' as Url} className="-ml-1 mt-1 md:-mt-2.5">
               <span className="sr-only">
                 {intl.formatMessage({
                   defaultMessage: 'Company name',
                   id: 'FPGwAt',
                 })}
               </span>
-              <img
-                className="h-8 w-auto"
-                src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
-                alt=""
-              />
-            </a>
+              <SiteLogo width={213} height={59} className={'hidden lg:block'} />
+              <SiteLogo width={160} height={40} className={'block lg:hidden'} />
+            </Link>
           </div>
-          <div className="flex lg:hidden">
-            <MobileMenuButton className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
-              <span className="sr-only">
-                {intl.formatMessage({
-                  defaultMessage: 'Open main navigation',
-                  id: 'e7yFQY',
-                })}
-              </span>
-              <Bars3Icon className="h-6 w-6" aria-hidden="true" />
-            </MobileMenuButton>
+          <div className="flex md:hidden">
+            <UserActions
+              iconWidth="23"
+              iconHeight="23"
+              showIconText={false}
+              isDesktop={false}
+            />
+            <MobileMenuButton className="inline-flex items-center justify-center rounded-md text-gray-700 ml-5 sm:ml-7 cursor-pointer"></MobileMenuButton>
           </div>
-          <DesktopMenu>
+          <div className={'hidden md:flex'}>
             {items.map((item, key) =>
               item.children.length === 0 ? (
                 <Link
                   key={key}
                   href={item.target}
-                  className="text-sm font-semibold leading-6 text-gray-900"
+                  className="text-base font-medium text-gray-600 ml-8 hover:text-blue-600"
+                  activeClassName={'font-bold text-blue-200'}
                 >
                   {item.title}
                 </Link>
               ) : (
-                <DesktopMenuDropDown title={item.title} key={key}>
-                  {item.children.map((child) => (
-                    <Link
-                      key={child.target}
-                      href={child.target}
-                      className="block rounded-lg py-2 px-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-50"
-                    >
-                      {child.title}
-                    </Link>
-                  ))}
+                <DesktopMenuDropDown title={item.title} key={item.title}>
+                  {item.children.map((child) =>
+                    child.children.length === 0 ? (
+                      <Link
+                        key={child.target}
+                        href={child.target}
+                        className="m-1.5 block hover:text-blue-600 p-2 text-sm leading-[1.25rem] text-gray-500"
+                      >
+                        {child.title}
+                      </Link>
+                    ) : (
+                      <DesktopMenuDropdownDisclosure
+                        title={child.title}
+                        key={child.title}
+                      >
+                        {child.children.map((grandChild) => (
+                          <Link
+                            key={grandChild.target}
+                            href={grandChild.target}
+                            className="block p-2 pl-5 text-sm leading-[1.25rem] text-gray-500 hover:text-blue-600"
+                          >
+                            {grandChild.title}
+                          </Link>
+                        ))}
+                      </DesktopMenuDropdownDisclosure>
+                    ),
+                  )}
                 </DesktopMenuDropDown>
               ),
             )}
-            <LanguageSwitcher />
-          </DesktopMenu>
+          </div>
         </nav>
         <MobileMenu>
-          <div className="flex items-center justify-between">
-            <a href="#" className="-m-1.5 p-1.5">
-              <span className="sr-only">
-                {intl.formatMessage({
-                  defaultMessage: 'Company name',
-                  id: 'FPGwAt',
-                })}
-              </span>
-              <img
-                className="h-8 w-auto"
-                src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
-                alt=""
-              />
-            </a>
-            <MobileMenuButton className="-m-2.5 rounded-md p-2.5 text-gray-700">
-              <span className="sr-only">
-                {intl.formatMessage({
-                  defaultMessage: 'Close navigation',
-                  id: 'SRsuWF',
-                })}
-              </span>
-              <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-            </MobileMenuButton>
-          </div>
           <div className="mt-6 flow-root">
             <div className="-my-6 divide-y divide-gray-500/10">
-              <div className="space-y-2 py-6">
+              <div>
                 {items.map((item) =>
                   item.children.length === 0 ? (
                     <Link
                       key={item.title}
                       href={item.target}
-                      className="-mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                      className="block hover:text-blue-600 py-4 px-8 text-lg text-gray-600 border-b border-b-solid border-b-blue-100"
                     >
                       {item.title}
                     </Link>
                   ) : (
-                    <MobileMenuDropdown title={item.title} key={item.title}>
-                      {item.children.map((child) => (
-                        <MobileMenuLink
-                          key={child.target}
-                          href={child.target}
-                          title={child.title}
-                        />
-                      ))}
+                    <MobileMenuDropdown
+                      title={item.title}
+                      key={item.title}
+                      nestLevel={1}
+                    >
+                      {item.children.map((child) =>
+                        child.children.length === 0 ? (
+                          <Link
+                            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"
+                          >
+                            {child.title}
+                          </Link>
+                        ) : (
+                          <MobileMenuDropdown
+                            title={child.title}
+                            key={child.title}
+                            nestLevel={2}
+                          >
+                            {child.children.map((grandChild) => (
+                              <MobileMenuLink
+                                key={grandChild.target}
+                                href={grandChild.target}
+                                title={grandChild.title}
+                              />
+                            ))}
+                          </MobileMenuDropdown>
+                        ),
+                      )}
                     </MobileMenuDropdown>
                   ),
                 )}
-                <LanguageSwitcher />
               </div>
             </div>
           </div>
@@ -147,3 +163,77 @@ export function Header() {
     </MobileMenuProvider>
   );
 }
+
+function UserActions({
+  isDesktop = true,
+}: {
+  iconWidth: string;
+  iconHeight: string;
+  showIconText?: boolean;
+  isDesktop?: boolean;
+}) {
+  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',
+      )}
+    >
+      <LanguageSwitcher />
+    </div>
+  );
+}
+
+function SiteLogo({
+  className,
+  width,
+  height,
+}: {
+  className?: string;
+  width: number;
+  height: number;
+}) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 168 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <mask
+        id="mask0_176_129733"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="168"
+        height="14"
+      >
+        <path d="M167.999 0H0V14H167.999V0Z" fill="white"></path>
+      </mask>
+      <g mask="url(#mask0_176_129733)">
+        <path
+          d="M165.267 13.4665C166.124 13.1115 166.793 12.6068 167.276 11.9537C167.758 11.3007 168 10.5279 168 9.63681C168 8.99092 167.864 8.45054 167.591 8.01709C167.318 7.58365 166.934 7.22149 166.439 6.93063C165.943 6.63976 165.372 6.4045 164.725 6.22343C164.078 6.04235 163.385 5.89406 162.65 5.77715C162.167 5.70015 161.723 5.61175 161.317 5.5148C160.911 5.41784 160.558 5.29522 160.26 5.14694C159.962 4.99866 159.729 4.81758 159.565 4.60371C159.4 4.38984 159.318 4.14175 159.318 3.85659C159.318 3.50726 159.445 3.2107 159.699 2.96403C159.952 2.71879 160.295 2.53059 160.726 2.40226C161.157 2.27394 161.653 2.20835 162.212 2.20835C162.733 2.20835 163.227 2.27679 163.697 2.41224C164.166 2.5477 164.609 2.75159 165.02 3.02249C165.432 3.29339 165.798 3.62418 166.115 4.012L167.658 2.28677C167.303 1.80913 166.864 1.39849 166.345 1.05488C165.824 0.712681 165.225 0.450333 164.546 0.269255C163.867 0.0881779 163.108 -0.00164795 162.271 -0.00164795C161.484 -0.00164795 160.757 0.0924553 160.091 0.279236C159.424 0.467443 158.836 0.735494 158.329 1.08339C157.821 1.43271 157.427 1.85618 157.149 2.35379C156.87 2.85139 156.73 3.41031 156.73 4.03053C156.73 4.65076 156.841 5.14837 157.063 5.60177C157.285 6.05375 157.612 6.4487 158.044 6.78519C158.475 7.12168 159.001 7.39544 159.624 7.60931C160.246 7.82318 160.957 7.99428 161.757 8.1226C162.1 8.17393 162.443 8.23239 162.784 8.29655C163.127 8.36214 163.456 8.43913 163.774 8.52896C164.092 8.62021 164.374 8.73285 164.621 8.8683C164.869 9.00375 165.065 9.16629 165.212 9.35307C165.358 9.54128 165.431 9.76371 165.431 10.0218C165.431 10.4096 165.281 10.7361 164.983 11.0013C164.684 11.2665 164.304 11.4661 163.84 11.603C163.377 11.7384 162.885 11.8069 162.364 11.8069C161.463 11.8069 160.623 11.6301 159.841 11.2736C159.06 10.9186 158.283 10.3069 157.509 9.44147L156.043 11.4191C156.538 11.988 157.093 12.4599 157.709 12.8349C158.325 13.2099 159.01 13.4979 159.766 13.6975C160.52 13.8971 161.349 13.9984 162.251 13.9984C163.406 13.9984 164.413 13.8201 165.27 13.4651M143.663 2.49922H147.737C148.434 2.49922 149 2.63182 149.431 2.89702C149.862 3.16222 150.078 3.56002 150.078 4.08899C150.078 4.42548 149.986 4.71635 149.802 4.96159C149.619 5.20682 149.361 5.39788 149.031 5.53333C148.7 5.66879 148.332 5.73723 147.926 5.73723H143.661V2.50064L143.663 2.49922ZM143.663 7.90873H148.137C148.581 7.90873 149.007 7.97004 149.413 8.09266C149.819 8.21528 150.149 8.40634 150.403 8.66441C150.656 8.9239 150.784 9.2661 150.784 9.69242C150.784 10.0931 150.679 10.4324 150.47 10.7104C150.26 10.9885 149.966 11.1952 149.585 11.3307C149.204 11.4661 148.754 11.5346 148.233 11.5346H143.663V7.90873ZM148.233 13.803C148.892 13.803 149.524 13.7289 150.127 13.5806C150.731 13.4323 151.27 13.2028 151.746 12.8919C152.222 12.5811 152.596 12.1676 152.869 11.6515C153.142 11.1353 153.277 10.508 153.277 9.77083C153.277 9.11211 153.135 8.53894 152.849 8.05416C152.563 7.56939 152.18 7.17444 151.697 6.87074C151.214 6.56704 150.68 6.35032 150.098 6.22057L150.04 6.60839C150.865 6.38882 151.494 6.02096 151.925 5.50339C152.356 4.98725 152.572 4.3599 152.572 3.62275C152.572 2.88561 152.394 2.28535 152.038 1.78061C151.683 1.27588 151.156 0.892333 150.457 0.627133C149.759 0.361933 148.896 0.229333 147.867 0.229333H141.24V13.8059H148.228L148.233 13.803ZM135.12 10.8174L134.511 8.62591H127.39L126.514 10.8174H135.12ZM126.361 13.803L129.998 5.48486C130.099 5.22679 130.209 4.96159 130.322 4.68926C130.437 4.41835 130.55 4.13319 130.665 3.83662C130.78 3.53863 130.886 3.24491 130.988 2.95405C131.089 2.66319 131.184 2.3823 131.274 2.10997L130.703 2.12993C130.778 2.36234 130.868 2.62469 130.969 2.91555C131.07 3.20642 131.179 3.50441 131.292 3.80811C131.407 4.11181 131.518 4.40695 131.625 4.69068C131.733 4.97442 131.838 5.22108 131.939 5.42782L135.595 13.8044H138.203L132.281 0.232184H129.786L123.845 13.8059H126.358L126.361 13.803ZM121.176 13.803V11.4761H114.532V0.232184H112.057V13.8059H121.176V13.803ZM91.2451 5.7358H83.267V7.98572H91.2451V5.7358ZM92.2924 13.803V11.5146H84.4473V2.5206H92.2168V0.232184H82.0097V13.8059H92.2924V13.803ZM76.7689 5.7358H68.7909V7.98572H76.7689V5.7358ZM77.8162 13.803V11.5146H69.9712V2.5206H77.7406V0.232184H67.5335V13.8059H77.8162V13.803ZM63.8637 13.803V11.4561H54.1327L54.9896 12.1149L63.6523 1.97737V0.232184H52.3419V2.61756H61.3868L60.53 1.91891L51.8462 12.0407V13.8059H63.8623L63.8637 13.803ZM46.2302 10.8174L45.6211 8.62591H38.5L37.6235 10.8174H46.2302ZM37.4709 13.803L41.1085 5.48486C41.2107 5.22679 41.3185 4.96159 41.4319 4.68926C41.5453 4.41693 41.6601 4.13319 41.7749 3.83662C41.8897 3.53863 41.9976 3.24491 42.0984 2.95405C42.1992 2.66319 42.2944 2.3823 42.384 2.10997L41.8127 2.12993C41.8883 2.36234 41.9779 2.62469 42.0788 2.91555C42.1796 3.20642 42.2888 3.50441 42.4022 3.80811C42.517 4.11181 42.6276 4.40695 42.7354 4.69068C42.8432 4.97442 42.9483 5.22108 43.0491 5.42782L46.7049 13.8044H49.3133L43.3907 0.232184H40.8956L34.9548 13.8059H37.4681L37.4709 13.803ZM19.8556 13.803V8.59027C19.8556 7.43964 19.8303 6.3988 19.7799 5.46775C19.7295 4.5367 19.6273 3.60564 19.4747 2.67602L19.2087 3.56857L23.6906 13.8073H25.543L30.0977 3.56715L29.8316 2.67459C29.679 3.63131 29.5768 4.57804 29.5264 5.5148C29.476 6.45298 29.4508 7.47671 29.4508 8.58884V13.8044H31.9067V0.232184H29.2058L24.042 11.7313L25.2797 11.7513L20.1356 0.232184H17.3969V13.8059H19.8528L19.8556 13.803ZM11.2754 10.8174L10.6664 8.62591H3.54238L2.66589 10.8174H11.2726H11.2754ZM2.51607 13.803L6.15367 5.48486C6.25588 5.22679 6.36369 4.96159 6.4771 4.68926C6.59191 4.41835 6.70533 4.13319 6.82014 3.83662C6.93495 3.53863 7.04136 3.24491 7.14357 2.95405C7.24579 2.66319 7.3396 2.3823 7.4292 2.10997L6.85794 2.12993C6.93355 2.36234 7.02316 2.62469 7.12397 2.91555C7.22618 3.20642 7.33399 3.50441 7.44741 3.80811C7.56222 4.11181 7.67283 4.40695 7.78064 4.69068C7.88845 4.97442 7.99347 5.22108 8.09428 5.42782L11.7501 13.8044H14.3586L8.43591 0.232184H5.94084L0 13.8059H2.51327L2.51607 13.803Z"
+          fill="#1D1D1B"
+        ></path>
+      </g>
+      <mask
+        id="mask1_176_129733"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="168"
+        height="14"
+      >
+        <path d="M168 0H0V14H168V0Z" fill="white"></path>
+      </mask>
+      <g mask="url(#mask1_176_129733)">
+        <path
+          d="M108.051 11.5175H95.9463V13.8059H108.051V11.5175Z"
+          fill="#1D1D1B"
+        ></path>
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/ui/src/components/Routes/Page.stories.tsx b/packages/ui/src/components/Routes/Page.stories.tsx
index 2d47321b0..5db6f1293 100644
--- a/packages/ui/src/components/Routes/Page.stories.tsx
+++ b/packages/ui/src/components/Routes/Page.stories.tsx
@@ -1,4 +1,10 @@
-import { Locale, registerExecutor, Url, ViewPageQuery } from '@custom/schema';
+import {
+  FrameQuery,
+  Locale,
+  registerExecutor,
+  Url,
+  ViewPageQuery,
+} from '@custom/schema';
 import Landscape from '@stories/landscape.jpg?as=metadata';
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
@@ -6,6 +12,7 @@ import React from 'react';
 import { image } from '../../helpers/image';
 import { Mixed, Paragraph } from '../Organisms/PageContent/BlockMarkup.stories';
 import { WithCaption } from '../Organisms/PageContent/BlockMedia.stories';
+import { Default as FrameStory } from './Frame.stories';
 import { Page } from './Page';
 
 export default {
@@ -15,6 +22,7 @@ export default {
 export const Default = {
   render: (args) => {
     registerExecutor(ViewPageQuery, () => args);
+    registerExecutor(FrameQuery, FrameStory.args);
     return <Page />;
   },
   args: {
diff --git a/packages/ui/src/iframe.css b/packages/ui/src/iframe.css
index c166e13be..3dd39ca4a 100644
--- a/packages/ui/src/iframe.css
+++ b/packages/ui/src/iframe.css
@@ -2,12 +2,91 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Styles for Drupal webforms */
 
-/* TODO: Implement styles */
-[data-drupal-messages] [role="alert"] {
-  color: red;
+/* Vertical spacing */
+.webform-submission-form > *:not(:last-child) {
+  @apply mb-10;
+}
+
+.fieldset-wrapper > *:not(:last-child) {
+  @apply mb-5;
+}
+
+/* Label */
+.form-item label {
+  @apply block mb-2;
+}
+
+.form-item input[type="checkbox"] + label, .form-item input[type="radio"] + label {
+  @apply inline;
+}
+
+.form-item input[type="checkbox"], .form-item input[type="radio"] {
+  @apply mr-1;
+}
+
+/* field description */
+.form-item .webform-element-description {
+  @apply text-sm text-gray-600;
+}
+
+.form-item .description {
+  @apply mt-2;
+}
+
+.form-item input[type="checkbox"] + label + .description,
+.form-item input[type="radio"] + label + .description {
+  @apply mt-0;
+}
+
+
+/* field  */
+.form-item input[type="email"],
+.form-item input[type="password"],
+.form-item input[type="date"],
+.form-item input[type="text"],
+.form-item input[type="number"],
+.form-item input[type="datetime-local"],
+.form-item input[type="time"],
+.form-item input[type="url"],
+.form-item input[type="tel"],
+.form-item input[type="search"],
+.form-item input[type="color"],
+.form-item textarea,
+.form-item select {
+  @apply bg-gray-50 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5;
 }
+
+/* checkbox  */
+.form-item input[type="checkbox"] {
+  @apply rounded;
+}
+
+.form-item input[type="checkbox"]:not(:checked), .form-item input[type="radio"]:not(:checked)  {
+  @apply bg-gray-50 border-gray-300;
+}
+
+.form-item input[type="file"] {
+  @apply block cursor-pointer bg-gray-50 border border-gray-300 rounded-lg block text-sm w-full;
+}
+
+.form-item input[type="file"]::file-selector-button {
+  @apply text-white bg-blue-700 hover:bg-blue-800 rounded-l-lg text-sm w-full sm:w-auto px-6 py-2.5 text-center shadow-none border-0 font-medium mr-4;
+}
+
+
+.form-actions input[type="submit"] {
+  @apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center;
+}
+
 .form-item input.error {
-  border: 2px solid red;
+  @apply border-red-500;
+}
+
+.fieldset-legend {
+  @apply font-bold mb-2 block;
+}
+
+[data-drupal-messages] [role="alert"] {
+  @apply text-red-500;
 }
diff --git a/packages/ui/src/tailwind.config.cjs b/packages/ui/src/tailwind.config.cjs
index 4a1a88f22..bbdaea5bf 100644
--- a/packages/ui/src/tailwind.config.cjs
+++ b/packages/ui/src/tailwind.config.cjs
@@ -5,7 +5,6 @@ module.exports = {
   content: ['./src/**/*.{tsx, mdx}'],
   ...theme,
   plugins: [
-    require('@tailwindcss/line-clamp'),
     require('@tailwindcss/forms'),
     require('@tailwindcss/aspect-ratio'),
     require('@tailwindcss/typography'),
diff --git a/packages/ui/src/utils/avoidFocusOnClick.tsx b/packages/ui/src/utils/avoidFocusOnClick.tsx
new file mode 100644
index 000000000..7af6caa67
--- /dev/null
+++ b/packages/ui/src/utils/avoidFocusOnClick.tsx
@@ -0,0 +1,7 @@
+export function avoidFocusOnClick() {
+  requestAnimationFrame(() => {
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+  });
+}
diff --git a/packages/ui/src/utils/translations.tsx b/packages/ui/src/utils/translations.tsx
index 2783bb8d4..32e861be2 100644
--- a/packages/ui/src/utils/translations.tsx
+++ b/packages/ui/src/utils/translations.tsx
@@ -1,4 +1,4 @@
-import { Locale, Url } from '@custom/schema';
+import { FrameQuery, Locale, Url } from '@custom/schema';
 import React, {
   createContext,
   PropsWithChildren,
@@ -7,6 +7,9 @@ import React, {
   useState,
 } from 'react';
 
+import { isTruthy } from './isTruthy';
+import { useOperation } from './operation';
+
 /**
  * A list of translations for the given page.
  * A translations consists of the locale and the corresponding path.
@@ -36,15 +39,30 @@ export function TranslationsProvider({
 }
 
 function deepCompare(a: any, b: any) {
-  return JSON.stringify(a) === JSON.stringify(b);
+  return (
+    a &&
+    b &&
+    Object.keys(a).length === Object.keys(b).length &&
+    Object.keys(a).every((key) => a[key] === b[key])
+  );
 }
 
 export function useTranslations(newTranslations?: Translations) {
+  const homeTranslations = Object.fromEntries(
+    useOperation(FrameQuery)
+      .data?.websiteSettings?.homePage?.translations?.filter(isTruthy)
+      .map(({ locale, path }) => [locale, path]) || [],
+  );
   const { setTranslations, translations } = useContext(TranslationsContext);
   useEffect(() => {
     if (newTranslations && !deepCompare(translations, newTranslations)) {
       setTranslations(newTranslations);
     }
   }, [setTranslations, newTranslations, translations]);
-  return translations;
+
+  const homePaths = Object.fromEntries(
+    Object.values(Locale).map((locale) => [locale, `/${locale}` as Url]),
+  );
+
+  return deepCompare(homeTranslations, translations) ? homePaths : translations;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ae1464b97..1ae129447 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -504,9 +504,6 @@ importers:
       '@tailwindcss/forms':
         specifier: ^0.5.7
         version: 0.5.7(tailwindcss@3.4.0)
-      '@tailwindcss/line-clamp':
-        specifier: ^0.4.4
-        version: 0.4.4(tailwindcss@3.4.0)
       '@tailwindcss/typography':
         specifier: ^0.5.10
         version: 0.5.10(tailwindcss@3.4.0)
@@ -9260,14 +9257,6 @@ packages:
       tailwindcss: 3.4.0
     dev: true
 
-  /@tailwindcss/line-clamp@0.4.4(tailwindcss@3.4.0):
-    resolution: {integrity: sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==}
-    peerDependencies:
-      tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1'
-    dependencies:
-      tailwindcss: 3.4.0
-    dev: true
-
   /@tailwindcss/typography@0.5.10(tailwindcss@3.4.0):
     resolution: {integrity: sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==}
     peerDependencies: