diff --git a/apps/client/src/widgets/collections/presentation/index.css b/apps/client/src/widgets/collections/presentation/index.css
new file mode 100644
index 000000000..5d96c177c
--- /dev/null
+++ b/apps/client/src/widgets/collections/presentation/index.css
@@ -0,0 +1,5 @@
+.presentation-button-bar {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/collections/presentation/index.tsx b/apps/client/src/widgets/collections/presentation/index.tsx
index dca20b2a0..9f1b3715d 100644
--- a/apps/client/src/widgets/collections/presentation/index.tsx
+++ b/apps/client/src/widgets/collections/presentation/index.tsx
@@ -5,6 +5,9 @@ import slideBaseStylesheet from "reveal.js/dist/reveal.css?raw";
 import slideThemeStylesheet from "reveal.js/dist/theme/black.css?raw";
 import { buildPresentationModel, PresentationModel, PresentationSlideModel } from "./model";
 import ShadowDom from "../../react/ShadowDom";
+import ActionButton from "../../react/ActionButton";
+import "./index.css";
+import { RefObject } from "preact";
 
 const stylesheets = [
     slideBaseStylesheet,
@@ -13,16 +16,37 @@ const stylesheets = [
 
 export default function PresentationView({ note }: ViewModeProps<{}>) {
     const [ presentation, setPresentation ] = useState<PresentationModel>();
+    const containerRef = useRef<HTMLDivElement>(null);
 
     useLayoutEffect(() => {
         buildPresentationModel(note).then(setPresentation);
     }, [ note ]);
 
     return presentation && (
-        <ShadowDom className="presentation-container" style={{ width: "100%", height: "100%" }}>
-            {stylesheets.map(stylesheet => <style>{stylesheet}</style>)}
-            <Presentation presentation={presentation} />
-        </ShadowDom>
+        <>
+            <ShadowDom
+                className="presentation-container"
+                style={{ width: "100%", height: "100%" }}
+                containerRef={containerRef}
+            >
+                {stylesheets.map(stylesheet => <style>{stylesheet}</style>)}
+                <Presentation presentation={presentation} />
+            </ShadowDom>
+            <ButtonOverlay containerRef={containerRef} />
+        </>
+    )
+}
+
+function ButtonOverlay({ containerRef }: { containerRef: RefObject<HTMLDivElement> }) {
+    return (
+        <div className="presentation-button-bar">
+            <ActionButton
+                icon="bx bx-fullscreen" text="Start presentation"
+                onClick={() => {
+                    containerRef.current?.requestFullscreen();
+                }}
+            />
+        </div>
     )
 }
 
diff --git a/apps/client/src/widgets/react/ShadowDom.tsx b/apps/client/src/widgets/react/ShadowDom.tsx
index 6f7a889db..3bbd23427 100644
--- a/apps/client/src/widgets/react/ShadowDom.tsx
+++ b/apps/client/src/widgets/react/ShadowDom.tsx
@@ -1,12 +1,14 @@
-import { ComponentChildren, HTMLAttributes, JSX, render } from "preact";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { ComponentChildren, HTMLAttributes, JSX, RefObject, render } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import { useSyncedRef } from "./hooks";
 
-interface ShadowDomProps extends HTMLAttributes<HTMLDivElement> {
+interface ShadowDomProps extends Omit<HTMLAttributes<HTMLDivElement>, "ref"> {
     children: ComponentChildren;
+    containerRef?: RefObject<HTMLDivElement>;
 }
 
-export default function ShadowDom({ children, ...containerProps }: ShadowDomProps) {
-    const containerRef = useRef<HTMLDivElement>(null);
+export default function ShadowDom({ children, containerRef: externalContainerRef, ...containerProps }: ShadowDomProps) {
+    const containerRef = useSyncedRef<HTMLDivElement>(externalContainerRef, null);
     const [ shadowRoot, setShadowRoot ] = useState<ShadowRoot | null>(null);
 
     // Create the shadow root.