diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
index 135f071228..dcb6159f1c 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
@@ -27,6 +27,32 @@
           </span>
         </template>
       </Breadcrumbs>
+      <Menu
+        v-if="!loadingAncestors"
+        class="pa-1"
+      >
+        <template #activator="{ on }">
+          <IconButton
+            icon="list"
+            :text="$tr('viewModeTooltip')"
+            v-on="on"
+          />
+        </template>
+        <VList>
+          <VListTile
+            v-for="mode in viewModes"
+            :key="mode"
+            @click="setViewMode(mode), trackViewMode(mode)"
+          >
+            <VListTileAction style="min-width: 32px;">
+              <Icon v-if="mode === viewMode">
+                check
+              </Icon>
+            </VListTileAction>
+            <VListTileTitle>{{ $tr(mode) }}</VListTileTitle>
+          </VListTile>
+        </VList>
+      </Menu>
     </VToolbar>
 
     <!-- Topic actions -->
@@ -39,94 +65,49 @@
           :label="selected.length ? '' : $tr('selectAllLabel')"
         />
       </div>
-      <VSlideXTransition>
-        <div v-if="selected.length">
-          <IconButton
-            v-if="canEdit"
-            icon="edit"
-            :text="$tr('editSelectedButton')"
-            data-test="edit-selected-btn"
-            @click="editNodes(selected)"
-          />
-          <IconButton
-            icon="clipboard"
-            :text="$tr('copySelectedButton')"
-            data-test="copy-selected-to-clipboard-btn"
-            @click="copyToClipboard(selected)"
-          />
-          <IconButton
-            v-if="canEdit"
-            icon="move"
-            :text="$tr('moveSelectedButton')"
-            data-test="move-selected-btn"
-            @click="openMoveModal"
-          />
-          <IconButton
-            v-if="canEdit"
-            icon="copy"
-            :text="$tr('duplicateSelectedButton')"
-            data-test="duplicate-selected-btn"
-            @click="duplicateNodes(selected)"
-          />
-          <IconButton
-            v-if="canEdit"
-            icon="remove"
-            :text="$tr('deleteSelectedButton')"
-            data-test="delete-selected-btn"
-            @click="removeNodes(selected)"
-          />
-          <IconButton
-            v-if="canEdit"
-            icon="language"
-            :text="$tr('editLanguageButton')"
-            data-test="change-langugage-btn"
-            @click="editLanguage(selected)"
-          />
-          <IconButton
-            v-if="canEdit"
-            icon="categories"
-            :text="$tr('editCategoriesButton')"
-            data-test="change-categories-btn"
-            @click="editCategories(selected)"
-          />
-          <IconButton
-            v-if="canEdit"
-            icon="lesson"
-            :text="$tr('editWhatIsNeededButton')"
-            data-test="change-resources-neded-btn"
-            @click="editResourcesNeeded(selected)"
-          />
-          <IconButton
-            v-if="canEdit"
-            icon="levels"
-            :text="$tr('editLevelsButton')"
-            data-test="change-levels-btn"
-            @click="editLevels(selected)"
-          />
-          <IconButton
-            v-if="canEdit && !isTopicSelected"
-            icon="activities"
-            :text="$tr('editLearningActivitiesButton')"
-            data-test="change-learning-activities-btn"
-            @click="editLearningActivities(selected)"
-          />
-          <IconButton
-            v-if="canEdit && !isTopicSelected"
-            icon="attribution"
-            :text="$tr('editSourceButton')"
-            data-test="change-learning-activities-btn"
-            @click="editSource(selected)"
-          />
-          <IconButton
-            v-if="canEdit && !isTopicSelected"
-            icon="audience"
-            :text="$tr('editAudienceButton')"
-            data-test="change-audience-btn"
-            @click="editAudience(selected)"
-          />
-        </div>
-
-      </VSlideXTransition>
+      <div
+        v-show="selected.length"
+        v-if="$vuetify.breakpoint.mdAndUp"
+        class="no-shrink px-1"
+      >
+        {{ selectionText }}
+      </div>
+      <div v-if="selected.length" class="command-palette-wrapper">
+        <KListWithOverflow
+          :items="commandPaletteOptions"
+          :appearanceOverrides="{ justifyContent: 'flex-end' }"
+        >
+          <template #item="{ item }">
+            <KIconButton
+              :icon="item.icon"
+              :tooltip="item.label"
+              :disabled="item.disabled"
+              :data-test="item.dataTest"
+              @click="item.onClick()"
+            />
+          </template>
+          <template #more="{ overflowItems }">
+            <KIconButton
+              tooltip="More"
+              icon="optionsVertical"
+              appearance="flat-button"
+              :primary="false"
+            >
+              <template #menu>
+                <KDropdownMenu
+                  :options="overflowItems"
+                  @select="(option) => option.onClick()"
+                />
+              </template>
+            </KIconButton>
+          </template>
+          <template #divider>
+            <div class="divider-wrapper">
+              <div :style="dividerStyle"></div>
+            </div>
+          </template>
+        </KListWithOverflow>
+      </div>
 
       <MoveModal
         ref="moveModal"
