diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
index 8ca46e267a0..ee86aa86e35 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
@@ -1173,6 +1173,7 @@ const Whiteboard = React.memo(function Whiteboard(props) {
           isRTL,
           isMultiUserActive,
           isToolbarVisible,
+          presentationHeight,
         }}
       />
     </div>
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/styles.js b/bigbluebutton-html5/imports/ui/components/whiteboard/styles.js
index ac67c74db3a..e35f17d0624 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/styles.js
@@ -95,6 +95,80 @@ const TldrawV2GlobalStyle = createGlobalStyle`
     height: auto !important;
     width: auto !important;
   }
+
+  .tlui-layout__mobile .tlui-button__tool {
+    height: 30px !important;
+    width: 20px !important;
+  }
+
+  .tlui-toolbar__inner {
+    flex-direction: column-reverse !important;
+  }
+
+  .tlui-toolbar__tools {
+    flex-direction: column !important;
+  }
+
+  .tlui-toolbar {
+    align-items: end !important;
+  }
+
+  .tlui-layout__bottom {
+    grid-row: auto / auto !important;
+    position: absolute !important;
+    right: 10px !important;
+  }
+
+  [data-side="bottom"][data-align="end"][data-state="open"][role="dialog"] {
+    right: 3.5rem !important;
+    bottom: 9.5rem !important;
+  }
+
+  ${({ presentationHeight }) => {
+    const minRange = { height: 345, top: 14 };
+    const maxRange = { height: 1200, top: 384 };
+
+    const interpolateTop = (height) => {
+      if (height <= minRange.height) return `${minRange.top}px`;
+      if (height >= maxRange.height) return `${maxRange.top}px`;
+
+      const slope = (maxRange.top - minRange.top) / (maxRange.height - minRange.height);
+      const interpolatedTop = minRange.top + slope * (height - minRange.height);
+      return `${interpolatedTop}px`;
+    };
+
+    const topValue = interpolateTop(presentationHeight);
+
+    let additionalStyles = '';
+    if (presentationHeight <= 332) {
+      additionalStyles += `
+        .tlui-layout__mobile .tlui-button__tool > .tlui-icon {
+          height: 11px !important;
+          width: 11px !important;
+        }
+
+        .tlui-toolbar__tools {
+          flex-direction: row !important;
+        }
+
+        .tlui-toolbar__inner {
+          flex-direction: row-reverse !important;
+        }
+
+        .tlui-layout__bottom {
+          grid-row: auto / auto !important;
+          position: relative !important;
+          top: 2px !important;
+        }
+
+        [data-side="top"][role="dialog"] {
+          left: 10rem !important;
+        }
+      `;
+    }
+
+    return `.tlui-layout__bottom { top: ${topValue} !important; }${additionalStyles}`;
+  }}
 `;
 
 const EditableWBWrapper = styled.div`