diff --git a/contentcuration/contentcuration/frontend/accounts/pages/Main.vue b/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
index 49833f60e2..c2ba1f5616 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
@@ -12,13 +12,13 @@
           class="pa-4"
           style="width: 300px;margin: 0 auto;"
         >
-          <VImg
-            height="200"
-            maxHeight="100"
-            contain
-            :lazy-src="require('shared/images/kolibri-logo.svg')"
-            :src="require('shared/images/kolibri-logo.svg')"
-          />
+          <div class="k-logo-container">
+            <KLogo
+              altText="Kolibri Logo with background"
+              :showBackground="true"
+              :size="120"
+            />
+          </div>
           <h2 class="primary--text py-2 text-xs-center">
             {{ $tr('kolibriStudio') }}
           </h2>
@@ -227,4 +227,9 @@
     width: 100%;
   }
 
+  .k-logo-container {
+    display: flex;
+    justify-content: center;
+  }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
index b4185d8a85..d9ee750c28 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
@@ -52,7 +52,7 @@
       <template #progress>
         <VProgressLinear
           v-if="loading"
-          color="primary"
+          color="loading"
           indeterminate
           data-test="loading"
         />
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
index 66953024d3..199d1f1ef4 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
@@ -63,7 +63,7 @@
       :class="{ expanded: $vuetify.breakpoint.mdAndUp }"
     >
       <template #progress>
-        <VProgressLinear v-if="loading" color="primary" indeterminate />
+        <VProgressLinear v-if="loading" color="loading" indeterminate />
       </template>
 
       <template #headerCell="{ header }">
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeValidator.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeValidator.vue
index d37b6022cb..c35742e8ba 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeValidator.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeValidator.vue
@@ -9,7 +9,7 @@
   <span v-else-if="error" class="mx-2">
     <VTooltip bottom lazy>
       <template #activator="{ on }">
-        <Icon color="red" v-on="on">
+        <Icon :color="$themePalette.red.v_1100" v-on="on">
           error
         </Icon>
       </template>
@@ -19,7 +19,7 @@
   <span v-else-if="warning" class="mx-2">
     <VTooltip bottom lazy>
       <template #activator="{ on }">
-        <Icon color="amber" v-on="on">
+        <Icon :color="$themePalette.yellow.v_1100" v-on="on">
           warning
         </Icon>
       </template>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
index a4c08c1c0f..f816b6d240 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
@@ -118,6 +118,7 @@
                         v-if="loading"
                         class="mx-3"
                         indeterminate
+                        color="loading"
                         size="15"
                         width="2"
                       />
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
index 995072d190..6faeb52413 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
@@ -22,7 +22,7 @@
             <!-- Toolbar + extension -->
             <VToolbar
               dark
-              color="primary"
+              color="appBarDark"
               fixed
               flat
               :clipped-left="!$isRTL"
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/SavingIndicator.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/SavingIndicator.vue
index 09a43210b0..0638969eda 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/SavingIndicator.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/SavingIndicator.vue
@@ -2,7 +2,7 @@
 
   <div class="mx-2">
     <template v-if="hasChanges">
-      <VProgressCircular indeterminate size="16" width="2" color="secondary" />
+      <VProgressCircular indeterminate size="16" width="2" color="loading" />
       <span class="mx-2" style="vertical-align: middle;">
         {{ $tr('savingIndicator') }}
       </span>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index 5566b290a0..a76b0494f6 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -73,7 +73,7 @@
               v-on="on"
             >
               {{ $formatNumber(errorsInChannel) }}
-              <Icon color="amber">
+              <Icon :color="$themePalette.yellow.v_1100">
                 warning
               </Icon>
             </div>
@@ -204,7 +204,7 @@
         <slot name="extension"></slot>
       </template>
     </ToolBar>
