diff --git a/AUTHORS.md b/AUTHORS.md
index 76d71d1292a..8da7d6f6762 100644
--- a/AUTHORS.md
+++ b/AUTHORS.md
@@ -99,3 +99,4 @@ If you have contributed to Kolibri, feel free to add your name and Github accoun
 | Vikramaditya Singh | Ghat0tkach |
 | Kris Katkus | katkuskris |
 | Garvit Singhal | GarvitSinghal47 |
+| Adars T S | a6ar55 |
diff --git a/kolibri/core/assets/src/views/AttemptLogList.vue b/kolibri/core/assets/src/views/AttemptLogList.vue
index 0a9941aa3a0..132cfa60772 100644
--- a/kolibri/core/assets/src/views/AttemptLogList.vue
+++ b/kolibri/core/assets/src/views/AttemptLogList.vue
@@ -76,7 +76,6 @@
 <script>
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import AttemptLogItem from './AttemptLogItem';
 
   export default {
@@ -84,7 +83,7 @@
     components: {
       AttemptLogItem,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
     props: {
       attemptLogs: {
         type: Array,
diff --git a/kolibri/core/assets/src/views/BottomAppBar.vue b/kolibri/core/assets/src/views/BottomAppBar.vue
index 46e61464477..f1e72a97074 100644
--- a/kolibri/core/assets/src/views/BottomAppBar.vue
+++ b/kolibri/core/assets/src/views/BottomAppBar.vue
@@ -15,11 +15,16 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   export default {
     name: 'BottomAppBar',
-    mixins: [responsiveWindowMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
   };
 
 </script>
diff --git a/kolibri/core/assets/src/views/ExamReport/index.vue b/kolibri/core/assets/src/views/ExamReport/index.vue
index 2de5905745d..cc29c10b59c 100644
--- a/kolibri/core/assets/src/views/ExamReport/index.vue
+++ b/kolibri/core/assets/src/views/ExamReport/index.vue
@@ -162,7 +162,7 @@
   import find from 'lodash/find';
   import MultiPaneLayout from 'kolibri.coreVue.components.MultiPaneLayout';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { MasteryLogResource } from 'kolibri.resources';
   import { now } from 'kolibri.utils.serverClock';
   import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert';
@@ -184,7 +184,13 @@
       CurrentTryOverview,
       MissingResourceAlert,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       // Unique identifier of the item for the report
       // this will be used to filter for previous tries
diff --git a/kolibri/core/assets/src/views/MultiPaneLayout.vue b/kolibri/core/assets/src/views/MultiPaneLayout.vue
index de0c7d7942a..1fcdb4083d5 100644
--- a/kolibri/core/assets/src/views/MultiPaneLayout.vue
+++ b/kolibri/core/assets/src/views/MultiPaneLayout.vue
@@ -58,12 +58,18 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import responsiveElementMixin from 'kolibri.coreVue.mixins.responsiveElementMixin';
 
   export default {
     name: 'MultiPaneLayout',
-    mixins: [responsiveWindowMixin, responsiveElementMixin],
+    mixins: [responsiveElementMixin],
+    setup() {
+      const { windowHeight } = useKResponsiveWindow();
+      return {
+        windowHeight,
+      };
+    },
     computed: {
       styles() {
         return {
diff --git a/kolibri/core/assets/src/views/SideNav.vue b/kolibri/core/assets/src/views/SideNav.vue
index 7d91b9b01cc..17fbb740065 100644
--- a/kolibri/core/assets/src/views/SideNav.vue
+++ b/kolibri/core/assets/src/views/SideNav.vue
@@ -239,7 +239,7 @@
   import { mapGetters, mapState } from 'vuex';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { UserKinds, NavComponentSections } from 'kolibri.coreVue.vuex.constants';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import responsiveElementMixin from 'kolibri.coreVue.mixins.responsiveElementMixin';
   import CoreMenu from 'kolibri.coreVue.components.CoreMenu';
   import CoreMenuOption from 'kolibri.coreVue.components.CoreMenuOption';
@@ -288,11 +288,14 @@
       LogoutSideNavEntry,
       BottomNavigationBar,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin, responsiveElementMixin, navComponentsMixin],
+    mixins: [commonCoreStrings, responsiveElementMixin, navComponentsMixin],
     setup() {
+      const { windowIsSmall, windowIsLarge } = useKResponsiveWindow();
       const { isLearnerOnlyImport } = useUser();
       const { status, lastSynced } = useUserSyncStatus();
       return {
+        windowIsLarge,
+        windowIsSmall,
         isLearnerOnlyImport,
         themeConfig,
         userSyncStatus: status,
diff --git a/kolibri/core/assets/src/views/TotalPoints.vue b/kolibri/core/assets/src/views/TotalPoints.vue
index b0ec1c0f4ba..11d2ad0dce6 100644
--- a/kolibri/core/assets/src/views/TotalPoints.vue
+++ b/kolibri/core/assets/src/views/TotalPoints.vue
@@ -21,7 +21,6 @@
 <script>
 
   import { mapGetters, mapActions } from 'vuex';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import PointsIcon from 'kolibri.coreVue.components.PointsIcon';
 
   export default {
@@ -29,7 +28,6 @@
     components: {
       PointsIcon,
     },
-    mixins: [responsiveWindowMixin],
     computed: {
       ...mapGetters(['totalPoints', 'currentUserId', 'isUserLoggedIn']),
     },
diff --git a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
index 6464ae8e93d..e6c34efd78c 100644
--- a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
+++ b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
@@ -43,7 +43,7 @@
 <script>
 
   import { availableLanguages, currentLanguage } from 'kolibri.utils.i18n';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { compareLanguages } from 'kolibri.utils.sortLanguages';
   import languageSwitcherMixin from './mixin';
   import LanguageSwitcherModal from './LanguageSwitcherModal';
@@ -55,7 +55,13 @@
     components: {
       LanguageSwitcherModal,
     },
-    mixins: [responsiveWindowMixin, languageSwitcherMixin],
+    mixins: [languageSwitcherMixin],
+    setup() {
+      const { windowBreakpoint } = useKResponsiveWindow();
+      return {
+        windowBreakpoint,
+      };
+    },
     data() {
       return {
         showLanguageModal: false,
diff --git a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue
index 02a44940568..40661cc804b 100644
--- a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue
+++ b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue
@@ -44,7 +44,7 @@
 <script>
 
   import { currentLanguage } from 'kolibri.utils.i18n';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import FocusTrap from 'kolibri.coreVue.components.FocusTrap';
   import languageSwitcherMixin from './mixin';
@@ -52,7 +52,13 @@
   export default {
     name: 'LanguageSwitcherModal',
     components: { FocusTrap },
-    mixins: [commonCoreStrings, languageSwitcherMixin, responsiveWindowMixin],
+    mixins: [commonCoreStrings, languageSwitcherMixin],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     data() {
       return {
         selectedLanguage: currentLanguage,
diff --git a/kolibri/core/assets/src/views/sync/FacilityTaskPanelDetails.vue b/kolibri/core/assets/src/views/sync/FacilityTaskPanelDetails.vue
index 8edfc825169..04d0b7f067e 100644
--- a/kolibri/core/assets/src/views/sync/FacilityTaskPanelDetails.vue
+++ b/kolibri/core/assets/src/views/sync/FacilityTaskPanelDetails.vue
@@ -105,14 +105,20 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonTaskStrings from 'kolibri.coreVue.mixins.commonTaskStrings';
   import { TaskStatuses, TaskTypes } from '../../utils/syncTaskUtils';
 
   export default {
     name: 'FacilityTaskPanelDetails',
-    mixins: [commonCoreStrings, responsiveWindowMixin, commonTaskStrings],
+    mixins: [commonCoreStrings, commonTaskStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       task: {
         type: Object,
diff --git a/kolibri/core/assets/src/views/userAccounts/BirthYearSelect.vue b/kolibri/core/assets/src/views/userAccounts/BirthYearSelect.vue
index f6db52e9f3e..4628c053ad6 100644
--- a/kolibri/core/assets/src/views/userAccounts/BirthYearSelect.vue
+++ b/kolibri/core/assets/src/views/userAccounts/BirthYearSelect.vue
@@ -29,7 +29,7 @@
   import { now } from 'kolibri.utils.serverClock';
   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-design-system/lib/useKResponsiveWindow';
   import { DemographicConstants } from 'kolibri.coreVue.vuex.constants';
 
   const { NOT_SPECIFIED } = DemographicConstants;
@@ -43,7 +43,13 @@
     components: {
       CoreInfoIcon,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       value: {
         type: String,