diff --git a/src/components/HeroSection.vue b/src/components/HeroSection.vue
index 9438320542..8d6a5f8abd 100644
--- a/src/components/HeroSection.vue
+++ b/src/components/HeroSection.vue
@@ -2,64 +2,35 @@
   <!-- eslint-disable vuejs-accessibility/no-autofocus -->
   <div class="hero">
     <div class="hero-center has-text-centered">
-      <!-- <div class="locale-block"><locale-selector /></div> -->
       <h1 class="title is-2 padding-bottom-normal">
         {{ $t('hero.title') }}
       </h1>
-      <h5 class="b-header">
+      <h2 class="title is-5 b-header">
         {{ $t('hero.subtitle') }}
-      </h5>
+      </h2>
       <form
-        class="hero_search-form margin-top-bigger"
+        class="hero-search__form margin-top-bigger"
         role="search"
         method="get"
         action="/search"
         @submit.prevent="onSubmit"
       >
-        <div class="is-hidden-touch centered-search-box">
-          <div class="field has-addons">
-            <div class="control mobile-input">
-              <input
-                id="searchTerm"
-                v-model.lazy="form.searchTerm"
-                required="required"
-                class="hero_search-input input is-large"
-                :aria-label="$t('hero.aria.search')"
-                autofocus
-                type="search"
-                name="q"
-                :placeholder="$t('hero.search.placeholder')"
-                autocapitalize="none"
-              />
-            </div>
-            <div class="control">
-              <button class="button is-primary big" title="Search">
-                {{ $t('hero.search.button') }}
-              </button>
-            </div>
-          </div>
-        </div>
-        <div class="is-hidden-desktop centered-search-box">
-          <div class="field has-addons">
-            <div class="control mobile-input">
-              <input
-                id="searchTerm"
-                v-model.lazy="form.searchTerm"
-                required="required"
-                class="input"
-                :aria-label="$t('hero.aria.search')"
-                type="search"
-                name="q"
-                :placeholder="$t('hero.search.placeholder')"
-                autocapitalize="none"
-              />
-            </div>
-            <div class="control">
-              <button class="button is-primary small" title="Search">
-                {{ $t('hero.search.button') }}
-              </button>
-            </div>
-          </div>
+        <div class="hero-search__control">
+          <input
+            id="searchTerm"
+            v-model.lazy="form.searchTerm"
+            required="required"
+            class="hero-search__input input"
+            :aria-label="$t('hero.aria.search')"
+            autofocus
+            type="search"
+            name="q"
+            :placeholder="$t('hero.search.placeholder')"
+            autocapitalize="none"
+          />
+          <button class="hero-search__button button is-primary" title="Search">
+            {{ $t('hero.search.button') }}
+          </button>
         </div>
         <div class="caption has-text-centered margin-top-big">
           <i18n path="hero.caption.content" tag="p">
@@ -131,53 +102,40 @@ $hero-height: 85vh;
   justify-content: center;
   flex-direction: column;
   min-height: $hero-height;
