diff --git a/src/theme/breakpoints.ts b/src/theme/breakpoints.ts
new file mode 100644
index 00000000..aa065e73
--- /dev/null
+++ b/src/theme/breakpoints.ts
@@ -0,0 +1,5 @@
+export const breakpoints = {
+  breakpoints: {
+    values: { xs: 0, sm: 600, md: 980, lg: 1200, xl: 1536 },
+  },
+};
diff --git a/src/theme/themes.ts b/src/theme/themes.ts
index b1a74b1f..54affab5 100644
--- a/src/theme/themes.ts
+++ b/src/theme/themes.ts
@@ -1,14 +1,16 @@
 import { createTheme, ThemeOptions } from "@mui/material/styles";
 import { merge } from "lodash-es";
 
-import { typography } from "@src/theme/typography";
-import { colorsLight, colorsDark } from "@src/theme/colors";
-import { components } from "@src/theme/components";
+import { breakpoints } from "./breakpoints";
+import { typography } from "./typography";
+import { colorsLight, colorsDark } from "./colors";
+import { components } from "./components";
 
 export const customizableLightTheme = (customization: ThemeOptions) => {
   const customizedLightThemeBase = createTheme(
     merge(
       {},
+      breakpoints,
       typography((customization?.typography as any) ?? {}),
       colorsLight((customization?.palette?.primary as any)?.main)
     )
@@ -28,6 +30,7 @@ export const customizableDarkTheme = (customization: ThemeOptions) => {
   const customizedDarkThemeBase = createTheme(
     merge(
       {},
+      breakpoints,
       typography((customization?.typography as any) ?? {}),
       colorsDark(
         (customization?.palette?.primary as any)?.main,