diff --git a/kolibri/plugins/device/assets/src/views/AvailableChannelsPage/index.vue b/kolibri/plugins/device/assets/src/views/AvailableChannelsPage/index.vue
index 8dcf45af1b0..a35e4b6a532 100644
--- a/kolibri/plugins/device/assets/src/views/AvailableChannelsPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/AvailableChannelsPage/index.vue
@@ -139,7 +139,6 @@
   import omit from 'lodash/omit';
   import some from 'lodash/some';
   import uniqBy from 'lodash/uniqBy';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { TaskResource } from 'kolibri.resources';
@@ -176,7 +175,7 @@
       SelectionBottomBar,
       UiAlert,
     },
-    mixins: [commonCoreStrings, commonDeviceStrings, responsiveWindowMixin, taskNotificationMixin],
+    mixins: [commonCoreStrings, commonDeviceStrings, taskNotificationMixin],
     setup() {
       useContentTasks();
     },
diff --git a/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue b/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue
index 6727bfc97f7..344d93019b0 100644
--- a/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue
+++ b/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue
@@ -81,7 +81,7 @@
   import { mapGetters, mapState } from 'vuex';
   import TechnicalTextBlock from 'kolibri-common/components/AppError/TechnicalTextBlock';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import DeviceAppBarPage from './DeviceAppBarPage';
   import { deviceString } from './commonDeviceStrings';
   import DeviceNameModal from './DeviceNameModal';