-    <MainNavigationDrawer v-model="drawer" />
+    <MainNavigationDrawer v-model="drawer" color="white" />
     <slot></slot>
 
     <PublishModal
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index 16cdf100f7..4dee071859 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -3,7 +3,7 @@
   <VApp>
     <VToolbar
       v-if="libraryMode || isFAQPage"
-      color="primary"
+      color="appBarDark"
       dark
       :clipped-left="!$isRTL"
       :clipped-right="$isRTL"
@@ -12,11 +12,15 @@
       <VToolbarSideIcon
         :href="homeLink"
         exact
-        color="white"
+        color="appBarDark"
         class="ma-0"
         style="border-radius: 8px;"
       >
-        <KolibriLogo />
+        <KLogo
+          altText="Kolibri Logo with background"
+          :showBackground="true"
+          :size="36"
+        />
       </VToolbarSideIcon>
 
       <VToolbarTitle class="notranslate">
@@ -31,7 +35,7 @@
           :to="getChannelLink(listType)"
           @click="trackTabClick(listType)"
         >
-          <VBadge :value="invitationsByListCounts[listType]" color="secondary">
+          <VBadge :value="invitationsByListCounts[listType]" color="black">
             <template #badge>
               <span>{{ $formatNumber(invitationsByListCounts[listType]) }}</span>
             </template>
@@ -96,7 +100,6 @@
   import { ChannelListTypes } from 'shared/constants';
   import { constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import GlobalSnackbar from 'shared/views/GlobalSnackbar';
-  import KolibriLogo from 'shared/views/KolibriLogo';
   import AppBar from 'shared/views/AppBar';
   import OfflineText from 'shared/views/OfflineText';
   import PolicyModals from 'shared/views/policies/PolicyModals';
@@ -123,7 +126,6 @@
       ChannelInvitation,
       ChannelListAppError,
       GlobalSnackbar,
-      KolibriLogo,
       PolicyModals,
       OfflineText,
     },
diff --git a/contentcuration/contentcuration/frontend/settings/pages/Storage/RequestForm.vue b/contentcuration/contentcuration/frontend/settings/pages/Storage/RequestForm.vue
index faa01aac37..aaed431916 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/Storage/RequestForm.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/Storage/RequestForm.vue
@@ -142,7 +142,7 @@
       v-for="affiliation in affiliationOptions"
       :key="affiliation.value"
       v-model="org_or_personal"
-      :value="affiliation.value"
+      :buttonValue="affiliation.value"
       :invalid="errors.org_or_personal"
       :showInvalidText="errors.org_or_personal"
       :invalidText="$tr('fieldRequiredText')"
@@ -172,7 +172,7 @@
       v-for="orgType in organizationTypeOptions"
       :key="orgType.value"
       v-model="organization_type"
-      :value="orgType.value"
+      :buttonValue="orgType.value"
       :invalid="errors.organization_type"
       :showInvalidText="errors.organization_type"
       :invalidText="$tr('fieldRequiredText')"
@@ -199,7 +199,7 @@
       v-for="constraint in timeConstraintOptions"
       :key="constraint.value"
       v-model="time_constraint"
-      :value="constraint.value"
+      :buttonValue="constraint.value"
       :label="constraint.text"
     />
 
diff --git a/contentcuration/contentcuration/frontend/shared/i18n/index.js b/contentcuration/contentcuration/frontend/shared/i18n/index.js
index 249b5ac561..f6a2ebf17f 100644
--- a/contentcuration/contentcuration/frontend/shared/i18n/index.js
+++ b/contentcuration/contentcuration/frontend/shared/i18n/index.js
@@ -1,15 +1,28 @@
 import Vue from 'vue';
 import has from 'lodash/has';
-import { languageDirections, defaultLanguage } from 'kolibri-design-system/lib/utils/i18n';
 import importVueIntlLocaleData from './vue-intl-locale-data';
 import importIntlLocale from './intl-locale-data';
 
