diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
index 853e37ab1409..eee0d6a4f3fc 100755
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
@@ -154,6 +154,7 @@ class ActionsBar extends PureComponent {
       showScreenshareQuickSwapButton,
       isReactionsButtonEnabled,
       isRaiseHandEnabled,
+      isPresentationDetached,
     } = this.props;
 
     const Settings = getSettingsSingletonInstance();
@@ -251,6 +252,7 @@ class ActionsBar extends PureComponent {
                     hasPinnedSharedNotes={isSharedNotesPinned}
                     hasGenericContent={hasGenericContent}
                     hasCameraAsContent={hasCameraAsContent}
+                    isPresentationDetached={isPresentationDetached}
                   />
                 )
                 : null}
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/presentation-options/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/presentation-options/component.jsx
index ff05f294b778..ec92e13c81ec 100755
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/presentation-options/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/presentation-options/component.jsx
@@ -46,6 +46,7 @@ const PresentationOptionsContainer = ({
   hasPinnedSharedNotes,
   hasGenericContent,
   hasCameraAsContent,
+  isPresentationDetached,
 }) => {
   let buttonType = 'presentation';
   if (hasExternalVideo) {
@@ -100,7 +101,7 @@ const PresentationOptionsContainer = ({
         }
       }}
       id="restore-presentation"
-      disabled={!isThereCurrentPresentation}
+      disabled={!isThereCurrentPresentation || isPresentationDetached}
       data-test={!presentationIsOpen ? 'restorePresentation' : 'minimizePresentation'}
     />
   );
diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx
index 5c652645d1c3..c1712198c291 100644
--- a/bigbluebutton-html5/imports/ui/components/app/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx
@@ -126,12 +126,14 @@ class App extends Component {
     };
 
     this.timeOffsetInterval = null;
+    this.isPopupOnPreparation = false;
 
     this.setPresentationFitToWidth = this.setPresentationFitToWidth.bind(this);
     this.setAudioModalIsOpen = this.setAudioModalIsOpen.bind(this);
     this.setVideoPreviewModalIsOpen = this.setVideoPreviewModalIsOpen.bind(this);
     this.customPollShortcutHandler = this.customPollShortcutHandler.bind(this);
     this.logJoin = this.logJoin.bind(this);
+    this.handlePopupPreparing = this.handlePopupPreparing.bind(this);
   }
 
   componentDidMount() {
@@ -274,6 +276,10 @@ class App extends Component {
     }
   }
 
