diff --git a/webapp/components/ComponentSlider/ComponentSlider.story.js b/webapp/components/ComponentSlider/ComponentSlider.story.js
new file mode 100644
index 000000000..8a7bac923
--- /dev/null
+++ b/webapp/components/ComponentSlider/ComponentSlider.story.js
@@ -0,0 +1,128 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import ComponentSlider from './ComponentSlider.vue'
+import helpers from '~/storybook/helpers'
+
+helpers.init()
+
+// export const searchResults = [
+//   {
+//     id: 'post-by-jenny',
+//     __typename: 'Post',
+//     slug: 'user-post-by-jenny',
+//     title: 'User Post by Jenny',
+//     value: 'User Post by Jenny',
+//     shoutedCount: 0,
+//     commentsCount: 4,
+//     createdAt: '2019-11-13T03:03:16.155Z',
+//     author: {
+//       id: 'u3',
+//       name: 'Jenny Rostock',
+//       slug: 'jenny-rostock',
+//     },
+//   },
+//   {
+//     id: 'f48f00a0-c412-432f-8334-4276a4e15d1c',
+//     __typename: 'Post',
+//     slug: 'eum-quos-est-molestiae-enim-magni-consequuntur-sed-commodi-eos',
+//     title: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
+//     value: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
+//     shoutedCount: 0,
+//     commentsCount: 0,
+//     createdAt: '2019-11-13T03:00:45.478Z',
+//     author: {
+//       id: 'u6',
+//       name: 'Louie',
+//       slug: 'louie',
+//     },
+//   },
+//   {
+//     id: 'p7',
+//     __typename: 'Post',
+//     slug: 'this-is-post-7',
+//     title: 'This is post #7',
+//     value: 'This is post #7',
+//     shoutedCount: 1,
+//     commentsCount: 1,
+//     createdAt: '2019-11-13T03:00:23.098Z',
+//     author: {
+//       id: 'u6',
+//       name: 'Louie',
+//       slug: 'louie',
+//     },
+//   },
+//   {
+//     id: 'p12',
+//     __typename: 'Post',
+//     slug: 'this-is-post-12',
+//     title: 'This is post #12',
+//     value: 'This is post #12',
+//     shoutedCount: 0,
+//     commentsCount: 12,
+//     createdAt: '2019-11-13T03:00:23.098Z',
+//     author: {
+//       id: 'u6',
+//       name: 'Louie',
+//       slug: 'louie',
+//     },
+//   },
+//   {
+//     id: 'u1',
+//     __typename: 'User',
+//     avatar: {
+//       url:
+//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+//     },
+//     name: 'Peter Lustig',
+//     slug: 'peter-lustig',
+//   },
+//   {
+//     id: 'cdbca762-0632-4564-b646-415a0c42d8b8',
+//     __typename: 'User',
+//     avatar: {
+//       url:
+//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+//     },
+//     name: 'Herbert Schultz',
+//     slug: 'herbert-schultz',
+//   },
+//   {
+//     id: 'u2',
+//     __typename: 'User',
+//     avatar: {
+//       url:
+//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+//     },
+//     name: 'Bob der Baumeister',
+//     slug: 'bob-der-baumeister',
+//   },
+//   {
+//     id: '7b654f72-f4da-4315-8bed-39de0859754b',
+//     __typename: 'User',
+//     avatar: {
+//       url:
+//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+//     },
+//     name: 'Tonya Mohr',
+//     slug: 'tonya-mohr',
+//   },
+//   {
+//     id: 'Hashtag',
+//     __typename: 'Tag',
+//   },
+// ]
+
+storiesOf('ComponentSlider', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .add('standard', () => ({
+    components: { ComponentSlider },
+    store: helpers.store,
+    data: () => ({
+      // searchResults,
+    }),
+    template: `
+      <component-slider>
+      </component-slider>
+    `,
+  }))
diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
new file mode 100644
index 000000000..1d2c1b9bc
--- /dev/null
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <h2 class="subTitle">{{ $t('login.login') + ' XXX' }}</h2>
+    <!-- <slot /> -->
+    <!-- <div v-for="(item, index) in $slots.default" :key="index" :slot="item"> -->
+    <div v-for="(item, index) in $slots.default" :key="item.id">
+      {{ index }}
+      <slot v-bind:person="item" />
+      <!-- <slot :slot="item" /> -->
+    </div>
+    <base-button
+      style="float: right"
+      icon="check"
+      type="submit"
+      filled
+      :loading="false"
+      :disabled="false"
+    >
+      <!-- {{ $t('actions.save') }} -->
+      Next
+    </base-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ComponentSlider',
+  components: {
+    // LocaleSwitch,
+  },
+  // props: {
+  //   id: { type: String },
+  //   loading: { type: Boolean, default: false },
+  //   options: { type: Array, default: () => [] },
+  // },
+  data() {
+    return {
+      // links,
+      // metadata,
+      // searchValue: '',
+      // value: '',
+      // unprocessedSearchInput: '',
+      // searchProcess: null,
+      // previousSearchTerm: '',
+      // delay: 300,
+    }
+  },
+  computed: {
+    // emptyText() {
+    //   return this.isActive && !this.loading ? this.$t('search.failed') : this.$t('search.hint')
+    // },
+    // isActive() {
+    //   return !isEmpty(this.previousSearchTerm)
+    // },
+  },
+  methods: {
+    // isFirstOfType(option) {
+    //   return (
+    //     this.options.findIndex((o) => o === option) ===
+    //     this.options.findIndex((o) => o.__typename === option.__typename)
+    //   )
+    // },
+    // onFocus(event) {
+    //   clearTimeout(this.searchProcess)
+    // },
+    // handleInput(event) {
+    //   clearTimeout(this.searchProcess)
+    //   this.value = event.target ? event.target.value.replace(/\s+/g, ' ').trim() : ''
+    //   this.unprocessedSearchInput = this.value
+    //   if (isEmpty(this.value) || this.value.replace(/\s+/g, '').length < 3) {
+    //     return
+    //   }
+    //   this.searchProcess = setTimeout(() => {
+    //     this.previousSearchTerm = this.value
+    //     this.$emit('query', this.value)
+    //   }, this.delay)
+    // },
+    // /**
+    //  * TODO: on enter we should go to a dedicated search page!?
+    //  */
+    // onEnter(event) {
+    //   clearTimeout(this.searchProcess)
+    //   if (!this.loading) {
+    //     this.previousSearchTerm = this.unprocessedSearchInput
+    //     this.$emit('query', this.unprocessedSearchInput)
+    //   }
+    // },
+    // onDelete(event) {
+    //   clearTimeout(this.searchProcess)
+    //   const value = event.target ? event.target.value.trim() : ''
+    //   if (isEmpty(value)) {
+    //     this.clear()
+    //   } else {
+    //     this.handleInput(event)
+    //   }
+    // },
+    // clear() {
+    //   this.unprocessedSearchInput = ''
+    //   this.previousSearchTerm = ''
+    //   this.searchValue = ''
+    //   this.$emit('clearSearch')
+    //   clearTimeout(this.searchProcess)
+    // },
+    // onBlur(event) {
+    //   this.searchValue = this.previousSearchTerm
+    //   clearTimeout(this.searchProcess)
+    // },
+    // onSelect(item) {
+    //   this.goToResource(item)
+    //   this.$nextTick(() => {
+    //     this.searchValue = this.previousSearchTerm
+    //   })
+    // },
+    // isPost(item) {
+    //   return item.__typename === 'Post'
+    // },
+    // isTag(item) {
+    //   return item.__typename === 'Tag'
+    // },
+    // goToResource(item) {
+    //   this.$nextTick(() => {
+    //     if (!this.isTag(item)) {
+    //       this.$router.push({
+    //         name: this.isPost(item) ? 'post-id-slug' : 'profile-id-slug',
+    //         params: { id: item.id, slug: item.slug },
+    //       })
+    //     } else {
+    //       this.$router.push('?hashtag=' + item.id)
+    //     }
+    //   })
+    // },
+  },
+}
+</script>
+
+<style lang="scss">
+// .searchable-input {
+//   position: relative;
+//   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;
+//   }
+
+//   .base-button {
+//     position: absolute;
+//     right: $space-xx-small;
+//   }
+// }
+</style>
diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
new file mode 100644
index 000000000..fb855017a
--- /dev/null
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -0,0 +1,222 @@
+<template>
+  <div v-if="response === 'success'">
+    <transition name="ds-transition-fade">
+      <sweetalert-icon icon="success" />
+    </transition>
+    <ds-text align="center" bold color="success">
+      {{ $t('components.registration.create-user-account.success') }}
+    </ds-text>
+  </div>
+  <div v-else-if="response === 'error'">
+    <transition name="ds-transition-fade">
+      <sweetalert-icon icon="error" />
+    </transition>
+    <ds-text align="center" bold color="danger">
+      {{ $t('components.registration.create-user-account.error') }}
+    </ds-text>
+    <ds-text align="center">
+      {{ $t('components.registration.create-user-account.help') }}
+      <a :href="'mailto:' + supportEmail">{{ supportEmail }}</a>
+    </ds-text>
+    <ds-space centered>
+      <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
+    </ds-space>
+  </div>
+  <div v-else class="create-account-card">
+    <ds-space margin-top="large">
+      <ds-heading size="h3">
+        {{ $t('components.registration.create-user-account.title') }}
+      </ds-heading>
+    </ds-space>
+
+    <ds-form class="create-user-account" v-model="formData" :schema="formSchema" @submit="submit">
+      <template v-slot="{ errors }">
+        <ds-input
+          id="name"
+          model="name"
+          icon="user"
+          :label="$t('settings.data.labelName')"
+          :placeholder="$t('settings.data.namePlaceholder')"
+        />
+        <ds-input
+          id="about"
+          model="about"
+          type="textarea"
+          rows="3"
+          :label="$t('settings.data.labelBio')"
+          :placeholder="$t('settings.data.labelBio')"
+        />
+        <ds-input
+          id="password"
+          model="password"
+          type="password"
+          autocomplete="off"
+          :label="$t('settings.security.change-password.label-new-password')"
+        />
+        <ds-input
+          id="passwordConfirmation"
+          model="passwordConfirmation"
+          type="password"
+          autocomplete="off"
+          :label="$t('settings.security.change-password.label-new-password-confirm')"
+        />
+        <password-strength :password="formData.password" />
+
+        <ds-text>
+          <input
+            id="checkbox0"
+            type="checkbox"
+            v-model="termsAndConditionsConfirmed"
+            :checked="termsAndConditionsConfirmed"
+          />
+          <label for="checkbox0">
+            {{ $t('termsAndConditions.termsAndConditionsConfirmed') }}
+            <br />
+            <nuxt-link to="/terms-and-conditions">{{ $t('site.termsAndConditions') }}</nuxt-link>
+          </label>
+        </ds-text>
+        <ds-text>
+          <input id="checkbox1" type="checkbox" v-model="dataPrivacy" :checked="dataPrivacy" />
+          <label for="checkbox1">
+            {{ $t('components.registration.signup.form.data-privacy') }}
+            <br />
+            <nuxt-link to="/data-privacy">
+              {{ $t('site.data-privacy') }}
+            </nuxt-link>
+          </label>
+        </ds-text>
+        <ds-text>
+          <input id="checkbox2" type="checkbox" v-model="minimumAge" :checked="minimumAge" />
+          <label
+            for="checkbox2"
+            v-html="$t('components.registration.signup.form.minimum-age')"
+          ></label>
+        </ds-text>
+        <ds-text>
+          <input id="checkbox3" type="checkbox" v-model="noCommercial" :checked="noCommercial" />
+          <label
+            for="checkbox3"
+            v-html="$t('components.registration.signup.form.no-commercial')"
+          ></label>
+        </ds-text>
+        <ds-text>
+          <input id="checkbox4" type="checkbox" v-model="noPolitical" :checked="noPolitical" />
+          <label
+            for="checkbox4"
+            v-html="$t('components.registration.signup.form.no-political')"
+          ></label>
+        </ds-text>
+        <base-button
+          style="float: right"
+          icon="check"
+          type="submit"
+          filled
+          :loading="$apollo.loading"
+          :disabled="
+            errors ||
+            !termsAndConditionsConfirmed ||
+            !dataPrivacy ||
+            !minimumAge ||
+            !noCommercial ||
+            !noPolitical
+          "
+        >
+          {{ $t('actions.save') }}
+        </base-button>
+      </template>
+    </ds-form>
+  </div>
+</template>
+
+<script>
+import links from '~/constants/links'
+import PasswordStrength from '../Password/Strength'
+import { SweetalertIcon } from 'vue-sweetalert-icons'
+import PasswordForm from '~/components/utils/PasswordFormHelper'
+import { VERSION } from '~/constants/terms-and-conditions-version.js'
+import { SignupVerificationMutation } from '~/graphql/Registration.js'
+import emails from '~/constants/emails'
+
+export default {
+  components: {
+    PasswordStrength,
+    SweetalertIcon,
+  },
+  data() {
+    const passwordForm = PasswordForm({ translate: this.$t })
+    return {
+      links,
+      supportEmail: emails.SUPPORT,
+      formData: {
+        name: '',
+        about: '',
+        ...passwordForm.formData,
+      },
+      formSchema: {
+        name: {
+          type: 'string',
+          required: true,
+          min: 3,
+        },
+        about: {
+          type: 'string',
+          required: false,
+        },
+        ...passwordForm.formSchema,
+      },
+      disabled: true,
+      response: null,
+      // TODO: Our styleguide does not support checkmarks.
+      // Integrate termsAndConditionsConfirmed into `this.formData` once we
+      // have checkmarks available.
+      termsAndConditionsConfirmed: false,
+      dataPrivacy: false,
+      minimumAge: false,
+      noCommercial: false,
+      noPolitical: false,
+    }
+  },
+  props: {
+    nonce: { type: String, required: true },
+    email: { type: String, required: true },
+  },
+  methods: {
+    async submit() {
+      const { name, password, about } = this.formData
+      const { email, nonce } = this
+      const termsAndConditionsAgreedVersion = VERSION
+      const locale = this.$i18n.locale()
+      try {
+        await this.$apollo.mutate({
+          mutation: SignupVerificationMutation,
+          variables: {
+            name,
+            password,
+            about,
+            email,
+            nonce,
+            termsAndConditionsAgreedVersion,
+            locale,
+          },
+        })
+        this.response = 'success'
+        setTimeout(() => {
+          this.$emit('userCreated', {
+            email,
+            password,
+          })
+        }, 3000)
+      } catch (err) {
+        this.response = 'error'
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.create-account-image {
+  width: 50%;
+  max-width: 200px;
+}
+</style>
diff --git a/webapp/components/Registration/RegistrationSlider.story.js b/webapp/components/Registration/RegistrationSlider.story.js
new file mode 100644
index 000000000..7acce0bf0
--- /dev/null
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@@ -0,0 +1,127 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import RegistrationSlider from './RegistrationSlider.vue'
+import helpers from '~/storybook/helpers'
+
+helpers.init()
+
+// export const searchResults = [
+//   {
+//     id: 'post-by-jenny',
+//     __typename: 'Post',
+//     slug: 'user-post-by-jenny',
+//     title: 'User Post by Jenny',
+//     value: 'User Post by Jenny',
+//     shoutedCount: 0,
+//     commentsCount: 4,
+//     createdAt: '2019-11-13T03:03:16.155Z',
+//     author: {
+//       id: 'u3',
+//       name: 'Jenny Rostock',
+//       slug: 'jenny-rostock',
+//     },
+//   },
+//   {
+//     id: 'f48f00a0-c412-432f-8334-4276a4e15d1c',
+//     __typename: 'Post',
+//     slug: 'eum-quos-est-molestiae-enim-magni-consequuntur-sed-commodi-eos',
+//     title: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
+//     value: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
+//     shoutedCount: 0,
+//     commentsCount: 0,
+//     createdAt: '2019-11-13T03:00:45.478Z',
+//     author: {
+//       id: 'u6',
+//       name: 'Louie',
+//       slug: 'louie',
+//     },
+//   },
+//   {
+//     id: 'p7',
+//     __typename: 'Post',
+//     slug: 'this-is-post-7',
+//     title: 'This is post #7',
+//     value: 'This is post #7',
+//     shoutedCount: 1,
+//     commentsCount: 1,
+//     createdAt: '2019-11-13T03:00:23.098Z',
+//     author: {
+//       id: 'u6',
+//       name: 'Louie',
+//       slug: 'louie',
+//     },
+//   },
+//   {
+//     id: 'p12',
+//     __typename: 'Post',
+//     slug: 'this-is-post-12',
+//     title: 'This is post #12',
+//     value: 'This is post #12',
+//     shoutedCount: 0,
+//     commentsCount: 12,
+//     createdAt: '2019-11-13T03:00:23.098Z',
+//     author: {
+//       id: 'u6',
+//       name: 'Louie',
+//       slug: 'louie',
+//     },
+//   },
+//   {
+//     id: 'u1',
+//     __typename: 'User',
+//     avatar: {
+//       url:
+//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+//     },
+//     name: 'Peter Lustig',
+//     slug: 'peter-lustig',
+//   },
+//   {
+//     id: 'cdbca762-0632-4564-b646-415a0c42d8b8',
+//     __typename: 'User',
+//     avatar: {
+//       url:
+//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+//     },
+//     name: 'Herbert Schultz',
+//     slug: 'herbert-schultz',
+//   },
+//   {
+//     id: 'u2',
+//     __typename: 'User',
+//     avatar: {
+//       url:
+//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+//     },
+//     name: 'Bob der Baumeister',
+//     slug: 'bob-der-baumeister',
+//   },
+//   {
+//     id: '7b654f72-f4da-4315-8bed-39de0859754b',
+//     __typename: 'User',
+//     avatar: {
+//       url:
+//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+//     },
+//     name: 'Tonya Mohr',
+//     slug: 'tonya-mohr',
+//   },
+//   {
+//     id: 'Hashtag',
+//     __typename: 'Tag',
+//   },
+// ]
+
+storiesOf('RegistrationSlider', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .add('standard', () => ({
+    components: { RegistrationSlider },
+    store: helpers.store,
+    data: () => ({
+      // searchResults,
+    }),
+    template: `
+      <registration-slider />
+    `,
+  }))
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
new file mode 100644
index 000000000..3cb248931
--- /dev/null
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -0,0 +1,214 @@
+<template>
+  <section class="login-form">
+    <base-card>
+      <template #imageColumn>
+        <a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
+          <img class="image" alt="Welcome" src="/img/custom/welcome.svg" />
+        </a>
+      </template>
+      <h1 class="title">{{ $t('components.registration.signup.title', metadata) }}</h1>
+      <component-slider>
+        <registration-item-create-user-account />
+        <!-- <registration-item-create-user-account /> -->
+        <base-button
+          style="float: right"
+          icon="check"
+          type="submit"
+          filled
+          :loading="false"
+          :disabled="false"
+        >
+          Test!!!
+        </base-button>
+      </component-slider>
+      <!-- <form :disabled="pending" @submit.prevent="onSubmit">
+        <ds-input
+          v-model="form.email"
+          :disabled="pending"
+          :placeholder="$t('login.email')"
+          type="email"
+          name="email"
+          icon="envelope"
+        />
+        <div class="password-wrapper">
+          <ds-input
+            v-model="form.password"
+            :disabled="pending"
+            :placeholder="$t('login.password')"
+            icon="lock"
+            name="password"
+            class="password-field"
+            ref="password"
+            :type="showPassword ? 'text' : 'password'"
+          />
+          <span class="click-wrapper" @click="toggleShowPassword">
+            <span class="icon-wrapper" :data-test="iconName">
+              <base-icon class="toggle-icon" :name="iconName" />
+            </span>
+          </span>
+        </div>
+        <nuxt-link to="/password-reset/request">
+          {{ $t('login.forgotPassword') }}
+        </nuxt-link>
+        <base-button :loading="pending" filled name="submit" type="submit" icon="sign-in">
+          {{ $t('login.login') }}
+        </base-button>
+        <p>
+          {{ $t('login.no-account') }}
+          <nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
+        </p>
+      </form> -->
+      <template #topMenu>
+        <locale-switch offset="5" />
+      </template>
+    </base-card>
+  </section>
+</template>
+
+<script>
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+import ComponentSlider from '~/components/ComponentSlider/ComponentSlider'
+import RegistrationItemCreateUserAccount from './RegistrationItemCreateUserAccount'
+import links from '~/constants/links.js'
+import metadata from '~/constants/metadata.js'
+
+export default {
+  name: 'RegistrationSlider',
+  components: {
+    LocaleSwitch,
+    ComponentSlider,
+    RegistrationItemCreateUserAccount,
+  },
+  // props: {
+  //   id: { type: String },
+  //   loading: { type: Boolean, default: false },
+  //   options: { type: Array, default: () => [] },
+  // },
+  data() {
+    return {
+      links,
+      metadata,
+      // searchValue: '',
+      // value: '',
+      // unprocessedSearchInput: '',
+      // searchProcess: null,
+      // previousSearchTerm: '',
+      // delay: 300,
+    }
+  },
+  computed: {
+    // emptyText() {
+    //   return this.isActive && !this.loading ? this.$t('search.failed') : this.$t('search.hint')
+    // },
+    // isActive() {
+    //   return !isEmpty(this.previousSearchTerm)
+    // },
+  },
+  methods: {
+    // isFirstOfType(option) {
+    //   return (
+    //     this.options.findIndex((o) => o === option) ===
+    //     this.options.findIndex((o) => o.__typename === option.__typename)
+    //   )
+    // },
+    // onFocus(event) {
+    //   clearTimeout(this.searchProcess)
+    // },
+    // handleInput(event) {
+    //   clearTimeout(this.searchProcess)
+    //   this.value = event.target ? event.target.value.replace(/\s+/g, ' ').trim() : ''
+    //   this.unprocessedSearchInput = this.value
+    //   if (isEmpty(this.value) || this.value.replace(/\s+/g, '').length < 3) {
+    //     return
+    //   }
+    //   this.searchProcess = setTimeout(() => {
+    //     this.previousSearchTerm = this.value
+    //     this.$emit('query', this.value)
+    //   }, this.delay)
+    // },
+    // /**
+    //  * TODO: on enter we should go to a dedicated search page!?
+    //  */
+    // onEnter(event) {
+    //   clearTimeout(this.searchProcess)
+    //   if (!this.loading) {
+    //     this.previousSearchTerm = this.unprocessedSearchInput
+    //     this.$emit('query', this.unprocessedSearchInput)
+    //   }
+    // },
+    // onDelete(event) {
+    //   clearTimeout(this.searchProcess)
+    //   const value = event.target ? event.target.value.trim() : ''
+    //   if (isEmpty(value)) {
+    //     this.clear()
+    //   } else {
+    //     this.handleInput(event)
+    //   }
+    // },
+    // clear() {
+    //   this.unprocessedSearchInput = ''
+    //   this.previousSearchTerm = ''
+    //   this.searchValue = ''
+    //   this.$emit('clearSearch')
+    //   clearTimeout(this.searchProcess)
+    // },
+    // onBlur(event) {
+    //   this.searchValue = this.previousSearchTerm
+    //   clearTimeout(this.searchProcess)
+    // },
+    // onSelect(item) {
+    //   this.goToResource(item)
+    //   this.$nextTick(() => {
+    //     this.searchValue = this.previousSearchTerm
+    //   })
+    // },
+    // isPost(item) {
+    //   return item.__typename === 'Post'
+    // },
+    // isTag(item) {
+    //   return item.__typename === 'Tag'
+    // },
+    // goToResource(item) {
+    //   this.$nextTick(() => {
+    //     if (!this.isTag(item)) {
+    //       this.$router.push({
+    //         name: this.isPost(item) ? 'post-id-slug' : 'profile-id-slug',
+    //         params: { id: item.id, slug: item.slug },
+    //       })
+    //     } else {
+    //       this.$router.push('?hashtag=' + item.id)
+    //     }
+    //   })
+    // },
+  },
+}
+</script>
+
+<style lang="scss">
+// .searchable-input {
+//   position: relative;
+//   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;
+//   }
+
+//   .base-button {
+//     position: absolute;
+//     right: $space-xx-small;
+//   }
+// }
+</style>