diff --git a/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js b/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js
index 2399fc6be9..0a1fb9161b 100644
--- a/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js
@@ -46,4 +46,40 @@ export const commonStrings = createTranslator('CommonStrings', {
     message: 'Options',
     context: 'Tooltip for the generic options menu icon',
   },
+  openMenuAction: {
+    message: 'Open menu',
+    context: 'Accessible label for the button that opens a dropdown menu',
+  },
+  closeMenuAction: {
+    message: 'Close menu',
+    context: 'Accessible label for the button that closes a dropdown menu',
+  },
+  optionsClickableLabel: {
+    message: 'Options are clickable',
+    context: 'Announced to screen reader users when a list of selectable options appears',
+  },
+  allOptionsSelectedLabel: {
+    message: 'All options selected',
+    context: 'Announced when every option in a list is selected',
+  },
+  allOptionsDeselectedLabel: {
+    message: 'No options selected',
+    context: 'Announced when no options in a list are selected',
+  },
+  optionDeselectedLabel: {
+    message: 'Option deselected',
+    context: 'Announced when an option is removed from the selection',
+  },
+  partiallySelectedLabel: {
+    message: 'Partially selected',
+    context: 'Announced for an option when only some of the options under it are selected',
+  },
+  optionSelectedLabel: {
+    message: 'Selected {label}',
+    context: 'Announced when an option is selected. {label} is the name of the option',
+  },
+  optionRemovedLabel: {
+    message: 'Removed {label}',
+    context: 'Announced when an option is removed. {label} is the name of the option',
+  },
 });
diff --git a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
index d4a76f4df2..8377e11f7a 100644
--- a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
@@ -445,6 +445,7 @@ export const communityChannelsStrings = createTranslator('CommunityChannelsStrin
     message: 'New',
     context: 'Label indicating the section for new notifications',
   },
+  // TODO: clearAllAction should be moved to commonStrings.js in next major Studio release
   clearAllAction: {
     message: 'Clear all',
     context: 'Action button to clear all notifications',
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
index cc81b17e5e..95254813f0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
@@ -1,7 +1,39 @@
 <template>
 
   <div>
-    <DropdownWrapper>
+    <KMultiSelect
+      v-if="!expanded"
+      :value="autocompleteValues"
+      :options="categoriesList"
+      itemValue="value"
+      itemText="text"
+      :label="translateMetadataString('category')"
+      :autoPromoteParent="false"
+      clearable
+      :noResultsText="$tr('noCategoryFoundText')"
+      :messages="messages"
+      @input="onKMultiSelectInput"
+    >
+      <template #chip="{ option, remove: removeChip }">
+        <span :ref="'category-chip-' + option.value">
+          <KChip
+            :text="option.text"
+            :removeLabel="$tr('removeCategory', { label: tooltipText(option.value) })"
+            close
+            @close="removeChip"
+            @mousedown.native.prevent
+          />
+        </span>
+        <KTooltip
+          :reference="'category-chip-' + option.value"
+          :refs="$refs"
+          placement="top"
+          :text="tooltipText(option.value)"
+        />
+      </template>
+    </KMultiSelect>
+
+    <DropdownWrapper v-if="expanded">
       <template #default="{ attach, menuProps }">
         <VAutocomplete
           :value="autocompleteValues"
@@ -18,8 +50,8 @@
           :menu-props="{
             ...menuProps,
             zIndex: 4,
-            height: expanded ? 0 : 'auto',
-            maxHeight: expanded ? 0 : 300,
+            height: 0,
+            maxHeight: 0,
           }"
           :attach="attach"
           @click:clear="$nextTick(() => removeAll())"
@@ -44,34 +76,6 @@
               </div>
             </VTooltip>
           </template>
-
-          <template #no-data>
-            <VListTile v-if="categoryText && categoryText.trim()">
-              <VListTileContent>
-                <VListTileTitle>
-                  {{ $tr('noCategoryFoundText', { text: categoryText.trim() }) }}
-                </VListTileTitle>
-              </VListTileContent>
-            </VListTile>
-          </template>
-
-          <template #item="{ item }">
-            <VListTile
-              :value="isSelected(item.value)"
-              :class="{ parentOption: !item.value.includes('.') }"
-              @mousedown.prevent
-              @click="onChange(item.value)"
-            >
-              <KCheckbox
-                :checked="isSelected(item.value)"
-                :label="item.text"
-                :value="item.value"
-                style="margin-top: 10px"
-                :style="treeItemStyle(item)"
-                :ripple="false"
-              />
-            </VListTile>
-          </template>
         </VAutocomplete>
       </template>
     </DropdownWrapper>
