diff --git a/src/App.tsx b/src/App.tsx
index daa742c9..9e769cfc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,7 +13,7 @@ import { Excalidraw as ExcalidrawComponent, useHandleLibrary, Sidebar, isElement
 import '@excalidraw/excalidraw/index.css'
 import type { LibraryItems } from '@nextcloud/excalidraw/dist/types/excalidraw/types'
 import { useExcalidrawStore } from './stores/useExcalidrawStore'
-import { useWhiteboardConfigStore } from './stores/useWhiteboardConfigStore'
+import { selectEffectiveReadOnly, useWhiteboardConfigStore } from './stores/useWhiteboardConfigStore'
 import { useThemeHandling } from './hooks/useThemeHandling'
 import { useCollaboration } from './hooks/useCollaboration'
 import { useSmartPicker } from './hooks/useSmartPicker'
@@ -54,6 +54,7 @@ import { VotingSidebar } from './components/VotingSidebar'
 import { useVoting } from './hooks/useVoting'
 import { useContextMenuFilter } from './hooks/useContextMenuFilter'
 import { useDisableExternalLibraries } from './hooks/useDisableExternalLibraries'
+import { useLocalSyncLeader } from './hooks/useLocalSyncLeader'
 
 const Excalidraw = memo(ExcalidrawComponent)
 
@@ -101,6 +102,7 @@ export default function App({
 
 	const {
 		setConfig,
+		effectiveReadOnly,
 		gridModeEnabled,
 		initialDataPromise,
 		resetInitialDataPromise,
@@ -108,6 +110,7 @@ export default function App({
 		setGridModeEnabled,
 	} = useWhiteboardConfigStore(useShallow(state => ({
 		setConfig: state.setConfig,
+		effectiveReadOnly: selectEffectiveReadOnly(state),
 		gridModeEnabled: state.gridModeEnabled,
 		initialDataPromise: state.initialDataPromise,
 		resetInitialDataPromise: state.resetInitialDataPromise,
@@ -129,6 +132,7 @@ export default function App({
 	const { renderTable } = useTableInsertion()
 	const { renderAssistant } = useAssistant()
 	const { renderEmojiPicker } = useEmojiPicker()
+	const { isPassiveFollower } = useLocalSyncLeader()
 	const { onChange: onChangeSync, onPointerUpdate } = useSync()
 	const { fetchLibraryItems, updateLibraryItems, isLibraryLoaded, setIsLibraryLoaded } = useLibrary()
 	useCollaboration()
@@ -346,7 +350,7 @@ export default function App({
 	const [commentSidebarDocked, setCommentSidebarDocked] = useState(false)
 	const { renderComment, commentThreads, panToThread, deleteThread } = useComment({
 		activeCommentThreadId,
-		isReadOnly,
+		isReadOnly: effectiveReadOnly,
 		onCommentThreadClick: (commentThreadId) => {
 			setActiveCommentThreadId(commentThreadId)
 			if (commentThreadId) {
@@ -440,12 +444,12 @@ export default function App({
 	}, [maxImageSizeBytes, maxImageSizeMb])
 
 	const handleOnChange = useCallback(() => {
-		if (isVersionPreview) {
+		if (isVersionPreview || effectiveReadOnly) {
 			return
 		}
 		if (!excalidrawAPI || !normalizedFileId || isLoading) return
 		onChangeSync()
-	}, [excalidrawAPI, normalizedFileId, isLoading, onChangeSync, isVersionPreview])
+	}, [effectiveReadOnly, excalidrawAPI, normalizedFileId, isLoading, onChangeSync, isVersionPreview])
 
 	const canvasActions = useMemo(() => {
 		if (isVersionPreview) {
@@ -511,6 +515,25 @@ export default function App({
 			<div className="excalidraw-wrapper" style={{ flex: 1, height: '100%', position: 'relative' }}>
 				{!isVersionPreview && <MemoizedNetworkStatusIndicator />}
 				<MemoizedAuthErrorNotification />
+				{isPassiveFollower && !isVersionPreview && (
+					<div
+						style={{
+							position: 'absolute',
+							top: 16,
+							left: 16,
+							zIndex: 10002,
+							padding: '8px 12px',
+							borderRadius: 8,
+							background: 'rgba(31, 41, 55, 0.88)',
+							color: '#fff',
+							fontSize: 13,
+							fontWeight: 600,
+							boxShadow: '0 8px 24px rgba(15, 23, 42, 0.18)',
+						}}
+					>
+						{t('whiteboard', 'Another tab is the active editor for this board.')}
+					</div>
+				)}
 				{isVersionPreview && (
 					<VersionPreviewBanner
 						versionLabel={versionLabel}
@@ -529,7 +552,7 @@ export default function App({
 					generateIdForFile={generateIdForFile}
 					onPointerUpdate={onPointerUpdate}
 					onChange={handleOnChange}
-					viewModeEnabled={isReadOnly}
+					viewModeEnabled={effectiveReadOnly}
 					gridModeEnabled={gridModeEnabled}
 					theme={theme}
 					name={fileNameWithoutExtension}
@@ -551,7 +574,7 @@ export default function App({
 								<CommentSidebar
 									threads={commentThreads}
 									activeThreadId={activeCommentThreadId}
-									isReadOnly={isReadOnly}
+									isReadOnly={effectiveReadOnly}
 									onThreadClick={panToThread}
 									onDeleteThread={(threadId) => {
 										activeCommentThreadId === threadId && setActiveCommentThreadId(null)
@@ -573,7 +596,7 @@ export default function App({
 									onEndVoting={endVoting}
 									onStartVoting={startVoting}
 									excalidrawAPI={excalidrawAPI}
-									isReadOnly={isReadOnly}
+									isReadOnly={effectiveReadOnly}
 								/>
 							</Sidebar.Tab>
 						</Sidebar.Tabs>
diff --git a/src/components/NetworkStatusIndicator.tsx b/src/components/NetworkStatusIndicator.tsx
index 9e7ed089..ed25531d 100644
--- a/src/components/NetworkStatusIndicator.tsx
+++ b/src/components/NetworkStatusIndicator.tsx
@@ -10,6 +10,7 @@ import { mdiWifiOff, mdiWifi, mdiWifiStrength1, mdiWifiStrength2, mdiLoading } f
 import { t } from '@nextcloud/l10n'
 // Import the correct store
 import { useCollaborationStore } from '../stores/useCollaborationStore'
+import { useLocalSyncLeaderStore } from '../stores/useLocalSyncLeaderStore'
 import type { CollaborationConnectionStatus } from '../stores/useCollaborationStore'
 
 interface StatusConfig {
@@ -70,6 +71,12 @@ const NetworkStatusIndicatorComponent = () => {
 			authError: state.authError,
 		})),
 	)
+	const { isLocalLeader, isPassiveFollower } = useLocalSyncLeaderStore(
+		useShallow(state => ({
+			isLocalLeader: state.isLocalLeader,
+			isPassiveFollower: state.isPassiveFollower,
+		})),
+	)
 	const [expanded, setExpanded] = useState(false)
 
 	// Refs to track previous status to avoid unnecessary effects
@@ -92,10 +99,31 @@ const NetworkStatusIndicatorComponent = () => {
 	// Memoize status config to prevent recalculation on every render
 	const statusConfig = useMemo(() => getStatusConfig(status), [status])
 	const { icon, text, className, description } = statusConfig
+	const leadershipStatus = useMemo(() => {
+		if (isPassiveFollower) {
+			return {
+				text: t('whiteboard', 'Passive tab'),
+				className: 'network-status--passive',
+				description: t('whiteboard', 'Another tab is handling sync and editing for this board.'),
+			}
+		}
+
+		if (isLocalLeader) {
+			return {
+				text: t('whiteboard', 'Active sync tab'),
+				className: 'network-status--leader',
+				description: t('whiteboard', 'This tab is handling sync and authoritative collaboration traffic.'),
+			}
+		}
+
+		return null
+	}, [isLocalLeader, isPassiveFollower])
 
 	// Enhanced description with auth error context
 	const enhancedDescription = useMemo(() => {
-		let baseDescription = description
+		let baseDescription = status === 'online' && leadershipStatus
+			? leadershipStatus.description
+			: description
 
 		// Add auth error context if there's a persistent auth issue
 		if (authError.isPersistent && authError.type === 'jwt_secret_mismatch') {
@@ -105,7 +133,11 @@ const NetworkStatusIndicatorComponent = () => {
 		}
 
 		return baseDescription
-	}, [description, authError])
+	}, [authError, description, leadershipStatus, status])
+
+	const displayedText = status === 'online' && leadershipStatus ? leadershipStatus.text : text
+	const displayedClassName = status === 'online' && leadershipStatus ? leadershipStatus.className : className
+	const rootClassName = status === 'online' && leadershipStatus ? 'sync-tab-status' : 'network-status'
 
 	const toggleExpanded = useCallback(() => {
 		setExpanded(prev => !prev)
@@ -119,17 +151,17 @@ const NetworkStatusIndicatorComponent = () => {
 	}, [toggleExpanded])
 
 	// Hide the indicator when status is online
-	if (status === 'online') return null
+	if (status === 'online' && !leadershipStatus) return null
 
 	return (
 		<div
-			className={`network-status ${className} ${expanded ? 'network-status--expanded' : ''}`}
+			className={`${rootClassName} ${displayedClassName} ${expanded ? 'network-status--expanded' : ''}`}
 			onClick={toggleExpanded}
 			onKeyDown={handleKeyDown}
 			title={enhancedDescription} // Tooltip shows detailed info
 			role="button" // More appropriate role than status if clickable
 			aria-live="polite" // Announce changes politely
-			aria-label={`Connection: ${text}. ${expanded ? enhancedDescription : 'Click to expand.'}`} // Dynamic label
+			aria-label={`Connection: ${displayedText}. ${expanded ? enhancedDescription : 'Click to expand.'}`} // Dynamic label
 			tabIndex={0} // Make focusable
 		>
 			<div className="network-status__icon-container">
@@ -141,7 +173,7 @@ const NetworkStatusIndicatorComponent = () => {
 			{/* Show text only when expanded */}
 			{expanded && (
 				<div className="network-status__content">
-					<span className="network-status__text">{text}</span>
+					<span className="network-status__text">{displayedText}</span>
 				</div>
 			)}
 		</div>
diff --git a/src/components/VotingSidebar.tsx b/src/components/VotingSidebar.tsx
index ae585531..3787ba1f 100644
--- a/src/components/VotingSidebar.tsx
+++ b/src/components/VotingSidebar.tsx
@@ -30,7 +30,7 @@ export function VotingSidebar({ votings, onVote, onEndVoting, onStartVoting, exc
 	const isOpen = (voting: Voting) => voting.state === 'open'
 	const hasVotedInVoting = (voting: Voting) => voting.options.some(hasVoted)
 	const canVote = (voting: Voting) => {
-		if (!currentUserId || !isOpen(voting)) return false
+		if (isReadOnly || !currentUserId || !isOpen(voting)) return false
 		// For single-choice, can't vote if already voted
 		if (voting.type === 'single-choice' && hasVotedInVoting(voting)) return false
 		// For multiple-choice, can always vote (on options not yet voted for)
@@ -44,10 +44,18 @@ export function VotingSidebar({ votings, onVote, onEndVoting, onStartVoting, exc
 	}
 
 	const handleVote = (voting: Voting, option: VotingOption) => {
+		if (isReadOnly) {
+			return
+		}
+
 		if (isOpen(voting)) onVote(voting.uuid, option.uuid)
 	}
 
 	const handleEndVoting = (voting: Voting) => {
+		if (isReadOnly) {
+			return
+		}
+
 		if (isOpen(voting)) onEndVoting(voting.uuid)
 	}
 
@@ -68,6 +76,11 @@ export function VotingSidebar({ votings, onVote, onEndVoting, onStartVoting, exc
 	}
 
 	const addResultAsElements = (voting: Voting) => {
+		if (isReadOnly) {
+			showError(t('whiteboard', 'This tab is currently view-only'))
+			return
+		}
+
 		if (!excalidrawAPI) {
 			showError(t('whiteboard', 'Canvas not ready. Please try again.'))
 			return
@@ -250,6 +263,10 @@ export function VotingSidebar({ votings, onVote, onEndVoting, onStartVoting, exc
 	}
 
 	const handleStartVoting = () => {
+		if (isReadOnly) {
+			return
+		}
+
 		spawnDialog(VotingModal, {
 			onStartVoting,
 		}, () => {})
@@ -272,14 +289,14 @@ export function VotingSidebar({ votings, onVote, onEndVoting, onStartVoting, exc
 				<div key={voting.uuid} className="voting-item">
 					<h4>{voting.question}</h4>
 					<div className="voting-actions">
-						{isAuthor(voting) && isOpen(voting) && (
+						{!isReadOnly && isAuthor(voting) && isOpen(voting) && (
 							<button
 								onClick={() => handleEndVoting(voting)}
 								className="end-voting-button">
 								{t('whiteboard', 'End voting')}
 							</button>
 						)}
-						{!isOpen(voting) && (
+						{!isReadOnly && !isOpen(voting) && (
 							<button
 								onClick={() => addResultAsElements(voting)}
 								className="add-result-button">
diff --git a/src/hooks/useBoardDataManager.ts b/src/hooks/useBoardDataManager.ts
index 699c11b6..a3275d37 100644
--- a/src/hooks/useBoardDataManager.ts
+++ b/src/hooks/useBoardDataManager.ts
@@ -6,10 +6,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import { useCallback, useEffect, useState, useRef } from 'react'
-import { useWhiteboardConfigStore } from '../stores/useWhiteboardConfigStore'
+import { selectEffectiveReadOnly, useWhiteboardConfigStore } from '../stores/useWhiteboardConfigStore'
 import { useExcalidrawStore } from '../stores/useExcalidrawStore'
 import { useJWTStore } from '../stores/useJwtStore'
 import { useSyncStore } from '../stores/useSyncStore'
+import { useLocalSyncLeaderStore } from '../stores/useLocalSyncLeaderStore'
+import { useCollaborationStore } from '../stores/useCollaborationStore'
 import { db } from '../database/db'
 import { generateUrl } from '@nextcloud/router'
 import { useShallow } from 'zustand/react/shallow'
@@ -316,9 +318,11 @@ export function useBoardDataManager() {
 		}
 
 		const api = useExcalidrawStore.getState().excalidrawAPI
-		const currentIsReadOnly = useWhiteboardConfigStore.getState().isReadOnly
+		const currentIsReadOnly = selectEffectiveReadOnly(useWhiteboardConfigStore.getState())
+		const { isLocalLeader } = useLocalSyncLeaderStore.getState()
+		const { isDedicatedSyncer } = useCollaborationStore.getState()
 
-		if (api && !currentIsReadOnly) {
+		if (api && !currentIsReadOnly && isLocalLeader && isDedicatedSyncer) {
 
 			const currentFileId = useWhiteboardConfigStore.getState().fileId
 			const currentWorker = useSyncStore.getState().worker
diff --git a/src/hooks/useCollaboration.ts b/src/hooks/useCollaboration.ts
index 054c6504..195d4e82 100644
--- a/src/hooks/useCollaboration.ts
+++ b/src/hooks/useCollaboration.ts
@@ -22,12 +22,18 @@ import { useExcalidrawStore } from '../stores/useExcalidrawStore'
 import { useJWTStore } from '../stores/useJwtStore'
 import { useWhiteboardConfigStore } from '../stores/useWhiteboardConfigStore'
 import { useCollaborationStore } from '../stores/useCollaborationStore'
+import { useLocalSyncLeaderStore } from '../stores/useLocalSyncLeaderStore'
 import { sanitizeAppStateForSync } from '../utils/sanitizeAppState'
 import { useShallow } from 'zustand/react/shallow'
 import { throttle, debounce } from 'lodash'
 import { db } from '../database/db'
 import { computeElementVersionHash } from '../utils/syncSceneData'
 import type { ClientToServerEvents, CollaborationSocket, ServerToClientEvents } from '../types/collaboration'
+import logger from '../utils/logger'
+import {
+	sendRequestedImageIfAllowed,
+	sendSceneBootstrapIfAllowed,
+} from '../utils/collaborationBootstrap'
 
 enum BroadcastType {
 	SceneInit = 'SCENE_INIT', // Incoming scene data from others
@@ -621,22 +627,27 @@ export function useCollaboration() {
 				case BroadcastType.ImageRequest:
 					// Handle image request from another client
 					if (decoded.payload?.fileId && excalidrawAPI) {
-						const requestedFileId = decoded.payload.fileId
-						const files = excalidrawAPI.getFiles()
-						const file = files[requestedFileId]
-
-						if (file && file.dataURL) {
-							console.log(`[Collaboration] Sending requested image: ${requestedFileId}`)
-							const currentSocket = useCollaborationStore.getState().socket
-
-							if (currentSocket && currentSocket.connected && fileId) {
-								// Send the image using the existing broadcast mechanism
-								const fileData = { type: BroadcastType.ImageAdd, payload: { file } }
-								const fileJson = JSON.stringify(fileData)
-								const fileBuffer = new TextEncoder().encode(fileJson)
-								currentSocket.emit('server-broadcast', `${fileId}`, fileBuffer, [])
-							}
+						const { isDedicatedSyncer, socket: currentSocket } = useCollaborationStore.getState()
+						const currentLeaderState = useLocalSyncLeaderStore.getState()
+						if (!sendRequestedImageIfAllowed({
+							isDedicatedSyncer,
+							isLocalLeader: currentLeaderState.isLocalLeader,
+							fileId,
+							excalidrawAPI,
+							socket: currentSocket,
+							requestedFileId: decoded.payload.fileId,
+						})) {
+							logger.debug('[LocalLeader] Passive tab ignored image request', {
+								fileId,
+								requestedFileId: decoded.payload.fileId,
+							})
+							break
 						}
+
+						logger.debug('[LocalLeader] Sending requested image', {
+							fileId,
+							requestedFileId: decoded.payload.fileId,
+						})
 					}
 					break
 				case BroadcastType.ViewportUpdate:
@@ -662,28 +673,30 @@ export function useCollaboration() {
 		setDedicatedSyncer(data.isSyncer)
 	}, [setDedicatedSyncer])
 
-	// Handle user joined event - broadcast all images if we're the syncer
+	// Handle user joined event - only the active local leader should answer bootstrap traffic
 	const handleUserJoined = useCallback((data: { userId: string, userName: string, socketId: string, isSyncer: boolean }) => {
-		// If we are the syncer, broadcast all our images to the new user
-		const { isDedicatedSyncer } = useCollaborationStore.getState()
-		if (isDedicatedSyncer && excalidrawAPI) {
-			console.log(`[Collaboration] Broadcasting images to new user: ${data.userName}`)
-
-			const files = excalidrawAPI.getFiles()
-			const socket = useCollaborationStore.getState().socket
-
-			if (!socket || !socket.connected || !fileId) return
-
-			// Broadcast each image file
-			Object.entries(files).forEach(([, file]) => {
-				if (file && file.dataURL) {
-					const fileData = { type: BroadcastType.ImageAdd, payload: { file } }
-					const fileJson = JSON.stringify(fileData)
-					const fileBuffer = new TextEncoder().encode(fileJson)
-					socket.emit('server-broadcast', `${fileId}`, fileBuffer, [])
-				}
+		const { isDedicatedSyncer, socket } = useCollaborationStore.getState()
+		const currentLeaderState = useLocalSyncLeaderStore.getState()
+		if (!sendSceneBootstrapIfAllowed({
+			isDedicatedSyncer,
+			isLocalLeader: currentLeaderState.isLocalLeader,
+			fileId,
+			excalidrawAPI,
+			socket,
+		})) {
+			logger.debug('[LocalLeader] Passive tab skipped scene bootstrap response', {
+				fileId,
+				joinedUserId: data.userId,
+				socketId: data.socketId,
 			})
+			return
 		}
+
+		logger.debug('[LocalLeader] Sending scene bootstrap and images for joined user', {
+			fileId,
+			joinedUserId: data.userId,
+			socketId: data.socketId,
+		})
 	}, [excalidrawAPI, fileId])
 
 	// No custom reconnection strategy needed - socket.io will handle reconnection with Infinity attempts
diff --git a/src/hooks/useComment.tsx b/src/hooks/useComment.tsx
index 70190d30..907a01b8 100644
--- a/src/hooks/useComment.tsx
+++ b/src/hooks/useComment.tsx
@@ -299,7 +299,7 @@ export function useComment(props?: UseCommentProps) {
 	}, [excalidrawAPI, getAllThreads])
 
 	const deleteThread = useCallback((threadId: string) => {
-		if (!excalidrawAPI) return
+		if (!excalidrawAPI || isReadOnly) return
 
 		const elements = excalidrawAPI.getSceneElementsIncludingDeleted()
 		const updatedElements = elements.map((el: unknown) =>
@@ -309,10 +309,10 @@ export function useComment(props?: UseCommentProps) {
 		)
 
 		excalidrawAPI.updateScene({ elements: updatedElements })
-	}, [excalidrawAPI])
+	}, [excalidrawAPI, isReadOnly])
 
 	const cleanupEmptyThreads = useCallback(() => {
-		if (!excalidrawAPI) return
+		if (!excalidrawAPI || isReadOnly) return
 
 		const elements = excalidrawAPI.getSceneElementsIncludingDeleted()
 		const emptyThreadIds = elements
@@ -321,10 +321,10 @@ export function useComment(props?: UseCommentProps) {
 			.filter(Boolean)
 
 		emptyThreadIds.forEach((threadId: string) => deleteThread(threadId))
-	}, [excalidrawAPI, deleteThread])
+	}, [excalidrawAPI, deleteThread, isReadOnly])
 
 	const updateThread = useCallback((threadId: string, updater: (thread: CommentThread) => Partial<Record<string, unknown>>) => {
-		if (!excalidrawAPI) return
+		if (!excalidrawAPI || isReadOnly) return
 
 		const elements = excalidrawAPI.getSceneElementsIncludingDeleted()
 		const updatedElements = elements.map((el: unknown) => {
@@ -338,7 +338,7 @@ export function useComment(props?: UseCommentProps) {
 		})
 
 		excalidrawAPI.updateScene({ elements: updatedElements })
-	}, [excalidrawAPI])
+	}, [excalidrawAPI, isReadOnly])
 
 	const updateThreadPosition = useCallback((threadId: string, x: number, y: number) => {
 		if (pendingThread?.id === threadId) {
@@ -563,7 +563,7 @@ export function useComment(props?: UseCommentProps) {
 	}, [excalidrawAPI, renderCommentPins])
 
 	useEffect(() => {
-		if (!isPlacingComment || !excalidrawAPI) return
+		if (!isPlacingComment || !excalidrawAPI || isReadOnly) return
 
 		const canvasElement = document.querySelector('.excalidraw') as HTMLElement
 		if (!canvasElement) {
@@ -613,7 +613,7 @@ export function useComment(props?: UseCommentProps) {
 			document.removeEventListener('click', handleCanvasClick)
 			if (canvasElement) canvasElement.style.cursor = ''
 		}
-	}, [isPlacingComment, excalidrawAPI, onCommentThreadClick])
+	}, [isPlacingComment, excalidrawAPI, isReadOnly, onCommentThreadClick])
 
 	useEffect(() => {
 		if (!activeCommentThreadId || !excalidrawAPI) return
@@ -629,6 +629,9 @@ export function useComment(props?: UseCommentProps) {
 		if (!canvasElement || !pinElement) return
 
 		const handleSubmitComment = (text: string) => {
+			if (isReadOnly) {
+				return
+			}
 
 			if (!text || !text.trim()) {
 				console.warn('[Comment] Cannot submit empty comment')
@@ -690,6 +693,10 @@ export function useComment(props?: UseCommentProps) {
 		}
 
 		const handleEditComment = (commentId: string, text: string) => {
+			if (isReadOnly) {
+				return
+			}
+
 			try {
 				updateThread(activeCommentThreadId, (thread: CommentThread) => ({
 					customData: {
@@ -708,6 +715,10 @@ export function useComment(props?: UseCommentProps) {
 		}
 
 		const handleDeleteThread = () => {
+			if (isReadOnly) {
+				return
+			}
+
 			try {
 				deleteThread(activeCommentThreadId)
 				onThreadClickRef.current?.(null)
@@ -777,6 +788,11 @@ export function useComment(props?: UseCommentProps) {
 	}, [activeCommentThreadId, onCommentThreadClick, cleanupEmptyThreads, pendingThread])
 
 	const renderComment = useCallback(() => {
+		if (isReadOnly) {
+			document.querySelector('.comment-container')?.remove()
+			return
+		}
+
 		renderToolbarButton({
 			class: 'comment-container',
 			buttonClass: 'comment-trigger',
@@ -787,7 +803,7 @@ export function useComment(props?: UseCommentProps) {
 				props?.onOpenSidebar?.()
 			},
 		})
-	}, [props])
+	}, [isReadOnly, props])
 
 	const panToThread = useCallback((threadId: string) => {
 		if (!excalidrawAPI) return
diff --git a/src/hooks/useLocalSyncLeader.ts b/src/hooks/useLocalSyncLeader.ts
new file mode 100644
index 00000000..b2ec8388
--- /dev/null
+++ b/src/hooks/useLocalSyncLeader.ts
@@ -0,0 +1,179 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { useEffect, useMemo } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { useWhiteboardConfigStore } from '../stores/useWhiteboardConfigStore'
+import { useJWTStore } from '../stores/useJwtStore'
+import {
+	getStableLocalSyncTabId,
+	useLocalSyncLeaderStore,
+} from '../stores/useLocalSyncLeaderStore'
+import logger from '../utils/logger'
+import {
+	createLocalSyncLeaderCoordinator,
+	getLocalSyncLeaderLeaseKey,
+	normalizeVisibilityState,
+	type LocalSyncLeaderChannel,
+	type LocalSyncLeaderCoordinator,
+	type LocalSyncLeaderEnvironment,
+} from '../utils/localSyncLeaderCoordinator'
+export {
+	createLocalSyncLeaderCoordinator,
+	getLocalSyncLeaderLeaseKey,
+	LOCAL_SYNC_LEADER_HEARTBEAT_MS,
+	LOCAL_SYNC_LEADER_TTL_MS,
+	type LocalSyncLeaderChannel,
+	normalizeVisibilityState,
+	type LocalSyncLeaderCoordinator,
+	type LocalSyncLeaderEnvironment,
+	type LocalSyncLeaderLease,
+	type LocalSyncLeaderSnapshot,
+} from '../utils/localSyncLeaderCoordinator'
+
+const createBrowserEnvironment = (leaseKey: string): LocalSyncLeaderEnvironment | null => {
+	if (typeof window === 'undefined' || typeof document === 'undefined') {
+		return null
+	}
+
+	return {
+		now: () => Date.now(),
+		getVisibilityState: () => normalizeVisibilityState(document.visibilityState),
+		storage: window.localStorage,
+		createBroadcastChannel: typeof BroadcastChannel === 'function'
+			? (name) => new BroadcastChannel(name) as LocalSyncLeaderChannel
+			: undefined,
+		addStorageListener: (listener) => {
+			const handleStorage = (event: StorageEvent) => {
+				if (event.key !== leaseKey) {
+					return
+				}
+
+				listener(event.key, event.newValue)
+			}
+
+			window.addEventListener('storage', handleStorage)
+			return () => window.removeEventListener('storage', handleStorage)
+		},
+		setInterval: window.setInterval.bind(window),
+		clearInterval: window.clearInterval.bind(window),
+	}
+}
+
+let activeCoordinator: LocalSyncLeaderCoordinator | null = null
+
+export const yieldLocalSyncLeader = (reason = 'external-yield') => {
+	activeCoordinator?.yieldLeadership(reason)
+}
+
+export function useLocalSyncLeader() {
+	const { fileId, isVersionPreview } = useWhiteboardConfigStore(
+		useShallow(state => ({
+			fileId: state.fileId,
+			isVersionPreview: state.isVersionPreview,
+		})),
+	)
+
+	const {
+		parseJwt,
+		getJWT,
+		token,
+	} = useJWTStore(
+		useShallow((state) => ({
+			parseJwt: state.parseJwt,
+			getJWT: state.getJWT,
+			token: fileId ? state.tokens[fileId] ?? null : null,
+		})),
+	)
+
+	const {
+		tabId,
+		...storeSnapshot
+	} = useLocalSyncLeaderStore(
+		useShallow(state => ({
+			tabId: state.tabId,
+			isLocalLeader: state.isLocalLeader,
+			isPassiveFollower: state.isPassiveFollower,
+			leaderTabId: state.leaderTabId,
+			leaderHeartbeatAt: state.leaderHeartbeatAt,
+		})),
+	)
+
+	const userId = useMemo(() => {
+		if (!token) {
+			return null
+		}
+
+		const parsed = parseJwt(token)
+		return parsed?.user?.id ?? parsed?.userid ?? null
+	}, [parseJwt, token])
+
+	useEffect(() => {
+		if (!fileId || isVersionPreview || userId) {
+			return
+		}
+
+		getJWT().catch((error) => {
+			logger.warn('[LocalLeader] Failed to load JWT for local leader coordination', error)
+		})
+	}, [fileId, getJWT, isVersionPreview, userId])
+
+	useEffect(() => {
+		const configStore = useWhiteboardConfigStore.getState()
+		const leaderStore = useLocalSyncLeaderStore.getState()
+		const resetLeaderScope = () => {
+			configStore.setPassiveFollower(false)
+			leaderStore.resetStore()
+		}
+
+		if (!fileId || !userId || isVersionPreview) {
+			activeCoordinator?.stop()
+			activeCoordinator = null
+			resetLeaderScope()
+			return
+		}
+
+		const leaseKey = getLocalSyncLeaderLeaseKey(fileId, userId)
+		const env = createBrowserEnvironment(leaseKey)
+
+		if (!env) {
+			resetLeaderScope()
+			return
+		}
+
+		leaderStore.setScope({ leaseKey, userId })
+		const coordinator = createLocalSyncLeaderCoordinator({
+			leaseKey,
+			tabId: tabId || getStableLocalSyncTabId(),
+			env,
+			onStateChange: (snapshot) => {
+				useLocalSyncLeaderStore.getState().setLeadershipSnapshot(snapshot)
+				useWhiteboardConfigStore.getState().setPassiveFollower(snapshot.isPassiveFollower)
+			},
+			log: (...args) => logger.debug(...args),
+		})
+
+		activeCoordinator?.stop()
+		activeCoordinator = coordinator
+		coordinator.start()
+
+		const handleVisibilityChange = () => {
+			coordinator.handleVisibilityChange('document')
+		}
+
+		document.addEventListener('visibilitychange', handleVisibilityChange)
+
+		return () => {
+			document.removeEventListener('visibilitychange', handleVisibilityChange)
+			if (activeCoordinator === coordinator) {
+				activeCoordinator = null
+			}
+			coordinator.stop()
+			resetLeaderScope()
+		}
+	}, [fileId, isVersionPreview, tabId, userId])
+
+	return storeSnapshot
+}
diff --git a/src/hooks/useReadOnlyState.ts b/src/hooks/useReadOnlyState.ts
index f49f65eb..0dac166a 100644
--- a/src/hooks/useReadOnlyState.ts
+++ b/src/hooks/useReadOnlyState.ts
@@ -7,22 +7,33 @@
 
 import { useEffect, useCallback } from 'react'
 import { useExcalidrawStore } from '../stores/useExcalidrawStore'
-import { useWhiteboardConfigStore } from '../stores/useWhiteboardConfigStore'
+import { selectEffectiveReadOnly, useWhiteboardConfigStore } from '../stores/useWhiteboardConfigStore'
 import { useJWTStore } from '../stores/useJwtStore'
 
 export function useReadOnlyState() {
 	const { excalidrawAPI } = useExcalidrawStore()
-	const { isReadOnly, setReadOnly, isVersionPreview } = useWhiteboardConfigStore()
+	const {
+		isReadOnly,
+		isPassiveFollower,
+		setReadOnly,
+		isVersionPreview,
+	} = useWhiteboardConfigStore()
 	const { getJWT, parseJwt } = useJWTStore()
 
 	// Update read-only state based on JWT
 	const updateReadOnlyState = useCallback((readOnly: boolean) => {
-		const effectiveReadOnly = isVersionPreview ? true : readOnly
+		const storeReadOnly = isVersionPreview ? true : readOnly
+		const effectiveReadOnly = selectEffectiveReadOnly({
+			isReadOnly: storeReadOnly,
+			isPassiveFollower,
+			isVersionPreview,
+		})
 
 		// Set the read-only state in the store
-		setReadOnly(effectiveReadOnly)
+		setReadOnly(storeReadOnly)
 		console.log('[Permissions] User has', effectiveReadOnly ? 'read-only' : 'write', 'access', {
 			forcedByPreview: isVersionPreview && !readOnly,
+			forcedByFollower: isPassiveFollower,
 		})
 
 		// If we have the Excalidraw API, update the view mode directly as well
@@ -49,7 +60,7 @@ export function useReadOnlyState() {
 				console.error('[Permissions] Error updating view mode via Excalidraw API:', error)
 			}
 		}
-	}, [excalidrawAPI, setReadOnly, isVersionPreview])
+	}, [excalidrawAPI, isPassiveFollower, isVersionPreview, setReadOnly])
 
 	// Refresh read-only state from JWT
 	const refreshReadOnlyState = useCallback(async () => {
@@ -97,7 +108,7 @@ export function useReadOnlyState() {
 				console.warn('[Permissions] Skipping JWT refresh due to invalid fileId')
 			}
 		}
-	}, [excalidrawAPI, isReadOnly, updateReadOnlyState, refreshReadOnlyState])
+	}, [excalidrawAPI, isReadOnly, isPassiveFollower, updateReadOnlyState, refreshReadOnlyState])
 
 	// Initial setup - refresh read-only state from JWT
 	useEffect(() => {
@@ -115,6 +126,7 @@ export function useReadOnlyState() {
 
 	return {
 		isReadOnly,
+		effectiveReadOnly: selectEffectiveReadOnly({ isReadOnly, isPassiveFollower, isVersionPreview }),
 		updateReadOnlyState,
 		refreshReadOnlyState,
 	}
diff --git a/src/hooks/useSync.ts b/src/hooks/useSync.ts
index 68265add..823e28d0 100644
--- a/src/hooks/useSync.ts
+++ b/src/hooks/useSync.ts
@@ -5,26 +5,33 @@
 
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { throttle } from 'lodash'
-import { useWhiteboardConfigStore } from '../stores/useWhiteboardConfigStore'
-import { useSyncStore, logSyncResult } from '../stores/useSyncStore'
-import { useExcalidrawStore } from '../stores/useExcalidrawStore'
-import { useJWTStore } from '../stores/useJwtStore'
-import { useCollaborationStore } from '../stores/useCollaborationStore'
 import { generateUrl } from '@nextcloud/router'
 import { useShallow } from 'zustand/react/shallow'
-import logger from '../utils/logger'
-import { sanitizeAppStateForSync } from '../utils/sanitizeAppState'
 import type { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
 import type { BinaryFiles } from '@excalidraw/excalidraw/types/types'
 import type { CollaborationSocket } from '../types/collaboration'
 import type { WorkerInboundMessage } from '../types/protocol'
+import logger from '../utils/logger'
+import { sanitizeAppStateForSync } from '../utils/sanitizeAppState'
+import { yieldLocalSyncLeader } from './useLocalSyncLeader'
+import { useCollaborationStore } from '../stores/useCollaborationStore'
+import { useExcalidrawStore } from '../stores/useExcalidrawStore'
+import { useJWTStore } from '../stores/useJwtStore'
+import { useLocalSyncLeaderStore } from '../stores/useLocalSyncLeaderStore'
+import { useSyncStore, logSyncResult } from '../stores/useSyncStore'
+import { selectEffectiveReadOnly, useWhiteboardConfigStore } from '../stores/useWhiteboardConfigStore'
+import {
+	canRunAuthoritativeSync,
+	canRunOnlineAuthoritativeSync,
+	runServerApiSyncIfAllowed,
+	runWebSocketSyncIfAllowed,
+	type SyncAuthorityState,
+	type SyncableExcalidrawAPI,
+} from '../utils/syncExecution'
 
 enum SyncMessageType {
-	SceneInit = 'SCENE_INIT',
-	ImageAdd = 'IMAGE_ADD',
 	MouseLocation = 'MOUSE_LOCATION',
 	ViewportUpdate = 'VIEWPORT_UPDATE',
-	ServerBroadcast = 'server-broadcast',
 	ServerVolatileBroadcast = 'server-volatile-broadcast',
 }
 
@@ -34,10 +41,10 @@ const WEBSOCKET_SYNC_DELAY = 500
 const CURSOR_SYNC_DELAY = 50
 
 export function useSync() {
-	const { fileId, isReadOnly } = useWhiteboardConfigStore(
+	const { fileId, effectiveReadOnly } = useWhiteboardConfigStore(
 		useShallow(state => ({
 			fileId: state.fileId,
-			isReadOnly: state.isReadOnly,
+			effectiveReadOnly: selectEffectiveReadOnly(state),
 		})),
 	)
 
@@ -63,7 +70,7 @@ export function useSync() {
 
 	const { excalidrawAPI } = useExcalidrawStore(
 		useShallow(state => ({
-			excalidrawAPI: state.excalidrawAPI,
+			excalidrawAPI: state.excalidrawAPI as SyncableExcalidrawAPI | null,
 		})),
 	)
 
@@ -75,7 +82,26 @@ export function useSync() {
 		})),
 	)
 
-	// --- Worker Initialization ---
+	const { isLocalLeader } = useLocalSyncLeaderStore(
+		useShallow(state => ({
+			isLocalLeader: state.isLocalLeader,
+		})),
+	)
+
+	const authority = useMemo<SyncAuthorityState>(() => ({
+		isDedicatedSyncer,
+		isLocalLeader,
+		isReadOnly: effectiveReadOnly,
+	}), [effectiveReadOnly, isDedicatedSyncer, isLocalLeader])
+
+	const cachedStateRef = useRef<{ elements: readonly ExcalidrawElement[]; files: BinaryFiles }>({
+		elements: [],
+		files: {} as BinaryFiles,
+	})
+	const prevSyncedFilesRef = useRef<Record<string, string>>({})
+	const lastBroadcastedViewportRef = useRef({ scrollX: 0, scrollY: 0, zoom: 1 })
+	const canExecuteSyncRef = useRef(canRunAuthoritativeSync(authority))
+
 	useEffect(() => {
 		initializeWorker()
 		return () => {
@@ -83,161 +109,130 @@ export function useSync() {
 		}
 	}, [initializeWorker, terminateWorker])
 
-	// Keep track of previously synced files to avoid resending unchanged files
-	const prevSyncedFilesRef = useRef<Record<string, string>>({})
-
-	// Reset prevSyncedFilesRef when fileId changes to prevent leakage across files
 	useEffect(() => {
 		prevSyncedFilesRef.current = {}
-	}, [fileId]) // Depends on fileId from the hook scope
-
-	// --- Sync Logic ---
+		lastBroadcastedViewportRef.current = { scrollX: 0, scrollY: 0, zoom: 1 }
+	}, [fileId])
 
-	// Saves current state to IndexedDB
 	const doSyncToLocal = useCallback(async () => {
-		if (!isWorkerReady || !worker || !fileId || !excalidrawAPI || isReadOnly) {
+		if (!isWorkerReady || !worker || !fileId || !excalidrawAPI || !canRunAuthoritativeSync(authority)) {
 			return
 		}
 
 		try {
-			const elements = excalidrawAPI.getSceneElementsIncludingDeleted() as readonly ExcalidrawElement[]
-			const appState = excalidrawAPI.getAppState()
-			const files = excalidrawAPI.getFiles() as BinaryFiles
-			const filteredAppState = sanitizeAppStateForSync(appState)
-
-			const message: WorkerInboundMessage = { type: 'SYNC_TO_LOCAL', fileId, elements, files, appState: filteredAppState }
+			const message: WorkerInboundMessage = {
+				type: 'SYNC_TO_LOCAL',
+				fileId,
+				elements: excalidrawAPI.getSceneElementsIncludingDeleted(),
+				files: excalidrawAPI.getFiles(),
+				appState: sanitizeAppStateForSync(excalidrawAPI.getAppState()),
+			}
 			worker.postMessage(message)
 			logSyncResult('local', { status: 'syncing' })
 		} catch (error) {
 			logger.error('[Sync] Local sync failed:', error)
 			logSyncResult('local', { status: 'error', error: error instanceof Error ? error.message : String(error) })
 		}
-	}, [isWorkerReady, worker, fileId, excalidrawAPI, isReadOnly])
+	}, [authority, excalidrawAPI, fileId, isWorkerReady, worker])
 
-	// Saves current state to the Nextcloud server API
 	const doSyncToServerAPI = useCallback(async (forceSync = false) => {
-		logger.debug('[Sync] doSyncToServerAPI called', { forceSync, isDedicatedSyncer, collabStatus })
-
-		// Allow force sync for final save, otherwise check normal conditions
-		if (!forceSync && (!isWorkerReady || !worker || !fileId || !excalidrawAPI || !isDedicatedSyncer || isReadOnly || collabStatus !== 'online')) {
-			logger.debug('[Sync] Skipping server sync - normal conditions not met', {
-				isWorkerReady, worker: !!worker, fileId, excalidrawAPI: !!excalidrawAPI, isDedicatedSyncer, isReadOnly, collabStatus,
-			})
+		logger.debug('[Sync] doSyncToServerAPI called', {
+			forceSync,
+			isDedicatedSyncer,
+			isLocalLeader,
+			collabStatus,
+		})
+
+		if (!isWorkerReady || !worker || !fileId || !excalidrawAPI) {
 			return
 		}
 
-		// For force sync, only check minimum requirements
-		if (forceSync && (!isWorkerReady || !worker || !fileId || !excalidrawAPI || isReadOnly)) {
-			logger.debug('[Sync] Skipping forced server sync - minimum requirements not met', {
-				isWorkerReady, worker: !!worker, fileId, excalidrawAPI: !!excalidrawAPI, isReadOnly,
+		const hasAuthority = canRunAuthoritativeSync(authority)
+		if (!hasAuthority || (!forceSync && collabStatus !== 'online')) {
+			logger.debug('[Sync] Skipping server sync - authority or connection missing', {
+				forceSync,
+				hasAuthority,
+				collabStatus,
+				fileId,
+				isWorkerReady,
+				hasWorker: Boolean(worker),
+				hasExcalidrawAPI: Boolean(excalidrawAPI),
 			})
 			return
 		}
 
 		logSyncResult('server', { status: 'syncing API' })
-		logger.debug('[Sync] Sending SYNC_TO_SERVER message to worker')
 
 		try {
-			const jwt = await getJWT()
-			if (!jwt) throw new Error('JWT token missing for server API sync.')
-			if (useWhiteboardConfigStore.getState().fileId !== fileId) {
-				throw new Error('FileId changed during server sync preparation.')
-			}
-
-			const elements = excalidrawAPI.getSceneElementsIncludingDeleted() as readonly ExcalidrawElement[]
-			const files = excalidrawAPI.getFiles() as BinaryFiles
-
-			const message: WorkerInboundMessage = {
-				type: 'SYNC_TO_SERVER',
+			await runServerApiSyncIfAllowed({
+				forceSync,
+				authority,
+				collabStatus,
 				fileId,
-				url: generateUrl(`apps/whiteboard/${fileId}`),
-				jwt,
-				elements,
-				files,
-			}
-
-			worker.postMessage(message)
+				excalidrawAPI,
+				getJWT,
+				worker,
+				isWorkerReady,
+				currentFileId: useWhiteboardConfigStore.getState().fileId,
+			})
 			logger.debug('[Sync] SYNC_TO_SERVER message sent to worker')
 		} catch (error) {
 			logger.error('[Sync] Server API sync failed:', error)
 			logSyncResult('server', { status: 'error API', error: error instanceof Error ? error.message : String(error) })
 		}
-	}, [isWorkerReady, worker, fileId, excalidrawAPI, isDedicatedSyncer, isReadOnly, collabStatus, getJWT])
-
-	// Simple hash function for file content
-	const hashFileContent = (content: string): string => {
-		if (!content) return ''
-		const len = content.length
-		const start = content.substring(0, 20)
-		const end = content.substring(Math.max(0, len - 20))
-		return `${len}:${start}:${end}`
-	}
-
-	// Syncs scene and files via WebSocket
-	const doSyncViaWebSocket = useCallback(async () => {
-		if (!fileId || !excalidrawAPI || !socket || collabStatus !== 'online' || isReadOnly) {
-			return
-		}
+	}, [
+		authority,
+		collabStatus,
+		excalidrawAPI,
+		fileId,
+		getJWT,
+		isDedicatedSyncer,
+		isLocalLeader,
+		isWorkerReady,
+		worker,
+	])
 
+	const doSyncViaWebSocket = useCallback(async () => {
 		try {
-			const elements = excalidrawAPI.getSceneElementsIncludingDeleted() as readonly ExcalidrawElement[]
-			const files = excalidrawAPI.getFiles() as BinaryFiles
-
-			// 1. Send Scene
-			const sceneData = { type: SyncMessageType.SceneInit, payload: { elements } }
-			const sceneJson = JSON.stringify(sceneData)
-			const sceneBuffer = new TextEncoder().encode(sceneJson)
-			socket.emit(SyncMessageType.ServerBroadcast, `${fileId}`, sceneBuffer, [])
-
-			// 2. Send only new or changed files
-			if (files && Object.keys(files).length > 0) {
-				const currentFileHashes: Record<string, string> = {}
-				for (const fileIdKey in files) {
-					const file = files[fileIdKey]
-					if (!file?.dataURL) continue
-					const currentHash = hashFileContent(file.dataURL)
-					currentFileHashes[fileIdKey] = currentHash
-					if (prevSyncedFilesRef.current[fileIdKey] !== currentHash) {
-						const fileData = { type: SyncMessageType.ImageAdd, payload: { file } }
-						const fileJson = JSON.stringify(fileData)
-						const fileBuffer = new TextEncoder().encode(fileJson)
-						socket.emit(SyncMessageType.ServerBroadcast, `${fileId}`, fileBuffer, [])
-					}
-				}
-				prevSyncedFilesRef.current = currentFileHashes
-				logSyncResult('websocket', { status: 'sync success', elementsCount: elements.length })
-			} else {
-				logSyncResult('websocket', { status: 'sync success', elementsCount: elements.length })
-				prevSyncedFilesRef.current = {}
+			const { sent, elementsCount, nextFileHashes } = runWebSocketSyncIfAllowed({
+				authority,
+				collabStatus,
+				fileId,
+				excalidrawAPI,
+				socket,
+				prevSyncedFiles: prevSyncedFilesRef.current,
+			})
+
+			if (!sent) {
+				return
 			}
+
+			prevSyncedFilesRef.current = nextFileHashes
+			logSyncResult('websocket', { status: 'sync success', elementsCount })
 		} catch (error) {
 			logger.error('[Sync] WebSocket sync failed:', error)
 			logSyncResult('websocket', { status: 'sync error', error: error instanceof Error ? error.message : String(error) })
 		}
-	}, [fileId, excalidrawAPI, socket, collabStatus, isReadOnly])
+	}, [authority, collabStatus, excalidrawAPI, fileId, socket])
 
 	const throttledSyncToLocal = useMemo(() =>
-		// Use both leading and trailing edge executions to ensure changes are saved immediately and after delay
 		throttle(doSyncToLocal, LOCAL_SYNC_DELAY, { leading: true, trailing: true })
 	, [doSyncToLocal])
 
 	const throttledSyncToServerAPI = useMemo(() =>
-		// Use both leading and trailing edge executions for server sync
 		throttle(doSyncToServerAPI, SERVER_API_SYNC_DELAY, { leading: true, trailing: true })
 	, [doSyncToServerAPI])
 
 	const throttledSyncViaWebSocket = useMemo(() =>
-		// Use both leading and trailing edge executions for WebSocket sync
 		throttle(doSyncViaWebSocket, WEBSOCKET_SYNC_DELAY, { leading: true, trailing: true })
 	, [doSyncViaWebSocket])
 
-	// --- Cursor Sync ---
 	const doSyncCursors = useCallback(
 		(payload: {
 			pointer: { x: number; y: number; tool: 'pointer' | 'laser' }
 			button: 'down' | 'up'
 		}) => {
-			if (!fileId || !excalidrawAPI || !socket || collabStatus !== 'online') {
+			if (!fileId || !excalidrawAPI || !socket || !canRunOnlineAuthoritativeSync(authority, collabStatus)) {
 				return
 			}
 
@@ -250,8 +245,7 @@ export function useSync() {
 						selectedElementIds: excalidrawAPI.getAppState().selectedElementIds,
 					},
 				}
-				const json = JSON.stringify(data)
-				const encodedBuffer = new TextEncoder().encode(json)
+				const encodedBuffer = new TextEncoder().encode(JSON.stringify(data))
 				socket.emit(SyncMessageType.ServerVolatileBroadcast, `${fileId}`, encodedBuffer)
 				logSyncResult('cursor', { status: 'sync success' })
 			} catch (error) {
@@ -259,54 +253,48 @@ export function useSync() {
 				logSyncResult('cursor', { status: 'sync error', error: error instanceof Error ? error.message : String(error) })
 			}
 		},
-		[fileId, excalidrawAPI, socket, collabStatus],
+		[authority, collabStatus, excalidrawAPI, fileId, socket],
 	)
 
-	// --- Viewport Sync ---
-	const lastBroadcastedViewportRef = useRef({ scrollX: 0, scrollY: 0, zoom: 1 })
-
 	const doSyncViewport = useCallback(
 		async (appState: { scrollX: number; scrollY: number; zoom: { value: number } }) => {
-			if (!fileId || !excalidrawAPI || !socket || collabStatus !== 'online') {
+			if (!fileId || !excalidrawAPI || !socket || !canRunOnlineAuthoritativeSync(authority, collabStatus)) {
 				return
 			}
 
 			const { scrollX, scrollY, zoom } = appState
 			const lastViewport = lastBroadcastedViewportRef.current
-
-			// Only broadcast if viewport has changed significantly
 			if (
-				Math.abs(scrollX - lastViewport.scrollX) > 5
-				|| Math.abs(scrollY - lastViewport.scrollY) > 5
-				|| Math.abs(zoom.value - lastViewport.zoom) > 0.01
+				Math.abs(scrollX - lastViewport.scrollX) <= 5
+				&& Math.abs(scrollY - lastViewport.scrollY) <= 5
+				&& Math.abs(zoom.value - lastViewport.zoom) <= 0.01
 			) {
-				try {
-					// Get current user ID for viewport tracking
-					const { getJWT, parseJwt } = useJWTStore.getState()
-					const jwt = await getJWT()
-					const jwtPayload = jwt ? parseJwt(jwt) : null
-					const userId = jwtPayload?.userid || 'unknown'
-
-					const data = {
-						type: SyncMessageType.ViewportUpdate,
-						payload: {
-							userId,
-							scrollX,
-							scrollY,
-							zoom: zoom.value,
-						},
-					}
-					const json = JSON.stringify(data)
-					const encodedBuffer = new TextEncoder().encode(json)
-					socket.emit(SyncMessageType.ServerVolatileBroadcast, `${fileId}`, encodedBuffer)
-
-					lastBroadcastedViewportRef.current = { scrollX, scrollY, zoom: zoom.value }
-				} catch (error) {
-					console.error('[Sync] Error syncing viewport:', error)
+				return
+			}
+
+			try {
+				const { getJWT: resolveJWT, parseJwt } = useJWTStore.getState()
+				const jwt = await resolveJWT()
+				const jwtPayload = jwt ? parseJwt(jwt) : null
+				const userId = jwtPayload?.userid || 'unknown'
+
+				const data = {
+					type: SyncMessageType.ViewportUpdate,
+					payload: {
+						userId,
+						scrollX,
+						scrollY,
+						zoom: zoom.value,
+					},
 				}
+				const encodedBuffer = new TextEncoder().encode(JSON.stringify(data))
+				socket.emit(SyncMessageType.ServerVolatileBroadcast, `${fileId}`, encodedBuffer)
+				lastBroadcastedViewportRef.current = { scrollX, scrollY, zoom: zoom.value }
+			} catch (error) {
+				logger.error('[Sync] Error syncing viewport:', error)
 			}
 		},
-		[fileId, excalidrawAPI, socket, collabStatus],
+		[authority, collabStatus, excalidrawAPI, fileId, socket],
 	)
 
 	const throttledSyncCursors = useMemo(() =>
@@ -317,32 +305,65 @@ export function useSync() {
 		throttle(doSyncViewport, CURSOR_SYNC_DELAY, { leading: true, trailing: true })
 	, [doSyncViewport])
 
-	// --- Event Handlers ---
+	const cancelThrottledSyncs = useCallback(() => {
+		throttledSyncToLocal.cancel()
+		throttledSyncToServerAPI.cancel()
+		throttledSyncViaWebSocket.cancel()
+		throttledSyncCursors.cancel()
+		throttledSyncViewport.cancel()
+	}, [
+		throttledSyncCursors,
+		throttledSyncToLocal,
+		throttledSyncToServerAPI,
+		throttledSyncViaWebSocket,
+		throttledSyncViewport,
+	])
+
+	useEffect(() => {
+		const nextCanExecute = canRunAuthoritativeSync(authority)
+		if (nextCanExecute !== canExecuteSyncRef.current) {
+			logger.debug('[Sync] Authoritative sync execution state changed', {
+				isDedicatedSyncer,
+				isLocalLeader,
+				effectiveReadOnly,
+				nextCanExecute,
+			})
+			if (!nextCanExecute) {
+				cancelThrottledSyncs()
+			}
+			canExecuteSyncRef.current = nextCanExecute
+		}
+	}, [authority, cancelThrottledSyncs, effectiveReadOnly, isDedicatedSyncer, isLocalLeader])
+
 	const onChange = useCallback(() => {
-		// Update cached state immediately on every change
 		if (excalidrawAPI) {
-			const elements = excalidrawAPI.getSceneElementsIncludingDeleted()
-			const files = excalidrawAPI.getFiles()
-			cachedStateRef.current = { elements, files }
+			cachedStateRef.current = {
+				elements: excalidrawAPI.getSceneElementsIncludingDeleted(),
+				files: excalidrawAPI.getFiles(),
+			}
 		}
 
 		throttledSyncToLocal()
 		throttledSyncToServerAPI()
 		throttledSyncViaWebSocket()
 
-		// Sync viewport changes
 		if (excalidrawAPI) {
-			const appState = excalidrawAPI.getAppState()
-			throttledSyncViewport(appState)
+			throttledSyncViewport(excalidrawAPI.getAppState())
 		}
 
 		logger.debug('[Sync] Changes detected, triggered sync operations')
-	}, [throttledSyncToLocal, throttledSyncToServerAPI, throttledSyncViaWebSocket, throttledSyncViewport, excalidrawAPI])
+	}, [
+		excalidrawAPI,
+		throttledSyncToLocal,
+		throttledSyncToServerAPI,
+		throttledSyncViaWebSocket,
+		throttledSyncViewport,
+	])
 
 	const onPointerUpdate = useCallback(
 		(payload: {
-			pointersMap: Map<string, { x: number; y: number }>,
-			pointer: { x: number; y: number; tool: 'laser' | 'pointer' },
+			pointersMap: Map<string, { x: number; y: number }>
+			pointer: { x: number; y: number; tool: 'laser' | 'pointer' }
 			button: 'down' | 'up'
 		}) => {
 			if (payload.pointersMap.size < 2) {
@@ -352,113 +373,64 @@ export function useSync() {
 		[throttledSyncCursors],
 	)
 
-	// Capture syncer state immediately to avoid closure issues
-	const isSyncerRef = useRef(isDedicatedSyncer)
-	useEffect(() => {
-		if (isDedicatedSyncer !== isSyncerRef.current) {
-			// eslint-disable-next-line no-console
-			console.log('[Sync] SYNCER STATUS:', isDedicatedSyncer ? 'DESIGNATED AS SYNCER' : 'NOT SYNCER')
-			isSyncerRef.current = isDedicatedSyncer
-		}
-	}, [isDedicatedSyncer])
-
-	// Cache the latest state for final sync - update on EVERY change
-	const cachedStateRef = useRef<{ elements: readonly ExcalidrawElement[]; files: BinaryFiles }>({ elements: [], files: {} as BinaryFiles })
-
-	// Direct sync when leaving - synchronous to ensure it completes
 	const doFinalServerSync = useCallback(() => {
-		if (!fileId || !isSyncerRef.current) {
+		if (!fileId || !canExecuteSyncRef.current) {
 			return
 		}
 
-		// eslint-disable-next-line no-console
-		console.log('[Sync] Executing final sync on page leave')
-
 		try {
-			// Get JWT from store - it's stored in tokens[fileId]
 			const jwtState = useJWTStore.getState()
 			const jwt = jwtState.tokens[fileId]
-
 			if (!jwt) {
 				return
 			}
 
-			// Use CACHED state instead of trying to get it now (might be cleared already)
 			const { elements, files } = cachedStateRef.current
-			// eslint-disable-next-line no-console
-			console.log('[Sync] Using cached state with', elements.length, 'elements')
-
-			const url = generateUrl(`apps/whiteboard/${fileId}`)
-
-			const data = JSON.stringify({
-				data: { elements, files: files || {} },
-			})
-
-			// Use synchronous XMLHttpRequest (works in beforeunload)
 			const xhr = new XMLHttpRequest()
-			xhr.open('PUT', url, false) // false = synchronous
+			xhr.open('PUT', generateUrl(`apps/whiteboard/${fileId}`), false)
 			xhr.setRequestHeader('Content-Type', 'application/json')
 			xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
 			xhr.setRequestHeader('Authorization', `Bearer ${jwt}`)
-
-			xhr.send(data)
-			// eslint-disable-next-line no-console
-			console.log('[Sync] Final sync done, status:', xhr.status)
+			xhr.send(JSON.stringify({
+				data: {
+					elements,
+					files: files || {},
+				},
+			}))
+
+			logger.debug('[Sync] Final sync completed', { status: xhr.status, fileId })
 		} catch (error) {
-			// eslint-disable-next-line no-console
-			console.error('[Sync] Final sync failed:', error)
+			logger.error('[Sync] Final sync failed:', error)
 		}
 	}, [fileId])
 
-	useEffect(() => {
-		const handleBeforeUnload = () => {
-			if (excalidrawAPI && !isReadOnly && isSyncerRef.current) {
-				// eslint-disable-next-line no-console
-				console.log('[Sync] Page unloading - syncing as dedicated syncer')
-				// Cancel any pending throttled trailing call FIRST
-				throttledSyncToLocal.cancel()
-				throttledSyncToServerAPI.cancel()
-				// Call the unthrottled versions directly
-				doSyncToLocal()
-				doFinalServerSync()
-			}
+	const flushAndYieldLeadership = useCallback((reason: string) => {
+		const shouldFlush = canExecuteSyncRef.current && excalidrawAPI && !effectiveReadOnly
+		cancelThrottledSyncs()
+
+		if (shouldFlush) {
+			doSyncToLocal()
+			doFinalServerSync()
 		}
 
-		// Also handle visibility change as backup for mobile/tabs
-		const handleVisibilityChange = () => {
-			if (document.visibilityState === 'hidden' && isSyncerRef.current && excalidrawAPI && !isReadOnly) {
-				throttledSyncToLocal.cancel()
-				throttledSyncToServerAPI.cancel()
-				doSyncToLocal()
-				doFinalServerSync()
-			}
+		if (canExecuteSyncRef.current) {
+			yieldLocalSyncLeader(reason)
+		}
+	}, [cancelThrottledSyncs, doFinalServerSync, doSyncToLocal, effectiveReadOnly, excalidrawAPI])
+
+	useEffect(() => {
+		const handleBeforeUnload = () => {
+			flushAndYieldLeadership('beforeunload')
 		}
 
 		window.addEventListener('beforeunload', handleBeforeUnload)
-		document.addEventListener('visibilitychange', handleVisibilityChange)
 
-		// Cleanup function for component unmount
 		return () => {
 			window.removeEventListener('beforeunload', handleBeforeUnload)
-			document.removeEventListener('visibilitychange', handleVisibilityChange)
-
-			// If we're the dedicated syncer and unmounting, do a final sync
-			if (isSyncerRef.current && excalidrawAPI && !isReadOnly) {
-				// Cancel pending throttled calls
-				throttledSyncToLocal.cancel()
-				throttledSyncToServerAPI.cancel()
-				// Do final syncs
-				doSyncToLocal()
-				doFinalServerSync()
-			}
-
-			// Cancel all throttled functions to prevent them from running after unmount
-			throttledSyncToLocal.cancel()
-			throttledSyncToServerAPI.cancel()
-			throttledSyncViaWebSocket.cancel()
-			throttledSyncCursors.cancel()
+			flushAndYieldLeadership('unmount')
+			cancelThrottledSyncs()
 		}
-	}, [doSyncToLocal, doSyncToServerAPI, doFinalServerSync, throttledSyncToLocal, throttledSyncToServerAPI, throttledSyncViaWebSocket, throttledSyncCursors, excalidrawAPI, isReadOnly])
+	}, [cancelThrottledSyncs, flushAndYieldLeadership])
 
 	return { onChange, onPointerUpdate }
 }
diff --git a/src/hooks/useTableInsertion.tsx b/src/hooks/useTableInsertion.tsx
index cd57d5da..6f1862dc 100644
--- a/src/hooks/useTableInsertion.tsx
+++ b/src/hooks/useTableInsertion.tsx
@@ -7,7 +7,7 @@ import Vue from 'vue'
 import { mdiTable } from '@mdi/js'
 import { t } from '@nextcloud/l10n'
 import { useExcalidrawStore } from '../stores/useExcalidrawStore'
-import { useWhiteboardConfigStore } from '../stores/useWhiteboardConfigStore'
+import { selectEffectiveReadOnly, useWhiteboardConfigStore } from '../stores/useWhiteboardConfigStore'
 import { useShallow } from 'zustand/react/shallow'
 // @ts-expect-error - Vue component import
 import TableEditorDialog from '../components/TableEditorDialog.vue'
@@ -27,6 +27,9 @@ export function useTableInsertion() {
 			excalidrawAPI: state.excalidrawAPI as (ExcalidrawImperativeAPI | null),
 		})),
 	)
+	const { effectiveReadOnly } = useWhiteboardConfigStore(useShallow((state) => ({
+		effectiveReadOnly: selectEffectiveReadOnly(state),
+	})))
 
 	// Track last click for double-click detection
 	const lastClickRef = useRef<{ elementId: string; timestamp: number } | null>(null)
@@ -70,7 +73,7 @@ export function useTableInsertion() {
 	const editTable = useCallback(async (tableElement: ExcalidrawImageElement) => {
 		// Get fresh values from stores to avoid stale closures
 		const currentAPI = useExcalidrawStore.getState().excalidrawAPI as ExcalidrawImperativeAPI | null
-		const currentReadOnly = useWhiteboardConfigStore.getState().isReadOnly
+		const currentReadOnly = selectEffectiveReadOnly(useWhiteboardConfigStore.getState())
 
 		if (!currentAPI) {
 			console.error('Excalidraw API is not available')
@@ -155,7 +158,7 @@ export function useTableInsertion() {
 	const insertTable = useCallback(async () => {
 		// Get fresh values from stores to avoid stale closures
 		const currentAPI = useExcalidrawStore.getState().excalidrawAPI as ExcalidrawImperativeAPI | null
-		const currentReadOnly = useWhiteboardConfigStore.getState().isReadOnly
+		const currentReadOnly = selectEffectiveReadOnly(useWhiteboardConfigStore.getState())
 
 		if (!currentAPI) {
 			console.error('Excalidraw API is not available')
@@ -283,6 +286,11 @@ export function useTableInsertion() {
 	 * Only renders if Text app is available and compatible.
 	 */
 	const renderTable = useCallback(async () => {
+		if (effectiveReadOnly) {
+			document.querySelector('.table-container')?.remove()
+			return
+		}
+
 		const isCompatible = await checkTextAppCompatibility()
 		if (!isCompatible) {
 			return
@@ -294,7 +302,7 @@ export function useTableInsertion() {
 			label: t('whiteboard', 'Insert table'),
 			onClick: insertTable,
 		})
-	}, [insertTable])
+	}, [effectiveReadOnly, insertTable])
 
 	useEffect(() => {
 		if (excalidrawAPI) renderTable()
diff --git a/src/hooks/useTimer.ts b/src/hooks/useTimer.ts
index bb62bd9e..efb3d28d 100644
--- a/src/hooks/useTimer.ts
+++ b/src/hooks/useTimer.ts
@@ -7,7 +7,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useCollaborationStore } from '../stores/useCollaborationStore'
-import { useWhiteboardConfigStore } from '../stores/useWhiteboardConfigStore'
+import { selectEffectiveReadOnly, useWhiteboardConfigStore } from '../stores/useWhiteboardConfigStore'
 import { useShallow } from 'zustand/react/shallow'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
@@ -108,8 +108,8 @@ export function useTimer({ fileId }: UseTimerProps): UseTimerResult {
 		status: state.status,
 	})))
 
-	const { isReadOnly } = useWhiteboardConfigStore(useShallow(state => ({
-		isReadOnly: state.isReadOnly,
+	const { effectiveReadOnly } = useWhiteboardConfigStore(useShallow(state => ({
+		effectiveReadOnly: selectEffectiveReadOnly(state),
 	})))
 
 	const isConnected = connectionStatus === 'online' && socket?.connected === true
@@ -223,7 +223,7 @@ export function useTimer({ fileId }: UseTimerProps): UseTimerResult {
 			handleTimerError(t('whiteboard', 'Missing whiteboard identifier'))
 			return false
 		}
-		if (isReadOnly) {
+		if (effectiveReadOnly) {
 			handleTimerError(t('whiteboard', 'You need write access to control the timer'))
 			return false
 		}
@@ -233,7 +233,7 @@ export function useTimer({ fileId }: UseTimerProps): UseTimerResult {
 		}
 		console.debug(`[Timer] Proceeding with action "${action}"`)
 		return true
-	}, [fileIdStr, isReadOnly, isConnected, socket, handleTimerError])
+	}, [effectiveReadOnly, fileIdStr, isConnected, socket, handleTimerError])
 
 	const startTimer = useCallback((durationMs: number) => {
 		if (!ensureCanControl('start')) return
@@ -279,7 +279,7 @@ export function useTimer({ fileId }: UseTimerProps): UseTimerResult {
 		...timerState,
 		displayRemainingMs,
 		isConnected,
-		canControl: isConnected && !isReadOnly,
+		canControl: isConnected && !effectiveReadOnly,
 		error,
 		startTimer,
 		pauseTimer,
diff --git a/src/stores/useLocalSyncLeaderStore.ts b/src/stores/useLocalSyncLeaderStore.ts
new file mode 100644
index 00000000..ed941113
--- /dev/null
+++ b/src/stores/useLocalSyncLeaderStore.ts
@@ -0,0 +1,79 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { create } from 'zustand'
+
+export type LocalSyncLeaderSnapshot = {
+	isLocalLeader: boolean
+	isPassiveFollower: boolean
+	leaderTabId: string | null
+	leaderHeartbeatAt: number | null
+}
+
+interface LocalSyncLeaderState extends LocalSyncLeaderSnapshot {
+	tabId: string
+	leaseKey: string | null
+	userId: string | null
+	setScope: (scope: { leaseKey: string | null; userId: string | null }) => void
+	setLeadershipSnapshot: (snapshot: LocalSyncLeaderSnapshot) => void
+	resetLeadership: () => void
+	resetStore: () => void
+}
+
+let stableTabId: string | null = null
+
+export const getStableLocalSyncTabId = () => {
+	if (!stableTabId) {
+		stableTabId = globalThis.crypto?.randomUUID?.()
+			?? `local-sync-tab-${Date.now()}-${Math.random().toString(16).slice(2)}`
+	}
+
+	return stableTabId
+}
+
+const initialLeadershipSnapshot: LocalSyncLeaderSnapshot = {
+	isLocalLeader: false,
+	isPassiveFollower: false,
+	leaderTabId: null,
+	leaderHeartbeatAt: null,
+}
+
+export const useLocalSyncLeaderStore = create<LocalSyncLeaderState>()((set) => ({
+	tabId: getStableLocalSyncTabId(),
+	leaseKey: null,
+	userId: null,
+	...initialLeadershipSnapshot,
+
+	setScope: ({ leaseKey, userId }) => set({ leaseKey, userId }),
+	setLeadershipSnapshot: (snapshot) => set(snapshot),
+	resetLeadership: () => set(initialLeadershipSnapshot),
+	resetStore: () => set({
+		leaseKey: null,
+		userId: null,
+		...initialLeadershipSnapshot,
+	}),
+}))
+
+type WhiteboardTestHooks = {
+	localSyncLeaderStore?: typeof useLocalSyncLeaderStore
+}
+
+declare global {
+	interface Window {
+		__whiteboardTest?: boolean
+		__whiteboardTestHooks?: WhiteboardTestHooks & Record<string, unknown>
+	}
+}
+
+const attachTestHooks = () => {
+	if (typeof window === 'undefined' || !window.__whiteboardTest) {
+		return
+	}
+
+	window.__whiteboardTestHooks = window.__whiteboardTestHooks || {}
+	window.__whiteboardTestHooks.localSyncLeaderStore = useLocalSyncLeaderStore
+}
+
+attachTestHooks()
diff --git a/src/stores/useWhiteboardConfigStore.ts b/src/stores/useWhiteboardConfigStore.ts
index 3a726c4e..f0f5a2ac 100644
--- a/src/stores/useWhiteboardConfigStore.ts
+++ b/src/stores/useWhiteboardConfigStore.ts
@@ -15,6 +15,7 @@ interface WhiteboardConfigState {
 	fileName: string
 	publicSharingToken: string | null
 	isReadOnly: boolean // Single source of truth for read-only state, determined by JWT
+	isPassiveFollower: boolean
 	isEmbedded: boolean
 	initialDataPromise: InitialDataPromise
 	pendingInitialDataPromises: InitialDataPromise[]
@@ -53,6 +54,7 @@ interface WhiteboardConfigState {
 
 	// Permission actions
 	setReadOnly: (readOnly: boolean) => void
+	setPassiveFollower: (isPassiveFollower: boolean) => void
 }
 
 // Create the store without persistence
@@ -62,6 +64,7 @@ export const useWhiteboardConfigStore = create<WhiteboardConfigState>()((set, ge
 	fileName: '',
 	publicSharingToken: null,
 	isReadOnly: false,
+	isPassiveFollower: false,
 	isEmbedded: false,
 	initialDataPromise: createResolvablePromise(),
 	pendingInitialDataPromises: [],
@@ -124,6 +127,7 @@ export const useWhiteboardConfigStore = create<WhiteboardConfigState>()((set, ge
 			fileVersion: null,
 			// Reset these values
 			isReadOnly: false,
+			isPassiveFollower: false,
 			initialDataPromise: createResolvablePromise(),
 			pendingInitialDataPromises: [],
 			zenModeEnabled: false,
@@ -144,8 +148,14 @@ export const useWhiteboardConfigStore = create<WhiteboardConfigState>()((set, ge
 		}
 		set({ isReadOnly: readOnly })
 	},
+
+	setPassiveFollower: (isPassiveFollower: boolean) => set({ isPassiveFollower }),
 }))
 
+export const selectEffectiveReadOnly = (
+	state: Pick<WhiteboardConfigState, 'isReadOnly' | 'isPassiveFollower' | 'isVersionPreview'>,
+) => state.isReadOnly || state.isPassiveFollower || state.isVersionPreview
+
 type WhiteboardTestHooks = {
 	whiteboardConfigStore?: typeof useWhiteboardConfigStore
 	blockInitialData?: boolean
diff --git a/src/styles/globals/_layout.scss b/src/styles/globals/_layout.scss
index 7e305384..3154039a 100644
--- a/src/styles/globals/_layout.scss
+++ b/src/styles/globals/_layout.scss
@@ -115,7 +115,8 @@
 	}
 }
 
-.network-status {
+.network-status,
+.sync-tab-status {
 	display: flex;
 	align-items: center;
 	padding: 8px;
@@ -202,6 +203,18 @@
 		border: 1px solid rgba(76, 175, 80, 0.4);
 	}
 
+	&--leader {
+		background-color: rgba(34, 197, 94, 0.18);
+		color: rgb(21, 128, 61);
+		border: 1px solid rgba(34, 197, 94, 0.38);
+	}
+
+	&--passive {
+		background-color: rgba(59, 130, 246, 0.16);
+		color: rgb(29, 78, 216);
+		border: 1px solid rgba(59, 130, 246, 0.32);
+	}
+
 	&--expanded {
 		max-width: 150px;
 		padding: 8px 12px;
@@ -369,7 +382,8 @@
 }
 
 @media (prefers-reduced-motion) {
-	.network-status {
+	.network-status,
+	.sync-tab-status {
 		transition: none;
 		animation: none !important;
 
@@ -381,7 +395,8 @@
 
 /* Responsive adjustments for mobile */
 @media (max-width: 768px) {
-	.network-status {
+	.network-status,
+	.sync-tab-status {
 		bottom: 90px;
 		inset-inline-end: 8px;
 		padding: 6px;
diff --git a/src/styles/modes/_public-share.scss b/src/styles/modes/_public-share.scss
index e8149f5c..35e03316 100644
--- a/src/styles/modes/_public-share.scss
+++ b/src/styles/modes/_public-share.scss
@@ -45,6 +45,7 @@
 }
 
 #body-public.whiteboard-public-share .network-status,
+#body-public.whiteboard-public-share .sync-tab-status,
 #body-public.whiteboard-public-share .grid-toggle-button {
 	display: none;
 }
diff --git a/src/utils/collaborationBootstrap.ts b/src/utils/collaborationBootstrap.ts
new file mode 100644
index 00000000..eb2467e8
--- /dev/null
+++ b/src/utils/collaborationBootstrap.ts
@@ -0,0 +1,167 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
+import type { BinaryFiles } from '@excalidraw/excalidraw/types/types'
+import type { CollaborationSocket } from '../types/collaboration'
+
+enum BroadcastType {
+	SceneInit = 'SCENE_INIT',
+	ImageAdd = 'IMAGE_ADD',
+}
+
+type BootstrapCapableSocket = Pick<CollaborationSocket, 'emit'>
+
+type BootstrapCapableExcalidrawAPI = {
+	getSceneElementsIncludingDeleted?: () => readonly ExcalidrawElement[]
+	getFiles: () => BinaryFiles
+}
+
+export const canRespondToBootstrapTraffic = ({
+	isDedicatedSyncer,
+	isLocalLeader,
+	fileId,
+	excalidrawAPI,
+	socket,
+}: {
+	isDedicatedSyncer: boolean
+	isLocalLeader: boolean
+	fileId: number
+	excalidrawAPI: BootstrapCapableExcalidrawAPI | null
+	socket: (BootstrapCapableSocket & { connected?: boolean }) | null
+}) => (
+	Boolean(fileId)
+	&& Boolean(excalidrawAPI)
+	&& Boolean(socket?.connected)
+	&& isDedicatedSyncer
+	&& isLocalLeader
+)
+
+export const sendSceneBootstrapToRoom = ({
+	socket,
+	fileId,
+	excalidrawAPI,
+}: {
+	socket: BootstrapCapableSocket
+	fileId: number
+	excalidrawAPI: Required<Pick<BootstrapCapableExcalidrawAPI, 'getSceneElementsIncludingDeleted'>>
+}) => {
+	const sceneData = {
+		type: BroadcastType.SceneInit,
+		payload: {
+			elements: excalidrawAPI.getSceneElementsIncludingDeleted(),
+		},
+	}
+
+	socket.emit('server-broadcast', `${fileId}`, new TextEncoder().encode(JSON.stringify(sceneData)), [])
+}
+
+export const sendImageFilesToRoom = ({
+	socket,
+	fileId,
+	files,
+	requestedFileId,
+}: {
+	socket: BootstrapCapableSocket
+	fileId: number
+	files: BinaryFiles
+	requestedFileId?: string
+}) => {
+	Object.values(files || {}).forEach((file) => {
+		if (!file?.dataURL) {
+			return
+		}
+
+		if (requestedFileId && file.id !== requestedFileId) {
+			return
+		}
+
+		const fileData = { type: BroadcastType.ImageAdd, payload: { file } }
+		socket.emit('server-broadcast', `${fileId}`, new TextEncoder().encode(JSON.stringify(fileData)), [])
+	})
+}
+
+export const sendSceneBootstrapIfAllowed = ({
+	isDedicatedSyncer,
+	isLocalLeader,
+	fileId,
+	excalidrawAPI,
+	socket,
+}: {
+	isDedicatedSyncer: boolean
+	isLocalLeader: boolean
+	fileId: number
+	excalidrawAPI: BootstrapCapableExcalidrawAPI | null
+	socket: (BootstrapCapableSocket & { connected?: boolean }) | null
+}) => {
+	if (
+		!canRespondToBootstrapTraffic({
+			isDedicatedSyncer,
+			isLocalLeader,
+			fileId,
+			excalidrawAPI,
+			socket,
+		})
+		|| !excalidrawAPI?.getSceneElementsIncludingDeleted
+	) {
+		return false
+	}
+
+	sendSceneBootstrapToRoom({
+		socket: socket!,
+		fileId,
+		excalidrawAPI: {
+			getSceneElementsIncludingDeleted: excalidrawAPI.getSceneElementsIncludingDeleted,
+		},
+	})
+	sendImageFilesToRoom({
+		socket: socket!,
+		fileId,
+		files: excalidrawAPI.getFiles(),
+	})
+	return true
+}
+
+export const sendRequestedImageIfAllowed = ({
+	isDedicatedSyncer,
+	isLocalLeader,
+	fileId,
+	excalidrawAPI,
+	socket,
+	requestedFileId,
+}: {
+	isDedicatedSyncer: boolean
+	isLocalLeader: boolean
+	fileId: number
+	excalidrawAPI: BootstrapCapableExcalidrawAPI | null
+	socket: (BootstrapCapableSocket & { connected?: boolean }) | null
+	requestedFileId: string
+}) => {
+	if (
+		!requestedFileId
+		|| !canRespondToBootstrapTraffic({
+			isDedicatedSyncer,
+			isLocalLeader,
+			fileId,
+			excalidrawAPI,
+			socket,
+		})
+	) {
+		return false
+	}
+
+	const file = excalidrawAPI!.getFiles()[requestedFileId]
+	if (!file?.dataURL) {
+		return false
+	}
+
+	sendImageFilesToRoom({
+		socket: socket!,
+		fileId,
+		files: excalidrawAPI!.getFiles(),
+		requestedFileId,
+	})
+	return true
+}
diff --git a/src/utils/localSyncLeaderCoordinator.ts b/src/utils/localSyncLeaderCoordinator.ts
new file mode 100644
index 00000000..383e01d5
--- /dev/null
+++ b/src/utils/localSyncLeaderCoordinator.ts
@@ -0,0 +1,305 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export const LOCAL_SYNC_LEADER_HEARTBEAT_MS = 1000
+export const LOCAL_SYNC_LEADER_TTL_MS = 3000
+
+type LocalSyncLeaderVisibilityState = 'hidden' | 'visible'
+
+export type LocalSyncLeaderLease = {
+	tabId: string
+	expiresAt: number
+	updatedAt: number
+	visibilityState: LocalSyncLeaderVisibilityState
+}
+
+type LocalSyncLeaderMessage = {
+	type: 'lease-updated' | 'lease-yielded'
+	leaseKey: string
+	sourceTabId: string
+	lease?: LocalSyncLeaderLease | null
+}
+
+type LocalSyncLeaderStorage = Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>
+
+export type LocalSyncLeaderSnapshot = {
+	isLocalLeader: boolean
+	isPassiveFollower: boolean
+	leaderTabId: string | null
+	leaderHeartbeatAt: number | null
+}
+
+export type LocalSyncLeaderChannel = {
+	postMessage: (message: LocalSyncLeaderMessage) => void
+	addEventListener: (type: 'message', listener: (event: MessageEvent<LocalSyncLeaderMessage>) => void) => void
+	removeEventListener: (type: 'message', listener: (event: MessageEvent<LocalSyncLeaderMessage>) => void) => void
+	close: () => void
+}
+
+export type LocalSyncLeaderEnvironment = {
+	now: () => number
+	getVisibilityState: () => LocalSyncLeaderVisibilityState
+	storage: LocalSyncLeaderStorage
+	createBroadcastChannel?: (name: string) => LocalSyncLeaderChannel | null
+	addStorageListener?: (listener: (key: string | null, newValue: string | null) => void) => () => void
+	setInterval: typeof globalThis.setInterval
+	clearInterval: typeof globalThis.clearInterval
+}
+
+type LocalSyncLeaderCoordinatorOptions = {
+	leaseKey: string
+	tabId: string
+	env: LocalSyncLeaderEnvironment
+	heartbeatMs?: number
+	ttlMs?: number
+	onStateChange: (snapshot: LocalSyncLeaderSnapshot) => void
+	log?: (...args: unknown[]) => void
+}
+
+export type LocalSyncLeaderCoordinator = {
+	start: () => void
+	stop: () => void
+	evaluate: (reason?: string) => void
+	yieldLeadership: (reason?: string) => void
+	handleVisibilityChange: (reason?: string) => void
+}
+
+export const getLocalSyncLeaderLeaseKey = (fileId: number, userId: string) => `whiteboard-sync:${fileId}:${userId}`
+
+export const normalizeVisibilityState = (visibilityState: string | undefined): LocalSyncLeaderVisibilityState => (
+	visibilityState === 'visible' ? 'visible' : 'hidden'
+)
+
+const parseLease = (value: string | null): LocalSyncLeaderLease | null => {
+	if (!value) {
+		return null
+	}
+
+	try {
+		const parsed = JSON.parse(value) as Partial<LocalSyncLeaderLease>
+		if (
+			typeof parsed?.tabId !== 'string'
+			|| typeof parsed?.expiresAt !== 'number'
+			|| typeof parsed?.updatedAt !== 'number'
+		) {
+			return null
+		}
+
+		return {
+			tabId: parsed.tabId,
+			expiresAt: parsed.expiresAt,
+			updatedAt: parsed.updatedAt,
+			visibilityState: normalizeVisibilityState(parsed.visibilityState),
+		}
+	} catch {
+		return null
+	}
+}
+
+const isLeaseStale = (lease: LocalSyncLeaderLease | null, now: number) => (
+	!lease || lease.expiresAt <= now
+)
+
+export const createLocalSyncLeaderCoordinator = ({
+	leaseKey,
+	tabId,
+	env,
+	heartbeatMs = LOCAL_SYNC_LEADER_HEARTBEAT_MS,
+	ttlMs = LOCAL_SYNC_LEADER_TTL_MS,
+	onStateChange,
+	log = () => {},
+}: LocalSyncLeaderCoordinatorOptions): LocalSyncLeaderCoordinator => {
+	let isRunning = false
+	let heartbeatTimer: ReturnType<typeof globalThis.setInterval> | null = null
+	let channel: LocalSyncLeaderChannel | null = null
+	let removeStorageListener: (() => void) | null = null
+	let currentSnapshot: LocalSyncLeaderSnapshot = {
+		isLocalLeader: false,
+		isPassiveFollower: false,
+		leaderTabId: null,
+		leaderHeartbeatAt: null,
+	}
+
+	const readLease = () => parseLease(env.storage.getItem(leaseKey))
+
+	const buildLease = (now: number): LocalSyncLeaderLease => ({
+		tabId,
+		updatedAt: now,
+		expiresAt: now + ttlMs,
+		visibilityState: env.getVisibilityState(),
+	})
+
+	const commitSnapshot = (snapshot: LocalSyncLeaderSnapshot) => {
+		const hasChanged = snapshot.isLocalLeader !== currentSnapshot.isLocalLeader
+			|| snapshot.isPassiveFollower !== currentSnapshot.isPassiveFollower
+			|| snapshot.leaderTabId !== currentSnapshot.leaderTabId
+			|| snapshot.leaderHeartbeatAt !== currentSnapshot.leaderHeartbeatAt
+
+		if (!hasChanged) {
+			return
+		}
+
+		currentSnapshot = snapshot
+		onStateChange(snapshot)
+	}
+
+	const applyLease = (lease: LocalSyncLeaderLease | null) => {
+		if (!isRunning) {
+			return
+		}
+
+		commitSnapshot({
+			isLocalLeader: lease?.tabId === tabId,
+			isPassiveFollower: lease?.tabId !== tabId,
+			leaderTabId: lease?.tabId ?? null,
+			leaderHeartbeatAt: lease?.updatedAt ?? null,
+		})
+	}
+
+	const publish = (type: LocalSyncLeaderMessage['type'], lease: LocalSyncLeaderLease | null = null) => {
+		channel?.postMessage({
+			type,
+			leaseKey,
+			sourceTabId: tabId,
+			lease,
+		})
+	}
+
+	const writeLease = (lease: LocalSyncLeaderLease, reason: string) => {
+		env.storage.setItem(leaseKey, JSON.stringify(lease))
+		log(`[LocalLeader] ${reason}`, lease)
+		publish('lease-updated', lease)
+		applyLease(lease)
+	}
+
+	const clearLeaseIfOwned = (reason: string) => {
+		const existingLease = readLease()
+		if (existingLease?.tabId !== tabId) {
+			return
+		}
+
+		env.storage.removeItem(leaseKey)
+		log(`[LocalLeader] ${reason}`, existingLease)
+		publish('lease-yielded', null)
+	}
+
+	const evaluate = (reason = 'evaluate') => {
+		if (!isRunning) {
+			return
+		}
+
+		const now = env.now()
+		const ownLease = buildLease(now)
+		const existingLease = readLease()
+
+		if (existingLease?.tabId === tabId) {
+			writeLease(ownLease, `${reason}:heartbeat`)
+			return
+		}
+
+		if (!isLeaseStale(existingLease, now) && existingLease) {
+			log('[LocalLeader] Existing leader retained', { reason, existingLease })
+			applyLease(existingLease)
+			return
+		}
+
+		writeLease(ownLease, `${reason}:claim`)
+	}
+
+	const handleChannelMessage = (event: MessageEvent<LocalSyncLeaderMessage>) => {
+		const message = event.data
+		if (!message || message.leaseKey !== leaseKey || message.sourceTabId === tabId) {
+			return
+		}
+
+		evaluate(`broadcast:${message.type}`)
+	}
+
+	const handleVisibilityChange = (reason = 'visibilitychange') => {
+		if (!isRunning) {
+			return
+		}
+
+		const existingLease = readLease()
+		if (existingLease?.tabId === tabId) {
+			writeLease(buildLease(env.now()), `${reason}:visibility`)
+			return
+		}
+
+		if (env.getVisibilityState() === 'visible') {
+			evaluate(`${reason}:visible`)
+		}
+	}
+
+	return {
+		start() {
+			if (isRunning) {
+				return
+			}
+
+			isRunning = true
+			channel = env.createBroadcastChannel?.(leaseKey) ?? null
+			channel?.addEventListener('message', handleChannelMessage)
+			removeStorageListener = env.addStorageListener?.(() => {
+				evaluate('storage')
+			}) ?? null
+			heartbeatTimer = env.setInterval(() => {
+				evaluate('interval')
+			}, heartbeatMs)
+
+			evaluate('start')
+		},
+
+		stop() {
+			if (!isRunning) {
+				return
+			}
+
+			clearLeaseIfOwned('stop:release')
+
+			isRunning = false
+
+			if (heartbeatTimer) {
+				env.clearInterval(heartbeatTimer)
+				heartbeatTimer = null
+			}
+
+			if (channel) {
+				channel.removeEventListener('message', handleChannelMessage)
+				channel.close()
+				channel = null
+			}
+
+			removeStorageListener?.()
+			removeStorageListener = null
+
+			currentSnapshot = {
+				isLocalLeader: false,
+				isPassiveFollower: false,
+				leaderTabId: null,
+				leaderHeartbeatAt: null,
+			}
+			onStateChange(currentSnapshot)
+		},
+
+		evaluate,
+
+		yieldLeadership(reason = 'yield') {
+			if (!isRunning) {
+				return
+			}
+
+			clearLeaseIfOwned(`${reason}:release`)
+			commitSnapshot({
+				isLocalLeader: false,
+				isPassiveFollower: false,
+				leaderTabId: null,
+				leaderHeartbeatAt: null,
+			})
+		},
+
+		handleVisibilityChange,
+	}
+}
diff --git a/src/utils/syncExecution.ts b/src/utils/syncExecution.ts
new file mode 100644
index 00000000..26e257d5
--- /dev/null
+++ b/src/utils/syncExecution.ts
@@ -0,0 +1,212 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { generateUrl } from '@nextcloud/router'
+import type { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
+import type { BinaryFiles } from '@excalidraw/excalidraw/types/types'
+import type { CollaborationSocket } from '../types/collaboration'
+import type { WorkerInboundMessage } from '../types/protocol'
+import type { CollaborationConnectionStatus } from '../stores/useCollaborationStore'
+
+enum SyncMessageType {
+	SceneInit = 'SCENE_INIT',
+	ImageAdd = 'IMAGE_ADD',
+	ServerBroadcast = 'server-broadcast',
+}
+
+export type SyncAuthorityState = {
+	isDedicatedSyncer: boolean
+	isLocalLeader: boolean
+	isReadOnly: boolean
+}
+
+export type SyncableExcalidrawAPI = {
+	getSceneElementsIncludingDeleted: () => readonly ExcalidrawElement[]
+	getFiles: () => BinaryFiles
+	getAppState: () => {
+		selectedElementIds: Record<string, boolean>
+		scrollX: number
+		scrollY: number
+		zoom: { value: number }
+	}
+}
+
+export type WorkerLike = {
+	postMessage: (message: WorkerInboundMessage) => void
+}
+
+const hashFileContent = (content: string): string => {
+	if (!content) return ''
+	const len = content.length
+	const start = content.substring(0, 20)
+	const end = content.substring(Math.max(0, len - 20))
+	return `${len}:${start}:${end}`
+}
+
+export const canRunAuthoritativeSync = ({ isDedicatedSyncer, isLocalLeader, isReadOnly }: SyncAuthorityState) => (
+	isDedicatedSyncer && isLocalLeader && !isReadOnly
+)
+
+export const canRunOnlineAuthoritativeSync = (
+	authority: SyncAuthorityState,
+	collabStatus: CollaborationConnectionStatus,
+) => (
+	canRunAuthoritativeSync(authority) && collabStatus === 'online'
+)
+
+export const emitWebSocketSceneAndFilesSync = ({
+	fileId,
+	excalidrawAPI,
+	socket,
+	prevSyncedFiles,
+}: {
+	fileId: number
+	excalidrawAPI: SyncableExcalidrawAPI
+	socket: Pick<CollaborationSocket, 'emit'>
+	prevSyncedFiles: Record<string, string>
+}) => {
+	const elements = excalidrawAPI.getSceneElementsIncludingDeleted()
+	const files = excalidrawAPI.getFiles()
+
+	const sceneData = { type: SyncMessageType.SceneInit, payload: { elements } }
+	const sceneBuffer = new TextEncoder().encode(JSON.stringify(sceneData))
+	socket.emit(SyncMessageType.ServerBroadcast, `${fileId}`, sceneBuffer, [])
+
+	const nextFileHashes: Record<string, string> = {}
+	Object.values(files || {}).forEach((file) => {
+		if (!file?.id || !file.dataURL) {
+			return
+		}
+
+		const currentHash = hashFileContent(file.dataURL)
+		nextFileHashes[file.id] = currentHash
+
+		if (prevSyncedFiles[file.id] === currentHash) {
+			return
+		}
+
+		const fileData = { type: SyncMessageType.ImageAdd, payload: { file } }
+		const fileBuffer = new TextEncoder().encode(JSON.stringify(fileData))
+		socket.emit(SyncMessageType.ServerBroadcast, `${fileId}`, fileBuffer, [])
+	})
+
+	return {
+		elementsCount: elements.length,
+		nextFileHashes,
+	}
+}
+
+export const runWebSocketSyncIfAllowed = ({
+	authority,
+	collabStatus,
+	fileId,
+	excalidrawAPI,
+	socket,
+	prevSyncedFiles,
+}: {
+	authority: SyncAuthorityState
+	collabStatus: CollaborationConnectionStatus
+	fileId: number
+	excalidrawAPI: SyncableExcalidrawAPI | null
+	socket: Pick<CollaborationSocket, 'emit'> | null
+	prevSyncedFiles: Record<string, string>
+}) => {
+	if (!fileId || !excalidrawAPI || !socket || !canRunOnlineAuthoritativeSync(authority, collabStatus)) {
+		return {
+			sent: false,
+			elementsCount: 0,
+			nextFileHashes: prevSyncedFiles,
+		}
+	}
+
+	const result = emitWebSocketSceneAndFilesSync({
+		fileId,
+		excalidrawAPI,
+		socket,
+		prevSyncedFiles,
+	})
+
+	return {
+		sent: true,
+		...result,
+	}
+}
+
+export const postSyncToServerWorker = async ({
+	forceSync = false,
+	fileId,
+	excalidrawAPI,
+	getJWT,
+	worker,
+	currentFileId,
+}: {
+	forceSync?: boolean
+	fileId: number
+	excalidrawAPI: SyncableExcalidrawAPI
+	getJWT: () => Promise<string | null>
+	worker: WorkerLike
+	currentFileId: number
+}) => {
+	const jwt = await getJWT()
+	if (!jwt) {
+		throw new Error('JWT token missing for server API sync.')
+	}
+
+	if (currentFileId !== fileId) {
+		throw new Error(`FileId changed during ${forceSync ? 'forced ' : ''}server sync preparation.`)
+	}
+
+	const message: WorkerInboundMessage = {
+		type: 'SYNC_TO_SERVER',
+		fileId,
+		url: generateUrl(`apps/whiteboard/${fileId}`),
+		jwt,
+		elements: excalidrawAPI.getSceneElementsIncludingDeleted(),
+		files: excalidrawAPI.getFiles(),
+	}
+
+	worker.postMessage(message)
+}
+
+export const runServerApiSyncIfAllowed = async ({
+	forceSync = false,
+	authority,
+	collabStatus,
+	fileId,
+	excalidrawAPI,
+	getJWT,
+	worker,
+	isWorkerReady,
+	currentFileId,
+}: {
+	forceSync?: boolean
+	authority: SyncAuthorityState
+	collabStatus: CollaborationConnectionStatus
+	fileId: number
+	excalidrawAPI: SyncableExcalidrawAPI | null
+	getJWT: () => Promise<string | null>
+	worker: WorkerLike | null
+	isWorkerReady: boolean
+	currentFileId: number
+}) => {
+	if (!isWorkerReady || !worker || !fileId || !excalidrawAPI) {
+		return false
+	}
+
+	if (!canRunAuthoritativeSync(authority) || (!forceSync && collabStatus !== 'online')) {
+		return false
+	}
+
+	await postSyncToServerWorker({
+		forceSync,
+		fileId,
+		excalidrawAPI,
+		getJWT,
+		worker,
+		currentFileId,
+	})
+
+	return true
+}
diff --git a/tests/integration/useCollaborationLeadership.spec.ts b/tests/integration/useCollaborationLeadership.spec.ts
new file mode 100644
index 00000000..83f42ec4
--- /dev/null
+++ b/tests/integration/useCollaborationLeadership.spec.ts
@@ -0,0 +1,50 @@
+import { describe, expect, it, vi } from 'vitest'
+import {
+	sendRequestedImageIfAllowed,
+	sendSceneBootstrapIfAllowed,
+} from '../../src/utils/collaborationBootstrap'
+
+const createBootstrapAPI = () => ({
+	getSceneElementsIncludingDeleted: () => ([
+		{ id: 'element-1', type: 'rectangle' },
+	] as never),
+	getFiles: () => ({
+		'file-1': {
+			id: 'file-1',
+			dataURL: 'data:image/png;base64,aaaa',
+		},
+	} as never),
+})
+
+describe('collaboration bootstrap leadership', () => {
+	it('follower tabs do not answer scene bootstrap requests', () => {
+		const socket = { connected: true, emit: vi.fn() }
+
+		const didSend = sendSceneBootstrapIfAllowed({
+			isDedicatedSyncer: true,
+			isLocalLeader: false,
+			fileId: 42,
+			excalidrawAPI: createBootstrapAPI(),
+			socket,
+		})
+
+		expect(didSend).toBe(false)
+		expect(socket.emit).not.toHaveBeenCalled()
+	})
+
+	it('follower tabs do not answer image requests', () => {
+		const socket = { connected: true, emit: vi.fn() }
+
+		const didSend = sendRequestedImageIfAllowed({
+			isDedicatedSyncer: true,
+			isLocalLeader: false,
+			fileId: 42,
+			excalidrawAPI: createBootstrapAPI(),
+			socket,
+			requestedFileId: 'file-1',
+		})
+
+		expect(didSend).toBe(false)
+		expect(socket.emit).not.toHaveBeenCalled()
+	})
+})
diff --git a/tests/integration/useLocalSyncLeader.spec.ts b/tests/integration/useLocalSyncLeader.spec.ts
new file mode 100644
index 00000000..3a64c93b
--- /dev/null
+++ b/tests/integration/useLocalSyncLeader.spec.ts
@@ -0,0 +1,276 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+	createLocalSyncLeaderCoordinator,
+	LOCAL_SYNC_LEADER_HEARTBEAT_MS,
+	LOCAL_SYNC_LEADER_TTL_MS,
+	type LocalSyncLeaderLease,
+	type LocalSyncLeaderSnapshot,
+} from '../../src/utils/localSyncLeaderCoordinator'
+
+type StorageListener = (key: string | null, newValue: string | null) => void
+type MessageListener = (event: MessageEvent<unknown>) => void
+
+class SharedLeaderTestBus {
+
+	private storage = new Map<string, string>()
+	private storageListeners = new Map<string, StorageListener>()
+	private channels = new Map<string, Set<TestBroadcastChannel>>()
+
+	createTab(leaseKey: string, tabId: string, initialVisibility: 'visible' | 'hidden' = 'visible') {
+		let visibilityState: 'visible' | 'hidden' = initialVisibility
+		let snapshot: LocalSyncLeaderSnapshot = {
+			isLocalLeader: false,
+			isPassiveFollower: false,
+			leaderTabId: null,
+			leaderHeartbeatAt: null,
+		}
+
+		const coordinator = createLocalSyncLeaderCoordinator({
+			leaseKey,
+			tabId,
+			env: {
+				now: () => Date.now(),
+				getVisibilityState: () => visibilityState,
+				storage: {
+					getItem: (key) => this.storage.get(key) ?? null,
+					setItem: (key, value) => {
+						this.storage.set(key, value)
+						this.emitStorage(tabId, key, value)
+					},
+					removeItem: (key) => {
+						this.storage.delete(key)
+						this.emitStorage(tabId, key, null)
+					},
+				},
+				createBroadcastChannel: (name) => {
+					const channel = new TestBroadcastChannel(name, tabId, this)
+					const existing = this.channels.get(name) ?? new Set<TestBroadcastChannel>()
+					existing.add(channel)
+					this.channels.set(name, existing)
+					return channel
+				},
+				addStorageListener: (listener) => {
+					this.storageListeners.set(tabId, (key, newValue) => {
+						if (key === leaseKey) {
+							listener(key, newValue)
+						}
+					})
+					return () => {
+						this.storageListeners.delete(tabId)
+					}
+				},
+				setInterval,
+				clearInterval,
+			},
+			onStateChange: (nextSnapshot) => {
+				snapshot = nextSnapshot
+			},
+		})
+
+		return {
+			start: () => coordinator.start(),
+			stop: () => coordinator.stop(),
+			evaluate: (reason?: string) => coordinator.evaluate(reason),
+			handleVisibilityChange: (visibility: 'visible' | 'hidden') => {
+				visibilityState = visibility
+				coordinator.handleVisibilityChange('test-visibility')
+			},
+			get snapshot() {
+				return snapshot
+			},
+		}
+	}
+
+	seedLease(leaseKey: string, lease: LocalSyncLeaderLease) {
+		this.storage.set(leaseKey, JSON.stringify(lease))
+	}
+
+	getLease(leaseKey: string) {
+		const raw = this.storage.get(leaseKey)
+		return raw ? JSON.parse(raw) as LocalSyncLeaderLease : null
+	}
+
+	postMessage(name: string, sourceTabId: string, payload: unknown) {
+		for (const channel of this.channels.get(name) ?? []) {
+			if (channel.tabId === sourceTabId) {
+				continue
+			}
+			channel.receive(payload)
+		}
+	}
+
+	removeChannel(name: string, channel: TestBroadcastChannel) {
+		const channels = this.channels.get(name)
+		channels?.delete(channel)
+		if (channels?.size === 0) {
+			this.channels.delete(name)
+		}
+	}
+
+	private emitStorage(sourceTabId: string, key: string, newValue: string | null) {
+		for (const [tabId, listener] of this.storageListeners.entries()) {
+			if (tabId === sourceTabId) {
+				continue
+			}
+			listener(key, newValue)
+		}
+	}
+
+}
+
+class TestBroadcastChannel {
+
+	private listeners = new Set<MessageListener>()
+	readonly name: string
+	readonly tabId: string
+	private readonly bus: SharedLeaderTestBus
+
+	constructor(name: string, tabId: string, bus: SharedLeaderTestBus) {
+		this.name = name
+		this.tabId = tabId
+		this.bus = bus
+	}
+
+	postMessage(message: unknown) {
+		this.bus.postMessage(this.name, this.tabId, message)
+	}
+
+	addEventListener(_type: 'message', listener: MessageListener) {
+		this.listeners.add(listener)
+	}
+
+	removeEventListener(_type: 'message', listener: MessageListener) {
+		this.listeners.delete(listener)
+	}
+
+	close() {
+		this.bus.removeChannel(this.name, this)
+		this.listeners.clear()
+	}
+
+	receive(message: unknown) {
+		for (const listener of this.listeners) {
+			listener({ data: message } as MessageEvent<unknown>)
+		}
+	}
+
+}
+
+describe('useLocalSyncLeader coordinator', () => {
+	beforeEach(() => {
+		vi.useFakeTimers()
+		vi.setSystemTime(new Date('2026-04-01T00:00:00.000Z'))
+	})
+
+	afterEach(() => {
+		vi.useRealTimers()
+	})
+
+	it('first tab becomes leader', () => {
+		const bus = new SharedLeaderTestBus()
+		const leaseKey = 'whiteboard-sync:42:user-a'
+		const tabA = bus.createTab(leaseKey, 'tab-a')
+
+		tabA.start()
+
+		expect(tabA.snapshot.isLocalLeader).toBe(true)
+		expect(tabA.snapshot.isPassiveFollower).toBe(false)
+		expect(tabA.snapshot.leaderTabId).toBe('tab-a')
+		expect(tabA.snapshot.leaderHeartbeatAt).not.toBeNull()
+	})
+
+	it('second tab becomes follower', () => {
+		const bus = new SharedLeaderTestBus()
+		const leaseKey = 'whiteboard-sync:42:user-a'
+		const tabA = bus.createTab(leaseKey, 'tab-a')
+		const tabB = bus.createTab(leaseKey, 'tab-b')
+
+		tabA.start()
+		tabB.start()
+
+		expect(tabA.snapshot.isLocalLeader).toBe(true)
+		expect(tabB.snapshot.isLocalLeader).toBe(false)
+		expect(tabB.snapshot.isPassiveFollower).toBe(true)
+		expect(tabB.snapshot.leaderTabId).toBe('tab-a')
+	})
+
+	it('leader close or unmount transfers leadership within the lease window', () => {
+		const bus = new SharedLeaderTestBus()
+		const leaseKey = 'whiteboard-sync:42:user-a'
+		const tabA = bus.createTab(leaseKey, 'tab-a')
+		const tabB = bus.createTab(leaseKey, 'tab-b')
+
+		tabA.start()
+		tabB.start()
+		tabA.stop()
+
+		expect(tabB.snapshot.isLocalLeader).toBe(true)
+		expect(tabB.snapshot.leaderTabId).toBe('tab-b')
+	})
+
+	it('stale leader heartbeat is recovered', () => {
+		const bus = new SharedLeaderTestBus()
+		const leaseKey = 'whiteboard-sync:42:user-a'
+		const now = Date.now()
+
+		bus.seedLease(leaseKey, {
+			tabId: 'stale-tab',
+			updatedAt: now - LOCAL_SYNC_LEADER_TTL_MS - LOCAL_SYNC_LEADER_HEARTBEAT_MS,
+			expiresAt: now - 1,
+			visibilityState: 'visible',
+		})
+
+		const tabB = bus.createTab(leaseKey, 'tab-b')
+		tabB.start()
+
+		expect(tabB.snapshot.isLocalLeader).toBe(true)
+		expect(bus.getLease(leaseKey)?.tabId).toBe('tab-b')
+	})
+
+	it('hidden leader stays authoritative until it stops or goes stale', () => {
+		const bus = new SharedLeaderTestBus()
+		const leaseKey = 'whiteboard-sync:42:user-a'
+		const tabA = bus.createTab(leaseKey, 'tab-a', 'visible')
+		const tabB = bus.createTab(leaseKey, 'tab-b', 'hidden')
+
+		tabA.start()
+		tabB.start()
+
+		tabA.handleVisibilityChange('hidden')
+		tabB.handleVisibilityChange('visible')
+
+		expect(tabA.snapshot.isLocalLeader).toBe(true)
+		expect(tabA.snapshot.leaderTabId).toBe('tab-a')
+		expect(tabB.snapshot.isLocalLeader).toBe(false)
+		expect(tabB.snapshot.isPassiveFollower).toBe(true)
+		expect(tabB.snapshot.leaderTabId).toBe('tab-a')
+	})
+
+	it('same user on different fileIds does not interfere', () => {
+		const bus = new SharedLeaderTestBus()
+		const fileOneLeader = bus.createTab('whiteboard-sync:42:user-a', 'tab-a')
+		const fileTwoLeader = bus.createTab('whiteboard-sync:99:user-a', 'tab-b')
+
+		fileOneLeader.start()
+		fileTwoLeader.start()
+
+		expect(fileOneLeader.snapshot.isLocalLeader).toBe(true)
+		expect(fileTwoLeader.snapshot.isLocalLeader).toBe(true)
+		expect(fileOneLeader.snapshot.leaderTabId).toBe('tab-a')
+		expect(fileTwoLeader.snapshot.leaderTabId).toBe('tab-b')
+	})
+
+	it('different users on the same fileId do not interfere', () => {
+		const bus = new SharedLeaderTestBus()
+		const userOneLeader = bus.createTab('whiteboard-sync:42:user-a', 'tab-a')
+		const userTwoLeader = bus.createTab('whiteboard-sync:42:user-b', 'tab-b')
+
+		userOneLeader.start()
+		userTwoLeader.start()
+
+		expect(userOneLeader.snapshot.isLocalLeader).toBe(true)
+		expect(userTwoLeader.snapshot.isLocalLeader).toBe(true)
+		expect(userOneLeader.snapshot.leaderTabId).toBe('tab-a')
+		expect(userTwoLeader.snapshot.leaderTabId).toBe('tab-b')
+	})
+})
diff --git a/tests/integration/useSyncScheduling.spec.ts b/tests/integration/useSyncScheduling.spec.ts
new file mode 100644
index 00000000..47957158
--- /dev/null
+++ b/tests/integration/useSyncScheduling.spec.ts
@@ -0,0 +1,68 @@
+import { describe, expect, it, vi } from 'vitest'
+import {
+	runServerApiSyncIfAllowed,
+	runWebSocketSyncIfAllowed,
+} from '../../src/utils/syncExecution'
+
+const createExcalidrawAPI = () => ({
+	getSceneElementsIncludingDeleted: () => ([
+		{ id: 'element-1', type: 'rectangle' },
+	] as never),
+	getFiles: () => ({
+		'file-1': {
+			id: 'file-1',
+			dataURL: 'data:image/png;base64,aaaa',
+		},
+	} as never),
+	getAppState: () => ({
+		selectedElementIds: {},
+		scrollX: 0,
+		scrollY: 0,
+		zoom: { value: 1 },
+	}),
+})
+
+describe('useSync scheduling guards', () => {
+	it('follower tabs do not emit SYNC_TO_SERVER work', async () => {
+		const worker = { postMessage: vi.fn() }
+		const getJWT = vi.fn(async () => 'jwt-token')
+
+		const didSend = await runServerApiSyncIfAllowed({
+			authority: {
+				isDedicatedSyncer: true,
+				isLocalLeader: false,
+				isReadOnly: false,
+			},
+			collabStatus: 'online',
+			fileId: 42,
+			excalidrawAPI: createExcalidrawAPI(),
+			getJWT,
+			worker,
+			isWorkerReady: true,
+		})
+
+		expect(didSend).toBe(false)
+		expect(getJWT).not.toHaveBeenCalled()
+		expect(worker.postMessage).not.toHaveBeenCalled()
+	})
+
+	it('follower tabs do not emit websocket scene or image sync', () => {
+		const socket = { emit: vi.fn() }
+
+		const result = runWebSocketSyncIfAllowed({
+			authority: {
+				isDedicatedSyncer: true,
+				isLocalLeader: false,
+				isReadOnly: false,
+			},
+			collabStatus: 'online',
+			fileId: 42,
+			excalidrawAPI: createExcalidrawAPI(),
+			socket,
+			prevSyncedFiles: {},
+		})
+
+		expect(result.sent).toBe(false)
+		expect(socket.emit).not.toHaveBeenCalled()
+	})
+})