diff --git a/packages/flat-pages/src/BigClassPage/index.tsx b/packages/flat-pages/src/BigClassPage/index.tsx
index a20b353c21a..aaf5be920e4 100644
--- a/packages/flat-pages/src/BigClassPage/index.tsx
+++ b/packages/flat-pages/src/BigClassPage/index.tsx
@@ -10,12 +10,10 @@ import {
     TopBarDivider,
     TopBarRightBtn,
     SVGExit,
-    SVGMenuUnfold,
-    SVGMenuFold,
     SVGScreenSharing,
 } from "flat-components";
 import { observer } from "mobx-react-lite";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect } from "react";
 import { useTranslate } from "@netless/flat-i18n";
 import { RoomStatus } from "@netless/flat-server-api";
 import { ChatPanel } from "../components/ChatPanel";
@@ -53,7 +51,7 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
 
         const { confirm, ...exitConfirmModalProps } = useExitRoomConfirmModal(classroomStore);
 
-        const [isRealtimeSideOpen, openRealtimeSide] = useState(true);
+        const isRealtimeSideOpen = !whiteboardStore.isRightSideClose;
 
         useEffect(() => {
             if (classroomStore.isCreator && classroomStore.roomStatus === RoomStatus.Idle) {
@@ -175,12 +173,12 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
                             onClick={() => confirm(ExitRoomConfirmType.ExitButton)}
                         />
                     )}
-                    {windowsBtn?.showWindowsBtn ? null : <TopBarDivider />}
+                    {/* {windowsBtn?.showWindowsBtn ? null : <TopBarDivider />}
                     <TopBarRightBtn
                         icon={isRealtimeSideOpen ? <SVGMenuUnfold /> : <SVGMenuFold />}
                         title={isRealtimeSideOpen ? t("side-panel.hide") : t("side-panel.show")}
                         onClick={handleSideOpenerSwitch}
-                    />
+                    /> */}
                     {windowsBtn?.showWindowsBtn && <TopBarDivider />}
                 </>
             );
@@ -192,6 +190,7 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
             return (
                 <RealtimePanel
                     chatSlot={<ChatPanel classRoomStore={classroomStore} />}
+                    classroom={classroomStore}
                     isShow={isRealtimeSideOpen}
                     isVideoOn={classroomStore.isJoinedRTC}
                     videoSlot={
@@ -249,10 +248,9 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
             );
         }
 
-        function handleSideOpenerSwitch(): void {
-            openRealtimeSide(isRealtimeSideOpen => !isRealtimeSideOpen);
-            whiteboardStore.setRightSideClose(isRealtimeSideOpen);
-        }
+        // function handleSideOpenerSwitch(): void {
+        //     whiteboardStore.setRightSideClose(isRealtimeSideOpen);
+        // }
     }),
 );
 
diff --git a/packages/flat-pages/src/OneToOnePage/index.tsx b/packages/flat-pages/src/OneToOnePage/index.tsx
index 0fc43f34434..f3b93819eca 100644
--- a/packages/flat-pages/src/OneToOnePage/index.tsx
+++ b/packages/flat-pages/src/OneToOnePage/index.tsx
@@ -1,6 +1,6 @@
 import "./OneToOnePage.less";
 
-import React, { useContext, useState } from "react";
+import React, { useContext } from "react";
 import { useTranslate } from "@netless/flat-i18n";
 import { observer } from "mobx-react-lite";
 import { message } from "antd";
@@ -14,8 +14,6 @@ import {
     CloudRecordBtn,
     SVGScreenSharing,
     SVGExit,
-    SVGMenuFold,
-    SVGMenuUnfold,
 } from "flat-components";
 
 import InviteButton from "../components/InviteButton";
@@ -53,7 +51,7 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(
 
         const { confirm, ...exitConfirmModalProps } = useExitRoomConfirmModal(classroomStore);
 
-        const [isRealtimeSideOpen, openRealtimeSide] = useState(true);
+        const isRealtimeSideOpen = !whiteboardStore.isRightSideClose;
 
         return (
             <div className="one-to-one-class-page-container">
@@ -170,12 +168,12 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(
                             onClick={() => confirm(ExitRoomConfirmType.ExitButton)}
                         />
                     )}
-                    {windowsBtn?.showWindowsBtn ? null : <TopBarDivider />}
+                    {/* {windowsBtn?.showWindowsBtn ? null : <TopBarDivider />}
                     <TopBarRightBtn
                         icon={isRealtimeSideOpen ? <SVGMenuUnfold /> : <SVGMenuFold />}
                         title={isRealtimeSideOpen ? t("side-panel.hide") : t("side-panel.show")}
                         onClick={handleSideOpenerSwitch}
-                    />
+                    /> */}
                     {windowsBtn?.showWindowsBtn && <TopBarDivider />}
                 </>
             );