@@ -104,13 +108,17 @@
 <script>
 
   import camelCase from 'lodash/camelCase';
+  import KMultiSelect from 'kolibri-design-system/lib/candidate/multiselect/KMultiSelect';
+  import KChip from 'kolibri-design-system/lib/candidate/multiselect/KChip';
   import { getSortedCategories } from 'shared/utils/helpers';
+  import { commonStrings } from 'shared/strings/commonStrings';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
   import DropdownWrapper from 'shared/views/form/DropdownWrapper';
   import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
 
   export default {
     name: 'CategoryOptions',
-    components: { DropdownWrapper },
+    components: { KMultiSelect, KChip, DropdownWrapper },
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
       /**
@@ -177,6 +185,34 @@
           option.text.toLowerCase().includes(searchQuery),
         );
       },
+      messages() {
+        const {
+          openMenuAction$,
+          closeMenuAction$,
+          optionsClickableLabel$,
+          allOptionsSelectedLabel$,
+          allOptionsDeselectedLabel$,
+          optionDeselectedLabel$,
+          partiallySelectedLabel$,
+          optionSelectedLabel$,
+          optionRemovedLabel$,
+        } = commonStrings;
+        const { clearAllAction$ } = communityChannelsStrings;
+        return {
+          clearText: clearAllAction$,
+          open: openMenuAction$,
+          close: closeMenuAction$,
+          clickable: optionsClickableLabel$,
+          allOptionsSelected: allOptionsSelectedLabel$,
+          allOptionsDeselected: allOptionsDeselectedLabel$,
+          optionDeselected: optionDeselectedLabel$,
+          partiallySelected: partiallySelectedLabel$,
+          itemsSelected: ({ count }) => this.$tr('itemsSelected', { count }),
+          selected: optionSelectedLabel$,
+          removed: optionRemovedLabel$,
+          cleared: () => this.$tr('allCategoriesCleared'),
+        };
+      },
     },
     methods: {
       treeItemStyle(item) {
@@ -201,6 +237,11 @@
       removeAll() {
         this.selected = {};
       },
+      // Dropdown mode is only rendered when a single node is edited, so every
+      // selected category simply applies to all of nodeIds.
+      onKMultiSelectInput(newValues) {
+        this.selected = Object.fromEntries(newValues.map(value => [value, this.nodeIds]));
+      },
       tooltipText(optionId) {
         const option = this.categoriesList.find(option => option.value === optionId);
         if (!option) {
@@ -275,6 +316,9 @@
     },
     $trs: {
       noCategoryFoundText: 'Category not found',
+      itemsSelected: '{count, plural, one {# category selected} other {# categories selected}}',
+      allCategoriesCleared: 'All categories cleared',
+      removeCategory: 'Remove {label}',
     },
   };
 
@@ -283,10 +327,6 @@
 
 <style lang="scss" scoped>
 
-  .parentOption:not(:first-child) {
-    border-top: 1px solid rgba(0, 0, 0, 0.12);
-  }
-
   .checkbox-list-wrapper {
     height: 250px;
     overflow-y: auto;
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
index b1d027d5b1..f0f0fc0f37 100644
--- a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
@@ -1,81 +1,166 @@
-import { shallowMount } from '@vue/test-utils';
+import { render, screen, within } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import VueRouter from 'vue-router';
 import CategoryOptions from '../CategoryOptions.vue';
+import { commonStrings } from 'shared/strings/commonStrings';
+import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+import { createTranslator } from 'shared/i18n';
+import { metadataTranslationMixin } from 'shared/mixins';
 
-function makeWrapper({ value = {}, nodeIds = ['node1'] } = {}) {
-  return shallowMount(CategoryOptions, {
-    propsData: {
-      value,
-      nodeIds,
-    },
+const { translateMetadataString } = metadataTranslationMixin.methods;
+const { openMenuAction$ } = commonStrings;
+const { clearAllAction$ } = communityChannelsStrings;
+const { removeCategory$ } = createTranslator('CategoryOptions', CategoryOptions.$trs);
+
+const SCHOOL = 'd&WXdXWF';
+const ARTS = 'd&WXdXWF.5QAjgfv7';
+const DANCE = 'd&WXdXWF.5QAjgfv7.BUMJJBnS';
+const MUSIC = 'd&WXdXWF.5QAjgfv7.u0aKjT4i';
+
+const SCHOOL_LABEL = translateMetadataString('school');
+const ARTS_LABEL = translateMetadataString('arts');
+const DANCE_LABEL = translateMetadataString('dance');
+const MUSIC_LABEL = translateMetadataString('music');
+const DANCE_PATH = `${SCHOOL_LABEL} - ${ARTS_LABEL} - ${DANCE_LABEL}`;
+const ARTS_PATH = `${SCHOOL_LABEL} - ${ARTS_LABEL}`;
+
+const NODE_1 = 'node1';
+const NODE_2 = 'node2';
+
+function renderComponent({ value = {}, nodeIds = [NODE_1], expanded = false } = {}) {
+  return render(CategoryOptions, {
+    props: { value, nodeIds, expanded },
+    routes: new VueRouter(),
   });
 }
 
+function lastInput(emitted) {
+  const events = emitted().input;
+  return events[events.length - 1][0];
+}
+
 describe('CategoryOptions', () => {
-  it('smoke test', () => {
-    const wrapper = makeWrapper();
-    expect(wrapper.exists()).toBe(true);
+  it('renders the category field', () => {
+    renderComponent();
+    expect(screen.getByText(translateMetadataString('category'))).toBeInTheDocument();
   });
 
-  it('emits expected data', () => {
-    const wrapper = makeWrapper();
-    const value = 'string';
-    wrapper.vm.$emit('input', value);
+  describe('dropdown mode (KMultiSelect)', () => {
+    it('shows a chip only for categories applied to every edited node', () => {
+      renderComponent({
+        value: {
+          [DANCE]: [NODE_1, NODE_2],
+          [MUSIC]: [NODE_1],
+        },
+        nodeIds: [NODE_1, NODE_2],
+      });
 
-    expect(wrapper.emitted().input).toBeTruthy();
-    expect(wrapper.emitted().input.length).toBe(1);
-    expect(wrapper.emitted().input[0]).toEqual([value]);
-  });
+      // The closed dropdown stays in the DOM (v-show), so queries must not look inside it.
+      // getAllByText because KChip nests two elements that both carry the chip text.
+      const chipsArea = within(screen.getByRole('group'));
+      expect(chipsArea.getAllByText(DANCE_LABEL).length).toBeGreaterThan(0);
+      expect(chipsArea.queryByText(MUSIC_LABEL)).not.toBeInTheDocument();
+    });
 
-  describe('display', () => {
-    it('has a tooltip that displays the tree for value of an item', () => {
-      const wrapper = makeWrapper();
-      const item = 'd&WXdXWF.5QAjgfv7.BUMJJBnS'; // 'Dance'
-      const expectedToolTip = 'School - Arts - Dance';
+    it('shows the full category path in the chip tooltip', async () => {
+      renderComponent({ value: { [DANCE]: [NODE_1] } });
 
-      expect(wrapper.vm.tooltipText(item)).toEqual(expectedToolTip);
+      expect(await screen.findByText(DANCE_PATH)).toBeInTheDocument();
     });
-    it(`dropdown has 'levels' key necessary to display the nested structure of categories`, () => {
-      const wrapper = makeWrapper();
-      const dropdown = wrapper.vm.categoriesList;
-      const everyCategoryHasLevelsKey = dropdown.every(item => 'level' in item);
 
-      expect(everyCategoryHasLevelsKey).toBeTruthy();
+    it('renders parent categories as named groups in the dropdown', async () => {
+      renderComponent();
+
+      await userEvent.click(screen.getByRole('combobox'));
+
+      const school = await screen.findByRole('group', { name: SCHOOL_LABEL });
+      expect(within(school).getByRole('option', { name: DANCE_LABEL })).toBeInTheDocument();
     });
-  });
 
-  describe('interactions', () => {
-    it('when user checks an item, that is emitted to the parent component', () => {
-      const wrapper = makeWrapper();
-      const item = 'abcd';
-      wrapper.vm.$emit = jest.fn();
-      wrapper.vm.add(item);
+    it('emits the selection as an object applying each category to all edited nodes', async () => {
+      const { emitted } = renderComponent();
 
-      expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
-      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual({ abcd: ['node1'] });
+      await userEvent.click(screen.getByRole('combobox'));
+      await userEvent.click(await screen.findByRole('option', { name: SCHOOL_LABEL }));
+
+      expect(lastInput(emitted)).toEqual({
+        [SCHOOL]: [NODE_1],
+      });
     });
-    it('when user unchecks an item, that is emitted to the parent component', () => {
-      const wrapper = makeWrapper();
-      const item = 'defj';
-      wrapper.vm.$emit = jest.fn();
-      wrapper.vm.remove(item);
-
-      expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
-      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual({});
+
+    it('adds only the parent when a partially selected parent is clicked', async () => {
+      const { emitted } = renderComponent({ value: { [DANCE]: [NODE_1] } });
+
+      await userEvent.click(screen.getByRole('combobox'));
+      // An indeterminate option's accessible name includes the hidden
+      // "partially selected" text, so match on how the name starts.
+      await userEvent.click(
+        await screen.findByRole('option', { name: name => name.startsWith(SCHOOL_LABEL) }),
+      );
+
+      expect(lastInput(emitted)).toEqual({
+        [DANCE]: [NODE_1],
+        [SCHOOL]: [NODE_1],
+      });
+    });
+
+    it('removes a category when its chip close button is clicked', async () => {
+      const { emitted } = renderComponent({ value: { [DANCE]: [NODE_1] } });
+
+      await userEvent.click(
+        screen.getByRole('button', { name: removeCategory$({ label: DANCE_PATH }) }),
+      );
+
+      expect(lastInput(emitted)).toEqual({});
+    });
+
+    it('removes stored descendants when a parent chip is removed', async () => {
+      const { emitted } = renderComponent({
+        value: { [ARTS]: [NODE_1], [DANCE]: [NODE_1] },
+      });
+
+      await userEvent.click(
+        screen.getByRole('button', { name: removeCategory$({ label: ARTS_PATH }) }),
+      );
+
+      expect(lastInput(emitted)).toEqual({});
+    });
+
+    it('emits an empty object when the selection is cleared', async () => {
+      const { emitted } = renderComponent({ value: { [DANCE]: [NODE_1] } });
+
+      await userEvent.click(screen.getByRole('button', { name: clearAllAction$() }));
+
+      expect(lastInput(emitted)).toEqual({});
     });
   });
 
-  describe('close button on chip interactions', () => {
-    it('in the autocomplete bar, the chip is removed when user clicks on its close button', async () => {
-      const wrapper = makeWrapper({
-        value: {
-          'remove me': ['node1'],
-          'keep me': ['node1'],
-        },
+  describe('expanded mode', () => {
+    it('renders the flat checkbox list instead of KMultiSelect', () => {
+      renderComponent({ expanded: true });
+
+      expect(screen.queryByRole('button', { name: openMenuAction$() })).not.toBeInTheDocument();
+      expect(screen.getByRole('checkbox', { name: DANCE_LABEL })).toBeInTheDocument();
+    });
+
+    it('emits the added category applied to all edited nodes when checked', async () => {
+      const { emitted } = renderComponent({ expanded: true, nodeIds: [NODE_1] });
+
+      await userEvent.click(screen.getByRole('checkbox', { name: DANCE_LABEL }));
+
+      expect(lastInput(emitted)).toEqual({ [DANCE]: [NODE_1] });
+    });
+
+    it('removes a category and its stored descendants when unchecked', async () => {
+      const { emitted } = renderComponent({
+        expanded: true,
+        value: { [ARTS]: [NODE_1], [DANCE]: [NODE_1] },
+        nodeIds: [NODE_1],
       });
-      const originalChipsLength = Object.keys(wrapper.vm.selected).length;
-      wrapper.vm.remove('remove me');
 
-      expect(wrapper.emitted().input.length).toEqual(originalChipsLength - 1);
+      await userEvent.click(screen.getByRole('checkbox', { name: ARTS_LABEL }));
+
+      expect(lastInput(emitted)).toEqual({});
     });
   });
 });