@@ -134,40 +115,8 @@
         :moveNodeIds="selected"
         @target="moveNodes"
       />
-
-      <VSpacer />
-
-      <VFadeTransition>
-        <div v-show="selected.length" v-if="$vuetify.breakpoint.mdAndUp" class="px-1">
-          {{ selectionText }}
-        </div>
-      </VFadeTransition>
-
+      <VSpacer v-if="!selected.length" />
       <VToolbarItems v-if="!loadingAncestors">
-        <Menu class="pa-1">
-          <template #activator="{ on }">
-            <IconButton
-              icon="list"
-              :text="$tr('viewModeTooltip')"
-              v-on="on"
-            />
-          </template>
-          <VList>
-            <VListTile
-              v-for="mode in viewModes"
-              :key="mode"
-              @click="setViewMode(mode), trackViewMode(mode)"
-            >
-              <VListTileAction style="min-width: 32px;">
-                <Icon v-if="mode === viewMode">
-                  check
-                </Icon>
-              </VListTileAction>
-              <VListTileTitle>{{ $tr(mode) }}</VListTileTitle>
-            </VListTile>
-          </VList>
-        </Menu>
-
         <Menu v-if="canEdit">
           <template #activator="{ on }">
             <VBtn color="primary" class="ml-2" style="height: 32px;" v-on="on">
@@ -391,6 +340,117 @@
           }
         },
       },
