diff --git a/.idea/prettier.xml b/.idea/prettier.xml
index 50edf175d..a9000470d 100644
--- a/.idea/prettier.xml
+++ b/.idea/prettier.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="MANUAL" />
     <option name="myRunOnSave" value="true" />
     <option name="myRunOnReformat" value="true" />
     <option name="myFilesPattern" value="**/**" />
diff --git a/apps/cms/composer.json b/apps/cms/composer.json
index bb6feeb43..50427ad02 100644
--- a/apps/cms/composer.json
+++ b/apps/cms/composer.json
@@ -100,6 +100,9 @@
       },
       "amazeelabs/silverback_gatsby": {
         "Autosave preview": "./patches/fetch-entity.patch"
+      },
+      "drupal/gutenberg": {
+        "Gutenberg enabled hook": "https://www.drupal.org/files/issues/2024-05-07/gutenberg_enabled_hook_3445677-2.patch"
       }
     },
     "patchLevel": {
diff --git a/apps/cms/config/sync/core.entity_form_display.node.page.split.yml b/apps/cms/config/sync/core.entity_form_display.node.page.split.yml
new file mode 100644
index 000000000..7c4e46ca1
--- /dev/null
+++ b/apps/cms/config/sync/core.entity_form_display.node.page.split.yml
@@ -0,0 +1,103 @@
+uuid: a39d0011-2ebf-4b18-a9f0-8b5aeff5b9aa
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_form_mode.node.split
+    - field.field.node.page.body
+    - field.field.node.page.field_metatags
+    - node.type.page
+    - workflows.workflow.basic
+  module:
+    - content_moderation
+    - metatag
+    - path
+id: node.page.split
+targetEntityType: node
+bundle: page
+mode: split
+content:
+  created:
+    type: datetime_timestamp
+    weight: 3
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  field_metatags:
+    type: metatag_firehose
+    weight: 11
+    region: content
+    settings:
+      sidebar: true
+      use_details: true
+    third_party_settings: {  }
+  langcode:
+    type: language_select
+    weight: 1
+    region: content
+    settings:
+      include_locked: true
+    third_party_settings: {  }
+  moderation_state:
+    type: moderation_state_default
+    weight: 9
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  path:
+    type: path
+    weight: 7
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  promote:
+    type: boolean_checkbox
+    weight: 5
+    region: content
+    settings:
+      display_label: true
+    third_party_settings: {  }
+  status:
+    type: boolean_checkbox
+    weight: 10
+    region: content
+    settings:
+      display_label: true
+    third_party_settings: {  }
+  sticky:
+    type: boolean_checkbox
+    weight: 6
+    region: content
+    settings:
+      display_label: true
+    third_party_settings: {  }
+  title:
+    type: string_textfield
+    weight: 0
+    region: content
+    settings:
+      size: 60
+      placeholder: ''
+    third_party_settings: {  }
+  translation:
+    weight: 4
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  uid:
+    type: entity_reference_autocomplete
+    weight: 2
+    region: content
+    settings:
+      match_operator: CONTAINS
+      match_limit: 10
+      size: 60
+      placeholder: ''
+    third_party_settings: {  }
+  url_redirects:
+    weight: 8
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+hidden:
+  body: true
diff --git a/apps/cms/config/sync/core.entity_form_mode.node.split.yml b/apps/cms/config/sync/core.entity_form_mode.node.split.yml
new file mode 100644
index 000000000..8e665c318
--- /dev/null
+++ b/apps/cms/config/sync/core.entity_form_mode.node.split.yml
@@ -0,0 +1,11 @@
+uuid: 5f26940d-fd06-41e0-8e59-9dfcdc9c86df
+langcode: en
+status: true
+dependencies:
+  module:
+    - node
+id: node.split
+label: Split
+description: ''
+targetEntityType: node
+cache: true
diff --git a/apps/cms/config/sync/core.extension.yml b/apps/cms/config/sync/core.extension.yml
index c32cf22ef..84b5d6503 100644
--- a/apps/cms/config/sync/core.extension.yml
+++ b/apps/cms/config/sync/core.extension.yml
@@ -22,6 +22,7 @@ module:
   dropzonejs: 0
   dynamic_page_cache: 0
   editor: 0
+  entity_create_split: 0
   entity_usage: 0
   environment_indicator: 0
   field: 0
diff --git a/apps/cms/package.json b/apps/cms/package.json
index 97c65dafc..75e6bc6ed 100644
--- a/apps/cms/package.json
+++ b/apps/cms/package.json
@@ -24,8 +24,6 @@
     "content:import": "pnpm drush php-script web/modules/custom/test_content/import.php",
     "config:export": "pnpm drush cex -y",
     "config:import": "pnpm drush -y cim",
-    "schema:test": "pnpm jest --testMatch '<rootDir>/generated/__tests__/test-queries.js' --passWithNoTests",
-    "schema:test:update": "pnpm schema:test -u",
     "import-translations": "pnpm drush scr scripts/translations-import.php"
   },
   "peerDependencies": {
diff --git a/apps/cms/patches/.gitkeep b/apps/cms/patches/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
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/packages/drupal/entity_create_split/README.md b/packages/drupal/entity_create_split/README.md
new file mode 100644
index 000000000..12a79a2d2
--- /dev/null
+++ b/packages/drupal/entity_create_split/README.md
@@ -0,0 +1,13 @@
+# Entity Create Split
+
+A Drupal module which exposes routes to split an entity create form into two parts:
+- on the first step, only the required fields are presented. After submitting the form, a entity is already created
+- the second step is actually just the entity edit form, containing all the other optional form fields.
+
+To enable this feature, you must create a form mode with the machine name "split" and enable it on the bundle for which you want to have this feature.
+
+## Special case for the Gutenberg editor
+
+The Gutenberg editor does a lot of alterations on the create form. For this reason, it is better that the form alter hook of the gutenberg module to not run at all. This is not easy possible, so right now the easiest approach is to just patch the module with the patch from https://www.drupal.org/project/gutenberg/issues/3445677/
+
+The functionality should also work without the patch, but the initial form will not look that nice.
diff --git a/packages/drupal/entity_create_split/entity_create_split.info.yml b/packages/drupal/entity_create_split/entity_create_split.info.yml
new file mode 100644
index 000000000..b8d2ad45e
--- /dev/null
+++ b/packages/drupal/entity_create_split/entity_create_split.info.yml
@@ -0,0 +1,5 @@
+name: Entity Create Split
+type: module
+description: 'Provides a route for splitting the entity creation in two steps: first for the mandatory fields and a second one, which is actually the edit form, for the rest of the fields.'
+package: Custom
+core_version_requirement: ^9 || ^10
diff --git a/packages/drupal/entity_create_split/entity_create_split.module b/packages/drupal/entity_create_split/entity_create_split.module
new file mode 100644
index 000000000..a790b295c
--- /dev/null
+++ b/packages/drupal/entity_create_split/entity_create_split.module
@@ -0,0 +1,67 @@
+<?php
+
+/**
+ * @file
+ * Provides a route for splitting the entity creation in two steps: first for
+ * the mandatory fields and a second one, which is actually the edit form, for
+ * the rest of the fields.
+ */
+
+use Drupal\Core\Entity\ContentEntityForm;
+use Drupal\Core\Entity\ContentEntityType;
+use Drupal\Core\Entity\EntityInterface;
+
+/**
+ * Implements hook_entity_type_build().
+ */
+function entity_create_split_entity_type_build(array &$entity_types) {
+  foreach ($entity_types as $entity_type) {
+    if ($entity_type instanceof ContentEntityType) {
+      $entity_type->setFormClass('split', $entity_type->getFormClass('default'));
+    }
+  }
+}
+
+/**
+ * Implements hook_gutenberg_enabled().
+ */
+function entity_create_split_gutenberg_enabled(EntityInterface $entity) {
+  if (isset($entity->disableGutenberg) && $entity->disableGutenberg === TRUE) {
+    return FALSE;
+  }
+}
+
+/**
+ * Implements hook_form_alter().
+ */
+function entity_create_split_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
+  $formObject = $form_state->getFormObject();
+  if ($formObject instanceof ContentEntityForm && $formObject->getFormDisplay($form_state)->getMode() === 'split') {
+    if (empty($form['#submit'])) {
+      $form['#submit'] = [];
+    }
+    $form['#submit'][] = 'entity_create_split_submit_redirect';
+    if (!empty($form['actions']['submit']['#submit'])) {
+      $form['actions']['submit']['#submit'][] = 'entity_create_split_submit_redirect';
+    }
+  }
+}
+
+/**
+ * Submit handler for the entity create from, to redirect the user to the entity
+ * edit form.
+ *
+ * @param array $form
+ * @param \Drupal\Core\Form\FormStateInterface $form_state
+ *
+ * @return void
+ * @throws \Drupal\Core\Entity\EntityMalformedException
+ */
+function entity_create_split_submit_redirect(array &$form, \Drupal\Core\Form\FormStateInterface $form_state) {
+  /* @var \Drupal\Core\Entity\EntityInterface $entity */
+  $entity = $form_state->getFormObject()->getEntity();
+  if (!empty($entity) && $entity->id()) {
+    $url = $entity->toUrl('edit-form');
+    $form_state->setRedirectUrl($url);
+  }
+}
diff --git a/packages/drupal/entity_create_split/entity_create_split.routing.yml b/packages/drupal/entity_create_split/entity_create_split.routing.yml
new file mode 100644
index 000000000..e5762db49
--- /dev/null
+++ b/packages/drupal/entity_create_split/entity_create_split.routing.yml
@@ -0,0 +1,9 @@
+entity_create_split.create:
+  path: '/entity/create/{entity_type}/{bundle}'
+  defaults:
+    _controller: '\Drupal\entity_create_split\Controller\EntityCreateSplitController::createForm'
+    _title_callback: '\Drupal\entity_create_split\Controller\EntityCreateSplitController::getTitle'
+  requirements:
+    _custom_access: '\Drupal\entity_create_split\Controller\EntityCreateSplitController::access'
+  options:
+    _admin_route: TRUE
diff --git a/packages/drupal/entity_create_split/entity_create_split.services.yml b/packages/drupal/entity_create_split/entity_create_split.services.yml
new file mode 100644
index 000000000..4216b1192
--- /dev/null
+++ b/packages/drupal/entity_create_split/entity_create_split.services.yml
@@ -0,0 +1,9 @@
+services:
+  entity_create_split.route_subscriber:
+    class: Drupal\entity_create_split\EventSubscriber\EntityCreateSplitRequestSubscriber
+    arguments:
+      - "@current_route_match"
+      - "@entity_type.manager"
+      - "@entity_display.repository"
+    tags:
+      - { name: event_subscriber }
diff --git a/packages/drupal/entity_create_split/src/Controller/EntityCreateSplitController.php b/packages/drupal/entity_create_split/src/Controller/EntityCreateSplitController.php
new file mode 100644
index 000000000..f27b6b2fa
--- /dev/null
+++ b/packages/drupal/entity_create_split/src/Controller/EntityCreateSplitController.php
@@ -0,0 +1,61 @@
+<?php
+
+namespace Drupal\entity_create_split\Controller;
+
+use Drupal\Core\Access\AccessResult;
+use Drupal\Core\Controller\ControllerBase;
+
+class EntityCreateSplitController extends ControllerBase {
+
+  /**
+   * Route callback to show the first part of the entity create form, which
+   * contains the required fields.
+   *
+   * @param string $entity_type
+   * @param string $bundle
+   *
+   * @return array
+   * @throws \Drupal\Component\Plugin\Exception\InvalidPluginDefinitionException
+   * @throws \Drupal\Component\Plugin\Exception\PluginNotFoundException
+   */
+  public function createForm($entity_type, $bundle) {
+    $entityTypeDefinition = $this->entityTypeManager()->getDefinition($entity_type);
+    $bundleKey = $entityTypeDefinition->getKey('bundle');
+    $entity = $this->entityTypeManager()->getStorage($entity_type)->create([$bundleKey => $bundle]);
+    $entity->disableGutenberg = TRUE;
+    $editForm = $this->entityTypeManager()->getFormObject($entity_type, 'split')->setEntity($entity);
+    return \Drupal::formBuilder()->getForm($editForm);
+  }
+
+  /**
+   * Title callback for the createForm() route.
+   */
+  public function getTitle($entity_type, $bundle) {
+    $entityTypeDefinition = $this->entityTypeManager()->getDefinition($entity_type);
+    $bundleEntityType = $entityTypeDefinition->getBundleEntityType();
+    $bundleLabel = $this->entityTypeManager()->getStorage($bundleEntityType)->load($bundle)->label();
+    return $this->t("Create %entity_type: %entity_bundle", [
+      '%entity_type' => $entityTypeDefinition->getLabel(),
+      '%entity_bundle' => $bundleLabel,
+    ]);
+  }
+
+  /**
+   * Access callback for the createForm() route.
+   */
+  public function access($entity_type, $bundle) {
+    if (!$this->entityTypeManager()->hasDefinition($entity_type)) {
+      return AccessResult::forbidden();
+    }
+    $entityTypeDefinition = $this->entityTypeManager()->getDefinition($entity_type);
+    $bundleEntityType = $entityTypeDefinition->getBundleEntityType();
+    $bundleEntity = $this->entityTypeManager()->getStorage($bundleEntityType)->load($bundle);
+    if (!$bundleEntity) {
+      return AccessResult::forbidden();
+    }
+
+    return $this->entityTypeManager()
+      ->getAccessControlHandler($entity_type)
+      ->createAccess($bundle, NULL, [], TRUE);
+  }
+}
diff --git a/packages/drupal/entity_create_split/src/EventSubscriber/EntityCreateSplitRequestSubscriber.php b/packages/drupal/entity_create_split/src/EventSubscriber/EntityCreateSplitRequestSubscriber.php
new file mode 100644
index 000000000..10f325d37
--- /dev/null
+++ b/packages/drupal/entity_create_split/src/EventSubscriber/EntityCreateSplitRequestSubscriber.php
@@ -0,0 +1,108 @@
+<?php
+
+namespace Drupal\entity_create_split\EventSubscriber;
+
+use Drupal\Core\Entity\EntityDisplayRepositoryInterface;
+use Drupal\Core\Entity\EntityTypeManagerInterface;
+use Drupal\Core\Routing\RouteMatchInterface;
+use Drupal\Core\Routing\TrustedRedirectResponse;
+use Drupal\Core\Url;
+use Symfony\Component\EventDispatcher\EventSubscriberInterface;
+use Symfony\Component\HttpKernel\Event\RequestEvent;
+use Symfony\Component\HttpKernel\KernelEvents;
+
+class EntityCreateSplitRequestSubscriber implements EventSubscriberInterface {
+
+  /**
+   * The current route match service.
+   *
+   * @var \Drupal\Core\Routing\RouteMatchInterface
+   */
+  protected $routeMatch;
+
+  /**
+   * The entity type manager service.
+   *
+   * @var \Drupal\Core\Entity\EntityTypeManagerInterface
+   */
+  protected $entityTypeManager;
+
+  /**
+   * The entity display repository service.
+   * @var \Drupal\Core\Entity\EntityDisplayRepositoryInterface
+   */
+  protected $entityDisplayRepository;
+
+  /**
+   * Constructs a EntityCreateSplitRequestSubscriber object.
+   * @param \Drupal\Core\Routing\RouteMatchInterface $route_match
+   */
+  public function __construct(
+    RouteMatchInterface $route_match,
+    EntityTypeManagerInterface $entity_type_manager,
+    EntityDisplayRepositoryInterface $entity_display_repository
+  ) {
+    $this->routeMatch = $route_match;
+    $this->entityTypeManager = $entity_type_manager;
+    $this->entityDisplayRepository = $entity_display_repository;
+  }
+
+  /**
+   * {@inheritDoc}
+   */
+  public static function getSubscribedEvents() {
+    $events[KernelEvents::REQUEST][] = ['onKernelRequest', 0];
+    return $events;
+  }
+
+  public function onKernelRequest(RequestEvent $event) {
+    $supportedRoutes = $this->supportedRoutes();
+    $currentRouteName = $this->routeMatch->getRouteName();
+    if (empty($supportedRoutes[$currentRouteName])) {
+      return;
+    }
+    $entityTypeId = $supportedRoutes[$currentRouteName];
+    $entityTypeDefinition =$this->entityTypeManager->getDefinition($entityTypeId);
+    // Make sure the entity has the split form class handler defined.
+    if (!$entityTypeDefinition->getFormClass('split')) {
+      return;
+    }
+    $bundleEntityType = $entityTypeDefinition->getBundleEntityType();
+    $bundle = $this->routeMatch->getParameter($bundleEntityType);
+    // If, for some reason, we can't load the bundle from the current request,
+    // then we just stop here.
+    if (empty($bundle)) {
+      return;
+    }
+    $formModes = $this->entityDisplayRepository->getFormModeOptionsByBundle($entityTypeId, $bundle->id());
+    // If the "split" form mode is not setup on the current entity bundle, then
+    // we also just stop here.
+    if (empty($formModes['split'])) {
+      return;
+    }
+
+    // If we got here, it means that we are on a entity add route, and the
+    // entity bundle has the split form mode configure, which means we need to
+    // redirect to the entity_create_split.create route for that entity bundle.
+    $createSplitUrl = Url::fromRoute('entity_create_split.create', [
+      'entity_type' => $entityTypeId,
+      'bundle' => $bundle->id(),
+    ]);
+    $response = new TrustedRedirectResponse($createSplitUrl->setAbsolute()
+      ->toString(), 302);
+    $event->setResponse($response);
+  }
+
+  /**
+   * Helper, temporary, method to define the routes which are checked by the
+   * event subscriber for redirecting the user to the split form.
+   *
+   * @return string[]
+   */
+  protected function supportedRoutes() {
+    return [
+      'node.add' => 'node',
+      'media.add' => 'media',
+    ];
+  }
+}
diff --git a/packages/drupal/gutenberg_blocks/css/edit.css b/packages/drupal/gutenberg_blocks/css/edit.css
index 27b2807c7..b59791065 100644
--- a/packages/drupal/gutenberg_blocks/css/edit.css
+++ b/packages/drupal/gutenberg_blocks/css/edit.css
@@ -82,3 +82,33 @@
   height: 1.25rem;
   content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' viewBox='0 0 20 24'%3E%3Cpath fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.008-3.018a1.502 1.502 0 0 1 2.522 1.159v.024a1.44 1.44 0 0 1-1.493 1.418 1 1 0 0 0-1.037.999V14a1 1 0 1 0 2 0v-.539a3.44 3.44 0 0 0 2.529-3.256 3.502 3.502 0 0 0-7-.255 1 1 0 0 0 2 .076c.014-.398.187-.774.48-1.044Zm.982 7.026a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2h-.01Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A");
 }
