diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue
new file mode 100644
index 000000000..6c6df1af7
--- /dev/null
+++ b/src/components/Autocomplete.vue
@@ -0,0 +1,80 @@
+<template>
+  <UnnnicSelectSmart
+    ref="autocomplete"
+    :value="[
+      finalOptions.find(({ value: insideValue }) => insideValue === value),
+    ]"
+    @input="$emit('input', $event[0].value)"
+    :options="finalOptions"
+    orderedByIndex
+    autocomplete
+    autocompleteClearOnFocus
+    v-bind="$attrs"
+  />
+</template>
+
+<script>
+import { formatters } from '../utils';
+
+export default {
+  props: {
+    value: String,
+
+    placeholder: {
+      type: String,
+      default: '',
+    },
+
+    options: Array,
+
+    entityFormat: Boolean,
+  },
+
+  data() {
+    return {
+      createdValue: '',
+    };
+  },
+
+  computed: {
+    finalOptions() {
+      const options = [{ value: '', label: this.placeholder }].concat(
+        this.options.map((value) => ({ value, label: value })),
+      );
+
+      if (this.createdValue) {
+        options.push({ value: this.createdValue, label: this.createdValue });
+      }
+
+      return options;
+    },
+  },
+
+  methods: {
+    formatOnBlur(event) {
+      if (this.entityFormat) {
+        let { value } = event.target;
+
+        value =
+          formatters.bothubItemKey()(value.toLowerCase()) || this.createdValue;
+
+        this.$emit('input', value);
+
+        this.createdValue = value;
+      }
+    },
+  },
+
+  mounted() {
+    this.$refs.autocomplete.$el
+      .querySelector('input')
+      .addEventListener('blur', this.formatOnBlur);
+  },
+
+  beforeDestroy() {
+    this.$refs.autocomplete.$el
+      .querySelector('input')
+      .removeEventListener('blur', this.formatOnBlur);
+  },
+};
+</script>
diff --git a/src/components/SelectLanguage.vue b/src/components/SelectLanguage.vue
new file mode 100644
index 000000000..44d50fd2d
--- /dev/null
+++ b/src/components/SelectLanguage.vue
@@ -0,0 +1,44 @@
+<template>
+  <UnnnicSelectSmart
+    :value="[languageList.find(({ value }) => value === language)]"
+    @input="$emit('input', $event[0].value)"
+    :options="languageList"
+    orderedByIndex
+    v-bind="$attrs"
+  />
+</template>
+
+<script>
+import { LANGUAGES } from '@/utils';
+
+export default {
+  model: {
+    prop: 'language',
+  },
+
+  props: {
+    language: String,
+
+    placeholder: {
+      type: String,
+      default: '',
+    },
+  },
+
+  computed: {
+    languageList() {
+      return [
+        {
+          value: '',
+          label: this.placeholder,
+        },
+      ].concat(
+        Object.keys(LANGUAGES).map((lang) => ({
+          value: lang,
+          label: LANGUAGES[lang],
+        })),
+      );
+    },
+  },
+};
+</script>
diff --git a/src/components/example/NewExampleForm.vue b/src/components/example/NewExampleForm.vue
index f0ccc38ab..2eb581979 100644
--- a/src/components/example/NewExampleForm.vue
+++ b/src/components/example/NewExampleForm.vue
@@ -38,18 +38,11 @@
             </div>
 
             <UnnnicFormElement :message="errors.intent">
-              <UnnnicAutocomplete
+              <Autocomplete
                 v-model="intent"
-                :data="filteredData"
+                :options="filteredData"
                 :placeholder="$t('webapp.example.intent')"
-                :openWithFocus="true"
-                @focus="onIntentInputClick"
-                @blur="onIntentInputClick"
-                :iconRight="
-                  isIntentInputActive
-                    ? 'arrow-button-up-1'
-                    : 'arrow-button-down-1'
-                "
+                entityFormat
               />
             </UnnnicFormElement>
           </div>
@@ -58,19 +51,10 @@
             :label="$t('webapp.create_repository.language_placeholder')"
             :message="errors.intent"
           >
-            <UnnnicSelect
-              :placeholder="$t('webapp.translate.languages_select')"
+            <SelectLanguage
               v-model="language"
-            >
-              <option
-                v-for="[option, label] in languageList"
-                :key="option"
-                :value="option"
-                @select="language = option"
-              >
-                {{ label }}
-              </option>
-            </UnnnicSelect>
+              :placeholder="$t('webapp.translate.languages_select')"
+            />
           </UnnnicFormElement>
         </div>
 
@@ -125,6 +109,8 @@ import NewEntitiesInput from '@/components/inputs/EntitiesInput/NewEntitiesInput
 import { mapActions, mapGetters } from 'vuex';
 import { formatters, LANGUAGES } from '@/utils';
 import InputWithHightlights from '../InputWithHightlights';