-export {
-  languageDirections,
-  defaultLanguage,
-  languageValidator,
-  getContentLangDir,
-} from 'kolibri-design-system/lib/utils/i18n';
+const languageDirections = {
+  LTR: 'ltr',
+  RTL: 'rtl',
+};
+
+const defaultLanguage = {
+  id: 'en',
+  lang_name: 'English',
+  lang_direction: languageDirections.LTR,
+};
+
+const languageValidator = language => {
+  return ['id', 'lang_name', 'lang_direction'].reduce((valid, key) => valid && language[key], true);
+};
+
+const getContentLangDir = language => {
+  return (language || {}).lang_direction || languageDirections.LTR;
+};
+
+export { languageDirections, defaultLanguage, languageValidator, getContentLangDir };
 
 let _i18nReady = false;
 
diff --git a/contentcuration/contentcuration/frontend/shared/languageSwitcher/LanguageSwitcherModal.vue b/contentcuration/contentcuration/frontend/shared/languageSwitcher/LanguageSwitcherModal.vue
index 9eb3c03362..d3c8cfe83b 100644
--- a/contentcuration/contentcuration/frontend/shared/languageSwitcher/LanguageSwitcherModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/languageSwitcher/LanguageSwitcherModal.vue
@@ -19,7 +19,7 @@
           v-for="language in languageCol"
           :key="language.id"
           v-model="selectedLanguage"
-          :value="language.id"
+          :buttonValue="language.id"
           :label="language.lang_name"
           :title="language.english_name"
           class="language-name"
diff --git a/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue b/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue
index 89f53056a9..ef83b58e64 100644
--- a/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue
+++ b/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue
@@ -1,7 +1,7 @@
 <template>
 
   <VApp>
-    <VToolbar app dark color="primary">
+    <VToolbar app dark color="appBarDark">
       <VBtn v-if="backButton" flat :to="previousPage" exact>
         <Icon class="rtl-flip">
           arrow_back
diff --git a/contentcuration/contentcuration/frontend/shared/views/AppBar.vue b/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
index f437e06e51..9563455463 100644
--- a/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
@@ -3,10 +3,9 @@
   <div>
     <VToolbar
       app
-      dark
       :clipped-left="!$isRTL"
       :clipped-right="$isRTL"
-      color="primary"
+      color="appBar"
       height="56"
       :tabs="Boolean($slots.tabs)"
     >
@@ -15,11 +14,14 @@
         v-else
         :href="homeLink"
         exact
-        color="white"
+        color="appBar"
         class="ma-0"
         style="border-radius: 8px;"
       >
-        <KolibriLogo />
+        <KLogo
+          altText="Kolibri Logo with background"
+          :size="36"
+        />
       </VToolbarSideIcon>
 
       <VToolbarTitle>
@@ -31,9 +33,17 @@
           <Menu>
             <template #activator="{ on }">
               <VBtn flat style="text-transform: none;" v-on="on">
-                <Icon>person</Icon>
+                <KIconButton
+                  disabled="true"
+                  icon="person"
+                  color="black"
+                />
                 <span class="mx-2 subheading">{{ user.first_name }}</span>
-                <Icon>arrow_drop_down</Icon>
+                <KIconButton
+                  disabled="true"
+                  icon="dropdown"
+                  color="black"
+                />
               </VBtn>
             </template>
             <VList>
@@ -124,7 +134,6 @@
 <script>
 
   import { mapActions, mapState, mapGetters } from 'vuex';
-  import KolibriLogo from './KolibriLogo';
   import Tabs from 'shared/views/Tabs';
   import MainNavigationDrawer from 'shared/views/MainNavigationDrawer';
   import LanguageSwitcherModal from 'shared/languageSwitcher/LanguageSwitcherModal';
