diff --git a/kolibri/plugins/facility/assets/src/views/ClassEnrollForm.vue b/kolibri/plugins/facility/assets/src/views/ClassEnrollForm.vue
index ccf93336ad3..2f7da371ef6 100644
--- a/kolibri/plugins/facility/assets/src/views/ClassEnrollForm.vue
+++ b/kolibri/plugins/facility/assets/src/views/ClassEnrollForm.vue
@@ -39,7 +39,6 @@
   import { mapState } from 'vuex';
   import pickBy from 'lodash/pickBy';
   import debounce from 'lodash/debounce';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import FilterTextbox from 'kolibri.coreVue.components.FilterTextbox';
   import UserTable from 'kolibri.coreVue.components.UserTable';
@@ -54,7 +53,7 @@
       UserTable,
       FilterTextbox,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
     props: {
       pageType: {
         type: String,
diff --git a/kolibri/plugins/facility/assets/src/views/DataPage/index.vue b/kolibri/plugins/facility/assets/src/views/DataPage/index.vue
index c8dec871f34..51c6dbe2ad1 100644
--- a/kolibri/plugins/facility/assets/src/views/DataPage/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/DataPage/index.vue
@@ -219,6 +219,10 @@
       KDateRange,
     },
     mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
+      return { windowIsLarge, windowIsSmall };
+    },
     data() {
       return {
         showLearnMoreSummaryModal: false,
@@ -249,8 +253,7 @@
         return this.$route.name === PageNames.DATA_EXPORT_PAGE;
       },
       windowSizeStyle() {
-        const { windowIsMedium, windowIsSmall } = useKResponsiveWindow();
-        if (windowIsMedium || windowIsSmall) {
+        if (this.windowIsMedium || this.windowIsSmall) {
           return 'section-buttons-flex';
         }
         return {};
diff --git a/kolibri/plugins/facility/assets/src/views/FacilityConfigPage/index.vue b/kolibri/plugins/facility/assets/src/views/FacilityConfigPage/index.vue
index 1f130e81e0c..ea2501a95ef 100644
--- a/kolibri/plugins/facility/assets/src/views/FacilityConfigPage/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/FacilityConfigPage/index.vue
@@ -213,7 +213,7 @@
 <script>
 
   import { mapActions, mapGetters, mapState } from 'vuex';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
   import { createTranslator } from 'kolibri.utils.i18n';
 
   import camelCase from 'lodash/camelCase';
@@ -273,7 +273,11 @@
       ChangePinModal,
       RemovePinModal,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return { windowIsSmall };
+    },
     data() {
       return {
         showModal: false,
diff --git a/kolibri/plugins/facility/assets/src/views/IdentifierTextbox.vue b/kolibri/plugins/facility/assets/src/views/IdentifierTextbox.vue
index c62c12452cf..c0aa5d3a848 100644
--- a/kolibri/plugins/facility/assets/src/views/IdentifierTextbox.vue
+++ b/kolibri/plugins/facility/assets/src/views/IdentifierTextbox.vue
@@ -24,14 +24,19 @@
 
   import CoreInfoIcon from 'kolibri.coreVue.components.CoreInfoIcon';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+
 
   export default {
     name: 'IdentifierTextbox',
     components: {
       CoreInfoIcon,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return { windowIsSmall };
+    },
     props: {
       value: {
         type: String,