diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index 4e1a77e7989..17a92e6ce4a 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -21,7 +21,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.5",
-    "kolibri-design-system": "3.0.1",
+    "kolibri-design-system": "3.1.1",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index 0e028cca79d..7dcba5b9c3f 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -39,49 +39,42 @@
         :layout8="{ span: 6 }"
         :layout12="{ span: 10 }"
       >
-        <TabsWithOverflow
+        <KListWithOverflow
           tabsId="quizSectionTabs"
           class="section-tabs"
-          :tabs="tabs"
-          :activeTabId="activeSection ?
-            activeSection.section_id :
-            '' "
-          backgroundColor="transparent"
-          hoverBackgroundColor="transparent"
-          :aria-label="quizSectionsLabel$()"
-          @click="id => setActiveSection(id)"
+          :items="tabs"
         >
-          <template #tab="{ tab }">
+          <template #item="{ item }">
             <span
-              :ref="tabRefLabel(tab.id)"
+              :ref="tabRefLabel(item.id)"
               appearance="flat-button"
               style="display: inline-block;"
               :appearanceOverrides="tabStyles"
             >
-              {{ tab.label }}
+              {{ item.label }}
             </span>
           </template>
 
-          <template #overflow="{ overflowTabs }">
+          <template #more="{ overflowItems }">
             <KIconButton
-              v-if="overflowTabs.length"
+              v-if="overflowItems.length"
               tabindex="-1"
               class="overflow-tabs"
               icon="optionsHorizontal"
-              :style="overflowButtonStyles(overflowTabs)"
+              :style="overflowButtonStyles(overflowItems)"
             >
               <template #menu>
                 <KDropdownMenu
                   :primary="false"
                   :disabled="false"
                   :hasIcons="true"
-                  :options="overflowTabs"
+                  :options="overflowItems"
                   @select="opt => setActiveSection(opt.id)"
                 />
               </template>
             </KIconButton>
           </template>
-        </TabsWithOverflow>
+        </KListWithOverflow>
       </KGridItem>
 
       <KGridItem
@@ -330,10 +323,10 @@
   import DragHandle from 'kolibri.coreVue.components.DragHandle';
   import DragSortWidget from 'kolibri.coreVue.components.DragSortWidget';
   import Draggable from 'kolibri.coreVue.components.Draggable';
+  import KListWithOverflow from 'kolibri-design-system/lib/KListWithOverflow';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
   import commonCoach from '../../common';
   import { PageNames } from '../../../constants';
-  import TabsWithOverflow from './TabsWithOverflow';
   import AccordionContainer from './AccordionContainer';
   import AccordionItem from './AccordionItem';
 
@@ -348,7 +341,7 @@
       Draggable,
       DragSortWidget,
       DragHandle,
-      TabsWithOverflow,
+      KListWithOverflow,
     },
     mixins: [commonCoreStrings, commonCoach],
     setup() {
diff --git a/packages/kolibri-core-for-export/package.json b/packages/kolibri-core-for-export/package.json
index 7836906168d..4f7b8152b88 100644
--- a/packages/kolibri-core-for-export/package.json
+++ b/packages/kolibri-core-for-export/package.json
@@ -24,7 +24,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.5",
-    "kolibri-design-system": "3.0.1",
+    "kolibri-design-system": "3.1.1",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",
diff --git a/yarn.lock b/yarn.lock
index 0804680fecb..338d8e7f69d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2376,6 +2376,15 @@ aphrodite@1.1.0:
     asap "^2.0.3"
     inline-style-prefixer "^2.0.0"
 
+"aphrodite@git+https://github.com/learningequality/aphrodite.git":
+  version "2.2.3"
+  uid fdc8d7be8912a5cf17f74ff10f124013c52c3e32
+  resolved "git+https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  dependencies:
+    asap "^2.0.3"
+    inline-style-prefixer "^4.0.2"
+    string-hash "^1.1.3"
+
 "aphrodite@https://github.com/learningequality/aphrodite/":
   version "2.2.3"
   resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
@@ -7758,10 +7767,10 @@ kolibri-constants@0.2.5:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.5.tgz#2b9df4c477119d0ade2d66bf8aef8a4172f0418f"
   integrity sha512-ZoFZ83xgteZhFZtYjiOmITcZeSF+X42i12TOo87zmcdA78jj0dZbPYB+ttO855UxoKY8h4HHeDVZIUkE5TGa5g==
 
-kolibri-design-system@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-3.0.1.tgz#ba6368c78ffab1d6195b828b1aacc4f11b9a67c3"
-  integrity sha512-/O+KuYTGiv5z9VTlm8bIWZwanMdearGmIP162EqaVn2tIbo/hY42lsuAbGSTZPi5CITm+LJ9r99ogImDRH8z2w==
+kolibri-design-system@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-3.1.1.tgz#f140b5732d57432eb6ac02af6a01ba00d227eedf"
+  integrity sha512-cqC3J0ztp2VpGjrs4G0ujgxVYFQb96BXnfqiYg/mmmOVd+mSA2ci3dCFUKYXRtFZQswcLAL2XeaFg0aWpqVdXg==
   dependencies:
     "@vue/composition-api" "^1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"