diff --git a/packages/flat-components/src/components/SettingPage/AppearancePicker/ThemePicker.stories.tsx b/packages/flat-components/src/components/SettingPage/AppearancePicker/ThemePicker.stories.tsx
index fcd7954a453..b302ee65e9c 100644
--- a/packages/flat-components/src/components/SettingPage/AppearancePicker/ThemePicker.stories.tsx
+++ b/packages/flat-components/src/components/SettingPage/AppearancePicker/ThemePicker.stories.tsx
@@ -18,5 +18,5 @@ export const Overview: Story<AppearancePickerProps> = args => (
     </Router>
 );
 Overview.args = {
-    defaultValue: "light",
+    value: "light",
 };
diff --git a/packages/flat-pages/src/ReplayPage/index.tsx b/packages/flat-pages/src/ReplayPage/index.tsx
index f22e2404c1f..c97b7a75770 100644
--- a/packages/flat-pages/src/ReplayPage/index.tsx
+++ b/packages/flat-pages/src/ReplayPage/index.tsx
@@ -15,6 +15,7 @@ import { useLoginCheck } from "../utils/use-login-check";
 import { ReplayList } from "./ReplayList";
 import { ReplayVideo } from "./ReplayVideo";
 import { ReplayWhiteboard } from "./ReplayWhiteboard";
+import { withFlatServices } from "../components/FlatServicesContext";
 
 export type ReplayPageProps = RouteComponentProps<{
     roomUUID: string;
@@ -22,50 +23,52 @@ export type ReplayPageProps = RouteComponentProps<{
     roomType: RoomType;
 }>;
 
-export const ReplayPage = observer<ReplayPageProps>(function ReplayPage({ match }) {
-    useLoginCheck();
+export const ReplayPage = withFlatServices("whiteboard")(
+    observer<ReplayPageProps>(function ReplayPage({ match }) {
+        useLoginCheck();
 
-    const history = useHistory();
-    const classroomReplayStore = useClassroomReplayStore(match.params);
-    const [showExitReplayModal, setShowExitReplayModal] = useState(false);
+        const history = useHistory();
+        const classroomReplayStore = useClassroomReplayStore(match.params);
+        const [showExitReplayModal, setShowExitReplayModal] = useState(false);
 
-    const windowsBtn = useContext(WindowsSystemBtnContext);
+        const windowsBtn = useContext(WindowsSystemBtnContext);
 
-    if (!classroomReplayStore) {
-        return <LoadingPage />;
-    }
+        if (!classroomReplayStore) {
+            return <LoadingPage />;
+        }
 
-    return (
-        <div className="replay-container">
-            {windowsBtn && (
-                <TopBar
-                    showWindowsSystemBtn={windowsBtn.showWindowsBtn}
-                    onClickWindowsSystemBtn={windowsBtn.onClickWindowsSystemBtn}
-                    onDoubleClick={windowsBtn.clickWindowMaximize}
-                />
-            )}
-            <div className="replay-videos is-horizontal">
-                <ReplayVideo classroomReplayStore={classroomReplayStore} />
-            </div>
-            <div className="replay-content">
-                <ReplayWhiteboard classroomReplayStore={classroomReplayStore} />
-                <div className="replay-share-screen">{/* TODO */}</div>
-                <div
-                    className={classNames("replay-bottom", {
-                        "is-playing": classroomReplayStore.isPlaying,
-                    })}
-                >
-                    <ReplayList classroomReplayStore={classroomReplayStore} />
+        return (
+            <div className="replay-container">
+                {windowsBtn && (
+                    <TopBar
+                        showWindowsSystemBtn={windowsBtn.showWindowsBtn}
+                        onClickWindowsSystemBtn={windowsBtn.onClickWindowsSystemBtn}
+                        onDoubleClick={windowsBtn.clickWindowMaximize}
+                    />
+                )}
+                <div className="replay-videos is-horizontal">
+                    <ReplayVideo classroomReplayStore={classroomReplayStore} />
                 </div>
+                <div className="replay-content">
+                    <ReplayWhiteboard classroomReplayStore={classroomReplayStore} />
+                    <div className="replay-share-screen">{/* TODO */}</div>
+                    <div
+                        className={classNames("replay-bottom", {
+                            "is-playing": classroomReplayStore.isPlaying,
+                        })}
+                    >
+                        <ReplayList classroomReplayStore={classroomReplayStore} />
+                    </div>
+                </div>
+                <ExitReplayConfirm
+                    visible={showExitReplayModal}
+                    onCancel={() => setShowExitReplayModal(false)}
+                    onConfirm={() => history.goBack()}
+                    onSendWindowWillClose={() => setShowExitReplayModal(true)}
+                />
             </div>
-            <ExitReplayConfirm
-                visible={showExitReplayModal}
-                onCancel={() => setShowExitReplayModal(false)}
-                onConfirm={() => history.goBack()}
-                onSendWindowWillClose={() => setShowExitReplayModal(true)}
-            />
-        </div>
-    );
-});
+        );
+    }),
+);
 
 export default ReplayPage;