@@ -132,7 +141,6 @@
   export default {
     name: 'AppBar',
     components: {
-      KolibriLogo,
       LanguageSwitcherModal,
       MainNavigationDrawer,
       Tabs,
diff --git a/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue b/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
index 14a4e3ee91..d37b2a92d0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
@@ -13,7 +13,7 @@
     <VCard style="overflow-y: auto;">
       <VToolbar
         :color="color"
-        dark
+        :dark="dark"
         fixed
         :extension-height="48"
         clipped-left
@@ -81,7 +81,11 @@
       },
       color: {
         type: String,
-        default: 'primary',
+        default: 'appBarDark',
+      },
+      dark: {
+        type: Boolean,
+        default: true,
       },
     },
     computed: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/KolibriLogo.vue b/contentcuration/contentcuration/frontend/shared/views/KolibriLogo.vue
deleted file mode 100644
index 027f02561e..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/KolibriLogo.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-
-  <img
-    :height="`${height}px`"
-    width="auto"
-    :src="require('shared/images/kolibri-logo.svg')"
-  >
-
-</template>
-
-
-<script>
-
-  export default {
-    name: 'KolibriLogo',
-    props: {
-      height: {
-        type: Number,
-        default: 28,
-      },
-    },
-  };
-
-</script>
-
-
-<style lang="less" scoped>
-
-  img {
-    object-fit: contain;
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/LoadingText.vue b/contentcuration/contentcuration/frontend/shared/views/LoadingText.vue
index 6d65d0d400..070c1a22a0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/LoadingText.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/LoadingText.vue
@@ -11,7 +11,7 @@
       <VProgressCircular
         :size="70"
         :width="7"
-        color="secondary"
+        color="loading"
         indeterminate
       />
     </VFlex>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
index 7f1843ccc5..c7e37daf97 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
@@ -8,9 +8,12 @@
       style="z-index: 1000;"
       :right="$isRTL"
     >
-      <VToolbar color="primary" dark>
+      <VToolbar :color="color">
         <VBtn flat icon :tabindex="handleclickTab" @click="drawer = false">
-          <Icon>clear</Icon>
+          <KIconButton
+            icon="clear"
+            color="black"
+          />
         </VBtn>
         <VToolbarTitle class="notranslate">
           Kolibri Studio
@@ -73,7 +76,11 @@
         </VListTile>
       </VList>
       <VContainer>
-        <KolibriLogo :height="75" />
+        <KLogo
+          altText="Kolibri logo"
+          :showBackground="true"
+          :size="88"
+        />
         <ActionLink
           :text="$tr('copyright', { year: new Date().getFullYear() })"
           href="https://learningequality.org/"
@@ -106,13 +113,11 @@
 <script>
 
   import { mapActions, mapState } from 'vuex';
-  import KolibriLogo from './KolibriLogo';
   import LanguageSwitcherModal from 'shared/languageSwitcher/LanguageSwitcherModal';
 
   export default {
     name: 'MainNavigationDrawer',
     components: {
-      KolibriLogo,
       LanguageSwitcherModal,
     },
     props: {
@@ -120,6 +125,10 @@
         type: Boolean,
         default: false,
       },
+      color: {
+        type: String,
+        default: 'appBar',
+      },
     },
     data() {
       return {
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
index a67c060203..b86e7869eb 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
@@ -2,7 +2,8 @@
 
   <FullscreenModal
     v-model="dialog"
-    color="black"
+    color="appBarDark"
+    :dark="true"
   >
     <template #header>
       <span class="notranslate">{{ channel ? channel.name : '' }}</span>
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
index 50f66d3679..97646e7aca 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
@@ -20,7 +20,7 @@
     <VProgressLinear
       v-if="loading"
       indeterminate
-      color="primary"
+      color="loading"
       style="margin: 0;"
       height="5"
     />
diff --git a/contentcuration/contentcuration/frontend/shared/views/errors/TechnicalTextBlock.vue b/contentcuration/contentcuration/frontend/shared/views/errors/TechnicalTextBlock.vue
index 79e81962f5..8fcb5968be 100644
--- a/contentcuration/contentcuration/frontend/shared/views/errors/TechnicalTextBlock.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/errors/TechnicalTextBlock.vue
@@ -9,8 +9,8 @@
       wrap="soft"
       aria-hidden="true"
       :style="[dynamicHeightStyle, {
-        backgroundColor: $themePalette.grey.v_200,
-        border: $themePalette.grey.v_300,
+        backgroundColor: $themePalette.grey.v_50,
+        border: $themePalette.grey.v_100,
       }]"
     >
     </textarea>
diff --git a/contentcuration/contentcuration/frontend/shared/vuetify/theme.js b/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
index add22c47ef..47caf85a99 100644
--- a/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
+++ b/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
@@ -1,35 +1,34 @@
-import colors from 'vuetify/es5/util/colors';
-import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
+import { themeBrand, themePalette, themeTokens } from 'kolibri-design-system/lib/styles/theme';
 
 export default function theme() {
+  const palette = themePalette();
+  const brand = themeBrand();
+  const tokens = themeTokens();
   return Object.assign(
     {
-      purple: '#996189',
-      primary: '#996189',
-      secondary: '#8DC5B6',
-      primaryBackground: colors.purple.lighten5,
-      backgroundColor: colors.grey.lighten5,
-      greyBackground: colors.grey.lighten3,
-      greyBorder: colors.grey.lighten1,
-      grey: colors.grey.darken1,
-      darkGrey: colors.grey.darken2,
-      greenSuccess: '#4db6ac',
-      topic: colors.grey.base,
-      video: '#283593',
-      image: '#283593', // IDK what this is supposed to be
-      audio: '#f06292',
-      document: '#ff3d00',
-      exercise: '#4db6ac',
-      h5p: '#ff8f00',
-      html5: '#ff8f00',
-      zim: '#ff8f00',
-      slideshow: '#4ece90',
-      channelHighlightDefault: colors.grey.lighten3,
-      draggableDropZone: '#dddddd',
-      draggableDropOverlay: '#996189',
-      greenHighlightBackground: '#E3F0ED',
-      roleVisibilityCoach: '#01a9f3',
+      loading: palette.black,
+      primaryBackground: brand.primary.v_200,
+      backgroundColor: palette.grey.v_50,
+      greyBackground: palette.grey.v_200,
+      greyBorder: palette.grey.v_400,
+      grey: palette.grey.v_600,
+      darkGrey: palette.grey.v_800,
+      greenSuccess: tokens.success,
+      topic: palette.grey.v_400,
+      video: tokens.watch,
+      audio: tokens.listen,
+      document: tokens.read,
+      exercise: tokens.practice,
+      h5p: tokens.explore,
+      html5: tokens.explore,
+      zim: tokens.explore,
+      slideshow: tokens.read,
+      channelHighlightDefault: palette.grey.v_200,
+      draggableDropZone: palette.grey.v_100,
+      draggableDropOverlay: brand.primary.v_400,
+      greenHighlightBackground: brand.secondary.v_200,
+      roleVisibilityCoach: palette.lightblue.v_1100,
     },
-    themeTokens()
+    tokens
   );
 }
diff --git a/package.json b/package.json
index 497b3f54b1..a3403bc5af 100644
--- a/package.json
+++ b/package.json
@@ -71,8 +71,8 @@
     "jquery": "^2.2.4",
     "jspdf": "https://github.com/parallax/jsPDF.git#b7a1d8239c596292ce86dafa77f05987bcfa2e6e",
     "jszip": "^3.10.1",
-    "kolibri-constants": "^0.1.41",
-    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#e9a2ff34716bb6412fe99f835ded5b17345bab94",
+    "kolibri-constants": "^0.2.0",
+    "kolibri-design-system": "^4.2.0",
     "lodash": "^4.17.21",
     "material-icons": "0.3.1",
     "mutex-js": "^1.1.5",
@@ -117,8 +117,8 @@
     "npm-run-all": "^4.1.3",
     "stylus": "^0.59.0",
     "stylus-loader": "^7.1.3",
-    "workbox-webpack-plugin": "^7.0.0",
-    "web-streams-polyfill": "^3.2.1"
+    "web-streams-polyfill": "^3.2.1",
+    "workbox-webpack-plugin": "^7.0.0"
   },
   "false": {},
   "peerDependencies": {},
