diff --git a/app/canvas/canvas.tsx b/app/canvas/canvas.tsx
index 48447313e1..eab76828c7 100644
--- a/app/canvas/canvas.tsx
+++ b/app/canvas/canvas.tsx
@@ -6,11 +6,9 @@ import {
   type OnChangeChildren,
   type Data,
   type Tree,
-  type Breakpoint,
   useAllUserProps,
   WrapperComponent,
   globalStyles,
-  setBreakpoints,
   Project,
 } from "@webstudio-is/sdk";
 import { useSubscribe } from "./shared/pubsub";
@@ -41,6 +39,7 @@ import { useManageProps } from "./shared/props";
 import {
   useBreakpointChange,
   usePublishBreakpoints,
+  useInitializeBreakpoints,
 } from "./shared/breakpoints";
 
 const useElementsTree = () => {
@@ -74,12 +73,6 @@ const useSubscribePreviewMode = () => {
   return isPreviewMode;
 };
 
-const useUpdateBreakpoints = (breakpoints: Array<Breakpoint>) => {
-  const [, setCurrentBreakpoints] = useBreakpoints();
-  setBreakpoints(breakpoints);
-  setCurrentBreakpoints(breakpoints);
-};
-
 const PreviewMode = () => {
   const [rootInstance] = useRootInstance();
   const [breakpoints] = useBreakpoints();
@@ -123,7 +116,7 @@ type CanvasProps = {
 };
 
 export const Canvas = ({ data }: CanvasProps): JSX.Element | null => {
-  useUpdateBreakpoints(data.breakpoints);
+  useInitializeBreakpoints(data.breakpoints);
   globalStyles();
   useAllUserProps(data.props);
   usePopulateRootInstance(data.tree);
diff --git a/app/canvas/shared/breakpoints.ts b/app/canvas/shared/breakpoints.ts
index 123fea4d0c..4b60f2b268 100644
--- a/app/canvas/shared/breakpoints.ts
+++ b/app/canvas/shared/breakpoints.ts
@@ -1,11 +1,23 @@
 import { useEffect } from "react";
 import store from "immerhin";
-import { type Breakpoint, useSubscribe } from "@webstudio-is/sdk";
+import {
+  type Breakpoint,
+  useSubscribe,
+  setBreakpoints,
+} from "@webstudio-is/sdk";
 import { useBreakpoints, breakpointsContainer } from "./nano-values";
 import { publish } from "./pubsub";
 
 store.register("breakpoints", breakpointsContainer);
 
+export const useInitializeBreakpoints = (breakpoints: Array<Breakpoint>) => {
+  const [, setCurrentBreakpoints] = useBreakpoints();
+  useEffect(() => {
+    setBreakpoints(breakpoints);
+    setCurrentBreakpoints(breakpoints);
+  }, [breakpoints, setCurrentBreakpoints]);
+};
+
 export const usePublishBreakpoints = () => {
   const [breakpoints] = useBreakpoints();
   useEffect(() => {