diff --git a/webapp/components/generic/SearchHeading/SearchHeading.vue b/webapp/components/generic/SearchHeading/SearchHeading.vue
index fdd9357ab..6431ae66d 100644
--- a/webapp/components/generic/SearchHeading/SearchHeading.vue
+++ b/webapp/components/generic/SearchHeading/SearchHeading.vue
@@ -1,9 +1,7 @@
 <template>
-  <ds-flex-item class="search-heading">
-    <ds-heading soft size="h5">
-      {{ $t(`search.heading.${resourceType}`) }}
-    </ds-heading>
-  </ds-flex-item>
+  <ds-heading soft size="h5" class="search-heading">
+    {{ $t(`search.heading.${resourceType}`) }}
+  </ds-heading>
 </template>
 <script>
 export default {
@@ -14,13 +12,16 @@ export default {
 }
 </script>
 <style lang="scss">
-.search-heading {
-  display: flex;
-  flex-wrap: wrap;
-  font-weight: bold;
+.search-heading.ds-heading {
+  margin: -$space-x-small;
+  padding: $space-x-small;
+  background-color: $color-neutral-100;
+  font-weight: $font-weight-bold;
   cursor: default;
-  background-color: white;
-  margin: -8px;
-  padding: 8px;
+}
+
+// override styleguide styles
+.search-heading.ds-heading:first-child {
+  margin-top: -8px;
 }
 </style>
diff --git a/webapp/components/generic/SearchableInput/SearchableInput.spec.js b/webapp/components/generic/SearchableInput/SearchableInput.spec.js
index db314630f..994e617d6 100644
--- a/webapp/components/generic/SearchableInput/SearchableInput.spec.js
+++ b/webapp/components/generic/SearchableInput/SearchableInput.spec.js
@@ -32,81 +32,79 @@ describe('SearchableInput.vue', () => {
   }
 
   describe('mount', () => {
-    describe('testing custom functions', () => {
-      let select
+    let select, dropdown
 
+    beforeEach(() => {
+      select = wrapper.find('.ds-select')
+      select.trigger('focus')
+      select.element.value = 'abcd'
+    })
+
+    it('opens the dropdown when focused', () => {
+      expect(wrapper.find('.ds-select-dropdown').isVisible()).toBe(true)
+    })
+
+    it('closes the dropdown when blurred', () => {
+      select.trigger('blur')
+      expect(wrapper.find('.ds-select-is-open').exists()).toBe(false)
+    })
+
+    it('closes the dropdown when cleared with esc key', () => {
+      select.trigger('input')
+      select.trigger('keyup.esc')
+      expect(wrapper.find('.ds-select-is-open').exists()).toBe(false)
+    })
+
+    it('changes the unprocessedSearchInput as the value changes', () => {
+      select.trigger('input')
+      expect(select.element.value).toBe('abcd')
+    })
+
+    it('searches for the term when enter is pressed', async () => {
+      select.element.value = 'ab'
+      select.trigger('input')
+      select.trigger('keyup.enter')
+      await expect(wrapper.emitted().query[0]).toEqual(['ab'])
+    })
+
+    it('calls onDelete when the delete key is pressed', () => {
+      const spy = jest.spyOn(wrapper.vm, 'onDelete')
+      select.trigger('input')
+      select.trigger('keyup.delete')
+      expect(spy).toHaveBeenCalledTimes(1)
+    })
+
+    describe('navigating to resource', () => {
       beforeEach(() => {
+        propsData = { options: searchResults }
+        wrapper = Wrapper()
         select = wrapper.find('.ds-select')
         select.trigger('focus')
-        select.element.value = 'abcd'
       })
 
-      it('opens the select dropdown when focused on', () => {
-        expect(wrapper.find('.is-open').exists()).toBe(true)
-      })
-
-      it('opens the select dropdown and blurs after focused on', () => {
-        select.trigger('blur')
-        expect(wrapper.find('.is-open').exists()).toBe(false)
-      })
-
-      it('is clearable', () => {
+      it('pushes to post page', async () => {
+        select.element.value = 'Post'
         select.trigger('input')
-        select.trigger('keyup.esc')
-        expect(wrapper.find('.is-open').exists()).toBe(false)
-      })
-
-      it('changes the unprocessedSearchInput as the value changes', () => {
-        select.trigger('input')
-        expect(select.element.value).toBe('abcd')
-      })
-
-      it('searches for the term when enter is pressed', async () => {
-        select.element.value = 'ab'
-        select.trigger('input')
-        select.trigger('keyup.enter')
-        await expect(wrapper.emitted().query[0]).toEqual(['ab'])
-      })
-
-      it('calls onDelete when the delete key is pressed', () => {
-        const spy = jest.spyOn(wrapper.vm, 'onDelete')
-        select.trigger('input')
-        select.trigger('keyup.delete')
-        expect(spy).toHaveBeenCalledTimes(1)
-      })
-
-      describe('navigating to resource', () => {
-        beforeEach(() => {
-          propsData = { options: searchResults }
-          wrapper = Wrapper()
-          select = wrapper.find('.ds-select')
-          select.trigger('focus')
-        })
-
-        it('pushes to post page', async () => {
-          select.element.value = 'Post'
-          select.trigger('input')
-          const post = wrapper.find('.search-post')
-          post.trigger('click')
-          await Vue.nextTick().then(() => {
-            expect(mocks.$router.push).toHaveBeenCalledWith({
-              name: 'post-id-slug',
-              params: { id: 'post-by-jenny', slug: 'user-post-by-jenny' },
-            })
+        const post = wrapper.find('.search-post')
+        post.trigger('click')
+        await Vue.nextTick().then(() => {
+          expect(mocks.$router.push).toHaveBeenCalledWith({
+            name: 'post-id-slug',
+            params: { id: 'post-by-jenny', slug: 'user-post-by-jenny' },
           })
         })
+      })
 
-        it("pushes to user's profile", async () => {
-          select.element.value = 'Bob'
-          select.trigger('input')
-          const users = wrapper.findAll('.userinfo')
-          const bob = users.filter(item => item.text() === '@bob-der-baumeister')
-          bob.trigger('click')
-          await Vue.nextTick().then(() => {
-            expect(mocks.$router.push).toHaveBeenCalledWith({
-              name: 'profile-id-slug',
-              params: { id: 'u2', slug: 'bob-der-baumeister' },
-            })
+      it("pushes to user's profile", async () => {
+        select.element.value = 'Bob'
+        select.trigger('input')
+        const users = wrapper.findAll('.userinfo')
+        const bob = users.filter(item => item.text() === '@bob-der-baumeister')
+        bob.trigger('click')
+        await Vue.nextTick().then(() => {
+          expect(mocks.$router.push).toHaveBeenCalledWith({
+            name: 'profile-id-slug',
+            params: { id: 'u2', slug: 'bob-der-baumeister' },
           })
         })
       })
diff --git a/webapp/components/generic/SearchableInput/SearchableInput.vue b/webapp/components/generic/SearchableInput/SearchableInput.vue
index cc9269ecf..c92d22cbe 100644
--- a/webapp/components/generic/SearchableInput/SearchableInput.vue
+++ b/webapp/components/generic/SearchableInput/SearchableInput.vue
@@ -3,58 +3,48 @@
     class="searchable-input"
     aria-label="search"
     role="search"
-    :class="{
-      'is-active': isActive,
-      'is-open': isOpen,
-    }"
   >
-    <div class="field">
-      <div class="control">
-        <ds-button v-if="isActive" icon="close" ghost class="search-clear-btn" @click="clear" />
-        <ds-select
-          type="search"
-          icon="search"
-          v-model="searchValue"
-          :id="id"
-          label-prop="id"
-          :icon-right="isActive ? 'close' : null"
-          :options="options"
-          :loading="loading"
-          :filter="item => item"
-          :no-options-available="emptyText"
-          :auto-reset-search="!searchValue"
-          :placeholder="$t('search.placeholder')"
-          @click.capture.native="isOpen = true"
-          @focus.capture.native="onFocus"
-          @input.native="handleInput"
-          @keyup.enter.native="onEnter"
-          @keyup.delete.native="onDelete"
-          @keyup.esc.native="clear"
-          @blur.capture.native="onBlur"
-          @input.exact="onSelect"
+    <ds-select
+      type="search"
+      icon="search"
+      v-model="searchValue"
+      :id="id"
+      label-prop="id"
+      :icon-right="null"
+      :options="options"
+      :loading="loading"
+      :filter="item => item"
+      :no-options-available="emptyText"
+      :auto-reset-search="!searchValue"
+      :placeholder="$t('search.placeholder')"
+      @focus.capture.native="onFocus"
+      @input.native="handleInput"
+      @keyup.enter.native="onEnter"
+      @keyup.delete.native="onDelete"
+      @keyup.esc.native="clear"
+      @blur.capture.native="onBlur"
+      @input.exact="onSelect"
+    >
+      <template #option="{ option }">
+        <search-heading v-if="isFirstOfType(option)" :resource-type="option.__typename" />
+        <p
+          v-if="option.__typename === 'User'"
+          :class="{ 'option-with-heading': isFirstOfType(option) }"
         >
-          <template #option="{ option }">
-            <span v-if="isFirstOfType(option)" class="search-heading">
-              <search-heading :resource-type="option.__typename" />
-            </span>
-            <span
-              v-if="option.__typename === 'User'"
-              :class="{ 'option-with-heading': isFirstOfType(option), 'flex-span': true }"
-            >
-              <hc-user :user="option" :showPopover="false" />
-            </span>
-            <span
-              v-if="option.__typename === 'Post'"
-              :class="{ 'option-with-heading': isFirstOfType(option), 'flex-span': true }"
-            >
-              <search-post :option="option" />
-            </span>
-          </template>
-        </ds-select>
-      </div>
-    </div>
+          <hc-user :user="option" :showPopover="false" />
+        </p>
+        <p
+          v-if="option.__typename === 'Post'"
+          :class="{ 'option-with-heading': isFirstOfType(option) }"
+        >
+          <search-post :option="option" />
+        </p>
+      </template>
+    </ds-select>
+    <base-button v-if="isActive" icon="close" circle ghost size="small" @click="clear" />
   </div>
 </template>
+
 <script>
 import { isEmpty } from 'lodash'
 import SearchHeading from '~/components/generic/SearchHeading/SearchHeading.vue'
@@ -75,7 +65,6 @@ export default {
   },
   data() {
     return {
-      isOpen: false,
       searchValue: '',
       value: '',
       unprocessedSearchInput: '',
@@ -101,12 +90,10 @@ export default {
     },
     onFocus(event) {
       clearTimeout(this.searchProcess)
-      this.isOpen = true
     },
     handleInput(event) {
       clearTimeout(this.searchProcess)
       this.value = event.target ? event.target.value.replace(/\s+/g, ' ').trim() : ''
-      this.isOpen = true
       this.unprocessedSearchInput = this.value
       if (isEmpty(this.value) || this.value.replace(/\s+/g, '').length < 3) {
         return
@@ -120,7 +107,6 @@ export default {
      * TODO: on enter we should go to a dedicated search page!?
      */
     onEnter(event) {
-      this.isOpen = false
       clearTimeout(this.searchProcess)
       if (!this.pending) {
         this.previousSearchTerm = this.unprocessedSearchInput
@@ -137,7 +123,6 @@ export default {
       }
     },
     clear() {
-      this.isOpen = false
       this.unprocessedSearchInput = ''
       this.previousSearchTerm = ''
       this.searchValue = ''
@@ -146,11 +131,9 @@ export default {
     },
     onBlur(event) {
       this.searchValue = this.previousSearchTerm
-      this.isOpen = false
       clearTimeout(this.searchProcess)
     },
     onSelect(item) {
-      this.isOpen = false
       this.goToResource(item)
       this.$nextTick(() => {
         this.searchValue = this.previousSearchTerm
@@ -170,58 +153,32 @@ export default {
   },
 }
 </script>
+
 <style lang="scss">
 .searchable-input {
-  display: flex;
-  align-self: center;
-  width: 100%;
   position: relative;
-  $padding-left: $space-x-small;
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  .ds-form-item {
+    flex-basis: 100%;
+    margin-bottom: 0;
+  }
+
+  .ds-select-dropdown {
+    max-height: 70vh;
+    box-shadow: $box-shadow-x-large;
+  }
+
   .option-with-heading {
     margin-top: $space-x-small;
     padding-top: $space-xx-small;
   }
-  .flex-span {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .ds-select-dropdown {
-    transition: box-shadow 100ms;
-    max-height: 70vh;
-  }
-  &.is-open {
-    .ds-select-dropdown {
-      box-shadow: $box-shadow-x-large;
-    }
-  }
-  .ds-select-dropdown-message {
-    opacity: 0.5;
-    padding-left: $padding-left;
-  }
-  .search-clear-btn {
-    right: 0;
-    z-index: 10;
+
+  .base-button {
     position: absolute;
-    height: 100%;
-    width: 36px;
-    cursor: pointer;
-  }
-  .ds-select {
-    z-index: $z-index-dropdown + 1;
-  }
-  .ds-select-option-hover {
-    .ds-text-size-small,
-    .ds-text-size-small-x {
-      color: $text-color-soft;
-    }
-  }
-  .field {
-    width: 100%;
-    display: flex;
-    align-items: center;
-  }
-  .control {
-    width: 100%;
+    right: $space-xx-small;
   }
 }
 </style>