diff --git a/drupal_cms_olivero/components/search-narrow/images/search--white.svg b/drupal_cms_olivero/components/search-narrow/images/search--white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..81730452219f3196d8c00ed75ec812c52eba9db9
--- /dev/null
+++ b/drupal_cms_olivero/components/search-narrow/images/search--white.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="27.2" viewBox="0 0 26 27.2">
+  <path fill="#fff" d="M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z"/>
+</svg>
diff --git a/drupal_cms_olivero/components/search-narrow/search-narrow.component.yml b/drupal_cms_olivero/components/search-narrow/search-narrow.component.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/drupal_cms_olivero/components/search-narrow/search-narrow.css b/drupal_cms_olivero/components/search-narrow/search-narrow.css
new file mode 100644
index 0000000000000000000000000000000000000000..88cc5f93bd443203ce71465773ed9e923c94c226
--- /dev/null
+++ b/drupal_cms_olivero/components/search-narrow/search-narrow.css
@@ -0,0 +1,99 @@
+.block-search-narrow {
+  margin-inline: calc(-1 * var(--sp));
+  margin-block-end: var(--sp2);
+  background: var(--color--black);
+
+  form {
+    display: flex;
+  }
+
+  .form-item {
+    flex-grow: 1;
+    margin: 0;
+  }
+
+  .form-actions {
+    margin: 0;
+  }
+
+  input:is([type="search"],[type="text"]) {
+    width: calc(100% + var(--sp2));
+    height: var(--sp3);
+    padding-block: 0;
+    padding-inline-start: var(--sp);
+    padding-inline-end: var(--sp);
+    transition: background-size 0.4s;
+    color: var(--color--white);
+    border: solid 1px transparent;
+    background-color: transparent;
+    background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50));
+    background-repeat: no-repeat;
+    background-position: bottom left; /* LTR */
+    background-size: 0% 5px;
+    box-shadow: none;
+    font-family: var(--font-serif);
+    font-size: 16px;
+    -webkit-appearance: none;
+
+    &:focus {
+      outline: solid 4px transparent;
+      outline-offset: -4px;
+      background-size: 100% 5px;
+    }
+
+    @media (min-width: 43.75rem) {
+      height: var(--sp4);
+      padding-inline-start: var(--sp2);
+      padding-inline-end: var(--sp2);
+    }
+  }
+
+  [type="submit"][class] {
+    position: relative;
+    overflow: hidden;
+    align-self: stretch;
+    width: var(--sp3);
+    height: auto;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    border-color: transparent;
+    background-color: transparent;
+    background-image: url('images/search--white.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: auto;
+    text-indent: -999px;
+
+    &:focus {
+      outline: solid 2px var(--color--white);
+      outline-offset: -4px;
+      box-shadow: none;
+    }
+
+    @media (min-width: 43.75rem) {
+      width: 80px;
+    }
+  }
+
+  /* 500px is the width of the primary nav at mobile. */
+  @media (min-width: 500px) {
+    margin-inline: 0;
+  }
+}
+
+body:not(.is-always-mobile-nav) .block-search-narrow {
+  @media (min-width: 75rem) {
+    display: none;
+  }
+}
+
+[dir="rtl"] .block-search-narrow {
+  & input[type="search"] {
+    background-position: bottom right;
+  }
+
+  & .search-form__submit .icon--search::after {
+    transform-origin: right;
+  }
+}
diff --git a/drupal_cms_olivero/components/search-narrow/search-narrow.twig b/drupal_cms_olivero/components/search-narrow/search-narrow.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e8735e9098a67eec6f841f0f96e16127735957fb
--- /dev/null
+++ b/drupal_cms_olivero/components/search-narrow/search-narrow.twig
@@ -0,0 +1,18 @@
+{%
+  set classes = [
+    'block',
+    'block-search-narrow',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    <div{{ content_attributes.addClass('content') }}>
+      {{ content }}
+    </div>
+  {% endblock %}
+</div>
diff --git a/drupal_cms_olivero/components/search-wide/images/search--white.svg b/drupal_cms_olivero/components/search-wide/images/search--white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..81730452219f3196d8c00ed75ec812c52eba9db9
--- /dev/null
+++ b/drupal_cms_olivero/components/search-wide/images/search--white.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="27.2" viewBox="0 0 26 27.2">
+  <path fill="#fff" d="M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z"/>
+</svg>
diff --git a/drupal_cms_olivero/components/search-wide/images/search.svg b/drupal_cms_olivero/components/search-wide/images/search.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fb9341ceafbd25e05dfa22dcaf17cde1131ee1ea
--- /dev/null
+++ b/drupal_cms_olivero/components/search-wide/images/search.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="23" viewBox="0 0 22 23">
+  <path fill="currentColor" d="M21.7,21.3l-4.4-4.4C19,15.1,20,12.7,20,10c0-5.5-4.5-10-10-10S0,4.5,0,10s4.5,10,10,10c2.1,0,4.1-0.7,5.8-1.8l4.5,4.5c0.4,0.4,1,0.4,1.4,0S22.1,21.7,21.7,21.3z M10,18c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S14.4,18,10,18z"/>
+</svg>
diff --git a/drupal_cms_olivero/components/search-wide/search-wide.component.yml b/drupal_cms_olivero/components/search-wide/search-wide.component.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/drupal_cms_olivero/components/search-wide/search-wide.css b/drupal_cms_olivero/components/search-wide/search-wide.css
new file mode 100644
index 0000000000000000000000000000000000000000..34898ecd6208b67365ca15e86dc2b6a8f1c152c9
--- /dev/null
+++ b/drupal_cms_olivero/components/search-wide/search-wide.css
@@ -0,0 +1,267 @@
+/**
+ * @file
+ * Header Search Wide Block.
+ */
+
+.block-search-wide.contextual-region {
+  position: static;
+}
+
+.block-search-wide__wrapper {
+  position: absolute;
+  z-index: 1; /* Ensure left border shows above social region in IE11. */
+  inset-block-start: 100%;
+  inset-inline-start: calc(-1 * var(--content-left));
+  display: none;
+  visibility: hidden;
+  overflow: hidden;
+  width: calc(100% + var(--content-left));
+  max-width: var(--max-bg-color);
+  height: var(--sp8);
+  max-height: 0;
+  margin: 0;
+  padding: 0;
+  transition: all 0.2s;
+  border-inline-start: solid var(--content-left) var(--color--gray-20);
+  background: var(--color--black);
+}
+
+.block-search-wide__wrapper.is-active {
+  visibility: visible;
+  max-height: var(--sp8);
+}
+
+.block-search-wide__wrapper form {
+  display: flex;
+  grid-column: 1 / 14;
+}
+
+.block-search-wide__wrapper .form-item {
+  margin: 0;
+}
+
+.block-search-wide__wrapper :is([type="search"], [type="text"]) {
+  width: calc(100% + var(--sp2));
+  height: var(--sp8);
+  padding-block: 0;
+  padding-inline: var(--sp12) 0;
+  border: 0;
+  background: transparent;
+  transition: background-size 0.4s;
+  color: var(--color--white);
+  border: solid 1px transparent;
+  box-shadow: none;
+  font-family: var(--font-serif);
+  font-size: 2rem;
+  -webkit-appearance: none;
+
+  &.form-autocomplete {
+    background-image: none;
+  }
+}
+
+.block-search-wide__wrapper :is([type="search"], [type="text"]):focus {
+  border-color: transparent;
+  outline: solid 4px transparent;
+  outline-offset: -4px;
+}
+
+.block-search-wide__wrapper .form-item-keys {
+  flex-grow: 1;
+  margin: 0;
+}
+
+.block-search-wide__wrapper .form-actions {
+  display: flex;
+  margin: 0;
+}
+
+.block-search-wide__wrapper .form-submit[class] {
+  position: relative;
+  overflow: hidden;
+  align-self: stretch;
+  width: 6.25rem;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  border-color: transparent;
+  background-color: transparent;
+  background-image: url('images/search--white.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  text-indent: -999px;
+  overflow: clip;
+
+  &:focus {
+    outline: solid 2px var(--color--white);
+    outline-offset: -4px;
+  }
+
+  @media (forced-colors: active) {
+    background: revert;
+    text-indent: revert;
+  }
+}
+
+.block-search-wide__container {
+  max-width: var(--max-width);
+  padding-inline-end: var(--sp2);
+}
+
+.block-search-wide__grid {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-col-count), 1fr);
+  grid-column-gap: var(--grid-gap);
+}
+
+/* Override specificity from container-inline.module.css */
+
+.container-inline .block-search-wide__container {
+  display: block;
+}
+
+.container-inline .block-search-wide__grid {
+  display: grid;
+}
+
+.block-search-wide__button {
+  position: relative;
+  display: none;
+  width: var(--sp3);
+  height: var(--sp6);
+  cursor: pointer;
+  color: var(--color-text-neutral-loud); /* Affects SVG search icon. */
+  border: 0;
+  background: transparent;
+  -webkit-appearance: none;
+}
+
+.block-search-wide__button:focus {
+  position: relative;
+  outline: 0;
+}
+
+.block-search-wide__button:focus::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 80%;
+  height: var(--sp3);
+  content: "";
+  transform: translate(-50%, -50%);
+  border: solid 2px var(--color--primary-50);
+  border-radius: 0.25rem;
+}
+
+.block-search-wide__button[aria-expanded="true"] {
+  background: var(--color--black);
+}
+
+.block-search-wide__button[aria-expanded="true"]:focus::after {
+  border-color: var(--color--white);
+}
+
+.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::before,
+.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--sp1-5);
+  height: 0;
+  content: "";
+  border-block-start: solid 2px var(--color--white);
+}
+
+.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::before {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::after {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.block-search-wide__button[aria-expanded="true"] svg {
+  display: none;
+}
+
+.block-search-wide__button svg {
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+}
+
+@media (forced-colors: active) {
+  .block-search-wide__button {
+    background: ButtonFace;
+  }
+
+  .block-search-wide__button path {
+    fill: ButtonText;
+  }
+}
+
+/* Provide rudimentary access to site search if JS is disabled. */
+
+html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper {
+  visibility: visible;
+  max-height: var(--sp8);
+}
+
+/* Necessary to override specificity of transpiled PostCSS properties from default input focus styling. */
+
+[dir] .block-search-wide__wrapper input[type="search"] {
+  background-color: transparent;
+  background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
+  background-repeat: no-repeat;
+  background-position: bottom left; /* LTR */
+  background-size: 0% 0.625rem;
+}
+
+[dir] .block-search-wide__wrapper input[type="search"]:focus {
+  background-size: 100% var(--sp0-5);
+}
+
+[dir="rtl"] .block-search-wide__wrapper input[type="search"] {
+  background-position: bottom right;
+}
+
+[dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search::after {
+  transform-origin: right;
+}
+
+@media (min-width: 75rem) {
+  body:not(.is-always-mobile-nav) .block-search-wide__wrapper,
+  body:not(.is-always-mobile-nav) .block-search-wide__button {
+    display: block;
+  }
+}
+
+/*
+ * Autocomplete styles.
+ */
+ .search-api-autocomplete-search {
+  .ui-menu-item {
+    .ui-menu-item-wrapper {
+      display: block;
+      padding-block: var(--sp);
+      padding-inline: var(--sp12) var(--sp);
+      background-color: var(--color--gray-20);
+      color: var(--color--white);
+      font-size: var(--font-size-l);
+
+      .search-api-autocomplete-suggestion {
+        all: revert;
+      }
+
+      &.ui-state-active {
+        background-color: var(--color--gray-45);
+        outline: solid 2px transparent;
+        outline-offset: -6px;
+
+        .search-api-autocomplete-suggestion {
+          all: revert;
+        }
+      }
+    }
+  }
+}
diff --git a/drupal_cms_olivero/components/search-wide/search-wide.js b/drupal_cms_olivero/components/search-wide/search-wide.js
new file mode 100644
index 0000000000000000000000000000000000000000..2413c4ba5eba07fffc45392811c6a02a7da2c024
--- /dev/null
+++ b/drupal_cms_olivero/components/search-wide/search-wide.js
@@ -0,0 +1,160 @@
+/**
+ * @file
+ * Wide viewport search bar interactions.
+ */
+
+((Drupal) => {
+  const searchWideButtonSelector = '[data-drupal-selector="block-search-wide-button"]';
+  const searchWideWrapperSelector = '[data-drupal-selector="block-search-wide-wrapper"]';
+  let searchWideButton;
+  let searchWideWrapper;
+
+  /**
+   * Determine if search is visible.
+   *
+   * @return {boolean}
+   *   True if the search wrapper contains "is-active" class, false if not.
+   */
+  function searchIsVisible() {
+    return searchWideWrapper.classList.contains('is-active');
+  }
+  Drupal.drupal_cms_olivero = Drupal.drupal_cms_olivero || {};
+  Drupal.drupal_cms_olivero.searchIsVisible = searchIsVisible;
+
+  /**
+   * Closes search bar when a click event does not happen at an (x,y) coordinate
+   * that does not overlap with either the search wrapper or button.
+   *
+   * @see https://bugs.webkit.org/show_bug.cgi?id=229895
+   *
+   * @param {Event} e click event
+   */
+  function watchForClickOut(e) {
+    const clickInSearchArea = e.target.matches(`
+      ${searchWideWrapperSelector},
+      ${searchWideWrapperSelector} *,
+      ${searchWideButtonSelector},
+      ${searchWideButtonSelector} *
+    `);
+    if (!clickInSearchArea && searchIsVisible()) {
+      // eslint-disable-next-line no-use-before-define
+      toggleSearchVisibility(false);
+    }
+  }
+
+  /**
+   * Closes search bar when focus moves to another target.
+   * Avoids closing search bar if event does not have related target - required for Safari.
+   *
+   * @see https://bugs.webkit.org/show_bug.cgi?id=229895
+   *
+   * @param {Event} e focusout event
+   */
+  function watchForFocusOut(e) {
+    if (e.relatedTarget) {
+      const inSearchBar = e.relatedTarget.matches(
+        `${searchWideWrapperSelector}, ${searchWideWrapperSelector} *`,
+      );
+      const inSearchButton = e.relatedTarget.matches(
+        `${searchWideButtonSelector}, ${searchWideButtonSelector} *`,
+      );
+
+      if (!inSearchBar && !inSearchButton) {
+        // eslint-disable-next-line no-use-before-define
+        toggleSearchVisibility(false);
+      }
+    }
+  }
+
+  /**
+   * Closes search bar on escape keyup, if open.
+   *
+   * @param {Event} e keyup event
+   */
+  function watchForEscapeOut(e) {
+    if (e.key === 'Escape') {
+      // eslint-disable-next-line no-use-before-define
+      toggleSearchVisibility(false);
+    }
+  }
+
+  /**
+   * Set focus for the search input element.
+   */
+  function handleFocus() {
+    if (searchIsVisible()) {
+      searchWideWrapper.querySelector('input:is([type="search"],[type="text"])').focus();
+    } else if (searchWideWrapper.contains(document.activeElement)) {
+      // Return focus to button only if focus was inside of the search wrapper.
+      searchWideButton.focus();
+    }
+  }
+
+  /**
+   * Toggle search functionality visibility.
+   *
+   * @param {boolean} visibility
+   *   True if we want to show the form, false if we want to hide it.
+   */
+  function toggleSearchVisibility(visibility) {
+    searchWideButton.setAttribute('aria-expanded', visibility === true);
+    searchWideWrapper.classList.toggle('is-active', visibility === true);
+    searchWideWrapper.addEventListener('transitionend', handleFocus, {
+      once: true,
+    });
+
+    if (visibility === true) {
+      if (typeof Drupal.olivero.closeAllSubNav === 'function') {
+        Drupal.olivero.closeAllSubNav();
+      }
+
+      document.addEventListener('click', watchForClickOut, { capture: true });
+      document.addEventListener('focusout', watchForFocusOut, {
+        capture: true,
+      });
+      document.addEventListener('keyup', watchForEscapeOut, { capture: true });
+    } else {
+      document.removeEventListener('click', watchForClickOut, {
+        capture: true,
+      });
+      document.removeEventListener('focusout', watchForFocusOut, {
+        capture: true,
+      });
+      document.removeEventListener('keyup', watchForEscapeOut, {
+        capture: true,
+      });
+    }
+  }
+
+  Drupal.drupal_cms_olivero.toggleSearchVisibility = toggleSearchVisibility;
+
+  function init() {
+    searchWideButton = document.querySelector(searchWideButtonSelector);
+    searchWideWrapper = document.querySelector(searchWideWrapperSelector);
+  }
+
+  /**
+   * Initializes the search wide button.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *  Adds aria-expanded attribute to the search wide button.
+   */
+  Drupal.behaviors.searchWide = {
+    attach(context) {
+      const searchWideButtonEl = once(
+        'search-wide',
+        searchWideButtonSelector,
+        context,
+      ).shift();
+      if (searchWideButtonEl) {
+        init();
+        searchWideButtonEl.setAttribute('aria-expanded', searchIsVisible());
+        searchWideButtonEl.addEventListener('click', () => {
+          toggleSearchVisibility(!searchIsVisible());
+        });
+      }
+    },
+  };
+})(Drupal);
diff --git a/drupal_cms_olivero/components/search-wide/search-wide.twig b/drupal_cms_olivero/components/search-wide/search-wide.twig
new file mode 100644
index 0000000000000000000000000000000000000000..3e05ee32cf8ea19591bf7ae8fb1b34a53fa9e81d
--- /dev/null
+++ b/drupal_cms_olivero/components/search-wide/search-wide.twig
@@ -0,0 +1,32 @@
+{%
+  set classes = [
+    'block',
+    'block-search-wide',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    <button class="block-search-wide__button" aria-label="{{ 'Search Form'|t }}" data-drupal-selector="block-search-wide-button">
+      {% include "@olivero/../images/search.svg" %}
+      <span class="block-search-wide__button-close"></span>
+    </button>
+
+    {#
+      Add tabindex=“-1” to prevent Safari from closing search bar when the submit button is clicked with a mouse.
+      @see https://www.drupal.org/project/drupal/issues/3269716
+      @see https://bugs.webkit.org/show_bug.cgi?id=229895
+    #}
+    <div{{ content_attributes.addClass('block-search-wide__wrapper').setAttribute('data-drupal-selector', 'block-search-wide-wrapper').setAttribute('tabindex', '-1') }}>
+      <div class="block-search-wide__container">
+        <div class="block-search-wide__grid">
+          {{ content }}
+        </div>
+      </div>
+    </div>
+  {% endblock %}
+</div>
diff --git a/drupal_cms_olivero/css/components/form.css b/drupal_cms_olivero/css/components/form.css
new file mode 100644
index 0000000000000000000000000000000000000000..3698c1bfcca9373009f04fc4d6639254bd13f232
--- /dev/null
+++ b/drupal_cms_olivero/css/components/form.css
@@ -0,0 +1,4 @@
+/* Very specific selector to align search result page form. */
+[data-drupal-selector*="views-exposed-form-search-page"] .form-item__label {
+  margin-top: 10px;
+}
diff --git a/drupal_cms_olivero/drupal_cms_olivero.info.yml b/drupal_cms_olivero/drupal_cms_olivero.info.yml
index 9191a56bb665f8e06082f21ea2a297e073d905e6..93ceaed6c4e73f0bef8a076254296f872b1c87e4 100644
--- a/drupal_cms_olivero/drupal_cms_olivero.info.yml
+++ b/drupal_cms_olivero/drupal_cms_olivero.info.yml
@@ -9,6 +9,8 @@ description: 'A variant of the Olivero front-end theme, optimized for Drupal CMS
 type: theme
 base theme: olivero
 core_version_requirement: ^11
+libraries:
+  - drupal_cms_olivero/global-styling
 regions:
   header: Header
   primary_menu: Primary menu
@@ -23,8 +25,6 @@ regions:
   content_below: Content Below
   footer_top: Footer Top
   footer_bottom: Footer Bottom
-libraries:
-  - drupal_cms_olivero/global-styling
 libraries-extend:
   views/views.module:
     - drupal_cms_olivero/views
diff --git a/drupal_cms_olivero/drupal_cms_olivero.libraries.yml b/drupal_cms_olivero/drupal_cms_olivero.libraries.yml
index a7690584b499a17f57aaf90805ddd6bb810de171..bb82b26ec748e4a0689adc85547f804884463497 100644
--- a/drupal_cms_olivero/drupal_cms_olivero.libraries.yml
+++ b/drupal_cms_olivero/drupal_cms_olivero.libraries.yml
@@ -1,5 +1,8 @@
 global-styling:
+  version: VERSION
   css:
+    component:
+      css/components/form.css: {}
     layout:
       css/layout/layout.css: {  }
 views:
diff --git a/drupal_cms_olivero/drupal_cms_olivero.theme b/drupal_cms_olivero/drupal_cms_olivero.theme
new file mode 100644
index 0000000000000000000000000000000000000000..5997ab2dcf62d7a739d1d3a4c694e6b3ea8b3ba3
--- /dev/null
+++ b/drupal_cms_olivero/drupal_cms_olivero.theme
@@ -0,0 +1,14 @@
+<?php
+/**
+ * Implements hook_theme_suggestions_HOOK_alter().
+ */
+function drupal_cms_olivero_theme_suggestions_form_alter(array &$suggestions, array $variables) {
+  if (isset($variables['element']['#theme']) && is_array($variables['element']['#theme'])) {
+    foreach ($variables['element']['#theme'] as $theme) {
+      if (strpos($theme, '_edit_') !== FALSE) {
+        $suggestions[] = 'form__' . str_replace('_edit_', '_', $theme);
+      }
+      $suggestions[] = 'form__' . $theme;
+    }
+  }
+}
diff --git a/drupal_cms_olivero/templates/block--primary-menu--id--search-form-primary.html.twig b/drupal_cms_olivero/templates/block--primary-menu--id--search-form-primary.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..4a310b5ea5045bc5404094041d752201ec93618b
--- /dev/null
+++ b/drupal_cms_olivero/templates/block--primary-menu--id--search-form-primary.html.twig
@@ -0,0 +1 @@
+{{ include('drupal_cms_olivero:search-narrow') }}
diff --git a/drupal_cms_olivero/templates/block--secondary-menu--id--search-form.html.twig b/drupal_cms_olivero/templates/block--secondary-menu--id--search-form.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..b77a2476c37b07f7cbfba209a0eb7fdd8d8be78b
--- /dev/null
+++ b/drupal_cms_olivero/templates/block--secondary-menu--id--search-form.html.twig
@@ -0,0 +1 @@
+{{ include('drupal_cms_olivero:search-wide') }}
diff --git a/recipes/drupal_cms_search/config/views.view.search.yml b/recipes/drupal_cms_search/config/views.view.search.yml
index 34191dd11c44d3b6102e2e4f0b1d1fa2ac5b63f2..b5ed94722b0d01d74f41e1a3c91ccab914308ee4 100644
--- a/recipes/drupal_cms_search/config/views.view.search.yml
+++ b/recipes/drupal_cms_search/config/views.view.search.yml
@@ -143,7 +143,7 @@ display:
           exposed: true
           expose:
             operator_id: search_api_fulltext_op
-            label: ''
+            label: 'Search keywords'
             description: ''
             use_operator: false
             operator: search_api_fulltext_op
diff --git a/recipes/drupal_cms_search/recipe.yml b/recipes/drupal_cms_search/recipe.yml
index 7f5c75fb672bf53cbd3389ad25941eae480657c6..fadda9eec72cbbe2f52333e35d46a2d83652ba7e 100644
--- a/recipes/drupal_cms_search/recipe.yml
+++ b/recipes/drupal_cms_search/recipe.yml
@@ -43,11 +43,45 @@ config:
         options:
           weight: 0
           region: content
-    # Add the search form to the header of the page.
+    # Add the desktop search form to the secondary menu of the page (there are
+    # two because of accessibility reasons).
     block.block.search_form:
       placeBlockInDefaultTheme:
         id: search_form
         # The region accepts an array keyed by theme name.
+        region:
+          olivero: secondary_menu
+          drupal_cms_olivero: secondary_menu
+        # A fallback used if no match found in the region array.
+        default_region: content
+        # Place the block before any blocks already in the region.
+        position: first
+        plugin: simple_search_form_block
+        settings:
+          label: 'Search form'
+          label_display: '0'
+          provider: simple_search_form
+          action_path: /search
+          get_parameter: text
+          input_type: search_api_autocomplete
+          search_api_autocomplete:
+            search_id: content_autocomplete
+            display: page_1
+            arguments: ''
+            filter: text
+          input_label: Search
+          input_label_display: invisible
+          input_placeholder: 'Enter search keywords'
+          input_css_classes: ''
+          submit_display: true
+          submit_label: Search
+          input_keep_value: false
+          preserve_url_query_parameters: { }
+    # Add the mobile search form to the primary menu region of the page.
+    block.block.search_form_primary:
+      placeBlockInDefaultTheme:
+        id: search_form_primary
+        # The region accepts an array keyed by theme name.
         region:
           olivero: primary_menu
           drupal_cms_olivero: primary_menu
@@ -73,7 +107,7 @@ config:
           input_placeholder: 'Enter search keywords'
           input_css_classes: ''
           submit_display: true
-          submit_label: Find
+          submit_label: Search
           input_keep_value: false
           preserve_url_query_parameters: { }
     user.role.anonymous: