diff --git a/packages/docusaurus-theme-common/src/hooks/useWindowSize.ts b/packages/docusaurus-theme-common/src/hooks/useWindowSize.ts
index a9583b199eb0..2fe7c753f54c 100644
--- a/packages/docusaurus-theme-common/src/hooks/useWindowSize.ts
+++ b/packages/docusaurus-theme-common/src/hooks/useWindowSize.ts
@@ -8,6 +8,7 @@
 import {useEffect, useState} from 'react';
 
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 const windowSizes = {
   desktop: 'desktop',
@@ -17,13 +18,12 @@ const windowSizes = {
 
 type WindowSize = keyof typeof windowSizes;
 
-const DesktopThresholdWidth = 996;
-
-function getWindowSize() {
+function getWindowSize(desktopThresholdWidth = 996): WindowSize {
   if (!ExecutionEnvironment.canUseDOM) {
     return windowSizes.ssr;
   }
-  return window.innerWidth > DesktopThresholdWidth
+
+  return window.innerWidth > desktopThresholdWidth
     ? windowSizes.desktop
     : windowSizes.mobile;
 }
@@ -44,16 +44,18 @@ const DevSimulateSSR = process.env.NODE_ENV === 'development' && true;
  * catch potential layout shifts, similar to strict mode calling effects twice.
  */
 export function useWindowSize(): WindowSize {
+  const {siteConfig} = useDocusaurusContext();
+  const desktopThresholdWidth = siteConfig?.themeConfig?.breakpoints?.desktop ?? 996;
   const [windowSize, setWindowSize] = useState<WindowSize>(() => {
     if (DevSimulateSSR) {
       return 'ssr';
     }
-    return getWindowSize();
+    return getWindowSize(desktopThresholdWidth);
   });
 
   useEffect(() => {
     function updateWindowSize() {
-      setWindowSize(getWindowSize());
+      setWindowSize(getWindowSize(desktopThresholdWidth));
     }
 
     const timeout = DevSimulateSSR
diff --git a/packages/docusaurus-types/src/config.d.ts b/packages/docusaurus-types/src/config.d.ts
index 3a7bb99ae743..0825b41c3e2c 100644
--- a/packages/docusaurus-types/src/config.d.ts
+++ b/packages/docusaurus-types/src/config.d.ts
@@ -14,6 +14,10 @@ export type ReportingSeverity = 'ignore' | 'log' | 'warn' | 'throw';
 
 export type ThemeConfig = {
   [key: string]: unknown;
+  breakpoints?: {
+    desktop?: number;
+    [key: string]: unknown;
+  }
 };
 
 export type MarkdownPreprocessor = (args: {
diff --git a/website/_dogfooding/dogfooding.config.js b/website/_dogfooding/dogfooding.config.js
index a6e2bcde9592..5545c398869d 100644
--- a/website/_dogfooding/dogfooding.config.js
+++ b/website/_dogfooding/dogfooding.config.js
@@ -5,6 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/** @type {import('@docusaurus/types').ThemeConfig} */
+const dogFoodingThemeConfig = {
+  breakpoints: {
+    desktop: 744,
+  }
+}
+exports.dogFoodingThemeConfig = dogFoodingThemeConfig;
+
 /** @type {import('@docusaurus/types').PluginConfig[]} */
 const dogfoodingThemeInstances = [
   /** @type {import('@docusaurus/types').PluginModule} */
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 087e9716cd3c..31904e42037b 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -14,6 +14,7 @@ const versions = require('./versions.json');
 const VersionsArchived = require('./versionsArchived.json');
 const {
   dogfoodingPluginInstances,
+  dogFoodingThemeConfig,
   dogfoodingThemeInstances,
   dogfoodingRedirects,
 } = require('./_dogfooding/dogfooding.config');
@@ -450,6 +451,7 @@ module.exports = async function createConfigAsync() {
     themeConfig:
       /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
       ({
+        ...dogFoodingThemeConfig,
         liveCodeBlock: {
           playgroundPosition: 'bottom',
         },