+  handlePopupPreparing(b) {
+    this.isPopupOnPreparation = b;
+  }
+
   renderDarkMode() {
     const { darkTheme } = this.props;
 
@@ -284,6 +290,7 @@ class App extends Component {
     const {
       hideActionsBar,
       presentationIsOpen,
+      isPresentationDetached,
     } = this.props;
 
     if (hideActionsBar) return null;
@@ -292,6 +299,7 @@ class App extends Component {
       <ActionsBarContainer
         presentationIsOpen={presentationIsOpen}
         setPresentationFitToWidth={this.setPresentationFitToWidth}
+        isPresentationDetached={isPresentationDetached}
       />
     );
   }
@@ -336,6 +344,9 @@ class App extends Component {
       isNotificationEnabled,
       isNonMediaLayout,
       isRaiseHandEnabled,
+      popupWindow,
+      isPresentationDetached,
+      toggleDetachPresentation,
     } = this.props;
 
     const {
@@ -366,7 +377,7 @@ class App extends Component {
           <ActivityCheckContainer />
           <ScreenReaderAlertContainer />
           <BannerBarContainer />
-          <NotificationsBarContainer />
+          <NotificationsBarContainer isPopupOnPreparation={this.isPopupOnPreparation} />
           <SidebarNavigationContainer />
           <SidebarContentContainer isSharedNotesPinned={isSharedNotesPinned} />
           <NavBarContainer main="new" />
@@ -386,6 +397,10 @@ class App extends Component {
                 fitToWidth={presentationFitToWidth}
                 darkTheme={darkTheme}
                 presentationIsOpen={presentationIsOpen}
+                popupWindow={popupWindow}
+                isPresentationDetached={isPresentationDetached}
+                toggleDetachPresentation={toggleDetachPresentation}
+                onPopupPreparing={this.handlePopupPreparing}
               />
             )
             : null
diff --git a/bigbluebutton-html5/imports/ui/components/app/container.jsx b/bigbluebutton-html5/imports/ui/components/app/container.jsx
index f538a3d2439a..0950abc58e97 100755
--- a/bigbluebutton-html5/imports/ui/components/app/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/container.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useMutation, useReactiveVar } from '@apollo/client';
 import AudioCaptionsLiveContainer from '/imports/ui/components/audio/audio-graphql/audio-captions/live/component';
 import getFromUserSettings from '/imports/ui/services/users-settings';
@@ -106,9 +106,24 @@ const AppContainer = (props) => {
   const shouldShowScreenshare = (viewScreenshare || isPresenter)
   && (currentMeeting?.componentsFlags?.hasScreenshare
     || currentMeeting?.componentsFlags?.hasCameraAsContent) && showScreenshare;
-  const shouldShowPresentation = (!shouldShowScreenshare && !isSharedNotesPinned
-      && !shouldShowExternalVideo && !shouldShowGenericMainContent
-      && (presentationIsOpen || presentationRestoreOnUpdate)) && isPresentationEnabled;
+
+  const [popupWindow, setPopupWindow] = useState(null);
+  const [isPresentationDetached, setIsPresentationDetached] = useState(false);
+
+  const toggleDetachPresentation = (popup) => {
+    setPopupWindow(popup);
+    setIsPresentationDetached(Boolean(popup));
+  };
+
+  const hasPresentationContent =
+    (presentationIsOpen || presentationRestoreOnUpdate) && isPresentationEnabled;
+  const noOtherMainContent =
+    !shouldShowScreenshare && !isSharedNotesPinned &&
+    !shouldShowExternalVideo && !shouldShowGenericMainContent;
+  const shouldShowPresentation = isPresentationDetached
+    ? hasPresentationContent
+    : noOtherMainContent && hasPresentationContent;
+  
   const currentPageInfoData = currentPageInfo?.pres_page_curr[0] ?? {};
   const fitToWidth = currentPageInfoData?.fitToWidth ?? false;
   const pageId = currentPageInfoData?.pageId ?? '';
@@ -161,6 +176,9 @@ const AppContainer = (props) => {
           isBreakout: currentMeeting?.isBreakout ?? false,
           meetingName: currentMeeting?.name ?? '',
           meetingId: currentMeeting?.meetingId ?? '',
+          isPresentationDetached,
+          popupWindow,
+          toggleDetachPresentation,
         }}
         {...props}
       />
diff --git a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/component.tsx b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/component.tsx
index 4eaa1572cba4..6dc2fbed1c2e 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/component.tsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/component.tsx
@@ -40,6 +40,8 @@ import { ChatLoading } from '../component';
 import Storage from '/imports/ui/services/storage/in-memory';
 import browserInfo from '/imports/utils/browserInfo';
 import deviceInfo from '/imports/utils/deviceInfo';
+import { originalHTMLElement } from '/imports/utils/HTMLElementBackup';
+import { originalRAF, originalCAF } from '/imports/utils/animationFrameBackup';
 
 const PAGE_SIZE = 50;
 const CLEANUP_TIMEOUT = 3000;
@@ -71,7 +73,7 @@ interface ChatListProps {
 }
 
 const isElement = (el: unknown): el is HTMLElement => {
-  return el instanceof HTMLElement;
+  return el instanceof originalHTMLElement;
 };
 
 const isMap = (map: unknown): map is Map<number, string> => {
@@ -403,7 +405,7 @@ const ChatMessageList: React.FC<ChatListProps> = ({
       const value = (timestamp - initialTimestamp) / 300;
       if (value <= 1) {
         container.scrollTop = initialPosition + (value * scrollPositionDiff);
-        requestAnimationFrame(animateScrollPosition);
+        originalRAF(animateScrollPosition);
       } else {
         container.scrollTop = container.scrollHeight - container.offsetHeight;
         setIsScrollingDisabled(false);
@@ -420,10 +422,10 @@ const ChatMessageList: React.FC<ChatListProps> = ({
       initialTimestamp = timestamp;
       initialPosition = scrollTop;
       scrollPositionDiff = scrollHeight - offsetHeight - scrollTop;
-      requestAnimationFrame(animateScrollPosition);
+      originalRAF(animateScrollPosition);
     };
 
-    requestAnimationFrame(startScrollAnimation);
+    originalRAF(startScrollAnimation);
   }, []);
 
   const renderUnreadNotification = useMemo(() => {
@@ -537,7 +539,7 @@ const ChatMessageList: React.FC<ChatListProps> = ({
     },
   ) => {
     if (currentFrame < stabilityFrames) {
-      const frameId = requestAnimationFrame(() => {
+      const frameId = originalRAF(() => {
         pollScrollEndEvent(setFrameId, onScrollEnd, {
           stabilityFrames,
           currentFrame: currentFrame + 1,
@@ -552,10 +554,10 @@ const ChatMessageList: React.FC<ChatListProps> = ({
 
   const startScrollEndEventPolling = useCallback((onScrollEnd: () => void) => {
     if (scrollEndFrameRef.current != null) {
-      cancelAnimationFrame(scrollEndFrameRef.current);
+      originalCAF(scrollEndFrameRef.current);
       scrollEndFrameRef.current = undefined;
     }
-    scrollEndFrameRef.current = requestAnimationFrame(() => {
+    scrollEndFrameRef.current = originalRAF(() => {
       pollScrollEndEvent((frameId) => {
         scrollEndFrameRef.current = frameId;
       }, onScrollEnd);
@@ -608,7 +610,7 @@ const ChatMessageList: React.FC<ChatListProps> = ({
       clearInterval(scrollActivityCheckInterval.current);
     }
     if (scrollEndFrameRef.current) {
-      cancelAnimationFrame(scrollEndFrameRef.current);
+      originalCAF(scrollEndFrameRef.current);
     }
   }, []);
 
diff --git a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/component.tsx b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/component.tsx
index a02bec3b3e5a..0092fca7428b 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/component.tsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/component.tsx
@@ -47,6 +47,7 @@ import { EmojiPicker, EmojiPickerWrapper } from './message-toolbar/styles';
 import { isMobile } from '/imports/utils/deviceInfo';
 import { layoutSelect } from '/imports/ui/components/layout/context';
 import { Layout } from '/imports/ui/components/layout/layoutTypes';
+import { originalRAF, originalCAF } from '/imports/utils/animationFrameBackup';
 
 interface ChatMessageProps {
   message: Message;
@@ -228,7 +229,7 @@ const ChatMessage = React.forwardRef<ChatMessageRef, ChatMessageProps>(({
   useImperativeHandle(ref, () => ({
     requestFocus() {
       setTimeout(() => {
-        requestAnimationFrame(startScrollAnimation);
+        originalRAF(startScrollAnimation);
       }, 0);
     },
     sequence: message.messageSequence,
@@ -236,20 +237,20 @@ const ChatMessage = React.forwardRef<ChatMessageRef, ChatMessageProps>(({
 
   const startScrollAnimation = (timestamp: number) => {
     if ((containerRef.current?.offsetTop || 0) > (scrollRef.current?.scrollTop || 0)) {
-      requestAnimationFrame(startBackgroundAnimation);
+      originalRAF(startBackgroundAnimation);
       return;
     }
     animationInitialScrollPosition.current = scrollRef.current?.scrollTop || 0;
     animationScrollPositionDiff.current = (scrollRef.current?.scrollTop || 0)
       - ((containerRef.current?.offsetTop || 0) - ((scrollRef.current?.offsetHeight || 0) / 2));
     animationInitialTimestamp.current = timestamp;
-    requestAnimationFrame(animateScrollPosition);
+    originalRAF(animateScrollPosition);
   };
 
   const startBackgroundAnimation = (timestamp: number) => {
     animationInitialTimestamp.current = timestamp;
     animationInitialBgColor.current = containerRef.current?.style.backgroundColor ?? '';
-    requestAnimationFrame(animateBackgroundColor);
+    originalRAF(animateBackgroundColor);
   };
 
   const animateScrollPosition = (timestamp: number) => {
@@ -261,10 +262,10 @@ const ChatMessage = React.forwardRef<ChatMessageRef, ChatMessageProps>(({
     if (!scrollContainer || !messageContainer) return;
     if (value <= 1) {
       scrollContainer.scrollTop = initialPosition - (value * diff);
-      requestAnimationFrame(animateScrollPosition);
+      originalRAF(animateScrollPosition);
     } else {
       scrollContainer.scrollTop = initialPosition - diff;
-      requestAnimationFrame(startBackgroundAnimation);
+      originalRAF(startBackgroundAnimation);
     }
   };
 
@@ -273,7 +274,7 @@ const ChatMessage = React.forwardRef<ChatMessageRef, ChatMessageProps>(({
     const value = (timestamp - animationInitialTimestamp.current) / ANIMATION_DURATION;
     if (value < 1) {
       messageContentRef.current.style.backgroundColor = `rgb(${colorBlueLighterChannel} / ${1 - value})`;
-      requestAnimationFrame(animateBackgroundColor);
+      originalRAF(animateBackgroundColor);
     } else {
       messageContentRef.current.style.backgroundColor = animationInitialBgColor.current;
     }
@@ -304,7 +305,7 @@ const ChatMessage = React.forwardRef<ChatMessageRef, ChatMessageProps>(({
     },
   ) => {
     if (currentFrame < stabilityFrames) {
-      const frameId = requestAnimationFrame(() => {
+      const frameId = originalRAF(() => {
         pollScrollEndEvent(setFrameId, {
           stabilityFrames,
           currentFrame: currentFrame + 1,
@@ -321,10 +322,10 @@ const ChatMessage = React.forwardRef<ChatMessageRef, ChatMessageProps>(({
 
   const startScrollEndEventPolling = useCallback(() => {
     if (scrollEndFrameRef.current != null) {
-      cancelAnimationFrame(scrollEndFrameRef.current);
+      originalCAF(scrollEndFrameRef.current);
       scrollEndFrameRef.current = undefined;
     }
-    scrollEndFrameRef.current = requestAnimationFrame(() => {
+    scrollEndFrameRef.current = originalRAF(() => {
       pollScrollEndEvent((frameId) => {
         scrollEndFrameRef.current = frameId;
       });
@@ -345,7 +346,7 @@ const ChatMessage = React.forwardRef<ChatMessageRef, ChatMessageProps>(({
     return () => {
       scrollRef?.current?.removeEventListener('scroll', callbackFunction);
       if (scrollEndFrameRef.current !== undefined) {
-        cancelAnimationFrame(scrollEndFrameRef.current);
+        originalCAF(scrollEndFrameRef.current);
         scrollEndFrameRef.current = undefined;
       }
     };
diff --git a/bigbluebutton-html5/imports/ui/components/common/fullscreen-button/service.js b/bigbluebutton-html5/imports/ui/components/common/fullscreen-button/service.js
index 550df065a10c..964139b8a894 100644
--- a/bigbluebutton-html5/imports/ui/components/common/fullscreen-button/service.js
+++ b/bigbluebutton-html5/imports/ui/components/common/fullscreen-button/service.js
@@ -1,25 +1,25 @@
-function getFullscreenElement() {
-  if (document.fullscreenElement) return document.fullscreenElement;
-  if (document.webkitFullscreenElement) return document.webkitFullscreenElement;
-  if (document.mozFullScreenElement) return document.mozFullScreenElement;
-  if (document.msFullscreenElement) return document.msFullscreenElement;
+function getFullscreenElement(d = document) {
+  if (d.fullscreenElement) return d.fullscreenElement;
+  if (d.webkitFullscreenElement) return d.webkitFullscreenElement;
+  if (d.mozFullScreenElement) return d.mozFullScreenElement;
+  if (d.msFullscreenElement) return d.msFullscreenElement;
   return null;
 }
 
-const isFullScreen = (element) => {
-  if (getFullscreenElement() && getFullscreenElement() === element) {
+const isFullScreen = (element, doc = document) => {
+  if (getFullscreenElement(doc) && getFullscreenElement(doc) === element) {
     return true;
   }
   return false;
 };
 
-function cancelFullScreen() {
-  if (document.exitFullscreen) {
-    document.exitFullscreen();
-  } else if (document.mozCancelFullScreen) {
-    document.mozCancelFullScreen();
-  } else if (document.webkitExitFullscreen) {
-    document.webkitExitFullscreen();
+function cancelFullScreen(doc = document) {
+  if (doc.exitFullscreen) {
+    doc.exitFullscreen();
+  } else if (doc.mozCancelFullScreen) {
+    doc.mozCancelFullScreen();
+  } else if (doc.webkitExitFullscreen) {
+    doc.webkitExitFullscreen();
   }
 }
 
@@ -39,13 +39,20 @@ function fullscreenRequest(element) {
   element.focus();
 }
 
-const toggleFullScreen = (ref = null) => {
-  const element = ref || document.documentElement;
-
-  if (isFullScreen(element)) {
-    cancelFullScreen();
+const toggleFullScreen = (ref = null, isDetached = false, p) => {
+  const element = isDetached ? p.document.documentElement : (ref || document.documentElement);
+  if (isDetached) {
+    if (isFullScreen(element, p.document)) {
+      cancelFullScreen(p.document);
+    } else {
+      fullscreenRequest(element);
+    }
   } else {
-    fullscreenRequest(element);
+    if (isFullScreen(element)) {
+      cancelFullScreen();
+    } else {
+      fullscreenRequest(element);
+    }
   }
 };
 
diff --git a/bigbluebutton-html5/imports/ui/components/emoji-rain/component.jsx b/bigbluebutton-html5/imports/ui/components/emoji-rain/component.jsx
index 605c648796f0..b2d08f92e3f6 100644
--- a/bigbluebutton-html5/imports/ui/components/emoji-rain/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/emoji-rain/component.jsx
@@ -2,6 +2,7 @@ import React, { useRef, useState, useEffect } from 'react';
 import { getSettingsSingletonInstance } from '/imports/ui/services/settings';
 import Service from './service';
 import logger from '/imports/startup/client/logger';
+//import { originalRAF } from '/imports/utils/animationFrameBackup';
 
 const EmojiRain = ({ reactions }) => {
   const Settings = getSettingsSingletonInstance();
@@ -57,6 +58,8 @@ const EmojiRain = ({ reactions }) => {
     }
 
     requestAnimationFrame(() => setTimeout(() => flyingEmojis.forEach((emoji) => {
+    // No effect observed (emoji rain works without using originalRAF). So removed.
+    //originalRAF(() => setTimeout(() => flyingEmojis.forEach((emoji) => {
       const { shapeElement, endPosition } = emoji;
       shapeElement.style.left = `${endPosition.x}px`;
       shapeElement.style.top = `${endPosition.y}px`;
diff --git a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx
index 34360f104cae..10cc75bded83 100644
--- a/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx
+++ b/bigbluebutton-html5/imports/ui/components/layout/layout-manager/customLayout.jsx
@@ -461,10 +461,13 @@ const CustomLayout = (props) => {
     }
 
     if (
-      fullscreenElement === 'Presentation' ||
-      fullscreenElement === 'Screenshare' ||
-      fullscreenElement === 'ExternalVideo' ||
-      fullscreenElement === 'GenericContent'
+      (fullscreenElement === 'Presentation' ||
+       fullscreenElement === 'Screenshare' ||
+       fullscreenElement === 'ExternalVideo' ||
+       fullscreenElement === 'GenericContent') &&
+       // this is indispensable for showing a normal-sized operatable external video
+       //  when popup is fullscreen within the sub-monitor
+       document.getElementById('presentationInnerWrapper')
     ) {
       mediaBounds.width = windowWidth();
       mediaBounds.height = windowHeight();
@@ -803,4 +806,4 @@ const CustomLayout = (props) => {
   return null;
 };
 
-export default CustomLayout;
\ No newline at end of file
+export default CustomLayout;
diff --git a/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx b/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx
index d4a710d75dc5..54d820ae91fb 100644
--- a/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx
@@ -40,7 +40,7 @@ const intlMessages = defineMessages({
 const STATUS_CRITICAL = 'critical';
 const COLOR_PRIMARY = 'primary';
 
-const NotificationsBarContainer = () => {
+const NotificationsBarContainer = ({ isPopupOnPreparation }) => {
   const intl = useIntl();
 
   const { hasNotification } = layoutSelectInput((i) => i.notificationsBar);
@@ -61,6 +61,14 @@ const NotificationsBarContainer = () => {
   const errorMessage = useMemo(() => {
     const isCritical = rttStatus === STATUS_CRITICAL;
 
+    // When subscriptionFailed error comes when the popup is under preparation,
+    //  return null and clear the stacked subscriptionFaied error.
+    if (isPopupOnPreparation && subscriptionFailed) {
+      console.log("Warning: Ignoring an initial graphql subscription failure (3006) on popup.");
+      connectionStatus.getSubscriptionFailedVar()(false);
+      return null;
+    }
+
     if (!connected) {
       const code = isCritical ? 3002 : 3001;
       const msg = intl.formatMessage(
@@ -137,6 +145,7 @@ const NotificationsBarContainer = () => {
     rttStatus,
     subscriptionFailed,
     intl,
+    isPopupOnPreparation,
   ]);
 
   const meetingMessage = useMemo(() => {
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/component.jsx
index 1fbad7ddadc0..154b9950f1c7 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/component.jsx
@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import WhiteboardContainer from '/imports/ui/components/whiteboard/container';
 import { HUNDRED_PERCENT, MAX_PERCENT, MIN_PERCENT } from '/imports/utils/slideCalcUtils';
@@ -6,6 +7,7 @@ import { SPACE } from '/imports/utils/keyCodes';
 import { defineMessages, injectIntl } from 'react-intl';
 import Session from '/imports/ui/services/storage/in-memory';
 import PresentationToolbarContainer from './presentation-toolbar/container';
+import PresentationMenuContainer from './presentation-menu/container';
 import PresentationMenu from './presentation-menu/container';
 import DownloadPresentationButton from './download-presentation-button/component';
 import Styled from './styles';
@@ -18,9 +20,11 @@ import browserInfo from '/imports/utils/browserInfo';
 import { addAlert } from '../screenreader-alert/service';
 import { debounce } from '/imports/utils/debounce';
 import { throttle } from '/imports/utils/throttle';
+import { originalRAF, originalCAF } from '/imports/utils/animationFrameBackup';
 import LocatedErrorBoundary from '/imports/ui/components/common/error-boundary/located-error-boundary/component';
 import FallbackView from '/imports/ui/components/common/fallback-errors/fallback-view/component';
 import TooltipContainer from '/imports/ui/components/common/tooltip/container';
+import { StyleSheetManager } from 'styled-components';
 
 const intlMessages = defineMessages({
   presentationLabel: {
@@ -58,9 +62,9 @@ const FULLSCREEN_CHANGE_EVENT = isSafari
   ? 'webkitfullscreenchange'
   : 'fullscreenchange';
 
-const getToolbarHeight = () => {
+const getToolbarHeight = (doc = document) => {
   let height = 0;
-  const toolbarEl = document.getElementById('presentationToolbarWrapper');
+  const toolbarEl = doc.getElementById('presentationToolbarWrapper');
   if (toolbarEl) {
     const { clientHeight } = toolbarEl;
     height = clientHeight;
@@ -102,6 +106,8 @@ class Presentation extends PureComponent {
     this.setIsToolbarVisible = this.setIsToolbarVisible.bind(this);
     this.handlePanShortcut = this.handlePanShortcut.bind(this);
     this.renderPresentationMenu = this.renderPresentationMenu.bind(this);
+    this.renderPresentationContents = this.renderPresentationContents.bind(this);
+    this.detachPresentation = this.detachPresentation.bind(this);
 
     this.onResize = () => setTimeout(this.handleResize.bind(this), 0);
     this.setPresentationRef = this.setPresentationRef.bind(this);
@@ -330,9 +336,19 @@ class Presentation extends PureComponent {
 
   componentWillUnmount() {
     Session.setItem('componentPresentationWillUnmount', true);
-    const { fullscreenContext, layoutContextDispatch } = this.props;
+    const {
+      fullscreenContext,
+      layoutContextDispatch,
+      isPresentationDetached,
+      popupWindow,
+    } = this.props;
 
-    window.removeEventListener('resize', this.onResize, false);
+    if (isPresentationDetached) {
+      popupWindow.removeEventListener('resize', this.onResize, false);
+    } else {
+      window.removeEventListener('resize', this.onResize, false);
+    }
+    
     if (this.refPresentationContainer) {
       this.refPresentationContainer.removeEventListener(
         FULLSCREEN_CHANGE_EVENT,
@@ -359,6 +375,257 @@ class Presentation extends PureComponent {
     }
   }
 
+  detachPresentation() {
+    const {
+      slidePosition,
+      isPresentationDetached,
+      popupWindow,
+      toggleDetachPresentation,
+      onPopupPreparing,
+    } = this.props;
+
+    
+    if (!isPresentationDetached) {
+      // Quit fullscreen first when detach fullscreen presentation
+      // This will however keep the popup window size same as fullscreen.
+      if (window.document.fullscreenElement != null) {
+        this.onFullscreenChange();
+      }
+
+      const svgDimensions = this.calculateSize(slidePosition);
+      const toolbarHeight = getToolbarHeight();
+      const popup = window.open('', '_blank',
+        `innerwidth=${svgDimensions.width},innerheight=${svgDimensions.height + toolbarHeight},resizable,scrollbars`);
+      if (!popup) return;
+      popup.document.title = 'BigBlueButton Portal Window';
+      const container = popup.document.createElement('div');
+      popup.document.body.appendChild(container);
+
+      // popup window is still in preparation, so some graphql subscription fails,
+      //  which then will show the notification bar. We want to surpress it.
+      onPopupPreparing?.(true);
+
+      // Copying the attributes of <html>, so that the bbb-icons font looks a bit smaller
+      const mainHtml = document.documentElement; // メインウィンドウの <html>
+      const popupHtml = popup.document.documentElement;
+      // class
+      popupHtml.className = mainHtml.className;
+      // style, which includes font-size: 14px
+      popupHtml.style.cssText = mainHtml.style.cssText;
+      // dir
+      if (mainHtml.hasAttribute('dir')) {
+        popupHtml.setAttribute('dir', mainHtml.getAttribute('dir'));
+      } else {
+        popupHtml.removeAttribute('dir');
+      }
+      // lang
+      if (mainHtml.hasAttribute('lang')) {
+        popupHtml.setAttribute('lang', mainHtml.getAttribute('lang'));
+      } else {
+        popupHtml.removeAttribute('dir');
+      }
+
+      // headの中身をコピー
+      const headElements = document.head.cloneNode(true).childNodes;
+      headElements.forEach((node) => {
+        // script要素など重複実行したくないものを除外する
+        if (node.nodeName !== 'SCRIPT') {
+          popup.document.head.appendChild(node.cloneNode(true));
+        }
+      });
+
+      // Firefox specific configuration
+      const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
+      if (isFirefox) {
+        // Add base URL (perhaps only necessary for Firefox to show tldraw icons
+        const base = popup.document.createElement('base');
+        base.href = window.location.origin + '/';
+        popup.document.head.appendChild(base);
+
+        // Explicitely copy bbb-icons.css to show bbb-icons
+        fetch('stylesheets/bbb-icons.css')
+          .then(res => res.text())
+          .then(css => {
+            const style = popup.document.createElement('style');
+            style.textContent = css;
+            popup.document.head.appendChild(style);
+          });
+        // Explicitly set FontFace to show bbb-icons
+        const fonts = [
+          { name: 'bbb-icons', url: '/html5client/fonts/BbbIcons/bbb-icons.woff2' },
+        ];
+        fonts.forEach(({ name, url }) => {
+          const font = new FontFace(name, `url(${window.location.origin}${url})`);
+          font.load().then(loaded => popup.document.fonts.add(loaded));
+        });
+      }
+
+      // 追加: document.styleSheets からすべての stylesheet を popup に複製
+      //Array.from(document.styleSheets).forEach((styleSheet) => {
+      //  try {
+      //    if (styleSheet.href) {
+      //      // <link rel="stylesheet"> 形式
+      //      const link = popup.document.createElement('link');
+      //      link.rel = 'stylesheet';
+      //      link.href = styleSheet.href;
+      //      popup.document.head.appendChild(link);
+      //    } else if (styleSheet.cssRules) {
+      //      // <style> 形式（インラインスタイル）
+      //      const style = popup.document.createElement('style');
+      //      Array.from(styleSheet.cssRules).forEach((rule) => {
+      //        style.appendChild(popup.document.createTextNode(rule.cssText));
+      //      });
+      //      popup.document.head.appendChild(style);
+      //    }
+      //  } catch (e) {
+      //    // クロスオリジンのスタイルシートにはアクセスできないことがある
+      //    console.warn('Failed to copy style sheets:', e);
+      //  }
+      //});
+
+      // Remove all the data-styled (generated by Styled.TldrawV2GlobalStyle in whiteboard/styles.js) tags
+      //  to prevent from being overwritten. Otherwise the alighment of WB toolbar is broken when resized.
+      //   -> not necessary anymore by whatever reasons
+      //popup.document
+      //  .querySelectorAll('style[data-styled]')
+      //  .forEach(el => el.remove());
+
+      // tldraw-original(?) fonts injection,
+      //  this fix the inconsistency of var(--tl-font-draw) between popup and main window.
+      const fonts = [
+        { name: 'tldraw_draw', url: '/html5client/fonts/tldraw/Shantell_Sans-Tldrawish.woff2' },
+        { name: 'tldraw_sans', url: '/html5client/fonts/tldraw/IBMPlexSans-Medium.woff2' },
+        { name: 'tldraw_serif', url: '/html5client/fonts/tldraw/IBMPlexSerif-Medium.woff2' },
+        { name: 'tldraw_mono', url: '/html5client/fonts/tldraw/IBMPlexMono-Medium.woff2' },
+      ];
+      fonts.forEach(({ name, url }) => {
+        const font = new FontFace(name, `url(${window.location.origin}${url})`);
+        font.load().then(loaded => popup.document.fonts.add(loaded));
+      });
+
+      // Remove cursor style from the class tl-canvas,
+      //  otherwise cursor stays the same when pencil, text, line, note
+      //  tools are selected before popping up.
+      // Remove height from the class tlui-toolbar__tools
+      //  and remove height and width from the class tlui-icon,
+      //  otherwise toolbar shrunken when enlarging the popup window
+      //  that was detached when the toolbar was horizontally arranged.
+      Array.from(popup.document.styleSheets).forEach(styleSheet => {
+        try {
+          const rules = styleSheet.cssRules || styleSheet.rules;
+          if (!rules) return;
+
+          for (let i = rules.length - 1; i >= 0; i--) {
+            const rule = rules[i];
+            if (rule.selectorText && rule.selectorText.includes('.tl-canvas')) {
+              if (rule.style && rule.style.cursor) {
+                if ((rule.style.cursor.indexOf('pencil.png') > -1) ||
+                    (rule.style.cursor.indexOf('text.png') > -1) ||
+                   (rule.style.cursor.indexOf('line.png') > -1) ||
+                    (rule.style.cursor.indexOf('square.png') > -1) ){
+                  rule.style.removeProperty('cursor');
+                }
+              }
+            } else if
+               (rule.selectorText &&
+                rule.selectorText.includes('.tlui-toolbar__tools.tlui-toolbar__tools__mobile')) {
+              if (rule.style && rule.style.height) {
+                rule.style.removeProperty('height');
+              }
+            } else if
+               (rule.selectorText &&
+                rule.selectorText.includes('.tlui-layout__mobile .tlui-button__tool > .tlui-icon')) {
+              if (rule.style && rule.style.height) {
+                rule.style.removeProperty('height');
+              }
+              if (rule.style && rule.style.width) {
+                rule.style.removeProperty('width');
+              }
+            }
+          }
+        } catch (e) {
+          console.warn('Failed to copy style sheets:', e);
+        }
+      });
+
+      // When screenshare, sharing camera as contents, or sharing media is started,
+      //  the contents of popup is removed, yet leaving a blank popup.
+      //  -> fixed. This may not be necessary.
+      //const observedTarget = popup.document.body;
+      //const nullObserver = new MutationObserver(() => {
+      //  if (observedTarget.innerHTML.trim() === '<div></div>') {
+      //    console.log("Popup content removed. Closing...");
+      //    popup.close();
+      //    toggleDetachPresentation(null);
+      //    nullObserver.disconnect();
+      //  }
+      //});
+      //nullObserver.observe(observedTarget, { childList: true, subtree: true, characterData: true });
+
+      // Globally inject popup.requestAnimationFrame to requestAnimationFrame for internal usage of tldraw.
+      // These changes enable fullscreen of popup window in the main monitor.
+      if (popup.requestAnimationFrame) {
+        window.requestAnimationFrame = popup.requestAnimationFrame.bind(popup);
+      }
+      if (popup.cancelAnimationFrame) {
+        window.cancelAnimationFrame = popup.cancelAnimationFrame.bind(popup);
+      }
+
+      toggleDetachPresentation(popup);
+      popup.addEventListener('beforeunload', () => {
+        onPopupPreparing?.(false); // Only when the popup is closed very quickly, but may not be necessary..
+        // Revert the injection of popup.rAF/cAF
+        window.requestAnimationFrame = originalRAF;
+        window.cancelAnimationFrame = originalCAF;
+        toggleDetachPresentation(null);
+      });
+      
+      popup.addEventListener('resize', () => {
+        this.onResize();
+      });
+      
+      popup.addEventListener(FULLSCREEN_CHANGE_EVENT, () => {
+        const isFullscreen = popup.document.fullscreenElement != null
+        if (!isFullscreen)  {
+          // When the popup went normal window from fullscreen by pushing ESC key,
+          //  we need to explicitely change isFullscreen in presentation-menu/container.
+          // To do it, we have send null to ACTIONS.SET_FULLSCREEN_ELEMENT.
+          this.props.layoutContextDispatch({
+            type: ACTIONS.SET_FULLSCREEN_ELEMENT,
+            value: { element: '', group: '' },
+          });
+        }
+        // Then normal fullscreen change (by button or ESC)
+        this.onFullscreenChange();
+      });
+      
+      // when the canvas of tldraw is drawn on the popup,
+      //  we will set false to isPopupOnPreparation.
+      // Then the notification bar with 3006 error becomes accepted again.
+      const tlContainer = popup.document.querySelector('.tl-container');
+      const observerTlCanvas = new MutationObserver((__, obs) => {
+        const tlCanvas = popup.document.querySelector('.tl-canvas');
+        if (tlCanvas) {
+          onPopupPreparing?.(false);
+          obs.disconnect();
+        }
+      });
+      //observerTlCanvas.observe(popup.document.body, { childList: true, subtree: true });
+      observerTlCanvas.observe(tlContainer, { childList: true, subtree: true });
+        
+    } else {
+      // to explicitely exit fullsreen; we do not need setState "isFullscreen: false".
+      //  (in case user directly merge popup when it is fullscreen)
+      this.props.layoutContextDispatch({
+        type: ACTIONS.SET_FULLSCREEN_ELEMENT,
+        value: { element: '', group: '' },
+      });
+      // Basically the app does not reach here...
+      popupWindow?.close();
+      toggleDetachPresentation(null);
+    }
+  }
+
   handlePanShortcut(e) {
     const { userIsPresenter } = this.props;
     const { isPanning } = this.state;
@@ -375,7 +642,40 @@ class Presentation extends PureComponent {
   }
 
   handleResize() {
-    const presentationSizes = this.getPresentationSizesAvailable();
+    const {
+      isPresentationDetached,
+      popupWindow,
+    } = this.props;
+
+    let presentationSizes;
+    if (isPresentationDetached) {
+      const toolbarHeight = getToolbarHeight(popupWindow.document);
+      presentationSizes = {
+        //popupWindow.document.documentElement.clientHeight could be zero on Firefox!
+        //presentationHeight: popupWindow.document.documentElement.clientHeight - toolbarHeight,
+        //presentationWidth: popupWindow.document.documentElement.clientWidth,
+        presentationHeight: popupWindow.innerHeight - toolbarHeight,
+        presentationWidth: popupWindow.innerWidth,
+      };
+      // Just a test
+      //this.zoomChanger(200);
+      //tldrawAPI.setZoom(5.0);
+      
+      // To fix a problem that a slide does not follow the window resizing,
+      //  drawing a large bg SVG behind the small un-resized bgSVG when expanding the window.
+      // This problem only happens in the popup window of MacOS Safari..
+      if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+        const images = popupWindow.document.querySelectorAll('.tl-image');
+        if (images.length > 0) {
+          images.forEach(div => {
+            div.style.webkitTransform = 'translateZ(0)'; // this forces redrawing.
+          });
+        }
+      }
+    } else {
+      presentationSizes = this.getPresentationSizesAvailable();
+    }
+    //console.log("handleResize", presentationSizes);
     if (Object.keys(presentationSizes).length > 0) {
       // updating the size of the space available for the slide
       if (!Session.getItem('componentPresentationWillUnmount')) {
@@ -388,10 +688,18 @@ class Presentation extends PureComponent {
   }
 
   onFullscreenChange() {
-    const { isFullscreen } = this.state;
-    const newIsFullscreen = FullscreenService.isFullScreen(
-      this.refPresentationContainer,
-    );
+    const {
+      isFullscreen,
+    } = this.state;
+
+    const {
+      isPresentationDetached,
+      popupWindow,
+    } = this.props;
+
+    const newIsFullscreen = isPresentationDetached ?
+      FullscreenService.isFullScreen( popupWindow.document.documentElement, popupWindow.document) :
+      FullscreenService.isFullScreen( this.refPresentationContainer);
     if (isFullscreen !== newIsFullscreen) {
       this.setState({ isFullscreen: newIsFullscreen });
     }
@@ -577,6 +885,8 @@ class Presentation extends PureComponent {
       userIsPresenter,
       hasPoll,
       currentPresentationPage,
+      isPresentationDetached,
+      popupWindow,
     } = this.props;
     const { zoom, isPanning, tldrawAPI } = this.state;
 
@@ -621,6 +931,8 @@ class Presentation extends PureComponent {
         numberOfSlides={totalPages}
         layoutSwapped={false}
         hasPoll={hasPoll}
+        isPresentationDetached={isPresentationDetached}
+        popupWindow={popupWindow}
       />
     );
   }
@@ -650,6 +962,8 @@ class Presentation extends PureComponent {
       userIsPresenter,
       currentSlide,
       currentUser,
+      isPresentationDetached,
+      popupWindow,
     } = this.props;
     const { tldrawAPI, isToolbarVisible } = this.state;
 
@@ -666,11 +980,14 @@ class Presentation extends PureComponent {
         slideNum={currentSlide?.num}
         currentUser={currentUser}
         whiteboardId={currentSlide?.id}
+        detachPresentation={this.detachPresentation}
+        isPresentationDetached={isPresentationDetached}
+        popupWindow={popupWindow}
       />
     );
   }
 
-  render() {
+  renderPresentationContents() {
     const {
       userIsPresenter,
       hasWBAccess,
@@ -689,6 +1006,8 @@ class Presentation extends PureComponent {
       darkTheme,
       isViewersAnnotationsLocked,
       fitToWidth,
+      isPresentationDetached,
+      popupWindow,
     } = this.props;
 
     const {
@@ -725,7 +1044,7 @@ class Presentation extends PureComponent {
     const svgHeight = svgDimensions.height;
     const svgWidth = svgDimensions.width;
 
-    const toolbarHeight = getToolbarHeight();
+    const toolbarHeight = getToolbarHeight(isPresentationDetached && popupWindow ? popupWindow.document : document);
 
     const { presentationToolbarMinWidth } = DEFAULT_VALUES;
 
@@ -767,11 +1086,14 @@ class Presentation extends PureComponent {
             this.refPresentationContainer = ref;
           }}
           style={{
-            top: presentationBounds.top,
-            left: presentationBounds.left,
-            right: presentationBounds.right,
-            width: presentationBounds.width,
-            height: presentationBounds.height,
+            top: isPresentationDetached ? 0 : presentationBounds.top,
+            left: isPresentationDetached ? 0 : presentationBounds.left,
+            right: isPresentationDetached ? 0 : presentationBounds.right,
+            //These do not work on Firefox
+            //width: isPresentationDetached ? popupWindow.document.documentElement.clientWidth : presentationBounds.width,
+            //height: isPresentationDetached ? popupWindow.document.documentElement.clientHeight : presentationBounds.height,
+            width: isPresentationDetached ? popupWindow.innerWidth : presentationBounds.width,
+            height: isPresentationDetached ? popupWindow.innerHeight : presentationBounds.height,
             display: !presentationIsOpen ? 'none' : 'flex',
             overflow: 'hidden',
             zIndex: !isVideoFocus ? presentationZIndex : 1,
@@ -843,8 +1165,12 @@ class Presentation extends PureComponent {
                     intl={intl}
                     presentationWidth={svgWidth}
                     presentationHeight={svgHeight}
-                    presentationAreaHeight={presentationBounds.height - toolbarHeight}
-                    presentationAreaWidth={presentationBounds.width}
+                    presentationAreaHeight={isPresentationDetached ?
+                      popupWindow.innerHeight - toolbarHeight :
+                      presentationBounds.height - toolbarHeight}
+                    presentationAreaWidth={isPresentationDetached ?
+                      popupWindow.innerWidth :
+                      presentationBounds.width}
                     isPanning={isPanning}
                     zoomChanger={this.zoomChanger}
                     fitToWidth={fitToWidth}
@@ -860,6 +1186,8 @@ class Presentation extends PureComponent {
                     darkTheme={darkTheme}
                     isToolbarVisible={isToolbarVisible}
                     isViewersAnnotationsLocked={isViewersAnnotationsLocked}
+                    isPresentationDetached={isPresentationDetached}
+                    popupWindow={popupWindow}
                   />
                 </LocatedErrorBoundary>
                 {isFullscreen && <PollingContainer />}
@@ -872,6 +1200,7 @@ class Presentation extends PureComponent {
                   style={{
                     width: containerWidth,
                   }}
+                  isPresentationDetached={isPresentationDetached}
                 >
                   {this.renderPresentationToolbar(svgWidth)}
                 </Styled.PresentationToolbar>
@@ -882,6 +1211,30 @@ class Presentation extends PureComponent {
       </>
     );
   }
+
+  render() {
+    const {
+      isPresentationDetached,
+      popupWindow,
+    } = this.props;
+
+    const presentationContent = this.renderPresentationContents();
+
+    if (isPresentationDetached && popupWindow?.document?.head) {
+      return ReactDOM.createPortal(
+        /* Use StyleSheetManager to inject dynamic stylesheet elements of styled component */
+        /*  such as isToolbarVisible of Styled.TldrawV2GlobalStyle in whiteboard/styles.js */
+        <StyleSheetManager
+          target={popupWindow.document.head}
+        >   
+          {presentationContent}
+        </StyleSheetManager>,
+        popupWindow.document.body
+      );
+    }
+    
+    return presentationContent;
+  }
 }
 
 export default injectIntl(Presentation);
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx
index 444935e0b2f2..e211509c6a27 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx
@@ -93,6 +93,16 @@ const intlMessages = defineMessages({
     id: 'app.presentation.modal.clearAnnotationsConfirmLabel',
     description: 'Label for the confirm button',
   },
+  detachPopupDesc: {
+    id: 'app.presentation.options.detachPopup',
+    description: 'Popup the presentation area label',
+    defaultMessage: 'Popup presentation',
+  },
+  mergePopupDesc: {
+    id: 'app.presentation.options.mergePopup',
+    description: 'Merge the detached presentation area label',
+    defaultMessage: 'Merge presentation popup',
+  },
 });
 
 const propTypes = {
@@ -100,6 +110,7 @@ const propTypes = {
     formatMessage: PropTypes.func.isRequired,
   }).isRequired,
   allowSnapshotOfCurrentSlide: PropTypes.bool,
+  allowPopupPresentation: PropTypes.bool,
   handleToggleFullscreen: PropTypes.func.isRequired,
   isFullscreen: PropTypes.bool,
   elementName: PropTypes.string,
@@ -142,12 +153,15 @@ const PresentationMenu = (props) => {
     isToolbarVisible,
     setIsToolbarVisible,
     allowSnapshotOfCurrentSlide = false,
+    allowPopupPresentation = false,
     presentationDropdownItems,
     slideNum,
     currentUser,
     whiteboardId,
     persistShape,
     hasWBAccess,
+    popupWindow,
+    isPresentationDetached,
   } = props;
 
   const [state, setState] = useState({
@@ -246,6 +260,11 @@ const PresentationMenu = (props) => {
     : intl.formatMessage(intlMessages.showToolsDesc)
   );
 
+  const formattedDetachedLabel = (detached) => (detached
+    ? intl.formatMessage(intlMessages.mergePopupDesc)
+    : intl.formatMessage(intlMessages.detachPopupDesc)
+  );
+
   const extractShapes = (savedState) => {
     let data;
 
@@ -354,7 +373,7 @@ const PresentationMenu = (props) => {
           label: formattedLabel(isFullscreen),
           icon: isFullscreen ? 'exit_fullscreen' : 'fullscreen',
           onClick: () => {
-            handleToggleFullscreen(fullscreenRef);
+            handleToggleFullscreen(fullscreenRef, isPresentationDetached, popupWindow);
             const newElement = (elementId === currentElement) ? '' : elementId;
             const newGroup = (elementGroup === currentGroup) ? '' : elementGroup;
 
@@ -454,6 +473,17 @@ const PresentationMenu = (props) => {
       );
     }
 
+    if (props.amIPresenter && allowPopupPresentation) {
+      menuItems.push({
+        key: 'list-item-detach-presentation',
+        //label: intl.formatMessage({ id: 'app.presentation.detachPresentation' }),
+        label: formattedDetachedLabel(isPresentationDetached),
+        icon: 'external-link',
+        icon: isPresentationDetached ? 'minus' : 'popout_window',
+        onClick: props.detachPresentation,
+      });
+    }
+
     // if (props.amIPresenter) {
     //   menuItems.push({
     //     key: 'list-item-load-shapes',
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/container.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/container.jsx
index 2ea600bc5e2d..2db23369bb01 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/container.jsx
@@ -4,7 +4,7 @@ import PresentationMenu from './component';
 import FullscreenService from '/imports/ui/components/common/fullscreen-button/service';
 import Auth from '/imports/ui/services/auth';
 import { layoutSelect, layoutDispatch } from '/imports/ui/components/layout/context';
-import { useIsSnapshotOfCurrentSlideEnabled } from '/imports/ui/services/features';
+import { useIsSnapshotOfCurrentSlideEnabled, useIsPopupPresentationEnabled } from '/imports/ui/services/features';
 import { PluginsContext } from '/imports/ui/components/components-data/plugin-context/context';
 import {
   CURRENT_PAGE_WRITERS_SUBSCRIPTION,
@@ -46,9 +46,10 @@ const PresentationMenuContainer = (props) => {
     name: meeting?.name,
   }));
 
-  const handleToggleFullscreen = (ref) => FullscreenService.toggleFullScreen(ref);
+  const handleToggleFullscreen = (ref, isdetached, popup) => FullscreenService.toggleFullScreen(ref, isdetached, popup);
   const isIphone = !!(navigator.userAgent.match(/iPhone/i));
   const allowSnapshotOfCurrentSlide = useIsSnapshotOfCurrentSlideEnabled();
+  const allowPopupPresentation = useIsPopupPresentationEnabled();
 
   return (
     <PresentationMenu
@@ -65,6 +66,7 @@ const PresentationMenuContainer = (props) => {
         handleToggleFullscreen,
         isIphone,
         allowSnapshotOfCurrentSlide,
+        allowPopupPresentation,
         persistShape,
         whiteboardWriters,
       }}
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
index e8b6f4e95e47..a65bb041696e 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
@@ -123,11 +123,29 @@ class PresentationToolbar extends PureComponent {
   }
 
   componentDidMount() {
-    document.addEventListener('keydown', this.switchSlide);
+    const {
+      isPresentationDetached,
+      popupWindow,
+    } = this.props;
+
+    if (isPresentationDetached) {
+      popupWindow.document.addEventListener('keydown', this.switchSlide);
+    } else {
+      document.addEventListener('keydown', this.switchSlide);
+    }
   }
 
   componentWillUnmount() {
-    document.removeEventListener('keydown', this.switchSlide);
+    const {
+      isPresentationDetached,
+      popupWindow,
+    } = this.props;
+
+    if (isPresentationDetached) {
+      popupWindow.document.removeEventListener('keydown', this.switchSlide);
+    } else {
+      document.removeEventListener('keydown', this.switchSlide);
+    }
   }
 
   handleSkipToSlideChange(event) {
@@ -163,9 +181,11 @@ class PresentationToolbar extends PureComponent {
       fullscreenAction,
       fullscreenRef,
       handleToggleFullScreen,
+      isPresentationDetached,
+      popupWindow,
     } = this.props;
 
-    handleToggleFullScreen(fullscreenRef);
+    handleToggleFullScreen(fullscreenRef, isPresentationDetached, popupWindow);
     const newElement = isFullscreen ? '' : fullscreenElementId;
 
     layoutContextDispatch({
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/container.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/container.jsx
index 170233cc3290..efacef974bae 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/container.jsx
@@ -96,9 +96,11 @@ const PresentationToolbarContainer = (props) => {
     numberOfSlides,
     currentSlide,
     currentPresentationPage,
+    isPresentationDetached,
+    popupWindow,
   } = props;
 
-  const handleToggleFullScreen = (ref) => FullscreenService.toggleFullScreen(ref);
+  const handleToggleFullScreen = (ref) => FullscreenService.toggleFullScreen(ref, isPresentationDetached, popupWindow);
 
   const [createPoll] = useMutation(POLL_CREATE);
   const [presentationSetZoom] = useMutation(PRESENTATION_SET_ZOOM);
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/styles.js b/bigbluebutton-html5/imports/ui/components/presentation/styles.js
index 4e6ab0874ca0..43fe7ab179cc 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/presentation/styles.js
@@ -164,7 +164,9 @@ const PresentationToolbar = styled.div`
   order: 2;
   position: absolute;
   bottom: 0;
-  z-index: 0;
+  // has to be 1 for showing dropdown on the popupWindow,
+  //  as both presentationInnerWrapper and presentationToolbarWrapper are 'z-index: 1'.
+  z-index: ${({ isPresentationDetached }) => (isPresentationDetached ? 1 : 0)};
 `;
 
 const ToastSeparator = styled(ToastStyled.Separator)``;
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/component.tsx b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/component.tsx
index 912a3ee3ad6b..4fe158914c4f 100755
--- a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/component.tsx
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/component.tsx
@@ -3,6 +3,7 @@ import { IntlShape, defineMessages, injectIntl } from 'react-intl';
 import { UpdatedDataForUserCameraDomElement } from 'bigbluebutton-html-plugin-sdk/dist/cjs/dom-element-manipulation/user-camera/types';
 import { throttle } from '/imports/utils/throttle';
 import { range } from '/imports/utils/array-utils';
+import { originalRAF } from '/imports/utils/animationFrameBackup';
 import Styled from './styles';
 import VideoListItemContainer from './video-list-item/container';
 import AutoplayOverlay from '/imports/ui/components/media/autoplay-overlay/component';
@@ -214,7 +215,8 @@ class VideoList extends Component<VideoListProps, VideoListState> {
 
   handleCanvasResize() {
     if (!this.ticking) {
-      window.requestAnimationFrame(() => {
+      // still unclear if this matters..
+      originalRAF(() => {
         this.ticking = false;
         this.setOptimalGrid();
       });
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
index e98116fec399..8e8f63949e91 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
@@ -170,10 +170,19 @@ const Whiteboard = React.memo((props) => {
     setEditor,
     lockToolbarTools,
     layoutChanged,
+    isPresentationDetached,
+    popupWindow,
   } = props;
 
   clearTldrawCache();
 
+  const raf = isPresentationDetached
+    ? popupWindow.requestAnimationFrame
+    : window.requestAnimationFrame;
+  const caf = isPresentationDetached
+    ? popupWindow.cancelAnimationFrame
+    : window.cancelAnimationFrame;
+
   const [isMounting, setIsMounting] = React.useState(true);
   const [cursorType, setCursorType] = React.useState('');
 
@@ -590,7 +599,10 @@ const Whiteboard = React.memo((props) => {
       return;
     }
     // ignore if the edit link dialog is open
-    if (document.querySelector('h2.tlui-dialog__header__title')?.textContent === 'Edit link') {
+    const elDialog = isPresentationDetached ?
+      popupWindow.document.querySelector('h2.tlui-dialog__header__title')?.textContent :
+      document.querySelector('h2.tlui-dialog__header__title')?.textContent;
+    if (elDialog === 'Edit link') {
       return;
     }
 
@@ -880,8 +892,15 @@ const Whiteboard = React.memo((props) => {
   };
 
   const getContainerDimensions = () => {
-    const container = document.querySelector('[data-test="presentationContainer"]');
-    const innerWrapper = document.getElementById('presentationInnerWrapper');
+    // This change affects the behaviour when resize and fullscreen the popupWindow.
+    //const container = document.querySelector('[data-test="presentationContainer"]');
+    //const innerWrapper = document.getElementById('presentationInnerWrapper');
+    const container = isPresentationDetached ?
+      popupWindow.document.querySelector('[data-test="presentationContainer"]') :
+      document.querySelector('[data-test="presentationContainer"]');
+    const innerWrapper = isPresentationDetached ?
+      popupWindow.document.getElementById('presentationInnerWrapper') :
+      document.getElementById('presentationInnerWrapper');
     const containerWidth = container ? container.offsetWidth : 0;
     const innerWrapperWidth = innerWrapper ? innerWrapper.offsetWidth : 0;
     const widthGap = Math.max(containerWidth - innerWrapperWidth, 0);
@@ -1065,8 +1084,15 @@ const Whiteboard = React.memo((props) => {
     stableCount = 0,
     lastDimensions = { width: 0, height: 0 },
   ) => {
-    const container = document.querySelector('[data-test="presentationContainer"]');
-    const innerWrapper = document.getElementById('presentationInnerWrapper');
+    // This change affects the behaviour when resize and fullscreen the popupWindow.
+    //const container = document.querySelector('[data-test="presentationContainer"]');
+    //const innerWrapper = document.getElementById('presentationInnerWrapper');
+    const container = isPresentationDetached ?
+      popupWindow.document.querySelector('[data-test="presentationContainer"]') :
+      document.querySelector('[data-test="presentationContainer"]');
+    const innerWrapper = isPresentationDetached ?
+      popupWindow.document.getElementById('presentationInnerWrapper') :
+      document.getElementById('presentationInnerWrapper');
 
     const containerWidth = container ? container.offsetWidth : 0;
     const containerHeight = container ? container.offsetHeight : 0;
@@ -1097,7 +1123,7 @@ const Whiteboard = React.memo((props) => {
     }
 
     if (currentTry < options.maxTries) {
-      const frameId = requestAnimationFrame(() => {
+      const frameId = raf(() => {
         pollInnerWrapperDimensionsUntilStable(
           onReady,
           options,
@@ -1132,7 +1158,7 @@ const Whiteboard = React.memo((props) => {
     if (isMountedRef.current) {
       onReady();
     } else if (currentTry <= options.maxTries) {
-      const frameId = requestAnimationFrame(() => {
+      const frameId = raf(() => {
         pollUntilMounted(onReady, onFail, ref, options, currentTry + 1);
       });
       if (_ref) {
@@ -1457,6 +1483,8 @@ const Whiteboard = React.memo((props) => {
                 'fade-out',
                 '0s',
                 hasWBAccessRef.current || isPresenterRef.current,
+                isPresentationDetached,
+                popupWindow,
               );
             } else if (visibilityState === 'hidden') {
               toggleToolsAnimations(
@@ -1464,6 +1492,8 @@ const Whiteboard = React.memo((props) => {
                 'fade-in',
                 '0s',
                 hasWBAccessRef.current || isPresenterRef.current,
+                isPresentationDetached,
+                popupWindow,
               );
             }
             lastVisibilityStateRef.current = visibilityState;
@@ -1756,6 +1786,8 @@ const Whiteboard = React.memo((props) => {
       setIsWheelZoom,
       setWheelZoomTimeout,
       isInfiniteWhiteboard,
+      isPresentationDetached,
+      popupWindow,
     },
   );
 
@@ -1874,14 +1906,14 @@ const Whiteboard = React.memo((props) => {
 
   React.useEffect(() => {
     if (isMountedPollingFrameRef.current !== null) {
-      cancelAnimationFrame(isMountedPollingFrameRef.current);
+      caf(isMountedPollingFrameRef.current);
     }
-    isMountedPollingFrameRef.current = requestAnimationFrame(() => {
+    isMountedPollingFrameRef.current = raf(() => {
       pollUntilMounted(() => {
         if (innerWrapperPollingFrameRef.current !== null) {
-          cancelAnimationFrame(innerWrapperPollingFrameRef.current);
+          caf(innerWrapperPollingFrameRef.current);
         }
-        innerWrapperPollingFrameRef.current = requestAnimationFrame(() => {
+        innerWrapperPollingFrameRef.current = raf(() => {
           pollInnerWrapperDimensionsUntilStable(() => {
             syncCameraWithPresentationArea();
           }, {
@@ -1921,6 +1953,64 @@ const Whiteboard = React.memo((props) => {
     }
   }, [currentPresentationPage, isPresenter]);
 
+  React.useEffect(() => {
+    // Set red pointer cursor for the popup presentation,
+    //  which would be better displayed in a face-to-face lecture.
+    if (!(isPresenter && isPresentationDetached)) return;
+    if (!popupWindow) return;
+
+    const observer = new MutationObserver(() => {
+      const el = popupWindow.document.querySelector('.tl-container');
+      if (!el) return;
+
+      const varMap = {
+        '--tl-cursor-grab': '--tl-cursor-pointer',
+        '--tl-cursor-grabbing': '--tl-cursor-grabbing',
+      };
+
+      Object.entries(varMap).forEach(([baseVar, replaceVar]) => {
+        const dataUrl = getComputedStyle(el).getPropertyValue(replaceVar).trim();
+        if (dataUrl) {
+          const tinted = dataUrl.replace(/fill='white'/g, "fill='red'");
+          el.style.setProperty(baseVar, tinted);
+        }
+      });
+    })
+
+    observer.observe(popupWindow.document.body, { childList: true, subtree: true })
+      return () => observer.disconnect()
+  }, [isPresenter, isPresentationDetached, popupWindow]);
+
+  // HTMLElement injection
+  // The tldraw module uses HTMLElement variable, which is not from the popup.
+  // Thus some tldraw functions such as fullscreen and resize a drawing
+  //  does not work on the popup window.
+  // This actually modify a global variable, possibly causing other problems
+  //  -> Indeed. Now the original HTMLElement is backed up and used elsewhere.
+  const originalHTMLElementRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!isPresenter) return;
+
+    if (isPresentationDetached && popupWindow?.HTMLElement) {
+      if (!originalHTMLElementRef.current) {
+        originalHTMLElementRef.current = window.HTMLElement;
+      }
+      window.HTMLElement = popupWindow.HTMLElement;
+    } else {
+      if (originalHTMLElementRef.current) {
+        window.HTMLElement = originalHTMLElementRef.current;
+        originalHTMLElementRef.current = null;
+      }
+    }
+
+    return () => {
+      if (originalHTMLElementRef.current) {
+        window.HTMLElement = originalHTMLElementRef.current;
+        originalHTMLElementRef.current = null;
+      }
+    };
+  }, [isPresentationDetached, popupWindow]);
+
   React.useEffect(() => {
     if (tlEditorRef.current) {
       const useElement = document.querySelector('.tl-cursor use');
@@ -2011,7 +2101,7 @@ const Whiteboard = React.memo((props) => {
 
   const toggleToolbarIfNeeded = () => {
     if (whiteboardToolbarAutoHide && toggleToolsAnimations) {
-      toggleToolsAnimations('fade-in', 'fade-out', '0s', hasWBAccessRef.current || isPresenterRef.current);
+      toggleToolsAnimations('fade-in', 'fade-out', '0s', hasWBAccessRef.current || isPresenterRef.current, isPresentationDetached, popupWindow);
     }
   };
 
@@ -2113,12 +2203,13 @@ const Whiteboard = React.memo((props) => {
 
   React.useEffect(() => {
     if (!whiteboardToolbarAutoHide) {
-      const optionsDropdown = document.getElementById('WhiteboardOptionButton');
+      const doc = isPresentationDetached ? popupWindow.document : document;
+      const optionsDropdown = doc.getElementById('WhiteboardOptionButton');
       if (optionsDropdown?.classList.contains('fade-in')) {
         optionsDropdown.classList.remove('fade-in');
       }
     }
-  }, [whiteboardToolbarAutoHide]);
+  }, [whiteboardToolbarAutoHide, isPresentationDetached]);
 
   return (
     <div
@@ -2204,3 +2295,4 @@ Whiteboard.propTypes = {
   isInfiniteWhiteboard: PropTypes.bool,
   whiteboardWriters: PropTypes.arrayOf(PropTypes.shape).isRequired,
 };
+
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/container.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/container.jsx
index 3fad02dfb8e9..35fa90c62218 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/container.jsx
@@ -66,6 +66,8 @@ const WhiteboardContainer = (props) => {
   const {
     zoomChanger,
     fitToWidth,
+    isPresentationDetached,
+    popupWindow,
   } = props;
 
   const WHITEBOARD_CONFIG = window.meetingClientSettings.public.whiteboard;
@@ -530,7 +532,7 @@ const WhiteboardContainer = (props) => {
   const {
     colorStyle, dashStyle, fillStyle, fontStyle, sizeStyle,
   } = WHITEBOARD_CONFIG.styles;
-  const handleToggleFullScreen = (ref) => FullscreenService.toggleFullScreen(ref);
+  const handleToggleFullScreen = (ref, isPresentationDetached, popupWindow) => FullscreenService.toggleFullScreen(ref, isPresentationDetached, popupWindow);
 
   // use -0.5 offset to avoid white borders rounding erros
   bgShape.push({
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/hooks.js b/bigbluebutton-html5/imports/ui/components/whiteboard/hooks.js
index b8f7ba058865..905efbe3cb80 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/hooks.js
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/hooks.js
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { throttle } from 'radash';
 
-const hasBackgroundImageUrl = (el) => {
-  const style = window.getComputedStyle(el);
+const hasBackgroundImageUrl = (el, isDetached = false, p) => {
+  const style = isDetached ? p.getComputedStyle(el) : window.getComputedStyle(el);
   const bg = style.backgroundImage || '';
   return bg.includes('url(');
 };
@@ -28,13 +28,14 @@ const useCursor = (publishCursorUpdate, whiteboardId) => {
   return [cursorPosition, updateCursorPosition];
 };
 
-const getPresentationOptionsMenuItem = () => document.querySelector('li#presentationFullscreen')
-    || document.querySelector('li#presentationSnapshot')
-    || document.querySelector('li#toolVisibility')
+const getPresentationOptionsMenuItem = (isDetached = false, p) =>
+       (isDetached ? p.document.querySelector('li#presentationFullscreen') : document.querySelector('li#presentationFullscreen'))
+    || (isDetached ? p.document.querySelector('li#presentationSnapshot') : document.querySelector('li#presentationSnapshot'))
+    || (isDetached ? p.document.querySelector('li#toolVisibility') : document.querySelector('li#toolVisibility'))
     || null;
 
-const getTldrawOpenMenu = () => {
-  const tlElement = document.querySelectorAll('[id^=radix-]');
+const getTldrawOpenMenu = (isDetached = false, p) => {
+  const tlElement = isDetached ? p.document.querySelectorAll('[id^=radix-]') : document.querySelectorAll('[id^=radix-]');
   const tldrawMenu = Array.from(tlElement).find((el) => {
     const menuClasses = ['tlui-popover__content', 'tlui-menu'];
     if (el && menuClasses.includes(el.className)) {
@@ -59,6 +60,8 @@ const useMouseEvents = ({
   setIsWheelZoom,
   setWheelZoomTimeout,
   isInfiniteWhiteboard,
+  isPresentationDetached,
+  popupWindow,
 }) => {
   const timeoutIdRef = React.useRef();
   const fingerCountRef = React.useRef(0);
@@ -102,7 +105,9 @@ const useMouseEvents = ({
   const handleMouseDownWindow = (event) => {
     const { target } = event;
     const editor = tlEditorRef.current;
-    const presentationInnerWrapper = document.getElementById('presentationInnerWrapper');
+    const presentationInnerWrapper = isPresentationDetached ?
+      popupWindow.document.getElementById('presentationInnerWrapper') :
+      document.getElementById('presentationInnerWrapper');
 
     if (!(presentationInnerWrapper && presentationInnerWrapper.contains(target))) {
       if (editor?.getEditingShape()) {
@@ -117,7 +122,7 @@ const useMouseEvents = ({
       && editor?.getCurrentToolId() === 'select'
       && !target.matches('[data-testid*="selection.resize"]')
       && !target.matches('[data-testid*="selection.target"]')
-      && hasBackgroundImageUrl(target)
+      && hasBackgroundImageUrl(target, isPresentationDetached, popupWindow)
     ) {
       editor.selectNone();
       return editor.complete();
@@ -126,6 +131,32 @@ const useMouseEvents = ({
     return undefined;
   };
 
+  const handlePointerDownStylePanel = (event) => {
+    const panel = event.currentTarget;
+    const handlePointerUpStylePanel = (e) => {
+      //console.log("pointerup detected inside style panel", e);
+      const pointerUpEvent = new PointerEvent("pointerup", {
+        bubbles: true,
+        cancelable: true,
+        pointerId: e.pointerId || 1,
+        clientX: e.clientX,
+        clientY: e.clientY,
+        button: e.button,
+      });
+      // Inject a generic pointerup event both to the style-panel and to the main window,
+      //  hitting handlePointerUp in tldraw/src/lib/ui/components/primitives/ButtonPicker.tsx,
+      //  which is attached to the main window.
+      
+      //e.target.dispatchEvent(pointerUpEvent); // Removed due to the conflict with the HTMLElement hack.
+                                                // This triggered a infinite loop for measuring text size
+                                                //  when changing the font style from the style panel.
+      window.dispatchEvent(pointerUpEvent);
+
+      panel.removeEventListener("pointerup", handlePointerUpStylePanel);
+    };
+    panel.addEventListener("pointerup", handlePointerUpStylePanel);
+  };
+
   const handleMouseEnter = () => {
     clearTimeout(mouseLeaveTimeoutRef.current);
     if (whiteboardToolbarAutoHide) {
@@ -134,6 +165,8 @@ const useMouseEvents = ({
         'fade-in',
         animations ? '.3s' : '0s',
         hasWBAccess || isPresenterRef.current,
+        isPresentationDetached,
+        popupWindow,
       );
     }
   };
@@ -141,8 +174,8 @@ const useMouseEvents = ({
   const handleMouseLeave = () => {
     if (whiteboardToolbarAutoHide) {
       clearTimeout(mouseLeaveTimeoutRef.current);
-      const presentationWBOptionsMenuItem = getPresentationOptionsMenuItem();
-      const tldrawMenu = getTldrawOpenMenu();
+      const presentationWBOptionsMenuItem = getPresentationOptionsMenuItem(isPresentationDetached, popupWindow);
+      const tldrawMenu = getTldrawOpenMenu(isPresentationDetached, popupWindow);
       if (presentationWBOptionsMenuItem || tldrawMenu) {
         if (tldrawMenu) {
           mouseLeaveTimeoutRef.current = setTimeout(() => {
@@ -162,6 +195,8 @@ const useMouseEvents = ({
               'fade-out',
               animations ? '3s' : '0s',
               hasWBAccess || isPresenterRef.current,
+              isPresentationDetached,
+              popupWindow,
             );
           }
         } else {
@@ -170,6 +205,8 @@ const useMouseEvents = ({
             'fade-out',
             animations ? '3s' : '0s',
             hasWBAccess || isPresenterRef.current,
+            isPresentationDetached,
+            popupWindow,
           );
         }
       }
@@ -288,6 +325,8 @@ const useMouseEvents = ({
         'fade-out',
         animations ? '3s' : '0s',
         hasWBAccess || isPresenterRef.current,
+        isPresentationDetached,
+        popupWindow,
       );
     } else {
       toggleToolsAnimations(
@@ -295,13 +334,31 @@ const useMouseEvents = ({
         'fade-in',
         animations ? '.3s' : '0s',
         hasWBAccess || isPresenterRef.current,
+        isPresentationDetached,
+        popupWindow,
       );
     }
   }, [whiteboardToolbarAutoHide]);
 
   React.useEffect(() => {
-    const presentationWrapper = document.getElementById('presentationInnerWrapper');
-    window.addEventListener('mousedown', handleMouseDownWindow);
+    const presentationWrapper = isPresentationDetached ?
+      popupWindow.document.getElementById('presentationInnerWrapper') :
+      document.getElementById('presentationInnerWrapper');
+    if (isPresentationDetached) {
+      popupWindow.addEventListener('mousedown', handleMouseDownWindow);
+    } else {
+      window.addEventListener('mousedown', handleMouseDownWindow);
+    }
+
+    // Solving a problem that the style changer on the popup continues to select every button
+    //  as pointerup event is stolen by the main window to which tldraw attaches the event.
+    if (isPresentationDetached) {
+      const stylePanelPopup = popupWindow.document.getElementsByClassName('tlui-style-panel')[0];
+      if (stylePanelPopup) {
+        stylePanelPopup.addEventListener('pointerdown', handlePointerDownStylePanel);
+      }
+    }
+
     if (presentationWrapper) {
       presentationWrapper.addEventListener('mousedown', handleMouseDownWhiteboard);
       presentationWrapper.addEventListener('mouseup', handleMouseUp);
@@ -324,7 +381,11 @@ const useMouseEvents = ({
         presentationWrapper.removeEventListener('touchend', handleTouchEnd);
         presentationWrapper.removeEventListener('touchmove', handleTouchMove);
       }
-      window.removeEventListener('mousedown', handleMouseDownWindow);
+      if (isPresentationDetached) {
+        popupWindow.removeEventListener('mousedown', handleMouseDownWindow);
+      } else {
+        window.removeEventListener('mousedown', handleMouseDownWindow);
+      }
     };
   }, [
     tlEditorRef,
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/service.js b/bigbluebutton-html5/imports/ui/components/whiteboard/service.js
index 9bc611a671bf..27299dd513d6 100755
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/service.js
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/service.js
@@ -120,9 +120,11 @@ const notifyShapeNumberExceeded = (intl, limit) => {
   if (intl) notify(intl.formatMessage(intlMessages.shapeNumberExceeded, { limit }), 'warning', 'whiteboard');
 };
 
-const toggleToolsAnimations = (activeAnim, anim, time, hasWBAccess = false) => {
+const toggleToolsAnimations = (activeAnim, anim, time, hasWBAccess = false, isDetached, p) => {
   const handleOptionsDropdown = () => {
-    const optionsDropdown = document.getElementById('WhiteboardOptionButton');
+    const optionsDropdown = isDetached ?
+      p.document.getElementById('WhiteboardOptionButton') :
+      document.getElementById('WhiteboardOptionButton');
     if (optionsDropdown) {
       optionsDropdown.classList.remove(activeAnim);
       optionsDropdown.style.transition = `opacity ${time} ease-in-out`;
@@ -135,7 +137,9 @@ const toggleToolsAnimations = (activeAnim, anim, time, hasWBAccess = false) => {
   }
 
   const checkElementsAndRun = () => {
-    const tlEls = document.querySelectorAll('.tlui-menu-zone, .tlui-toolbar__tools, .tlui-toolbar__extras, .tlui-style-panel__wrapper, .tlui-undo, .tlui-redo');
+    const tlEls = isDetached ?
+      p.document.querySelectorAll('.tlui-menu-zone, .tlui-toolbar__tools, .tlui-toolbar__extras, .tlui-style-panel__wrapper, .tlui-undo, .tlui-redo') :
+      document.querySelectorAll('.tlui-menu-zone, .tlui-toolbar__tools, .tlui-toolbar__extras, .tlui-style-panel__wrapper, .tlui-undo, .tlui-redo');
     if (tlEls.length) {
       tlEls?.forEach((el) => {
         el.classList.remove(activeAnim);
diff --git a/bigbluebutton-html5/imports/ui/services/features/index.js b/bigbluebutton-html5/imports/ui/services/features/index.js
index 58ff2a4394c3..ce744db979fe 100644
--- a/bigbluebutton-html5/imports/ui/services/features/index.js
+++ b/bigbluebutton-html5/imports/ui/services/features/index.js
@@ -76,6 +76,10 @@ export function useIsSnapshotOfCurrentSlideEnabled() {
   return useDisabledFeatures().indexOf('snapshotOfCurrentSlide') === -1 && window.meetingClientSettings.public.presentation.allowSnapshotOfCurrentSlide;
 }
 
+export function useIsPopupPresentationEnabled() {
+  return useDisabledFeatures().indexOf('popupPresentation') === -1 && window.meetingClientSettings.public.presentation.allowPopupPresentation;
+}
+
 export function useIsImportPresentationWithAnnotationsFromBreakoutRoomsEnabled() {
   return useDisabledFeatures().indexOf('importPresentationWithAnnotationsFromBreakoutRooms') === -1;
 }
diff --git a/bigbluebutton-html5/imports/utils/HTMLElementBackup.ts b/bigbluebutton-html5/imports/utils/HTMLElementBackup.ts
new file mode 100644
index 000000000000..62e6e5ec9bf2
--- /dev/null
+++ b/bigbluebutton-html5/imports/utils/HTMLElementBackup.ts
@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export const originalHTMLElement: typeof HTMLElement = window.HTMLElement;
diff --git a/bigbluebutton-html5/imports/utils/animationFrameBackup.js b/bigbluebutton-html5/imports/utils/animationFrameBackup.js
new file mode 100644
index 000000000000..6abc1aec33ed
--- /dev/null
+++ b/bigbluebutton-html5/imports/utils/animationFrameBackup.js
@@ -0,0 +1,2 @@
+export const originalRAF = window.requestAnimationFrame.bind(window);
+export const originalCAF = window.cancelAnimationFrame.bind(window);
diff --git a/bigbluebutton-html5/private/config/settings.yml b/bigbluebutton-html5/private/config/settings.yml
index 5c661ce1c27c..189c7edcec73 100755
--- a/bigbluebutton-html5/private/config/settings.yml
+++ b/bigbluebutton-html5/private/config/settings.yml
@@ -991,6 +991,7 @@ public:
     allowDownloadOriginal: true
     allowDownloadWithAnnotations: true
     allowSnapshotOfCurrentSlide: true
+    allowPopupPresentation: false
     panZoomThrottle: 32
     restoreOnUpdate: true
     uploadEndpoint: '/bigbluebutton/presentation/upload'
diff --git a/bigbluebutton-html5/public/locales/en.json b/bigbluebutton-html5/public/locales/en.json
index 52d63b7a4b9a..d5fa2b102062 100755
--- a/bigbluebutton-html5/public/locales/en.json
+++ b/bigbluebutton-html5/public/locales/en.json
@@ -273,6 +273,8 @@
     "app.presentation.options.downloading": "Downloading...",
     "app.presentation.options.downloaded": "The current presentation has been downloaded",
     "app.presentation.options.downloadFailed": "Could not download current presentation",
+    "app.presentation.options.detachPopup": "Popup presentation",
+    "app.presentation.options.mergePopup": "Merge presentation popup",
     "app.presentation.presentationToolbar.noNextSlideDesc": "End of presentation",
     "app.presentation.presentationToolbar.noPrevSlideDesc": "Start of presentation",
     "app.presentation.presentationToolbar.selectLabel": "Select slide",