diff --git a/yarn.lock b/yarn.lock
index 57bf596870..f6e3b931a3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3012,6 +3012,11 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/composition-api@1.7.2":
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-1.7.2.tgz#0b656f3ec39fefc2cf40aaa8c12426bcfeae1b44"
+  integrity sha512-M8jm9J/laYrYT02665HkZ5l2fWTK4dcVg3BsDHm/pfz+MjDYwX+9FUaZyGwEyXEDonQYRCo0H7aLgdklcIELjw==
+
 "@vue/test-utils@1.0.0-beta.29":
   version "1.0.0-beta.29"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.0-beta.29.tgz#c942cf25e891cf081b6a03332b4ae1ef430726f0"
@@ -3420,17 +3425,17 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-"aphrodite@https://github.com/learningequality/aphrodite.git":
+"aphrodite@git+https://github.com/learningequality/aphrodite.git":
   version "2.2.3"
-  resolved "https://github.com/learningequality/aphrodite.git#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/":
+"aphrodite@https://github.com/learningequality/aphrodite.git":
   version "2.2.3"
-  resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  resolved "https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
   dependencies:
     asap "^2.0.3"
     inline-style-prefixer "^4.0.2"
@@ -3659,7 +3664,7 @@ autoprefixer@^9.6.1:
     postcss "^7.0.32"
     postcss-value-parser "^4.1.0"
 
