diff --git a/packages/flat-components/package.json b/packages/flat-components/package.json
index 8d1bc369d46..9995b53502c 100644
--- a/packages/flat-components/package.json
+++ b/packages/flat-components/package.json
@@ -19,6 +19,7 @@
     "@netless/flat-i18n": "workspace:*",
     "@netless/flat-server-api": "workspace:*",
     "@netless/flat-services": "workspace:*",
+    "@wopjs/dom": "^0.1.3",
     "antd": "^4.23.2",
     "classnames": "^2.3.1",
     "date-fns": "^2.29.3",
diff --git a/packages/flat-components/src/components/ClassroomPage/AvatarWindow/AvatarWindow.stories.tsx b/packages/flat-components/src/components/ClassroomPage/AvatarWindow/AvatarWindow.stories.tsx
new file mode 100644
index 00000000000..f67a3bb5531
--- /dev/null
+++ b/packages/flat-components/src/components/ClassroomPage/AvatarWindow/AvatarWindow.stories.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { Meta, Story } from "@storybook/react";
+import { AvatarWindow, AvatarWindowProps, fixRect } from ".";
+import { VideoAvatar } from "../VideoAvatar";
+
+const storyMeta: Meta = {
+    title: "ClassroomPage/AvatarWindow",
+    component: AvatarWindow,
+    argTypes: {},
+};
+
+export default storyMeta;
+
+export const Overview: Story<Pick<AvatarWindowProps, "readonly" | "onDoubleClick">> = props => {
+    const [camera, setCamera] = useState(false);
+    const [mic, setMic] = useState(true);
+    const [rect, setRect] = useState({ x: 10, y: 20, width: 100, height: 75 });
+
+    return (
+        <div
+            style={{
+                width: "500px",
+                height: "400px",
+                overflow: "hidden",
+                border: "1px solid green",
+                position: "relative",
+            }}
+        >
+            <AvatarWindow
+                mode="normal"
+                readonly={props.readonly}
+                rect={rect}
+                onDoubleClick={props.onDoubleClick}
+                onResize={(rect, handle) => setRect(fixRect(rect, handle, 3 / 4, 100, 500, 400))}
+            >
+                <VideoAvatar
+                    isCreator
+                    avatarUser={{
+                        name: "Hello",
+                        userUUID: "",
+                        mic,
+                        camera,
+                        avatar: "http://placekitten.com/64/64",
+                    }}
+                    updateDeviceState={(_, camera_, mic_) => {
+                        if (camera !== camera_) {
+                            setCamera(camera_);
+                        }
+                        if (mic !== mic_) {
+                            setMic(mic_);
+                        }
+                    }}
+                    userUUID=""
+                />
+            </AvatarWindow>
+        </div>
+    );
+};
diff --git a/packages/flat-components/src/components/ClassroomPage/AvatarWindow/index.tsx b/packages/flat-components/src/components/ClassroomPage/AvatarWindow/index.tsx
new file mode 100644
index 00000000000..85790b91661
--- /dev/null
+++ b/packages/flat-components/src/components/ClassroomPage/AvatarWindow/index.tsx
@@ -0,0 +1,278 @@
+import "./style.less";
+
+import React, { useEffect, useRef } from "react";
+import classNames from "classnames";
+import { listen } from "@wopjs/dom";
+
+const preventEvent = (ev: React.UIEvent | Event): void => {
+    ev.stopPropagation();
+    if (ev.cancelable) {
+        ev.preventDefault();
+    }
+};
+
+export interface AvatarWindowProps {
+    mode: "normal" | "maximized";
+    rect: Rectangle;
+    index?: number;
+    zIndex?: number;
+    hidden?: boolean;
+    readonly?: boolean;
+    onClick?: () => void;
+    onResize?: (newRectangle: Rectangle, handle?: ResizeHandle) => void;
+    onDoubleClick?: () => void;
+    onDragging?: (ev: PointerEvent) => void;
+    onDragEnd?: (ev: PointerEvent) => void;
+}
+
+export interface Rectangle {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+export type ResizeHandle = "" | "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se";
+
+export const AvatarWindow: React.FC<AvatarWindowProps> = ({
+    mode,
+    rect,
+    index,
+    zIndex,
+    hidden,
+    readonly,
+    children,
+    onClick,
+    onResize,
+    onDoubleClick,
+    onDragging,
+    onDragEnd,
+}) => {
+    const lastClick = useRef({ t: 0, x: -100, y: -100 });
+    const disposers = useRef<Array<() => void>>([]);
+
+    useEffect(
+        () => () => {
+            disposers.current.forEach(dispose => dispose());
+            disposers.current = [];
+        },
+        [],
+    );
+
+    const handleTrackStart = (ev: React.PointerEvent<HTMLDivElement>): void => {
+        if (!ev.isPrimary || readonly || ev.button !== 0) {
+            return;
+        }
+
+        const target = ev.target as HTMLElement;
+        // filter out events on buttons, which should be handled by the button itself
+        for (
+            let node: HTMLElement | null = target;
+            node && node !== ev.currentTarget;
+            node = node.parentElement
+        ) {
+            if (node.tagName === "BUTTON") {
+                return;
+            }
+        }
+
+        const now = Date.now();
+        if (now - lastClick.current.t <= 500) {
+            if (
+                Math.abs(lastClick.current.x - ev.clientX) <= 5 &&
+                Math.abs(lastClick.current.y - ev.clientY) <= 5
+            ) {
+                onDoubleClick?.();
+            }
+            return;
+        }
+        lastClick.current = { t: now, x: ev.clientX, y: ev.clientY };
+
+        const main = ev.currentTarget.parentElement as HTMLElement;
+        preventEvent(ev);
+        target.setPointerCapture(ev.pointerId);
+        main.classList.add("window-grabbing");
+
+        const trackingHandle = target.dataset?.windowHandle as ResizeHandle | undefined;
+        const { pageX: trackStartPageX, pageY: trackStartPageY } = ev;
+
+        const handleTracking = (ev: PointerEvent): void => {
+            if (!ev.isPrimary || readonly) {
+                return;
+            }
+
+            preventEvent(ev);
+
+            const { pageX, pageY } = ev;
+            const offsetX = pageX - trackStartPageX;
+            const offsetY = pageY - trackStartPageY;
+
+            let { x: newX, y: newY, width: newWidth, height: newHeight } = rect;
+
+            switch (trackingHandle) {
+                case "n": {
+                    newY = rect.y + offsetY;
+                    newHeight = rect.height - offsetY;
+                    break;
+                }
+                case "s": {
+                    newHeight = rect.height + offsetY;
+                    break;
+                }
+                case "w": {
+                    newX = rect.x + offsetX;
+                    newWidth = rect.width - offsetX;
+                    break;
+                }
+                case "e": {
+                    newWidth = rect.width + offsetX;
+                    break;
+                }
+                case "nw": {
+                    newX = rect.x + offsetX;
+                    newY = rect.y + offsetY;
+                    newWidth = rect.width - offsetX;
+                    newHeight = rect.height - offsetY;
+                    break;
+                }
+                case "ne": {
+                    newY = rect.y + offsetY;
+                    newWidth = rect.width + offsetX;
+                    newHeight = rect.height - offsetY;
+                    break;
+                }
+                case "sw": {
+                    newX = rect.x + offsetX;
+                    newWidth = rect.width - offsetX;
+                    newHeight = rect.height + offsetY;
+                    break;
+                }
+                case "se": {
+                    newWidth = rect.width + offsetX;
+                    newHeight = rect.height + offsetY;
+                    break;
+                }
+                default: {
+                    newX = rect.x + offsetX;
+                    newY = rect.y + offsetY;
+                    break;
+                }
+            }
+
+            onDragging?.(ev);
+            onResize?.({ x: newX, y: newY, width: newWidth, height: newHeight }, trackingHandle);
+        };
+
+        const handleTrackEnd = (ev: PointerEvent): void => {
+            if (!ev.isPrimary) {
+                return;
+            }
+
+            target.releasePointerCapture(ev.pointerId);
+            preventEvent(ev);
+            onDragEnd?.(ev);
+
+            disposers.current.forEach(dispose => dispose());
+            disposers.current = [];
+        };
+
+        disposers.current.push(
+            () => main.classList.remove("window-grabbing"),
+            listen(window, "pointermove", handleTracking, { passive: false }),
+            listen(window, "pointerup", handleTrackEnd, { passive: false }),
+            listen(window, "pointercancel", handleTrackEnd, { passive: false }),
+        );
+    };
+
+    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}
+        >
+            <div className="window-main" onClick={onClick} onPointerDown={handleTrackStart}>
+                {children}
+            </div>
+            <div className="window-resize-handles" onPointerDown={handleTrackStart}>
+                <div className="window-n window-resize-handle" data-window-handle="n" />
+                <div className="window-s window-resize-handle" data-window-handle="s" />
+                <div className="window-w window-resize-handle" data-window-handle="w" />
+                <div className="window-e window-resize-handle" data-window-handle="e" />
+                <div className="window-nw window-resize-handle" data-window-handle="nw" />
+                <div className="window-ne window-resize-handle" data-window-handle="ne" />
+                <div className="window-sw window-resize-handle" data-window-handle="sw" />
+                <div className="window-se window-resize-handle" data-window-handle="se" />
+            </div>
+        </div>
+    );
+};
+
+const clamp = (value: number, min: number, max: number): number =>
+    value < min ? min : value > max ? max : value;
+
+export const fixRect = (
+    input: Rectangle,
+    handle: ResizeHandle | undefined,
+    ratio: number,
+    minWidth: number,
+    maxWidth: number,
+    maxHeight: number,
+): Rectangle => {
+    const { x, y, width, height } = input;
+
+    // Keep the ratio
+    const fixedWidth = height / ratio;
+    const fixedHeight = width * ratio;
+    let newRect: Rectangle;
+    if (!handle || handle === "e" || handle === "w") {
+        newRect = { x, y, width, height: fixedHeight };
+    } else if (handle === "s" || handle === "n") {
+        newRect = { x, y, width: fixedWidth, height };
+    } else if (fixedHeight < height) {
+        const newY = handle === "ne" || handle === "nw" ? y + height - fixedHeight : y;
+        newRect = { x, y: newY, width, height: fixedHeight };
+    } else {
+        const newX = handle === "nw" || handle === "sw" ? x + width - fixedWidth : x;
+        newRect = { x: newX, y, width: fixedWidth, height };
+    }
+
+    // Clamp size
+    if (!(minWidth <= newRect.width && newRect.width <= maxWidth && newRect.height <= maxHeight)) {
+        const newWidth = clamp(newRect.width, minWidth, Math.min(maxWidth, maxHeight / ratio));
+        const newHeight = newWidth * ratio;
+        if (handle === "w" || handle === "sw" || handle === "nw") {
+            newRect.x = x + width - newWidth;
+        }
+        if (handle === "n" || handle === "ne" || handle === "nw") {
+            newRect.y = y + height - newHeight;
+        }
+        newRect.width = newWidth;
+        newRect.height = newHeight;
+    }
+
+    // Clamp position
+    newRect.x = clamp(newRect.x, 0, maxWidth - newRect.width);
+    newRect.y = clamp(newRect.y, 0, maxHeight - newRect.height);
+
+    return newRect;
+};
diff --git a/packages/flat-components/src/components/ClassroomPage/AvatarWindow/style.less b/packages/flat-components/src/components/ClassroomPage/AvatarWindow/style.less
new file mode 100644
index 00000000000..a83e0b05f46
--- /dev/null
+++ b/packages/flat-components/src/components/ClassroomPage/AvatarWindow/style.less
@@ -0,0 +1,113 @@
+.window {
+    top: 0;
+    left: 0;
+    pointer-events: all;
+    transition:
+        width 0.4s cubic-bezier(0.4, 0.9, 0.71, 1.02),
+        height 0.4s cubic-bezier(0.55, 0.82, 0.63, 0.95),
+        opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0),
+        transform 0.4s ease;
+    cursor: grab;
+}
+
+.window[hidden] {
+    display: none;
+}
+
+.window-grabbing,
+.window-restoring {
+    transition: none;
+    cursor: grabbing;
+}
+
+.window-readonly,
+.window-readonly .window-resize-handle {
+    pointer-events: none;
+    cursor: default;
+}
+
+.window-maximized {
+    transition: none;
+    cursor: default;
+}
+
+.window-main {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    pointer-events: all;
+}
+
+.window-resize-handle {
+    position: absolute;
+    z-index: 2147483647;
+    user-select: none;
+    pointer-events: all;
+}
+
+.window-n {
+    width: 100%;
+    height: 5px;
+    left: 0;
+    top: -5px;
+    cursor: n-resize;
+}
+
+.window-s {
+    width: 100%;
+    height: 5px;
+    left: 0;
+    bottom: -5px;
+    cursor: s-resize;
+}
+
+.window-w {
+    width: 5px;
+    height: 100%;
+    left: -5px;
+    top: 0;
+    cursor: w-resize;
+}
+
+.window-e {
+    width: 5px;
+    height: 100%;
+    right: -5px;
+    top: 0;
+    cursor: e-resize;
+}
+
+.window-nw {
+    width: 15px;
+    height: 15px;
+    top: -5px;
+    left: -5px;
+    cursor: nw-resize;
+}
+
+.window-ne {
+    width: 15px;
+    height: 15px;
+    top: -5px;
+    right: -5px;
+    cursor: ne-resize;
+}
+
+.window-se {
+    width: 15px;
+    height: 15px;
+    bottom: -5px;
+    right: -5px;
+    cursor: se-resize;
+}
+
+.window-sw {
+    width: 15px;
+    height: 15px;
+    bottom: -5px;
+    left: -5px;
+    cursor: sw-resize;
+}
diff --git a/packages/flat-components/src/components/ClassroomPage/VideoAvatar/index.tsx b/packages/flat-components/src/components/ClassroomPage/VideoAvatar/index.tsx
index ba4a2b844ad..74bd7a94a3f 100644
--- a/packages/flat-components/src/components/ClassroomPage/VideoAvatar/index.tsx
+++ b/packages/flat-components/src/components/ClassroomPage/VideoAvatar/index.tsx
@@ -2,6 +2,7 @@ import "./style.less";
 
 import React from "react";
 import classnames from "classnames";
