diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/LanguageFilter.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/LanguageFilter.vue
index 5c6e2d6d12..7b8e008e56 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/components/LanguageFilter.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/components/LanguageFilter.vue
@@ -1,73 +1,27 @@
 <template>
 
-  <VAutocomplete
+  <KMultiSelect
     v-model="languages"
-    :items="availableLanguages"
+    :options="availableLanguages"
     :label="$tr('languageLabel')"
-    color="primary"
-    item-value="id"
-    :item-text="languageSearchValue"
-    autoSelectFirst
-    :no-data-text="$tr('noMatchingLanguageText')"
-    box
-    multiple
+    itemValue="id"
+    itemText="name"
+    :searchKeys="['related_names', 'id']"
+    :multiple="true"
     clearable
-    :search-input.sync="languageInput"
-    v-bind="$attrs"
-    @change="languageInput = ''"
-    @blur="resetScroll"
-  >
-    <template #selection="{ item }">
-      <VTooltip
-        bottom
-        lazy
-      >
-        <template>
-          <StudioChip class="ma-1">
-            <div class="text-truncate">
-              {{ item.name }}
-            </div>
-          </StudioChip>
-        </template>
-        <span>{{ item.name }}</span>
-      </VTooltip>
-    </template>
-    <template #item="{ item }">
-      <KCheckbox
-        :key="item.id"
-        :ref="'checkbox-' + item.id"
-        v-model="languages"
-        :presentational="true"
-        :value="item.id"
-        class="mb-0 mt-1 scroll-margin"
-        :labelDir="null"
-      >
-        <VTooltip
-          bottom
-          lazy
-        >
-          <template #activator="{ on }">
-            <div
-              class="text-truncate"
-              style="width: 250px"
-              v-on="on"
-            >
-              {{ item.name }}
-            </div>
-          </template>
-          <span>{{ item.name }}</span>
-        </VTooltip>
-      </KCheckbox>
-    </template>
-  </VAutocomplete>
+    :noResultsText="$tr('noMatchingLanguageText')"
+    :messages="messages"
+  />
 
 </template>
 
 
 <script>
 
+  import KMultiSelect from 'kolibri-design-system/lib/candidate/multiselect/KMultiSelect';
   import LanguagesMap, { LanguagesList } from 'shared/leUtils/Languages';
-  import StudioChip from 'shared/views/StudioChip.vue';
+  import { commonStrings } from 'shared/strings/commonStrings';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
 
   const publicLanguages = Object.entries(window.publicLanguages || {}).map(([langId, count]) => {
     const baseLanguage = LanguagesMap.get(langId);
@@ -84,7 +38,7 @@
   export default {
     name: 'LanguageFilter',
     components: {
-      StudioChip,
+      KMultiSelect,
     },
     props: {
       value: {
@@ -96,7 +50,6 @@
     },
     data() {
       return {
-        languageInput: '',
         availableLanguages: publicLanguages,
       };
     },
@@ -109,48 +62,39 @@
           this.$emit('input', value.filter(Boolean));
         },
       },
-    },
-    methods: {
-      languageSearchValue(item) {
-        return item.name + (item.related_names || []).join('') + item.id;
-      },
-      resetScroll() {
-        const [{ id: firstLangId } = {}] = publicLanguages;
-        if (!firstLangId) {
-          return;
-        }
-        const firstItem = this.$refs[`checkbox-${firstLangId}`];
-        if (!firstItem) {
-          return;
-        }
-        firstItem.$el.scrollIntoView();
+      messages() {
+        const {
+          openMenuAction$,
+          closeMenuAction$,
+          optionsClickableLabel$,
+          allOptionsSelectedLabel$,
+          allOptionsDeselectedLabel$,
+          optionDeselectedLabel$,
+          optionSelectedLabel$,
+          optionRemovedLabel$,
+        } = commonStrings;
+        const { clearAllAction$ } = communityChannelsStrings;
+        return {
+          clearText: clearAllAction$,
+          open: openMenuAction$,
+          close: closeMenuAction$,
+          clickable: optionsClickableLabel$,
+          allOptionsSelected: allOptionsSelectedLabel$,
+          allOptionsDeselected: allOptionsDeselectedLabel$,
+          optionDeselected: optionDeselectedLabel$,
+          itemsSelected: ({ count }) => this.$tr('itemsSelected', { count }),
+          selected: optionSelectedLabel$,
+          removed: optionRemovedLabel$,
+          cleared: ({ count }) => this.$tr('selectionsCleared', { count }),
+        };
       },
     },
     $trs: {
       languageLabel: 'Languages',
       noMatchingLanguageText: 'No language matches the search',
+      itemsSelected: '{count, plural, one {# language selected} other {# languages selected}}',
+      selectionsCleared: '{count, plural, one {Cleared # selection} other {Cleared # selections}}',
     },
   };
 
 </script>
-
-
-<style lang="scss" scoped>
-
-  // Need to set otherwise chips will exceed width of selection box
-  ::v-deep .v-select__selections {
-    width: calc(100% - 48px);
-  }
-
-  .v-chip,
-  ::v-deep .v-chip__content,
-  .text-truncate {
-    max-width: 100%;
-  }
-
-  .scroll-margin {
-    /* Fixes scroll position on reset scroll */
-    scroll-margin: 16px;
-  }
-
-</style>