diff --git a/package-lock.json b/package-lock.json
index 3ef1b57b1..bdaa84127 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,17 +1,17 @@
 {
 	"name": "bridge",
-	"version": "2.3.5",
+	"version": "2.3.6",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "bridge",
-			"version": "2.3.5",
+			"version": "2.3.6",
 			"dependencies": {
 				"@mdi/font": "^6.9.96",
 				"@types/lz-string": "^1.3.34",
 				"bridge-common-utils": "^0.3.3",
-				"bridge-iframe-api": "^0.4.7",
+				"bridge-iframe-api": "^0.4.11",
 				"bridge-js-runtime": "^0.3.6",
 				"bridge-model-viewer": "^0.7.7",
 				"buffer": "^6.0.3",
@@ -2566,9 +2566,9 @@
 			"license": "MIT"
 		},
 		"node_modules/bridge-iframe-api": {
-			"version": "0.4.7",
-			"resolved": "https://registry.npmjs.org/bridge-iframe-api/-/bridge-iframe-api-0.4.7.tgz",
-			"integrity": "sha512-tphsYj61E6nPt5Cnw70IKlmy2IGjvFeYiy3eanCP2IkCJneytJW6vSNbefjq+T0cv8gU8vf5rjFcVlMF8vkAYA=="
+			"version": "0.4.11",
+			"resolved": "https://registry.npmjs.org/bridge-iframe-api/-/bridge-iframe-api-0.4.11.tgz",
+			"integrity": "sha512-+gt/4+KkEhtg9vvWI99empq8jOukIAe9nUH9CVdFTXYj4ZLxIqjfBi0XdxyAFKWIapmQDCQA17Wx5d8bBuG4rw=="
 		},
 		"node_modules/bridge-js-runtime": {
 			"version": "0.3.7",
@@ -7736,9 +7736,9 @@
 			}
 		},
 		"bridge-iframe-api": {
-			"version": "0.4.7",
-			"resolved": "https://registry.npmjs.org/bridge-iframe-api/-/bridge-iframe-api-0.4.7.tgz",
-			"integrity": "sha512-tphsYj61E6nPt5Cnw70IKlmy2IGjvFeYiy3eanCP2IkCJneytJW6vSNbefjq+T0cv8gU8vf5rjFcVlMF8vkAYA=="
+			"version": "0.4.11",
+			"resolved": "https://registry.npmjs.org/bridge-iframe-api/-/bridge-iframe-api-0.4.11.tgz",
+			"integrity": "sha512-+gt/4+KkEhtg9vvWI99empq8jOukIAe9nUH9CVdFTXYj4ZLxIqjfBi0XdxyAFKWIapmQDCQA17Wx5d8bBuG4rw=="
 		},
 		"bridge-js-runtime": {
 			"version": "0.3.7",
diff --git a/package.json b/package.json
index a571b6490..e27b96767 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "bridge",
-	"version": "2.3.6",
+	"version": "2.3.7",
 	"private": true,
 	"scripts": {
 		"dev": "vite",
@@ -15,7 +15,7 @@
 		"@mdi/font": "^6.9.96",
 		"@types/lz-string": "^1.3.34",
 		"bridge-common-utils": "^0.3.3",
-		"bridge-iframe-api": "^0.4.7",
+		"bridge-iframe-api": "^0.4.11",
 		"bridge-js-runtime": "^0.3.6",
 		"bridge-model-viewer": "^0.7.7",
 		"buffer": "^6.0.3",
diff --git a/public/packages.zip b/public/packages.zip
index aeea8efc2..fbee0d5fe 100644
Binary files a/public/packages.zip and b/public/packages.zip differ
diff --git a/src/App.vue b/src/App.vue
index b0bb289ef..f7a9d42d4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,14 @@
 <template>
 	<v-app
+		ref="appContainer"
 		:style="{ fontFamily }"
 		@contextmenu.native="$event.preventDefault()"
 	>
 		<!-- We need access to native menus in order to hide the custom one on MacOS -->
 		<!-- <Toolbar v-if="!isMacOs" /> -->
-		<Toolbar />
+		<Toolbar v-if="!isInFullScreen" />
 
-		<Sidebar app />
+		<Sidebar v-if="!isInFullScreen" app />
 
 		<v-btn
 			v-if="!sidebarNavigationVisible"
@@ -23,7 +24,11 @@
 			<v-icon>mdi-table-column</v-icon>
 		</v-btn>
 
-		<v-main :style="{ 'padding-top': appToolbarHeight }">
+		<v-main
+			:style="{
+				'padding-top': isInFullScreen ? 0 : appToolbarHeight,
+			}"
+		>
 			<WindowRenderer />
 
 			<v-row
@@ -111,6 +116,10 @@ import WelcomeScreen from '/@/components/TabSystem/WelcomeScreen.vue'
 import SidebarContent from './components/Sidebar/Content/Main.vue'
 import { settingsState } from './components/Windows/Settings/SettingsState'
 import { useTabSystem } from './components/Composables/UseTabSystem'
+import {
+	setFullscreenElement,
+	useFullScreen,
+} from './components/TabSystem/TabContextMenu/Fullscreen'
 
 export default {
 	name: 'App',
@@ -119,11 +128,13 @@ export default {
 	setup() {
 		const { tabSystem, tabSystems, shouldRenderWelcomeScreen } =
 			useTabSystem()
+		const { isInFullScreen } = useFullScreen()
 
 		return {
 			tabSystem,
 			tabSystems,
 			shouldRenderWelcomeScreen,
+			isInFullScreen,
 		}
 	},
 
@@ -132,6 +143,8 @@ export default {
 			this.contextMenu = app.contextMenu
 			this.windowSize = app.windowResize.state
 		})
+
+		setFullscreenElement(this.$refs.appContainer.$el)
 	},
 
 	components: {
@@ -156,6 +169,8 @@ export default {
 
 	computed: {
 		isSidebarContentVisible() {
+			if (this.isInFullScreen) return false
+
 			return (
 				this.sidebarNavigationVisible &&
 				App.sidebar.isContentVisible.value
diff --git a/src/components/CommandBar/CommandBar.vue b/src/components/CommandBar/CommandBar.vue
index 56031ace1..d25fc381e 100644
--- a/src/components/CommandBar/CommandBar.vue
+++ b/src/components/CommandBar/CommandBar.vue
@@ -133,9 +133,8 @@ export default {
 					color: packType?.color ?? 'primary',
 
 					onTrigger: async () => {
-						const fileHandle = await project.app.fileSystem.getFileHandle(
-							filePath
-						)
+						const fileHandle =
+							await project.app.fileSystem.getFileHandle(filePath)
 
 						project.openFile(fileHandle)
 					},
diff --git a/src/components/Editors/IframeTab/API/IframeApi.ts b/src/components/Editors/IframeTab/API/IframeApi.ts
index d3e4268f4..7d598e6da 100644
--- a/src/components/Editors/IframeTab/API/IframeApi.ts
+++ b/src/components/Editors/IframeTab/API/IframeApi.ts
@@ -13,6 +13,10 @@ import { IframeTab } from '../IframeTab'
 import { OpenFileEvent } from './Events/Tab/OpenFile'
 import { openedFileReferenceName } from './Requests/FileSystem/ResolveFileReference'
 import { GetItemPreviewRequest } from './Requests/Project/GetItemPreview'
+import { ReadAsDataUrlRequest } from './Requests/FileSystem/ReadAsDataUrl'
+import { FindRequest } from './Requests/PackIndexer/Find'
+import { GetFileRequest } from './Requests/PackIndexer/GetFile'
+import { wait } from '/@/utils/wait'
 
 export class IframeApi {
 	didSetup = false
@@ -28,10 +32,15 @@ export class IframeApi {
 		// FileSystem
 		new ReadFileRequest(this),
 		new ReadTextFileRequest(this),
+		new ReadAsDataUrlRequest(this),
 		new WriteFileRequest(this),
 
 		// Project
 		new GetItemPreviewRequest(this),
+
+		// PackIndexer,
+		new FindRequest(this),
+		new GetFileRequest(this),
 	]
 
 	constructor(protected tab: IframeTab, protected iframe: HTMLIFrameElement) {
@@ -41,6 +50,7 @@ export class IframeApi {
 			this._channel = new Channel(this.iframe.contentWindow)
 			this.channelSetup.dispatch()
 
+			await wait(20)
 			await this.channel.open()
 
 			this.loaded.dispatch()
diff --git a/src/components/Editors/IframeTab/API/Requests/FileSystem/ReadAsDataUrl.ts b/src/components/Editors/IframeTab/API/Requests/FileSystem/ReadAsDataUrl.ts
new file mode 100644
index 000000000..f074f88f6
--- /dev/null
+++ b/src/components/Editors/IframeTab/API/Requests/FileSystem/ReadAsDataUrl.ts
@@ -0,0 +1,16 @@
+import { IframeApi } from '../../IframeApi'
+import { GenericRequest } from '../GenericRequest'
+import { resolveFileReference } from './ResolveFileReference'
+import { loadHandleAsDataURL } from '/@/utils/loadAsDataUrl'
+
+export class ReadAsDataUrlRequest extends GenericRequest<string, string> {
+	constructor(api: IframeApi) {
+		super('fs.readAsDataUrl', api)
+	}
+
+	async handle(filePath: string, origin: string): Promise<string> {
+		const fileHandle = await resolveFileReference(filePath, this.api)
+
+		return await loadHandleAsDataURL(fileHandle)
+	}
+}
diff --git a/src/components/Editors/IframeTab/API/Requests/FileSystem/ResolveFileReference.ts b/src/components/Editors/IframeTab/API/Requests/FileSystem/ResolveFileReference.ts
index 00724f803..e7d6fd1be 100644
--- a/src/components/Editors/IframeTab/API/Requests/FileSystem/ResolveFileReference.ts
+++ b/src/components/Editors/IframeTab/API/Requests/FileSystem/ResolveFileReference.ts
@@ -4,7 +4,8 @@ export const openedFileReferenceName = '~bridge://OPENED-FILE'
 
 export async function resolveFileReference(
 	fileReference: string,
-	api: IframeApi
+	api: IframeApi,
+	createFile = false
 ) {
 	if (fileReference === openedFileReferenceName) {
 		const fileHandle = api.openedFileHandle
@@ -14,5 +15,5 @@ export async function resolveFileReference(
 		return fileHandle
 	}
 
-	return await api.app.fileSystem.getFileHandle(fileReference)
+	return await api.app.fileSystem.getFileHandle(fileReference, createFile)
 }
diff --git a/src/components/Editors/IframeTab/API/Requests/FileSystem/WriteFile.ts b/src/components/Editors/IframeTab/API/Requests/FileSystem/WriteFile.ts
index 43a5262e1..1f84f04c2 100644
--- a/src/components/Editors/IframeTab/API/Requests/FileSystem/WriteFile.ts
+++ b/src/components/Editors/IframeTab/API/Requests/FileSystem/WriteFile.ts
@@ -19,7 +19,7 @@ export class WriteFileRequest extends GenericRequest<IWriteFilePayload, void> {
 	): Promise<void> {
 		const app = await App.getApp()
 
-		const fileHandle = await resolveFileReference(filePath, this.api)
+		const fileHandle = await resolveFileReference(filePath, this.api, true)
 
 		await app.fileSystem.write(fileHandle, data)
 	}
diff --git a/src/components/Editors/IframeTab/API/Requests/PackIndexer/Find.ts b/src/components/Editors/IframeTab/API/Requests/PackIndexer/Find.ts
new file mode 100644
index 000000000..da542ee89
--- /dev/null
+++ b/src/components/Editors/IframeTab/API/Requests/PackIndexer/Find.ts
@@ -0,0 +1,30 @@
+import { IframeApi } from '../../IframeApi'
+import { GenericRequest } from '../GenericRequest'
+
+interface IRequestData {
+	findFileType: string
+	whereCacheKey: string
+	matchesOneOf: string[]
+	fetchAll?: boolean
+}
+
+export class FindRequest extends GenericRequest<IRequestData, string[]> {
+	constructor(api: IframeApi) {
+		super('packIndexer.find', api)
+	}
+
+	async handle(
+		{ findFileType, whereCacheKey, matchesOneOf, fetchAll }: IRequestData,
+		origin: string
+	) {
+		const packIndexer = this.api.app.project.packIndexer
+		await packIndexer.fired
+
+		return await packIndexer.service.find(
+			findFileType,
+			whereCacheKey,
+			matchesOneOf,
+			fetchAll
+		)
+	}
+}
diff --git a/src/components/Editors/IframeTab/API/Requests/PackIndexer/GetFile.ts b/src/components/Editors/IframeTab/API/Requests/PackIndexer/GetFile.ts
new file mode 100644
index 000000000..bc5234566
--- /dev/null
+++ b/src/components/Editors/IframeTab/API/Requests/PackIndexer/GetFile.ts
@@ -0,0 +1,21 @@
+import { IframeApi } from '../../IframeApi'
+import { GenericRequest } from '../GenericRequest'
+import { App } from '/@/App'
+
+export class GetFileRequest extends GenericRequest<
+	string,
+	Record<string, unknown>
+> {
+	constructor(api: IframeApi) {
+		super('packIndexer.getFile', api)
+	}
+
+	async handle(filePath: string, origin: string) {
+		const packIndexer = this.api.app.project.packIndexer
+		await packIndexer.fired
+
+		const fileType = App.fileType.getId(filePath)
+
+		return await packIndexer.service.getCacheDataFor(fileType, filePath)
+	}
+}
diff --git a/src/components/Editors/IframeTab/IframeTab.ts b/src/components/Editors/IframeTab/IframeTab.ts
index d74661478..e7ccacbca 100644
--- a/src/components/Editors/IframeTab/IframeTab.ts
+++ b/src/components/Editors/IframeTab/IframeTab.ts
@@ -4,6 +4,7 @@ import { Tab } from '../../TabSystem/CommonTab'
 import { IframeApi } from './API/IframeApi'
 import { markRaw } from 'vue'
 import { AnyFileHandle } from '../../FileSystem/Types'
+import { getFullScreenElement } from '../../TabSystem/TabContextMenu/Fullscreen'
 
 interface IIframeTabOptions {
 	icon?: string
@@ -46,7 +47,7 @@ export class IframeTab extends Tab {
 		this.iframe.classList.add('outlined')
 		this.iframe.style.borderRadius = '12px'
 		this.iframe.style.margin = '8px'
-		document.body.appendChild(this.iframe)
+		getFullScreenElement()?.appendChild(this.iframe)
 	}
 
 	getOptions() {
@@ -71,7 +72,7 @@ export class IframeTab extends Tab {
 		this.iframe.style.display = 'none'
 	}
 	onDestroy() {
-		document.body.removeChild(this.iframe)
+		getFullScreenElement()?.removeChild(this.iframe)
 		this.api.dispose()
 	}
 
diff --git a/src/components/Mixins/AppToolbarHeight.ts b/src/components/Mixins/AppToolbarHeight.ts
index d4d893aa8..fe940a343 100644
--- a/src/components/Mixins/AppToolbarHeight.ts
+++ b/src/components/Mixins/AppToolbarHeight.ts
@@ -1,16 +1,20 @@
 // @ts-nocheck
 
 import { WindowControlsOverlayMixin } from './WindowControlsOverlay'
+import { isInFullScreen } from '/@/components/TabSystem/TabContextMenu/Fullscreen'
 
 export const AppToolbarHeightMixin = {
 	mixins: [WindowControlsOverlayMixin],
 	computed: {
 		appToolbarHeight() {
+			if (isInFullScreen.value) return `0px`
+
 			return `env(titlebar-area-height, ${
 				this.$vuetify.breakpoint.mobile ? 0 : 24
 			}px)`
 		},
 		appToolbarHeightNumber() {
+			if (isInFullScreen.value) return 0
 			if (this.windowControlsOverlay) return 33
 
 			return this.$vuetify.breakpoint.mobile ? 0 : 24
diff --git a/src/components/TabSystem/CommonTab.ts b/src/components/TabSystem/CommonTab.ts
index 98135f238..da4e3f846 100644
--- a/src/components/TabSystem/CommonTab.ts
+++ b/src/components/TabSystem/CommonTab.ts
@@ -9,6 +9,7 @@ import { AnyFileHandle } from '../FileSystem/Types'
 import { shareFile } from '../StartParams/Action/openRawFile'
 import { getDefaultFileIcon } from '/@/utils/file/getIcon'
 import { settingsState } from '../Windows/Settings/SettingsState'
+import { fullScreenAction } from './TabContextMenu/Fullscreen'
 
 export abstract class Tab<TRestoreData = any> extends Signal<Tab> {
 	abstract component: Vue.Component
@@ -210,6 +211,7 @@ export abstract class Tab<TRestoreData = any> extends Signal<Tab> {
 			additionalItems.push(<const>{ type: 'divider' })
 
 		await showContextMenu(event, [
+			fullScreenAction(false),
 			...additionalItems,
 			{
 				name: 'actions.closeTab.name',
diff --git a/src/components/TabSystem/TabActions/ActionBar.vue b/src/components/TabSystem/TabActions/ActionBar.vue
index 9bcb1ae1c..bf4e4dd06 100644
--- a/src/components/TabSystem/TabActions/ActionBar.vue
+++ b/src/components/TabSystem/TabActions/ActionBar.vue
@@ -1,8 +1,5 @@
 <template>
-	<div
-		class="d-inline-flex mb-1"
-		style="height: 21px; width: 100%; overflow-x: auto; overflow-y: hidden"
-	>
+	<div class="d-inline-flex mb-1 tab-action-bar" style="">
 		<Action
 			v-for="action in actions"
 			:key="action.id"
@@ -22,3 +19,12 @@ export default {
 	},
 }
 </script>
+
+<style scoped>
+.tab-action-bar {
+	height: 21px;
+	width: 100%;
+	overflow-x: auto;
+	overflow-y: hidden;
+}
+</style>
diff --git a/src/components/TabSystem/TabBar.vue b/src/components/TabSystem/TabBar.vue
index d0794f3e5..fe0717c03 100644
--- a/src/components/TabSystem/TabBar.vue
+++ b/src/components/TabSystem/TabBar.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="tab-bar">
 		<Draggable
 			v-if="tabSystem && tabSystem.shouldRender"
 			v-model="tabSystem.tabs.value"
@@ -84,4 +84,7 @@ export default {
 .inactive-action-bar {
 	opacity: 0.5;
 }
+.tab-bar {
+	background: var(--v-background-base);
+}
 </style>
diff --git a/src/components/TabSystem/TabContextMenu/Fullscreen.ts b/src/components/TabSystem/TabContextMenu/Fullscreen.ts
new file mode 100644
index 000000000..c264309ad
--- /dev/null
+++ b/src/components/TabSystem/TabContextMenu/Fullscreen.ts
@@ -0,0 +1,45 @@
+import { ref } from 'vue'
+
+export const isInFullScreen = ref(false)
+let fullScreenElement: HTMLElement | null = null
+export function setFullscreenElement(el: HTMLElement) {
+	fullScreenElement = el
+}
+export function getFullScreenElement() {
+	return fullScreenElement
+}
+export function useFullScreen() {
+	return {
+		isInFullScreen,
+	}
+}
+
+export const fullScreenAction = (addDescription = true) => ({
+	icon: 'mdi-fullscreen',
+	name: 'actions.fullscreen.name',
+	description: addDescription ? 'actions.fullscreen.description' : undefined,
+	onTrigger: () => {
+		if (!fullScreenElement) return
+
+		if (document.fullscreenElement) {
+			document.exitFullscreen()
+		} else {
+			fullScreenElement.requestFullscreen()
+
+			isInFullScreen.value = true
+			const onFullScreenChange = () => {
+				isInFullScreen.value = document.fullscreenElement != null
+
+				// If no longer in fullscreen, remove the event listener
+				if (!isInFullScreen.value) {
+					document.removeEventListener(
+						'fullscreenchange',
+						onFullScreenChange
+					)
+				}
+			}
+			// Listen for fullscreen cancel
+			document.addEventListener('fullscreenchange', onFullScreenChange)
+		}
+	},
+})
diff --git a/src/components/Toolbar/Category/view.ts b/src/components/Toolbar/Category/view.ts
index 34b246130..ce4500cf7 100644
--- a/src/components/Toolbar/Category/view.ts
+++ b/src/components/Toolbar/Category/view.ts
@@ -4,6 +4,7 @@ import { FileTab } from '/@/components/TabSystem/FileTab'
 import { ViewCompilerOutput } from '../../UIElements/DirectoryViewer/ContextMenu/Actions/ViewCompilerOutput'
 import { Divider } from '../Divider'
 import { platform } from '/@/utils/os'
+import { fullScreenAction } from '../../TabSystem/TabContextMenu/Fullscreen'
 
 export function setupViewCategory(app: App) {
 	const view = new ToolbarCategory('mdi-eye-outline', 'toolbar.view.name')
@@ -33,6 +34,8 @@ export function setupViewCategory(app: App) {
 
 	view.addItem(new Divider())
 
+	view.addItem(app.actionManager.create(fullScreenAction()))
+
 	view.addItem(
 		app.actionManager.create({
 			icon: 'mdi-chevron-right',
diff --git a/src/locales/en.json b/src/locales/en.json
index 7a5576a23..224800b42 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -128,6 +128,10 @@
 			"name": "Download",
 			"description": "Download this file or folder"
 		},
+		"fullscreen": {
+			"name": "Fullscreen",
+			"description": "Toggle fullscreen mode"
+		},
 		"viewConnectedFiles": {
 			"name": "View Connected Files",
 			"description": "View all files connected to this file"
diff --git a/src/utils/app/dataPackage.ts b/src/utils/app/dataPackage.ts
index 3840af04a..0b3dd6960 100644
--- a/src/utils/app/dataPackage.ts
+++ b/src/utils/app/dataPackage.ts
@@ -1 +1 @@
-export const zipSize = 1276185
\ No newline at end of file
+export const zipSize = 1276234
\ No newline at end of file