diff --git a/packages/flat-components/src/components/ClassroomPage/AvatarWindow/index.tsx b/packages/flat-components/src/components/ClassroomPage/AvatarWindow/index.tsx
index 85790b91661..12b8e376035 100644
--- a/packages/flat-components/src/components/ClassroomPage/AvatarWindow/index.tsx
+++ b/packages/flat-components/src/components/ClassroomPage/AvatarWindow/index.tsx
@@ -14,7 +14,6 @@ const preventEvent = (ev: React.UIEvent | Event): void => {
 export interface AvatarWindowProps {
     mode: "normal" | "maximized";
     rect: Rectangle;
-    index?: number;
     zIndex?: number;
     hidden?: boolean;
     readonly?: boolean;
@@ -37,7 +36,6 @@ export type ResizeHandle = "" | "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se
 export const AvatarWindow: React.FC<AvatarWindowProps> = ({
     mode,
     rect,
-    index,
     zIndex,
     hidden,
     readonly,
@@ -184,31 +182,25 @@ export const AvatarWindow: React.FC<AvatarWindowProps> = ({
         );
     };
 
-    const style =
-        mode === "normal"
-            ? ({
-                  position: "absolute",
-                  // Prevent a rendering issue on Chrome when set transform to sub-pixel values
-                  width: rect.width | 0,
-                  height: rect.height | 0,
-                  transform: `translate(${rect.x | 0}px,${rect.y | 0}px)`,
-                  zIndex: zIndex,
-              } as React.CSSProperties)
-            : ({
-                  flex: 1,
-                  order: index,
-              } as React.CSSProperties);
-
     return (
         <div
             className={classNames("window", {
                 "window-readonly": readonly,
                 "window-maximized": mode === "maximized",
             })}
-            data-index={index}
-            data-z-index={zIndex}
             hidden={hidden}
-            style={style}
+            style={
+                mode === "normal"
+                    ? {
+                          position: "absolute",
+                          // Prevent a rendering issue on Chrome when set transform to sub-pixel values
+                          width: rect.width | 0,
+                          height: rect.height | 0,
+                          transform: `translate(${rect.x | 0}px,${rect.y | 0}px)`,
+                          zIndex: zIndex,
+                      }
+                    : undefined
+            }
         >
             <div className="window-main" onClick={onClick} onPointerDown={handleTrackStart}>
                 {children}
diff --git a/packages/flat-components/src/components/ClassroomPage/AvatarWindow/style.less b/packages/flat-components/src/components/ClassroomPage/AvatarWindow/style.less
index a83e0b05f46..529ccb0780f 100644
--- a/packages/flat-components/src/components/ClassroomPage/AvatarWindow/style.less
+++ b/packages/flat-components/src/components/ClassroomPage/AvatarWindow/style.less
@@ -27,6 +27,7 @@
 }
 
 .window-maximized {
+    flex: 1;
     transition: none;
     cursor: default;
 }
diff --git a/packages/flat-components/src/components/ClassroomPage/VideoAvatar/index.tsx b/packages/flat-components/src/components/ClassroomPage/VideoAvatar/index.tsx
index 74bd7a94a3f..fb7e89e05b1 100644
--- a/packages/flat-components/src/components/ClassroomPage/VideoAvatar/index.tsx
+++ b/packages/flat-components/src/components/ClassroomPage/VideoAvatar/index.tsx
@@ -65,6 +65,7 @@ export const VideoAvatar: React.FC<VideoAvatarProps> = ({
                 "is-small": small && !portal,
                 "is-drop-target": isDropTarget,
             })}
+            data-user-uuid={avatarUser.userUUID}
             draggable={isCreator && !portal}
             onDoubleClick={portal ? undefined : onDoubleClick}
             onDragEnd={onDragEnd}
@@ -140,11 +141,12 @@ export const VideoAvatar: React.FC<VideoAvatarProps> = ({
     return portal ? (
         <div
             className={classnames("video-avatar", "video-avatar-holder", {
-                "is-small": small && !portal,
+                "is-small": small,
                 "is-drop-target": isDropTarget,
             })}
             data-user-uuid={avatarUser.userUUID}
         >
+            <span className="video-avatar-holder-name">{avatarUser.name}</span>
             {createPortal(view, portal)}
         </div>
     ) : (
diff --git a/packages/flat-components/src/components/ClassroomPage/VideoAvatar/style.less b/packages/flat-components/src/components/ClassroomPage/VideoAvatar/style.less
index cf55b1c6b96..59e0909ba5c 100644
--- a/packages/flat-components/src/components/ClassroomPage/VideoAvatar/style.less
+++ b/packages/flat-components/src/components/ClassroomPage/VideoAvatar/style.less
@@ -138,13 +138,34 @@
 }
 
 .video-avatar-holder {
-    background: transparent;
+    background: var(--grey-0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     &::after {
         content: none;
     }
 }
 
+.video-avatar-holder-name {
+    user-select: none;
+    pointer-events: none;
+    padding: 0 12px;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 16px;
+    color: var(--text);
+    opacity: .5;
+}
+
 .video-avatar-holder.is-drop-target {
     box-shadow: inset 0 0 0 2px var(--primary);
 }
+
+.flat-color-scheme-dark {
+    .video-avatar-holder {
+        background: var(--grey-7);
+    }
+}
diff --git a/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/icons/Placeholder.tsx b/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/icons/Placeholder.tsx
new file mode 100644
index 00000000000..c0462d51bca
--- /dev/null
+++ b/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/icons/Placeholder.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+export interface SVGPlaceHolderProps {
+    className?: string;
+    isDark?: boolean;
+}
+
+export const SVGPlaceHolder: React.FC<SVGPlaceHolderProps> = ({ className, isDark }) => {
+    const stopColor = isDark ? "#33353D" : "#D5D9E0";
+
+    return (
+        <svg
+            className={className}
+            fill="none"
+            height="80"
+            viewBox="0 0 80 80"
+            width="80"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M0 80V71.7607C0 61.8652 6.62305 53.1938 16.1699 50.5898L19.873 49.5801C24.6387 48.2808 28.4375 44.6855 30 40L29.3926 39.3936C26.5801 36.5806 25 32.7651 25 28.7866V26.25C22.3535 23.9341 22.3535 19.8159 25 17.5V15C25 6.71582 31.7148 0 40 0C48.2852 0 55 6.71582 55 15V17.5C57.6465 19.8159 57.6465 23.9341 55 26.25V28.7866C55 32.7651 53.4199 36.5806 50.6074 39.3936L50 40C51.5625 44.6855 55.3613 48.2808 60.127 49.5801L63.8301 50.5898C73.377 53.1938 80 61.8652 80 71.7607V80H0Z"
+                fill="url(#paint0_linear_4451_134)"
+            />
+            <defs>
+                <linearGradient
+                    gradientUnits="userSpaceOnUse"
+                    id="paint0_linear_4451_134"
+                    x1="40"
+                    x2="40"
+                    y1="0"
+                    y2="80"
+                >
+                    <stop stopColor={stopColor} />
+                    <stop offset="1" stopColor={stopColor} stopOpacity="0" />
+                </linearGradient>
+            </defs>
+        </svg>
+    );
+};
+
+export default SVGPlaceHolder;
diff --git a/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/icons/placeholder.svg b/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/icons/placeholder.svg
deleted file mode 100644
index b214173d9c5..00000000000
--- a/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/icons/placeholder.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108 95"><defs><linearGradient id="a" x1="50%" x2="50%" y1="99.443%" y2="0%"><stop offset="0%" stop-color="#444E60" stop-opacity="0"/><stop offset="100%" stop-color="#444E60"/></linearGradient></defs><path fill="url(#a)" fill-rule="evenodd" d="M18 154.798c0-14.195 8.629-27.005 21.9-32.58l.404-.167 17.59-7.144c2.816-1.144 4.761-3.705 5.083-6.666L63 108l-3.886-3.768a17.685 17.685 0 0 1-5.368-11.653l-.018-.357-.219-.239a12.068 12.068 0 0 1-2.987-6.598l-.034-.32-.047-.505a3.442 3.442 0 0 1-.014-.317c0-1.882 1.51-3.417 3.405-3.503l.168-.004v-3.072c0-9.658 7.899-17.506 17.702-17.662L72 60c9.941 0 18 7.908 18 17.664v3.072c1.974 0 3.573 1.57 3.573 3.507 0 .106-.004.212-.014.317l-.047.506a12.062 12.062 0 0 1-3.021 6.917l-.22.24c-.174 4.529-2.1 8.823-5.385 12.009L81 108c.233 2.966 1.99 5.602 4.644 7.003l17.66 7.048c13.585 5.422 22.516 18.304 22.693 32.667l.003.436V156H18v-1.202z" opacity=".16" transform="translate(-18 -60)"/></svg>
\ No newline at end of file
diff --git a/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/index.tsx b/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/index.tsx
index 2b1959964e8..52e9cf304ee 100644
--- a/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/index.tsx
+++ b/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/index.tsx
@@ -1,11 +1,12 @@
 import "./style.less";
 
-import placeholderSVG from "./icons/placeholder.svg";
+import Placeholder from "./icons/Placeholder";
 
-import React, { FC } from "react";
+import React, { FC, useContext } from "react";
 import { useTranslate } from "@netless/flat-i18n";
 import classnames from "classnames";
 import { User } from "../../../types/user";
+import { DarkModeContext } from "../../FlatThemeProvider";
 
 export interface VideoAvatarAbsentProps {
     avatarUser?: User | null;
@@ -19,16 +20,23 @@ export const VideoAvatarAbsent: FC<VideoAvatarAbsentProps> = ({
     isAvatarUserCreator,
 }) => {
     const t = useTranslate();
+    const isDark = useContext(DarkModeContext);
+
     return (
-        <div className={classnames("video-avatar-absent", { "is-small": small })}>
-            <img className="video-avatar-absent-img" draggable={false} src={placeholderSVG} />
-            <span className="video-avatar-absent-content">
-                {isAvatarUserCreator
-                    ? t("teacher-left-temporarily")
-                    : avatarUser
-                    ? t("user-left-temporarily", { name: avatarUser.name })
-                    : t("student-left-temporarily")}
-            </span>
+        <div
+            className={classnames("video-avatar-absent", { "is-small": small })}
+            data-user-uuid="[object Object]"
+        >
+            <div className="video-avatar-absent-block">
+                <Placeholder className="video-avatar-absent-img" isDark={isDark} />
+                <span className="video-avatar-absent-content">
+                    {isAvatarUserCreator
+                        ? t("teacher-left-temporarily")
+                        : avatarUser
+                        ? t("user-left-temporarily", { name: avatarUser.name })
+                        : t("student-left-temporarily")}
+                </span>
+            </div>
         </div>
     );
 };
diff --git a/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/style.less b/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/style.less
index 1ebcbd2cd58..7a6eaa2d8cc 100644
--- a/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/style.less
+++ b/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/style.less
@@ -5,36 +5,51 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    flex-direction: column;
-    position: relative;
     background: var(--grey-0);
     user-select: none;
 
     &.is-small {
         font-size: 12px;
-
-        .video-avatar-absent-img {
-            margin-bottom: 8px;
-        }
+        border-radius: 6px;
     }
 }
 
+.video-avatar-absent-block {
+    position: relative;
+    pointer-events: none;
+}
+
 .video-avatar-absent-img {
     width: 100%;
-    max-width: 75%;
-    max-height: 60%;
-    margin-bottom: 16px;
+    user-select: none;
 }
 
 .video-avatar-absent-content {
+    display: block;
     text-align: center;
-    padding: 0 16px;
+    font-size: 14px;
     color: var(--text);
+    opacity: .5;
     user-select: none;
 }
 
+.video-avatar-absent.is-small {
+    .video-avatar-absent-block {
+        width: 80px;
+        height: 80px;
+    }
+
+    .video-avatar-absent-content {
+        position: absolute;
+        left: 50%;
+        bottom: 0;
+        width: max-content;
+        transform: translateX(-50%);
+    }
+}
+
 .flat-color-scheme-dark {
     .video-avatar-absent {
-        background: var(--grey-2);
+        background: var(--grey-7);
     }
 }
diff --git a/packages/flat-pages/src/SmallClassPage/SmallClassPage.less b/packages/flat-pages/src/SmallClassPage/SmallClassPage.less
index 9e82d29b71e..d065a2e67d9 100644
--- a/packages/flat-pages/src/SmallClassPage/SmallClassPage.less
+++ b/packages/flat-pages/src/SmallClassPage/SmallClassPage.less
@@ -37,6 +37,10 @@
     overflow: hidden;
 }
 
+.small-class-realtime-avatars-wrap-wrap {
+    position: relative;
+}
+
 .small-class-realtime-avatars-wrap {
     overflow-y: hidden;
     overflow-x: overlay;
@@ -61,7 +65,7 @@
 .small-class-realtime-avatars {
     height: 108px;
     flex: 1;
-    gap: 4px;
+    gap: 8px;
     padding: 0 4px;
     display: flex;
     justify-content: center;
@@ -84,12 +88,18 @@
 
 .small-class-scroll-handles {
     position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
     display: flex;
     align-items: stretch;
     justify-content: space-between;
     pointer-events: none;
     z-index: 100;
     font-size: 0;
+    opacity: 0;
+    transition: opacity 0.1s;
 }
 
 .small-class-scroll-handle {
@@ -98,25 +108,41 @@
     border: none;
     padding: 0;
     outline: none;
-    width: 36px;
-    background-color: #fff;
+    width: 72px;
+    background-color: transparent;
     display: flex;
     align-items: center;
     justify-content: center;
-    opacity: 0;
-    transition: opacity 0.1s;
     cursor: pointer;
+}
 
-    &.is-left {
-        border-right: 1px solid var(--grey-0);
-    }
+.small-class-realtime-avatars-wrap:hover+.small-class-scroll-handles {
+    opacity: .5;
+    transition: opacity 0.5s;
+}
 
-    &.is-right {
-        border-left: 1px solid var(--grey-0);
-    }
+.small-class-scroll-handles:hover {
+    opacity: 1;
+    transition: opacity 0.1s;
+}
+
+.small-class-scroll-handle-btn {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    border: 1px solid var(--grey-3);
+    border-radius: 50%;
+    background-color: #fff;
+    font-size: 0;
+
+    -webkit-backdrop-filter: blur(2.71828px);
+    backdrop-filter: blur(2.71828px);
 
-    &:hover {
-        opacity: 1;
+    >svg {
+        width: 32px;
+        height: 32px;
     }
 }
 
@@ -143,6 +169,10 @@
         border-color: var(--grey-8);
     }
 
+    .small-class-scroll-handle-btn {
+        border-color: var(--grey-8);
+    }
+
     .small-class-realtime-avatars {
         background: linear-gradient(270deg, #383B42 0%, #2B2F38 100%);
     }
diff --git a/packages/flat-pages/src/SmallClassPage/index.tsx b/packages/flat-pages/src/SmallClassPage/index.tsx
index f3aeecca9dd..8d5d6197ba1 100644
--- a/packages/flat-pages/src/SmallClassPage/index.tsx
+++ b/packages/flat-pages/src/SmallClassPage/index.tsx
@@ -66,8 +66,7 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
             }
         }, [classroomStore]);
 
-        const { isScrollable, makeScrollable, trackPosition, scrollLeft, scrollRight } =
-            useScrollable();
+        const { isScrollable, makeScrollable, scrollLeft, scrollRight } = useScrollable();
 
         return (
             <div className="small-class-page-container">
@@ -86,25 +85,6 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
                             <TopBar left={renderTopBarLeft()} right={renderTopBarRight()} />
                         )}
                         {renderAvatars()}
-                        <div
-                            ref={trackPosition}
-                            className={classNames("small-class-scroll-handles", {
-                                active: isScrollable,
-                            })}
-                        >
-                            <button
-                                className="small-class-scroll-handle is-left"
-                                onClick={scrollLeft}
-                            >
-                                <SVGLeft />
-                            </button>
-                            <button
-                                className="small-class-scroll-handle is-right"
-                                onClick={scrollRight}
-                            >
-                                <SVGRight />
-                            </button>
-                        </div>
                         <div className="small-class-realtime-content">
                             <div className="small-class-realtime-content-container">
                                 <ShareScreen classroomStore={classroomStore} />
@@ -135,35 +115,66 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
 
         function renderAvatars(): React.ReactNode {
             return (
-                <div ref={makeScrollable} className="small-class-realtime-avatars-wrap">
-                    {classroomStore.isJoinedRTC && (
-                        <div className="small-class-realtime-avatars">
-                            <RTCAvatar
-                                avatarUser={classroomStore.users.creator}
-                                getPortal={classroomStore.getPortal}
-                                isAvatarUserCreator={true}
-                                isCreator={classroomStore.isCreator}
-                                isDropTarget={classroomStore.isDropTarget(classroomStore.ownerUUID)}
-                                rtcAvatar={
-                                    classroomStore.users.creator &&
-                                    classroomStore.rtc.getAvatar(
-                                        classroomStore.users.creator.rtcUID,
-                                    )
-                                }
-                                small={true}
-                                updateDeviceState={classroomStore.updateDeviceState}
-                                userUUID={classroomStore.userUUID}
-                                onDoubleClick={() =>
-                                    classroomStore.createMaximizedAvatarWindow(
+                <div className="small-class-realtime-avatars-wrap-wrap">
+                    <div ref={makeScrollable} className="small-class-realtime-avatars-wrap">
+                        {classroomStore.isJoinedRTC && (
+                            <div
+                                className="small-class-realtime-avatars"
+                                data-user-uuid="[object Object]"
+                            >
+                                <RTCAvatar
+                                    avatarUser={classroomStore.users.creator}
+                                    getPortal={classroomStore.getPortal}
+                                    isAvatarUserCreator={true}
+                                    isCreator={classroomStore.isCreator}
+                                    isDropTarget={classroomStore.isDropTarget(
                                         classroomStore.ownerUUID,
-                                    )
-                                }
-                                onDragEnd={classroomStore.onDragEnd}
-                                onDragStart={classroomStore.onDragStart}
-                            />
-                            {classroomStore.onStageUserUUIDs.map(renderAvatar)}
-                        </div>
-                    )}
+                                    )}
+                                    rtcAvatar={
+                                        classroomStore.users.creator &&
+                                        classroomStore.rtc.getAvatar(
+                                            classroomStore.users.creator.rtcUID,
+                                        )
+                                    }
+                                    small={true}
+                                    updateDeviceState={classroomStore.updateDeviceState}
+                                    userUUID={classroomStore.userUUID}
+                                    onDoubleClick={() =>
+                                        classroomStore.createMaximizedAvatarWindow(
+                                            classroomStore.ownerUUID,
+                                        )
+                                    }
+                                    onDragEnd={classroomStore.onDragEnd}
+                                    onDragStart={classroomStore.onDragStart}
+                                />
+                                {classroomStore.onStageUserUUIDs.map(renderAvatar)}
+                            </div>
+                        )}
+                    </div>
+                    <div
+                        className={classNames("small-class-scroll-handles", {
+                            active: isScrollable,
+                        })}
+                    >
+                        <button
+                            className="small-class-scroll-handle is-left"
+                            title="press shift to scroll 5x faster"
+                            onClick={scrollLeft}
+                        >
+                            <span className="small-class-scroll-handle-btn">
+                                <SVGLeft active />
+                            </span>
+                        </button>
+                        <button
+                            className="small-class-scroll-handle is-right"
+                            title="press shift to scroll 5x faster"
+                            onClick={scrollRight}
+                        >
+                            <span className="small-class-scroll-handle-btn">
+                                <SVGRight active />
+                            </span>
+                        </button>
+                    </div>
                 </div>
             );
         }
diff --git a/packages/flat-pages/src/SmallClassPage/utils.tsx b/packages/flat-pages/src/SmallClassPage/utils.tsx
index bd15508acf9..6efd5e39438 100644
--- a/packages/flat-pages/src/SmallClassPage/utils.tsx
+++ b/packages/flat-pages/src/SmallClassPage/utils.tsx
@@ -62,18 +62,16 @@ export function useDraggable(): Draggable {
 export interface Scrollable {
     readonly isScrollable: boolean;
     readonly makeScrollable: (div: HTMLDivElement | null) => void;
-    readonly trackPosition: (div: HTMLDivElement | null) => void;
     readonly scrollLeft: (ev: React.MouseEvent) => void;
     readonly scrollRight: (ev: React.MouseEvent) => void;
 }
 
 export function useScrollable(): Scrollable {
     const [div, makeScrollable] = useState<HTMLDivElement | null>(null);
-    const [tracker, trackPosition] = useState<HTMLDivElement | null>(null);
     const [isScrollable, setScrollable] = useState(false);
 
     useEffect(() => {
-        if (div && tracker) {
+        if (div) {
             let isHorizontal = false;
             let timer = 0;
             // translate mouse wheel to scroll left/right
@@ -95,17 +93,9 @@ export function useScrollable(): Scrollable {
                 },
                 { passive: false },
             );
-            // move tracker to follow the scrollable div
             const observer = new ResizeObserver(() => {
                 const { scrollWidth, clientWidth } = div;
                 setScrollable(scrollWidth > clientWidth);
-                const { top, left, width, height } = div.getBoundingClientRect();
-                Object.assign(tracker.style, {
-                    top: `${top}px`,
-                    left: `${left}px`,
-                    width: `${width}px`,
-                    height: `${height}px`,
-                });
             });
             observer.observe(div);
             return () => {
@@ -114,9 +104,9 @@ export function useScrollable(): Scrollable {
             };
         }
         return;
-    }, [div, tracker]);
+    }, [div]);
 
-    const DISTANCE = 148;
+    const DISTANCE = 152;
 
     const scrollLeft = useCallback(
         (ev: React.MouseEvent) =>
@@ -136,5 +126,5 @@ export function useScrollable(): Scrollable {
         [div],
     );
 
-    return { isScrollable, makeScrollable, trackPosition, scrollLeft, scrollRight };
+    return { isScrollable, makeScrollable, scrollLeft, scrollRight };
 }
diff --git a/packages/flat-pages/src/components/UserWindows.less b/packages/flat-pages/src/components/UserWindows.less
index 6d415cf20e1..86e434aea75 100644
--- a/packages/flat-pages/src/components/UserWindows.less
+++ b/packages/flat-pages/src/components/UserWindows.less
@@ -32,6 +32,6 @@
     z-index: 999999;
 }
 
-.user-windows.is-hovering {
+.user-windows.is-hovering>.user-windows-mask {
     box-shadow: inset 0 0 0 2px var(--primary);
 }
diff --git a/packages/flat-pages/src/components/UserWindows.tsx b/packages/flat-pages/src/components/UserWindows.tsx
index 3b463964800..905c7195b05 100644
--- a/packages/flat-pages/src/components/UserWindows.tsx
+++ b/packages/flat-pages/src/components/UserWindows.tsx
@@ -48,12 +48,9 @@ export const UserWindows = observer<UserWindowsProps>(function UserWindows({ cla
         }
     }, [boundingRect]);
 
-    const users = [...classroom.userWindows.keys()]
-        .map(userUUID => {
-            const window = classroom.userWindows.get(userUUID)!;
-            return { userUUID, window };
-        })
-        .sort((a, b) => a.window.z - b.window.z);
+    const users = (classroom.userWindowsGrid || [...classroom.userWindows.keys()]).map(userUUID => {
+        return { userUUID, window: classroom.userWindows.get(userUUID) };
+    });
 
     const onDrop = useCallback(
         (ev: React.DragEvent<HTMLDivElement>) => {
@@ -89,7 +86,7 @@ export const UserWindows = observer<UserWindowsProps>(function UserWindows({ cla
         [baseRect, boundingRect, classroom],
     );
 
-    const isGrid = classroom.userWindowsMode === "maximized";
+    const isGrid = classroom.userWindowsGrid;
 
     return (
         <div
@@ -99,25 +96,25 @@ export const UserWindows = observer<UserWindowsProps>(function UserWindows({ cla
                 "is-hovering": hovering,
             })}
         >
-            {classroom.isDraggingAvatar && (
-                <div
-                    className="user-windows-mask"
-                    onDragLeave={() => setHovering(false)}
-                    onDragOver={() => setHovering(true)}
-                    onDrop={onDrop}
-                />
-            )}
             {users.map(({ userUUID, window }) => (
                 <UserAvatarWindow
                     key={userUUID}
                     baseRect={baseRect}
                     classroom={classroom}
-                    mode={isGrid ? "maximized" : "normal"}
+                    mode={classroom.userWindowsMode}
                     readonly={!classroom.isCreator}
                     userUUID={userUUID}
                     window={window}
                 />
             ))}
+            {classroom.isDraggingAvatar && (
+                <div
+                    className="user-windows-mask"
+                    onDragLeave={() => setHovering(false)}
+                    onDragOver={() => setHovering(true)}
+                    onDrop={onDrop}
+                />
+            )}
         </div>
     );
 });
@@ -126,11 +123,14 @@ interface UserAvatarWindowProps {
     mode: "maximized" | "normal";
     readonly: boolean;
     userUUID: string;
-    window: UserWindow;
+    /** may not exist on maximized mode */
+    window?: UserWindow;
     baseRect: { width: number; height: number; extraX?: number; extraY?: number };
     classroom: ClassroomStore;
 }
 
+const DEFAULT_WINDOW: UserWindow = { x: 0, y: 0, width: 0.4, height: 8 / 15, z: 0 };
+
 const UserAvatarWindow = observer<UserAvatarWindowProps>(function UserAvatarWindow({
     mode,
     readonly,
@@ -155,7 +155,7 @@ const UserAvatarWindow = observer<UserAvatarWindowProps>(function UserAvatarWind
         return;
     }, [classroom, isUnMounted, tempWindow, userUUID]);
 
-    const window = tempWindow || realWindow;
+    const window = tempWindow || realWindow || DEFAULT_WINDOW;
     const rect: Rectangle = useMemo(
         () => ({
             x: window.x * baseRect.width + (baseRect.extraX || 0),
@@ -167,7 +167,7 @@ const UserAvatarWindow = observer<UserAvatarWindowProps>(function UserAvatarWind
     );
 
     const onClick = useCallback(() => {
-        classroom.updateAvatarWindow(userUUID, realWindow);
+        realWindow && classroom.updateAvatarWindow(userUUID, realWindow);
     }, [classroom, realWindow, userUUID]);
 
     const onDoubleClick = useCallback(() => {
@@ -218,17 +218,15 @@ const UserAvatarWindow = observer<UserAvatarWindowProps>(function UserAvatarWind
                 // but set a correct z when we really update the storage.
                 // see classroom.updateAvatarWindow()
                 z: 2147483647,
-                index: window.index,
             });
         },
-        [baseRect, window.index],
+        [baseRect],
     );
 
     return (
         <AvatarWindow
             key={userUUID}
             hidden={classroom.userHasLeft(userUUID)}
-            index={window.index}
             mode={mode}
             readonly={readonly}
             rect={rect}
diff --git a/packages/flat-stores/src/classroom-store/index.ts b/packages/flat-stores/src/classroom-store/index.ts
index 092d7283ece..90c21c59d98 100644
--- a/packages/flat-stores/src/classroom-store/index.ts
+++ b/packages/flat-stores/src/classroom-store/index.ts
@@ -51,7 +51,7 @@ export type ClassroomStorageState = {
 export type OnStageUsersStorageState = Record<string, boolean>;
 export type WhiteboardStorageState = Record<string, boolean>;
 export type UserWindowsStorageState = {
-    mode: "normal" | "maximized";
+    grid: null | string[];
 };
 // stored in UserWindowsStorageState too, but TypeScript does not support union records
 export type UserWindow = {
@@ -59,10 +59,7 @@ export type UserWindow = {
     y: number;
     width: number;
     height: number;
-    // the order in normal mode
     z: number;
-    // the order in maximized mode
-    index: number;
 };
 
 export class ClassroomStore {
@@ -115,7 +112,7 @@ export class ClassroomStore {
         downlink: 0,
     };
 
-    public userWindowsMode: UserWindowsStorageState["mode"] = "normal";
+    public userWindowsGrid: string[] | null = null;
     public readonly userWindows = observable.map<string, UserWindow>();
     public readonly userWindowsPortal = observable.map<string, HTMLDivElement>();
 
@@ -337,6 +334,10 @@ export class ClassroomStore {
         return result;
     }
 
+    public get userWindowsMode(): "normal" | "maximized" {
+        return this.userWindowsGrid ? "maximized" : "normal";
+    }
+
     public async init(): Promise<void> {
         await roomStore.syncOrdinaryRoomInfo(this.roomUUID);
 
@@ -384,7 +385,7 @@ export class ClassroomStore {
         );
         const userWindowsStorage = fastboard.syncedStore.connectStorage<UserWindowsStorageState>(
             "userWindows",
-            { mode: "normal" },
+            { grid: null },
         );
         this.deviceStateStorage = deviceStateStorage;
         this.classroomStorage = classroomStorage;
@@ -573,7 +574,7 @@ export class ClassroomStore {
 
         const initialUserWindows = new Map<string, UserWindow>();
         for (const key in userWindowsStorage.state) {
-            if (key !== "mode") {
+            if (key !== "grid") {
                 const userWindow: UserWindow | null = (userWindowsStorage.state as any)[key];
                 if (userWindow) {
                     initialUserWindows.set(key, userWindow);
@@ -581,7 +582,7 @@ export class ClassroomStore {
             }
         }
         runInAction(() => {
-            this.userWindowsMode = userWindowsStorage.state.mode;
+            this.userWindowsGrid = userWindowsStorage.state.grid;
             this.userWindows.replace(initialUserWindows);
         });
 
@@ -607,8 +608,8 @@ export class ClassroomStore {
             userWindowsStorage.on("stateChanged", diff => {
                 runInAction(() => {
                     for (const key in diff) {
-                        if (key === "mode") {
-                            this.userWindowsMode = diff[key]!.newValue;
+                        if (key === "grid") {
+                            this.userWindowsGrid = diff[key]!.newValue;
                         } else {
                             const userWindow: UserWindow | undefined = (diff as any)[key].newValue;
                             if (userWindow) {
@@ -750,88 +751,101 @@ export class ClassroomStore {
         }
     };
 
-    public maxOfUserWindows = (exclude?: string): { z: number; index: number } => {
+    public windowedUserUUIDs = (): string[] => {
         if (!this.userWindowsStorage) {
-            return { z: 0, index: 0 };
+            return [];
         }
         const windows = this.userWindowsStorage.state as unknown as Record<string, UserWindow>;
-        let maxZ = 0;
-        let maxIndex = 0;
+        const result: string[] = [];
         for (const key in windows) {
-            if (key !== "mode" && key !== exclude && windows[key]) {
-                maxZ = Math.max(maxZ, windows[key].z);
-                maxIndex = Math.max(maxZ, windows[key].index);
+            if (key !== "grid" && windows[key]) {
+                result.push(key);
             }
         }
-        return { z: maxZ, index: maxIndex };
+        return result;
     };
 
-    private isUserWindowsEmpty(): boolean {
+    public maxZOfUserWindows = (exclude?: string): number => {
         if (!this.userWindowsStorage) {
-            return true;
+            return 0;
         }
         const windows = this.userWindowsStorage.state as unknown as Record<string, UserWindow>;
+        let maxZ = 0;
         for (const key in windows) {
-            if (key !== "mode" && windows[key]) {
-                return false;
+            if (key !== "grid" && key !== exclude && windows[key]) {
+                maxZ = Math.max(maxZ, windows[key].z);
             }
         }
-        return true;
-    }
+        return maxZ;
+    };
 
     public userHasLeft = (userUUID: string): boolean => {
         return this.users.cachedUsers.get(userUUID)?.hasLeft ?? true;
     };
 
-    public toggleUserWindowsMode = (mode?: UserWindowsStorageState["mode"]): void => {
+    public toggleUserWindowsMode = (mode?: "normal" | "maximized"): void => {
         if (this.isCreator && this.userWindowsStorage) {
-            this.userWindowsStorage.setState({
-                mode: mode || (this.userWindowsMode === "normal" ? "maximized" : "normal"),
-            });
+            const targetMode = mode || (this.userWindowsMode === "normal" ? "maximized" : "normal");
+            if (targetMode === "normal") {
+                this.userWindowsStorage.setState({ grid: null });
+            } else {
+                this.userWindowsStorage.setState({ grid: this.windowedUserUUIDs() });
+            }
         }
     };
 
-    public createAvatarWindow = (
-        userUUID: string,
-        window: Omit<UserWindow, "z" | "index">,
-    ): void => {
+    public createAvatarWindow = (userUUID: string, window: Omit<UserWindow, "z">): void => {
         if (this.isCreator && this.userWindowsStorage) {
-            const { z, index } = this.maxOfUserWindows();
-            this.userWindowsStorage.setState({
-                [userUUID]: { ...window, z: z + 1, index: index + 1 },
-            });
+            if (this.userWindowsStorage.state.grid) {
+                this.createMaximizedAvatarWindow(userUUID);
+            } else {
+                const maxZ = this.maxZOfUserWindows();
+                this.userWindowsStorage.setState({ [userUUID]: { ...window, z: maxZ + 1 } });
+            }
         }
     };
 
     public createMaximizedAvatarWindow = (userUUID: string): void => {
         if (this.isCreator && this.userWindowsStorage) {
-            const { z, index } = this.maxOfUserWindows();
-            this.userWindowsStorage.setState({
-                mode: "maximized",
-                [userUUID]: {
-                    x: 0.1,
-                    y: 0.1,
-                    width: 2 / 5,
-                    height: 8 / 15,
-                    z: z + 1,
-                    index: index + 1,
-                },
-            });
+            let grid = this.userWindowsStorage.state.grid || this.windowedUserUUIDs();
+            if (!grid.includes(userUUID)) {
+                grid = [...grid, userUUID];
+            }
+            this.userWindowsStorage.setState({ grid });
         }
     };
 
+    private isWindowEqual(a: UserWindow, b: UserWindow): boolean {
+        return (
+            a.z === b.z &&
+            Math.abs(a.x - b.x) < 1e-3 &&
+            Math.abs(a.y - b.y) < 1e-3 &&
+            Math.abs(a.width - b.width) < 1e-3 &&
+            Math.abs(a.height - b.height) < 1e-3
+        );
+    }
+
     public updateAvatarWindow = (userUUID: string, window: UserWindow): void => {
-        if (this.isCreator && this.userWindowsStorage) {
-            const { z } = this.maxOfUserWindows(userUUID);
-            this.userWindowsStorage.setState({ [userUUID]: { ...window, z: z + 1 } });
+        if (this.isCreator && this.userWindowsStorage && !this.userWindowsStorage.state.grid) {
+            const maxZ = this.maxZOfUserWindows(userUUID);
+            const newValue = { ...window, z: maxZ + 1 };
+            const oldValue = (this.userWindowsStorage.state as any)[userUUID];
+            if (!this.isWindowEqual(oldValue, newValue)) {
+                this.userWindowsStorage.setState({ [userUUID]: newValue });
+            }
         }
     };
 
     public deleteAvatarWindow = (userUUID: string): void => {
         if (this.isCreator && this.userWindowsStorage) {
             this.userWindowsStorage.setState({ [userUUID]: undefined });
-            if (this.userWindowsMode === "maximized" && this.isUserWindowsEmpty()) {
-                this.toggleUserWindowsMode("normal");
+            let grid = this.userWindowsStorage.state.grid;
+            if (grid && grid.includes(userUUID)) {
+                grid = grid.filter(uuid => uuid !== userUUID);
+                if (grid.length === 0) {
+                    grid = null;
+                }
+                this.userWindowsStorage.setState({ grid });
             }
         }
     };