+
+.gutenberg__editor .custom-block-accordion-item-text.questionmark h3::before {
+  margin-right: 7px;
+  content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' viewBox='0 0 20 24'%3E%3Cpath fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.008-3.018a1.502 1.502 0 0 1 2.522 1.159v.024a1.44 1.44 0 0 1-1.493 1.418 1 1 0 0 0-1.037.999V14a1 1 0 1 0 2 0v-.539a3.44 3.44 0 0 0 2.529-3.256 3.502 3.502 0 0 0-7-.255 1 1 0 0 0 2 .076c.014-.398.187-.774.48-1.044Zm.982 7.026a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2h-.01Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A");
+}
+
+.gutenberg__editor .custom-block-accordion-item-text.checkmark h3::before {
+  margin-right: 7px;
+  content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' viewBox='0 0 20 24'%3E%3Cpath fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm13.707-1.293a1 1 0 0 0-1.414-1.414L11 12.586l-1.793-1.793a1 1 0 0 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l4-4Z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.gutenberg__editor .custom-block-accordion-item-text.arrow h3::before {
+  margin-right: 7px;
+  content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' %3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM6.75 9.25a.75.75 0 0 0 0 1.5h4.59l-2.1 1.95a.75.75 0 0 0 1.02 1.1l3.5-3.25a.75.75 0 0 0 0-1.1l-3.5-3.25a.75.75 0 1 0-1.02 1.1l2.1 1.95H6.75Z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.gutenberg__editor .custom-block-accordion-item-text.questionmark h3::before {
+  margin-right: 7px;
+  content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' viewBox='0 0 20 24'%3E%3Cpath fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.008-3.018a1.502 1.502 0 0 1 2.522 1.159v.024a1.44 1.44 0 0 1-1.493 1.418 1 1 0 0 0-1.037.999V14a1 1 0 1 0 2 0v-.539a3.44 3.44 0 0 0 2.529-3.256 3.502 3.502 0 0 0-7-.255 1 1 0 0 0 2 .076c.014-.398.187-.774.48-1.044Zm.982 7.026a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2h-.01Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A");
+}
+
+.gutenberg__editor .custom-block-accordion-item-text.checkmark h3::before {
+  margin-right: 7px;
+  content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' viewBox='0 0 20 24'%3E%3Cpath fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm13.707-1.293a1 1 0 0 0-1.414-1.414L11 12.586l-1.793-1.793a1 1 0 0 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l4-4Z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.gutenberg__editor .custom-block-accordion-item-text.arrow h3::before {
+  margin-right: 7px;
+  content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' %3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM6.75 9.25a.75.75 0 0 0 0 1.5h4.59l-2.1 1.95a.75.75 0 0 0 1.02 1.1l3.5-3.25a.75.75 0 0 0 0-1.1l-3.5-3.25a.75.75 0 1 0-1.02 1.1l2.1 1.95H6.75Z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
+}
diff --git a/packages/drupal/gutenberg_blocks/images/icons/email.svg b/packages/drupal/gutenberg_blocks/images/icons/email.svg
new file mode 100644
index 000000000..e8a2b5593
--- /dev/null
+++ b/packages/drupal/gutenberg_blocks/images/icons/email.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>
diff --git a/packages/drupal/gutenberg_blocks/images/icons/life-ring.svg b/packages/drupal/gutenberg_blocks/images/icons/life-ring.svg
new file mode 100644
index 000000000..304d20a2b
--- /dev/null
+++ b/packages/drupal/gutenberg_blocks/images/icons/life-ring.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M367.2 412.5C335.9 434.9 297.5 448 256 448s-79.9-13.1-111.2-35.5l58-58c15.8 8.6 34 13.5 53.3 13.5s37.4-4.9 53.3-13.5l58 58zm90.7 .8c33.8-43.4 54-98 54-157.3s-20.2-113.9-54-157.3c9-12.5 7.9-30.1-3.4-41.3S425.8 45 413.3 54C369.9 20.2 315.3 0 256 0S142.1 20.2 98.7 54c-12.5-9-30.1-7.9-41.3 3.4S45 86.2 54 98.7C20.2 142.1 0 196.7 0 256s20.2 113.9 54 157.3c-9 12.5-7.9 30.1 3.4 41.3S86.2 467 98.7 458c43.4 33.8 98 54 157.3 54s113.9-20.2 157.3-54c12.5 9 30.1 7.9 41.3-3.4s12.4-28.8 3.4-41.3zm-45.5-46.1l-58-58c8.6-15.8 13.5-34 13.5-53.3s-4.9-37.4-13.5-53.3l58-58C434.9 176.1 448 214.5 448 256s-13.1 79.9-35.5 111.2zM367.2 99.5l-58 58c-15.8-8.6-34-13.5-53.3-13.5s-37.4 4.9-53.3 13.5l-58-58C176.1 77.1 214.5 64 256 64s79.9 13.1 111.2 35.5zM157.5 309.3l-58 58C77.1 335.9 64 297.5 64 256s13.1-79.9 35.5-111.2l58 58c-8.6 15.8-13.5 34-13.5 53.3s4.9 37.4 13.5 53.3zM208 256a48 48 0 1 1 96 0 48 48 0 1 1 -96 0z"/></svg>
diff --git a/packages/drupal/gutenberg_blocks/images/icons/phone.svg b/packages/drupal/gutenberg_blocks/images/icons/phone.svg
new file mode 100644
index 000000000..db2787d11
--- /dev/null
+++ b/packages/drupal/gutenberg_blocks/images/icons/phone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/></svg>
diff --git a/packages/drupal/gutenberg_blocks/package.json b/packages/drupal/gutenberg_blocks/package.json
index b31ec99c1..e5a3cc019 100644
--- a/packages/drupal/gutenberg_blocks/package.json
+++ b/packages/drupal/gutenberg_blocks/package.json
@@ -6,6 +6,7 @@
     "dev": "vite build --watch",
     "prep": "vite build",
     "test:static": "tsc --noEmit && eslint \"**/*.{ts,tsx,js,jsx}\" --ignore-path=\"./.eslintignore\"",