@@ -98,7 +98,13 @@
       DeviceNameModal,
       TechnicalTextBlock,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     data() {
       return {
         advancedShown: false,
diff --git a/kolibri/plugins/device/assets/src/views/FacilitiesPage/index.vue b/kolibri/plugins/device/assets/src/views/FacilitiesPage/index.vue
index 92622943283..58f4f0df87e 100644
--- a/kolibri/plugins/device/assets/src/views/FacilitiesPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/FacilitiesPage/index.vue
@@ -193,7 +193,7 @@
 <script>
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonSyncElements from 'kolibri.coreVue.mixins.commonSyncElements';
   import CoreTable from 'kolibri.coreVue.components.CoreTable';
   import { FacilityResource } from 'kolibri.resources';
@@ -243,7 +243,13 @@
       SyncAllFacilitiesModal,
       TasksBar,
     },
-    mixins: [commonCoreStrings, commonSyncElements, facilityTaskQueue, responsiveWindowMixin],
+    mixins: [commonCoreStrings, commonSyncElements, facilityTaskQueue],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     data() {
       return {
         showSyncAllModal: false,
diff --git a/kolibri/plugins/device/assets/src/views/HeaderWithOptions.vue b/kolibri/plugins/device/assets/src/views/HeaderWithOptions.vue
index 83c2b72bddf..0a30067b38a 100644
--- a/kolibri/plugins/device/assets/src/views/HeaderWithOptions.vue
+++ b/kolibri/plugins/device/assets/src/views/HeaderWithOptions.vue
@@ -24,11 +24,16 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   export default {
     name: 'HeaderWithOptions',
-    mixins: [responsiveWindowMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       headerText: {
         type: String,
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/ChannelDetails.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/ChannelDetails.vue
index 5c6f5d14b4e..4c859997bf7 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/ChannelDetails.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/ChannelDetails.vue
@@ -58,7 +58,7 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import CoachContentLabel from 'kolibri.coreVue.components.CoachContentLabel';
 
   export default {
@@ -66,7 +66,12 @@
     components: {
       CoachContentLabel,
     },
-    mixins: [responsiveWindowMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       channel: {
         type: Object,
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue
index 8e47a53a05b..bfc90e38e9b 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue
@@ -38,7 +38,7 @@
 
   // Channel Panel with Details and Checkbox
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import ChannelDetails from './ChannelDetails';
 
   export default {
@@ -46,7 +46,12 @@
     components: {
       ChannelDetails,
     },
-    mixins: [responsiveWindowMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       channel: {
         type: Object,
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithImportDetails.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithImportDetails.vue
index d6da6c6bdec..0afa5af76a2 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithImportDetails.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithImportDetails.vue
@@ -85,7 +85,7 @@
   // Resources on Device Indicator
   import { mapGetters } from 'vuex';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { selectContentPageLink } from '../manageContentLinks';
   import NewBadge from '../NewBadge';
@@ -99,7 +99,13 @@
       ChannelDetails,
       NewBadge,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin, commonDeviceStrings],
+    mixins: [commonCoreStrings, commonDeviceStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       channel: {
         type: Object,
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithSizeAndOptions.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithSizeAndOptions.vue
index 40949432cf2..04725a3f304 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithSizeAndOptions.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithSizeAndOptions.vue
@@ -51,7 +51,7 @@
 
   // ChannelPanel with Details, On-Device Size, and Options Dropdown
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import NewBadge from '../NewBadge';
@@ -64,7 +64,13 @@
       ChannelDetails,
       NewBadge,
     },
-    mixins: [responsiveWindowMixin, commonCoreStrings, commonDeviceStrings],
+    mixins: [commonCoreStrings, commonDeviceStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       channel: {
         type: Object,
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/DeleteExportChannelsPage.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/DeleteExportChannelsPage.vue
index b3e3954aa3c..2ff7da3726d 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/DeleteExportChannelsPage.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/DeleteExportChannelsPage.vue
@@ -54,7 +54,6 @@
 
   import { mapGetters } from 'vuex';
   import find from 'lodash/find';
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import { TaskResource } from 'kolibri.resources';
@@ -85,7 +84,7 @@
       DeleteChannelModal,
       SelectDriveModal,
     },
-    mixins: [KResponsiveWindowMixin, taskNotificationMixin],
+    mixins: [taskNotificationMixin],
     setup() {
       useContentTasks();
     },
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/FilteredChannelListContainer.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/FilteredChannelListContainer.vue
index b4f744d6f9c..aabe96dcbf5 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/FilteredChannelListContainer.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/FilteredChannelListContainer.vue
@@ -61,7 +61,7 @@
   import differenceBy from 'lodash/differenceBy';
   import unionBy from 'lodash/unionBy';
   import uniqBy from 'lodash/uniqBy';
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import FilterTextbox from 'kolibri.coreVue.components.FilterTextbox';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
 
@@ -70,7 +70,13 @@
     components: {
       FilterTextbox,
     },
-    mixins: [KResponsiveWindowMixin, commonCoreStrings],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsLarge } = useKResponsiveWindow();
+      return {
+        windowIsLarge,
+      };
+    },
     props: {
       channels: {
         type: Array,
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectionBottomBar.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectionBottomBar.vue
index 3fac44572bf..40381a15589 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectionBottomBar.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectionBottomBar.vue
@@ -40,7 +40,6 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
 
   // Shows a 'EXPORT', 'IMPORT', or 'DELETE' button next to a message
   // of how many items are selected plus their size.
@@ -49,7 +48,7 @@
     components: {
       BottomAppBar,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
     props: {
       // TODO remove this and only pass in resourceCounts object
       selectedObjects: {
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/TasksBar.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/TasksBar.vue
index 08fcf97ec86..5469f8086ff 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/TasksBar.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/TasksBar.vue
@@ -36,7 +36,6 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import some from 'lodash/some';
   import sumBy from 'lodash/sumBy';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
@@ -44,7 +43,7 @@
 
   export default {
     name: 'TasksBar',
-    mixins: [commonCoreStrings, responsiveWindowMixin, commonTaskStrings],
+    mixins: [commonCoreStrings, commonTaskStrings],
     props: {
       tasks: {
         type: Array,
diff --git a/kolibri/plugins/device/assets/src/views/ManageTasksPage/TaskPanel.vue b/kolibri/plugins/device/assets/src/views/ManageTasksPage/TaskPanel.vue
index 1ffcb45098f..4a2ab128cbd 100644
--- a/kolibri/plugins/device/assets/src/views/ManageTasksPage/TaskPanel.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageTasksPage/TaskPanel.vue
@@ -89,7 +89,7 @@
   // Displays a single Task and its metadata, and provides buttons
   // to cancel or clear it.
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
 
@@ -130,7 +130,13 @@
 
   export default {
     name: 'TaskPanel',
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       task: {
         type: Object,
diff --git a/kolibri/plugins/device/assets/src/views/ManageTasksPage/__test__/__snapshots__/TaskPanel.spec.js.snap b/kolibri/plugins/device/assets/src/views/ManageTasksPage/__test__/__snapshots__/TaskPanel.spec.js.snap
index 4a22e99ad5a..cd97b450630 100644
--- a/kolibri/plugins/device/assets/src/views/ManageTasksPage/__test__/__snapshots__/TaskPanel.spec.js.snap
+++ b/kolibri/plugins/device/assets/src/views/ManageTasksPage/__test__/__snapshots__/TaskPanel.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TaskPanel renders correctly when it is a canceled DISKCONTENTEXPORT task 1`] = `
-<div class="task-panel">
+<div class="task-panel task-panel-sm">
   <div class="icon">
     <transition-stub mode="out-in"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="" style="fill: #c62828;">
         <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
@@ -31,7 +31,7 @@ exports[`TaskPanel renders correctly when it is a canceled DISKCONTENTEXPORT tas
 `;
 
 exports[`TaskPanel renders correctly when it is a canceled DISKEXPORT task (bulk export) 1`] = `
-<div class="task-panel">
+<div class="task-panel task-panel-sm">
   <div class="icon">
     <transition-stub mode="out-in"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="" style="fill: #c62828;">
         <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
diff --git a/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue b/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue
index ae6e274e987..4699084cb1b 100644
--- a/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue
@@ -60,7 +60,7 @@
   import { mapGetters } from 'vuex';
   import { TaskResource } from 'kolibri.resources';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import commonDeviceStrings from '../commonDeviceStrings';
@@ -82,9 +82,13 @@
       BottomAppBar,
       ImmersivePage,
     },
-    mixins: [responsiveWindowMixin, commonCoreStrings, commonDeviceStrings],
+    mixins: [commonCoreStrings, commonDeviceStrings],
     setup() {
       useContentTasks();
+      const { windowIsLarge } = useKResponsiveWindow();
+      return {
+        windowIsLarge,
+      };
     },
     data() {
       return {
diff --git a/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue b/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue
index 7d94c66d16e..ceff7118a37 100644
--- a/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue
+++ b/kolibri/plugins/device/assets/src/views/SelectContentPage/ChannelContentsSummary.vue
@@ -84,7 +84,7 @@
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import plugin_data from 'plugin_data';
 
   export default {
@@ -92,7 +92,13 @@
     components: {
       TextTruncatorCss,
     },
-    mixins: [commonCoreStrings, KResponsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       channel: {
         type: Object,
diff --git a/kolibri/plugins/device/assets/src/views/SelectContentPage/index.vue b/kolibri/plugins/device/assets/src/views/SelectContentPage/index.vue
index f6d8e7f3948..f037d6af811 100644
--- a/kolibri/plugins/device/assets/src/views/SelectContentPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/SelectContentPage/index.vue
@@ -84,7 +84,7 @@
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import { TaskTypes } from 'kolibri.utils.syncTaskUtils';
   import find from 'lodash/find';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { TaskResource } from 'kolibri.resources';
   import commonDeviceStrings from '../commonDeviceStrings';
   import TaskProgress from '../ManageContentPage/TaskProgress';
@@ -119,9 +119,13 @@
       TaskProgress,
       UiAlert,
     },
-    mixins: [commonDeviceStrings, responsiveWindowMixin, taskNotificationMixin],
+    mixins: [commonDeviceStrings, taskNotificationMixin],
     setup() {
       useContentTasks();
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
     },
     data() {
       return {