-autosize@^3.0.20, autosize@^3.0.21:
+autosize@3.0.21:
   version "3.0.21"
   resolved "https://registry.yarnpkg.com/autosize/-/autosize-3.0.21.tgz#f182f40d17757d978a139a4c9ca40c4c0e448603"
   integrity sha512-xGFj5jTV4up6+fxRwtnAWiCIx/5N0tEnFn5rdhAkK1Lq2mliLMuGJgP5Bf4phck3sHGYrVKpYwugfJ61MSz9nA==
@@ -4824,10 +4829,10 @@ css-declaration-sorter@^6.3.1:
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz#630618adc21724484b3e9505bce812def44000ad"
   integrity sha512-jDfsatwWMWN0MODAFuHszfjphEXfNw9JUAhmY4pLu3TyTU+ohUpsbVtbU+1MZn4a47D9kqh03i4eyOm+74+zew==
 
-css-element-queries@^1.2.0:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/css-element-queries/-/css-element-queries-1.2.3.tgz#e14940b1fcd4bf0da60ea4145d05742d7172e516"
-  integrity sha512-QK9uovYmKTsV2GXWQiMOByVNrLn2qz6m3P7vWpOR4IdD6I3iXoDw5qtgJEN3Xq7gIbdHVKvzHjdAtcl+4Arc4Q==
+css-element-queries@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/css-element-queries/-/css-element-queries-1.2.0.tgz#081373d7f30302adad46b7c29b83b85f8ef8f62c"
+  integrity sha512-4gaxpioSFueMcp9yj1TJFCLjfooGv38y6ZdwFUS3GuS+9NIVijdeiExXKwSIHoQDADfpgnaYSTzmJs+bV+Hehg==
 
 css-functions-list@^3.1.0:
   version "3.1.0"
@@ -5054,6 +5059,11 @@ data-urls@^3.0.2:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^11.0.0"
 
+date-fns@1.30.1:
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
+  integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@@ -5126,11 +5136,6 @@ deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^2.0.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
-  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
-
 deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