+      commandPaletteOptions() {
+        const groupedOptions = [
+          [
+            {
+              label: this.$tr('editSelectedButton'),
+              icon: 'edit',
+              onClick: () => this.editNodes(this.selected),
+              condition: this.canEdit,
+              dataTest: 'edit-selected-btn',
+            },
+            {
+              label: this.$tr('moveSelectedButton'),
+              icon: 'move',
+              onClick: () => this.openMoveModal(),
+              condition: this.canEdit,
+              dataTest: 'move-selected-btn',
+            },
+            {
+              label: this.$tr('copySelectedButton'),
+              icon: 'clipboard',
+              onClick: () => this.copyToClipboard(this.selected),
+              condition: true,
+              dataTest: 'copy-selected-to-clipboard-btn',
+            },
+            {
+              label: this.$tr('duplicateSelectedButton'),
+              icon: 'copy',
+              onClick: () => this.duplicateNodes(this.selected),
+              condition: this.canEdit,
+              dataTest: 'duplicate-selected-btn',
+            },
+            {
+              label: this.$tr('deleteSelectedButton'),
+              icon: 'remove',
+              onClick: () => this.removeNodes(this.selected),
+              condition: this.canEdit,
+              dataTest: 'delete-selected-btn',
+            },
+          ],
+          [
+            {
+              label: this.$tr('editLanguageButton'),
+              icon: 'language',
+              onClick: this.quickEditModalFactory(QuickEditModals.LANGUAGE),
+              condition: this.canEdit,
+              dataTest: 'change-langugage-btn',
+            },
+          ],
+          [
+            {
+              label: this.$tr('editCategoriesButton'),
+              icon: 'categories',
+              onClick: this.quickEditModalFactory(QuickEditModals.CATEGORIES),
+              condition: this.canEdit,
+              dataTest: 'change-categories-btn',
+            },
+            {
+              label: this.$tr('editLevelsButton'),
+              icon: 'levels',
+              onClick: this.quickEditModalFactory(QuickEditModals.LEVELS),
+              condition: this.canEdit,
+              dataTest: 'change-levels-btn',
+            },
+            {
+              label: this.$tr('editLearningActivitiesButton'),
+              icon: 'activities',
+              onClick: this.quickEditModalFactory(QuickEditModals.LEARNING_ACTIVITIES),
+              condition: this.canEdit && this.isResourceSelected,
+              disabled: this.isTopicSelected,
+              dataTest: 'change-learning-activities-btn',
+            },
+          ],
+          [
+            {
+              label: this.$tr('editSourceButton'),
+              icon: 'attribution',
+              onClick: this.quickEditModalFactory(QuickEditModals.SOURCE),
+              condition: this.canEdit && this.isResourceSelected,
+              disabled: this.isTopicSelected,
+              dataTest: 'change-learning-activities-btn',
+            },
+            {
+              label: this.$tr('editAudienceButton'),
+              icon: 'audience',
+              onClick: this.quickEditModalFactory(QuickEditModals.AUDIENCE),
+              condition: this.canEdit && this.isResourceSelected,
+              disabled: this.isTopicSelected,
+              dataTest: 'change-audience-btn',
+            },
+            {
+              label: this.$tr('editWhatIsNeededButton'),
+              icon: 'lesson',
+              onClick: this.quickEditModalFactory(QuickEditModals.WHAT_IS_NEEDED),
+              condition: this.canEdit,
+              dataTest: 'change-resources-neded-btn',
+            },
+          ],
+        ];
+
+        const filteredOptions = groupedOptions
+          .filter(group => group.some(option => option.condition))
+          .map(group => group.filter(option => option.condition));
+
+        // Flatten the array with a divider between each group
+        return filteredOptions.reduce((acc, group, index) => {
+          if (index > 0) {
+            acc.push({ type: 'divider' });
+          }
+          return acc.concat(group);
+        }, []);
+      },
       height() {
         return this.hasStagingTree ? 'calc(100vh - 224px)' : 'calc(100vh - 160px)';
       },
@@ -403,6 +463,9 @@
       isTopicSelected() {
         return this.selectedNodes.some(node => node.kind === ContentKindsNames.TOPIC);
       },
+      isResourceSelected() {
+        return this.selectedNodes.some(node => node.kind !== ContentKindsNames.TOPIC);
+      },
       ancestors() {
         return this.getContentNodeAncestors(this.topicId, true).map(ancestor => {
           return {
@@ -448,6 +511,13 @@
           ? DropEffect.COPY
           : DropEffect.MOVE;
       },
+      dividerStyle() {
+        return {
+          height: '100%',
+          backgroundColor: this.$themeTokens.fineLine,
+          width: '1px',
+        };
+      },
     },
     watch: {
       topicId: {
@@ -548,54 +618,15 @@
           },
         });
       },