@@ -185,6 +183,7 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(
             return (
                 <RealtimePanel
                     chatSlot={<ChatPanel classRoomStore={classroomStore} />}
+                    classroom={classroomStore}
                     isShow={isRealtimeSideOpen}
                     isVideoOn={classroomStore.isJoinedRTC}
                     videoSlot={
@@ -247,10 +246,9 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(
             );
         }
 
-        function handleSideOpenerSwitch(): void {
-            openRealtimeSide(isRealtimeSideOpen => !isRealtimeSideOpen);
-            whiteboardStore.setRightSideClose(isRealtimeSideOpen);
-        }
+        // function handleSideOpenerSwitch(): void {
+        //     whiteboardStore.setRightSideClose(isRealtimeSideOpen);
+        // }
     }),
 );
 
diff --git a/packages/flat-pages/src/SmallClassPage/index.tsx b/packages/flat-pages/src/SmallClassPage/index.tsx
index a4baee1c85a..9151fb39d01 100644
--- a/packages/flat-pages/src/SmallClassPage/index.tsx
+++ b/packages/flat-pages/src/SmallClassPage/index.tsx
@@ -1,7 +1,7 @@
 import "./SmallClassPage.less";
 
 import classNames from "classnames";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect } from "react";
 import { message } from "antd";
 import { observer } from "mobx-react-lite";
 import { useTranslate } from "@netless/flat-i18n";
@@ -15,8 +15,6 @@ import {
     TopBarRightBtn,
     SVGScreenSharing,
     SVGExit,
-    SVGMenuFold,
-    SVGMenuUnfold,
     SVGLeft,
     SVGRight,
 } from "flat-components";
@@ -60,7 +58,7 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
 
         const { confirm, ...exitConfirmModalProps } = useExitRoomConfirmModal(classroomStore);
 
-        const [isRealtimeSideOpen, openRealtimeSide] = useState(true);
+        const isRealtimeSideOpen = !whiteboardStore.isRightSideClose;
 
         useEffect(() => {
             if (classroomStore.isCreator && classroomStore.roomStatus === RoomStatus.Idle) {
@@ -282,7 +280,7 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
                             onClick={() => confirm(ExitRoomConfirmType.ExitButton)}
                         />
                     )}
-                    {windowsBtn?.showWindowsBtn ? null : <TopBarDivider />}
+                    {/* {windowsBtn?.showWindowsBtn ? null : <TopBarDivider />}
                     <TopBarRightBtn
                         icon={isRealtimeSideOpen ? <SVGMenuUnfold /> : <SVGMenuFold />}
                         title={isRealtimeSideOpen ? t("side-panel.hide") : t("side-panel.show")}
@@ -290,7 +288,7 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
                             openRealtimeSide(isRealtimeSideOpen => !isRealtimeSideOpen);
                             whiteboardStore.setRightSideClose(isRealtimeSideOpen);
                         }}
-                    />
+                    /> */}
                     {windowsBtn?.showWindowsBtn && <TopBarDivider />}
                 </>
             );
