diff --git a/kolibri/plugins/coach/assets/src/views/common/HeaderTabs/index.vue b/kolibri/plugins/coach/assets/src/views/common/HeaderTabs/index.vue
index e7195fc1e9c..cda1d0d2e30 100644
--- a/kolibri/plugins/coach/assets/src/views/common/HeaderTabs/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/HeaderTabs/index.vue
@@ -14,11 +14,16 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   export default {
     name: 'HeaderTabs',
-    mixins: [responsiveWindowMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       enablePrint: {
         type: Boolean,
diff --git a/kolibri/plugins/coach/assets/src/views/home/HomePage/BlockItem.vue b/kolibri/plugins/coach/assets/src/views/home/HomePage/BlockItem.vue
index 8cae6bd7a55..f9635007d9a 100644
--- a/kolibri/plugins/coach/assets/src/views/home/HomePage/BlockItem.vue
+++ b/kolibri/plugins/coach/assets/src/views/home/HomePage/BlockItem.vue
@@ -13,11 +13,16 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   export default {
     name: 'BlockItem',
-    mixins: [responsiveWindowMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
   };
 
 </script>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateExamPreview.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateExamPreview.vue
index 7a35e7128c8..be1d0f70071 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateExamPreview.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateExamPreview.vue
@@ -125,7 +125,6 @@
   import { mapState } from 'vuex';
 
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import { ERROR_CONSTANTS } from 'kolibri.coreVue.vuex.constants';
   import CatchErrors from 'kolibri.utils.CatchErrors';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
@@ -141,7 +140,7 @@
       CoachImmersivePage,
       QuestionListPreview,
     },
-    mixins: [responsiveWindowMixin, commonCoach, commonCoreStrings],
+    mixins: [commonCoach, commonCoreStrings],
     data() {
       return {
         showError: false,
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreatePracticeQuizPage.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreatePracticeQuizPage.vue
index 1dafc0d0864..cae42e01ac6 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreatePracticeQuizPage.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreatePracticeQuizPage.vue
@@ -41,7 +41,6 @@
 
   import { mapState } from 'vuex';
   import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import ResourceSelectionBreadcrumbs from '../../plan/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs';
   import { PageNames } from '../../../constants';
@@ -56,7 +55,7 @@
       ContentCardList,
       ResourceSelectionBreadcrumbs,
     },
-    mixins: [commonCoreStrings, commonCoach, responsiveWindowMixin],
+    mixins: [commonCoreStrings, commonCoach],
     data() {
       return {
         viewMoreButtonState: 'no_more_results',
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
index 6c1e658bc7a..41aadf022c3 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -41,7 +41,6 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import pickBy from 'lodash/pickBy';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
@@ -60,7 +59,7 @@
       BottomAppBar,
       CreateQuizSection,
     },
-    mixins: [commonCoreStrings, commonCoach, responsiveWindowMixin],
+    mixins: [commonCoreStrings, commonCoach],
     data() {
       return {
         quizForge,
diff --git a/kolibri/plugins/coach/assets/src/views/plan/GroupEnrollPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/GroupEnrollPage/index.vue
index 3df95c218f5..ae514a3bafb 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/GroupEnrollPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/GroupEnrollPage/index.vue
@@ -79,7 +79,6 @@
 
   import { mapActions, mapGetters, mapState } from 'vuex';
   import differenceWith from 'lodash/differenceWith';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import FilterTextbox from 'kolibri.coreVue.components.FilterTextbox';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import filterUsersByNames from 'kolibri.utils.filterUsersByNames';
@@ -94,7 +93,7 @@
       FilterTextbox,
       UserTable,
     },
-    mixins: [responsiveWindowMixin, commonCoach, commonCoreStrings],
+    mixins: [commonCoach, commonCoreStrings],
     data() {
       return {
         filterInput: '',
diff --git a/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/GroupRow.vue b/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/GroupRow.vue
index 7f751e52da2..d94499ebfce 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/GroupRow.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/GroupRow.vue
@@ -32,13 +32,12 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonCoach from '../../common';
 
   export default {
     name: 'GroupRow',
-    mixins: [commonCoach, commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoach, commonCoreStrings],
     props: {
       group: {
         type: Object,
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
index 100f6d369f4..c64bf7f18ca 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
@@ -61,11 +61,11 @@
 
 <script>
 
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import CoachContentLabel from 'kolibri.coreVue.components.CoachContentLabel';
   import ContentIcon from 'kolibri.coreVue.components.ContentIcon';
   import { validateLinkObject, validateContentNodeKind } from 'kolibri.utils.validators';
   import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import CardThumbnail from './CardThumbnail';
 
   export default {
@@ -76,7 +76,12 @@
       TextTruncatorCss,
       CoachContentLabel,
     },
-    mixins: [responsiveWindowMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       title: {
         type: String,
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue
index 24b9a6a582d..421046311e4 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue
@@ -117,7 +117,7 @@
   import pickBy from 'lodash/pickBy';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoach from '../../common';
   import CoachAppBarPage from '../../CoachAppBarPage';
   import CoachImmersivePage from '../../CoachImmersivePage';
@@ -146,7 +146,13 @@
       BottomAppBar,
       BookmarkIcon,
     },
-    mixins: [commonCoach, commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoach, commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     data() {
       return {
         // null corresponds to 'All' filter value