diff --git a/packages/docz-theme-default/src/styles/responsive.ts b/packages/docz-theme-default/src/styles/responsive.ts
index fe83e9a6e..fb3954df8 100644
--- a/packages/docz-theme-default/src/styles/responsive.ts
+++ b/packages/docz-theme-default/src/styles/responsive.ts
@@ -1,7 +1,13 @@
 import facepaint from 'facepaint'
 
+export const breakpoints = {
+  mobile: 420,
+  tablet: 920,
+  desktop: 1120,
+}
+
 export const mq = facepaint([
-  '@media(min-width: 420px)',
-  '@media(min-width: 920px)',
-  '@media(min-width: 1120px)'
+  `@media(min-width: ${breakpoints.mobile}px)`,
+  `@media(min-width: ${breakpoints.tablet}px)`,
+  `@media(min-width: ${breakpoints.desktop}px)`
 ])