-      editLanguage(nodeIds) {
-        this.trackClickEvent('Edit language');
-        this.openQuickEditModal({
-          modal: QuickEditModals.LANGUAGE,
-          nodeIds,
-        });
-      },
-      editCategories(nodeIds) {
-        this.trackClickEvent('Edit categories');
-        this.openQuickEditModal({
-          modal: QuickEditModals.CATEGORIES,
-          nodeIds,
-        });
-      },
-      editResourcesNeeded(nodeIds) {
-        this.trackClickEvent('Edit what is needed');
-        this.openQuickEditModal({
-          modal: QuickEditModals.WHAT_IS_NEEDED,
-          nodeIds,
-        });
-      },
-      editLevels(nodeIds) {
-        this.trackClickEvent('Edit levels');
-        this.openQuickEditModal({
-          modal: QuickEditModals.LEVELS,
-          nodeIds,
-        });
-      },
-      editLearningActivities(nodeIds) {
-        this.trackClickEvent('Edit learning activities');
-        this.openQuickEditModal({
-          modal: QuickEditModals.LEARNING_ACTIVITIES,
-          nodeIds,
-        });
-      },
-      editAudience(nodeIds) {
-        this.trackClickEvent('Edit audience');
-        this.openQuickEditModal({
-          modal: QuickEditModals.AUDIENCE,
-          nodeIds,
-        });
-      },
-      editSource(nodeIds) {
-        this.trackClickEvent('Edit source');
-        this.openQuickEditModal({
-          modal: QuickEditModals.SOURCE,
-          nodeIds,
-        });
+      quickEditModalFactory(modal) {
+        return () => {
+          this.openQuickEditModal({
+            modal,
+            nodeIds: this.selected,
+          });
+          const trackActionLabel = modal.replace(/_/g, ' ').toLowerCase();
+          this.trackClickEvent(`Edit ${trackActionLabel}`);
+        };
       },
       treeLink(params) {
         return {
@@ -878,4 +909,17 @@
   .fade-transition-leave-active {
     transition-duration: 0.1s
   }
+
+  .divider-wrapper {
+    padding: 8px 12px;
+  }
+  .command-palette-wrapper {
+    min-width: 0;
+    flex-grow: 1;
+    padding-right: 4px;
+  }
+  .no-shrink {
+    flex-shrink: 0;
+  }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/app.js b/contentcuration/contentcuration/frontend/shared/app.js
index ae2121b243..98f113ae0b 100644
--- a/contentcuration/contentcuration/frontend/shared/app.js
+++ b/contentcuration/contentcuration/frontend/shared/app.js
@@ -106,6 +106,7 @@ import {
 } from 'vuetify/lib/directives';
 import VueIntl from 'vue-intl';
 import Croppa from 'vue-croppa';
+import VueCompositionApi from '@vue/composition-api';
 import { Workbox, messageSW } from 'workbox-window';
 import KThemePlugin from 'kolibri-design-system/lib/KThemePlugin';
 import trackInputModality from 'kolibri-design-system/lib/styles/trackInputModality';
@@ -158,6 +159,7 @@ if (process.env.NODE_ENV !== 'production') {
 Vue.use(Croppa);
 Vue.use(VueIntl);
 Vue.use(VueRouter);
+Vue.use(VueCompositionApi);
 Vue.use(Vuetify, {
   components: {
     // Explicitly register used Vuetify components globally
diff --git a/package.json b/package.json
index 613b3e98b0..db262c100d 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
   "dependencies": {
     "@sentry/vue": "^7.11.1",
     "@toast-ui/editor": "^2.3.1",
+    "@vue/composition-api": "^1.7.2",
     "ajv": "^8.12.0",
     "axios": "^1.6.2",
     "broadcast-channel": "^5.1.0",
@@ -72,7 +73,7 @@
     "jspdf": "https://github.com/parallax/jsPDF.git#b7a1d8239c596292ce86dafa77f05987bcfa2e6e",
     "jszip": "^3.10.1",
     "kolibri-constants": "^0.2.0",
-    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#293bca18c08b6ba5d3756fec4794f8ddcfa44bb9",
+    "kolibri-design-system": "https://github.com/AlexVelezLl/kolibri-design-system#2ecd75b2a96a71f4fce5a6f1c7a6092f06f6547f",
     "lodash": "^4.17.21",
     "material-icons": "0.3.1",
     "mutex-js": "^1.1.5",
diff --git a/yarn.lock b/yarn.lock
index 774643af7d..7b45d3c5ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9116,9 +9116,9 @@ kolibri-constants@^0.2.0:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.0.tgz#47c9d773894e23251ba5ac4db420822e45603142"
   integrity sha512-WYDMGDzB9gNxRbpX1O2cGe1HrJvLvSZGwMuAv6dqrxJgPf7iO+Hi40/1CXjHM7nk5CRt+hn5bqnMzCBmj1omPA==
 
-"kolibri-design-system@https://github.com/learningequality/kolibri-design-system#293bca18c08b6ba5d3756fec4794f8ddcfa44bb9":
-  version "3.0.0"
-  resolved "https://github.com/learningequality/kolibri-design-system#293bca18c08b6ba5d3756fec4794f8ddcfa44bb9"
+"kolibri-design-system@https://github.com/AlexVelezLl/kolibri-design-system#2ecd75b2a96a71f4fce5a6f1c7a6092f06f6547f":
+  version "3.0.1"
+  resolved "https://github.com/AlexVelezLl/kolibri-design-system#2ecd75b2a96a71f4fce5a6f1c7a6092f06f6547f"
   dependencies:
     "@vue/composition-api" "^1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"