+    "test:fix": "tsc --noEmit && eslint \"**/*.{ts,tsx,js,jsx}\" --ignore-path=\"./.eslintignore\" --fix",
     "gutenberg:generate": "node ./scripts/generate-gutenberg-block.js"
   },
   "dependencies": {
diff --git a/packages/drupal/gutenberg_blocks/src/Plugin/Validation/GutenbergValidator/AccordionItemTextValidator.php b/packages/drupal/gutenberg_blocks/src/Plugin/Validation/GutenbergValidator/AccordionItemTextValidator.php
new file mode 100644
index 000000000..4ab6b31ab
--- /dev/null
+++ b/packages/drupal/gutenberg_blocks/src/Plugin/Validation/GutenbergValidator/AccordionItemTextValidator.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace Drupal\gutenberg_blocks\Plugin\Validation\GutenbergValidator;
+
+use Drupal\Core\StringTranslation\StringTranslationTrait;
+use Drupal\silverback_gutenberg\GutenbergValidation\GutenbergCardinalityValidatorInterface;
+use Drupal\silverback_gutenberg\GutenbergValidation\GutenbergCardinalityValidatorTrait;
+use Drupal\silverback_gutenberg\GutenbergValidation\GutenbergValidatorBase;
+
+/**
+ * @GutenbergValidator(
+ *   id="accordion_item_text_validator",
+ *   label = @Translation("Accordion Item Text validator")
+ * )
+ */
+class AccordionItemTextValidator extends GutenbergValidatorBase {
+  use GutenbergCardinalityValidatorTrait;
+  use StringTranslationTrait;
+
+  /**
+   * {@inheritDoc}
+   */
+  public function applies(array $block): bool {
+    return $block['blockName'] === 'custom/accordion-item-text';
+  }
+
+  /**
+   * {@inheritDoc}
+   */
+  public function validatedFields($block = []): array {
+    return [
+      'title' => [
+        'field_label' => $this->t('Title'),
+        'rules' => ['required'],
+      ],
+    ];
+  }
+
+  /**
+   * {@inheritDoc}
+   */
+  public function validateContent($block = []): array {
+    $expectedChildren = [
+      'validationType' => GutenbergCardinalityValidatorInterface::CARDINALITY_ANY,
+      'min' => 1,
+      'max' => GutenbergCardinalityValidatorInterface::CARDINALITY_UNLIMITED,
+    ];
+    return $this->validateCardinality($block, $expectedChildren);
+  }
+
+}
diff --git a/packages/drupal/gutenberg_blocks/src/Plugin/Validation/GutenbergValidator/AccordionValidator.php b/packages/drupal/gutenberg_blocks/src/Plugin/Validation/GutenbergValidator/AccordionValidator.php
new file mode 100644
index 000000000..d0bae38b0
--- /dev/null
+++ b/packages/drupal/gutenberg_blocks/src/Plugin/Validation/GutenbergValidator/AccordionValidator.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace Drupal\gutenberg_blocks\Plugin\Validation\GutenbergValidator;
+
+use Drupal\Core\StringTranslation\StringTranslationTrait;
+use Drupal\silverback_gutenberg\GutenbergValidation\GutenbergCardinalityValidatorInterface;
+use Drupal\silverback_gutenberg\GutenbergValidation\GutenbergCardinalityValidatorTrait;
+use Drupal\silverback_gutenberg\GutenbergValidation\GutenbergValidatorBase;
+
+/**
+ * @GutenbergValidator(
+ *   id="accordion_validator",
+ *   label = @Translation("Accordion validator")
+ * )
+ */
+class AccordionValidator extends GutenbergValidatorBase {
+  use GutenbergCardinalityValidatorTrait;
+  use StringTranslationTrait;
+
+  /**
+   * {@inheritDoc}
+   */
+  public function applies(array $block): bool {
+    return $block['blockName'] === 'custom/accordion';
+  }
+
+  /**
+   * {@inheritDoc}
+   */
+  public function validateContent($block = []): array {
+    $expectedChildren = [
+      [
+        'blockName' => 'custom/accordion-item-text',
+        'blockLabel' => $this->t('Accordion'),
+        'min' => 1,
+        'max' => GutenbergCardinalityValidatorInterface::CARDINALITY_UNLIMITED,
+      ],
+    ];
+    return $this->validateCardinality($block, $expectedChildren);
+  }
+
+}
diff --git a/packages/drupal/gutenberg_blocks/src/blocks/accordion-item-text.tsx b/packages/drupal/gutenberg_blocks/src/blocks/accordion-item-text.tsx
new file mode 100644
index 000000000..aaf3f4a6d
--- /dev/null
+++ b/packages/drupal/gutenberg_blocks/src/blocks/accordion-item-text.tsx
@@ -0,0 +1,91 @@
+import clsx from 'clsx';
+import React, { Fragment } from 'react';
+import {
+  InnerBlocks,
+  InspectorControls,
+  RichText,
+} from 'wordpress__block-editor';
+import { registerBlockType } from 'wordpress__blocks';
+import { PanelBody, SelectControl } from 'wordpress__components';
+import { compose, withState } from 'wordpress__compose';
+
+// @ts-ignore
+const { t: __ } = Drupal;
+// @ts-ignore
+registerBlockType('custom/accordion-item-text', {
+  title: 'Accordion Item Text',
+  icon: 'text',
+  category: 'layout',
+  parent: ['custom/accordion'],
+  attributes: {
+    title: {
+      type: 'string',
+    },
+    icon: {
+      type: 'string',
+    },
+  },
+  // @ts-ignore
+  edit: compose(withState())((props) => {
+    const { attributes, setAttributes } = props;
+    const icons = [
+      { label: __('- Select an optional icon -'), value: '' },
+      { label: __('Checkmark'), value: 'checkmark' },
+      { label: __('Questionmark'), value: 'questionmark' },
+      { label: __('Arrow'), value: 'arrow' },
+    ];
+    setAttributes({
+      icon: attributes.icon === undefined ? '' : attributes.icon,
+    });
+
+    return (
+      <Fragment>
+        <InspectorControls>
+          <PanelBody title={__('Block settings')}>
+            <SelectControl
+              value={attributes.icon}
+              options={icons}
+              onChange={(newValue) => {
+                setAttributes({
+                  icon: newValue,
+                });
+              }}
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div className={'container-wrapper'}>
+          <div className={'container-label'}>{__('Accordion Item Text')}</div>
+          <div
+            className={clsx(
+              'custom-block-accordion-item-text',
+              attributes.icon,
+            )}
+          >
+            <RichText
+              identifier="title"
+              tagName="h3"
+              value={attributes.title}
+              allowedFormats={[]}
+              // @ts-ignore
+              disableLineBreaks={true}
+              placeholder={__('Title')}
+              keepPlaceholderOnFocus={true}
+              onChange={(newValue) => {
+                setAttributes({ title: newValue });
+              }}
+            />
+            <InnerBlocks
+              templateLock={false}
+              allowedBlocks={['core/paragraph', 'core/list', 'core/heading']}
+              template={[['core/paragraph', {}]]}
+            />
+          </div>
+        </div>
+      </Fragment>
+    );
+  }),
+
+  save: () => {
+    return <InnerBlocks.Content />;
+  },
+});
diff --git a/packages/drupal/gutenberg_blocks/src/blocks/accordion.tsx b/packages/drupal/gutenberg_blocks/src/blocks/accordion.tsx
new file mode 100644
index 000000000..924746dd8
--- /dev/null
+++ b/packages/drupal/gutenberg_blocks/src/blocks/accordion.tsx
@@ -0,0 +1,25 @@
+import { InnerBlocks } from 'wordpress__block-editor';
+import { registerBlockType } from 'wordpress__blocks';
+
+// @ts-ignore
+const { t: __ } = Drupal;
+
+registerBlockType('custom/accordion', {
+  title: __('Accordion'),
+  icon: 'menu',
+  category: 'layout',
+  attributes: {},
+  edit: () => {
+    return (
+      <div className={'container-wrapper'}>
+        <div className={'container-label'}>{__('Accordion')}</div>
+        <InnerBlocks
+          templateLock={false}
+          allowedBlocks={['custom/accordion-item-text']}
+          template={[['custom/accordion-item-text']]}
+        />
+      </div>
+    );
+  },
+  save: () => <InnerBlocks.Content />,
+});
diff --git a/packages/drupal/gutenberg_blocks/src/blocks/horizontal-separator.tsx b/packages/drupal/gutenberg_blocks/src/blocks/horizontal-separator.tsx
new file mode 100644
index 000000000..720094b1f
--- /dev/null
+++ b/packages/drupal/gutenberg_blocks/src/blocks/horizontal-separator.tsx
@@ -0,0 +1,21 @@
+import { registerBlockType } from 'wordpress__blocks';
+import { compose, withState } from 'wordpress__compose';
+
+declare const Drupal: { t: (s: string) => string };
+
+const { t: __ } = Drupal;
+
+// @ts-ignore
+registerBlockType(`custom/horizontal-separator`, {
+  title: __('Horizontal separator'),
+  icon: 'minus',
+  category: 'text',
+  attributes: {},
+  // @ts-ignore
+  edit: compose(withState())(() => {
+    return <hr />;
+  }),
+  save() {
+    return null;
+  },
+});
diff --git a/packages/drupal/gutenberg_blocks/src/blocks/info-grid-item.tsx b/packages/drupal/gutenberg_blocks/src/blocks/info-grid-item.tsx
new file mode 100644
index 000000000..b6b8e3fcb
--- /dev/null
+++ b/packages/drupal/gutenberg_blocks/src/blocks/info-grid-item.tsx
@@ -0,0 +1,63 @@
+import { InnerBlocks, InspectorControls } from 'wordpress__block-editor';
+import { registerBlockType } from 'wordpress__blocks';
+import { PanelBody, SelectControl } from 'wordpress__components';
+
+import {
+  iconImagePreview,
+  Icons,
+  limitedIconListOption,
+} from '../utils/icon-list';
+
+// @ts-ignore
+const { t: __ } = Drupal;
+
+registerBlockType('custom/info-grid-item', {
+  title: __('Info Grid Item'),
+  icon: 'align-wide',
+  category: 'layout',
+  attributes: {
+    icon: {
+      type: 'string',
+      default: '',
+    },
+  },
+  edit: (props) => {
+    const { setAttributes } = props;
+    const iconPreview = iconImagePreview(props.attributes.icon as string);
+    const iconPreviewStyle = { maxWidth: '50px' };
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Select an icon')}>
+            <SelectControl
+              value={props.attributes.icon as string}
+              options={limitedIconListOption([
+                Icons.EMAIL,
+                Icons.PHONE,
+                Icons.LIFE_RING,
+              ])}
+              onChange={(icon: string) => {
+                setAttributes({ icon });
+              }}
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div className={'container-wrapper'}>
+          <div className={'container-label'}>{__('Info Grid Item')}</div>
+          <div className={'info-grid-icon'} style={iconPreviewStyle}>
+            {iconPreview && (
+              <img src={iconPreview} alt={props.attributes.icon as string} />
+            )}
+          </div>
+          <InnerBlocks
+            templateLock={false}
+            allowedBlocks={['custom/heading', 'core/paragraph', 'custom/cta']}
+          />
+        </div>
+      </>
+    );
+  },
+  save: () => <InnerBlocks.Content />,
+});
diff --git a/packages/drupal/gutenberg_blocks/src/blocks/info-grid.tsx b/packages/drupal/gutenberg_blocks/src/blocks/info-grid.tsx
new file mode 100644
index 000000000..1f9d3a5cf
--- /dev/null
+++ b/packages/drupal/gutenberg_blocks/src/blocks/info-grid.tsx
@@ -0,0 +1,40 @@
+import { InnerBlocks } from 'wordpress__block-editor';
+import { registerBlockType } from 'wordpress__blocks';
+import { useSelect } from 'wordpress__data';
+
+// @ts-ignore
+const { t: __ } = Drupal;
+
+const MAX_BLOCKS: number = 3;
+
+registerBlockType('custom/info-grid', {
+  title: __('Info Grid'),
+  icon: 'editor-insertmore',
+  category: 'layout',
+  attributes: {},
+  edit: (props) => {
+    /* eslint-disable-next-line */
+    const { blockCount } = useSelect((select) => ({
+      blockCount: select('core/block-editor').getBlockCount(props.clientId),
+    }));
+
+    return (
+      <div className={'container-wrapper'}>
+        <div className={'container-label'}>{__('Info Grid')}</div>
+        <InnerBlocks
+          templateLock={false}
+          renderAppender={() => {
+            if (blockCount >= MAX_BLOCKS) {
+              return null;
+            } else {
+              return <InnerBlocks.ButtonBlockAppender />;
+            }
+          }}
+          allowedBlocks={['custom/info-grid-item']}
+          template={[]}
+        />
+      </div>
+    );
+  },
+  save: () => <InnerBlocks.Content />,
+});
diff --git a/packages/drupal/gutenberg_blocks/src/index.ts b/packages/drupal/gutenberg_blocks/src/index.ts
index 2763bdad8..4b70a94bc 100644
--- a/packages/drupal/gutenberg_blocks/src/index.ts
+++ b/packages/drupal/gutenberg_blocks/src/index.ts
@@ -9,3 +9,8 @@ import './blocks/image-with-text';
 import './filters/list';
 import './blocks/cta';
 import './blocks/quote';