+import SelectLanguage from '../SelectLanguage.vue';
+import Autocomplete from '../Autocomplete.vue';
 
 export default {
   name: 'NewExampleForm',
@@ -132,6 +118,8 @@ export default {
     ExampleTextWithHighlightedEntitiesInput,
     NewEntitiesInput,
     InputWithHightlights,
+    SelectLanguage,
+    Autocomplete,
   },
   props: {
     repository: {
@@ -151,7 +139,6 @@ export default {
       entitiesList: [],
       blockedNextStepTutorial: false,
       hideDropdown: true,
-      isIntentInputActive: false,
       isLanguageInputActive: false,
       alertSuccess: false,
       addEntity: false,
@@ -165,9 +152,7 @@ export default {
       return this.isValid && !this.submitting;
     },
     filteredData() {
-      return (this.repository.intents_list || []).filter((intent) =>
-        intent.startsWith(this.intent.toLowerCase()),
-      );
+      return this.repository.intents_list || [];
     },
     validationErrors() {
       const errors = [];
@@ -209,9 +194,6 @@ export default {
         entities,
       };
     },
-    languageList() {
-      return Object.keys(LANGUAGES).map((lang) => [lang, LANGUAGES[lang]]);
-    },
   },
   watch: {
     async intent() {
@@ -294,9 +276,6 @@ export default {
       }
       return false;
     },
-    onIntentInputClick() {
-      this.isIntentInputActive = !this.isIntentInputActive;
-    },
   },
 };
 </script>
diff --git a/src/components/form-generator/inputs/ChoiceInput.vue b/src/components/form-generator/inputs/ChoiceInput.vue
index 82a33f615..9259a59d4 100644
--- a/src/components/form-generator/inputs/ChoiceInput.vue
+++ b/src/components/form-generator/inputs/ChoiceInput.vue
@@ -1,103 +1,111 @@
-<template>
-  <fetch-choice-input
-    v-if="fetch"
-    :fetch="fetch"
-    :label-placeholder="labelPlaceholder"
-    v-model="value"
-    @input="update()"/>
-  <unnnic-autocomplete
-    v-else-if="compact"
-    v-model="value"
-    :placeholder="labelPlaceholder"
-    :custom-formatter="formatter"
-    :data="filteredChoices"
-    dropdown-position="bottom"
-    openWithFocus
-    @input="updateInput"
-    @choose="selectOption"/>
-  <unnnic-select
-    v-else
-    v-model="value"
-    @input="update()">
-    <option
-      v-for="choice in choices"
-      :key="choice.value"
-      :value="choice.value">{{ choice.display_name }}</option>
-  </unnnic-select>
-</template>
-
-<script>
-import { formatters } from '@/utils';
-import FetchChoiceInput from './FetchChoiceInput';
-
-export default {
-  components: {
-    FetchChoiceInput,
-  },
-  props: {
-    choices: {
-      type: Array,
-      default: () => [],
-    },
-    fetch: {
-      type: Function,
-      default: null,
-    },
-    initialData: {
-      type: [Array, String],
-      default: null,
-    },
-    compact: {
-      type: Boolean,
-      default: null,
-    },
-    labelPlaceholder: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      value: this.initialData,
-      formatter: choice => choice.display_name,
-    };
-  },
-  computed: {
-    filteredChoices() {
-      if (!this.value || this.value.length === 0) { return this.choices; }
-      const search = new RegExp(formatters.bothubItemKey()(this.value.toLowerCase()));
-      return this.choices
-        .filter(
-          choice => search.test(formatters.bothubItemKey()(choice.display_name.toLowerCase())),
-        );
-    },
-  },
-  mounted() {
-    this.update();
-  },
-  methods: {
-    updateInput() {
-      const search = formatters.bothubItemKey()(this.value.toLowerCase());
-      const option = this.choices.find(
-        choice => formatters.bothubItemKey()(choice.display_name.toLowerCase())
-                    === search,
-      );
-      if (option) {
-        this.$emit('input', option.value);
-      } else {
-        this.$emit('input', '');
-      }
-    },
-    selectOption(option) {
-      if (option) {
-        this.$emit('input', option.value);
-      } else {
-        this.$emit('input', '');
-      }
-    },
-    update() {
-      this.$emit('input', this.value);
-    },
-  },
-};
-</script>
+<template>
+  <fetch-choice-input
+    v-if="fetch"
+    :fetch="fetch"
+    :label-placeholder="labelPlaceholder"
+    v-model="value"
+    @input="update()"/>
+  <unnnic-autocomplete
+    v-else-if="compact"
+    v-model="value"
+    :placeholder="labelPlaceholder"
+    :custom-formatter="formatter"
+    :data="filteredChoices"
+    dropdown-position="bottom"
+    openWithFocus
+    @input="updateInput"
+    @choose="selectOption"/>
+  <unnnic-select-smart
+    v-else
+    :value="choicesSelectSmart.value"
+    :options="choicesSelectSmart.options"
+    @input="update($event[0].value)"
+  ></unnnic-select-smart>
+</template>
+
+<script>
+import { formatters, useSelectSmart } from '@/utils';
+import FetchChoiceInput from './FetchChoiceInput';
+
+export default {
+  components: {
+    FetchChoiceInput,
+  },
+  props: {
+    choices: {
+      type: Array,
+      default: () => [],
+    },
+    fetch: {
+      type: Function,
+      default: null,
+    },
+    initialData: {
+      type: [Array, String],
+      default: null,
+    },
+    compact: {
+      type: Boolean,
+      default: null,
+    },
+    labelPlaceholder: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      value: this.initialData,
+      formatter: choice => choice.display_name,
+    };
+  },
+  computed: {
+    filteredChoices() {
+      if (!this.value || this.value.length === 0) { return this.choices; }
+      const search = new RegExp(formatters.bothubItemKey()(this.value.toLowerCase()));
+      return this.choices
+        .filter(
+          choice => search.test(formatters.bothubItemKey()(choice.display_name.toLowerCase())),
+        );
+    },
+
+    choicesSelectSmart() {
+      return useSelectSmart({
+        from: this.choices,
+        value: 'value',
+        label: 'display_name',
+        placeholder: '',
+        currentValue: this.value,
+      });
+    },
+  },
+  mounted() {
+    this.update();
+  },
+  methods: {
+    updateInput() {
+      const search = formatters.bothubItemKey()(this.value.toLowerCase());
+      const option = this.choices.find(
+        choice => formatters.bothubItemKey()(choice.display_name.toLowerCase())
+                    === search,
+      );
+      if (option) {
+        this.$emit('input', option.value);
+      } else {
+        this.$emit('input', '');
+      }
+    },
+    selectOption(option) {
+      if (option) {
+        this.$emit('input', option.value);
+      } else {
+        this.$emit('input', '');
+      }
+    },
+    update(value) {
+      this.value = value;
+      this.$emit('input', this.value);
+    },
+  },
+};
+</script>
diff --git a/src/components/inputs/EntitiesInput/NewEntitiesInput.vue b/src/components/inputs/EntitiesInput/NewEntitiesInput.vue
index fee810256..ee0679cc0 100644
--- a/src/components/inputs/EntitiesInput/NewEntitiesInput.vue
+++ b/src/components/inputs/EntitiesInput/NewEntitiesInput.vue
@@ -73,16 +73,16 @@
       :closeIcon="false"
     >
       <div slot="message" class="modal-header text-left">
-        <unnnic-autocomplete
-            :label="$t('webapp.trainings.add_entity_field_label')"
-            ref="entityInputField"
+        <UnnnicFormElement
+          :label="$t('webapp.trainings.add_entity_field_label')"
+        >
+          <Autocomplete
             v-model="entity"