+import { createPortal } from "react-dom";
 import { IconMic } from "./IconMic";
 import { SVGCamera, SVGCameraMute, SVGMicrophoneMute } from "../../FlatIcons";
 
@@ -23,23 +24,52 @@ export interface VideoAvatarProps {
     userUUID: string;
     updateDeviceState(id: string, camera: boolean, mic: boolean): void;
     getVolumeLevel?: () => number;
+
+    portal?: HTMLElement;
+    onDoubleClick?: () => void;
+    onDragStart?: () => void;
+    onDragEnd?: () => void;
+    isDropTarget?: boolean;
 }
 
 export const VideoAvatar: React.FC<VideoAvatarProps> = ({
+    portal,
     small,
     avatarUser,
     isCreator,
+    isDropTarget,
     userUUID,
     updateDeviceState,
     getVolumeLevel,
+    onDoubleClick,
+    onDragStart,
+    onDragEnd,
     children,
 }) => {
     const isCameraCtrlDisable = !isCreator && avatarUser.userUUID !== userUUID;
 
     const isMicCtrlDisable = !isCreator && avatarUser.userUUID !== userUUID;
 
-    return (
-        <div className={classnames("video-avatar", { "is-small": small })}>
+    const onDragStartImpl = (ev: React.DragEvent<HTMLDivElement>): void => {
+        const rect = ev.currentTarget.getBoundingClientRect();
+        const x = (ev.clientX - rect.left) / rect.width;
+        const y = (ev.clientY - rect.top) / rect.height;
+        ev.dataTransfer.setData("video-avatar", JSON.stringify([avatarUser.userUUID, x, y]));
+        ev.dataTransfer.effectAllowed = "move";
+        onDragStart && onDragStart();
+    };
+
+    const view = (
+        <div
+            className={classnames("video-avatar", {
+                "is-small": small && !portal,
+                "is-drop-target": isDropTarget,
+            })}
+            draggable={isCreator && !portal}
+            onDoubleClick={portal ? undefined : onDoubleClick}
+            onDragEnd={onDragEnd}
+            onDragStart={onDragStartImpl}
+        >
             <div className="video-avatar-video">{children}</div>
             {(!children || !avatarUser.camera) && (
                 <div className="video-avatar-image-container">
@@ -59,7 +89,11 @@ export const VideoAvatar: React.FC<VideoAvatarProps> = ({
                 <h1 className="video-avatar-user-name" title={avatarUser.name}>
                     {avatarUser.name}
                 </h1>
-                <div className="video-avatar-media-ctrl">
+                <div
+                    className={classnames("video-avatar-media-ctrl", {
+                        "is-portal": portal,
+                    })}
+                >
                     <button
                         className={classnames("video-avatar-media-ctrl-btn", {
                             "is-muted": !avatarUser.camera,
@@ -102,4 +136,18 @@ export const VideoAvatar: React.FC<VideoAvatarProps> = ({
             </div>
         </div>
     );
+
+    return portal ? (
+        <div
+            className={classnames("video-avatar", "video-avatar-holder", {
+                "is-small": small && !portal,
+                "is-drop-target": isDropTarget,
+            })}
+            data-user-uuid={avatarUser.userUUID}
+        >
+            {createPortal(view, portal)}
+        </div>
+    ) : (
+        view
+    );
 };
diff --git a/packages/flat-components/src/components/ClassroomPage/VideoAvatar/style.less b/packages/flat-components/src/components/ClassroomPage/VideoAvatar/style.less
index dbbdb61d3c4..cf55b1c6b96 100644
--- a/packages/flat-components/src/components/ClassroomPage/VideoAvatar/style.less
+++ b/packages/flat-components/src/components/ClassroomPage/VideoAvatar/style.less
@@ -27,6 +27,7 @@
     }
 }
 
+.video-avatar-holder,
 .video-avatar-video {
     position: relative;
     width: 100%;
@@ -91,6 +92,10 @@
 .video-avatar-media-ctrl {
     margin-left: auto;
     display: flex;
+
+    &.is-portal {
+        pointer-events: all;
+    }
 }
 
 .video-avatar-media-ctrl-btn {
@@ -131,3 +136,15 @@
         font-size: 12px;
     }
 }
+
+.video-avatar-holder {
+    background: transparent;
+
+    &::after {
+        content: none;
+    }
+}
+
+.video-avatar-holder.is-drop-target {
+    box-shadow: inset 0 0 0 2px var(--primary);
+}
diff --git a/packages/flat-components/src/components/ClassroomPage/index.tsx b/packages/flat-components/src/components/ClassroomPage/index.tsx
index 8eaa3a4fdd0..334a38ba353 100644
--- a/packages/flat-components/src/components/ClassroomPage/index.tsx
+++ b/packages/flat-components/src/components/ClassroomPage/index.tsx
@@ -9,3 +9,4 @@ export * from "./VideoAvatar";
 export * from "./VideoAvatarAbsent";
 export * from "./ScenesController";
 export * from "./RaiseHand";
+export * from "./AvatarWindow";
diff --git a/packages/flat-pages/src/BigClassPage/index.tsx b/packages/flat-pages/src/BigClassPage/index.tsx
index 15619d4ff22..a4b40ea84cd 100644
--- a/packages/flat-pages/src/BigClassPage/index.tsx
+++ b/packages/flat-pages/src/BigClassPage/index.tsx
@@ -193,17 +193,33 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
                         <div className="big-class-realtime-rtc-box">
                             <RTCAvatar
                                 avatarUser={creator}
+                                getPortal={classroomStore.getPortal}
                                 isAvatarUserCreator={true}
                                 isCreator={classroomStore.isCreator}
+                                isDropTarget={classroomStore.isDropTarget(classroomStore.ownerUUID)}
                                 rtcAvatar={creator && classroomStore.rtc.getAvatar(creator.rtcUID)}
                                 updateDeviceState={classroomStore.updateDeviceState}
                                 userUUID={classroomStore.userUUID}
+                                onDoubleClick={() =>
+                                    classroomStore.createMaximizedAvatarWindow(
+                                        classroomStore.ownerUUID,
+                                    )
+                                }
+                                onDragEnd={classroomStore.onDragEnd}
+                                onDragStart={classroomStore.onDragStart}
                             />
                             {classroomStore.onStageUserUUIDs.length > 0 && (
                                 <RTCAvatar
                                     avatarUser={classroomStore.firstOnStageUser}
+                                    getPortal={classroomStore.getPortal}
                                     isAvatarUserCreator={false}
                                     isCreator={classroomStore.isCreator}
+                                    isDropTarget={
+                                        classroomStore.firstOnStageUser &&
+                                        classroomStore.isDropTarget(
+                                            classroomStore.firstOnStageUser.userUUID,
+                                        )
+                                    }
                                     rtcAvatar={
                                         classroomStore.firstOnStageUser &&
                                         classroomStore.rtc.getAvatar(
@@ -212,6 +228,14 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
                                     }
                                     updateDeviceState={classroomStore.updateDeviceState}
                                     userUUID={classroomStore.userUUID}
+                                    onDoubleClick={() =>
+                                        classroomStore.firstOnStageUser &&
+                                        classroomStore.createMaximizedAvatarWindow(
+                                            classroomStore.firstOnStageUser.userUUID,
+                                        )
+                                    }
+                                    onDragEnd={classroomStore.onDragEnd}
+                                    onDragStart={classroomStore.onDragStart}
                                 />
                             )}
                         </div>
diff --git a/packages/flat-pages/src/OneToOnePage/index.tsx b/packages/flat-pages/src/OneToOnePage/index.tsx
index 99138caf837..02cafe286ed 100644
--- a/packages/flat-pages/src/OneToOnePage/index.tsx
+++ b/packages/flat-pages/src/OneToOnePage/index.tsx
@@ -186,8 +186,10 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(
                         <div className="one-to-one-rtc-avatar-container">
                             <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(
@@ -196,12 +198,26 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(
                                 }
                                 updateDeviceState={classroomStore.updateDeviceState}
                                 userUUID={classroomStore.userUUID}
+                                onDoubleClick={() =>
+                                    classroomStore.createMaximizedAvatarWindow(
+                                        classroomStore.ownerUUID,
+                                    )
+                                }
+                                onDragEnd={classroomStore.onDragEnd}
+                                onDragStart={classroomStore.onDragStart}
                             />
                             {classroomStore.firstOnStageUser && (
                                 <RTCAvatar
                                     avatarUser={classroomStore.firstOnStageUser}
+                                    getPortal={classroomStore.getPortal}
                                     isAvatarUserCreator={false}
                                     isCreator={classroomStore.isCreator}
+                                    isDropTarget={
+                                        classroomStore.firstOnStageUser &&
+                                        classroomStore.isDropTarget(
+                                            classroomStore.firstOnStageUser.userUUID,
+                                        )
+                                    }
                                     rtcAvatar={
                                         classroomStore.firstOnStageUser &&
                                         classroomStore.rtc.getAvatar(
@@ -210,6 +226,14 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(
                                     }
                                     updateDeviceState={classroomStore.updateDeviceState}
                                     userUUID={classroomStore.userUUID}
+                                    onDoubleClick={() =>
+                                        classroomStore.firstOnStageUser &&
+                                        classroomStore.createMaximizedAvatarWindow(
+                                            classroomStore.firstOnStageUser.userUUID,
+                                        )
+                                    }
+                                    onDragEnd={classroomStore.onDragEnd}
+                                    onDragStart={classroomStore.onDragStart}
                                 />
                             )}
                         </div>
diff --git a/packages/flat-pages/src/SmallClassPage/SmallClassPage.less b/packages/flat-pages/src/SmallClassPage/SmallClassPage.less
index 535213f1230..9e82d29b71e 100644
--- a/packages/flat-pages/src/SmallClassPage/SmallClassPage.less
+++ b/packages/flat-pages/src/SmallClassPage/SmallClassPage.less
@@ -47,6 +47,8 @@
     border-bottom: 0.5px #dbe1ea solid;
     flex-shrink: 0;
     padding-bottom: 4px;
+    position: relative;
+    overscroll-behavior: contain;
 
     &::-webkit-scrollbar {
         display: none;
@@ -80,16 +82,67 @@
     overflow: hidden;
 }
 
+.small-class-scroll-handles {
+    position: absolute;
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+    pointer-events: none;
+    z-index: 100;
+    font-size: 0;
+}
+
+.small-class-scroll-handle {
+    pointer-events: all;
+    appearance: none;
+    border: none;
+    padding: 0;
+    outline: none;
+    width: 36px;
+    background-color: #fff;
+    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);
+    }
+
+    &.is-right {
+        border-left: 1px solid var(--grey-0);
+    }
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
 .flat-color-scheme-dark {
+
     .small-class-realtime-container,
     .small-class-realtime-box {
         color: var(--text);
         background-color: var(--grey-9);
     }
+
     .small-class-realtime-avatars-wrap {
         background: linear-gradient(270deg, #383B42 0%, #2B2F38 100%);
         border-color: var(--grey-8);
     }
+
+    .small-class-scroll-handle.is-left {
+        background-color: #2B2F38;
+        border-color: var(--grey-8);
+    }
+
+    .small-class-scroll-handle.is-right {
+        background-color: #383B42;
+        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 bcba1959bab..f3aeecca9dd 100644
--- a/packages/flat-pages/src/SmallClassPage/index.tsx
+++ b/packages/flat-pages/src/SmallClassPage/index.tsx
@@ -16,6 +16,8 @@ import {
     SVGExit,
     SVGMenuFold,
     SVGMenuUnfold,
+    SVGLeft,
+    SVGRight,
 } from "flat-components";
 
 import InviteButton from "../components/InviteButton";
@@ -39,7 +41,8 @@ import { WindowsSystemBtnContext } from "../components/StoreProvider";
 import { ShareScreenPicker } from "../components/ShareScreen/ShareScreenPicker";
 import { ExtraPadding } from "../components/ExtraPadding";
 import { UsersButton } from "../components/UsersButton";
-import { useDraggable } from "./utils";
+import { useScrollable } from "./utils";
+import classNames from "classnames";
 
 export type SmallClassPageProps = {};
 
@@ -63,7 +66,8 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
             }
         }, [classroomStore]);
 
-        const { makeDraggable, isDragging } = useDraggable();
+        const { isScrollable, makeScrollable, trackPosition, scrollLeft, scrollRight } =
+            useScrollable();
 
         return (
             <div className="small-class-page-container">
@@ -82,6 +86,25 @@ 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} />
@@ -112,17 +135,15 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
 
         function renderAvatars(): React.ReactNode {
             return (
-                <div
-                    ref={makeDraggable}
-                    className="small-class-realtime-avatars-wrap"
-                    style={{ cursor: isDragging ? "grabbing" : "grab" }}
-                >
+                <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(
@@ -132,6 +153,13 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
                                 small={true}
                                 updateDeviceState={classroomStore.updateDeviceState}
                                 userUUID={classroomStore.userUUID}
+                                onDoubleClick={() =>
+                                    classroomStore.createMaximizedAvatarWindow(
+                                        classroomStore.ownerUUID,
+                                    )
+                                }
+                                onDragEnd={classroomStore.onDragEnd}
+                                onDragStart={classroomStore.onDragStart}
                             />
                             {classroomStore.onStageUserUUIDs.map(renderAvatar)}
                         </div>
@@ -269,8 +297,10 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
                 <RTCAvatar
                     key={userUUID}
                     avatarUser={user}
+                    getPortal={classroomStore.getPortal}
                     isAvatarUserCreator={false}
                     isCreator={classroomStore.isCreator}
+                    isDropTarget={classroomStore.isDropTarget(userUUID)}
                     rtcAvatar={user && classroomStore.rtc.getAvatar(user.rtcUID)}
                     small={true}
                     updateDeviceState={(uid, camera, mic) => {
@@ -285,6 +315,11 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
                         classroomStore.updateDeviceState(uid, camera, _mic);
                     }}
                     userUUID={classroomStore.userUUID}
+                    onDoubleClick={() =>
+                        user && classroomStore.createMaximizedAvatarWindow(user.userUUID)
+                    }
+                    onDragEnd={classroomStore.onDragEnd}
+                    onDragStart={classroomStore.onDragStart}
                 />
             );
         }
diff --git a/packages/flat-pages/src/SmallClassPage/utils.tsx b/packages/flat-pages/src/SmallClassPage/utils.tsx
index c4f48000568..bd15508acf9 100644
--- a/packages/flat-pages/src/SmallClassPage/utils.tsx
+++ b/packages/flat-pages/src/SmallClassPage/utils.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { listen } from "@wopjs/dom";
 import { noop } from "lodash-es";
 
@@ -58,3 +58,83 @@ export function useDraggable(): Draggable {
 
     return { isDragging, makeDraggable };
 }
+
+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) {
+            let isHorizontal = false;
+            let timer = 0;
+            // translate mouse wheel to scroll left/right
+            const stopListenWheel = listen(
+                div,
+                "wheel",
+                ev => {
+                    if (ev.deltaX !== 0) {
+                        isHorizontal = true;
+                        clearTimeout(timer);
+                        timer = window.setTimeout(() => {
+                            isHorizontal = false;
+                        }, 2000);
+                    }
+                    if (!isHorizontal) {
+                        ev.preventDefault();
+                        div.scrollLeft += ev.deltaY * (ev.deltaMode === 1 ? 18 : 1);
+                    }
+                },
+                { 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 () => {
+                stopListenWheel();
+                observer.disconnect();
+            };
+        }
+        return;
+    }, [div, tracker]);
+
+    const DISTANCE = 148;
+
+    const scrollLeft = useCallback(
+        (ev: React.MouseEvent) =>
+            div?.scrollBy({
+                left: -(ev.shiftKey ? 5 : 1) * DISTANCE,
+                behavior: "smooth",
+            }),
+        [div],
+    );
+
+    const scrollRight = useCallback(
+        (ev: React.MouseEvent) =>
+            div?.scrollBy({
+                left: (ev.shiftKey ? 5 : 1) * DISTANCE,
+                behavior: "smooth",
+            }),
+        [div],
+    );
+
+    return { isScrollable, makeScrollable, trackPosition, scrollLeft, scrollRight };
+}
diff --git a/packages/flat-pages/src/components/RTCAvatar/index.tsx b/packages/flat-pages/src/components/RTCAvatar/index.tsx
index 0c66ecd3ad7..7364260a130 100644
--- a/packages/flat-pages/src/components/RTCAvatar/index.tsx
+++ b/packages/flat-pages/src/components/RTCAvatar/index.tsx
@@ -7,9 +7,9 @@ import {
     VideoAvatarProps,
 } from "flat-components";
 import { AvatarCanvas, AvatarCanvasProps } from "./AvatarCanvas";
-export type RTCAvatarProps = Omit<VideoAvatarProps, "getVolumeLevel" | "avatarUser"> &
+export type RTCAvatarProps = Omit<VideoAvatarProps, "getVolumeLevel" | "avatarUser" | "portal"> &
     VideoAvatarAbsentProps &
-    AvatarCanvasProps;
+    AvatarCanvasProps & { getPortal: (userUUID: string) => HTMLElement | undefined };
 
 export const RTCAvatar: FC<RTCAvatarProps> = /* @__PURE__ */ observer<RTCAvatarProps>(
     function RTCAvatar({
@@ -19,6 +19,11 @@ export const RTCAvatar: FC<RTCAvatarProps> = /* @__PURE__ */ observer<RTCAvatarP
         isAvatarUserCreator,
         small,
         isCreator,
+        isDropTarget,
+        onDoubleClick,
+        getPortal,
+        onDragStart,
+        onDragEnd,
         updateDeviceState,
     }) {
         return avatarUser && !avatarUser.hasLeft ? (
@@ -28,9 +33,14 @@ export const RTCAvatar: FC<RTCAvatarProps> = /* @__PURE__ */ observer<RTCAvatarP
                         avatarUser={avatarUser}
                         getVolumeLevel={getVolumeLevel}
                         isCreator={isCreator}
+                        isDropTarget={isDropTarget}
+                        portal={getPortal(avatarUser.userUUID)}
                         small={small}
                         updateDeviceState={updateDeviceState}
                         userUUID={userUUID}
+                        onDoubleClick={onDoubleClick}
+                        onDragEnd={onDragEnd}
+                        onDragStart={onDragStart}
                     >
                         {canvas}
                     </VideoAvatar>
diff --git a/packages/flat-pages/src/components/UserWindows.less b/packages/flat-pages/src/components/UserWindows.less
new file mode 100644
index 00000000000..6d415cf20e1
--- /dev/null
+++ b/packages/flat-pages/src/components/UserWindows.less
@@ -0,0 +1,37 @@
+.user-windows,
+.user-window-portal,
+.user-windows-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 3;
+}
+
+// Prevent React Portal from blocking pointer events
+.user-window-portal {
+    pointer-events: none;
+}
+
+.user-windows {
+    pointer-events: none;
+
+    &.is-grid {
+        display: flex;
+
+        .window {
+            flex: 1;
+            display: flex;
+        }
+    }
+}
+
+.user-windows-mask {
+    pointer-events: all;
+    z-index: 999999;
+}
+
+.user-windows.is-hovering {
+    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
new file mode 100644
index 00000000000..3b463964800
--- /dev/null
+++ b/packages/flat-pages/src/components/UserWindows.tsx
@@ -0,0 +1,260 @@
+import "./UserWindows.less";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import classNames from "classnames";
+import { observer } from "mobx-react-lite";
+import { ClassroomStore, UserWindow } from "@netless/flat-stores";
+import { AvatarWindow, fixRect, Rectangle, ResizeHandle, useIsUnMounted } from "flat-components";
+import { WHITEBOARD_RATIO } from "@netless/flat-stores/src/constants";
+
+const WINDOW_RATIO = 3 / 4;
+const DEFAULT_WIDTH_P = 0.4;
+const MIN_WIDTH_P = 0.25;
+
+const clamp = (x: number, min: number, max: number): number => (x < min ? min : x > max ? max : x);
+
+export interface UserWindowsProps {
+    classroom: ClassroomStore;
+}
+
+export const UserWindows = observer<UserWindowsProps>(function UserWindows({ classroom }) {
+    const ref = useRef<HTMLDivElement>(null);
+    const [boundingRect, setBoundingRect] = useState<DOMRect | null>(null);
+    const [hovering, setHovering] = useState(false);
+
+    useEffect(() => {
+        if (ref.current) {
+            const div = ref.current;
+            const observer = new ResizeObserver(() => {
+                setBoundingRect(div.getBoundingClientRect());
+            });
+            observer.observe(div);
+            return () => observer.disconnect();
+        }
+        return;
+    }, []);
+
+    const baseRect = useMemo(() => {
+        if (!boundingRect) {
+            return { width: 0, height: 0 };
+        }
+        const { width, height } = boundingRect;
+        const fixedHeight = width * WHITEBOARD_RATIO;
+        if (fixedHeight < height) {
+            return { width, height: fixedHeight, extraY: (height - fixedHeight) / 2 };
+        } else {
+            const fixedWidth = height / WHITEBOARD_RATIO;
+            return { width: fixedWidth, height, extraX: (width - fixedWidth) / 2 };
+        }
+    }, [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 onDrop = useCallback(
+        (ev: React.DragEvent<HTMLDivElement>) => {
+            setHovering(false);
+            classroom.onDragEnd();
+
+            const data = ev.dataTransfer.getData("video-avatar");
+            if (!data || !boundingRect) {
+                return;
+            }
+            const [userUUID, rx, ry] = JSON.parse(data) as [
+                userUUID: string,
+                rx: number,
+                ry: number,
+            ];
+
+            const windowWidth = baseRect.width * DEFAULT_WIDTH_P;
+            const windowHeight = windowWidth * WINDOW_RATIO;
+
+            let x = ev.clientX - boundingRect.left - windowWidth * rx - (baseRect.extraX || 0);
+            let y = ev.clientY - boundingRect.top - windowHeight * ry - (baseRect.extraY || 0);
+
+            x = clamp(x, 0, baseRect.width - windowWidth);
+            y = clamp(y, 0, baseRect.height - windowHeight);
+
+            classroom.createAvatarWindow(userUUID, {
+                x: x / baseRect.width,
+                y: y / baseRect.height,
+                width: windowWidth / baseRect.width,
+                height: windowHeight / baseRect.height,
+            });
+        },
+        [baseRect, boundingRect, classroom],
+    );
+
+    const isGrid = classroom.userWindowsMode === "maximized";
+
+    return (
+        <div
+            ref={ref}
+            className={classNames("user-windows", {
+                "is-grid": isGrid,
+                "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"}
+                    readonly={!classroom.isCreator}
+                    userUUID={userUUID}
+                    window={window}
+                />
+            ))}
+        </div>
+    );
+});
+
+interface UserAvatarWindowProps {
+    mode: "maximized" | "normal";
+    readonly: boolean;
+    userUUID: string;
+    window: UserWindow;
+    baseRect: { width: number; height: number; extraX?: number; extraY?: number };
+    classroom: ClassroomStore;
+}
+
+const UserAvatarWindow = observer<UserAvatarWindowProps>(function UserAvatarWindow({
+    mode,
+    readonly,
+    userUUID,
+    window: realWindow,
+    baseRect,
+    classroom,
+}) {
+    const isUnMounted = useIsUnMounted();
+    const [tempWindow, setTempWindow] = useState<UserWindow | null>(null);
+
+    useEffect(() => {
+        if (tempWindow) {
+            const ticket = setTimeout(() => {
+                classroom.updateAvatarWindow(userUUID, tempWindow);
+                if (!isUnMounted.current) {
+                    setTempWindow(null);
+                }
+            }, 50);
+            return () => clearTimeout(ticket);
+        }
+        return;
+    }, [classroom, isUnMounted, tempWindow, userUUID]);
+
+    const window = tempWindow || realWindow;
+    const rect: Rectangle = useMemo(
+        () => ({
+            x: window.x * baseRect.width + (baseRect.extraX || 0),
+            y: window.y * baseRect.height + (baseRect.extraY || 0),
+            width: window.width * baseRect.width,
+            height: window.height * baseRect.height,
+        }),
+        [baseRect, window],
+    );
+
+    const onClick = useCallback(() => {
+        classroom.updateAvatarWindow(userUUID, realWindow);
+    }, [classroom, realWindow, userUUID]);
+
+    const onDoubleClick = useCallback(() => {
+        classroom.toggleUserWindowsMode();
+    }, [classroom]);
+
+    const onDragEnd = useCallback(
+        (ev: PointerEvent) => {
+            classroom.setDroppingUserUUID(null);
+            const el = document.elementFromPoint(ev.clientX, ev.clientY);
+            if (el && (el as HTMLElement).dataset?.userUuid) {
+                classroom.deleteAvatarWindow(userUUID);
+            }
+        },
+        [classroom, userUUID],
+    );
+
+    const onDragging = useCallback(
+        (ev: PointerEvent) => {
+            const el = document.elementFromPoint(ev.clientX, ev.clientY);
+            if (el && (el as HTMLElement).dataset?.userUuid) {
+                classroom.setDroppingUserUUID(userUUID);
+            } else {
+                classroom.setDroppingUserUUID(null);
+            }
+        },
+        [classroom, userUUID],
+    );
+
+    const onResize = useCallback(
+        (rect: Rectangle, handle: ResizeHandle | undefined) => {
+            rect.x -= baseRect.extraX || 0;
+            rect.y -= baseRect.extraY || 0;
+            const { x, y, width, height } = fixRect(
+                rect,
+                handle,
+                WINDOW_RATIO,
+                MIN_WIDTH_P * baseRect.width,
+                baseRect.width,
+                baseRect.height,
+            );
+            setTempWindow({
+                x: x / baseRect.width,
+                y: y / baseRect.height,
+                width: width / baseRect.width,
+                height: height / baseRect.height,
+                // give the temp window a very large z so that it renders correct,
+                // but set a correct z when we really update the storage.
+                // see classroom.updateAvatarWindow()
+                z: 2147483647,
+                index: window.index,
+            });
+        },
+        [baseRect, window.index],
+    );
+
+    return (
+        <AvatarWindow
+            key={userUUID}
+            hidden={classroom.userHasLeft(userUUID)}
+            index={window.index}
+            mode={mode}
+            readonly={readonly}
+            rect={rect}
+            zIndex={window.z}
+            onClick={onClick}
+            onDoubleClick={onDoubleClick}
+            onDragEnd={onDragEnd}
+            onDragging={onDragging}
+            onResize={onResize}
+        >
+            <UserWindowPortal classroom={classroom} mode={mode} userUUID={userUUID} />
+        </AvatarWindow>
+    );
+});
+
+interface UserWindowPortalProps {
+    mode: "maximized" | "normal";
+    userUUID: string;
+    classroom: ClassroomStore;
+}
+
+const UserWindowPortal: React.FC<UserWindowPortalProps> = ({ mode, userUUID, classroom }) => (
+    <div
+        ref={useCallback(element => classroom.setPortal(userUUID, element), [classroom, userUUID])}
+        className={classNames("user-window-portal", {
+            "is-grid": mode === "maximized",
+        })}
+    />
+);
diff --git a/packages/flat-pages/src/components/Whiteboard.tsx b/packages/flat-pages/src/components/Whiteboard.tsx
index 8cce6c2ddf0..75852c9b3c9 100644
--- a/packages/flat-pages/src/components/Whiteboard.tsx
+++ b/packages/flat-pages/src/components/Whiteboard.tsx
@@ -23,6 +23,7 @@ import { isSupportedFileExt } from "../utils/drag-and-drop";
 import { isSupportedImageType, onDropImage } from "../utils/drag-and-drop/image";
 import { PRESETS } from "../constants/presets";
 import { createCloudFile } from "../utils/create-cloud-file";
+import { UserWindows } from "./UserWindows";
 
 export interface WhiteboardProps {
     whiteboardStore: WhiteboardStore;
@@ -197,6 +198,15 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
                     onDragOver={onDragOver}
                     onDrop={onDrop}
                 >
+                    <div
+                        ref={bindWhiteboard}
+                        className={classNames("whiteboard", {
+                            "can-operate":
+                                classRoomStore.isCreator ||
+                                classRoomStore.users.currentUser?.wbOperate,
+                        })}
+                    />
+                    <UserWindows classroom={classRoomStore} />
                     {!whiteboardStore.isCreator &&
                         classRoomStore.users.currentUser &&
                         !classRoomStore.users.currentUser.isSpeak && (
@@ -217,14 +227,6 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
                             />
                         </div>
                     )}
-                    <div
-                        ref={bindWhiteboard}
-                        className={classNames("whiteboard", {
-                            "can-operate":
-                                classRoomStore.isCreator ||
-                                classRoomStore.users.currentUser?.wbOperate,
-                        })}
-                    />
                     <div
                         className={classNames("whiteboard-scroll-page", {
                             "is-active": showPage,
diff --git a/packages/flat-stores/src/classroom-store/index.ts b/packages/flat-stores/src/classroom-store/index.ts
index 632b7223c0a..092d7283ece 100644
--- a/packages/flat-stores/src/classroom-store/index.ts
+++ b/packages/flat-stores/src/classroom-store/index.ts
@@ -50,6 +50,20 @@ export type ClassroomStorageState = {
 };
 export type OnStageUsersStorageState = Record<string, boolean>;
 export type WhiteboardStorageState = Record<string, boolean>;
+export type UserWindowsStorageState = {
+    mode: "normal" | "maximized";
+};
+// stored in UserWindowsStorageState too, but TypeScript does not support union records
+export type UserWindow = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    // the order in normal mode
+    z: number;
+    // the order in maximized mode
+    index: number;
+};
 
 export class ClassroomStore {
     private readonly sideEffect = new SideEffectManager();
@@ -76,6 +90,9 @@ export class ClassroomStore {
     public isHandRaisingPanelVisible = false;
     public isUsersPanelVisible = false;
 
+    public isDraggingAvatar = false;
+    public droppingUserUUID: string | null = null;
+
     public roomStatusLoading = RoomStatusLoadingType.Null;
 
     /** is RTC joined room */
@@ -98,11 +115,16 @@ export class ClassroomStore {
         downlink: 0,
     };
 
+    public userWindowsMode: UserWindowsStorageState["mode"] = "normal";
+    public readonly userWindows = observable.map<string, UserWindow>();
+    public readonly userWindowsPortal = observable.map<string, HTMLDivElement>();
+
     public deviceStateStorage?: Storage<DeviceStateStorageState>;
     public classroomStorage?: Storage<ClassroomStorageState>;
     public onStageUsersStorage?: Storage<OnStageUsersStorageState>;
     /** users that can operate the whiteboard */
     public whiteboardStorage?: Storage<WhiteboardStorageState>;
+    public userWindowsStorage?: Storage<UserWindowsStorageState>;
 
     public readonly users: UserStore;
 
@@ -360,10 +382,15 @@ export class ClassroomStore {
             "whiteboard",
             {},
         );
+        const userWindowsStorage = fastboard.syncedStore.connectStorage<UserWindowsStorageState>(
+            "userWindows",
+            { mode: "normal" },
+        );
         this.deviceStateStorage = deviceStateStorage;
         this.classroomStorage = classroomStorage;
         this.onStageUsersStorage = onStageUsersStorage;
         this.whiteboardStorage = whiteboardStorage;
+        this.userWindowsStorage = userWindowsStorage;
 
         if (this.isCreator) {
             this.updateDeviceState(
@@ -544,6 +571,20 @@ export class ClassroomStore {
         };
         updateUserStagingState();
 
+        const initialUserWindows = new Map<string, UserWindow>();
+        for (const key in userWindowsStorage.state) {
+            if (key !== "mode") {
+                const userWindow: UserWindow | null = (userWindowsStorage.state as any)[key];
+                if (userWindow) {
+                    initialUserWindows.set(key, userWindow);
+                }
+            }
+        }
+        runInAction(() => {
+            this.userWindowsMode = userWindowsStorage.state.mode;
+            this.userWindows.replace(initialUserWindows);
+        });
+
         this.sideEffect.addDisposer(onStageUsersStorage.on("stateChanged", updateUserStagingState));
         this.sideEffect.addDisposer(
             whiteboardStorage.on("stateChanged", () => {
@@ -562,6 +603,24 @@ export class ClassroomStore {
                 );
             }),
         );
+        this.sideEffect.addDisposer(
+            userWindowsStorage.on("stateChanged", diff => {
+                runInAction(() => {
+                    for (const key in diff) {
+                        if (key === "mode") {
+                            this.userWindowsMode = diff[key]!.newValue;
+                        } else {
+                            const userWindow: UserWindow | undefined = (diff as any)[key].newValue;
+                            if (userWindow) {
+                                this.userWindows.set(key, userWindow);
+                            } else {
+                                this.userWindows.delete(key);
+                            }
+                        }
+                    }
+                });
+            }),
+        );
 
         this.sideEffect.addDisposer(
             autorun(() => {
@@ -649,6 +708,7 @@ export class ClassroomStore {
         this.onStageUsersStorage = undefined;
         this.classroomStorage = undefined;
         this.whiteboardStorage = undefined;
+        this.userWindowsStorage = undefined;
     }
 
     public startClass = (): Promise<void> => this.switchRoomStatus(RoomStatus.Started);
@@ -670,6 +730,120 @@ export class ClassroomStore {
         this.isUsersPanelVisible = visible;
     };
 
+    public onDragStart = (): void => {
+        this.isDraggingAvatar = true;
+    };
+
+    public onDragEnd = (): void => {
+        this.isDraggingAvatar = false;
+    };
+
+    public getPortal = (userUUID: string): HTMLDivElement | undefined => {
+        return this.userWindowsPortal.get(userUUID);
+    };
+
+    public setPortal = (userUUID: string, portal: HTMLDivElement | null | undefined): void => {
+        if (portal) {
+            this.userWindowsPortal.set(userUUID, portal);
+        } else {
+            this.userWindowsPortal.delete(userUUID);
+        }
+    };
+
+    public maxOfUserWindows = (exclude?: string): { z: number; index: number } => {
+        if (!this.userWindowsStorage) {
+            return { z: 0, index: 0 };
+        }
+        const windows = this.userWindowsStorage.state as unknown as Record<string, UserWindow>;
+        let maxZ = 0;
+        let maxIndex = 0;
+        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);
+            }
+        }
+        return { z: maxZ, index: maxIndex };
+    };
+
+    private isUserWindowsEmpty(): boolean {
+        if (!this.userWindowsStorage) {
+            return true;
+        }
+        const windows = this.userWindowsStorage.state as unknown as Record<string, UserWindow>;
+        for (const key in windows) {
+            if (key !== "mode" && windows[key]) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    public userHasLeft = (userUUID: string): boolean => {
+        return this.users.cachedUsers.get(userUUID)?.hasLeft ?? true;
+    };
+
+    public toggleUserWindowsMode = (mode?: UserWindowsStorageState["mode"]): void => {
+        if (this.isCreator && this.userWindowsStorage) {
+            this.userWindowsStorage.setState({
+                mode: mode || (this.userWindowsMode === "normal" ? "maximized" : "normal"),
+            });
+        }
+    };
+
+    public createAvatarWindow = (
+        userUUID: string,
+        window: Omit<UserWindow, "z" | "index">,
+    ): void => {
+        if (this.isCreator && this.userWindowsStorage) {
+            const { z, index } = this.maxOfUserWindows();
+            this.userWindowsStorage.setState({
+                [userUUID]: { ...window, z: z + 1, index: index + 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,
+                },
+            });
+        }
+    };
+
+    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 } });
+        }
+    };
+
+    public deleteAvatarWindow = (userUUID: string): void => {
+        if (this.isCreator && this.userWindowsStorage) {
+            this.userWindowsStorage.setState({ [userUUID]: undefined });
+            if (this.userWindowsMode === "maximized" && this.isUserWindowsEmpty()) {
+                this.toggleUserWindowsMode("normal");
+            }
+        }
+    };
+
+    public setDroppingUserUUID = (userUUID: string | null): void => {
+        this.droppingUserUUID = userUUID;
+    };
+
+    public isDropTarget = (userUUID: string): boolean => {
+        return this.droppingUserUUID === userUUID;
+    };
+
     public onDrop = (file: File): void => {
         this.toggleCloudStoragePanel(true);
         const cloudStorage = this.whiteboardStore.cloudStorageStore;
@@ -855,6 +1029,7 @@ export class ClassroomStore {
         if (this.isCreator) {
             this.onStageUsersStorage.resetState();
             this.whiteboardStorage?.resetState();
+            this.userWindowsStorage?.resetState();
             message.info(FlatI18n.t("all-off-stage-toast"));
         }
     };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6165c14b0f0..e5105728b78 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -301,6 +301,7 @@ importers:
       '@types/faker': ^5.5.9
       '@types/react-transition-group': ^4.4.5
       '@typescript-eslint/typescript-estree': ^5.38.0
+      '@wopjs/dom': ^0.1.3
       antd: ^4.23.2
       babel-loader: ^8.2.5
       bulma: ^0.9.4
@@ -336,6 +337,7 @@ importers:
       '@netless/flat-i18n': link:../flat-i18n
       '@netless/flat-server-api': link:../flat-server-api
       '@netless/flat-services': link:../flat-services
+      '@wopjs/dom': 0.1.3
       antd: 4.23.2_sfoxds7t5ydpegc3knd667wn6m
       classnames: 2.3.1
       date-fns: 2.29.3
diff --git a/service-providers/agora-rtc/agora-rtc-web/src/rtc-remote-avatar.ts b/service-providers/agora-rtc/agora-rtc-web/src/rtc-remote-avatar.ts
index a0991f37c7b..32d65a72edd 100644
--- a/service-providers/agora-rtc/agora-rtc-web/src/rtc-remote-avatar.ts
+++ b/service-providers/agora-rtc/agora-rtc-web/src/rtc-remote-avatar.ts
@@ -92,15 +92,15 @@ export class RTCRemoteAvatar implements IServiceVideoChatAvatar {
         );
 
         this._sideEffect.addDisposer(
-            combine([this._el$, this._videoTrack$, this._shouldCamera$]).subscribe(
-                ([el, videoTrack, shouldCamera]) => {
+            combine([this._videoTrack$, this._shouldCamera$]).subscribe(
+                ([videoTrack, shouldCamera]) => {
                     this._sideEffect.add(() => {
                         let disposer = (): void => void 0;
-                        if (el && videoTrack) {
+                        if (videoTrack) {
                             try {
-                                if (shouldCamera) {
+                                if (shouldCamera && this._el$.value) {
                                     if (!videoTrack.isPlaying) {
-                                        videoTrack.play(el);
+                                        videoTrack.play(this._el$.value);
                                         // dispose this track on next track update
                                         disposer = () => videoTrack.stop();
                                     }
@@ -118,6 +118,20 @@ export class RTCRemoteAvatar implements IServiceVideoChatAvatar {
                 },
             ),
         );
+
+        this._sideEffect.addDisposer(
+            this._el$.reaction(el => {
+                const videoTrack = this._videoTrack$.value;
+                const shouldCamera = this._shouldCamera$.value;
+                if (el && videoTrack) {
+                    if (shouldCamera) {
+                        videoTrack.play(el);
+                    } else {
+                        videoTrack.stop();
+                    }
+                }
+            }),
+        );
     }
 
     public destroy(): void {