+import './blocks/horizontal-separator';
+import './blocks/accordion';
+import './blocks/accordion-item-text';
+import './blocks/info-grid';
+import './blocks/info-grid-item';
diff --git a/packages/drupal/gutenberg_blocks/src/utils/icon-list.ts b/packages/drupal/gutenberg_blocks/src/utils/icon-list.ts
new file mode 100644
index 000000000..c2a0ab79b
--- /dev/null
+++ b/packages/drupal/gutenberg_blocks/src/utils/icon-list.ts
@@ -0,0 +1,130 @@
+// @ts-ignore
+const { t: __ } = Drupal;
+
+// HOW TO ADD A NEW ICON.
+//
+// 1. Add a new icon to the Icons enum.
+// 2. Add a new icon to the allIconListOptions function.
+// 3. Add icon image to the ICON_IMAGE_PATH.
+// 4. Add a new icon to the iconImagePreview function.
+//
+// Your new icon is now available for selection, it will be displayed everywhere all icons are used.
+// Or you can use the limitedIconListOption function to limit the available icons in a specific context.
+//
+// NOTE: search this file for "*" to find the places where you need to add your new icon.
+
+// *1. Available icons.
+export enum Icons {
+  EMAIL = 'EMAIL',
+  PHONE = 'PHONE',
+  LIFE_RING = 'LIFE-RING',
+}
+
+// Single icon type.
+export type Icon = {
+  label: any;
+  value: string;
+};
+
+// *3. Icon image path.
+const ICON_IMAGE_PATH = '/modules/custom/gutenberg_blocks/images/icons/';
+
+/**
+ * A list of all icons.
+ *
+ * @param addDefault
+ *  If you want to add a default option.
+ * @param defaultLabel
+ *  The default label.
+ * @param defaultValue
+ *  The default value.
+ */
+export const allIconListOptions = (
+  addDefault: boolean = true,
+  defaultLabel: string = 'Select an icon',
+  defaultValue: string = '',
+): Icon[] => {
+  // Empty array of icons.
+  let allIcons: Icon[] = [];
+
+  // *2. The list of all icons.
+  allIcons = [
+    {
+      label: __('Email'),
+      value: Icons.EMAIL,
+    },
+    {
+      label: __('Telephone'),
+      value: Icons.PHONE,
+    },
+    {
+      label: __('Life Ring'),
+      value: Icons.LIFE_RING,
+    },
+  ];
+
+  // If using default add to first place.
+  if (addDefault) {
+    allIcons.unshift({
+      label: __(defaultLabel),
+      value: defaultValue,
+    });
+  }
+
+  return allIcons;
+};
+
+/**
+ * Creates an icon image preview.
+ *
+ * @param icon
+ *  The icon to be displayed.
+ */
+export const iconImagePreview = (icon: string): string => {
+  let iconFileName = '';
+
+  switch (icon) {
+    case Icons.EMAIL:
+      iconFileName = 'email.svg';
+      break;
+    case Icons.PHONE:
+      iconFileName = 'phone.svg';
+      break;
+    case Icons.LIFE_RING:
+      iconFileName = 'life-ring.svg';
+      break;
+  }
+
+  if (!iconFileName || iconFileName === '') {
+    return '';
+  }
+
+  return ICON_IMAGE_PATH + iconFileName;
+};
+
+/**
+ * Limited icon list option.
+ *
+ * @param icons
+ *  The list of icons to be displayed.
+ * @param addDefault
+ *  If you want to add a default option.
+ * @param defaultLabel
+ *  The default label.
+ * @param defaultValue
+ *  The default value.
+ */
+export const limitedIconListOption = (
+  icons: Icons[],
+  addDefault: boolean = true,
+  defaultLabel: string = 'Select an icon',
+  defaultValue: string = '',
+): Icon[] => {
+  if (addDefault) {
+    icons.unshift(defaultValue as Icons);
+  }
+
+  return allIconListOptions(addDefault, defaultLabel, defaultValue).filter(
+    (icon) => icons.includes(icon.value as Icons),
+  );
+};
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 3f3c9aa3a..a18febe30 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:
     5dfc1856-e9e4-4f02-9cd6-9d888870ce1a: 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 -->
@@ -55,6 +43,8 @@ default:
         <p>A standalone paragraph with <strong><em>markup</em></strong> and <a href="/node/0b45a665-286a-414e-a091-c13fa4e20eb2" data-type="Content: Basic page" data-id="0b45a665-286a-414e-a091-c13fa4e20eb2" data-entity-type="node">link</a></p>
         <!-- /wp:paragraph -->
 