-
-  .hero_search-form {
+}
+.hero-center {
+  margin-top: auto;
+}
+.hero-search {
+  &__form {
     position: relative;
     width: 100%;
     padding: 0 0.5em 0 0.5em;
   }
-
-  .centered-search-box {
-    justify-content: center;
-  }
-
-  .field {
-    justify-content: center;
-  }
-
-  .hero_search-input {
-    width: 570px;
+  &__control {
+    display: flex;
   }
-
-  .mobile-input {
+  &__input {
+    margin-right: -1px;
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
     width: 100%;
-  }
-}
-
-.hero-center {
-  margin-top: auto;
-  .locale-block {
-    position: absolute;
-    top: 2.5rem;
-    right: 4rem;
-  }
-
-  @include tablet {
-    .locale-block {
-      top: 0rem;
-      left: auto;
-      right: 4rem;
+    max-width: 100%;
+    @include desktop {
+      width: 570px;
+      font-size: 1.75rem;
+      height: 5.063rem;
+      padding-left: 1.5rem;
     }
   }
-
-  /* Small only */
-  @include mobile {
-    height: auto;
-    .locale-block {
-      position: relative;
-      top: 0rem;
-      right: 0rem;
+  &__button {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    font-size: 1rem;
+    padding: 0.5rem 1.2rem;
+    @include desktop {
+      font-size: 1.75rem;
+      padding: 2.407rem 2.5rem;
     }
   }
 }
@@ -203,7 +161,7 @@ $hero-height: 85vh;
   object-fit: cover;
   object-position: left center;
 
-  @include tablet {
+  @include desktop {
     object-fit: initial;
     height: auto;
     padding: 0;
diff --git a/src/components/SearchGridForm.vue b/src/components/SearchGridForm.vue
index 4c57e9676e..b67f75b223 100644
--- a/src/components/SearchGridForm.vue
+++ b/src/components/SearchGridForm.vue
@@ -6,86 +6,54 @@
     class="search-form padding-normal"
     @submit.prevent="onSubmit"
   >
-    <div class="is-flex is-hidden-touch">
-      <button
-        v-if="!isFilterVisible"
-        class="button toggle-filter padding-vertical-normal padding-horizontal-big"
-        type="button"
-        @click.prevent="onToggleSearchGridFilter()"
-        @keyup.enter.prevent="onToggleSearchGridFilter()"
-      >
-        {{ $t('filters.title') }}
-      </button>
-      <div class="field has-addons search-input">
-        <div class="control has-icons-left margin-left-small">
-          <label for="searchInput">
-            <input
-              id="searchInput"
-              ref="search"
-              :aria-label="$t('browse-page.aria.search')"
-              required="required"
-              autofocus="true"
-              class="input is-medium"
-              type="search"
-              :placeholder="searchBoxPlaceholder"
-              :value="searchTermsModel"
-              @input="onInput"
-              @keyup.enter="onSubmit"
-            />
-          </label>
-          <span class="icon is-medium is-left margin-left-small">
-            <i class="icon search is-size-5" />
-          </span>
-        </div>
-        <div class="control">
-          <input
-            type="submit"
-            class="button is-primary"
-            :value="$t('browse-page.search-form.button')"
-            @click.prevent="onSubmit"
-            @keyup.enter.prevent="onSubmit"
+    <button
+      v-if="!isFilterVisible"
+      class="button filter-toggle"
+      type="button"
+      @click.prevent="onToggleSearchGridFilter()"
+      @keyup.enter.prevent="onToggleSearchGridFilter()"
+    >
+      {{ $t('filters.title') }}
+    </button>
+    <div
+      class="search-field field has-addons control search-control has-icons-left margin-left-small"
+    >
+      <label for="searchInput" class="search-field__label control label">
+        <input
+          id="searchInput"
+          ref="search"
+          :aria-label="$t('browse-page.aria.search')"
+          required="required"
+          autofocus="true"
+          class="search-field__input input"
+          type="search"
+          :placeholder="searchBoxPlaceholder"
+          :value="searchTermsModel"
+          @input="onInput"
+          @keyup.enter="onSubmit"
+        />
+      </label>
+      <span class="icon is-left">
+        <svg
+          viewBox="0 0 30 30"
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          class="icon__svg"
+        >
+          <path
+            d="M29.59 25.94l-5.842-5.842a1.405 1.405 0 00-.996-.41h-.955a12.128 12.128 0 002.578-7.5C24.375 5.455 18.92 0 12.187 0 5.455 0 0 5.455 0 12.188c0 6.732 5.455 12.187 12.188 12.187 2.83 0 5.431-.96 7.5-2.578v.955c0 .375.146.732.41.996l5.841 5.842a1.4 1.4 0 001.987 0l1.658-1.658c.55-.551.55-1.442.006-1.992zm-17.402-6.253a7.496 7.496 0 01-7.5-7.5c0-4.142 3.351-7.5 7.5-7.5 4.142 0 7.5 3.352 7.5 7.5 0 4.143-3.352 7.5-7.5 7.5z"
+            fill="currentColor"
           />
-        </div>
-      </div>
-    </div>
-    <div class="is-flex is-hidden-desktop">
-      <button
-        v-if="!isFilterVisible"
-        class="button small toggle-filter padding-small"
-        type="button"
-        @click.prevent="onToggleSearchGridFilter()"
-        @keyup.enter.prevent="onToggleSearchGridFilter()"
-      >
-        {{ $t('filters.title') }}
-      </button>
-      <div class="field has-addons search-input">
-        <div class="control has-icons-left margin-left-small">
-          <label for="searchInputMobile">
-            <input
-              id="searchInputMobile"
-              ref="search"
-              v-model="searchTermsModel"
-              :aria-label="$t('browse-page.aria.search')"
-              required="required"
-              autofocus="true"
-              class="input"
-              type="search"
-              :placeholder="searchBoxPlaceholder"
-              @keyup.enter="onSubmit"
-            />
-          </label>
-          <span class="icon is-left">
-            <i class="icon search is-size-6" />
-          </span>
-        </div>
-        <div class="control">
-          <input
-            type="submit"
-            class="button is-primary small"
-            :value="$t('browse-page.search-form.button')"
-          />
-        </div>
-      </div>
+        </svg>
+      </span>
+      <input
+        type="submit"
+        class="control button is-primary"
+        :value="$t('browse-page.search-form.button')"
+        @click.prevent="onSubmit"
+        @keyup.enter.prevent="onSubmit"
+      />
     </div>
   </form>
   <!-- eslint-enable -->
@@ -160,17 +128,18 @@ export default {
 <style lang="scss" scoped>
 @import 'bulma/sass/utilities/_all.sass';
 
-.toggle-filter {
-  height: 3.875rem;
+.filter-toggle {
   text-transform: none;
   font-size: 1rem;
-  border: 2px solid #d8d8d8;
-  box-sizing: border-box;
-  border-radius: 4px;
-  width: 68px;
-
-  &.small {
-    height: 2.5rem;
+  border-color: #d8d8d8;
+  padding: 0.5rem;
+  height: 2.5rem;
+  &:focus:not(:active) {
+    box-shadow: 0 0 0 0.125em rgba(0, 0, 0, 0.25);
+  }
+  @include desktop {
+    height: 3.875rem;
+    padding: 1rem 1.5rem;
   }
 }
 
@@ -180,35 +149,51 @@ export default {
   position: sticky;
   background-color: #f5f5f5;
   z-index: 10;
+  display: flex;
 }
 
-.search-input {
-  width: 70%;
-
-  @include touch {
-    width: 100%;
+.has-addons {
+  .control:first-child:not(:only-child),
+  .control:first-child:not(:only-child) .input {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    margin-right: -1px;
   }
-
-  .control:first-child {
-    width: 100%;
+  .button {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
   }
 }
-
-.button .icon {
-  height: auto;
-}
-
-.icon {
-  margin-top: auto;
-  margin-bottom: auto;
-  bottom: 0;
-  .search {
-    padding: 1.2rem;
-    max-height: 2.5rem;
-    max-width: 2.5rem;
-
-    @include touch {
-      padding: 0.8rem;
+.search-field {
+  display: flex;
+  width: 100%;
+  clear: both;
+  position: relative;
+  text-align: left;
+  @include desktop {
+    width: 70%;
+  }
+  .label {
+    flex: 1;
+    margin-bottom: 0;
+  }
+  .input {
+    font-size: 1rem;
+    height: 2.5rem;
+    @include desktop {
+      font-size: 1.43rem;
+      height: 3.875rem;
+    }
+  }
+  .icon {
+    top: calc(50% - 1.25em);
+  }
+  .button {
+    font-size: 1rem;
+    padding: 0.5rem calc(1rem + 0.2rem);
+    @include desktop {
+      font-size: 1.43rem;
+      padding: calc(2rem - 0.187rem) 2.5rem;
     }
   }
 }