diff --git a/appinfo/routes.php b/appinfo/routes.php
index 7fe971659b..145af75a70 100644
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -32,6 +32,7 @@
 		['name' => 'document#remote', 'url' => 'remote', 'verb' => 'GET'],
 		['name' => 'document#createFromTemplate', 'url' => 'indexTemplate', 'verb' => 'GET'],
 		['name' => 'document#publicPage', 'url' => '/public', 'verb' => 'GET'],
+		['name' => 'document#token', 'url' => '/token', 'verb' => 'POST'],
 
 		['name' => 'document#editOnline', 'url' => 'editonline', 'verb' => 'GET'],
 		['name' => 'document#editOnlineTarget', 'url' => 'editonline/{fileId}/{target}', 'verb' => 'GET'],
diff --git a/lib/Controller/DocumentController.php b/lib/Controller/DocumentController.php
index 783707c61e..eca057ba7d 100644
--- a/lib/Controller/DocumentController.php
+++ b/lib/Controller/DocumentController.php
@@ -148,7 +148,7 @@ public function extAppGetData(int $fileId) {
 	 * @param string|null $path
 	 * @return RedirectResponse|TemplateResponse
 	 */
-	public function index($fileId, ?string $path = null) {
+	public function index($fileId, ?string $path = null, ?int $version = null) {
 		try {
 			$folder = $this->rootFolder->getUserFolder($this->uid);
 
@@ -184,7 +184,7 @@ public function index($fileId, ?string $path = null) {
 			$params = [
 				'permissions' => $item->getPermissions(),
 				'title' => $item->getName(),
-				'fileId' => $item->getId() . '_' . $this->config->getSystemValue('instanceid'),
+				'fileId' => $item->getId() . '_' . $this->config->getSystemValue('instanceid') . ($version !== null ? '_' . $version : ''),
 				'token' => $token,
 				'token_ttl' => $wopi->getExpiry(),
 				'urlsrc' => $urlSrc,
@@ -489,4 +489,17 @@ public function editOnlineTarget(int $fileId, ?string $target = null) {
 
 		return $this->renderErrorPage('File not found', Http::STATUS_NOT_FOUND);
 	}
+
+
+
+	#[Http\Attribute\NoAdminRequired]
+	#[Http\Attribute\NoCSRFRequired]
+	public function token(int $fileId, ?string $shareToken = null) {
+		[$urlSrc, $token, $wopi] = $this->tokenManager->getToken((string)$fileId, $shareToken, $this->uid, false);
+
+		return new Http\DataResponse([
+			'urlSrc' => $urlSrc,
+			...$wopi->jsonSerialize(),
+		]);
+	}
 }
diff --git a/src/files.js b/src/files.js
index 8833465dd2..0a526a5e97 100644
--- a/src/files.js
+++ b/src/files.js
@@ -111,7 +111,6 @@ const odfViewer = {
 			$iframe.addClass('full')
 			$('#content').addClass('full-height')
 			$('footer').addClass('hidden')
-			$('#imgframe').addClass('hidden')
 			$('#controls').addClass('hidden')
 			$('#content').addClass('loading')
 		} else {
@@ -162,7 +161,6 @@ const odfViewer = {
 		if (isPublic) {
 			$('#content').removeClass('full-height')
 			$('footer').removeClass('hidden')
-			$('#imgframe').removeClass('hidden')
 			$('.directLink').removeClass('hidden')
 			$('.directDownload').removeClass('hidden')
 		}
diff --git a/src/helpers/coolParameters.js b/src/helpers/coolParameters.js
index f8fdba8a5d..ecbd46c148 100644
--- a/src/helpers/coolParameters.js
+++ b/src/helpers/coolParameters.js
@@ -47,7 +47,7 @@ const getUIDefaults = () => {
 }
 
 const getCollaboraTheme = () => {
-	return loadState('richdocuments', 'theme', '')
+	return loadState('richdocuments', 'theme', 'nextcloud')
 }
 
 const generateCSSVarTokens = () => {
diff --git a/src/helpers/index.js b/src/helpers/index.js
index 4a687cc937..ee740b4569 100644
--- a/src/helpers/index.js
+++ b/src/helpers/index.js
@@ -76,8 +76,17 @@ const splitPath = (path) => {
 	return [directory, fileName]
 }
 
+const getRandomId = (length = 5) => {
+	return Math.random()
+		.toString(36)
+		.replace(/[^a-z]+/g, '')
+		.slice(0, length || 5)
+
+}
+
 export {
 	languageToBCP47,
 	getNextcloudVersion,
 	splitPath,
+	getRandomId,
 }
diff --git a/src/services/LoggedInPostMessageHandler.js b/src/services/LoggedInPostMessageHandler.js
new file mode 100644
index 0000000000..a3e6cf3e0a
--- /dev/null
+++ b/src/services/LoggedInPostMessageHandler.js
@@ -0,0 +1,40 @@
+import PostMessageHandler from './PostMessageHandler.js'
+
+export default class LoggedInPostMessageHandler extends PostMessageHandler {
+
+	#context = null
+
+	constructor(context) {
+		super()
+		this.#context = context
+	}
+
+	Frame_Ready() {}
+	App_LoadingStatus() {}
+	Action_Load_Resp() {}
+	Clicked_Button() {}
+	UI_Share() {
+		this.#context.share()
+	}
+
+	UI_Mention() {}
+	UI_Close() {}
+	UI_SaveAs() {}
+	Download_As() {}
+	Views_List() {}
+	Get_Views_Resp() {}
+	UI_ZoteroKeyMissing() {}
+	Action_loadRevViewer() {}
+	Action_Save_Resp() {}
+	File_Rename() {}
+	Action_GetLinkPreview() {}
+	UI_InsertGraphic() {}
+	UI_CreateFile() {}
+	UI_Paste() {}
+	UI_Hyperlink() {}
+	UI_FileVersions() {}
+	UI_PickLink() {}
+	App_VersionRestore() {}
+	Host_VersionRestore() {}
+
+}
diff --git a/src/services/PostMessageHandler.js b/src/services/PostMessageHandler.js
new file mode 100644
index 0000000000..703588e255
--- /dev/null
+++ b/src/services/PostMessageHandler.js
@@ -0,0 +1,35 @@
+
+export default class PostMessageHandler {
+
+	#context = null
+
+	constructor(context) {
+		this.#context = context
+	}
+
+	Frame_Ready() {}
+	App_LoadingStatus() {}
+	Action_Load_Resp() {}
+	Clicked_Button() {}
+	UI_Share() {}
+	UI_Mention() {}
+	UI_Close() {}
+	UI_SaveAs() {}
+	Download_As() {}
+	Views_List() {}
+	Get_Views_Resp() {}
+	UI_ZoteroKeyMissing() {}
+	Action_loadRevViewer() {}
+	Action_Save_Resp() {}
+	File_Rename() {}
+	Action_GetLinkPreview() {}
+	UI_InsertGraphic() {}
+	UI_CreateFile() {}
+	UI_Paste() {}
+	UI_Hyperlink() {}
+	UI_FileVersions() {}
+	UI_PickLink() {}
+	App_VersionRestore() {}
+	Host_VersionRestore() {}
+
+}
diff --git a/src/view/Office.vue b/src/view/Office.vue
index 3659d84abc..441ee1a050 100644
--- a/src/view/Office.vue
+++ b/src/view/Office.vue
@@ -21,78 +21,88 @@
   -->
 
 <template>
-	<transition name="fade" appear>
-		<div class="office-viewer">
-			<div v-if="showLoadingIndicator"
-				class="office-viewer__loading-overlay"
-				:class="{ debug: debug }">
-				<NcEmptyContent v-if="!error" :title="t('richdocuments', 'Loading {filename} …', { filename: basename }, 1, {escape: false})">
-					<template #icon>
-						<NcLoadingIcon />
-					</template>
-					<template #action>
-						<NcButton @click="close">
-							{{ t('richdocuments', 'Cancel') }}
-						</NcButton>
-					</template>
-				</NcEmptyContent>
-				<NcEmptyContent v-else :title="t('richdocuments', 'Document loading failed')" :description="errorMessage">
-					<template #icon>
-						<AlertOctagonOutline />
-					</template>
-					<template #action>
-						<NcButton @click="close">
-							{{ t('richdocuments', 'Close') }}
-						</NcButton>
-					</template>
-				</NcEmptyContent>
-			</div>
-			<div v-show="!useNativeHeader && showIframe" class="office-viewer__header">
-				<div class="avatars">
-					<NcAvatar v-for="view in avatarViews"
-						:key="view.ViewId"
-						:user="view.UserId"
-						:display-name="view.UserName"
-						:show-user-status="false"
-						:show-user-status-compact="false"
-						:style="viewColor(view)" />
-				</div>
-				<NcActions>
-					<NcActionButton icon="office-viewer__header__icon-menu-sidebar" @click="share" />
-				</NcActions>
-			</div>
-			<iframe id="collaboraframe"
-				ref="documentFrame"
-				data-cy="documentframe"
-				class="office-viewer__iframe"
-				:style="{visibility: showIframe ? 'visible' : 'hidden' }"
-				:src="src" />
-
-			<ZoteroHint :show.sync="showZotero" @submit="reload" />
+	<div class="office-viewer">
+		<div v-if="showLoadingIndicator"
+			class="office-viewer__loading-overlay"
+			:class="{ debug: debug }">
+			<NcEmptyContent v-if="!error" :title="t('richdocuments', 'Loading {filename} …', { filename: basename }, 1, {escape: false})">
+				<template #icon>
+					<NcLoadingIcon />
+				</template>
+				<template #action>
+					<NcButton @click="close">
+						{{ t('richdocuments', 'Cancel') }}
+					</NcButton>
+				</template>
+			</NcEmptyContent>
+			<NcEmptyContent v-else :title="t('richdocuments', 'Document loading failed')" :description="errorMessage">
+				<template #icon>
+					<AlertOctagonOutline />
+				</template>
+				<template #action>
+					<NcButton @click="close">
+						{{ t('richdocuments', 'Close') }}
+					</NcButton>
+				</template>
+			</NcEmptyContent>
 		</div>
-	</transition>
+		<form ref="form"
+			:target="iframeId"
+			:action="formData.action"
+			method="post">
+			<input name="access_token" :value="formData.accessToken" type="hidden">
+			<input name="access_token_ttl" :value="formData.accessTokenTTL" type="hidden">
+			<input name="ui_defaults" :value="formData.uiDefaults" type="hidden">
+			<input name="css_variables" :value="formData.cssVariables" type="hidden">
+			<input name="theme" :value="formData.theme" type="hidden">
+			<input name="buy_product" value="https://nextcloud.com/pricing" type="hidden">
+		</form>
+		<iframe :id="iframeId"
+			ref="documentFrame"
+			:name="iframeId"
+			data-cy="documentframe"
+			scrolling="no"
+			allowfullscreen
+			class="office-viewer__iframe"
+			:style="{visibility: showIframe ? 'visible' : 'hidden' }"
+			:src="iframeSrc" />
+
+		<ZoteroHint :show.sync="showZotero" @submit="reload" />
+	</div>
 </template>
 
 <script>
-import { NcAvatar, NcButton, NcActions, NcActionButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import { NcButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import AlertOctagonOutline from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import { loadState } from '@nextcloud/initial-state'
+import { subscribe } from '@nextcloud/event-bus'
 
 import ZoteroHint from '../components/Modal/ZoteroHint.vue'
 import { basename, dirname } from 'path'
-import { getDocumentUrlForFile, getDocumentUrlForPublicFile } from '../helpers/url.js'
+import { getRandomId } from '../helpers/index.js'
+import {
+	getNextcloudUrl,
+	getWopiUrl,
+} from '../helpers/url.js'
 import PostMessageService from '../services/postMessage.tsx'
 import FilesAppIntegration from './FilesAppIntegration.js'
 import { LOADING_ERROR, checkCollaboraConfiguration, checkProxyStatus } from '../services/collabora.js'
 import { enableScrollLock, disableScrollLock } from '../helpers/safariFixer.js'
 import { getLinkWithPicker } from '@nextcloud/vue/dist/Components/NcRichText.js'
 import axios from '@nextcloud/axios'
-import { generateOcsUrl } from '@nextcloud/router'
+import { generateUrl, generateOcsUrl, imagePath } from '@nextcloud/router'
+import { getCapabilities } from '@nextcloud/capabilities'
+import {
+	generateCSSVarTokens,
+	getCollaboraTheme,
+	getUIDefaults,
+} from '../helpers/coolParameters.js'
+import LoggedInPostMessageHandler from '../services/LoggedInPostMessageHandler.js'
+import Config from '../services/config.tsx'
 
 const FRAME_DOCUMENT = 'FRAME_DOCUMENT'
-const PostMessages = new PostMessageService({
-	FRAME_DOCUMENT: () => document.getElementById('collaboraframe').contentWindow,
-})
+
+let postMessageHandler = null
 
 const LOADING_STATE = {
 	LOADING: 0,
@@ -105,9 +115,6 @@ export default {
 	name: 'Office',
 	components: {
 		AlertOctagonOutline,
-		NcAvatar,
-		NcActions,
-		NcActionButton,
 		NcButton,
 		NcEmptyContent,
 		NcLoadingIcon,
@@ -127,36 +134,34 @@ export default {
 			required: false,
 			default: () => false,
 		},
+		source: {
+			type: String,
+			default: null,
+		},
 	},
 	data() {
 		return {
-			src: null,
+			postMessage: null,
+			iframeId: 'collaboraframe_' + getRandomId(),
+			iframeSrc: null,
 			loading: LOADING_STATE.LOADING,
 			loadingTimeout: null,
 			error: null,
 			views: [],
 
-			showZotero: false,
 			showLinkPicker: false,
+			showZotero: false,
+			formData: {
+				action: null,
+				accessToken: null,
+				accessTokenTTL: null,
+				uiDefaults: getUIDefaults(),
+				cssVariables: generateCSSVarTokens(),
+				theme: getCollaboraTheme(),
+			},
 		}
 	},
 	computed: {
-		basename() {
-			return basename(this.filename)
-		},
-		useNativeHeader() {
-			return true
-		},
-		avatarViews() {
-			return this.views
-		},
-		viewColor() {
-			return view => ({
-				'border-color': '#' + ('000000' + Number(view.Color).toString(16)).slice(-6),
-				'border-width': '2px',
-				'border-style': 'solid',
-			})
-		},
 		showIframe() {
 			return this.loading >= LOADING_STATE.FRAME_READY
 		},
@@ -176,8 +181,14 @@ export default {
 		debug() {
 			return !!window.TESTING
 		},
+		isPublic() {
+			return document.getElementById('isPublic') && document.getElementById('isPublic').value === '1'
+		},
 	},
 	async mounted() {
+		this.postMessage = new PostMessageService({
+			FRAME_DOCUMENT: () => document.getElementById(this.iframeId).contentWindow,
+		})
 		try {
 			await checkCollaboraConfiguration()
 			await checkProxyStatus()
@@ -187,41 +198,78 @@ export default {
 			return
 		}
 
-		const fileList = OCA?.Files?.App?.getCurrentFileList?.()
-		FilesAppIntegration.init({
-			fileName: basename(this.filename),
-			fileId: this.fileid,
-			filePath: dirname(this.filename),
-			fileList,
-			fileModel: fileList?.getModelForFile(basename(this.filename)),
-			sendPostMessage: (msgId, values) => {
-				PostMessages.sendWOPIPostMessage(FRAME_DOCUMENT, msgId, values)
-			},
-		})
-		PostMessages.registerPostMessageHandler(this.postMessageHandler)
+		if (this.fileid) {
+			const fileList = OCA?.Files?.App?.getCurrentFileList?.()
+			FilesAppIntegration.init({
+				fileName: basename(this.filename),
+				fileId: this.fileid,
+				filePath: dirname(this.filename),
+				fileList,
+				fileModel: fileList?.getModelForFile(basename(this.filename)),
+				sendPostMessage: (msgId, values) => {
+					this.postMessage.sendWOPIPostMessage(FRAME_DOCUMENT, msgId, values)
+				},
+			})
+		}
+		this.postMessage.registerPostMessageHandler(this.postMessageHandler)
+
 		this.load()
 	},
 	beforeDestroy() {
-		PostMessages.unregisterPostMessageHandler(this.postMessageHandler)
+		this.postMessage.unregisterPostMessageHandler(this.postMessageHandler)
 	},
 	methods: {
 		async load() {
+			const fileid = this.fileid ?? basename(dirname(this.source))
+			const version = this.fileid ? 0 : basename(this.source)
+
+			postMessageHandler = new LoggedInPostMessageHandler(this)
+
 			enableScrollLock()
-			const isPublic = document.getElementById('isPublic') && document.getElementById('isPublic').value === '1'
-			this.src = getDocumentUrlForFile(this.filename, this.fileid) + '&path=' + encodeURIComponent(this.filename)
-			if (isPublic) {
-				this.src = getDocumentUrlForPublicFile(this.filename, this.fileid)
-			}
+
+			// Generate WOPI token
+			const { data } = await axios.post(generateUrl('/apps/richdocuments/token'), { fileId: fileid })
+			Config.update('urlsrc', data.urlSrc)
+
+			// Generate form and submit to the iframe
+			const action = getWopiUrl({
+				fileId: fileid + '_' + loadState('richdocuments', 'instanceId', 'instanceid') + (version > 0 ? '_' + version : ''),
+				title: this.filename,
+				readOnly: version > 0,
+				revisionHistory: !this.isPublic,
+				closeButton: !Config.get('hideCloseButton'),
+			})
+			this.$set(this.formData, 'action', action)
+			this.$set(this.formData, 'accessToken', data.token)
+			this.$nextTick(() => this.$refs.form.submit())
+
 			this.loading = LOADING_STATE.LOADING
 			this.loadingTimeout = setTimeout(() => {
-				console.error('FAILED')
+				console.error('Document loading failed due to timeout: Please check for failing network requests')
 				this.loading = LOADING_STATE.FAILED
 				this.error = t('richdocuments', 'Failed to load {productName} - please try again later', { productName: loadState('richdocuments', 'productName', 'Nextcloud Office') })
-			}, (OC.getCapabilities().richdocuments.config.timeout * 1000 || 15000))
+			}, (getCapabilities().richdocuments.config.timeout * 1000 || 15000))
 		},
 		documentReady() {
+			subscribe('files_versions:version:clicked', (event) => {
+				event.open = false
+				alert('clicked')
+			})
+
+			subscribe('files_versions:restore', (event) => {
+				alert('restore')
+			})
 			this.loading = LOADING_STATE.DOCUMENT_READY
 			clearTimeout(this.loadingTimeout)
+			this.postMessage.sendWOPIPostMessage(FRAME_DOCUMENT, 'Host_PostmessageReady', {})
+			this.postMessage.sendWOPIPostMessage(FRAME_DOCUMENT, 'Insert_Button', {
+				id: 'Open_Local_Editor',
+				imgurl: window.location.protocol + '//' + getNextcloudUrl() + imagePath('richdocuments', 'launch.svg'),
+				mobile: false,
+				label: t('richdocuments', 'Open in local editor'),
+				hint: t('richdocuments', 'Open in local editor'),
+				insertBefore: 'print',
+			})
 		},
 		async share() {
 			FilesAppIntegration.share()
@@ -236,13 +284,13 @@ export default {
 				try {
 					const url = new URL(link)
 					if (url.protocol === 'http:' || url.protocol === 'https:') {
-						PostMessages.sendWOPIPostMessage(FRAME_DOCUMENT, 'Action_InsertLink', { url: link })
+						this.postMessage.sendWOPIPostMessage(FRAME_DOCUMENT, 'Action_InsertLink', { url: link })
 						return
 					}
 				} catch (e) {
 					console.debug('error when parsing the link picker result')
 				}
-				PostMessages.sendWOPIPostMessage(FRAME_DOCUMENT, 'Action_Paste', { Mimetype: 'text/plain', Data: link })
+				this.postMessage.sendWOPIPostMessage(FRAME_DOCUMENT, 'Action_Paste', { Mimetype: 'text/plain', Data: link })
 			} catch (e) {
 				console.error('Link picker promise rejected :', e)
 			} finally {
@@ -266,7 +314,7 @@ export default {
 							const reader = new FileReader()
 							reader.addEventListener('loadend', (e) => {
 								const b64Image = e.target.result
-								PostMessages.sendWOPIPostMessage(FRAME_DOCUMENT, 'Action_GetLinkPreview_Resp', { url, title, image: b64Image })
+								this.postMessage.sendWOPIPostMessage(FRAME_DOCUMENT, 'Action_GetLinkPreview_Resp', { url, title, image: b64Image })
 							})
 							reader.readAsDataURL(imageResponse.data)
 						}
@@ -274,7 +322,7 @@ export default {
 						console.error('Error loading the reference image', e)
 					}
 				} else {
-					PostMessages.sendWOPIPostMessage(FRAME_DOCUMENT, 'Action_GetLinkPreview_Resp', { url, title, image: null })
+					this.postMessage.sendWOPIPostMessage(FRAME_DOCUMENT, 'Action_GetLinkPreview_Resp', { url, title, image: null })
 				}
 			} catch (e) {
 				console.error('Error resolving a reference', e)
@@ -288,19 +336,23 @@ export default {
 		reload() {
 			this.loading = LOADING_STATE.LOADING
 			this.load()
-			this.$refs.documentFrame.contentWindow.location.replace(this.src)
+			this.$refs.documentFrame.contentWindow.location.replace(this.iframeSrc)
 		},
 		postMessageHandler({ parsed, data }) {
-			if (data === 'NC_ShowNamePicker') {
-				this.documentReady()
-				return
-			} else if (data === 'loading') {
-				this.loading = LOADING_STATE.LOADING
+			const { msgId, args, deprecated } = parsed
+			console.debug('[viewer] Received post message', parsed, msgId, args, deprecated)
+			if (deprecated) {
 				return
 			}
-			console.debug('[viewer] Received post message', parsed)
-			const { msgId, args, deprecated } = parsed
-			if (deprecated) { return }
+
+			const callback = postMessageHandler[msgId] ?? undefined
+
+			if (callback) {
+				// callback(args)
+				// return
+			} else {
+				console.warn('[viewer] No handler for post message', msgId, args)
+			}
 
 			switch (msgId) {
 			case 'App_LoadingStatus':
@@ -309,8 +361,7 @@ export default {
 					this.loading = LOADING_STATE.FRAME_READY
 					this.$emit('update:loaded', true)
 					FilesAppIntegration.initAfterReady()
-				}
-				if (args.Status === 'Document_Loaded') {
+				} else if (args.Status === 'Document_Loaded') {
 					this.documentReady()
 				} else if (args.Status === 'Failed') {
 					this.loading = LOADING_STATE.FAILED
@@ -325,15 +376,16 @@ export default {
 					this.loading = LOADING_STATE.FAILED
 				}
 				break
-			case 'loading':
-				break
-			case 'close':
+			case 'UI_Close':
 				this.close()
 				break
 			case 'Get_Views_Resp':
 			case 'Views_List':
 				this.views = args
 				break
+			case 'UI_SaveAs':
+				// FIXME not implemented
+				break
 			case 'Action_Save_Resp':
 				if (args.fileName !== this.filename) {
 					FilesAppIntegration.saveAs(args.fileName)
@@ -341,9 +393,15 @@ export default {
 				break
 			case 'UI_InsertGraphic':
 				FilesAppIntegration.insertGraphic((filename, url) => {
-					PostMessages.sendWOPIPostMessage(FRAME_DOCUMENT, 'postAsset', { FileName: filename, Url: url })
+					this.postMessage.sendWOPIPostMessage(FRAME_DOCUMENT, 'Action_InsertGraphic', {
+						filename,
+						url,
+					})
 				})
 				break
+			case 'UI_Mention':
+				// FIXME not implemented
+				break
 			case 'UI_CreateFile':
 				FilesAppIntegration.createNewFile(args.DocumentType)
 				break
@@ -371,28 +429,29 @@ export default {
 			case 'Action_GetLinkPreview':
 				this.resolveLink(args.url)
 				break
+			case 'Clicked_Button':
+			case 'UI_Hyperlink':
+			case 'Download_As':
+			case 'Host_VersionRestore':
+			case 'Action_loadRevViewer':
+				// FIXME not implemented
+				break
 			}
 		},
+
 	},
 }
 </script>
 <style lang="scss" scoped>
 .office-viewer {
-	width: 100%;
-	height: 100%;
-	top: 0;
-	left: 0;
-	position: absolute;
 	z-index: 100000;
 	max-width: 100%;
 	display: flex;
 	flex-direction: column;
 	background-color: var(--color-main-background);
-	transition: opacity .25s;
 
-	&__loading-overlay {
+	&__loading-overlay:not(.viewer__file--hidden) {
 		border-top: 3px solid var(--color-primary-element);
-		position: absolute;
 		display: flex;
 		height: 100%;
 		width: 100%;
@@ -414,48 +473,16 @@ export default {
 		}
 	}
 
-	&__header {
-		position: absolute;
-		right: 44px;
-		top: 3px;
-		z-index: 99999;
-		display: flex;
-		background-color: #fff;
-
-		.avatars {
-			display: flex;
-			padding: 4px;
-
-			::v-deep .avatardiv {
-				margin-left: -15px;
-				box-shadow: 0 0 3px var(--color-box-shadow);
-			}
-		}
-
-		&__icon-menu-sidebar {
-			background-image: var(--icon-menu-sidebar-000) !important;
-		}
-	}
-
 	&__iframe {
 		width: 100%;
 		flex-grow: 1;
 	}
-
-	::v-deep .fade-enter-active,
-	::v-deep .fade-leave-active {
-		transition: opacity .25s;
-	}
-
-	::v-deep .fade-enter,
-	::v-deep .fade-leave-to {
-		opacity: 0;
-	}
 }
 </style>
 
 <style lang="scss">
-.viewer .office-viewer {
+.viewer .office-viewer:not(.viewer__file--hidden) {
+	width: 100%;
 	height: 100vh;
 	height: 100dvh;
 	top: -50px;
diff --git a/src/viewer.js b/src/viewer.js
index 3d22f222f6..ef0132e37f 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -35,6 +35,7 @@ if (OCA.Viewer) {
 		mimes: supportedMimes,
 		component: Office,
 		theme: 'light',
+		canCompare: true,
 	})
 }