@@ -6478,7 +6483,7 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
-frame-throttle@^3.0.0:
+frame-throttle@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/frame-throttle/-/frame-throttle-3.0.0.tgz#a666e007c10af6239909cf73871be09a7ea1c6d1"
   integrity sha512-ENBi8VP95xoHf8JpxPwEaCdZneOrtxl0U2H5p2oS896u3NzriR9kRcylvJ+FcCW3qZfZFJ5TDeOT5LbENndBnQ==
@@ -6545,7 +6550,7 @@ functions-have-names@^1.2.2:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
-fuzzysearch@^1.0.3:
+fuzzysearch@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/fuzzysearch/-/fuzzysearch-1.0.3.tgz#dffc80f6d6b04223f2226aa79dd194231096d008"
   integrity sha512-s+kNWQuI3mo9OALw0HJ6YGmMbLqEufCh2nX/zzV5CrICQ/y4AwPxM+6TIiF9ItFCHXFCyM/BfCCmN57NTIJuPg==
@@ -8980,17 +8985,6 @@ jszip@^3.7.1:
     readable-stream "~2.3.6"
     setimmediate "^1.0.5"
 
-keen-ui@^1.3.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/keen-ui/-/keen-ui-1.3.2.tgz#252cab973282d4cd477c45ac92015595d1b1fff1"
-  integrity sha512-WlyNRB8+ei47n87Om973HXUzLqL+Ili7hcNkG6gar/Jqfykpghgx+eSy2vyRq7oEBO2dGr0QgZ3A9eXq/eP14Q==
-  dependencies:
-    autosize "^3.0.20"
-    deepmerge "^2.0.1"
-    fuzzysearch "^1.0.3"
-    lodash.debounce "^4.0.8"
-    tippy.js "^4.2.1"
-
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -9030,25 +9024,29 @@ known-css-properties@^0.25.0:
   resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.25.0.tgz#6ebc4d4b412f602e5cfbeb4086bd544e34c0a776"
   integrity sha512-b0/9J1O9Jcyik1GC6KC42hJ41jKwdO/Mq8Mdo5sYN+IuRTXs2YFHZC3kZSx6ueusqa95x3wLYe/ytKjbAfGixA==
 
-kolibri-constants@^0.1.41:
-  version "0.1.42"
-  resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.1.42.tgz#2f62a8d8b8894e5cfbd47ee6564b31018818c93f"
-  integrity sha512-2hUxYnzUEfhLFJO9egVSwYW8/PKob9wLeDYfB74mtIzgQ4zy6huRj3574WetK9gREi+W1Jcm7HGPsfZIFzFvrA==
+kolibri-constants@^0.2.0:
+  version "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@https://github.com/learningequality/kolibri-design-system#e9a2ff34716bb6412fe99f835ded5b17345bab94":
-  version "1.3.0"
-  resolved "https://github.com/learningequality/kolibri-design-system#e9a2ff34716bb6412fe99f835ded5b17345bab94"
+kolibri-design-system@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-4.2.0.tgz#7ef5355ecfd330893e4f9b37ec2bcad6b4cd9e56"
+  integrity sha512-50lkYsPIx0zfrbAwsEC5QPMJcpmZGmne8BhFVtgcWS4xEn6Uc6BefHQAxqZriomnLRd5otAP3XwFkrkycly0fA==
   dependencies:
+    "@vue/composition-api" "1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"
-    autosize "^3.0.21"
-    css-element-queries "^1.2.0"
-    frame-throttle "^3.0.0"
-    fuzzysearch "^1.0.3"
-    keen-ui "^1.3.0"
-    lodash "^4.17.15"
-    popper.js "^1.14.6"
-    purecss "^0.6.2"
-    tippy.js "^4.2.1"
+    autosize "3.0.21"
+    css-element-queries "1.2.0"
+    date-fns "1.30.1"
+    frame-throttle "3.0.0"
+    fuzzysearch "1.0.3"
+    lodash "4.17.21"
+    popper.js "1.16.1"
+    purecss "2.2.0"
+    tippy.js "4.2.1"
+    vue-intl "3.1.0"
+    xstate "4.38.3"
 
 kolibri-tools@0.16.0-dev.3:
   version "0.16.0-dev.3"
