diff --git a/bbb-graphql-server/bbb_schema.sql b/bbb-graphql-server/bbb_schema.sql
index 6eedd8f1163a..3a2450a4b616 100644
--- a/bbb-graphql-server/bbb_schema.sql
+++ b/bbb-graphql-server/bbb_schema.sql
@@ -1685,7 +1685,10 @@ SELECT pres_presentation."meetingId",
     pres_page."infiniteWhiteboard",
     pres_page."fitToWidth",
     (
-        select array_agg("nextPages"."urlsJson"->>'svg')
+		select array_agg(
+			"nextPages"."urlsJson"->>'svg'
+			ORDER BY "nextPages".num
+		)
         from pres_page "nextPages"
         where "nextPages"."presentationId" = pres_page."presentationId"
         and "nextPages".num > pres_page."num"
diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
index 0fe1ae5a29a2..e411fc54043a 100755
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx
@@ -159,6 +159,7 @@ class ActionsBar extends PureComponent {
       showScreenshareQuickSwapButton,
       isReactionsButtonEnabled,
       isRaiseHandEnabled,
+      isPresentationDetached,
     } = this.props;
 
     const Settings = getSettingsSingletonInstance();
@@ -256,6 +257,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 737fb24d568d..a6dd5b31ffe4 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
@@ -45,6 +45,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 f657190f4a23..87739ccf4950 100644
--- a/bigbluebutton-html5/imports/ui/components/app/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx
@@ -285,6 +285,7 @@ class App extends Component {
     const {
       hideActionsBar,
       presentationIsOpen,
+      isPresentationDetached,
     } = this.props;
 
     if (hideActionsBar) return null;
@@ -293,6 +294,7 @@ class App extends Component {
       <ActionsBarContainer
         presentationIsOpen={presentationIsOpen}
         setPresentationFitToWidth={this.setPresentationFitToWidth}
+        isPresentationDetached={isPresentationDetached}
       />
     );
   }
@@ -337,6 +339,9 @@ class App extends Component {
       isNotificationEnabled,
       isNonMediaLayout,
       isRaiseHandEnabled,
+      popupWindow,
+      isPresentationDetached,
+      toggleDetachPresentation,
       currentUserHasVoice,
     } = this.props;
 
@@ -388,6 +393,9 @@ class App extends Component {
                 fitToWidth={presentationFitToWidth}
                 darkTheme={darkTheme}
                 presentationIsOpen={presentationIsOpen}
+                popupWindow={popupWindow}
+                isPresentationDetached={isPresentationDetached}
+                toggleDetachPresentation={toggleDetachPresentation}
               />
             )
             : null
diff --git a/bigbluebutton-html5/imports/ui/components/app/container.jsx b/bigbluebutton-html5/imports/ui/components/app/container.jsx
index 98c847692d8a..82c8020b0117 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';
@@ -122,9 +122,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 ?? '';
@@ -179,6 +194,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 3deed616255d..f9199fd8f136 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
@@ -38,6 +38,8 @@ import { CHAT_DELETE_REACTION_MUTATION, CHAT_SEND_REACTION_MUTATION } from './pa
 import logger from '/imports/startup/client/logger';
 import { ChatLoading } from '../component';
 import Storage from '/imports/ui/services/storage/in-memory';
+import { originalHTMLElement } from '/imports/utils/HTMLElementBackup';
+import { originalRAF } from '/imports/utils/animationFrameBackup';
 
 const PAGE_SIZE = 50;
 const CLEANUP_TIMEOUT = 3000;
@@ -69,7 +71,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> => {
@@ -439,7 +441,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);
@@ -456,10 +458,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(() => {
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 a186e919b472..0542694ee40c 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
@@ -54,6 +54,7 @@ import { isMobile } from '/imports/utils/deviceInfo';
 import { layoutSelect } from '/imports/ui/components/layout/context';
 import { Layout } from '/imports/ui/components/layout/layoutTypes';
 import { useModalRegistration } from '/imports/ui/core/singletons/modalController';
+import { originalRAF, originalCAF } from '/imports/utils/animationFrameBackup';
 
 interface ChatMessageProps {
   message: Message;
@@ -247,7 +248,7 @@ const ChatMessage = React.forwardRef<ChatMessageRef, ChatMessageProps>(({
   useImperativeHandle(ref, () => ({
     requestFocus() {
       setTimeout(() => {
-        requestAnimationFrame(startScrollAnimation);
+        originalRAF(startScrollAnimation);
       }, 0);
     },
     sequence: message.messageSequence,
@@ -255,20 +256,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) => {
@@ -280,10 +281,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);
     }
   };
 
@@ -292,7 +293,7 @@ const ChatMessage = React.forwardRef<ChatMessageRef, ChatMessageProps>(({
     const value = (timestamp - animationInitialTimestamp.current) / ANIMATION_DURATION;
     if (value < 1) {
       chatMessageContentWrapperRef.current.style.backgroundColor = `rgb(${colorBlueLighterChannel} / ${1 - value})`;
-      requestAnimationFrame(animateBackgroundColor);
+      originalRAF(animateBackgroundColor);
     } else {
       chatMessageContentWrapperRef.current.style.backgroundColor = animationInitialBgColor.current;
     }
@@ -323,7 +324,7 @@ const ChatMessage = React.forwardRef<ChatMessageRef, ChatMessageProps>(({
     },
   ) => {
     if (currentFrame < stabilityFrames) {
-      const frameId = requestAnimationFrame(() => {
+      const frameId = originalRAF(() => {
         pollScrollEndEvent(setFrameId, {
           stabilityFrames,
           currentFrame: currentFrame + 1,
@@ -340,10 +341,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;
       });
@@ -364,7 +365,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 91cc6a564f56..72a23a287f71 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/presentation/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/component.jsx
index 9337a7c6145e..bdbb1fcbf7f0 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: {
@@ -47,6 +51,26 @@ const intlMessages = defineMessages({
     id: 'app.presentation.emptySlideContent',
     description: 'No content available for slide',
   },
+  currentSlide: {
+    id: 'app.presentation.currentSlide',
+    description: 'Label for current slide',
+  },
+  nextSlide: {
+    id: 'app.presentation.nextSlide',
+    description: 'Label for next slide',
+  },
+  noCurrentSlide: {
+    id: 'app.presentation.noCurrentSlide',
+    description: 'Message shown when current slide is unavailable',
+  },
+  noNextSlide: {
+    id: 'app.presentation.noNextSlide',
+    description: 'Message shown when next slide is unavailable',
+  },
+  noNotes: {
+    id: 'app.presentation.noNotes',
+    description: 'Message shown when slide notes are unavailable',
+  },
   presentationHeader: {
     id: 'playback.player.presentation.wrapper.aria',
     description: 'Aria label for header navigation',
@@ -58,9 +82,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;
@@ -68,6 +92,101 @@ const getToolbarHeight = () => {
   return height;
 };
 
+const getStyleSheetCssText = (style) => {
+  try {
+    const rules = Array.from(style.sheet?.cssRules ?? []);
+
+    if (rules.length > 0) {
+      return rules.map((rule) => rule.cssText).join('\n');
+    }
+  } catch (error) {
+    console.warn(
+      'Failed to read a DarkReader CSS rule for the presentation popup',
+      error,
+    );
+  }
+
+  return style.textContent || '';
+};
+
+const syncDarkReaderStylesToPopup = (sourceDocument, targetDocument) => {
+  // Remove the previous DarkReader styles from the popup.
+  targetDocument
+    .querySelectorAll(
+      'style.darkreader, style[data-popup-darkreader-mirror]',
+    )
+    .forEach((style) => style.remove());
+
+  // Synchronize DarkReader attributes on <html>.
+  Array.from(targetDocument.documentElement.attributes)
+    .filter((attr) => attr.name.startsWith('data-darkreader'))
+    .forEach((attr) => {
+      targetDocument.documentElement.removeAttribute(attr.name);
+    });
+
+  Array.from(sourceDocument.documentElement.attributes)
+    .filter((attr) => attr.name.startsWith('data-darkreader'))
+    .forEach((attr) => {
+      targetDocument.documentElement.setAttribute(
+        attr.name,
+        attr.value,
+      );
+    });
+
+  const darkReaderStyles = Array.from(
+    sourceDocument.querySelectorAll('style.darkreader'),
+  );
+
+  // DarkReader is disabled.
+  if (darkReaderStyles.length === 0) return;
+
+  const syncStyles = darkReaderStyles.filter(
+    (style) => style.classList.contains('darkreader--sync'),
+  );
+
+  const nonSyncStyles = darkReaderStyles.filter(
+    (style) => !style.classList.contains('darkreader--sync'),
+  );
+
+  // Copy the non-sync DarkReader styles.
+  nonSyncStyles.forEach((sourceStyle) => {
+      const targetStyle = targetDocument.createElement('style');
+
+      Array.from(sourceStyle.attributes).forEach((attr) => {
+        targetStyle.setAttribute(attr.name, attr.value);
+      });
+
+      targetStyle.textContent = getStyleSheetCssText(sourceStyle);
+
+      targetDocument.head.appendChild(targetStyle);
+    });
+
+  // Collect all darkreader--sync rules into one stylesheet.
+  const syncCssText = syncStyles
+    .flatMap((style) => {
+      try {
+        return Array.from(style.sheet?.cssRules ?? [])
+          .map((rule) => rule.cssText);
+      } catch (error) {
+        console.warn(
+          'Failed to read a DarkReader sync rule for the presentation popup',
+          error,
+        );
+        return [];
+      }
+    })
+    .join('\n');
+
+  if (syncCssText === '') return;
+
+  const mirror = targetDocument.createElement('style');
+  mirror.setAttribute('data-popup-darkreader-mirror', '');
+  mirror.textContent = syncCssText;
+
+  // Keep DarkReader overrides at the end of <head>.
+  targetDocument.head.appendChild(mirror);
+};
+
 const IGNORE_PRESENTATION_RESTORATION_TIMEOUT = 5000;
 
 class Presentation extends PureComponent {
@@ -85,6 +204,9 @@ class Presentation extends PureComponent {
       isToolbarVisible: true,
       hadPresentation: false,
       ignorePresentationRestoring: true,
+      currentSlideNote: '',
+      presenterView: null,
+      presenterAnnotations: null,
     };
 
     const PAN_ZOOM_INTERV = window.meetingClientSettings.public.presentation.panZoomInterval || 200;
@@ -102,10 +224,16 @@ 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);
     this.setTldrawIsMounting = this.setTldrawIsMounting.bind(this);
+    this.loadCurrentSlideNote = this.loadCurrentSlideNote.bind(this);
+    this.handlePresentationNotesUpdated = this.handlePresentationNotesUpdated.bind(this);
+    this.handlePresenterViewChange = this.handlePresenterViewChange.bind(this);
+    this.presenterAnnotationsObjectUrl = null;
     Session.setItem('componentPresentationWillUnmount', false);
   }
 
@@ -195,6 +323,13 @@ class Presentation extends PureComponent {
       });
     }
 
+    window.addEventListener(
+      'presentationNotesUpdated',
+      this.handlePresentationNotesUpdated,
+    );
+
+    this.loadCurrentSlideNote();
+
     setTimeout(() => {
       this.setState({ ignorePresentationRestoring: false });
     }, IGNORE_PRESENTATION_RESTORATION_TIMEOUT);
@@ -209,6 +344,7 @@ class Presentation extends PureComponent {
       restoreOnUpdate,
       layoutContextDispatch,
       userIsPresenter,
+      isPresentationDetached,
       presentationBounds,
       numCameras,
       intl,
@@ -232,7 +368,38 @@ class Presentation extends PureComponent {
       presentationBounds: prevPresentationBounds,
     } = prevProps;
 
-    if (numCameras !== prevNumCameras) {
+    const presenterRoleLost = (
+      prevProps.userIsPresenter
+      && !userIsPresenter
+    );
+
+    const presenterToolClosed = (
+      prevProps.isPresentationDetached
+      && !isPresentationDetached
+    );
+
+    const presenterToolOpened = (
+      !prevProps.isPresentationDetached
+      && isPresentationDetached
+    );
+
+    const presenterAnnotationSlideChanged = (
+      prevProps.currentSlide?.id !== currentSlide?.id
+      || prevProps.currentPresentationId !== currentPresentationId
+    );
+
+    if (
+      presenterToolClosed
+      || presenterAnnotationSlideChanged
+    ) {
+      this.clearPresenterAnnotations();
+    }
+
+    if (presenterToolClosed) {
+      this.setState({ currentSlideNote: '' });
+    }
+
+    if (numCameras !== prevNumCameras && !isPresentationDetached) {
       this.onResize();
     }
 
@@ -316,23 +483,50 @@ class Presentation extends PureComponent {
       });
     }
 
+    if (presenterRoleLost && isPresentationDetached) {
+      this.detachPresentation();
+    }
+
     if (
       (zoom <= HUNDRED_PERCENT && isPanning && !fitToWidth)
-      || (!userIsPresenter && prevProps.userIsPresenter)
+      || presenterRoleLost
     ) {
       this.setIsPanning();
     }
 
-    if (!userIsPresenter && prevProps.userIsPresenter && fitToWidth) {
+    if (presenterRoleLost && fitToWidth) {
       setPresentationFitToWidth(false);
     }
+
+    const slideChanged = (
+      currentSlide?.svgUri !== prevProps.currentSlide?.svgUri
+    );
+
+    if (
+      presenterToolOpened
+      || (isPresentationDetached && slideChanged)
+    ) {
+      this.loadCurrentSlideNote();
+    }
   }
 
   componentWillUnmount() {
     Session.setItem('componentPresentationWillUnmount', true);
-    const { fullscreenContext, layoutContextDispatch } = this.props;
+    const {
+      fullscreenContext,
+      layoutContextDispatch,
+      isPresentationDetached,
+      popupWindow,
+    } = this.props;
+
+    const targetWin = isPresentationDetached && popupWindow ? popupWindow : window;
+    targetWin.removeEventListener('resize', this.onResize, false);
+
+    window.removeEventListener(
+      'presentationNotesUpdated',
+      this.handlePresentationNotesUpdated,
+    );
 
-    window.removeEventListener('resize', this.onResize, false);
     if (this.refPresentationContainer) {
       this.refPresentationContainer.removeEventListener(
         FULLSCREEN_CHANGE_EVENT,
@@ -348,6 +542,11 @@ class Presentation extends PureComponent {
       );
     }
 
+    if (this.presenterAnnotationsObjectUrl) {
+      URL.revokeObjectURL(this.presenterAnnotationsObjectUrl);
+      this.presenterAnnotationsObjectUrl = null;
+    }
+
     if (fullscreenContext) {
       layoutContextDispatch({
         type: ACTIONS.SET_FULLSCREEN_ELEMENT,
@@ -359,6 +558,306 @@ class Presentation extends PureComponent {
     }
   }
 
+  detachPresentation() {
+    const {
+      slidePosition,
+      isPresentationDetached,
+      popupWindow,
+      toggleDetachPresentation,
+    } = 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';
+      // unnecessary div
+      //const container = popup.document.createElement('div');
+      //popup.document.body.appendChild(container);
+
+      // 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('lang');
+      //}
+      // Copy all attributes (<html> extensions including DarkReader, which may not work anyway)
+      for (const attr of mainHtml.attributes) {
+        popupHtml.setAttribute(attr.name, attr.value);
+      }
+
+      // 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());
+
+      // (26.3.10) After deployment, the production mode app shows the presentation in a wrong place (much lower than usual).
+      // When the presentation is rendered in a separate popup window using a React Portal, some styles generated
+      //  by Emotion (used by Material UI) are not automatically applied in the popup document.
+      // In development mode, Emotion often injects CSS rules directly as text nodes inside 
+      //  `<style data-emotion>` elements, so cloning these elements works as expected. 
+      // However, in the production build, Emotion frequently inserts styles using the CSSOM API (`insertRule`). 
+      // In this case the `<style>` elements appear empty in the DOM, and simply cloning them does not copy the actual CSS rules.
+      // As a result, essential styles (for example the `position: fixed` rule used by MUI modal/popover components) 
+      //  are missing in the popup window, which causes layout issues such as the presentation being vertically shifted.
+      // The solution is to explicitly copy the CSS rules from the Emotion stylesheets (`style.sheet.cssRules`)
+      //  into new `<style>` elements in the popup document, ensuring that the popup window receives the same 
+      //  computed styles as the main document.
+      document.querySelectorAll('style[data-emotion]').forEach((style) => {
+        if (style.textContent.trim() !== '') return; // dev mode already has CSS
+        const sheet = style.sheet;
+        if (!sheet) return;
+        const newStyle = popup.document.createElement('style');
+        popup.document.head.appendChild(newStyle);
+        const newSheet = newStyle.sheet;
+        if (!newSheet) return;
+        Array.from(sheet.cssRules).forEach((rule) => {
+          try {
+            newSheet.insertRule(rule.cssText);
+          } catch (error) {
+            console.warn(
+              'Failed to copy an Emotion CSS rule to the presentation popup',
+              error,
+            );
+          }
+        });
+      });
+
+      // 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);
+      }
+
+      syncDarkReaderStylesToPopup(document, popup.document);
+      
+      toggleDetachPresentation(popup);
+
+      const closePopup = () => {
+        if (popup && !popup.closed) popup.close();
+      };
+
+      const handleDarkModeChange = () => {
+        window.requestAnimationFrame(() => {
+          if (popup.closed) return;
+
+          syncDarkReaderStylesToPopup(
+            document,
+            popup.document,
+          );
+        });
+      };
+
+      const handlePopupBeforeUnload = () => {
+        window.removeEventListener('beforeunload', closePopup);
+        window.removeEventListener('darkmodechange', handleDarkModeChange);
+
+        window.requestAnimationFrame = originalRAF;
+        window.cancelAnimationFrame = originalCAF;
+
+        toggleDetachPresentation(null);
+      };
+
+      window.addEventListener('beforeunload', closePopup);
+
+      popup.addEventListener(
+        'beforeunload',
+        handlePopupBeforeUnload,
+      );
+
+      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();
+      });
+
+      window.addEventListener( 'darkmodechange',
+        handleDarkModeChange,
+      );
+    } 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 +874,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 +920,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 });
     }
@@ -557,6 +1097,146 @@ class Presentation extends PureComponent {
     zoomSlide(w, h, x, y);
   }
 
+  async loadCurrentSlideNote() {
+    const { currentSlide, isPresentationDetached } = this.props;
+
+    if (!isPresentationDetached || !currentSlide?.noteUri) {
+      this.setState({ currentSlideNote: '' });
+      return;
+    }
+
+    try {
+      const response = await fetch(currentSlide.noteUri, {
+        cache: 'no-store',
+      });
+
+      if (!response.ok) {
+        if (response.status === 404) {
+          console.info(
+            'Slide note is not available yet. Ignore the 404 error above.',
+          );
+        } else {
+          console.error(
+            `Failed to load slide note: HTTP ${response.status}`,
+          );
+        }
+        this.setState({ currentSlideNote: '' });
+        return;
+      }
+
+      const text = await response.text();
+
+      this.setState({
+        currentSlideNote: text.trim(),
+      });
+    } catch (e) {
+      console.error('Failed to load slide note', e);
+      this.setState({ currentSlideNote: '' });
+    }
+  }
+
+  handlePresentationNotesUpdated(event) {
+    const { currentSlide } = this.props;
+    const updatedPresentationId = event.detail?.presentationId;
+
+    if (updatedPresentationId !== currentSlide?.presentationId) return;
+
+    this.loadCurrentSlideNote();
+  }
+
+  handlePresenterViewChange(presenterView) {
+    const currentPageNum = this.props.currentSlide?.num;
+    if (
+      presenterView
+      && Number(presenterView.pageId) !== Number(currentPageNum)
+    ) {
+      return;
+    }
+    this.setState({
+      presenterView,
+    });
+  }
+
+  clearPresenterAnnotations = () => {
+    const previousObjectUrl =
+      this.presenterAnnotationsObjectUrl;
+
+    this.presenterAnnotationsObjectUrl = null;
+
+    if (!this.state.presenterAnnotations) {
+      if (previousObjectUrl) {
+        URL.revokeObjectURL(previousObjectUrl);
+      }
+      return;
+    }
+
+    this.setState(
+      {
+        presenterAnnotations: null,
+      },
+      () => {
+        if (previousObjectUrl) {
+          URL.revokeObjectURL(previousObjectUrl);
+        }
+      },
+    );
+  };
+
+  handlePresenterAnnotationsChange = ({
+    presentationId,
+    pageId,
+    svgMarkup,
+  }) => {
+    const { currentSlide } = this.props;
+
+    // Ignore an asynchronous result belonging to an old slide.
+    if (
+      !currentSlide
+      || Number(pageId) !== Number(currentSlide.num)
+      || (
+        presentationId
+        && currentSlide.presentationId
+        && presentationId !== currentSlide.presentationId
+      )
+    ) {
+      return;
+    }
+
+    if (!svgMarkup) {
+      this.clearPresenterAnnotations();
+      return;
+    }
+
+    const svgBlob = new Blob(
+      [svgMarkup],
+      { type: 'image/svg+xml;charset=utf-8' },
+    );
+
+    const nextObjectUrl = URL.createObjectURL(svgBlob);
+    const previousObjectUrl =
+      this.presenterAnnotationsObjectUrl;
+
+    this.presenterAnnotationsObjectUrl = nextObjectUrl;
+
+    this.setState(
+      {
+        presenterAnnotations: {
+          presentationId,
+          pageId,
+          objectUrl: nextObjectUrl,
+        },
+      },
+      () => {
+        if (
+          previousObjectUrl
+          && previousObjectUrl !== nextObjectUrl
+        ) {
+          URL.revokeObjectURL(previousObjectUrl);
+        }
+      },
+    );
+  };
+
   renderPresentationToolbar(svgWidth = 0) {
     const {
       currentSlide,
@@ -577,6 +1257,8 @@ class Presentation extends PureComponent {
       userIsPresenter,
       hasPoll,
       currentPresentationPage,
+      isPresentationDetached,
+      popupWindow,
     } = this.props;
     const { zoom, isPanning, tldrawAPI } = this.state;
 
@@ -621,6 +1303,8 @@ class Presentation extends PureComponent {
         numberOfSlides={totalPages}
         layoutSwapped={false}
         hasPoll={hasPoll}
+        isPresentationDetached={isPresentationDetached}
+        popupWindow={popupWindow}
       />
     );
   }
@@ -650,6 +1334,8 @@ class Presentation extends PureComponent {
       userIsPresenter,
       currentSlide,
       currentUser,
+      isPresentationDetached,
+      popupWindow,
     } = this.props;
     const { tldrawAPI, isToolbarVisible } = this.state;
 
@@ -666,11 +1352,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,
@@ -693,6 +1382,8 @@ class Presentation extends PureComponent {
       initialPageAnnotations,
       refetchInitialPageAnnotations,
       restoreOnUpdate,
+      isPresentationDetached,
+      popupWindow,
     } = this.props;
 
     const {
@@ -729,7 +1420,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;
 
@@ -771,11 +1462,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,
@@ -847,8 +1541,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}
@@ -868,6 +1566,10 @@ class Presentation extends PureComponent {
                     initialPageAnnotations={initialPageAnnotations}
                     refetchInitialPageAnnotations={refetchInitialPageAnnotations}
                     restoreOnUpdate={restoreOnUpdate}
+                    isPresentationDetached={isPresentationDetached}
+                    popupWindow={popupWindow}
+                    onPresenterViewChange={this.handlePresenterViewChange}
+                    onPresenterAnnotationsChange={this.handlePresenterAnnotationsChange}
                   />
                 </LocatedErrorBoundary>
                 {isFullscreen && <PollingContainer />}
@@ -880,6 +1582,7 @@ class Presentation extends PureComponent {
                   style={{
                     width: containerWidth,
                   }}
+                  isPresentationDetached={isPresentationDetached}
                 >
                   {this.renderPresentationToolbar(svgWidth)}
                 </Styled.PresentationToolbar>
@@ -890,6 +1593,224 @@ class Presentation extends PureComponent {
       </>
     );
   }
+
+  renderPresenterTool() {
+    const {
+      currentSlide,
+      nextSlide,
+      presentationBounds,
+      intl,
+    } = this.props;
+
+    const {
+      currentSlideNote,
+      presenterView,
+      presenterAnnotations,
+    } = this.state;
+
+    if (
+      !presentationBounds
+      || presentationBounds.width === 0
+      || presentationBounds.height === 0
+    ) {
+      return null;
+    }
+
+    if (!currentSlide && !nextSlide) return null;
+
+    const hasNote = !!currentSlideNote;
+
+    const renderSlideImage = (
+      slide,
+      labelMessage,
+      emptyMessage,
+      reflectPresenterView = false,
+    ) => {
+      if (!slide) {
+        return (
+          <Styled.PresenterToolEmptySlide>
+            {intl.formatMessage(emptyMessage)}
+          </Styled.PresenterToolEmptySlide>
+        );
+      }
+
+      const label = intl.formatMessage(labelMessage);
+
+      const presenterViewMatchesSlide = (
+        reflectPresenterView
+        && presenterView
+        && Number(presenterView.pageId) === Number(slide.num)
+        && (
+          !presenterView.presentationId
+          || presenterView.presentationId === slide.presentationId
+        )
+      );
+
+      const annotationsMatchSlide = (
+        reflectPresenterView
+        && presenterAnnotations?.objectUrl
+        && Number(presenterAnnotations.pageId) === Number(slide.num)
+        && (
+          !presenterAnnotations.presentationId
+          || presenterAnnotations.presentationId === slide.presentationId
+        )
+      );
+
+      return (
+        <Styled.PresenterToolSlideFrame>
+          <Styled.PresenterToolSlideLabel>
+            {label}
+          </Styled.PresenterToolSlideLabel>
+
+          <Styled.PresenterToolSlideContent>
+            {presenterViewMatchesSlide ? (
+              <Styled.PresenterToolSlideViewport
+                $aspectRatio={presenterView.viewportAspectRatio}
+              >
+                <Styled.PresenterToolTransformedSlideLayer
+                  $leftRatio={presenterView.slide.leftRatio}
+                  $topRatio={presenterView.slide.topRatio}
+                  $widthRatio={presenterView.slide.widthRatio}
+                  $heightRatio={presenterView.slide.heightRatio}
+                >
+                  <Styled.PresenterToolTransformedSlide
+                    src={slide.svgUri}
+                    alt={`${label} ${slide.num || ''}`}
+                  />
+
+                  {annotationsMatchSlide && (
+                    <Styled.PresenterToolAnnotationsOverlay
+                      src={presenterAnnotations.objectUrl}
+                      alt=""
+                      aria-hidden="true"
+                    />
+                  )}
+                </Styled.PresenterToolTransformedSlideLayer>
+
+                {presenterView.cursor.visible && (
+                  <Styled.PresenterToolCursorDot
+                    $leftRatio={presenterView.cursor.leftRatio}
+                    $topRatio={presenterView.cursor.topRatio}
+                  />
+                )}
+              </Styled.PresenterToolSlideViewport>
+            ) : (
+              <Styled.PresenterToolSlideImage
+                src={slide.svgUri}
+                alt={`${label} ${slide.num || ''}`}
+                $compact={!reflectPresenterView}
+              />
+            )}
+          </Styled.PresenterToolSlideContent>
+        </Styled.PresenterToolSlideFrame>
+      );
+    };
+
+    return (
+      <Styled.PresenterToolContainer
+        style={{
+          top: presentationBounds.top,
+          left: presentationBounds.left,
+          width: presentationBounds.width,
+          height: presentationBounds.height,
+        }}
+      >
+        <Styled.PresenterToolSlidesResizable
+          defaultSize={{
+            width: '50%',
+            height: '100%',
+          }}
+          minWidth="20%"
+          maxWidth="80%"
+          enable={{
+            top: false,
+            right: true,
+            bottom: false,
+            left: false,
+            topRight: false,
+            bottomRight: false,
+            bottomLeft: false,
+            topLeft: false,
+          }}
+          handleComponent={{
+            right: <Styled.PresenterToolResizeHandle />,
+          }}
+        >
+          <Styled.PresenterToolSlidesColumn>
+            <Styled.PresenterToolCurrentSlideResizable
+              defaultSize={{
+                width: '100%',
+                height: '60%',
+              }}
+              minHeight="20%"
+              maxHeight="85%"
+              enable={{
+                top: false,
+                right: false,
+                bottom: true,
+                left: false,
+                topRight: false,
+                bottomRight: false,
+                bottomLeft: false,
+                topLeft: false,
+              }}
+            >
+              <Styled.PresenterToolSlidePane
+                $withBorder
+              >
+                {renderSlideImage(
+                  currentSlide,
+                  intlMessages.currentSlide,
+                  intlMessages.noCurrentSlide,
+                  true,
+                )}
+              </Styled.PresenterToolSlidePane>
+            </Styled.PresenterToolCurrentSlideResizable>
+
+            <Styled.PresenterToolSlidePane>
+              {renderSlideImage(
+                nextSlide,
+                intlMessages.nextSlide,
+                intlMessages.noNextSlide,
+              )}
+            </Styled.PresenterToolSlidePane>
+          </Styled.PresenterToolSlidesColumn>
+        </Styled.PresenterToolSlidesResizable>
+
+        <Styled.PresenterToolNotesPanel>
+          {hasNote ? currentSlideNote : intl.formatMessage(intlMessages.noNotes)}
+        </Styled.PresenterToolNotesPanel>
+      </Styled.PresenterToolContainer>
+    );
+  }
+
+  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
+          )}
+          {this.renderPresenterTool()}
+        </>
+      );
+    }
+    return presentationContent;
+  }
 }
 
 export default injectIntl(Presentation);
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/container.jsx b/bigbluebutton-html5/imports/ui/components/presentation/container.jsx
index 99739aae559f..067ed5b6a64e 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/container.jsx
@@ -44,6 +44,12 @@ const PresentationContainer = (props) => {
 
   const { pres_page_curr: presentationPageArray } = (presentationPageData || {});
   const currentPresentationPage = presentationPageArray?.[0];
+  const nextPresentationPage =
+     currentPresentationPage?.nextPagesSvg?.length > 0
+      ? {
+          svgUrl: currentPresentationPage.nextPagesSvg[0],
+        }
+      : null;
   const slideSvgUrl = currentPresentationPage?.svgUrl
     ? Auth.authenticateURL(currentPresentationPage.svgUrl) : undefined;
   const currentPageId = currentPresentationPage?.pageId;
@@ -170,9 +176,22 @@ const PresentationContainer = (props) => {
     num: currentPresentationPage?.num,
     presentationId: currentPresentationPage?.presentationId,
     svgUri: slideSvgUrl,
+    noteUri: slideSvgUrl?.replace(
+      /\/svg\/(\d+)(\?.*)?$/,
+      '/notes/$1$2',
+    ),
     infiniteWhiteboard: currentPresentationPage.infiniteWhiteboard,
   } : null;
 
+  const nextSlide = nextPresentationPage
+    ? {
+        imageUri: Auth.authenticateURL(nextPresentationPage.svgUrl),
+        svgUri: Auth.authenticateURL(nextPresentationPage.svgUrl),
+        num: currentSlide ? currentSlide.num + 1 : undefined,
+        presentationId: currentSlide?.presentationId,
+      }
+    : null;
+
   let slidePosition;
   if (currentSlide) {
     const { presentationId } = currentSlide;
@@ -266,6 +285,7 @@ const PresentationContainer = (props) => {
           isMobile: deviceType === DEVICE_TYPE.MOBILE,
           isIphone,
           currentSlide,
+          nextSlide,
           slidePosition,
           hasWBAccess: currentUser?.whiteboardWriteAccess,
           downloadPresentationUri: currentPresentationPage?.downloadFileUri
@@ -288,6 +308,7 @@ const PresentationContainer = (props) => {
           presentationAreaSize,
           currentUser,
           currentPresentationPage,
+          nextPresentationPage,
           layoutType: selectedLayout || '',
           annotationStreamData,
           initialPageAnnotations,
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 8a91fde99595..8f88663d91d8 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/component.jsx
@@ -94,6 +94,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 = {
@@ -101,12 +111,14 @@ const propTypes = {
     formatMessage: PropTypes.func.isRequired,
   }).isRequired,
   allowSnapshotOfCurrentSlide: PropTypes.bool,
+  allowPopupPresentation: PropTypes.bool,
   handleToggleFullscreen: PropTypes.func.isRequired,
   isFullscreen: PropTypes.bool,
   elementName: PropTypes.string,
   fullscreenRef: PropTypes.instanceOf(Element),
   meetingName: PropTypes.string,
   isIphone: PropTypes.bool,
+  isMobile: PropTypes.bool,
   elementId: PropTypes.string,
   elementGroup: PropTypes.string,
   currentElement: PropTypes.string,
@@ -139,16 +151,20 @@ const PresentationMenu = (props) => {
     layoutContextDispatch,
     meetingName = '',
     isIphone = false,
+    isMobile = false,
     isRTL = Settings.application.isRTL,
     isToolbarVisible,
     setIsToolbarVisible,
     allowSnapshotOfCurrentSlide = false,
+    allowPopupPresentation = false,
     presentationDropdownItems,
     slideNum,
     currentUser,
     whiteboardId,
     persistShape,
     hasWBAccess,
+    popupWindow,
+    isPresentationDetached,
   } = props;
 
   const [state, setState] = useState({
@@ -304,6 +320,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;
 
@@ -412,7 +433,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;
 
@@ -512,6 +533,15 @@ const PresentationMenu = (props) => {
       );
     }
 
+    if (props.amIPresenter && allowPopupPresentation && !isMobile) {
+      menuItems.push({
+        key: 'list-item-detach-presentation',
+        label: formattedDetachedLabel(isPresentationDetached),
+        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 323057e1249b..4878e6964e71 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/container.jsx
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import PresentationMenu from './component';
 import FullscreenService from '/imports/ui/components/common/fullscreen-button/service';
 import { layoutSelect, layoutDispatch } from '/imports/ui/components/layout/context';
-import { useIsSnapshotOfCurrentSlideEnabled } from '/imports/ui/services/features';
+import deviceInfo from '/imports/utils/deviceInfo';
+import { useIsSnapshotOfCurrentSlideEnabled, useIsPopupPresentationEnabled } from '/imports/ui/services/features';
 import { PluginsContext } from '/imports/ui/components/components-data/plugin-context/context';
 import useMeeting from '/imports/ui/core/hooks/useMeeting';
 
@@ -20,6 +21,7 @@ const PresentationMenuContainer = (props) => {
   const isFullscreen = currentElement === elementId;
   const Settings = getSettingsSingletonInstance();
   const { isRTL } = Settings.application;
+  const { isMobile } = deviceInfo;
   const { pluginsExtensibleAreasAggregatedState } = useContext(PluginsContext);
   let presentationDropdownItems = [];
   if (pluginsExtensibleAreasAggregatedState.presentationDropdownItems) {
@@ -34,9 +36,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
@@ -47,12 +50,14 @@ const PresentationMenuContainer = (props) => {
         isFullscreen,
         layoutContextDispatch,
         isRTL,
+        isMobile,
         presentationDropdownItems,
         hasWBAccess,
         meetingName: meetingInfo?.name,
         handleToggleFullscreen,
         isIphone,
         allowSnapshotOfCurrentSlide,
+        allowPopupPresentation,
         persistShape,
       }}
     />
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toast/presentation-uploader-toast/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toast/presentation-uploader-toast/component.jsx
index 2bcd03d52e66..cfe8613fa966 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toast/presentation-uploader-toast/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toast/presentation-uploader-toast/component.jsx
@@ -285,6 +285,60 @@ function renderToastItem(item, intl) {
   );
 }
 
+function renderNotesUploadToast({
+  intl,
+  title,
+  fileName,
+  progress,
+}) {
+  const statusText = progress != null
+    ? `${Math.floor(progress)}%`
+    : '';
+
+  return (
+    <Styled.ToastWrapper data-test="presentationNotesUploadProgressToast">
+      <Styled.UploadToastHeader>
+        <Styled.UploadIcon iconName="upload" />
+        <Styled.UploadToastTitle>{title}</Styled.UploadToastTitle>
+      </Styled.UploadToastHeader>
+
+      <Styled.InnerToast>
+        <div>
+          <div>
+            <Styled.UploadRow>
+              <Styled.FileLine>
+                <span>
+                  <Icon iconName="file" />
+                </span>
+
+                <Styled.ToastFileName>
+                  <span>{fileName}</span>
+                </Styled.ToastFileName>
+
+                <Styled.StatusIcon>
+                  <Styled.ToastItemIcon
+                    loading
+                    iconName="blank"
+                  />
+                </Styled.StatusIcon>
+              </Styled.FileLine>
+
+              <Styled.StatusInfo>
+                <Styled.StatusInfoSpan
+                  data-test="processingPresentationNotesItem"
+                  styles="info"
+                >
+                  {statusText}
+                </Styled.StatusInfoSpan>
+              </Styled.StatusInfo>
+            </Styled.UploadRow>
+          </div>
+        </div>
+      </Styled.InnerToast>
+    </Styled.ToastWrapper>
+  );
+}
+
 const renderToastList = (presentations, intl) => {
   let converted = 0;
 
@@ -575,4 +629,5 @@ export const PresentationUploaderToast = ({
 export default {
   handleDismissToast,
   renderPresentationItemStatus,
+  renderNotesUploadToast,
 };
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 56f89a7c600d..8f349cf79da6 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,31 @@ class PresentationToolbar extends PureComponent {
   }
 
   componentDidMount() {
-    document.addEventListener('keydown', this.switchSlide);
+    const {
+      isPresentationDetached,
+      popupWindow,
+    } = this.props;
+
+    this.keydownDocument = (
+      isPresentationDetached && popupWindow?.document
+        ? popupWindow.document
+        : document
+    );
+
+    this.keydownDocument.addEventListener(
+      'keydown',
+      this.switchSlide,
+    );
   }
 
   componentWillUnmount() {
-    document.removeEventListener('keydown', this.switchSlide);
+    if (this.keydownDocument) {
+      this.keydownDocument.removeEventListener(
+        'keydown',
+        this.switchSlide,
+      );
+      this.keydownDocument = null;
+    }
   }
 
   handleSkipToSlideChange(event) {
@@ -171,9 +191,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 503e550d67d1..273360618678 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/container.jsx
@@ -97,9 +97,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/presentation-uploader/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/component.jsx
index b504645bb92a..4f6f419c7867 100755
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/component.jsx
@@ -7,6 +7,7 @@ import Button from '/imports/ui/components/common/button/component';
 import update from 'immutability-helper';
 import logger from '/imports/startup/client/logger';
 import { toast } from 'react-toastify';
+import { notify } from '/imports/ui/services/notification';
 import Styled from './styles';
 import PresentationDownloadDropdown from './presentation-download-dropdown/component';
 import { getSettingsSingletonInstance } from '/imports/ui/services/settings';
@@ -40,6 +41,9 @@ const propTypes = {
   renderPresentationItemStatus: PropTypes.func.isRequired,
   isPresenter: PropTypes.bool.isRequired,
   exportPresentation: PropTypes.func.isRequired,
+  uploadPresentationNotes: PropTypes.func.isRequired,
+  extractPresentationNotesFromExistingPptx: PropTypes.func.isRequired,
+  renderNotesUploadToast: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
@@ -269,6 +273,30 @@ const intlMessages = defineMessages({
     id: 'app.presentation.actionsLabel',
     description: 'actions label',
   },
+  uploadingNotes: {
+    id: 'app.presentationUploader.uploadingPresenterNotes',
+    description: 'uploading notes',
+  },
+  uploadedNotes: {
+    id: 'app.presentationUploader.uploadedPresenterNotes',
+    description: 'notes uploaded',
+  },
+  uploadingNotesFailed: {
+    id: 'app.presentationUploader.uploadingPresenterNotesFailed',
+    description: 'uploading notes failed',
+  },
+  extractingPresentationNotes: {
+    id: 'app.presentationUploader.extractingPresentationNotes',
+    description: 'extracting notes',
+  },
+  extractedPresentationNotes: {
+    id: 'app.presentationUploader.extractedPresentationNotes',
+    description: 'notes extracted',
+  },
+  extractingPresentationNotesFailed: {
+    id: 'app.presentationUploader.extractingPresentationNotesFailed',
+    description: 'notes extraction failed',
+  },
 });
 
 const handleDismissToast = (id) => toast.dismiss(id);
@@ -306,6 +334,8 @@ class PresentationUploader extends Component {
     this.updateFileKey = this.updateFileKey.bind(this);
     this.getPresentationsToShow = this.getPresentationsToShow.bind(this);
     this.handleDownloadableChange = this.handleDownloadableChange.bind(this);
+    this.handleUploadPresentationNotes = this.handleUploadPresentationNotes.bind(this);
+    this.handleExtractPresentationNotesFromExistingPptx = this.handleExtractPresentationNotesFromExistingPptx.bind(this);
   }
 
   componentDidUpdate(prevProps) {
@@ -701,6 +731,100 @@ class PresentationUploader extends Component {
     dispatchChangePresentationDownloadable(item, downloadable, fileStateType);
   }
 
+  handleUploadPresentationNotes = (presentationItem, file) => {
+    const { intl, uploadPresentationNotes, renderNotesUploadToast } = this.props;
+    const endpoint = '/bigbluebutton/presentation-notes/upload';
+    const toastId = `presentation-notes-upload-${presentationItem.presentationId}`;
+
+    const title = intl.formatMessage(intlMessages.uploadingNotes);
+
+    toast(
+      renderNotesUploadToast({
+        intl,
+        title,
+        fileName: file.name,
+        progress: 0,
+      }),
+      {
+        toastId,
+        autoClose: false,
+        hideProgressBar: true,
+        closeOnClick: true,
+        newestOnTop: true,
+        className: 'presentationUploaderToast toastClass',
+      },
+    );
+
+    return uploadPresentationNotes(
+      presentationItem.presentationId,
+      file,
+      endpoint,
+      (event) => {
+        if (event.lengthComputable) {
+          const progress = Math.min(
+            Math.floor((event.loaded / event.total) * 100),
+            99,
+          );
+
+          toast.update(toastId, {
+            render: renderNotesUploadToast({
+              intl,
+              title,
+              fileName: file.name,
+              progress,
+            }),
+          });
+        }
+      },
+    )
+      .then(() => {
+        toast.dismiss(toastId);
+
+        window.dispatchEvent(new CustomEvent('presentationNotesUpdated', {
+          detail: {
+            presentationId: presentationItem.presentationId,
+          },
+        }));
+
+        notify(intl.formatMessage(intlMessages.uploadedNotes), 'success');
+      })
+      .catch((error) => {
+        toast.dismiss(toastId);
+        notify(intl.formatMessage(intlMessages.uploadingNotesFailed), 'error');
+  
+        logger.error({
+          logCode: 'presentation_notes_upload_error',
+          extraInfo: { error },
+        }, 'Presentation notes upload failed');
+      });
+  };
+
+  handleExtractPresentationNotesFromExistingPptx = (presentationItem) => {
+    const { extractPresentationNotesFromExistingPptx, intl } = this.props;
+
+    notify(intl.formatMessage(intlMessages.extractingPresentationNotes), 'info');
+
+    return extractPresentationNotesFromExistingPptx(
+      presentationItem.presentationId,
+    )
+      .then(() => {
+        window.dispatchEvent(new CustomEvent('presentationNotesUpdated', {
+          detail: {
+            presentationId: presentationItem.presentationId,
+          },
+        }));
+        notify(intl.formatMessage(intlMessages.extractedPresentationNotes), 'success');
+      })
+      .catch((error) => {
+        notify(intl.formatMessage(intlMessages.extractingPresentationNotesFailed), 'error');
+
+        logger.error({
+          logCode: 'presentation_notes_extract_existing_error',
+          extraInfo: { error },
+        }, 'Extract presentation notes from existing pptx failed');
+      });
+  };
+
   handleDismiss() {
     const { presentations: propPresentations } = this.props;
 
@@ -945,6 +1069,8 @@ class PresentationUploader extends Component {
                 closeModal={() => Session.setItem('showUploadPresentationView', false)}
                 handleDownloadingOfPresentation={(fileStateType) => this
                   .handleDownloadingOfPresentation(item, fileStateType)}
+                handleUploadPresentationNotes={this.handleUploadPresentationNotes}
+                handleExtractPresentationNotesFromExistingPptx={this.handleExtractPresentationNotesFromExistingPptx}
               />
             ) : null}
             {removable ? (
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/container.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/container.jsx
index 11359ff26e76..c68f4f7e7916 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/container.jsx
@@ -101,6 +101,9 @@ const PresentationUploaderContainer = (props) => {
         renderToastList={Service.renderToastList}
         renderPresentationItemStatus={PresUploaderToast.renderPresentationItemStatus}
         handleFiledrop={Service.handleFiledrop}
+        uploadPresentationNotes={Service.uploadPresentationNotes}
+        extractPresentationNotesFromExistingPptx={Service.extractPresentationNotesFromExistingPptx}
+        renderNotesUploadToast={PresUploaderToast.renderNotesUploadToast}
         dispatchDisableDownloadable={Service.dispatchDisableDownloadable}
         dispatchEnableDownloadable={Service.dispatchEnableDownloadable}
         {...props}
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/presentation-download-dropdown/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/presentation-download-dropdown/component.jsx
index 167e33e64c96..07f52bc90cd2 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/presentation-download-dropdown/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/presentation-download-dropdown/component.jsx
@@ -35,6 +35,14 @@ const intlMessages = defineMessages({
     id: 'app.presentationUploader.dropdownExportOptionsUncomplete',
     description: 'Chat Options',
   },
+  uploadPresenterNotes: {
+    id: 'app.presentationUploader.uploadPresenterNotes',
+    description: 'Upload note',
+  },
+  extractPresentationNotesFromExistingPptx: {
+    id: 'app.presentationUploader.extractPresentationNotesFromExistingPptx',
+    description: 'Extract notes from uploaded pptx',
+  },
 });
 
 const propTypes = {
@@ -74,6 +82,8 @@ const propTypes = {
   }),
   closeModal: PropTypes.func.isRequired,
   disabled: PropTypes.bool.isRequired,
+  handleUploadPresentationNotes: PropTypes.func.isRequired,
+  handleExtractPresentationNotesFromExistingPptx: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
@@ -88,7 +98,11 @@ class PresentationDownloadDropdown extends PureComponent {
       uniqueId('action-item-'),
       uniqueId('action-item-'),
       uniqueId('action-item-'),
+      uniqueId('action-item-'),
+      uniqueId('action-item-'),
     ];
+
+    this.notesFileInputRef = React.createRef();
   }
 
   getAvailableActions() {
@@ -106,6 +120,10 @@ class PresentationDownloadDropdown extends PureComponent {
 
     this.menuItems = [];
 
+    const isPptxPresentation = item?.name
+      ?.toLowerCase()
+      .endsWith('.pptx');
+
     const { filenameConverted, name, downloadFileUri } = item;
     const convertedFileExtension = filenameConverted?.split('.').slice(-1)[0];
     const downloadableExtension = downloadFileUri?.split('.').slice(-1)[0];
@@ -173,6 +191,26 @@ class PresentationDownloadDropdown extends PureComponent {
         },
       });
     }
+    this.menuItems.push({
+      key: this.actionsKey[3],
+      id: 'uploadPresenterNotes',
+      dataTest: 'uploadPresenterNotes',
+      label: intl.formatMessage(intlMessages.uploadPresenterNotes),
+      onClick: () => {
+        this.notesFileInputRef.current?.click();
+      },
+    });
+    if (isPptxPresentation) {
+      this.menuItems.push({
+        key: this.actionsKey[4],
+        id: 'extractPresentationNotesFromExistingPptx',
+        dataTest: 'extractPresentationNotesFromExistingPptx',
+        label: intl.formatMessage(intlMessages.extractPresentationNotesFromExistingPptx),
+        onClick: () => {
+          this.props.handleExtractPresentationNotesFromExistingPptx(this.props.item);
+        },
+      });
+    }
     return this.menuItems;
   }
 
@@ -212,6 +250,23 @@ class PresentationDownloadDropdown extends PureComponent {
           }}
           actions={this.getAvailableActions()}
         />
+        <input
+          ref={this.notesFileInputRef}
+          type="file"
+          accept=".pptx"
+          style={{ display: 'none' }}
+          onChange={(e) => {
+            e.stopPropagation();
+            const file = e.target.files?.[0];
+            if (file) {
+              const isPptx = file.name.toLowerCase().endsWith('.pptx');
+              if (isPptx) {
+                this.props.handleUploadPresentationNotes(this.props.item, file);
+              }
+            }
+            e.target.value = '';
+          }}
+        />
       </PresentationDownloadDropdownWrapper>
     );
   }
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/service.js b/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/service.js
index 583bda144f03..3895def296bc 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/service.js
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/service.js
@@ -239,6 +239,71 @@ const useExternalUploadData = () => {
   };
 };
 
+const uploadPresentationNotes = (
+  presentationId,
+  file,
+  endpoint,
+  onProgress,
+) => {
+  if (!file) return Promise.resolve();
+
+  const data = new FormData();
+  data.append('notesUpload', file);
+  data.append('conference', Auth.meetingID);
+  data.append('room', Auth.meetingID);
+  data.append('presentationId', presentationId);
+  data.append('pod_id', POD_ID);
+
+  const opts = {
+    method: 'POST',
+    body: data,
+  };
+
+  return futch(
+    Auth.authenticateURL(endpoint),
+    opts,
+    onProgress,
+  )
+    .catch((error) => {
+      logger.debug({
+        logCode: 'presentation_notes_uploader_service',
+        extraInfo: { error },
+      }, 'Presentation notes upload exception');
+
+      return Promise.reject(error);
+    });
+};
+
+const extractPresentationNotesFromExistingPptx = (
+  presentationId,
+) => {
+  if (!presentationId) return Promise.reject(new Error('missing presentationId'));
+
+  const data = new FormData();
+  data.append('conference', Auth.meetingID);
+  data.append('room', Auth.meetingID);
+  data.append('presentationId', presentationId);
+  data.append('pod_id', POD_ID);
+
+  const opts = {
+    method: 'POST',
+    body: data,
+  };
+
+  return futch(
+    Auth.authenticateURL('/bigbluebutton/presentation-notes/extract-existing'),
+    opts,
+  )
+    .catch((error) => {
+      logger.debug({
+        logCode: 'presentation_notes_extract_existing_service',
+        extraInfo: { error },
+      }, 'Presentation notes extract from existing pptx exception');
+
+      return Promise.reject(error);
+    });
+};
+
 function handleFiledrop(files, files2, that, intl, intlMessages) {
   if (that) {
     const { fileValidMimeTypes } = that.props;
@@ -316,4 +381,6 @@ export default {
   uploadAndConvertPresentation,
   handleFiledrop,
   useExternalUploadData,
+  uploadPresentationNotes,
+  extractPresentationNotesFromExistingPptx,
 };
diff --git a/bigbluebutton-html5/imports/ui/components/presentation/styles.js b/bigbluebutton-html5/imports/ui/components/presentation/styles.js
index 4e6ab0874ca0..2aa58d559100 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/presentation/styles.js
@@ -16,6 +16,7 @@ import {
 } from '/imports/ui/stylesheets/styled-components/typography';
 import FullscreenButtonContainer from '/imports/ui/components/common/fullscreen-button/container';
 import ToastStyled from '/imports/ui/components/common/toast/styles';
+import { Resizable } from 're-resizable';
 
 const VisuallyHidden = styled.span`
   position: absolute;
@@ -164,7 +165,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)``;
@@ -214,6 +217,281 @@ const IconWithMask = styled.div.attrs({
   mask: url(${({ mask }) => mask})  center 100% / 100% no-repeat;
 `;
 
+const PresenterToolSlidesResizable = styled(Resizable)`
+  position: relative;
+  flex: 0 0 auto;
+
+  height: 100%;
+  min-width: 0;
+
+  box-sizing: border-box;
+`;
+
+const PresenterToolResizeHandle = styled.div`
+  position: absolute;
+
+  width: 10px;
+  height: 100%;
+
+  top: 0;
+  right: -5px;
+
+  cursor: col-resize;
+  z-index: 10;
+  user-select: none;
+  touch-action: none;
+
+  &::after {
+    content: '';
+    position: absolute;
+
+    top: 0;
+    bottom: 0;
+    left: 4px;
+
+    width: 2px;
+    background: ${({ theme }) => theme.colorGray};
+  }
+`;
+
+const PresenterToolCurrentSlideResizable = styled(Resizable).attrs({
+  handleStyles: {
+    bottom: {
+      height: '10px',
+      bottom: '-5px',
+      left: '0',
+      width: '100%',
+      cursor: 'row-resize',
+      zIndex: 20,
+      userSelect: 'none',
+      touchAction: 'none',
+    },
+  },
+})`
+  position: relative;
+  flex: 0 0 auto;
+
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+
+  display: flex;
+  flex-direction: column;
+
+  box-sizing: border-box;
+`;
+
+const PresenterToolContainer = styled.div`
+  position: absolute;
+  overflow: hidden;
+  display: flex;
+  align-items: stretch;
+  justify-content: flex-start;
+`;
+
+const PresenterToolSlidesColumn = styled.div`
+  width: 100%;
+  height: 100%;
+
+  min-width: 0;
+  min-height: 0;
+
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+`;
+
+const PresenterToolSlidePane = styled.div`
+  position: relative;
+
+  flex: 1 1 0;
+  width: 100%;
+
+  height: auto;
+
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+  ${({ $withBorder }) => $withBorder && `
+    border-bottom: 1px solid #444;
+  `}
+`;
+
+const PresenterToolSlideFrame = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: #000;
+`;
+
+const PresenterToolSlideLabel = styled.div`
+  position: absolute;
+  top: 0.4rem;
+  left: 0.5rem;
+  z-index: 1;
+  padding: 0.15rem 0.45rem;
+  border-radius: 0.25rem;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  font-size: 0.85rem;
+`;
+
+const PresenterToolSlideImage = styled.img`
+  width: auto;
+  height: auto;
+
+  max-width: ${({ $compact }) => ($compact ? '90%' : '100%')};
+  max-height: ${({ $compact }) => ($compact ? '90%' : '100%')};
+
+  background: #fff;
+  display: block;
+
+  pointer-events: none;
+  user-select: none;
+`;
+
+const PresenterToolEmptySlide = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  font-size: 1rem;
+`;
+
+const PresenterToolNotesPanel = styled.div`
+  flex: 1 1 0;
+  width: auto;
+  min-width: 0;
+
+  height: 100%;
+  overflow-y: auto;
+  padding: 1.5rem;
+  box-sizing: border-box;
+  white-space: pre-wrap;
+  font-size: 1.2rem;
+  line-height: 1.6;
+  border-left: 1px solid #444;
+  color: white;
+  background: #1e1e1e;
+`;
+
+const PresenterToolSlideContent = styled.div`
+  position: relative;
+  flex: 1 1 0;
+
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  overflow: hidden;
+  container-type: size;
+`;
+
+const PresenterToolSlideViewport = styled.div`
+  --viewport-ratio: ${({ $aspectRatio }) => (
+    Number.isFinite($aspectRatio) && $aspectRatio > 0
+      ? $aspectRatio
+      : (16 / 9)
+  )};
+
+  position: relative;
+
+  width: min(
+    100cqw,
+    calc(100cqh * var(--viewport-ratio))
+  );
+
+  height: min(
+    100cqh,
+    calc(100cqw / var(--viewport-ratio))
+  );
+
+  aspect-ratio: var(--viewport-ratio);
+
+  flex: 0 0 auto;
+  overflow: hidden;
+  background: #000;
+`;
+
+const PresenterToolTransformedSlideLayer = styled.div`
+  position: absolute;
+
+  left: ${({ $leftRatio }) => `${$leftRatio * 100}%`};
+  top: ${({ $topRatio }) => `${$topRatio * 100}%`};
+
+  width: ${({ $widthRatio }) => `${$widthRatio * 100}%`};
+  height: ${({ $heightRatio }) => `${$heightRatio * 100}%`};
+
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+`;
+
+const PresenterToolTransformedSlide = styled.img`
+  position: absolute;
+  inset: 0;
+  
+  display: block;
+  width: 100%;
+  height: 100%;
+  
+  max-width: none;
+  max-height: none;
+
+  pointer-events: none;
+  user-select: none;
+  background: #fff;
+`;
+
+const PresenterToolCursorDot = styled.div`
+  position: absolute;
+
+  left: ${({ $leftRatio }) => `${$leftRatio * 100}%`};
+  top: ${({ $topRatio }) => `${$topRatio * 100}%`};
+
+  width: 12px;
+  height: 12px;
+
+  border-radius: 50%;
+  background: #ff0000;
+
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  z-index: 3;
+`;
+
+const PresenterToolAnnotationsOverlay = styled.img`
+  position: absolute;
+  inset: 0;
+
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  max-width: none;
+  max-height: none;
+
+  pointer-events: none;
+  user-select: none;
+
+  z-index: 1;
+`;
+
 export default {
   VisuallyHidden,
   PresentationSvg,
@@ -233,4 +511,21 @@ export default {
   Button,
   ExtraTools,
   IconWithMask,
+  PresenterToolSlidesResizable,
+  PresenterToolResizeHandle,
+  PresenterToolCurrentSlideResizable,
+  PresenterToolContainer,
+  PresenterToolSlidesColumn,
+  PresenterToolSlidePane,
+  PresenterToolSlideFrame,
+  PresenterToolSlideLabel,
+  PresenterToolSlideImage,
+  PresenterToolEmptySlide,
+  PresenterToolNotesPanel,
+  PresenterToolSlideContent,
+  PresenterToolSlideViewport,
+  PresenterToolTransformedSlideLayer,
+  PresenterToolTransformedSlide,
+  PresenterToolAnnotationsOverlay,
+  PresenterToolCursorDot,
 };
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 9f519249b057..237d4b739e35 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 OverflowTile from './overflow-tile/component';
@@ -221,7 +222,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 3a76203324f8..8dd94de86672 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
@@ -132,6 +132,132 @@ const intlMessages = defineMessages({
 // any individual component instance without serialization overhead.
 const _pageZoomRatioCache = {};
 
+const PRESENTER_ANNOTATIONS_UPDATE_INTERVAL = 200;
+
+const isAnnotationShapeRecord = (record) => (
+  record?.typeName === 'shape'
+  && !record.id?.startsWith('shape:BG-')
+);
+
+const hasAnnotationShapeChanges = (changes) => {
+  if (!changes) return false;
+
+  const {
+    added = {},
+    updated = {},
+    removed = {},
+  } = changes;
+
+  return (
+    Object.values(added).some(isAnnotationShapeRecord)
+    || Object.values(updated).some(([previousRecord, nextRecord]) => (
+      isAnnotationShapeRecord(previousRecord)
+      || isAnnotationShapeRecord(nextRecord)
+    ))
+    || Object.values(removed).some(isAnnotationShapeRecord)
+  );
+};
+
+const exportPresenterAnnotations = async (
+  currentEditor,
+  currentPageId,
+) => {
+  if (
+    !currentEditor
+    || typeof currentEditor.getSvg !== 'function'
+    || typeof currentEditor.getShapePageBounds !== 'function'
+  ) {
+    logger.error(
+      { logCode: 'PresenterAnnotationsExport' },
+      'Required tldraw export APIs are unavailable',
+    );
+
+    return {
+      status: 'error',
+    };
+  }
+
+  const expectedTldrawPageId = `page:${currentPageId}`;
+
+  // A slide change may still be updating the tldraw store.
+  if (currentEditor.getCurrentPageId() !== expectedTldrawPageId) {
+    return {
+      status: 'not-ready',
+    };
+  }
+
+  const currentPageShapes =
+    currentEditor.getCurrentPageShapes();
+
+  const backgroundShape = (
+    currentEditor.getShape(`shape:BG-${currentPageId}`)
+    || currentPageShapes.find(
+      (shape) => shape.id.startsWith('shape:BG-'),
+    )
+  );
+
+  if (!backgroundShape) {
+    return {
+      status: 'not-ready',
+    };
+  }
+
+  const annotationShapes = currentPageShapes.filter(
+    isAnnotationShapeRecord,
+  );
+
+  if (annotationShapes.length === 0) {
+    return {
+      status: 'empty',
+    };
+  }
+
+  const slideBounds =
+    currentEditor.getShapePageBounds(backgroundShape);
+
+  if (!slideBounds) {
+    return {
+      status: 'not-ready',
+    };
+  }
+
+  try {
+    const svgElement = await currentEditor.getSvg(
+      annotationShapes,
+      {
+        bounds: slideBounds.clone(),
+        background: false,
+        padding: 0,
+        preserveAspectRatio: 'xMidYMid meet',
+      },
+    );
+
+    if (!svgElement) {
+      return {
+        status: 'error',
+      };
+    }
+
+    const svgMarkup = new XMLSerializer().serializeToString(
+      svgElement,
+    );
+
+    return {
+      status: 'success',
+      svgMarkup,
+    };
+  } catch (error) {
+    logger.error(
+      { logCode: 'PresenterAnnotationsExport' },
+      `Failed to export presenter annotations: ${error}`,
+    );
+
+    return {
+      status: 'error',
+    };
+  }
+};
+
 const Whiteboard = React.memo((props) => {
   const {
     isPresenter = false,
@@ -184,6 +310,10 @@ const Whiteboard = React.memo((props) => {
     lockToolbarTools,
     layoutChanged,
     pointerDiameter = 5,
+    isPresentationDetached,
+    popupWindow,
+    onPresenterViewChange,
+    onPresenterAnnotationsChange,
   } = props;
 
   const allowInfiniteWhiteboardPanForViewers = window.meetingClientSettings?.public?.whiteboard?.allowInfiniteWhiteboardPanForViewers;
@@ -196,6 +326,10 @@ const Whiteboard = React.memo((props) => {
 
   clearTldrawCache();
 
+  const targetWin = isPresentationDetached && popupWindow ? popupWindow : window;
+  const raf = targetWin.requestAnimationFrame.bind(targetWin);
+  const caf = targetWin.cancelAnimationFrame.bind(targetWin);
+
   const [isMounting, setIsMounting] = React.useState(true);
   const [cursorType, setCursorType] = React.useState('');
   const [cursorZoom, setCursorZoom] = React.useState({ slideZoom: 1, containerZoom: 1 });
@@ -246,6 +380,17 @@ const Whiteboard = React.memo((props) => {
   const hasZoomSyncedRef = useRef(false);
   const lastForcedViewRef = useRef(null);
   const currentUserRef = useRef(currentUser);
+  const originalHTMLElementRef = React.useRef(null);
+  const presenterViewFrameRef = React.useRef(null);
+  const lastPresenterViewRef = React.useRef(null);
+  const onPresenterViewChangeRef = React.useRef(onPresenterViewChange);
+  const onPresenterAnnotationsChangeRef = React.useRef(onPresenterAnnotationsChange);
+  const isPresentationDetachedRef = React.useRef(isPresentationDetached);
+  const presenterAnnotationsTimerRef = React.useRef(null);
+  const presenterAnnotationsExportingRef = React.useRef(false);
+  const presenterAnnotationsPendingRef = React.useRef(false);
+  const presenterAnnotationsActiveRef = React.useRef(true);
+  const publishPresenterAnnotationsRef = React.useRef(null);
 
   currentUserRef.current = currentUser;
 
@@ -522,6 +667,19 @@ const Whiteboard = React.memo((props) => {
     }
   }, [removedShapes]);
 
+  React.useEffect(() => {
+    onPresenterViewChangeRef.current = onPresenterViewChange;
+  }, [onPresenterViewChange]);
+
+  React.useEffect(() => {
+    onPresenterAnnotationsChangeRef.current =
+      onPresenterAnnotationsChange;
+  }, [onPresenterAnnotationsChange]);
+
+  React.useEffect(() => {
+    isPresentationDetachedRef.current = isPresentationDetached;
+  }, [isPresentationDetached]);
+
   const handleCopy = useCallback(() => {
     const selectedShapes = tlEditorRef.current?.getSelectedShapes();
     if (!selectedShapes || selectedShapes.length === 0) {
@@ -952,8 +1110,10 @@ const Whiteboard = React.memo((props) => {
   calculateZoomValueRef.current = calculateZoomValue;
 
   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 targetDoc = isPresentationDetached && popupWindow?.document ? popupWindow.document : document;
+    const container = targetDoc.querySelector('[data-test="presentationContainer"]');
+    const innerWrapper = targetDoc.getElementById('presentationInnerWrapper');
     const containerWidth = container ? container.offsetWidth : 0;
     const innerWrapperWidth = innerWrapper ? innerWrapper.offsetWidth : 0;
     const widthGap = Math.max(containerWidth - innerWrapperWidth, 0);
@@ -1177,8 +1337,10 @@ 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 targetDoc = isPresentationDetached && popupWindow?.document ? popupWindow.document : document;
+    const container = targetDoc.querySelector('[data-test="presentationContainer"]');
+    const innerWrapper = targetDoc.getElementById('presentationInnerWrapper');
 
     const containerWidth = container ? container.offsetWidth : 0;
     const containerHeight = container ? container.offsetHeight : 0;
@@ -1209,7 +1371,7 @@ const Whiteboard = React.memo((props) => {
     }
 
     if (currentTry < options.maxTries) {
-      const frameId = requestAnimationFrame(() => {
+      const frameId = raf(() => {
         pollInnerWrapperDimensionsUntilStable(
           onReady,
           options,
@@ -1244,7 +1406,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) {
@@ -1255,6 +1417,234 @@ const Whiteboard = React.memo((props) => {
     }
   };
 
+  const roundPresenterViewValue = (value) => (
+    Number.isFinite(value)
+      ? Number(value.toFixed(6))
+      : 0
+  );
+
+  const updatePresenterView = (editor) => {
+    const callback = onPresenterViewChangeRef.current;
+
+    if (
+      !editor
+      || !isPresenterRef.current
+      || !isPresentationDetachedRef.current
+      || typeof callback !== 'function'
+    ) {
+      return;
+    }
+
+    const viewport = editor.getViewportPageBounds();
+    const slideShape = editor.getShape(
+      `shape:BG-${curPageIdRef.current}`,
+    );
+    const cursorPoint = editor.inputs.currentPagePoint;
+
+    if (
+      !viewport
+      || !(viewport.w > 0)
+      || !(viewport.h > 0)
+      || !slideShape
+      || !(slideShape.props?.w > 0)
+      || !(slideShape.props?.h > 0)
+    ) {
+      if (lastPresenterViewRef.current !== null) {
+        lastPresenterViewRef.current = null;
+        callback(null);
+      }
+
+      return;
+    }
+
+    const cursorLeftRatio = cursorPoint
+      ? (cursorPoint.x - viewport.x) / viewport.w
+      : -1;
+
+    const cursorTopRatio = cursorPoint
+      ? (cursorPoint.y - viewport.y) / viewport.h
+      : -1;
+
+    const cursorVisible =
+      cursorLeftRatio >= 0
+      && cursorLeftRatio <= 1
+      && cursorTopRatio >= 0
+      && cursorTopRatio <= 1;
+
+    const nextPresenterView = {
+      presentationId: presentationIdRef.current,
+      pageId: Number(curPageIdRef.current),
+
+      viewportAspectRatio: roundPresenterViewValue(
+        viewport.w / viewport.h,
+      ),
+
+      slide: {
+        leftRatio: roundPresenterViewValue(
+          (slideShape.x - viewport.x) / viewport.w,
+        ),
+        topRatio: roundPresenterViewValue(
+          (slideShape.y - viewport.y) / viewport.h,
+        ),
+        widthRatio: roundPresenterViewValue(
+          slideShape.props.w / viewport.w,
+        ),
+        heightRatio: roundPresenterViewValue(
+          slideShape.props.h / viewport.h,
+        ),
+      },
+
+      cursor: {
+        leftRatio: roundPresenterViewValue(cursorLeftRatio),
+        topRatio: roundPresenterViewValue(cursorTopRatio),
+        visible: cursorVisible,
+      },
+    };
+
+    if (isEqual(lastPresenterViewRef.current, nextPresenterView)) {
+      return;
+    }
+
+    lastPresenterViewRef.current = nextPresenterView;
+    callback(nextPresenterView);
+  };
+
+  const schedulePresenterViewUpdate = (editor) => {
+    if (
+      !editor
+      || !isPresenterRef.current
+      || !isPresentationDetachedRef.current
+      || typeof onPresenterViewChangeRef.current !== 'function'
+      || presenterViewFrameRef.current !== null
+    ) {
+      return;
+    }
+
+    presenterViewFrameRef.current = raf(() => {
+      presenterViewFrameRef.current = null;
+      updatePresenterView(editor);
+    });
+  };
+
+  const schedulePresenterAnnotationsUpdate = () => {
+    if (
+      !presenterAnnotationsActiveRef.current
+      || !tlEditorRef.current
+      || !isPresenterRef.current
+      || !isPresentationDetachedRef.current
+      || typeof onPresenterAnnotationsChangeRef.current !== 'function'
+    ) {
+      return;
+    }
+
+    // Remember that the store has changed, even if an export is
+    // already running.
+    presenterAnnotationsPendingRef.current = true;
+
+    if (
+      presenterAnnotationsTimerRef.current !== null
+      || presenterAnnotationsExportingRef.current
+    ) {
+      return;
+    }
+
+    presenterAnnotationsTimerRef.current = window.setTimeout(() => {
+      presenterAnnotationsTimerRef.current = null;
+
+      const publish = publishPresenterAnnotationsRef.current;
+      if (typeof publish === 'function') {
+        void publish();
+      }
+    }, PRESENTER_ANNOTATIONS_UPDATE_INTERVAL);
+  };
+
+  const publishPresenterAnnotations = async () => {
+    if (presenterAnnotationsExportingRef.current) {
+      presenterAnnotationsPendingRef.current = true;
+      return;
+    }
+
+    const currentEditor = tlEditorRef.current;
+    const callback = onPresenterAnnotationsChangeRef.current;
+    const currentPageId = Number(curPageIdRef.current);
+    const currentPresentationId = presentationIdRef.current;
+
+    if (
+      !presenterAnnotationsActiveRef.current
+      || !currentEditor
+      || !isPresenterRef.current
+      || !isPresentationDetachedRef.current
+      || typeof callback !== 'function'
+      || !Number.isFinite(currentPageId)
+    ) {
+      return;
+    }
+
+    presenterAnnotationsExportingRef.current = true;
+    presenterAnnotationsPendingRef.current = false;
+
+    try {
+      const exportResult = await exportPresenterAnnotations(
+        currentEditor,
+        currentPageId,
+      );
+
+      /*
+       * getSvg() is asynchronous. The presenter may have changed slides,
+       * closed the popup, or lost presenter status while it was running.
+       */
+      const resultStillCurrent = (
+        presenterAnnotationsActiveRef.current
+        && currentEditor === tlEditorRef.current
+        && isPresenterRef.current
+        && isPresentationDetachedRef.current
+        && Number(curPageIdRef.current) === currentPageId
+        && presentationIdRef.current === currentPresentationId
+        && onPresenterAnnotationsChangeRef.current === callback
+      );
+
+      if (!resultStillCurrent) {
+        presenterAnnotationsPendingRef.current = true;
+        return;
+      }
+
+      if (exportResult.status === 'success') {
+        callback({
+          presentationId: currentPresentationId,
+          pageId: currentPageId,
+          svgMarkup: exportResult.svgMarkup,
+        });
+        return;
+      }
+
+      if (exportResult.status === 'empty') {
+        // Remove an old overlay when the last annotation was deleted.
+        callback({
+          presentationId: currentPresentationId,
+          pageId: currentPageId,
+          svgMarkup: null,
+        });
+      }
+
+      /*
+       * For 'not-ready' and 'error', keep the currently displayed
+       * annotation SVG. A later store or page update will schedule
+       * another export.
+       */
+    } finally {
+      presenterAnnotationsExportingRef.current = false;
+
+      if (
+        presenterAnnotationsPendingRef.current
+        && presenterAnnotationsActiveRef.current
+      ) {
+        schedulePresenterAnnotationsUpdate();
+      }
+    }
+  };
+
+  publishPresenterAnnotationsRef.current = publishPresenterAnnotations;
+
   const handleTldrawMount = (editor) => {
     if (typeof editor.history.setMaxStackSize === 'function') {
       editor.history.setMaxStackSize(window.meetingClientSettings.public.whiteboard.maxHistoryStackSize);
@@ -1438,6 +1828,10 @@ const Whiteboard = React.memo((props) => {
         const camKey = `camera:page:${curPageIdRef.current}`;
         const { [camKey]: cameras } = updated;
 
+        if (pointers || cameras) {
+          schedulePresenterViewUpdate(editor);
+        }
+
         if (cameras) {
           const [prevCam, nextCam] = cameras;
           const panned = prevCam.x !== nextCam.x || prevCam.y !== nextCam.y;
@@ -1544,10 +1938,22 @@ const Whiteboard = React.memo((props) => {
             }
           }
           updateCursorZoomRef.current?.();
+          schedulePresenterViewUpdate(editor);
         }
       },
     );
 
+    editor.store.listen(
+      ({ changes }) => {
+        if (hasAnnotationShapeChanges(changes)) {
+          schedulePresenterAnnotationsUpdate();
+        }
+      },
+      {
+        scope: 'document',
+      },
+    );
+
     if (editor && curPageIdRef.current) {
       const page = [];
       const formattedPageId = parseInt(curPageIdRef.current, 10);
@@ -1585,6 +1991,8 @@ const Whiteboard = React.memo((props) => {
         });
       });
 
+      schedulePresenterAnnotationsUpdate();
+
       // eslint-disable-next-line no-param-reassign
       editor.store.onBeforeChange = (prev, next) => {
         if (isPhone) {
@@ -1625,6 +2033,8 @@ const Whiteboard = React.memo((props) => {
                 'fade-out',
                 '0s',
                 hasWBAccessRef.current || isPresenterRef.current,
+                isPresentationDetached,
+                popupWindow,
               );
             } else if (visibilityState === 'hidden') {
               toggleToolsAnimations(
@@ -1632,6 +2042,8 @@ const Whiteboard = React.memo((props) => {
                 'fade-in',
                 '0s',
                 hasWBAccessRef.current || isPresenterRef.current,
+                isPresentationDetached,
+                popupWindow,
               );
             }
             lastVisibilityStateRef.current = visibilityState;
@@ -1759,6 +2171,10 @@ const Whiteboard = React.memo((props) => {
 
     pollInnerWrapperDimensionsUntilStable(() => {
       adjustCameraOnMount(!isPresenterRef.current);
+
+      raf(() => {
+        schedulePresenterViewUpdate(editor);
+      });
     });
 
     // New cursor hint shape: circle scaled by pointerDiameter, centered at (0,0)
@@ -1992,6 +2408,8 @@ const Whiteboard = React.memo((props) => {
       setIsWheelZoom,
       setWheelZoomTimeout,
       isInfiniteWhiteboard,
+      isPresentationDetached,
+      popupWindow,
     },
   );
 
@@ -2133,14 +2551,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();
           }, {
@@ -2181,6 +2599,35 @@ const Whiteboard = React.memo((props) => {
     }
   }, [currentPresentationPage, isPresenter, viewerCanPan]);
 
+  // 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.
+  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, isPresenter]);
+
   React.useEffect(() => {
     if (tlEditorRef.current) {
       const useElement = document.querySelector('.tl-cursor use');
@@ -2263,7 +2710,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);
     }
   };
 
@@ -2345,6 +2792,11 @@ const Whiteboard = React.memo((props) => {
       toggleToolbarIfNeeded();
       resetSlideState();
 
+      raf(() => {
+        schedulePresenterViewUpdate(tlEditorRef.current);
+        schedulePresenterAnnotationsUpdate();
+      });
+
       if (viewerCanPanRef.current) {
         pollInnerWrapperDimensionsUntilStable(() => {
           adjustCameraOnMount(true);
@@ -2409,9 +2861,26 @@ const Whiteboard = React.memo((props) => {
   }, [curPageId]);
 
   React.useEffect(() => {
+    presenterAnnotationsActiveRef.current = true;
     setTldrawIsMounting(true);
     return () => {
       isMountedRef.current = false;
+      presenterAnnotationsActiveRef.current = false;
+      presenterAnnotationsPendingRef.current = false;
+
+      if (presenterAnnotationsTimerRef.current !== null) {
+        window.clearTimeout(
+          presenterAnnotationsTimerRef.current,
+        );
+        presenterAnnotationsTimerRef.current = null;
+      }
+
+      if (presenterViewFrameRef.current !== null) {
+        caf(presenterViewFrameRef.current);
+        presenterViewFrameRef.current = null;
+      }
+      lastPresenterViewRef.current = null;
+
       localStorage.removeItem('initialViewBoxWidth');
       localStorage.removeItem('initialViewBoxHeight');
       localStorage.removeItem('pageZoomMap');
@@ -2469,12 +2938,13 @@ const Whiteboard = React.memo((props) => {
 
   React.useEffect(() => {
     if (!whiteboardToolbarAutoHide) {
-      const optionsDropdown = document.getElementById('WhiteboardOptionButton');
+      const targetDoc = isPresentationDetached && popupWindow?.document ? popupWindow.document : document;
+      const optionsDropdown = targetDoc.getElementById('WhiteboardOptionButton');
       if (optionsDropdown?.classList.contains('fade-in')) {
         optionsDropdown.classList.remove('fade-in');
       }
     }
-  }, [whiteboardToolbarAutoHide]);
+  }, [whiteboardToolbarAutoHide, isPresentationDetached, popupWindow]);
 
   const hiddenGeoShapes = React.useMemo(() => {
     const bbbMultiUserPenOnly = getFromUserSettings(
@@ -2601,4 +3071,7 @@ Whiteboard.propTypes = {
   locale: PropTypes.string.isRequired,
   isInfiniteWhiteboard: PropTypes.bool,
   whiteboardWriters: PropTypes.arrayOf(PropTypes.shape).isRequired,
+  onPresenterViewChange: PropTypes.func,
+  onPresenterAnnotationsChange: PropTypes.func,
 };
+
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/container.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/container.jsx
index 60eddb91fd57..7908a479bb99 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/container.jsx
@@ -62,6 +62,8 @@ const WhiteboardContainer = (props) => {
     refetchInitialPageAnnotations,
     annotationStreamData = [],
     restoreOnUpdate,
+    isPresentationDetached,
+    popupWindow,
   } = props;
 
   const WHITEBOARD_CONFIG = window.meetingClientSettings.public.whiteboard;
@@ -320,6 +322,10 @@ const WhiteboardContainer = (props) => {
       }
     }, RECONNECT_SYNC_DELAY_MS);
   }, [
+    // Re-run the synchronization after the tldraw editor becomes available.
+    // This is important to fetch all tldraw drawings when popup/de-popup
+    editor,
+    //
     connectedStatus,
     isMultiUserActive,
     hasWBAccess,
@@ -467,7 +473,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({
@@ -565,6 +571,8 @@ WhiteboardContainer.propTypes = {
   }).isRequired,
   zoomChanger: PropTypes.func.isRequired,
   fitToWidth: PropTypes.bool.isRequired,
+  onPresenterViewChange: PropTypes.func,
+  onPresenterAnnotationsChange: PropTypes.func,
 };
 
 export default WhiteboardContainer;
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/hooks.js b/bigbluebutton-html5/imports/ui/components/whiteboard/hooks.js
index f91c9ad00cd6..931f104abb3f 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/hooks.js
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/hooks.js
@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react';
 import { throttle } from 'radash';
 
-const hasBackgroundImageUrl = (el) => {
-  const style = window.getComputedStyle(el);
+const hasBackgroundImageUrl = (el, isDetached = false, p) => {
+  const targetWin = isDetached && p ? p : window;
+  const style = targetWin.getComputedStyle(el);
   const bg = style.backgroundImage || '';
   return bg.includes('url(');
 };
@@ -50,13 +51,17 @@ const useCursor = (publishCursorUpdate, whiteboardId) => {
   return updateCursorPosition;
 };
 
-const getPresentationOptionsMenuItem = () => document.querySelector('li#presentationFullscreen')
-    || document.querySelector('li#presentationSnapshot')
-    || document.querySelector('li#toolVisibility')
-    || null;
-
-const getTldrawOpenMenu = () => {
-  const tlElement = document.querySelectorAll('[id^=radix-]');
+const getPresentationOptionsMenuItem = (isDetached = false, p) => {
+  const targetDoc = isDetached && p?.document ? p.document : document;
+  return targetDoc.querySelector('li#presentationFullscreen')
+      || targetDoc.querySelector('li#presentationSnapshot')
+      || targetDoc.querySelector('li#toolVisibility')
+      || null;
+}
+
+const getTldrawOpenMenu = (isDetached = false, p) => {
+  const targetDoc = isDetached && p?.document ? p.document : document;
+  const tlElement = targetDoc.querySelectorAll('[id^=radix-]');
   const tldrawMenu = Array.from(tlElement).find((el) => {
     const menuClasses = ['tlui-popover__content', 'tlui-menu'];
     if (el && menuClasses.includes(el.className)) {
@@ -81,6 +86,8 @@ const useMouseEvents = ({
   setIsWheelZoom,
   setWheelZoomTimeout,
   isInfiniteWhiteboard,
+  isPresentationDetached,
+  popupWindow,
 }) => {
   const timeoutIdRef = React.useRef();
   const fingerCountRef = React.useRef(0);
@@ -124,7 +131,8 @@ const useMouseEvents = ({
   const handleMouseDownWindow = (event) => {
     const { target } = event;
     const editor = tlEditorRef.current;
-    const presentationInnerWrapper = document.getElementById('presentationInnerWrapper');
+    const targetDoc = isPresentationDetached && popupWindow?.document ? popupWindow.document : document;
+    const presentationInnerWrapper = targetDoc.getElementById('presentationInnerWrapper');
 
     if (!(presentationInnerWrapper && presentationInnerWrapper.contains(target))) {
       if (editor?.getEditingShape()) {
@@ -139,7 +147,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();
@@ -148,6 +156,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) {
@@ -156,6 +190,8 @@ const useMouseEvents = ({
         'fade-in',
         animations ? '.3s' : '0s',
         hasWBAccess || isPresenterRef.current,
+        isPresentationDetached,
+        popupWindow,
       );
     }
   };
@@ -163,8 +199,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(() => {
@@ -184,6 +220,8 @@ const useMouseEvents = ({
               'fade-out',
               animations ? '3s' : '0s',
               hasWBAccess || isPresenterRef.current,
+              isPresentationDetached,
+              popupWindow,
             );
           }
         } else {
@@ -192,6 +230,8 @@ const useMouseEvents = ({
             'fade-out',
             animations ? '3s' : '0s',
             hasWBAccess || isPresenterRef.current,
+            isPresentationDetached,
+            popupWindow,
           );
         }
       }
@@ -362,6 +402,8 @@ const useMouseEvents = ({
         'fade-out',
         animations ? '3s' : '0s',
         hasWBAccess || isPresenterRef.current,
+        isPresentationDetached,
+        popupWindow,
       );
     } else {
       toggleToolsAnimations(
@@ -369,13 +411,29 @@ 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 targetWin = isPresentationDetached && popupWindow ? popupWindow : window;
+    const presentationWrapper = targetWin.document.getElementById('presentationInnerWrapper');
+    let stylePanelPopup = null;
+    
+    targetWin.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 && popupWindow?.document) {
+      stylePanelPopup = popupWindow.document.getElementsByClassName('tlui-style-panel')[0];
+
+      if (stylePanelPopup) {
+        stylePanelPopup.addEventListener('pointerdown', handlePointerDownStylePanel);
+      }
+    }
+
     if (presentationWrapper) {
       presentationWrapper.addEventListener('mousedown', handleMouseDownWhiteboard);
       presentationWrapper.addEventListener('mouseup', handleMouseUp);
@@ -400,7 +458,13 @@ const useMouseEvents = ({
         presentationWrapper.removeEventListener('touchend', handleTouchEnd, { capture: true });
         presentationWrapper.removeEventListener('touchmove', handleTouchMove);
       }
-      window.removeEventListener('mousedown', handleMouseDownWindow);
+      if (stylePanelPopup) {
+        stylePanelPopup.removeEventListener(
+          'pointerdown',
+          handlePointerDownStylePanel,
+        );
+      }
+      targetWin.removeEventListener('mousedown', handleMouseDownWindow);
     };
   }, [
     tlEditorRef,
@@ -410,6 +474,8 @@ const useMouseEvents = ({
     handleMouseEnter,
     handleMouseLeave,
     handleMouseWheel,
+    isPresentationDetached,
+    popupWindow,
   ]);
 };
 
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/service.js b/bigbluebutton-html5/imports/ui/components/whiteboard/service.js
index b1972dfb602e..773ea98b7b69 100755
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/service.js
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/service.js
@@ -121,9 +121,10 @@ 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 targetDoc = isDetached && p?.document ? p.document : document;
+    const optionsDropdown = targetDoc.getElementById('WhiteboardOptionButton');
     if (optionsDropdown) {
       optionsDropdown.classList.remove(activeAnim);
       optionsDropdown.style.transition = `opacity ${time} ease-in-out`;
@@ -136,7 +137,8 @@ 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 targetDoc = isDetached && p?.document ? p.document : document;
+    const tlEls = targetDoc.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 333a81993e59..baf62bb04373 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 1adb2f961e1e..e21de96d29a2 100755
--- a/bigbluebutton-html5/private/config/settings.yml
+++ b/bigbluebutton-html5/private/config/settings.yml
@@ -1059,6 +1059,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 133246f00322..59baefd5d40f 100755
--- a/bigbluebutton-html5/public/locales/en.json
+++ b/bigbluebutton-html5/public/locales/en.json
@@ -293,6 +293,11 @@
     "app.presentation.endSlideContent": "Slide content end",
     "app.presentation.changedSlideContent": "Presentation changed to slide: {slideNumber}",
     "app.presentation.emptySlideContent": "No content for current slide",
+    "app.presentation.currentSlide": "Current slide",
+    "app.presentation.nextSlide": "Next slide",
+    "app.presentation.noCurrentSlide": "No current slide",
+    "app.presentation.noNextSlide": "No next slide",
+    "app.presentation.noNotes": "No notes",
     "app.presentation.options.label": "Whiteboard options",
     "app.presentation.options.fullscreen": "Fullscreen Presentation",
     "app.presentation.options.exitFullscreen": "Exit Fullscreen",
@@ -301,6 +306,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": "Detach 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",
@@ -353,6 +360,14 @@
     "app.presentationUploader.dropdownExportOptionsUncomplete": "Disabled until upload is complete",
     "app.presentationUploader.export.linkAvailable": "Link for downloading {presentationName} available on the public chat.",
     "app.presentationUploader.currentPresentationLabel": "Current presentation",
+    "app.presentationUploader.uploadPresenterNotes": "Upload presenter note using pptx file",
+    "app.presentationUploader.uploadingPresenterNotes": "Uploading presenter note...",
+    "app.presentationUploader.uploadedPresenterNotes": "Presenter note uploaded",
+    "app.presentationUploader.uploadingPresenterNotesFailed": "Presenter note uploading failed...",
+    "app.presentationUploader.extractPresentationNotesFromExistingPptx": "Extract presenter note from already uploaded pptx file",
+    "app.presentationUploader.extractingPresentationNotes": "Extracting presenter note from already uploaded pptx file...",
+    "app.presentationUploader.extractedPresentationNotes": "Presenter note extracted",
+    "app.presentationUploader.extractingPresentationNotesFailed": "Extracting presenter note failed...",
     "app.presentationUploder.extraHint": "IMPORTANT: each file may not exceed {maxFileSize} MB and {maxFilePages} pages.",
     "app.presentationUploder.uploadLabel": "Upload",
     "app.presentationUploder.confirmLabel": "Confirm",
diff --git a/bigbluebutton-html5/public/locales/ja.json b/bigbluebutton-html5/public/locales/ja.json
index 4de6f36c1043..0cf16894cb89 100644
--- a/bigbluebutton-html5/public/locales/ja.json
+++ b/bigbluebutton-html5/public/locales/ja.json
@@ -293,6 +293,11 @@
     "app.presentation.endSlideContent": "スライドコンテンツ終了",
     "app.presentation.changedSlideContent": "プレゼンテーションがスライド{slideNumber} に移動",
     "app.presentation.emptySlideContent": "現在のスライドにはコンテンツはありません",
+    "app.presentation.currentSlide": "現在のスライド",
+    "app.presentation.nextSlide": "次のスライド",
+    "app.presentation.noCurrentSlide": "現在のスライドはありません",
+    "app.presentation.noNextSlide": "次のスライドはありません",
+    "app.presentation.noNotes": "ノートはありません",
     "app.presentation.options.label": "ホワイトボードの設定",
     "app.presentation.options.fullscreen": "スライドを全画面表示",
     "app.presentation.options.exitFullscreen": "全画面表示解除",
@@ -301,6 +306,8 @@
     "app.presentation.options.downloading": "ダウンロード中...",
     "app.presentation.options.downloaded": "プレゼンファイルがダウンロードされました",
     "app.presentation.options.downloadFailed": "プレゼンファイルがダウンロードできませんでした",
+    "app.presentation.options.detachPopup": "プレゼン画面を分離",
+    "app.presentation.options.mergePopup": "メインウィンドウに戻す",
     "app.presentation.presentationToolbar.noNextSlideDesc": "プレゼンテーション終了",
     "app.presentation.presentationToolbar.noPrevSlideDesc": "プレゼンテーション開始",
     "app.presentation.presentationToolbar.selectLabel": "スライド選択",
@@ -353,6 +360,14 @@
     "app.presentationUploader.dropdownExportOptionsUncomplete": "アップロード終了まで無効",
     "app.presentationUploader.export.linkAvailable": "{presentationName}をダウンロードするためのリンクが、公開チャットから利用できます。",
     "app.presentationUploader.currentPresentationLabel": "プレゼンテーションファイル",
+    "app.presentationUploader.uploadPresenterNotes": "ノート用pptxをアップロード",
+    "app.presentationUploader.uploadingPresenterNotes": "ノートをアップロードしています...",
+    "app.presentationUploader.uploadedPresenterNotes": "ノートをアップロードしました",
+    "app.presentationUploader.uploadingPresenterNotesFailed": "ノートのアップロードに失敗しました",
+    "app.presentationUploader.extractPresentationNotesFromExistingPptx": "アップロード済みpptxからノートを抽出",
+    "app.presentationUploader.extractingPresentationNotes": "アップロード済みpptxからノートを抽出しています...",
+    "app.presentationUploader.extractedPresentationNotes": "ノートを抽出しました",
+    "app.presentationUploader.extractingPresentationNotesFailed": "ノートの抽出に失敗しました",
     "app.presentationUploder.extraHint": "重要：それぞれのファイルが{maxFileSize}MB、{maxFilePages}ページを超えないようにしてください。",
     "app.presentationUploder.uploadLabel": "アップロード",
     "app.presentationUploder.confirmLabel": "決定",
diff --git a/bigbluebutton-web/bbb-web.nginx b/bigbluebutton-web/bbb-web.nginx
index 77d9c5b38a03..5e72d56bfe88 100644
--- a/bigbluebutton-web/bbb-web.nginx
+++ b/bigbluebutton-web/bbb-web.nginx
@@ -40,6 +40,18 @@ location ~ "^\/bigbluebutton\/presentation\/(?<prestoken>[a-zA-Z0-9_-]+)/upload$
 	auth_request_set $file_too_large_header $upstream_http_x_file_too_large;
 }
 
+# Currently you needs a manual edit of /usr/share/bigbluebutton/nginx/web
+location = /bigbluebutton/presentation-notes/upload {
+	proxy_pass         http://127.0.0.1:8090;
+	proxy_redirect     default;
+	proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
+
+	add_header P3P 'CP="No P3P policy available"';
+
+	client_max_body_size       1000m;
+	client_body_buffer_size    128k;
+}
+
 location /bigbluebutton/presentation/download {
 	return 404;
 }
diff --git a/bigbluebutton-web/grails-app/controllers/org/bigbluebutton/web/UrlMappings.groovy b/bigbluebutton-web/grails-app/controllers/org/bigbluebutton/web/UrlMappings.groovy
index 3821209af69e..98ec9f370212 100755
--- a/bigbluebutton-web/grails-app/controllers/org/bigbluebutton/web/UrlMappings.groovy
+++ b/bigbluebutton-web/grails-app/controllers/org/bigbluebutton/web/UrlMappings.groovy
@@ -52,6 +52,21 @@ class UrlMappings {
       }
     }
 
+    "/bigbluebutton/presentation-notes/upload"(controller: "presentation") {
+      action = [POST: 'uploadNotes']
+    }
+
+    "/bigbluebutton/presentation-notes/extract-existing"(controller: "presentation") {
+      action = [POST: 'extractNotesFromExistingPptx']
+    }
+
+    "/bigbluebutton/presentation/$conference/$room/$presentation_name/notes/$id"(controller: "presentation") {
+      action = [GET: 'showNote']
+      constraints {
+        id matches: /\d+/
+      }
+    }
+
     "/bigbluebutton/presentation/$conference/$room/$presentation_name/textfiles"(controller: "presentation") {
       action = [GET: 'numberOfTextfiles']
     }
diff --git a/bigbluebutton-web/grails-app/controllers/org/bigbluebutton/web/controllers/PresentationController.groovy b/bigbluebutton-web/grails-app/controllers/org/bigbluebutton/web/controllers/PresentationController.groovy
index e65d840c44fd..ec43f2aceb91 100755
--- a/bigbluebutton-web/grails-app/controllers/org/bigbluebutton/web/controllers/PresentationController.groovy
+++ b/bigbluebutton-web/grails-app/controllers/org/bigbluebutton/web/controllers/PresentationController.groovy
@@ -44,7 +44,7 @@ class PresentationController {
   DefaultMimeUtility grailsMimeUtility
 
   private static final Pattern SLIDE_URI_PATTERN = Pattern.compile(
-    '/bigbluebutton/presentation/([A-Za-z0-9\\-]+)/([A-Za-z0-9\\-]+)/([A-Za-z0-9\\-]+)/(svg|thumbnail|textfiles|png)/(\\d+)'
+    '/bigbluebutton/presentation/([A-Za-z0-9\\-]+)/([A-Za-z0-9\\-]+)/([A-Za-z0-9\\-]+)/(svg|thumbnail|textfiles|png|notes)/(\\d+)'
   )
   private static final Pattern DOWNLOAD_URI_PATTERN = Pattern.compile(
     '/bigbluebutton/presentation/download/([A-Za-z0-9\\-]+)/([A-Za-z0-9\\-]+)'
@@ -347,6 +347,63 @@ class PresentationController {
       response.outputStream << 'upload-failed'
     }
   }
+  def uploadNotes = {
+    log.info("uploadNotes called")
+
+    def userSession = validateSession()
+    if (userSession == null) {
+      response.setStatus(401)
+      response.contentType = 'text/plain'
+      render 'not authorized'
+      return
+    }
+
+    def conf = params.conference
+    def rm = params.room ?: params.conference
+    def presentationId = params.presentationId
+    def file = request.getFile('notesUpload')
+
+    if (conf != userSession.meetingID) {
+      response.setStatus(403)
+      response.contentType = 'text/plain'
+      render 'forbidden'
+      return
+    }
+
+    if (!presentationId || file == null || file.empty) {
+      response.setStatus(400)
+      response.contentType = 'text/plain'
+      render 'missing presentationId or notesUpload'
+      return
+    }
+
+    def originalFilename = file.originalFilename ?: ""
+
+    if (!originalFilename.toLowerCase().endsWith(".pptx")) {
+      response.setStatus(400)
+      response.contentType = 'text/plain'
+      render 'only pptx is allowed'
+      return
+    }
+
+    try {
+      presentationService.uploadNotesPptx(
+        conf,
+        rm,
+        presentationId,
+        file
+      )
+
+      response.status = 200
+      response.contentType = 'application/json'
+      render '{"status":"ok"}'
+    } catch (Exception e) {
+      log.error("Failed to upload notes pptx. meetingId=${conf}, presId=${presentationId}", e)
+      response.setStatus(500)
+      response.contentType = 'text/plain'
+      render 'failed'
+    }
+  }
 
   def testConversion = {
     presentationService.testConversionProcess()
@@ -399,6 +456,126 @@ class PresentationController {
     }
   }
 
+  def showNote = {
+    log.info("showNote called")
+
+    def userSession = validateSession()
+    if (userSession == null) {
+      response.setStatus(401)
+      render text: ''
+      return
+    }
+
+    def presentationName = params.presentation_name
+    def conf = params.conference
+    def rm = params.room
+    def slide = params.id
+
+    if (conf != userSession.meetingID) {
+      response.setStatus(403)
+      render text: ''
+      return
+    }
+
+    if (presentationService.pageTokenSecret) {
+      def pageToken = params.pageToken
+
+      if (!slide?.isInteger()) {
+        response.setStatus(403)
+        render text: ''
+        return
+      }
+
+      def expected = generatePageToken(
+        presentationName,
+        Integer.parseInt(slide),
+        presentationService.pageTokenSecret
+      )
+
+      if (pageToken == null || pageToken != expected) {
+        response.setStatus(403)
+        render text: ''
+        return
+      }
+    }
+
+    try {
+      def note = presentationService.showNote(conf, rm, presentationName, slide)
+
+      if (!note.exists()) {
+        response.setStatus(404)
+        render text: ''
+        return
+      }
+
+      response.addHeader("Cache-Control", "no-cache")
+
+      render(
+        text: note.getText("UTF-8"),
+        contentType: "text/plain",
+        encoding: "UTF-8"
+      )
+      return
+    } catch (Exception e) {
+      log.error("Failed to read note file. meetingId=${conf}, presId=${presentationName}, page=${slide}", e)
+      response.setStatus(500)
+      render text: ''
+      return
+    }
+  }
+
+  def extractNotesFromExistingPptx = {
+    log.info("extractNotesFromExistingPptx called")
+
+    def userSession = validateSession()
+    if (userSession == null) {
+      response.setStatus(401)
+      response.contentType = 'text/plain'
+      render 'not authorized'
+      return
+    }
+
+    def conf = params.conference
+    def rm = params.room ?: params.conference
+    def presentationId = params.presentationId
+
+    if (conf != userSession.meetingID) {
+      response.setStatus(403)
+      response.contentType = 'text/plain'
+      render 'forbidden'
+      return
+    }
+
+    if (!presentationId) {
+      response.setStatus(400)
+      response.contentType = 'text/plain'
+      render 'missing presentationId'
+      return
+    }
+
+    try {
+      presentationService.extractNotesFromExistingPptx(
+        conf,
+        rm,
+        presentationId
+      )
+
+      response.status = 200
+      response.contentType = 'application/json'
+      render '{"status":"ok"}'
+    } catch (FileNotFoundException e) {
+      log.warn("Existing pptx not found for notes extraction. meetingId=${conf}, presId=${presentationId}", e)
+      response.setStatus(404)
+      response.contentType = 'text/plain'
+      render 'existing pptx not found'
+    } catch (Exception e) {
+      log.error("Failed to extract notes from existing pptx. meetingId=${conf}, presId=${presentationId}", e)
+      response.setStatus(500)
+      response.contentType = 'text/plain'
+      render 'failed'
+    }
+  }
+
   def showThumbnail = {
     def userSession = validateSession()
     if (userSession == null) { response.setStatus(401); return }
diff --git a/bigbluebutton-web/grails-app/services/org/bigbluebutton/web/services/PresentationService.groovy b/bigbluebutton-web/grails-app/services/org/bigbluebutton/web/services/PresentationService.groovy
index d37c83fd504b..ea45da62d2e7 100755
--- a/bigbluebutton-web/grails-app/services/org/bigbluebutton/web/services/PresentationService.groovy
+++ b/bigbluebutton-web/grails-app/services/org/bigbluebutton/web/services/PresentationService.groovy
@@ -32,6 +32,9 @@ import java.util.concurrent.RejectedExecutionException
 import java.util.concurrent.ThreadFactory
 import java.util.concurrent.ThreadPoolExecutor
 import java.util.concurrent.TimeUnit
+import java.nio.file.Files
+import java.nio.file.StandardCopyOption
+import java.util.Comparator
 import java.util.concurrent.atomic.AtomicInteger
 
 class PresentationService {
@@ -192,6 +195,162 @@ class PresentationService {
 		new File(roomDirectory(conf, room).absolutePath + File.separatorChar + presentationName + File.separatorChar + "svgs" + File.separatorChar + "slide${id}.svg")
 	}
 
+	def showNote(String conf, String room, String presentationName, String id) {
+		 new File(roomDirectory(conf, room).absolutePath + File.separatorChar + presentationName + File.separatorChar + "notes" + File.separatorChar + "${id}.txt")
+	}
+
+	def uploadNotesPptx(String conf, String room, String presentationId, file) {
+		def presDir = new File(
+			roomDirectory(conf, room).absolutePath
+				+ File.separatorChar
+				+ presentationId
+		)
+
+		if (!presDir.exists()) {
+			throw new RuntimeException("Presentation directory does not exist: ${presDir.absolutePath}")
+		}
+
+		def timestamp = System.currentTimeMillis()
+
+			def pptxTmpFile = new File(
+				presDir.absolutePath
+					+ File.separatorChar
+					+ "notes.${timestamp}.pptx"
+			)
+
+			try {
+				file.transferTo(pptxTmpFile)
+
+				log.info("Saved notes pptx temporarily to ${pptxTmpFile.absolutePath}")
+
+				extractNotesFromPptxFile(presDir, pptxTmpFile)
+
+				if (pptxTmpFile.exists()) {
+					pptxTmpFile.delete()
+				}
+
+				return true
+			} catch (Exception e) {
+				log.error("Failed to upload/extract notes pptx. meetingId=${conf}, room=${room}, pres=${presentationId}", e)
+
+				if (pptxTmpFile.exists()) {
+					pptxTmpFile.delete()
+				}
+
+				throw e
+			}
+		}
+
+		def extractNotesFromExistingPptx(String conf, String room, String presentationId) {
+			def presDir = new File(
+				roomDirectory(conf, room).absolutePath
+					+ File.separatorChar
+					+ presentationId
+			)
+
+			if (!presDir.exists()) {
+				throw new FileNotFoundException("Presentation directory does not exist: ${presDir.absolutePath}")
+			}
+
+			def pptxFile = new File(
+				presDir.absolutePath
+					+ File.separatorChar
+					+ "${presentationId}.pptx"
+			)
+
+			if (!pptxFile.exists()) {
+				throw new FileNotFoundException("Existing pptx file not found: ${pptxFile.absolutePath}")
+			}
+
+			log.info("Extracting notes from existing pptx: ${pptxFile.absolutePath}")
+
+			extractNotesFromPptxFile(presDir, pptxFile)
+
+			return true
+		}
+
+		private void extractNotesFromPptxFile(File presDir, File pptxFile) {
+			def script = new File("/usr/local/bin/extract_pptx_notes.py")
+
+			if (!script.exists()) {
+				throw new RuntimeException("Notes extraction script does not exist: ${script.absolutePath}")
+			}
+
+			def timestamp = System.currentTimeMillis()
+
+			def notesDir = new File(
+				presDir.absolutePath
+					+ File.separatorChar
+					+ "notes"
+			)
+
+			def notesTmpDir = new File(
+				presDir.absolutePath
+					+ File.separatorChar
+					+ "notes.tmp.${timestamp}"
+			)
+
+			try {
+				if (!notesTmpDir.mkdirs() && !notesTmpDir.exists()) {
+					throw new RuntimeException("Failed to create notes tmp dir: ${notesTmpDir.absolutePath}")
+				}
+
+				def cmd = [
+					"python3",
+					script.absolutePath,
+					pptxFile.absolutePath,
+					"--output",
+					notesTmpDir.absolutePath
+				]
+
+				log.info("Running notes extraction: ${cmd.join(' ')}")
+
+				def proc = new ProcessBuilder(cmd)
+					.redirectErrorStream(false)
+					.start()
+
+				def stdout = new StringBuffer()
+				def stderr = new StringBuffer()
+
+				proc.consumeProcessOutput(stdout, stderr)
+
+				boolean finished = proc.waitFor(120, TimeUnit.SECONDS)
+
+				if (!finished) {
+					proc.destroyForcibly()
+					throw new RuntimeException("Notes extraction timed out")
+				}
+
+				if (proc.exitValue() != 0) {
+					throw new RuntimeException(
+					"Notes extraction failed. exit=${proc.exitValue()}, stderr=${stderr.toString()}"
+				)
+			}
+
+			log.info("Notes extraction stdout: ${stdout.toString()}")
+
+			if (notesDir.exists()) {
+				deleteRecursively(notesDir)
+			}
+
+			Files.move(
+				notesTmpDir.toPath(),
+				notesDir.toPath(),
+				StandardCopyOption.REPLACE_EXISTING
+			)
+
+			log.info("Updated presentation notes: notesDir=${notesDir.absolutePath}")
+		} catch (Exception e) {
+			log.error("Failed to extract notes. pptx=${pptxFile.absolutePath}", e)
+
+			if (notesTmpDir.exists()) {
+				deleteRecursively(notesTmpDir)
+			}
+
+			throw e
+		}
+	}
+
 	def showThumbnail = {conf, room, presentationName, thumb ->
 		def thumbFile = roomDirectory(conf, room).absolutePath + File.separatorChar + presentationName + File.separatorChar +
 				"thumbnails" + File.separatorChar + "thumb-${thumb}.png"
@@ -259,6 +418,23 @@ class PresentationService {
 
 	}
 
+	private void deleteRecursively(File file) {
+		if (file == null || !file.exists()) {
+			return
+		}
+
+		def stream = Files.walk(file.toPath())
+
+		try {
+			stream
+				.sorted(Comparator.reverseOrder())
+				.forEach { path ->
+					Files.deleteIfExists(path)
+				}
+		} finally {
+			stream.close()
+		}
+	}
 }
 
 /*** Helper classes **/
diff --git a/bigbluebutton-web/script/extract_pptx_notes.py b/bigbluebutton-web/script/extract_pptx_notes.py
new file mode 100644
index 000000000000..6c11ffdf0b32
--- /dev/null
+++ b/bigbluebutton-web/script/extract_pptx_notes.py
@@ -0,0 +1,294 @@
+#!/usr/bin/env python3
+# Copy manually to /usr/local/bin/ for instance.
+
+import argparse
+import posixpath
+import sys
+import zipfile
+from defusedxml import ElementTree as ET
+from pathlib import Path
+
+NS = {
+    "a": "http://schemas.openxmlformats.org/drawingml/2006/main",
+    "p": "http://schemas.openxmlformats.org/presentationml/2006/main",
+    "r": "http://schemas.openxmlformats.org/officeDocument/2006/relationships",
+    "rel": "http://schemas.openxmlformats.org/package/2006/relationships",
+}
+
+
+def read_xml(z, name):
+    return ET.fromstring(z.read(name))
+
+
+def rels_path_for_part(part_path):
+    dirname = posixpath.dirname(part_path)
+    basename = posixpath.basename(part_path)
+    return posixpath.join(dirname, "_rels", basename + ".rels")
+
+
+def resolve_target(base_part_path, target):
+    base_dir = posixpath.dirname(base_part_path)
+    resolved = posixpath.normpath(posixpath.join(base_dir, target))
+    return resolved.lstrip("/")
+
+
+def load_rels(z, rels_path):
+    if rels_path not in z.namelist():
+        return {}
+
+    root = read_xml(z, rels_path)
+    rels = {}
+
+    for rel in root.findall("rel:Relationship", NS):
+        rid = rel.attrib.get("Id")
+        target = rel.attrib.get("Target")
+        rtype = rel.attrib.get("Type")
+
+        if rid and target:
+            rels[rid] = {
+                "target": target,
+                "type": rtype,
+            }
+
+    return rels
+
+
+def get_slide_paths_in_order(z):
+    """
+    Return slide XML paths in presentation order:
+      ppt/slides/slide1.xml
+      ppt/slides/slide2.xml
+      ...
+    """
+    if "ppt/presentation.xml" not in z.namelist():
+        return []
+
+    presentation = read_xml(z, "ppt/presentation.xml")
+    presentation_rels = load_rels(z, "ppt/_rels/presentation.xml.rels")
+    slide_paths = []
+
+    for sld_id in presentation.findall(".//p:sldIdLst/p:sldId", NS):
+        rid = sld_id.attrib.get(f"{{{NS['r']}}}id")
+
+        if not rid or rid not in presentation_rels:
+            continue
+
+        target = presentation_rels[rid]["target"]
+
+        # Usually target is "slides/slide1.xml".
+        slide_path = posixpath.normpath(
+            posixpath.join("ppt", target)
+        ).lstrip("/")
+
+        if slide_path in z.namelist():
+            slide_paths.append(slide_path)
+
+    return slide_paths
+
+
+def is_hidden_slide(z, slide_path):
+    """
+    Hidden PowerPoint slides usually have:
+      <p:sld show="0">
+    If show is absent, the slide is visible.
+    """
+    root = read_xml(z, slide_path)
+    return root.attrib.get("show") == "0"
+
+
+def get_note_path_for_slide(z, slide_path):
+    """
+    Find notesSlide linked from the slide relationship file:
+      ppt/slides/_rels/slideN.xml.rels
+    """
+    rels_path = rels_path_for_part(slide_path)
+    rels = load_rels(z, rels_path)
+
+    for rel in rels.values():
+        rtype = rel.get("type") or ""
+        target = rel.get("target") or ""
+
+        if rtype.endswith("/notesSlide"):
+            note_path = resolve_target(slide_path, target)
+
+            if note_path in z.namelist():
+                return note_path
+
+    return None
+
+
+def extract_note_from_xml(xml_bytes):
+    root = ET.fromstring(xml_bytes)
+    paragraphs = []
+
+    for sp in root.findall(".//p:sp", NS):
+        ph = sp.find(".//p:ph", NS)
+
+        # Speaker note body placeholder.
+        if ph is None or ph.attrib.get("type") != "body":
+            continue
+
+        for paragraph in sp.findall(".//a:p", NS):
+            runs = []
+
+            for text_node in paragraph.findall(".//a:t", NS):
+                if text_node.text:
+                    runs.append(text_node.text)
+
+            # Join runs inside the same paragraph.
+            # Do not insert a newline between runs because PowerPoint may split words.
+            line = "".join(runs).strip()
+
+            if line:
+                paragraphs.append(line)
+
+    return "\n".join(paragraphs)
+
+
+def animation_marker_path(original_pptx):
+    """
+    Return the marker path created by PresentationController:
+      original.pptx.expand-animations
+    """
+    return Path(f"{original_pptx}.expand-animations")
+
+
+def expanded_pptx_path(original_pptx):
+    """
+    Return the persistent expanded PPTX path created before LibreOffice:
+      original.expanded.pptx
+    """
+    original_pptx = Path(original_pptx)
+    return original_pptx.with_name(
+        f"{original_pptx.stem}.expanded.pptx"
+    )
+
+
+def is_complete_pptx(path):
+    """
+    Return True only when the file looks like a complete PPTX package.
+    """
+    path = Path(path)
+
+    if not path.is_file() or path.stat().st_size == 0:
+        return False
+
+    if not zipfile.is_zipfile(path):
+        return False
+
+    try:
+        with zipfile.ZipFile(path) as z:
+            if z.testzip() is not None:
+                return False
+
+            required_parts = {
+                "[Content_Types].xml",
+                "ppt/presentation.xml",
+                "ppt/_rels/presentation.xml.rels",
+            }
+            return required_parts.issubset(z.namelist())
+    except (OSError, zipfile.BadZipFile):
+        return False
+
+
+def select_pptx_for_notes(original_pptx):
+    """
+    Select the same PPTX that is used for PDF conversion.
+
+    If animation expansion was not requested, return the original PPTX.
+
+    If the marker exists, use the persistent expanded PPTX. Do not fall back
+    to the original PPTX, because that would produce notes whose slide numbers
+    do not match the expanded PDF/SVG presentation.
+    """
+    original_pptx = Path(original_pptx)
+    marker = animation_marker_path(original_pptx)
+
+    if not marker.exists():
+        print(f"Using original PPTX for note extraction: {original_pptx}")
+        return original_pptx
+
+    expanded = expanded_pptx_path(original_pptx)
+
+    if not is_complete_pptx(expanded):
+        raise FileNotFoundError(
+            "Animation expansion was requested, but the expanded PPTX "
+            f"does not exist or is invalid: {expanded}"
+        )
+
+    print(f"Using expanded PPTX for note extraction: {expanded}")
+    return expanded
+
+def remove_existing_note_files(output_dir):
+    """
+    Remove old numbered note files so that a previous extraction with a
+    different slide count cannot leave extra files behind.
+    """
+    for path in output_dir.glob("*.txt"):
+        if path.stem.isdigit():
+            path.unlink()
+
+
+def extract_notes(original_pptx_path, output_dir):
+    output_dir = Path(output_dir)
+    output_dir.mkdir(parents=True, exist_ok=True)
+    remove_existing_note_files(output_dir)
+
+    pptx_path = select_pptx_for_notes(original_pptx_path)
+
+    with zipfile.ZipFile(pptx_path) as z:
+        slide_paths = get_slide_paths_in_order(z)
+        visible_slide_num = 1
+
+        for slide_path in slide_paths:
+            if is_hidden_slide(z, slide_path):
+                print(f"{slide_path}: hidden, skipped")
+                continue
+
+            note_path = get_note_path_for_slide(z, slide_path)
+
+            note_text = ""
+            if note_path:
+                note_text = extract_note_from_xml(z.read(note_path))
+
+            out_file = output_dir / f"{visible_slide_num}.txt"
+            out_file.write_text(note_text, encoding="utf-8")
+
+            print(
+                f"Visible slide {visible_slide_num}: "
+                f"{slide_path}, note={note_path or 'none'}"
+            )
+
+            visible_slide_num += 1
+
+    print(f"Extracted notes for {visible_slide_num - 1} visible slide(s)")
+
+
+def main():
+    parser = argparse.ArgumentParser(
+        description=(
+            "Extract PowerPoint speaker notes while keeping slide numbering "
+            "aligned with an animation-expanded BBB presentation."
+        )
+    )
+    parser.add_argument(
+        "pptx",
+        help="path to the original uploaded PPTX",
+    )
+    parser.add_argument(
+        "-o",
+        "--output",
+        default="notes",
+        help="output directory",
+    )
+    args = parser.parse_args()
+
+    extract_notes(args.pptx, args.output)
+
+
+if __name__ == "__main__":
+    try:
+        main()
+    except Exception as error:
+        print(f"ERROR: {error}", file=sys.stderr)
+        sys.exit(1)