-            :data="filteredEntities"
-            :openWithFocus="true"
-            :iconRight="isEntityInputActive ? 'arrow-button-up-1' : 'arrow-button-down-1'"
-            @focus="onInputClick()"
-            @blur="onInputClick()"
-        />
+            ref="entityInputField"
+            :options="filteredEntities"
+            entityFormat
+          />
+        </UnnnicFormElement>
         <div>
           <unnnic-label  class="mt-5" :label="$t('webapp.trainings.add_entity_checkbox_title')" />
           <div class="words-wrapper">
@@ -167,7 +167,6 @@ export default {
       isOpen: false,
       entityModal: false,
       entity: '',
-      isEntityInputActive: false,
       selectedEntities: []
     };
   },
@@ -282,9 +281,6 @@ export default {
       });
       this.entities = this.entities.filter(value => !!value);
     },
-    onInputClick() {
-      this.isEntityInputActive = !this.isEntityInputActive
-    },
     onWordSelected(event) {
       const temporaryEntityId = generateTemporaryId();
       const start = this.text.indexOf(event.text);
diff --git a/src/components/repository/CreateRepository/DefinitionsTab.vue b/src/components/repository/CreateRepository/DefinitionsTab.vue
index 41ccf86e1..fa0b6b911 100644
--- a/src/components/repository/CreateRepository/DefinitionsTab.vue
+++ b/src/components/repository/CreateRepository/DefinitionsTab.vue
@@ -6,26 +6,15 @@
         class="create-repository__definitions__wrapper__fields"
       >
         <UnnnicLabel :label="$t('webapp.create_repository.language_label')" />
-        <UnnnicSelect
-          class="unnic--clickable"
-          size="sm"
-          :placeholder="$t('webapp.create_repository.language_placeholder')"
-          :value="language"
+
+        <SelectLanguage
+          :language="language"
           @input="$emit('update:language', $event)"
-          search
-          :searchPlaceholder="
-            $t('webapp.create_repository.language_placeholder_search')
-          "
-        >
-          <option
-            v-for="language in languages"
-            :value="language.value"
-            :key="language.id"
-            size="sm"
-          >
-            {{ language.title }}
-          </option>
-        </UnnnicSelect>
+          :placeholder="$t('webapp.create_repository.language_placeholder')"
+          size="sm"
+          autocomplete
+          autocompleteClearOnFocus
+        />
       </section>
 
       <div
@@ -125,8 +114,8 @@
 
 <script>
 import { mapActions } from 'vuex';
-import { LANGUAGES } from '@/utils/index';
 import Loading from '@/components/shared/Loading';
+import SelectLanguage from '../../SelectLanguage.vue';
 
 export default {
   name: 'DefinitionsTab',
@@ -139,6 +128,7 @@ export default {
   },
   components: {
     Loading,
+    SelectLanguage,
   },
   data() {
     return {
@@ -150,15 +140,6 @@ export default {
   mounted() {
     this.getCategories();
   },
-  computed: {
-    languages() {
-      return Object.keys(LANGUAGES).map((lang, index) => ({
-        id: index + 1,
-        title: LANGUAGES[lang],
-        value: lang,
-      }));
-    },
-  },
   methods: {
     ...mapActions(['getAllCategories']),
     async getCategories() {
diff --git a/src/components/repository/RequestGenerator.vue b/src/components/repository/RequestGenerator.vue
index f801c992e..ce661221b 100644
--- a/src/components/repository/RequestGenerator.vue
+++ b/src/components/repository/RequestGenerator.vue
@@ -4,19 +4,10 @@
       :label="$t('webapp.analyze_text.language')"
       class="form-element"
     >
-      <UnnnicSelect
-        :placeholder="$t('webapp.analyze_text.language')"
+      <SelectLanguage
         v-model="language"
-      >
-        <option
-          v-for="[option, label] in languageList"
-          :key="option"
-          :value="option"
-          @select="language = option"
-        >
-          {{ label }}
-        </option>
-      </UnnnicSelect>
+        :placeholder="$t('webapp.analyze_text.language')"
+      />
     </UnnnicFormElement>
 
     <UnnnicFormElement
@@ -61,9 +52,11 @@
 <script>
 import HighlightedCode from '@/components/shared/HighlightedCode';
 import { LANGUAGES } from '@/utils';
+import SelectLanguage from '../SelectLanguage.vue';
 
 const components = {
   HighlightedCode,
+  SelectLanguage,
 };
 
 export default {
@@ -88,9 +81,6 @@ export default {
     };
   },
   computed: {
-    languageList() {
-      return Object.keys(LANGUAGES).map((lang) => [lang, LANGUAGES[lang]]);
-    },
     text_escaped() {
       return {
         curl: this.text.replace(/\\/g, '\\\\').replace(/"/g, '\\"'),
diff --git a/src/components/repository/home/HomeIntelligenceFilter.vue b/src/components/repository/home/HomeIntelligenceFilter.vue
index 8db1acaee..174286c3e 100644
--- a/src/components/repository/home/HomeIntelligenceFilter.vue
+++ b/src/components/repository/home/HomeIntelligenceFilter.vue
@@ -39,20 +39,12 @@
       </div>
       <div class="intelligence-filter__container__languages">
         <h3>{{ $t('webapp.home.intelligence_filter.languages') }}</h3>
-        <UnnnicSelect
-          :placeholder="$t('webapp.translate.languages_select')"
+
+        <SelectLanguage
           v-model="language"
+          :placeholder="$t('webapp.translate.languages_select')"
           size="sm"
-        >
-          <option
-            v-for="[option, label] in languageList"
-            :key="option"
-            :value="option"
-            @select="language = option"
-          >
-            {{ label }}
-          </option>
-        </UnnnicSelect>
+        />
       </div>
     </section>
   </div>
@@ -60,16 +52,21 @@
 
 <script>
 import { mapActions } from 'vuex';
-import { LANGUAGES } from '@/utils';
+import SelectLanguage from '../../SelectLanguage.vue';
 
 export default {
   name: 'HomeIntelligenceFilter',
+
+  components: {
+    SelectLanguage,
+  },
+
   data() {
     return {
       recommended: false,
       mostUsed: false,
       categories: [],
-      language: null,
+      language: '',
     };
   },
   watch: {
@@ -94,9 +91,6 @@ export default {
         {},
       );
     },
-    languageList() {
-      return Object.keys(LANGUAGES).map((lang) => [lang, LANGUAGES[lang]]);
-    },
   },
   mounted() {
     this.getCategories();
diff --git a/src/components/repository/phrase-suggestion/AddSentenceForm.vue b/src/components/repository/phrase-suggestion/AddSentenceForm.vue
index 8eb4b2a09..2ec2a747d 100644
--- a/src/components/repository/phrase-suggestion/AddSentenceForm.vue
+++ b/src/components/repository/phrase-suggestion/AddSentenceForm.vue
@@ -24,16 +24,11 @@
         :label="$t('webapp.trainings.intent')"
         :message="errors.intent"
       >
-        <UnnnicAutocomplete
+        <Autocomplete
           v-model="intent"
-          :data="filteredData"
+          :options="filteredData"
           :placeholder="$t('webapp.example.intent')"
-          :openWithFocus="true"
-          @focus="onInputClick('intent')"
-          @blur="onInputClick('intent')"
-          :iconRight="
-            isIntentInputActive ? 'arrow-button-up-1' : 'arrow-button-down-1'
-          "
+          entityFormat
         />
       </UnnnicFormElement>
 
@@ -42,19 +37,10 @@
         :label="$t('webapp.create_repository.language_placeholder')"
         :message="errors.intent"
       >
-        <UnnnicSelect
-          :placeholder="$t('webapp.translate.languages_select')"
+        <SelectLanguage
           v-model="language"
-        >
-          <option
-            v-for="[option, label] in languageList"
-            :key="option"
-            :value="option"
-            @select="language = option"
-          >
-            {{ label }}
-          </option>
-        </UnnnicSelect>
+          :placeholder="$t('webapp.translate.languages_select')"
+        />
       </UnnnicFormElement>
 
       <UnnnicFormElement :message="errors.entities">
@@ -101,6 +87,8 @@ import { mapActions, mapGetters } from 'vuex';
 import { formatters, LANGUAGES } from '@/utils';
 import InputWithHightlights from '../../InputWithHightlights';
 import { get } from 'lodash';
+import SelectLanguage from '../../SelectLanguage.vue';
+import Autocomplete from '../../Autocomplete.vue';
 
 export default {
   name: 'AddSentenceForm',
@@ -108,6 +96,8 @@ export default {
     ExampleTextWithHighlightedEntitiesInput,
     NewEntitiesInput,
     InputWithHightlights,
+    SelectLanguage,
+    Autocomplete,
   },
   props: {
     repository: {
@@ -127,8 +117,6 @@ export default {
       entitiesList: [],
       blockedNextStepTutorial: false,
       hideDropdown: true,
-      isIntentInputActive: false,
-      isLanguageInputActive: false,
     };
   },
   computed: {
@@ -139,9 +127,7 @@ export default {
       return this.isValid && !this.submitting;
     },
     filteredData() {
-      return (this.repository.intents_list || []).filter((intent) =>
-        intent.startsWith(this.intent.toLowerCase()),
-      );
+      return this.repository.intents_list || [];
     },
     validationErrors() {
       const errors = [];
@@ -183,9 +169,6 @@ export default {
         entities,
       };
     },
-    languageList() {
-      return Object.keys(LANGUAGES).map((lang) => [lang, LANGUAGES[lang]]);
-    },
   },
   watch: {
     async intent() {
@@ -244,12 +227,6 @@ export default {
 
       return false;
     },
-    onInputClick(target) {
-      if (target === 'intent')
-        this.isIntentInputActive = !this.isIntentInputActive;
-      if (target === 'language')
-        this.isLanguageInputActive = !this.isLanguageInputActive;
-    },
   },
 };
 </script>
diff --git a/src/components/repository/repository-evaluate/example/SentenceFilters.vue b/src/components/repository/repository-evaluate/example/SentenceFilters.vue
index 035126318..6cf863865 100644
--- a/src/components/repository/repository-evaluate/example/SentenceFilters.vue
+++ b/src/components/repository/repository-evaluate/example/SentenceFilters.vue
@@ -48,22 +48,11 @@
           />
         </div>
         <div v-if="languageFilter && languages">
-          <UnnnicSelect
-            :placeholder="$t('webapp.evaluate.all_languages')"
-            v-model="language"
-          >
-            <option
-              v-for="language in languages"
-              :key="language.id"
-              :selected="language.value === language"
-              :value="language.value"
-            >
-              {{ language.title }}
-            </option>
-            <option :value="null">
-              {{ $t('webapp.home.all_languages') }}
-            </option>
-          </UnnnicSelect>
+          <UnnnicSelectSmart
+            :value="languagesSelectSmart.value"
+            :options="languagesSelectSmart.options"
+            @input="language = $event[0].value"
+          />
         </div>
 
         <BField
@@ -85,7 +74,7 @@
   </div>
 </template>
 <script>
-import { formatters, LANGUAGES } from '@/utils/index';
+import { formatters, LANGUAGES, useSelectSmart } from '@/utils/index';
 import { mapGetters } from 'vuex';
 import _ from 'lodash';
 
@@ -128,7 +117,7 @@ export default {
       intent: '',
       entity: '',
       versionName: '',
-      language: null,
+      language: '',
       setTimeoutId: null,
       errors: {},
       isIntentInputActive: false,
@@ -160,6 +149,17 @@ export default {
         }),
       );
     },
+
+    languagesSelectSmart() {
+      return useSelectSmart({
+        from: this.languages,
+        value: 'value',
+        label: 'title',
+        placeholder: this.$t('webapp.evaluate.all_languages'),
+        currentValue: this.language,
+      });
+    },
+
     filterIntents() {
       if (this.intents !== null) {
         return this.intents.filter(
diff --git a/src/components/repository/sidebar/SideBar.vue b/src/components/repository/sidebar/SideBar.vue
index 547966270..b8704e1c9 100644
--- a/src/components/repository/sidebar/SideBar.vue
+++ b/src/components/repository/sidebar/SideBar.vue
@@ -67,29 +67,16 @@
           </div>
         </div>
 
-        <UnnnicSelect
+        <UnnnicSelectSmart
           v-if="repositoryType === 'classifier'"
-          :selected="getNameVersion"
           v-show="collapse"
-          class="unnic--clickable sidebar-wrapper__header__select"
+          :value="allVersionsSelectSmart.value"
+          :options="allVersionsSelectSmart.options"
+          @input="selectedVersion = $event[0].value"
+          orderedByIndex
           size="sm"
-          hasCloudyColor
-          :placeholder="getNameVersion"
-          v-model="selectedVersion"
-          :optionsHeader="optionsHeader"
-        >
-          <option
-            v-for="(version, index) in allVersions"
-            :key="index"
-            size="sm"
-          >
-            {{ version.name }}
-          </option>
-          <div
-            slot="header"
-            class="sidebar-wrapper__header__versions"
-          ></div>
-        </UnnnicSelect>
+          class="unnic--clickable sidebar-wrapper__header__select"
+        />
       </section>
       <section class="sidebar-wrapper__body">
         <UnnnicSidebarMenu v-if="repositoryType === 'content'">
@@ -468,6 +455,7 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
 import CustomIcon from '@/components/shared/CustomIcon';
+import { useSelectSmart } from '../../../utils';
 
 export default {
   name: 'SideBar',
@@ -485,17 +473,6 @@ export default {
       allVersions: [],
       dropSelect: '',
       selectedVersion: this.getNameVersion,
-      optionsHeader: [
-        {
-          text: this.$t('webapp.dashboard.all_versions'),
-          click: () =>
-            this.routerHandle('repository-settings', {
-              query: {
-                tab: 'versions',
-              },
-            }),
-        },
-      ],
     };
   },
   computed: {
@@ -514,6 +491,20 @@ export default {
       if (!this.getCurrentRepository) return null;
       return this.getCurrentRepository.repository_type;
     },
+
+    allVersionsSelectSmart() {
+      return useSelectSmart({
+        from: [
+          {
+            name: this.$t('webapp.dashboard.all_versions'),
+          },
+        ].concat(this.allVersions),
+        value: 'name',
+        label: 'name',
+        placeholder: this.getNameVersion,
+        currentValue: this.selectedVersion || '',
+      });
+    },
   },
   watch: {
     repositoryUUID() {
@@ -527,6 +518,16 @@ export default {
       }
     },
     selectedVersion() {
+      if (this.selectedVersion === this.$t('webapp.dashboard.all_versions')) {
+        this.routerHandle('repository-settings', {
+          query: {
+            tab: 'versions',
+          },
+        });
+
+        return;
+      }
+
       let defaultVersions;
 
       try {
diff --git a/src/components/shared/ImportWitModal.vue b/src/components/shared/ImportWitModal.vue
index de6e88420..852131930 100644
--- a/src/components/shared/ImportWitModal.vue
+++ b/src/components/shared/ImportWitModal.vue
@@ -10,18 +10,10 @@
             />
           </BField>
           <BField class="migrate-intelligence-modal__fields__inputs">
-            <UnnnicSelect
+            <SelectLanguage
               v-model="languageSelect"
-              :label="$t('webapp.migrate_intelligence.language')"
-            >
-              <option
-                v-for="[language, label] in languages"
-                :value="language"
-                :key="language"
-              >
-                {{ label }}
-              </option>
-            </UnnnicSelect>
+              :placeholder="$t('webapp.migrate_intelligence.language')"
+            />
           </BField>
         </div>
       </section>
@@ -51,10 +43,15 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
-import { LANGUAGES } from '@/utils';
+import SelectLanguage from '../SelectLanguage.vue';
 
 export default {
   name: 'ImportWitModal',
+
+  components: {
+    SelectLanguage,
+  },
+
   props: {
     isModalVisible: {
       type: Boolean,
@@ -64,7 +61,7 @@ export default {
   data() {
     return {
       authToken: '',
-      languageSelect: null,
+      languageSelect: '',
       isButtonLoading: false,
     };
   },
@@ -77,9 +74,6 @@ export default {
 
       return false;
     },
-    languages() {
-      return Object.keys(LANGUAGES).map((lang) => [lang, LANGUAGES[lang]]);
-    },
   },
   methods: {
     ...mapActions(['setMigrateIntelligence']),
diff --git a/src/components/shared/accordion/EditExampleAccordion.vue b/src/components/shared/accordion/EditExampleAccordion.vue
index 73a7a031b..532658e45 100644
--- a/src/components/shared/accordion/EditExampleAccordion.vue
+++ b/src/components/shared/accordion/EditExampleAccordion.vue
@@ -55,21 +55,14 @@
         :isStepBlocked="intent === ''"
         :message="errors.intent"
       >
-        <UnnnicAutocomplete
-          :label="$t('webapp.example.intent')"
-          v-model="intent"
-          :data="optionsIntents"
-          :placeholder="$t('webapp.example.intent')"
-          :openWithFocus="true"
-          @focus="onInputClick('intent')"
-          @blur="onInputClick('intent')"
-          :iconRight="
-            isIntentInputActive ? 'arrow-button-up-1' : 'arrow-button-down-1'
-          "
-          @click.native="hideDropdown = false"
-          :class="hideDropdown ? 'hidden' : ''"
-          @input="intent = intentFormatters(intent)"
-        />
+        <UnnnicFormElement :label="$t('webapp.example.intent')">
+          <Autocomplete
+            v-model="intent"
+            :options="filterIntents"
+            :placeholder="$t('webapp.example.intent')"
+            entityFormat
+          />
+        </UnnnicFormElement>
       </BField>
     </div>
     <div class="column is-12 mt-4 p-0">
@@ -118,6 +111,7 @@ import LanguageBadge from '@/components/shared/LanguageBadge';
 import ExampleEntitySmallInput from '@/components/example/ExampleEntitySmallInput';
 import EditExampleBase from './EditExampleBase';
 import NewEntitiesInput from '@/components/inputs/EntitiesInput/NewEntitiesInput';
+import Autocomplete from '../../Autocomplete.vue';
 
 export default {
   name: 'EditExampleAccordion',
@@ -127,6 +121,7 @@ export default {
     LanguageBadge,
     ExampleEntitySmallInput,
     NewEntitiesInput,
+    Autocomplete,
   },
   extends: EditExampleBase,
   props: {
@@ -159,19 +154,10 @@ export default {
     },
     filterIntents() {
       if (this.intents !== null) {
-        return this.repository.intents_list.filter(
-          (intent) =>
-            intent
-              .toString()
-              .toLowerCase()
-              .indexOf(this.intent.toLowerCase()) >= 0,
-        );
+        return this.repository.intents_list;
       }
       return [];
     },
-    optionsIntents() {
-      return this.filterIntents.map((intent) => intent);
-    },
   },
   watch: {
     open() {
diff --git a/src/components/shared/accordion/EditExampleIntent.vue b/src/components/shared/accordion/EditExampleIntent.vue
index a975f99ca..4f595865c 100644
--- a/src/components/shared/accordion/EditExampleIntent.vue
+++ b/src/components/shared/accordion/EditExampleIntent.vue
@@ -42,20 +42,11 @@
           :label="$t('webapp.inbox.language')"
           class="edit-sentence__language-select"
         >
-          <UnnnicSelect
+          <SelectLanguage
             size="sm"
             :placeholder="$t('webapp.inbox.language')"
             v-model="language"
-          >
-            <option
-              v-for="[option, label] in languageList"
-              :key="option"
-              :value="option"
-              @select="language = option"
-            >
-              {{ label }}
-            </option>
-          </UnnnicSelect>
+          />
         </UnnnicFormElement>
       </div>
       <div class="add-entity">
@@ -172,20 +163,18 @@
             slot="message"
             class="modal-header text-left"
           >
-            <UnnnicAutocomplete
+            <UnnnicFormElement
               :label="$t('webapp.trainings.add_entity_field_label')"
-              ref="entityInputField"
-              :data="getAllEntities"
-              v-model="entity"
-              :openWithFocus="true"
-              :iconRight="
-                isEntityInputActive
-                  ? 'arrow-button-up-1'
-                  : 'arrow-button-down-1'
-              "
-              @focus="onInputClick()"
-              @blur="onInputClick()"
-            />
+            >
+              <Autocomplete
+                v-model="entity"
+                ref="entityInputField"
+                :options="getAllEntities"
+                :placeholder="$t('webapp.example.intent')"
+                entityFormat
+              />
+            </UnnnicFormElement>
+
             <div>
               <UnnnicLabel
                 class="mt-5"
@@ -260,6 +249,8 @@ import ExampleTextWithHighlightedEntitiesInput from '@/components/inputs/Example
 import EntityAccordion from '@/components/shared/accordion/EntityAccordion';
 import WordCard from '@/components/shared/accordion/WordCard';
 import InputWithHightlights from '../../InputWithHightlights';
+import SelectLanguage from '../../SelectLanguage.vue';
+import Autocomplete from '../../Autocomplete.vue';
 
 export default {
   name: 'EditExampleIntent',
@@ -268,6 +259,8 @@ export default {
     EntityAccordion,
     WordCard,
     InputWithHightlights,
+    SelectLanguage,
+    Autocomplete,
   },
   props: {
     from: {
@@ -280,7 +273,6 @@ export default {
       hideDropdown: true,
       isOpen: false,
       entityModal: false,
-      isEntityInputActive: false,
       selectedEntities: [],
       entity: '',
       textSelected: null,
@@ -372,9 +364,6 @@ export default {
 
       this.cancelEditEntity();
     },
-    onInputClick() {
-      this.isEntityInputActive = !this.isEntityInputActive;
-    },
   },
 };
 </script>
diff --git a/src/components/translate/EditTranslation.vue b/src/components/translate/EditTranslation.vue
index 97ae4dc7a..790fbe9f2 100644
--- a/src/components/translate/EditTranslation.vue
+++ b/src/components/translate/EditTranslation.vue
@@ -134,20 +134,18 @@
             slot="message"
             class="modal-header text-left"
           >
-            <UnnnicAutocomplete
+            <UnnnicFormElement
               :label="$t('webapp.trainings.add_entity_field_label')"
-              ref="entityInputField"
-              :data="getAllEntities"
-              v-model="entity"
-              :openWithFocus="true"
-              :iconRight="
-                isEntityInputActive
-                  ? 'arrow-button-up-1'
-                  : 'arrow-button-down-1'
-              "
-              @focus="onInputClick()"
-              @blur="onInputClick()"
-            />
+            >
+              <Autocomplete
+                v-model="entity"
+                ref="entityInputField"
+                :options="getAllEntities"
+                :placeholder="$t('webapp.example.intent')"
+                entityFormat
+              />
+            </UnnnicFormElement>
+
             <div>
               <UnnnicLabel
                 class="mt-5"
@@ -215,6 +213,7 @@ import ExampleTextWithHighlightedEntitiesInput from '@/components/inputs/Example
 import EntityAccordion from '@/components/shared/accordion/EntityAccordion';
 import WordCard from '@/components/shared/accordion/WordCard';
 import { mapActions, mapGetters } from 'vuex';
+import Autocomplete from '../Autocomplete.vue';
 
 export default {
   name: 'EditTranslation',
@@ -222,6 +221,7 @@ export default {
     ExampleTextWithHighlightedEntitiesInput,
     EntityAccordion,
     WordCard,
+    Autocomplete,
   },
   props: {
     from: {
@@ -238,7 +238,6 @@ export default {
       hideDropdown: true,
       isOpen: false,
       entityModal: false,
-      isEntityInputActive: false,
       selectedEntities: [],
       entity: '',
     };
@@ -330,9 +329,6 @@ export default {
 
       this.cancelEditEntity();
     },
-    onInputClick() {
-      this.isEntityInputActive = !this.isEntityInputActive;
-    },
     async saveTranslation() {
       this.submitting = true;
       const entities = this.allEntities.map(
diff --git a/src/components/translate/NewTranslationsStatus.vue b/src/components/translate/NewTranslationsStatus.vue
index ec02ed3bb..f8b64ebb0 100644
--- a/src/components/translate/NewTranslationsStatus.vue
+++ b/src/components/translate/NewTranslationsStatus.vue
@@ -64,19 +64,10 @@
           :label="$t('webapp.translate.select_language_label')"
           class="form-element"
         >
-          <UnnnicSelect
+          <SelectLanguage
             v-model="languageSelected"
             class="select-add-modal"
-          >
-            <option
-              v-for="[option, label] in languageList"
-              :key="option"
-              :value="option"
-              @select="languageSelected = option"
-            >
-              {{ label }}
-            </option>
-          </UnnnicSelect>
+          />
         </UnnnicFormElement>
       </template>
 
@@ -101,11 +92,13 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import { formatters, languageListToDict, LANGUAGES } from '@/utils';
+import { formatters, languageListToDict } from '@/utils';
 import Loading from '@/components/shared/Loading';
+import SelectLanguage from '../SelectLanguage.vue';
 
 const components = {
   Loading,
+  SelectLanguage,
 };
 
 export default {
@@ -207,9 +200,6 @@ export default {
             : -1,
         );
     },
-    languageList() {
-      return Object.keys(LANGUAGES).map((lang) => [lang, LANGUAGES[lang]]);
-    },
   },
   watch: {
     async ownerNickname() {
diff --git a/src/utils/index.js b/src/utils/index.js
index 95be146d8..06826b580 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -149,3 +149,28 @@ export const entityEquals = (entities1, entities2) => {
     );
   });
 };
+
+export const useSelectSmart = ({
+  from,
+  value,
+  label,
+  placeholder,
+  currentValue,
+}) => {
+  const placeholderOption = {
+    value: '',
+    label: placeholder,
+  };
+
+  const options = [placeholderOption].concat(
+    from.map((item) => ({
+      value: item[value],
+      label: item[label],
+    })),
+  );
+
+  return {
+    value: [options.find(({ value }) => value === currentValue)],
+    options: options,
+  };
+};
diff --git a/src/views/repository/Entity.vue b/src/views/repository/Entity.vue
index 07eb09189..95d66d169 100644
--- a/src/views/repository/Entity.vue
+++ b/src/views/repository/Entity.vue
@@ -27,19 +27,12 @@
             <span class="entity-list__results">{{
               $t('webapp.intent.sentences_perpage')
             }}</span>
-            <UnnnicSelect
-              class="unnic--clickable"
+            <UnnnicSelectSmart
+              :value="optionsSelectSmart.value"
+              :options="optionsSelectSmart.options"
               size="md"
-              v-model="selectedOption"
-            >
-              <option
-                v-for="(option, index) in options"
-                :key="index"
-                size="sm"
-              >
-                {{ option.value }}
-              </option>
-            </UnnnicSelect>
+              @input="selectedOption = $event[0].value"
+            />
           </div>
         </div>
         <IntentPagination
@@ -110,6 +103,7 @@ import Loading from '@/components/shared/Loading';
 import RepositoryBase from './Base';
 import IntentPagination from '@/components/shared/IntentPagination';
 import IntentLoader from '@/views/repository/loadings/Intent';
+import { useSelectSmart } from '../../utils';
 
 export default {
   name: 'Entity',
@@ -161,6 +155,16 @@ export default {
       repositoryVersion: 'getSelectedVersion',
       repositoryList: 'getCurrentRepository',
     }),
+
+    choicesSelectSmart() {
+      return useSelectSmart({
+        from: this.options,
+        value: 'value',
+        label: 'value',
+        placeholder: '',
+        currentValue: this.selectedOption,
+      });
+    },
   },
   watch: {
     query() {
diff --git a/src/views/repository/Integration.vue b/src/views/repository/Integration.vue
index eb6276021..47f9472fb 100644
--- a/src/views/repository/Integration.vue
+++ b/src/views/repository/Integration.vue
@@ -104,15 +104,11 @@
             </UnnnicIntelligenceText>
 
             <UnnnicFormElement :label="$t('webapp.integration.token_title')">
-              <UnnnicSelect v-model="profileAuth">
-                <option
-                  v-for="option in getAuthorizations"
-                  :key="option.index"
-                  :value="option"
-                >
-                  {{ option }}
-                </option>
-              </UnnnicSelect>
+              <UnnnicSelectSmart
+                :value="getAuthorizationsSelectSmart.value"
+                :options="getAuthorizationsSelectSmart.options"
+                @input="profileAuth = $event[0].value"
+              />
             </UnnnicFormElement>
 
             <div class="repository-analyze-text__url">
@@ -269,6 +265,7 @@ import RepositoryBase from './Base';
 import I18n from '@/utils/plugins/i18n';
 import IntegrationModal from '@/components/shared/IntegrationModal';
 import IntegrationLoading from '@/views/repository/loadings/Integration';
+import { useSelectSmart } from '../../utils';
 
 export default {
   name: 'RepositoryIntegration',
@@ -373,6 +370,16 @@ export default {
         ].join(),
       };
     },
+
+    getAuthorizationsSelectSmart() {
+      return useSelectSmart({
+        from: this.getAuthorizations.map((value) => ({ value })),
+        value: 'value',
+        label: 'value',
+        placeholder: '',
+        currentValue: this.profileAuth,
+      });
+    },
   },
   watch: {
     profileToken() {
diff --git a/src/views/repository/Intent.vue b/src/views/repository/Intent.vue
index 5f892ed46..23bf33627 100644
--- a/src/views/repository/Intent.vue
+++ b/src/views/repository/Intent.vue
@@ -26,19 +26,12 @@
             <span class="entity-list__results">{{
               $t('webapp.intent.sentences_perpage')
             }}</span>
-            <UnnnicSelect
-              class="unnic--clickable"
+            <UnnnicSelectSmart
+              :value="optionsSelectSmart.value"
+              :options="optionsSelectSmart.options"
+              @input="selectedOption = $event[0].value"
               size="md"
-              v-model="selectedOption"
-            >
-              <option
-                v-for="(option, index) in options"
-                :key="index"
-                size="sm"
-              >
-                {{ option.value }}
-              </option>
-            </UnnnicSelect>
+            />
           </div>
         </div>
         <IntentPagination
@@ -107,6 +100,7 @@ import Loading from '@/components/shared/Loading';
 import RepositoryBase from './Base';
 import IntentPagination from '@/components/shared/IntentPagination';
 import IntentLoader from '@/views/repository/loadings/Intent';
+import { useSelectSmart } from '../../utils';
 
 export default {
   name: 'Intent',
@@ -157,6 +151,16 @@ export default {
       repositoryVersion: 'getSelectedVersion',
       repositoryList: 'getCurrentRepository',
     }),
+
+    optionsSelectSmart() {
+      return useSelectSmart({
+        from: this.options,
+        value: 'value',
+        label: 'value',
+        placeholder: '',
+        currentValue: this.selectedOption,
+      });
+    },
   },
   watch: {
     query() {
diff --git a/src/views/repository/PhraseSuggestion.vue b/src/views/repository/PhraseSuggestion.vue
index 223fa8082..234f2caf3 100644
--- a/src/views/repository/PhraseSuggestion.vue
+++ b/src/views/repository/PhraseSuggestion.vue
@@ -119,18 +119,11 @@
               <UnnnicFormElement
                 :label="$t('webapp.phrase-suggestion.select_intent')"
               >
-                <UnnnicSelect
-                  v-model="intentSelected"
-                  @onChange="addIntents"
-                >
-                  <option
-                    v-for="intent in repository.intents"
-                    :key="intent.id"
-                    :value="intent.value"
-                  >
-                    {{ intent.value }}
-                  </option>
-                </UnnnicSelect>
+                <UnnnicSelectSmart
+                  :value="intentsSelectSmart.value"
+                  :options="intentsSelectSmart.options"
+                  @input="addIntents($event[0].value)"
+                />
               </UnnnicFormElement>
             </div>
 
@@ -375,6 +368,7 @@ import GeneratedSentencesTable from '@/components/repository/GeneratedSentencesT
 import PaginatedList from '@/components/shared/PaginatedList';
 import IntentSuggestion from '@/components/shared/accordion/IntentSuggestion';
 import PhraseSuggestionLoading from './PhraseSuggestionLoading';
+import { useSelectSmart } from '../../utils';
 
 export default {
   name: 'PhraseSuggestion',
@@ -471,6 +465,16 @@ export default {
 
       return '';
     },
+
+    intentsSelectSmart() {
+      return useSelectSmart({
+        from: this.repository.intents,
+        value: 'value',
+        label: 'value',
+        placeholder: '',
+        currentValue: this.intentSelected,
+      });
+    },
   },
   watch: {
     versionSelected() {
@@ -553,6 +557,8 @@ export default {
     },
     async addIntents(intent) {
       // this.loading = true
+      this.intentSelected = intent;
+
       const { id } = this.repository.intents.find((e) => e.value === intent);
       this.phraseList = await this.searchExamples({
         repositoryUuid: this.repository.uuid,
diff --git a/src/views/repository/Translate.vue b/src/views/repository/Translate.vue
index 2c8e8df5a..495755826 100644
--- a/src/views/repository/Translate.vue
+++ b/src/views/repository/Translate.vue
@@ -104,19 +104,12 @@
                     </UnnnicIntelligenceText>
 
                     <UnnnicFormElement>
-                      <UnnnicSelect
-                        v-model="allTranslations"
+                      <UnnnicSelectSmart
+                        :value="exportOptionSelectSmart.value"
+                        :options="exportOptionSelectSmart.options"
+                        @input="allTranslations = $event[0].value"
                         class="select-translation"
-                      >
-                        <option
-                          v-for="option in exportOption"
-                          :key="option.id"
-                          :value="option.value"
-                          @select="allTranslations = option.value"
-                        >
-                          {{ option.label }}
-                        </option>
-                      </UnnnicSelect>
+                      />
                     </UnnnicFormElement>
                   </template>
                 </UnnnicModalNext>
@@ -305,7 +298,7 @@ import Loading from '@/components/shared/Loading';
 import TranslateTokenModal from '@/components/translate/TranslateTokenModal';
 import TranslateList from '@/components/translate/TranslateList';
 import Tour from '@/components/Tour';
-import { languageListToDict } from '@/utils/index';
+import { languageListToDict, useSelectSmart } from '@/utils/index';
 import RepositoryBase from './Base';
 import SentenceFilters from '@/components/repository/repository-evaluate/example/SentenceFilters';
 import TranslationsList from '@/components/translate/TranslationsList';
@@ -394,6 +387,16 @@ export default {
         []
       );
     },
+
+    exportOptionSelectSmart() {
+      return useSelectSmart({
+        from: this.exportOption,
+        value: 'value',
+        label: 'label',
+        placeholder: '',
+        currentValue: this.allTranslations,
+      });
+    },
   },
   watch: {
     isImportFileVisible() {
diff --git a/src/views/repository/content/API.vue b/src/views/repository/content/API.vue
index 5e0b8ca52..109e65bd8 100644
--- a/src/views/repository/content/API.vue
+++ b/src/views/repository/content/API.vue
@@ -27,21 +27,13 @@
         </p>
         <div class="repository-api__select__inputs">
           <div class="repository-api__select__input">
-            <UnnnicSelect
+            <UnnnicSelectSmart
               v-if="bases.length"
+              :value="basesSelectSmart.value"
+              :options="basesSelectSmart.options"
+              @input="baseIdLang = $event[0].value"
               size="sm"
-              placeholder=""
-              v-model="baseIdLang"
-            >
-              <option
-                v-for="base in bases"
-                :value="[base.knowledge_base, base.language]"
-                :key="base.knowledge_base"
-                size="sm"
-              >
-                {{ base.title }}
-              </option>
-            </UnnnicSelect>
+            />
           </div>
         </div>
       </section>
@@ -503,6 +495,7 @@
 import RepositoryViewBase from '@/components/repository/RepositoryViewBase';
 import RepositoryBase from '../Base';
 import { mapActions, mapGetters } from 'vuex';
+import { useSelectSmart } from '../../../utils';
 
 export default {
   name: 'RepositoryContentAPI',
@@ -585,6 +578,19 @@ export default {
       const infos = this.baseIdLang;
       return infos.split(',');
     },
+
+    basesSelectSmart() {
+      return useSelectSmart({
+        from: this.bases.map(({ title, knowledge_base, language }) => ({
+          title,
+          value: `${knowledge_base},${language}`,
+        })),
+        value: 'value',
+        label: 'title',
+        placeholder: '',
+        currentValue: this.baseIdLang,
+      });
+    },
   },
   methods: {
     ...mapActions(['getQATexts']),