@@ -10524,7 +10522,7 @@ pngjs@^3.0.0, pngjs@^3.3.3:
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
   integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
 
-popper.js@^1.14.6, popper.js@^1.14.7:
+popper.js@1.16.1, popper.js@^1.14.7:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
   integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
@@ -11016,10 +11014,10 @@ pure-rand@^6.0.0:
   resolved "https://registry.yarnpkg.com/pure-rand/-/pure-rand-6.0.2.tgz#a9c2ddcae9b68d736a8163036f088a2781c8b306"
   integrity sha512-6Yg0ekpKICSjPswYOuC5sku/TSWaRYlA0qsXqJgM/d/4pLPHPuTxK7Nbf7jFKzAeedUhR8C7K9Uv63FBsSo8xQ==
 
-purecss@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/purecss/-/purecss-0.6.2.tgz#f0827d227e909543c5138f36d56c8c613f476b8c"
-  integrity sha512-6BZF+rr9UAy8xwWDW6mi//2TnImxqMAjfLTYCO80OzPcavSI3DMjnD4fY92383KB5FA+gEHO/ug46q/yeitu9w==
+purecss@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/purecss/-/purecss-2.2.0.tgz#71249802e1babd562b236cf5d0b75b16f158a421"
+  integrity sha512-jEPrAALLgE+InDARWdPDt0AkZ1Bi0yXxHj4BOwWImq06sGIDe5CagPyS6Z9WGyEgMuZonrrhinInJ80nAHTIUA==
 
 qs@6.10.3:
   version "6.10.3"
@@ -12844,10 +12842,10 @@ tinycolor2@^1.4.1:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
   integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
 
-tippy.js@^4.2.1:
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-4.3.5.tgz#882bff8d92f09bb0546d2826d5668c0560006f54"
-  integrity sha512-NDq3efte8nGK6BOJ1dDN1/WelAwfmh3UtIYXXck6+SxLzbIQNZE/cmRSnwScZ/FyiKdIcvFHvYUgqmoGx8CcyA==
+tippy.js@4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-4.2.1.tgz#9e4939d976465f77229b05a3cb233b5dc28cf850"
+  integrity sha512-xEE7zYNgQxCDdPcuT6T04f0frPh0wO7CcIqJKMFazU/NqusyjCgYSkLRosIHoiRkZMRzSPOudC8wRN5GjvAyOQ==
   dependencies:
     popper.js "^1.14.7"
 
@@ -13403,7 +13401,7 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
-vue-intl@^3.0.0:
+vue-intl@3.1.0, vue-intl@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/vue-intl/-/vue-intl-3.1.0.tgz#707f1f7406595c9b4afc6049254b333093be37be"
   integrity sha512-0v3S5gspuYnt6j1G+KLfPUsNnjRdbMOcYrWYoSd1gYk6rX8VuOyh7NLztPrSIJt+NLs/qzLOZXxI1LORukEiqA==
@@ -14106,6 +14104,11 @@ xmldom@^0.1.22:
   resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.31.tgz#b76c9a1bd9f0a9737e5a72dc37231cf38375e2ff"
   integrity sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==
 
+xstate@4.38.3:
+  version "4.38.3"
+  resolved "https://registry.yarnpkg.com/xstate/-/xstate-4.38.3.tgz#4e15e7ad3aa0ca1eea2010548a5379966d8f1075"
+  integrity sha512-SH7nAaaPQx57dx6qvfcIgqKRXIh4L0A1iYEqim4s1u7c9VoCgzZc+63FY90AKU4ZzOC2cfJzTnpO4zK7fCUzzw==
+
 xtend@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"