@@ -300,6 +298,7 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
             return (
                 <RealtimePanel
                     chatSlot={<ChatPanel classRoomStore={classroomStore} />}
+                    classroom={classroomStore}
                     isShow={isRealtimeSideOpen}
                     isVideoOn={false}
                     videoSlot={null}
diff --git a/packages/flat-pages/src/components/RealtimePanel.tsx b/packages/flat-pages/src/components/RealtimePanel.tsx
index 0f2913d7607..838d1fa56cf 100644
--- a/packages/flat-pages/src/components/RealtimePanel.tsx
+++ b/packages/flat-pages/src/components/RealtimePanel.tsx
@@ -2,6 +2,8 @@ import React, { ReactElement } from "react";
 import classNames from "classnames";
 
 import "./RealtimePanel.less";
+import { ClassroomStore } from "@netless/flat-stores";
+import { SidebarHandler } from "./SidebarHandle";
 
 export type RealtimePanelProps = {
     // is playing user video
@@ -10,11 +12,12 @@ export type RealtimePanelProps = {
     isShow: boolean;
     videoSlot?: React.ReactNode;
     chatSlot: React.ReactNode;
+    classroom: ClassroomStore;
 };
 
 export class RealtimePanel extends React.PureComponent<RealtimePanelProps> {
     public override render(): ReactElement {
-        const { isVideoOn, isShow, videoSlot, chatSlot } = this.props;
+        const { isVideoOn, isShow, videoSlot, chatSlot, classroom } = this.props;
 
         return (
             <div
@@ -32,6 +35,7 @@ export class RealtimePanel extends React.PureComponent<RealtimePanelProps> {
                     </div>
                     <div className="realtime-panel-chat-slot">{chatSlot}</div>
                 </div>
+                <SidebarHandler classroom={classroom} />
             </div>
         );
     }
diff --git a/packages/flat-pages/src/components/SidebarHandle/index.tsx b/packages/flat-pages/src/components/SidebarHandle/index.tsx
new file mode 100644
index 00000000000..818194725df
--- /dev/null
+++ b/packages/flat-pages/src/components/SidebarHandle/index.tsx
@@ -0,0 +1,51 @@
+import "./style.less";
+
+import React from "react";
+import { observer } from "mobx-react-lite";
+
+import { ClassroomStore } from "@netless/flat-stores";
+
+export interface SidebarHandleProps {
+    classroom: ClassroomStore;
+}
+
+export const SidebarHandler = observer<SidebarHandleProps>(function SidebarHandle({ classroom }) {
+    const whiteboard = classroom.whiteboardStore;
+
+    const collapsed = whiteboard.isRightSideClose;
+
+    return (
+        <label className="sidebar-handler">
+            <input
+                checked={collapsed}
+                type="checkbox"
+                onChange={() => whiteboard.setRightSideClose(!collapsed)}
+            />
+            <svg fill="none" height="42" viewBox="0 0 17 42" width="17">
+                <path
+                    className="sidebar-handler-border-color sidebar-handler-bg-color"
+                    d="M17.0 41.0H5.0C2.7909 41.0 1.0 39.2091 1.0 37.0V5.0C1.0 2.79086 2.7909 1.0 5.0 1.0H17.0"
+                    fill="#fff"
+                    stroke="#000"
+                />
+                {collapsed ? (
+                    <path
+                        className="sidebar-handler-image-fill-color"
+                        clipRule="evenodd"
+                        d="M8 19L10 17V25L8 23L6 21L8 19ZM12 17H11V25H12V17Z"
+                        fill="#fff"
+                        fillRule="evenodd"
+                    />
+                ) : (
+                    <path
+                        className="sidebar-handler-image-fill-color"
+                        clipRule="evenodd"
+                        d="M10 19L8 17V25L10 23L12 21L10 19ZM6 17H7V25H6V17Z"
+                        fill="#fff"
+                        fillRule="evenodd"
+                    />
+                )}
+            </svg>
+        </label>
+    );
+});
diff --git a/packages/flat-pages/src/components/SidebarHandle/style.less b/packages/flat-pages/src/components/SidebarHandle/style.less
new file mode 100644
index 00000000000..1a9a8c185f3
--- /dev/null
+++ b/packages/flat-pages/src/components/SidebarHandle/style.less
@@ -0,0 +1,81 @@
+.sidebar-handler {
+    appearance: none;
+    border: 0;
+    width: 17px;
+    position: absolute;
+    right: 100%;
+    top: 50%;
+    transform: translate(0, -50%);
+    font-size: 0;
+    z-index: 100;
+    cursor: pointer;
+    pointer-events: auto;
+
+    input[type="checkbox"] {
+        position: absolute;
+        top: 0;
+        left: 0;
+        appearance: none;
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        opacity: 0;
+        z-index: -1;
+    }
+
+    svg {
+        opacity: 0;
+        transition: opacity 0.5s 1s;
+        pointer-events: none;
+    }
+
+    &:focus-visible {
+        outline: 2px solid -webkit-focus-ring-color;
+    }
+
+    &:hover svg,
+    &.collapsed svg {
+        opacity: 1;
+        transition: opacity 0.2s;
+    }
+}
+
+.sidebar-handler-bg-color {
+    fill: #ffffff;
+}
+
+.sidebar-handler-border-color {
+    stroke: var(--grey-1);
+}
+
+.sidebar-handler-image-stroke-color {
+    stroke: var(--grey-6);
+}
+
+.sidebar-handler-image-fill-color {
+    fill: var(--grey-6);
+}
+
+.realtime-panel:hover+.sidebar-handler svg {
+    opacity: 1;
+    transition: opacity 0.2s;
+}
+
+.flat-color-scheme-dark {
+    .sidebar-handler-bg-color {
+        fill: var(--grey-9);
+    }
+
+    .sidebar-handler-border-color {
+        stroke: var(--grey-8);
+    }
+
+    .sidebar-handler-image-stroke-color {
+        stroke: var(--grey-5);
+    }
+
+    .sidebar-handler-image-fill-color {
+        fill: var(--grey-5);
+    }
+}