diff --git a/desktop/renderer-app/src/components/Whiteboard.tsx b/desktop/renderer-app/src/components/Whiteboard.tsx
index e84a03dfb1c..8a72d3ea4a7 100644
--- a/desktop/renderer-app/src/components/Whiteboard.tsx
+++ b/desktop/renderer-app/src/components/Whiteboard.tsx
@@ -5,20 +5,32 @@ import ToolBox from "@netless/tool-box";
 import ZoomController from "@netless/zoom-controller";
 import classNames from "classnames";
 import { observer } from "mobx-react-lite";
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 import { RoomPhase } from "white-web-sdk";
+import { Region } from "flat-components";
 import pagesSVG from "../assets/image/pages.svg";
+import { ConfigStore } from "../stores/ConfigStore";
 import { WhiteboardStore } from "../stores/WhiteboardStore";
 import { isSupportedImageType, onDropImage } from "../utils/dnd/image";
 import "./Whiteboard.less";
 
 export interface WhiteboardProps {
     whiteboardStore: WhiteboardStore;
+    configStore: ConfigStore;
 }
 
-export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteboardStore }) {
+export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
+    whiteboardStore,
+    configStore,
+}) {
     const { room } = whiteboardStore;
 
+    useEffect(() => {
+        if (room) {
+            configStore.setRegion(room.region as Region);
+        }
+    }, [room, configStore]);
+
     const bindWhiteboard = useCallback(
         (ref: HTMLDivElement) => {
             if (room) {
diff --git a/desktop/renderer-app/src/pages/BigClassPage/index.tsx b/desktop/renderer-app/src/pages/BigClassPage/index.tsx
index d52ca8767b2..e040cdfa9ce 100644
--- a/desktop/renderer-app/src/pages/BigClassPage/index.tsx
+++ b/desktop/renderer-app/src/pages/BigClassPage/index.tsx
@@ -28,7 +28,7 @@ import {
 import InviteButton from "../../components/InviteButton";
 import { RealtimePanel } from "../../components/RealtimePanel";
 import { TopBarRightBtn } from "../../components/TopBarRightBtn";
-import { GlobalStoreContext } from "../../components/StoreProvider";
+import { ConfigStoreContext, GlobalStoreContext } from "../../components/StoreProvider";
 import { TopBarRoundBtn } from "../../components/TopBarRoundBtn";
 import { Whiteboard } from "../../components/Whiteboard";
 import {
@@ -90,6 +90,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
     const classRoomStore = useClassRoomStore(params.roomUUID, params.ownerUUID, recordingConfig);
     const whiteboardStore = classRoomStore.whiteboardStore;
     const globalStore = useContext(GlobalStoreContext);
+    const configStore = useContext(ConfigStoreContext);
     const { confirm, ...exitConfirmModalProps } = useExitRoomConfirmModal(classRoomStore);
 
     const [speakingJoiner, setSpeakingJoiner] = useState<User | undefined>(() =>
@@ -178,7 +179,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
                 right={renderTopBarRight()}
             />
             <div className="realtime-content">
-                <Whiteboard whiteboardStore={whiteboardStore} />
+                <Whiteboard whiteboardStore={whiteboardStore} configStore={configStore} />
                 {renderRealtimePanel()}
             </div>
             <ExitRoomConfirm isCreator={classRoomStore.isCreator} {...exitConfirmModalProps} />
diff --git a/desktop/renderer-app/src/pages/OneToOnePage/index.tsx b/desktop/renderer-app/src/pages/OneToOnePage/index.tsx
index 8bc34efc3bc..9633b9d99dd 100644
--- a/desktop/renderer-app/src/pages/OneToOnePage/index.tsx
+++ b/desktop/renderer-app/src/pages/OneToOnePage/index.tsx
@@ -41,7 +41,7 @@ import { usePowerSaveBlocker } from "../../utils/hooks/usePowerSaveBlocker";
 import { useWindowSize } from "../../utils/hooks/useWindowSize";
 import { CloudStorageButton } from "../../components/CloudStorageButton";
 import { AgoraCloudRecordBackgroundConfigItem } from "../../apiMiddleware/flatServer/agora";
-import { GlobalStoreContext } from "../../components/StoreProvider";
+import { ConfigStoreContext, GlobalStoreContext } from "../../components/StoreProvider";
 import { runtime } from "../../utils/runtime";
 import { useTranslation } from "react-i18next";
 
@@ -72,6 +72,7 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
     const classRoomStore = useClassRoomStore(params.roomUUID, params.ownerUUID, recordingConfig);
     const whiteboardStore = classRoomStore.whiteboardStore;
     const globalStore = useContext(GlobalStoreContext);
+    const configStore = useContext(ConfigStoreContext);
     const { confirm, ...exitConfirmModalProps } = useExitRoomConfirmModal(classRoomStore);
 
     const [isRealtimeSideOpen, openRealtimeSide] = useState(true);
@@ -136,7 +137,7 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
                 right={renderTopBarRight()}
             />
             <div className="one-to-one-realtime-content">
-                <Whiteboard whiteboardStore={whiteboardStore} />
+                <Whiteboard whiteboardStore={whiteboardStore} configStore={configStore} />
                 {renderRealtimePanel()}
             </div>
             <ExitRoomConfirm isCreator={classRoomStore.isCreator} {...exitConfirmModalProps} />
diff --git a/desktop/renderer-app/src/pages/SmallClassPage/index.tsx b/desktop/renderer-app/src/pages/SmallClassPage/index.tsx
index edd660bf02a..b2b103a3151 100644
--- a/desktop/renderer-app/src/pages/SmallClassPage/index.tsx
+++ b/desktop/renderer-app/src/pages/SmallClassPage/index.tsx
@@ -46,7 +46,7 @@ import { usePowerSaveBlocker } from "../../utils/hooks/usePowerSaveBlocker";
 import "./SmallClassPage.less";
 import { useWindowSize } from "../../utils/hooks/useWindowSize";
 import { CloudStorageButton } from "../../components/CloudStorageButton";
-import { GlobalStoreContext } from "../../components/StoreProvider";
+import { ConfigStoreContext, GlobalStoreContext } from "../../components/StoreProvider";
 import { runtime } from "../../utils/runtime";
 
 const CLASSROOM_WIDTH = 1200;
@@ -97,6 +97,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
     );
     const whiteboardStore = classRoomStore.whiteboardStore;
     const globalStore = useContext(GlobalStoreContext);
+    const configStore = useContext(ConfigStoreContext);
     const { confirm, ...exitConfirmModalProps } = useExitRoomConfirmModal(classRoomStore);
 
     const { room, phase } = whiteboardStore;
@@ -158,7 +159,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
             />
             {renderAvatars()}
             <div className="realtime-content">
-                <Whiteboard whiteboardStore={whiteboardStore} />
+                <Whiteboard whiteboardStore={whiteboardStore} configStore={configStore} />
                 {renderRealtimePanel()}
             </div>
             <ExitRoomConfirm isCreator={classRoomStore.isCreator} {...exitConfirmModalProps} />
diff --git a/web/flat-web/src/components/Whiteboard.tsx b/web/flat-web/src/components/Whiteboard.tsx
index e84a03dfb1c..8a72d3ea4a7 100644
--- a/web/flat-web/src/components/Whiteboard.tsx
+++ b/web/flat-web/src/components/Whiteboard.tsx
@@ -5,20 +5,32 @@ import ToolBox from "@netless/tool-box";
 import ZoomController from "@netless/zoom-controller";
 import classNames from "classnames";
 import { observer } from "mobx-react-lite";
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 import { RoomPhase } from "white-web-sdk";
+import { Region } from "flat-components";
 import pagesSVG from "../assets/image/pages.svg";
+import { ConfigStore } from "../stores/ConfigStore";
 import { WhiteboardStore } from "../stores/WhiteboardStore";
 import { isSupportedImageType, onDropImage } from "../utils/dnd/image";
 import "./Whiteboard.less";
 
 export interface WhiteboardProps {
     whiteboardStore: WhiteboardStore;
+    configStore: ConfigStore;
 }
 
-export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteboardStore }) {
+export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
+    whiteboardStore,
+    configStore,
+}) {
     const { room } = whiteboardStore;
 
+    useEffect(() => {
+        if (room) {
+            configStore.setRegion(room.region as Region);
+        }
+    }, [room, configStore]);
+
     const bindWhiteboard = useCallback(
         (ref: HTMLDivElement) => {
             if (room) {
diff --git a/web/flat-web/src/pages/BigClassPage/index.tsx b/web/flat-web/src/pages/BigClassPage/index.tsx
index 95a733897fd..f812504af00 100644
--- a/web/flat-web/src/pages/BigClassPage/index.tsx
+++ b/web/flat-web/src/pages/BigClassPage/index.tsx
@@ -29,7 +29,7 @@ import {
 } from "../../components/ExitRoomConfirm";
 import InviteButton from "../../components/InviteButton";
 import { RealtimePanel } from "../../components/RealtimePanel";
-import { GlobalStoreContext } from "../../components/StoreProvider";
+import { ConfigStoreContext, GlobalStoreContext } from "../../components/StoreProvider";
 import { TopBarRightBtn } from "../../components/TopBarRightBtn";
 import { TopBarRoundBtn } from "../../components/TopBarRoundBtn";
 import { Whiteboard } from "../../components/Whiteboard";
@@ -87,6 +87,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
     const classRoomStore = useClassRoomStore(params.roomUUID, params.ownerUUID, recordingConfig);
     const whiteboardStore = classRoomStore.whiteboardStore;
     const globalStore = useContext(GlobalStoreContext);
+    const configStore = useContext(ConfigStoreContext);
     const { confirm, ...exitConfirmModalProps } = useExitRoomConfirmModal(classRoomStore);
 
     const [speakingJoiner, setSpeakingJoiner] = useState<User | undefined>(() =>
@@ -175,7 +176,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
                 right={renderTopBarRight()}
             />
             <div className="realtime-content">
-                <Whiteboard whiteboardStore={whiteboardStore} />
+                <Whiteboard whiteboardStore={whiteboardStore} configStore={configStore} />
                 {renderRealtimePanel()}
             </div>
             <ExitRoomConfirm isCreator={classRoomStore.isCreator} {...exitConfirmModalProps} />
diff --git a/web/flat-web/src/pages/OneToOnePage/index.tsx b/web/flat-web/src/pages/OneToOnePage/index.tsx
index 6118f3fb83f..d6eba5dfe5c 100644
--- a/web/flat-web/src/pages/OneToOnePage/index.tsx
+++ b/web/flat-web/src/pages/OneToOnePage/index.tsx
@@ -39,7 +39,7 @@ import { useComputed } from "../../utils/mobx";
 import { RouteNameType, RouteParams } from "../../utils/routes";
 import { CloudStorageButton } from "../../components/CloudStorageButton";
 import { AgoraCloudRecordBackgroundConfigItem } from "../../apiMiddleware/flatServer/agora";
-import { GlobalStoreContext } from "../../components/StoreProvider";
+import { ConfigStoreContext, GlobalStoreContext } from "../../components/StoreProvider";
 import { runtime } from "../../utils/runtime";
 import { useTranslation } from "react-i18next";
 
@@ -68,6 +68,7 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
     const classRoomStore = useClassRoomStore(params.roomUUID, params.ownerUUID, recordingConfig);
     const whiteboardStore = classRoomStore.whiteboardStore;
     const globalStore = useContext(GlobalStoreContext);
+    const configStore = useContext(ConfigStoreContext);
     const { confirm, ...exitConfirmModalProps } = useExitRoomConfirmModal(classRoomStore);
 
     const [isRealtimeSideOpen, openRealtimeSide] = useState(true);
@@ -130,7 +131,7 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
                 right={renderTopBarRight()}
             />
             <div className="one-to-one-realtime-content">
-                <Whiteboard whiteboardStore={whiteboardStore} />
+                <Whiteboard whiteboardStore={whiteboardStore} configStore={configStore} />
                 {renderRealtimePanel()}
             </div>
             <ExitRoomConfirm isCreator={classRoomStore.isCreator} {...exitConfirmModalProps} />
diff --git a/web/flat-web/src/pages/SmallClassPage/index.tsx b/web/flat-web/src/pages/SmallClassPage/index.tsx
index 1fe0ddb3f3f..30ffa578367 100644
--- a/web/flat-web/src/pages/SmallClassPage/index.tsx
+++ b/web/flat-web/src/pages/SmallClassPage/index.tsx
@@ -42,7 +42,7 @@ import { RouteNameType, RouteParams } from "../../utils/routes";
 
 import "./SmallClassPage.less";
 import { CloudStorageButton } from "../../components/CloudStorageButton";
-import { GlobalStoreContext } from "../../components/StoreProvider";
+import { ConfigStoreContext, GlobalStoreContext } from "../../components/StoreProvider";
 import { runtime } from "../../utils/runtime";
 import { RtcChannelType } from "../../apiMiddleware/rtc/room";
 import { useTranslation } from "react-i18next";
@@ -93,6 +93,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
     );
     const whiteboardStore = classRoomStore.whiteboardStore;
     const globalStore = useContext(GlobalStoreContext);
+    const configStore = useContext(ConfigStoreContext);
     const { confirm, ...exitConfirmModalProps } = useExitRoomConfirmModal(classRoomStore);
 
     const { room, phase } = whiteboardStore;
@@ -152,7 +153,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
             />
             {renderAvatars()}
             <div className="realtime-content">
-                <Whiteboard whiteboardStore={whiteboardStore} />
+                <Whiteboard whiteboardStore={whiteboardStore} configStore={configStore} />
                 {renderRealtimePanel()}
             </div>
             <ExitRoomConfirm isCreator={classRoomStore.isCreator} {...exitConfirmModalProps} />