+        <!-- wp:custom/horizontal-separator /-->
+
         <!-- wp:drupalmedia/drupal-media-entity {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"],"caption":"Media image"} /-->
 
         <!-- wp:drupalmedia/drupal-media-entity {"mediaEntityIds":["478c4289-961d-4ce8-85d6-578ae05f3019"],"caption":"Media video"} /-->
@@ -100,6 +90,10 @@ default:
         <h3 class="wp-block-custom-heading">Heading 3</h3>
         <!-- /wp:custom/heading -->
 
+        <!-- wp:quote -->
+        <blockquote class="wp-block-quote"><p>Quote</p><cite>Citation</cite></blockquote>
+        <!-- /wp:quote -->
+
         <!-- wp:custom/image-teasers -->
         <!-- wp:custom/image-teaser {"mediaEntityIds":["3a0fe860-a6d6-428a-9474-365bd57509aa"],"title":"Teaser 1","ctaUrl":"https://google.com","ctaText":"Foo"} /-->
 
@@ -112,52 +106,101 @@ default:
 
         <!-- wp:custom/cta {"url":"/media/1","text":"CTA with link to media","data-id":"b998ae5e-8b56-40ca-8f80-fd4404e7e716","data-entity-type":"media","icon":"ARROW","iconPosition":"BEFORE"} /-->
 
-
         <!-- wp:custom/quote {"quote":"Lorem ipsum dolor sit amet, \u003cstrong\u003econsectetur\u003c/strong\u003e adipiscing elit. Vivamus sagittis nisi nec neque porta, a ornare ligula efficitur.","author":"John Doe","role":"Project manager","mediaEntityIds":["5dfc1856-e9e4-4f02-9cd6-9d888870ce1a"]} /-->
 
+        <!-- wp:custom/accordion -->
+        <!-- wp:custom/accordion-item-text {"title":"With a single paragraph and no icon","icon":""} -->
         <!-- wp:paragraph -->
-        <p></p>
+        <p>Incididunt laborum velit non proident nostrud velit. Minim excepteur ut aliqua nisi. Culpa laboris consectetur proident. Tempor esse ullamco et dolor proident id officia laborum voluptate nostrud elit dolore qui amet. Ex Lorem irure eu anim ipsum officia.</p>
+        <!-- /wp:paragraph -->
+        <!-- /wp:custom/accordion-item-text -->
+
+        <!-- wp:custom/accordion-item-text {"title":"With a list and a paragraph and arrow icon","icon":"arrow"} -->
+        <!-- wp:list -->
+        <ul><li>Moitié-moitié</li><li>Fribourgeoise</li></ul>
+        <!-- /wp:list -->
+
+        <!-- wp:paragraph -->
+        <p>Incididunt laborum velit non proident nostrud velit. Minim excepteur ut aliqua nisi. Culpa laboris consectetur proident. Tempor esse ullamco et dolor proident id officia laborum voluptate nostrud elit dolore qui amet. Ex Lorem irure eu anim ipsum officia.</p>
+        <!-- /wp:paragraph -->
+        <!-- /wp:custom/accordion-item-text -->
+        <!-- /wp:custom/accordion -->
+        
+        <!-- wp:custom/info-grid -->
+        <!-- wp:custom/info-grid-item {"icon":"EMAIL"} -->
+        <!-- wp:custom/heading {"level":3,"text":"Email us:"} -->
+        <h3 class="wp-block-custom-heading">Email us:</h3>
+        <!-- /wp:custom/heading -->
+
+        <!-- wp:paragraph -->
+        <p>Email us for general queries, including marketing and partnership opportunities.</p>
+        <!-- /wp:paragraph -->
+
+        <!-- wp:paragraph -->
+        <p><a href="mailto:hello@company.com">hello@company.com</a></p>
         <!-- /wp:paragraph -->
+
+        <!-- wp:custom/cta {"url":"/en/page-links","text":"Nullam dictum felis","data-id":"25086be7-ca5f-4ff8-9695-b9c71a676d4e","data-entity-type":"node","icon":"ARROW"} /-->
+        <!-- /wp:custom/info-grid-item -->
+
+        <!-- wp:custom/info-grid-item {"icon":"PHONE"} -->
+        <!-- wp:custom/heading {"level":3,"text":"Call us:"} -->
+        <h3 class="wp-block-custom-heading">Call us:</h3>
+        <!-- /wp:custom/heading -->
+
+        <!-- wp:paragraph -->
+        <p>Call us to speak to a member of our team. We are always happy to help.</p>
+        <!-- /wp:paragraph -->
+
+        <!-- wp:paragraph -->
+        <p><a href="tel:+16467865060">+1 (646) 786-5060</a></p>
+        <!-- /wp:paragraph -->
+
+        <!-- wp:custom/cta {"url":"/en/technologies","text":"Duis lobortis massa","data-id":"3a026abf-39d5-4c81-a76e-6f30593f114d","data-entity-type":"node"} /-->
+        <!-- /wp:custom/info-grid-item -->
+
+        <!-- wp:custom/info-grid-item {"icon":"LIFE-RING"} -->
+        <!-- wp:custom/heading {"level":3,"text":"Support"} -->
+        <h3 class="wp-block-custom-heading">Support</h3>
+        <!-- /wp:custom/heading -->
+
+        <!-- wp:paragraph -->
+        <p>Check out helpful resources, FAQs and developer tools.</p>
+        <!-- /wp:paragraph -->
+
+        <!-- wp:custom/cta {"url":"http://www.google.com","text":"Nunc nulla","data-id":"http://www.google.com","data-entity-type":"","openInNewTab":true} /-->
+        <!-- /wp:custom/info-grid-item -->
+        <!-- /wp:custom/info-grid -->
+        
         <!-- /wp:custom/content -->
       format: gutenberg
       summary: ''
 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 -->
@@ -187,13 +230,13 @@ translations:
           <h3 class="wp-block-custom-heading">Heading 3 DE</h3>
           <!-- /wp:custom/heading -->
 
-          <!-- wp:custom/cta {"url":"/en/drupal","text":"Internal CTA DE","data-id":"f1f827c9-ed06-4e7d-b89d-a169e70a459c","data-entity-type":"node"} /-->
-
-          <!-- wp:custom/cta {"url":"https://www.example.com","text":"External CTA DE","data-id":"https://www.example.com","data-entity-type":"","openInNewTab":true} /-->
-
-          <!-- wp:custom/cta {"url":"/media/1","text":"CTA with link to media DE","data-id":"b998ae5e-8b56-40ca-8f80-fd4404e7e716","data-entity-type":"media"} /-->
+          <!-- wp:quote -->
+          <blockquote class="wp-block-quote"><p>Quote DE</p><cite>Citation DE</cite></blockquote>
+          <!-- /wp:quote -->
 
-          <!-- wp:custom/quote {"quote":"Lorem ipsum dolor sit amet, consectetur \u003cstrong\u003eadipiscing\u003c/strong\u003e elit. Vivamus sagittis nisi nec neque porta, a ornare ligula efficitur DE.","author":"John Doe","role":"Projektmanager","mediaEntityIds":["5dfc1856-e9e4-4f02-9cd6-9d888870ce1a"]} /-->
+          <!-- wp:paragraph -->
+          <p></p>
+          <!-- /wp:paragraph -->
           <!-- /wp:custom/content -->
         format: gutenberg
         summary: ''
diff --git a/packages/schema/src/fragments/Page.gql b/packages/schema/src/fragments/Page.gql
index cbf2227eb..28f7127f2 100644
--- a/packages/schema/src/fragments/Page.gql
+++ b/packages/schema/src/fragments/Page.gql
@@ -35,6 +35,9 @@ fragment Page on Page {
     ...BlockCta
     ...BlockImageWithText
     ...BlockQuote
+    ...BlockHorizontalSeparator
+    ...BlockAccordion
+    ...BlockInfoGrid
   }
   metaTags {
     tag
diff --git a/packages/schema/src/fragments/PageContent/BlockAccordion.gql b/packages/schema/src/fragments/PageContent/BlockAccordion.gql
new file mode 100644
index 000000000..0f77b257d
--- /dev/null
+++ b/packages/schema/src/fragments/PageContent/BlockAccordion.gql
@@ -0,0 +1,13 @@
+fragment BlockAccordion on BlockAccordion {
+  items {
+    ...BlockAccordionItemText
+  }
+}
+
+fragment BlockAccordionItemText on BlockAccordionItemText {
+  title
+  icon
+  textContent {
+    markup
+  }
+}
diff --git a/packages/schema/src/fragments/PageContent/BlockHorizontalSeparator.gql b/packages/schema/src/fragments/PageContent/BlockHorizontalSeparator.gql
new file mode 100644
index 000000000..ef992a139
--- /dev/null
+++ b/packages/schema/src/fragments/PageContent/BlockHorizontalSeparator.gql
@@ -0,0 +1,5 @@
+fragment BlockHorizontalSeparator on BlockHorizontalSeparator {
+  # This is not really used, but until we have other real setting fields, we
+  # have to provide a dummy one.
+  markup
+}
diff --git a/packages/schema/src/fragments/PageContent/BlockInfoGrid.gql b/packages/schema/src/fragments/PageContent/BlockInfoGrid.gql
new file mode 100644
index 000000000..005d328e3
--- /dev/null
+++ b/packages/schema/src/fragments/PageContent/BlockInfoGrid.gql
@@ -0,0 +1,15 @@
+fragment BlockInfoGrid on BlockInfoGrid {
+  gridItems {
+    ...BlockInfoGridItem
+  }
+}
+
+fragment BlockInfoGridItem on BlockInfoGridItem {
+  icon
+  cta {
+    ...BlockCta
+  }
+  textContent {
+    markup
+  }
+}
diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql
index e2034acb5..eae9d191c 100644
--- a/packages/schema/src/schema.graphql
+++ b/packages/schema/src/schema.graphql
@@ -206,6 +206,9 @@ union PageContent @resolveEditorBlockType =
   | BlockCta
   | BlockImageWithText
   | BlockQuote
+  | BlockHorizontalSeparator
+  | BlockAccordion
+  | BlockInfoGrid
 
 type BlockForm @type(id: "custom/form") {
   url: Url @resolveEditorBlockAttribute(key: "formId") @webformIdToUrl(id: "$")
@@ -245,6 +248,16 @@ type BlockImageTeaser @default @value {
   ctaUrl: Url @resolveEditorBlockAttribute(key: "ctaUrl")
 }
 
+type BlockAccordion @type(id: "custom/accordion") {
+  items: [BlockAccordionItemText!]! @resolveEditorBlockChildren
+}
+
+type BlockAccordionItemText @default @value {
+  title: String! @resolveEditorBlockAttribute(key: "title")
+  icon: String! @resolveEditorBlockAttribute(key: "icon")
+  textContent: BlockMarkup @resolveEditorBlockChildren @seek(pos: 0)
+}
+
 type BlockCta @type(id: "custom/cta") {
   url: Url @resolveEditorBlockAttribute(key: "url")
   text: String @resolveEditorBlockAttribute(key: "text")
@@ -264,6 +277,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!
@@ -283,6 +308,20 @@ type BlockQuote @type(id: "custom/quote") {
   image: MediaImage @resolveEditorBlockMedia
 }
 
+type BlockHorizontalSeparator @type(id: "custom/horizontal-separator") {
+  markup: Markup! @resolveEditorBlockMarkup
+}
+
+type BlockInfoGrid @type(id: "custom/info-grid") {
+  gridItems: [BlockInfoGridItem]! @resolveEditorBlockChildren
+}
+
+type BlockInfoGridItem @default @value {
+  icon: String! @resolveEditorBlockAttribute(key: "icon")
+  textContent: BlockMarkup @resolveEditorBlockChildren @seek(pos: 0)
+  cta: BlockCta @resolveEditorBlockChildren @seek(pos: 1)
+}
+
 input PaginationInput {
   limit: Int!
   offset: Int!
diff --git a/packages/ui/package.json b/packages/ui/package.json
index f3320b5ce..967e148ea 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -44,6 +44,7 @@
     "@heroicons/react": "^2.1.1",
     "@hookform/resolvers": "^3.3.3",
     "clsx": "^2.1.0",
+    "flowbite-react": "^0.9.0",
     "framer-motion": "^10.17.4",
     "hast-util-is-element": "^2.1.3",
     "hast-util-select": "^5.0.5",
diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx
new file mode 100644
index 000000000..9a7c6d0e5
--- /dev/null
+++ b/packages/ui/src/components/Molecules/Breadcrumbs.stories.tsx
@@ -0,0 +1,24 @@
+import { FrameQuery, OperationExecutor } from '@custom/schema';
+import { Meta } from '@storybook/react';
+import React from 'react';
+
+import { Default as FrameStory } from '../Routes/Frame.stories';
+import { BreadCrumbs } from './Breadcrumbs';
+
+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}>
+        <BreadCrumbs />
+      </OperationExecutor>
+    );
+  },
+};
diff --git a/packages/ui/src/components/Molecules/Breadcrumbs.tsx b/packages/ui/src/components/Molecules/Breadcrumbs.tsx
new file mode 100644
index 000000000..27232e13b
--- /dev/null
+++ b/packages/ui/src/components/Molecules/Breadcrumbs.tsx
@@ -0,0 +1,54 @@
+import { Link } from '@custom/schema';
+import { ChevronRightIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+import React from 'react';
+
+import { isTruthy } from '../../utils/isTruthy';
+import { useBreadcrumbs } from '../Routes/Menu';
+
+export function BreadCrumbs({ className }: { className?: string }) {
+  const breadcrumbs = useBreadcrumbs();
+
+  if (!breadcrumbs.length) {
+    return null;
+  }
+
+  return (
+    <nav className={clsx('pt-5', className)} aria-label="Breadcrumb">
+      <ol className={'rounded-lg inline-block py-2.5'}>
+        {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}
+              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',
+              )}
+            >
+              {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">{title}</span>
+            </Link>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockAccordion.stories.tsx b/packages/ui/src/components/Organisms/PageContent/BlockAccordion.stories.tsx
new file mode 100644
index 000000000..d5c5b8b34
--- /dev/null
+++ b/packages/ui/src/components/Organisms/PageContent/BlockAccordion.stories.tsx
@@ -0,0 +1,57 @@
+import { Markup } from '@custom/schema';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { BlockAccordion } from './BlockAccordion';
+
+export default {
+  component: BlockAccordion,
+} satisfies Meta<typeof BlockAccordion>;
+
+export const AccordionItemText = {
+  args: {
+    items: [
+      {
+        title: 'Cheese Fondue',
+        icon: '',
+        textContent: {
+          markup: `
+          <p>The earliest known recipe for the modern form of cheese fondue comes from a 1699 book published in Zürich, under the name "Käss mit Wein zu kochen" 'to cook cheese with wine'.</p>
+          <p>It calls for grated or cut-up cheese to be melted with wine, and for bread to be dipped in it. However, the name "cheese fondue", until the late 19th century, referred to a dish composed of eggs and cheese, as in la Chapelle's 1735 Fonduë de Fromage, aux Truffes Fraiches; it was something between scrambled eggs with cheese and a cheese soufflé. Brillat-Savarin wrote in 1834 that it is "nothing other than scrambled eggs with cheese". Variations included cream ("à la genevoise") and truffles ("à la piémontaise") in addition to eggs, as well as what is now called "raclette" ("fondue valaisanne").</p>
+          <ul>
+          <li>Fribourgeoise</li>
+          <li>Moitié-Moitié</li>
+          </ul>
+        ` as Markup,
+        },
+      },
+      {
+        title: 'Rösti',
+        icon: 'questionmark',
+        textContent: {
+          markup: `
+          <p>Rösti is a kind of fried potato cake served as a main course or side dish.</p>
+          <p>As a main dish, rösti is usually accompanied with cheese, onions and cold meat or eggs. This dish, originally from Zürich, was first simply made by frying grated raw potatoes in a pan. It has then spread towards Bern where it is made with boiled potatoes instead. This is where it took the name Rösti. There are many variants in Switzerland and outside the borders. This culinary specialty gives its name to the röstigraben, which designates the cultural differences between the German- and French-speaking parts of the country.</p>
+        ` as Markup,
+        },
+      },
+      {
+        title: 'Älplermagronen',
+        icon: 'checkmark',
+        textContent: {
+          markup: `
+          <p>Älplermagronen are now regarded as a traditional dish of the Swiss Alps and a classic of Swiss comfort foods. According to a popular theory, pasta became widespread in northern Switzerland in the late 19th century, when the Gotthard Tunnel was built, partly by Italian workers who brought dry pasta with them.</p>
+        ` as Markup,
+        },
+      },
+      {
+        title: 'Meringue with double cream',
+        icon: 'arrow',
+        textContent: {
+          markup: `
+          <p>The Oxford English Dictionary states that the French word is of unknown origin. The name meringue for this confection first appeared in print in François Massialot's cookbook of 1692.</p>
+        ` as Markup,
+        },
+      },
+    ],
+  },
+} satisfies StoryObj<typeof BlockAccordion>;
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockAccordion.tsx b/packages/ui/src/components/Organisms/PageContent/BlockAccordion.tsx
new file mode 100644
index 000000000..b22126a39
--- /dev/null
+++ b/packages/ui/src/components/Organisms/PageContent/BlockAccordion.tsx
@@ -0,0 +1,118 @@
+import { BlockAccordionFragment, Html } from '@custom/schema';
+import {
+  ArrowRightCircleIcon,
+  CheckCircleIcon,
+  QuestionMarkCircleIcon,
+} from '@heroicons/react/20/solid';
+import clsx from 'clsx';
+import { Accordion, CustomFlowbiteTheme, Flowbite } from 'flowbite-react';
+import type { Element } from 'hast';
+import { selectAll } from 'hast-util-select';
+import React, { PropsWithChildren } from 'react';
+import { Plugin } from 'unified';
+
+const unorderedItems: Plugin<[], Element> = () => (tree) => {
+  selectAll('ul > li', tree).forEach((node) => {
+    node.properties!.unordered = true;
+  });
+};
+
+const accordionTheme: CustomFlowbiteTheme['accordion'] = {
+  root: {
+    base: 'mt-10 divide-y divide-gray-200 border-gray-200',
+    flush: {
+      off: 'last:border-0',
+      on: 'last:border-0',
+    },
+  },
+  content: {
+    base: 'pb-5 pt-5 text-base font-light text-gray-500',
+  },
+  title: {
+    base: 'flex w-full items-center justify-between p-4 pl-1 text-left font-normal text-lg text-gray-500',
+    flush: {
+      off: 'hover:bg-gray-100',
+      on: 'bg-transparent',
+    },
+    heading: '',
+    open: {
+      off: '',
+      on: 'text-gray-900',
+    },
+  },
+};
+
+// Applying the custom theme to the Accordion component
+// doesn't work out, wrapping it in a Flowbite component.
+const theme: CustomFlowbiteTheme = {
+  accordion: accordionTheme,
+};
+
+export function BlockAccordion(props: BlockAccordionFragment) {
+  return (
+    <Flowbite theme={{ theme }}>
+      <Accordion collapseAll>
+        {props.items.map((item, index) => (
+          <Accordion.Panel key={index}>
+            <Accordion.Title>
+              <span className="flex items-center">
+                {item.icon && <AccordionIcon icon={item.icon} />} {item.title}
+              </span>
+            </Accordion.Title>
+            <Accordion.Content className="space-y-2">
+              <div className="sm:w-full md:w-4/5">
+                {item.textContent?.markup && (
+                  <Html
+                    plugins={[unorderedItems]}
+                    components={{
+                      li: ({
+                        unordered,
+                        children,
+                        className,
+                        ...props
+                      }: PropsWithChildren<{
+                        unordered?: boolean;
+                        className?: string;
+                      }>) => {
+                        return (
+                          <li
+                            {...props}
+                            className={clsx(className, {
+                              'ml-5 mt-1 mb-1 list-disc': unordered,
+                            })}
+                          >
+                            {children}
+                          </li>
+                        );
+                      },
+                    }}
+                    markup={item.textContent.markup}
+                  />
+                )}
+              </div>
+            </Accordion.Content>
+          </Accordion.Panel>
+        ))}
+      </Accordion>
+    </Flowbite>
+  );
+}
+
+function AccordionIcon({ icon }: { icon: string }) {
+  switch (icon) {
+    case 'questionmark':
+      return (
+        <QuestionMarkCircleIcon className="w-5 h-5 me-2 shrink-0 text-gray-500" />
+      );
+    case 'checkmark':
+      return (
+        <CheckCircleIcon className="w-5 h-5 me-2 shrink-0 text-gray-500" />
+      );
+    case 'arrow':
+      return (
+        <ArrowRightCircleIcon className="w-5 h-5 me-2 shrink-0 text-gray-500" />
+      );
+    default:
+      return null;
+  }
+}
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx
index 9a43189f9..620f567f1 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockCta.tsx
@@ -10,11 +10,11 @@ import React from 'react';
 
 export function BlockCta(props: BlockCtaFragment) {
   return (
-    <div className="container-content">
+    <div className="container-content 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 font-medium text-center w-fit transition-all duration-200 ease-in-out group',
+          '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'}
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.stories.ts b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.stories.ts
new file mode 100644
index 000000000..006c3158f
--- /dev/null
+++ b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.stories.ts
@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { BlockHorizontalSeparator } from './BlockHorizontalSeparator';
+
+export default {
+  component: BlockHorizontalSeparator,
+} satisfies Meta<typeof BlockHorizontalSeparator>;
+
+export const HorizontalSeparator = {
+  args: {},
+} satisfies StoryObj<typeof BlockHorizontalSeparator>;
diff --git a/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
new file mode 100644
index 000000000..4d5308927
--- /dev/null
+++ b/packages/ui/src/components/Organisms/PageContent/BlockHorizontalSeparator.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function BlockHorizontalSeparator() {
+  return <hr />;
+}
diff --git a/packages/ui/src/components/Organisms/PageDisplay.tsx b/packages/ui/src/components/Organisms/PageDisplay.tsx
index c2d21e1ec..fc77442d5 100644
--- a/packages/ui/src/components/Organisms/PageDisplay.tsx
+++ b/packages/ui/src/components/Organisms/PageDisplay.tsx
@@ -3,9 +3,12 @@ import React from 'react';
 
 import { isTruthy } from '../../utils/isTruthy';
 import { UnreachableCaseError } from '../../utils/unreachable-case-error';
+import { BreadCrumbs } from '../Molecules/Breadcrumbs';
 import { PageTransition } from '../Molecules/PageTransition';
+import { BlockAccordion } from './PageContent/BlockAccordion';
 import { BlockCta } from './PageContent/BlockCta';
 import { BlockForm } from './PageContent/BlockForm';
+import { BlockHorizontalSeparator } from './PageContent/BlockHorizontalSeparator';
 import { BlockImageWithText } from './PageContent/BlockImageWithText';
 import { BlockMarkup } from './PageContent/BlockMarkup';
 import { BlockMedia } from './PageContent/BlockMedia';
@@ -16,8 +19,12 @@ export function PageDisplay(page: PageFragment) {
   return (
     <PageTransition>
       <div>
-        {page.hero ? <PageHero {...page.hero} /> : null}
-        <div className="bg-white container-page">
+        {!page.hero && (
+          <BreadCrumbs className="pt-5 mx-auto max-w-screen-xl px-3.5" />
+        )}
+        {page.hero && <PageHero {...page.hero} />}
+        <div className="bg-white pt-5 pb-12 px-6 lg:px-20">
+          {page.hero && <BreadCrumbs className="mx-auto max-w-3xl" />}
           <div className="text-base leading-7 text-gray-700">
             {page?.content?.filter(isTruthy).map((block, index) => {
               switch (block.__typename) {
@@ -48,6 +55,48 @@ export function PageDisplay(page: PageFragment) {
                   return <BlockImageWithText key={index} {...block} />;
                 case 'BlockQuote':
                   return <BlockQuote key={index} {...block} />;
+                case 'BlockHorizontalSeparator':
+                  return <BlockHorizontalSeparator key={index} {...block} />;
+                case 'BlockAccordion':
+                  return <BlockAccordion key={index} {...block} />;
+                case 'BlockInfoGrid':
+                  return (
+                    // TODO: Implement BlockImageTeasers
+                    <div
+                      style={{
+                        color: 'red',
+                        border: 'solid 3px red',
+                        padding: '3px',
+                        margin: '5px 0',
+                      }}
+                      // eslint-disable-next-line react/jsx-no-literals
+                    >
+                      BlockInfoGrid goes here
+                      <br />
+                      ---
+                      <br />
+                      {block.gridItems.map((item, index) => {
+                        return (
+                          <>
+                            <div key={index}>
+                              <p>Icon: {item?.icon}</p>
+                              <p>Markup: {item?.textContent?.markup}</p>
+                              <p>CTA Url: {item?.cta?.url}</p>
+                              <p>CTA Icon: {item?.cta?.icon}</p>
+                              <p>
+                                CTA Icon Position: {item?.cta?.iconPosition}
+                              </p>
+                              <p>CTA Text: {item?.cta?.text}</p>
+                              <p>
+                                CTA Open in New Tab: {item?.cta?.openInNewTab}
+                              </p>
+                            </div>
+                            <br />
+                          </>
+                        );
+                      })}
+                    </div>
+                  );
                 default:
                   throw new UnreachableCaseError(block);
               }
diff --git a/packages/ui/src/components/Routes/Menu.tsx b/packages/ui/src/components/Routes/Menu.tsx
new file mode 100644
index 000000000..17c733fc2
--- /dev/null
+++ b/packages/ui/src/components/Routes/Menu.tsx
@@ -0,0 +1,93 @@
+import { FrameQuery, NavigationItem, Url, useLocation } from '@custom/schema';
+import { useIntl } from 'react-intl';
+
+import { useOperation } from '../../utils/operation';
+
+export type MenuNameType = 'main' | 'footer';
+
+export function useMenus() {
+  const intl = useIntl();
+  const locale = intl.locale;
+  const settings = useOperation(FrameQuery).data;
+
+  return {
+    main: settings?.mainNavigation
+      ?.filter((nav) => nav?.locale === locale)
+      .pop(),
+    footer: settings?.footerNavigation
+      ?.filter((nav) => nav?.locale === locale)
+      .pop(),
+  };
+}
+
+export function useCurrentPath() {
+  const [loc] = useLocation();
+  return loc.pathname;
+}
+
+export function useMenuItem(path: string, menuName: MenuNameType) {
+  const menus = useMenus();
+
+  return (
+    menus &&
+    menus[menuName]?.items.find((menuItem) => menuItem?.target === path)
+  );
+}
+
+export function useMenuChildren(path: string, menuName: MenuNameType) {
+  const menus = useMenus();
+  const menuItemFromPath = useMenuItem(path, menuName);
+  return (
+    menus &&
+    menus[menuName]?.items.filter(
+      (menuItem) => menuItem?.parent === menuItemFromPath?.id,
+    )
+  );
+}
+
+export function useCurrentMenuItem(menuName: MenuNameType) {
+  const currentPath = useCurrentPath();
+  return useMenuItem(currentPath || '', menuName);
+}
+
+export function useCurrentMenuChildren(menuName: MenuNameType) {
+  const currentPath = useCurrentPath();
+  return useMenuChildren(currentPath || '', menuName);
+}
+
+export function useMenuAncestors(path: string, menuName: MenuNameType) {
+  const menus = useMenus();
+  const menuItemFromPath = useMenuItem(path, menuName);
+  let processingMenuItem = menuItemFromPath;
+  const ancestors: Array<NavigationItem> = [];
+
+  // Set current page breadcrumb
+  if (typeof processingMenuItem !== 'undefined') {
+    // If not home path then only push into breadcrumbs array
+    processingMenuItem.target !== '/' && ancestors.push(processingMenuItem);
+  }
+
+  while (
+    typeof processingMenuItem !== 'undefined' &&
+    processingMenuItem?.parent
+  ) {
+    processingMenuItem =
+      menus &&
+      menus[menuName]?.items.find(
+        (menuItem) => menuItem?.id === processingMenuItem?.parent,
+      );
+    if (typeof processingMenuItem !== 'undefined') {
+      ancestors.push(processingMenuItem);
+    }
+  }
+  if (ancestors.length > 0) {
+    ancestors.push({ id: '_', target: '/' as Url, title: 'Home' });
+  }
+
+  return ancestors.reverse();
+}
+
+export const useBreadcrumbs = (menuName?: MenuNameType, path?: string) => {
+  const currentPath = useCurrentPath();
+  return useMenuAncestors(path || currentPath || '', menuName || 'main');
+};
diff --git a/packages/ui/src/components/Routes/Page.stories.tsx b/packages/ui/src/components/Routes/Page.stories.tsx
index c99d17520..3bc6c7e66 100644
--- a/packages/ui/src/components/Routes/Page.stories.tsx
+++ b/packages/ui/src/components/Routes/Page.stories.tsx
@@ -11,6 +11,7 @@ import React from 'react';
 
 import { image } from '../../helpers/image';
 import { ImageRight } from '../Organisms/PageContent/BlockImageWithText.stories';
+import { AccordionItemText } from '../Organisms/PageContent/BlockAccordion.stories';
 import { Mixed, Paragraph } from '../Organisms/PageContent/BlockMarkup.stories';
 import { WithCaption } from '../Organisms/PageContent/BlockMedia.stories';
 import { Default as FrameStory } from './Frame.stories';
@@ -41,12 +42,6 @@ export const Default = {
         },
       ],
       path: '/test' as Url,
-      hero: {
-        headline: 'Page Hero Headline',
-        lead: 'A longer lead text that even might break into multiple lines.',
-        ctaUrl: '/test' as Url,
-        ctaText: 'Call to action',
-      },
       content: [
         {
           __typename: 'BlockMarkup',
@@ -64,9 +59,32 @@ export const Default = {
           __typename: 'BlockImageWithText',
           ...ImageRight.args,
         },
+        {
+          __typename: 'BlockAccordion',
+          ...AccordionItemText.args,
+        },
       ] as Exclude<ViewPageQuery['page'], undefined>['content'],
     },
   },
+  parameters: {
+    location: new URL('local:/gatsby-turbo'),
+  },
+} satisfies StoryObj<ViewPageQuery>;
+
+export const Hero = {
+  ...Default,
+  args: {
+    ...Default.args,
+    page: {
+      ...Default.args.page,
+      hero: {
+        headline: 'Page Hero Headline',
+        lead: 'A longer lead text that even might break into multiple lines.',
+        ctaUrl: '/test' as Url,
+        ctaText: 'Call to action',
+      },
+    },
+  },
 } satisfies StoryObj<ViewPageQuery>;
 
 export const FullHero = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cf1905123..c4e8a6fae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -532,6 +532,9 @@ importers:
       clsx:
         specifier: ^2.1.0
         version: 2.1.0
+      flowbite-react:
+        specifier: ^0.9.0
+        version: 0.9.0(react-dom@18.2.0)(react@18.2.0)(tailwindcss@3.4.0)
       framer-motion:
         specifier: ^10.17.4
         version: 10.17.4(react-dom@18.2.0)(react@18.2.0)
@@ -4158,14 +4161,12 @@ packages:
     resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==}
     dependencies:
       '@floating-ui/utils': 0.2.1
-    dev: true
 
   /@floating-ui/dom@1.6.3:
     resolution: {integrity: sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==}
     dependencies:
       '@floating-ui/core': 1.6.0
       '@floating-ui/utils': 0.2.1
-    dev: true
 
   /@floating-ui/react-dom@2.0.8(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==}
@@ -4176,11 +4177,22 @@ packages:
       '@floating-ui/dom': 1.6.3
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
+
+  /@floating-ui/react@0.26.10(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-sh6f9gVvWQdEzLObrWbJ97c0clJObiALsFe0LiR/kb3tDRKwEhObASEH2QyfdoO/ZBPzwxa9j+nYFo+sqgbioA==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0)(react@18.2.0)
+      '@floating-ui/utils': 0.2.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      tabbable: 6.2.0
+    dev: false
 
   /@floating-ui/utils@0.2.1:
     resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
-    dev: true
 
   /@formatjs/cli@6.2.4:
     resolution: {integrity: sha512-g1o9O143F5TGB55skib3fKbyjifPa9YoDcX9L07hVJocRKngCcu4JhKViyUSN55KGcN2ttfBomM+wihN6wtBSQ==}
@@ -7273,6 +7285,10 @@ packages:
     resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
     dev: true
 
+  /@popperjs/core@2.11.8:
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+    dev: false
+
   /@radix-ui/number@1.0.1:
     resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==}
     dependencies:
@@ -13793,6 +13809,10 @@ packages:
       static-extend: 0.1.2
     dev: false
 
+  /classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+    dev: false
+
   /clean-deep@3.4.0:
     resolution: {integrity: sha512-Lo78NV5ItJL/jl+B5w0BycAisaieJGXK1qYi/9m4SjR8zbqmrUtO7Yhro40wEShGmmxs/aJLI/A+jNhdkXK8mw==}
     engines: {node: '>=4'}
@@ -14981,6 +15001,11 @@ packages:
     resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}
     dev: true
 
+  /debounce@2.0.0:
+    resolution: {integrity: sha512-xRetU6gL1VJbs85Mc4FoEGSjQxzpdxRyFhe3lmWFyy2EzydIcD4xzUvRJMD+NPDfMwKNhxa3PvsIOU32luIWeA==}
+    engines: {node: '>=18'}
+    dev: false
+
   /debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -18577,6 +18602,32 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: true
 
+  /flowbite-react@0.9.0(react-dom@18.2.0)(react@18.2.0)(tailwindcss@3.4.0):
+    resolution: {integrity: sha512-wRGzTPHaEuRSXiAFhdTuksezABE/AjI/iyOOBGZpsFAz/sq7zuorAqjRud9FWgy3TlFPtldl7kL93wNY2nOnKQ==}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+      tailwindcss: ^3
+    dependencies:
+      '@floating-ui/core': 1.6.0
+      '@floating-ui/react': 0.26.10(react-dom@18.2.0)(react@18.2.0)
+      classnames: 2.5.1
+      debounce: 2.0.0
+      flowbite: 2.3.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-icons: 5.0.1(react@18.2.0)
+      tailwind-merge: 2.2.2
+      tailwindcss: 3.4.0
+    dev: false
+
+  /flowbite@2.3.0:
+    resolution: {integrity: sha512-pm3JRo8OIJHGfFYWgaGpPv8E+UdWy0Z3gEAGufw+G/1dusaU/P1zoBLiQpf2/+bYAi+GBQtPVG86KYlV0W+AFQ==}
+    dependencies:
+      '@popperjs/core': 2.11.8
+      mini-svg-data-uri: 1.4.4
+    dev: false
+
   /flush-write-stream@2.0.0:
     resolution: {integrity: sha512-uXClqPxT4xW0lcdSBheb2ObVU+kuqUk3Jk64EwieirEXZx9XUrVwp/JuBfKAWaM4T5Td/VL7QLDWPXp/MvGm/g==}
     dependencies:
@@ -24707,7 +24758,6 @@ packages:
   /mini-svg-data-uri@1.4.4:
     resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
     hasBin: true
-    dev: true
 
   /minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
@@ -26700,7 +26750,6 @@ packages:
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.8
-    dev: true
 
   /postcss-import@15.1.0(postcss@8.4.38):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
@@ -26735,7 +26784,6 @@ packages:
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.32
-    dev: true
 
   /postcss-js@4.0.1(postcss@8.4.38):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
@@ -26763,7 +26811,6 @@ packages:
       lilconfig: 3.1.1
       postcss: 8.4.32
       yaml: 2.3.4
-    dev: true
 
   /postcss-load-config@4.0.2(postcss@8.4.38):
     resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
@@ -26986,7 +27033,6 @@ packages:
     dependencies:
       postcss: 8.4.32
       postcss-selector-parser: 6.0.16
-    dev: true
 
   /postcss-nested@6.0.1(postcss@8.4.38):
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
@@ -27328,7 +27374,6 @@ packages:
       nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.2.0
-    dev: true
 
   /postcss@8.4.38:
     resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
@@ -28144,6 +28189,14 @@ packages:
       source-map: 0.7.4
     dev: false
 
+  /react-icons@5.0.1(react@18.2.0):
+    resolution: {integrity: sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-immutable-proptypes@2.2.0(immutable@3.8.2):
     resolution: {integrity: sha512-Vf4gBsePlwdGvSZoLSBfd4HAP93HDauMY4fDjXhreg/vg6F3Fj/MXDNyTbltPC/xZKmZc+cjLu3598DdYK6sgQ==}
     peerDependencies:
@@ -30903,6 +30956,10 @@ packages:
     resolution: {integrity: sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==}
     engines: {node: '>=18'}
 
+  /tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+    dev: false
+
   /table@5.4.6:
     resolution: {integrity: sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==}
     engines: {node: '>=6.0.0'}
@@ -30936,6 +30993,12 @@ packages:
       - supports-color
     dev: false
 
+  /tailwind-merge@2.2.2:
+    resolution: {integrity: sha512-tWANXsnmJzgw6mQ07nE3aCDkCK4QdT3ThPMCzawoYA2Pws7vSTCvz3Vrjg61jVUGfFZPJzxEP+NimbcW+EdaDw==}
+    dependencies:
+      '@babel/runtime': 7.24.4
+    dev: false
+
   /tailwindcss@3.4.0:
     resolution: {integrity: sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==}
     engines: {node: '>=14.0.0'}
@@ -30965,7 +31028,6 @@ packages:
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
-    dev: true
 
   /tailwindcss@3.4.3:
     resolution: {integrity: sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==}
diff --git a/tests/e2e/specs/drupal/blocks.spec.ts b/tests/e2e/specs/drupal/blocks.spec.ts
index 029edc711..5073e10b8 100644
--- a/tests/e2e/specs/drupal/blocks.spec.ts
+++ b/tests/e2e/specs/drupal/blocks.spec.ts
@@ -22,7 +22,10 @@ test('All blocks are rendered', async ({ page }) => {
     page.locator('a:text("link")[href="/en/architecture"]'),
   ).toHaveCount(1);
 
-  // Image and ImageWithText block
+  // Horizontal separator.
+  await expect(page.locator('hr')).toHaveCount(1);
+
+  // Image
   await expect(
     page.locator(
       'img:not([data-test-id=hero-image])[alt="A beautiful landscape."]',
diff --git a/tests/e2e/specs/drupal/content-editing.spec.ts b/tests/e2e/specs/drupal/content-editing.spec.ts
index 463d49dc7..b90810480 100644
--- a/tests/e2e/specs/drupal/content-editing.spec.ts
+++ b/tests/e2e/specs/drupal/content-editing.spec.ts
@@ -6,19 +6,21 @@ test.describe('content-editing', () => {
   test.use({ storageState: '.auth/admin.json' });
 
   test('moderation controls are placed in the sidebar', async ({ page }) => {
-    await page.goto(cmsUrl('/node/add/page'));
+    await page.goto(cmsUrl('/drupal'));
+    await page.locator('li.tabs__tab a:text("Edit")').click();
     await expect(
-      page.locator('[aria-label="Editor settings"]').getByText('Save as'),
+      page.locator('[aria-label="Editor settings"]').getByText('Change to'),
     ).toBeVisible();
   });
 
   test('"More settings" fieldset is removed', async ({ page }) => {
+    await page.goto(cmsUrl('/drupal'));
+    await page.locator('li.tabs__tab a:text("Edit")').click();
     // Why we expect it to be removed:
     // - It's too long to scroll to the bottom of long pages
     // - If we have any valuable controls in the "More settings" fieldset,
     //   we should move them to the sidebar, where they are much easier to
     //   access
-    await page.goto(cmsUrl('/node/add/page'));
     await expect(page.locator(':text-is("More settings")')).toHaveCount(0);
   });
 });
diff --git a/tests/e2e/specs/drupal/preview.spec.ts b/tests/e2e/specs/drupal/preview.spec.ts
index 78865a978..0ca958f7b 100644
--- a/tests/e2e/specs/drupal/preview.spec.ts
+++ b/tests/e2e/specs/drupal/preview.spec.ts
@@ -10,6 +10,7 @@ test.describe('instant preview', () => {
     await page
       .getByLabel('Title', { exact: true })
       .fill('Instant preview test');
+    await page.locator('#edit-submit').click();
     await page
       .locator('#editor-edit-body-0-value h1 span')
       .first()
diff --git a/tests/schema/specs/blocks.spec.ts b/tests/schema/specs/blocks.spec.ts
index 1274a2854..a2ebecbb2 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
@@ -73,6 +90,37 @@ test('Blocks', async () => {
             __typename
           }
         }
+        ... on BlockHorizontalSeparator {
+          __typename
+        }
+        ... on BlockAccordion {
+          items {
+            __typename
+            ... on BlockAccordionItemText {
+              __typename
+              title
+              icon
+              textContent {
+                markup
+              }
+            }
+          }
+        }
+        ... on BlockInfoGrid {
+          gridItems {
+            icon
+            textContent {
+              markup
+            }
+            cta {
+              url
+              icon
+              iconPosition
+              text
+              openInNewTab
+            }
+          }
+        }
       }
     }
     {
@@ -108,6 +156,9 @@ test('Blocks', async () => {
     <p>A standalone paragraph with <strong><em>markup</em></strong> and <a href="/en/architecture" data-type="Content: Basic page" data-id="[numeric]" data-entity-type="node">link</a></p>
     ",
             },
+            {
+              "__typename": "BlockHorizontalSeparator",
+            },
             {
               "__typename": "BlockMedia",
               "caption": "Media image",
@@ -157,6 +208,8 @@ test('Blocks', async () => {
     <ul><li>list 1</li><li>list 2<ol><li>list 2.2</li></ol></li></ul>
 
     <h3 class="wp-block-custom-heading">Heading 3</h3>
+
+    <blockquote class="wp-block-quote"><p>Quote</p><cite>Citation</cite></blockquote>
     ",
             },
             {
@@ -216,10 +269,91 @@ test('Blocks', async () => {
               "role": "Project manager",
             },
             {
-              "__typename": "BlockMarkup",
-              "markup": "
-    <p></p>
+              "__typename": "BlockAccordion",
+              "items": [
+                {
+                  "__typename": "BlockAccordionItemText",
+                  "icon": "",
+                  "textContent": {
+                    "markup": "
+    <p>Incididunt laborum velit non proident nostrud velit. Minim excepteur ut aliqua nisi. Culpa laboris consectetur proident. Tempor esse ullamco et dolor proident id officia laborum voluptate nostrud elit dolore qui amet. Ex Lorem irure eu anim ipsum officia.</p>
+    ",
+                  },
+                  "title": "With a single paragraph and no icon",
+                },
+                {
+                  "__typename": "BlockAccordionItemText",
+                  "icon": "arrow",
+                  "textContent": {
+                    "markup": "
+    <ul><li>Moitié-moitié</li><li>Fribourgeoise</li></ul>
+
+    <p>Incididunt laborum velit non proident nostrud velit. Minim excepteur ut aliqua nisi. Culpa laboris consectetur proident. Tempor esse ullamco et dolor proident id officia laborum voluptate nostrud elit dolore qui amet. Ex Lorem irure eu anim ipsum officia.</p>
+    ",
+                  },
+                  "title": "With a list and a paragraph and arrow icon",
+                },
+              ],
+            },
+            {
+              "__typename": "BlockInfoGrid",
+              "gridItems": [
+                {
+                  "cta": {
+                    "icon": "ARROW",
+                    "iconPosition": null,
+                    "openInNewTab": null,
+                    "text": "Nullam dictum felis",
+                    "url": "/en/page-links",
+                  },
+                  "icon": "EMAIL",
+                  "textContent": {
+                    "markup": "
+    <h3 class="wp-block-custom-heading">Email us:</h3>
+
+    <p>Email us for general queries, including marketing and partnership opportunities.</p>
+
+    <p><a href="mailto:hello@company.com">hello@company.com</a></p>
     ",
+                  },
+                },
+                {
+                  "cta": {
+                    "icon": null,
+                    "iconPosition": null,
+                    "openInNewTab": null,
+                    "text": "Duis lobortis massa",
+                    "url": "/en/technologies",
+                  },
+                  "icon": "PHONE",
+                  "textContent": {
+                    "markup": "
+    <h3 class="wp-block-custom-heading">Call us:</h3>
+
+    <p>Call us to speak to a member of our team. We are always happy to help.</p>
+
+    <p><a href="tel:+16467865060">+1 (646) 786-5060</a></p>
+    ",
+                  },
+                },
+                {
+                  "cta": {
+                    "icon": null,
+                    "iconPosition": null,
+                    "openInNewTab": true,
+                    "text": "Nunc nulla",
+                    "url": "http://www.google.com",
+                  },
+                  "icon": "LIFE-RING",
+                  "textContent": {
+                    "markup": "
+    <h3 class="wp-block-custom-heading">Support</h3>
+
+    <p>Check out helpful resources, FAQs and developer tools.</p>
+    ",
+                  },
+                },
+              ],
             },
           ],
           "hero": {