diff --git a/react/features/filmstrip/middleware.web.ts b/react/features/filmstrip/middleware.web.ts
index f4f04b239..5f0763f36 100644
--- a/react/features/filmstrip/middleware.web.ts
+++ b/react/features/filmstrip/middleware.web.ts
@@ -19,6 +19,8 @@ import { SETTINGS_UPDATED } from '../base/settings/actionTypes';
 import { setTileView } from '../video-layout/actions.web';
 import { LAYOUTS } from '../video-layout/constants';
 import { getCurrentLayout } from '../video-layout/functions.web';
+import { WHITEBOARD_ID } from '../whiteboard/constants';
+import { isWhiteboardVisible } from '../whiteboard/functions';
 
 import {
     ADD_STAGE_PARTICIPANT,
@@ -168,6 +170,7 @@ MiddlewareRegistry.register(store => next => action => {
         const state = getState();
         const { activeParticipants } = state['features/filmstrip'];
         const { maxStageParticipants } = state['features/base/settings'];
+        const isWhiteboardActive = isWhiteboardVisible(state);
         let queue;
 
         if (activeParticipants.find(p => p.participantId === participantId)) {
@@ -205,6 +208,14 @@ MiddlewareRegistry.register(store => next => action => {
             }
         }
 
+        if (participantId === WHITEBOARD_ID) {
+            // If the whiteboard is pinned, this action should clear the other pins.
+            queue = [ { participantId } ];
+        } else if (isWhiteboardActive && Array.isArray(queue)) {
+            // When another participant is pinned, remove the whiteboard from the stage area.
+            queue = queue.filter(p => p?.participantId !== WHITEBOARD_ID);
+        }
+
         // If queue is undefined we haven't made any changes to the active participants. This will mostly happen
         // if the participant that we are trying to add is not pinned and all slots are currently taken by pinned
         // participants.