diff --git a/frontend/components/ExportBanner.js b/frontend/components/ExportBanner.js
index 959f659262..261ca5c724 100644
--- a/frontend/components/ExportBanner.js
+++ b/frontend/components/ExportBanner.js
@@ -1,5 +1,5 @@
 import { useEventListener } from "../common/useEventListener.js"
-import { html, useEffect, useRef } from "../imports/Preact.js"
+import { html, useLayoutEffect, useRef } from "../imports/Preact.js"
 
 const Circle = ({ fill }) => html`
     <svg
@@ -77,8 +77,27 @@ export const ExportBanner = ({ notebook_id, print_title, open, onClose, notebook
         [print_title]
     )
 
+    const element_ref = useRef(/** @type {HTMLDialogElement?} */ (null))
+
+    useLayoutEffect(() => {
+        if (open) {
+            element_ref.current?.show()
+        } else {
+            element_ref.current?.close()
+        }
+    }, [open, element_ref.current])
+
+    useEventListener(
+        element_ref.current,
+        "focusout",
+        () => {
+            if (!element_ref.current?.matches(":focus-within")) onClose()
+        },
+        [onClose]
+    )
+
     return html`
-        <aside id="export" inert=${!open}>
+        <dialog id="export" inert=${!open} ref=${element_ref}>
             <div id="container">
                 <div class="export_title">export</div>
                 <!-- no "download" attribute here: we want the jl contents to be shown in a new tab -->
@@ -119,33 +138,33 @@ export const ExportBanner = ({ notebook_id, print_title, open, onClose, notebook
                         <section>Capture the entire notebook, and any changes you make.</section>
                     </a>
                 `}
-                <div class="export_small_btns">
-                    <button
-                        title="Edit frontmatter"
-                        class="toggle_frontmatter_edit"
-                        onClick=${() => {
-                            onClose()
-                            window.dispatchEvent(new CustomEvent("open pluto frontmatter"))
-                        }}
-                    >
-                        <span></span>
-                    </button>
-                    <button
-                        title="Start presentation"
-                        class="toggle_presentation"
-                        onClick=${() => {
-                            onClose()
-                            // @ts-ignore
-                            window.present()
-                        }}
-                    >
-                        <span></span>
-                    </button>
-                    <button title="Close" class="toggle_export" onClick=${() => onClose()}>
-                        <span></span>
-                    </button>
-                </div>
             </div>
-        </aside>
+            <div class="export_small_btns">
+                <button
+                    title="Edit frontmatter"
+                    class="toggle_frontmatter_edit"
+                    onClick=${() => {
+                        onClose()
+                        window.dispatchEvent(new CustomEvent("open pluto frontmatter"))
+                    }}
+                >
+                    <span></span>
+                </button>
+                <button
+                    title="Start presentation"
+                    class="toggle_presentation"
+                    onClick=${() => {
+                        onClose()
+                        // @ts-ignore
+                        window.present()
+                    }}
+                >
+                    <span></span>
+                </button>
+                <button title="Close" class="toggle_export" onClick=${() => onClose()}>
+                    <span></span>
+                </button>
+            </div>
+        </dialog>
     `
 }
diff --git a/frontend/editor.css b/frontend/editor.css
index 083cd9a95b..a208819c81 100644
--- a/frontend/editor.css
+++ b/frontend/editor.css
@@ -489,16 +489,24 @@ header#pluto-nav.show_export {
     transform: translateY(130px);
 }
 
-aside#export {
+dialog#export {
     position: absolute;
+    display: block;
     top: 0;
     width: 100%;
     height: 130px;
     background: var(--export-bg-color);
     color: var(--export-color);
     transform: translateY(-100%);
+    /* overlay: none !important; */
+    overflow: visible;
+    margin: 0;
+    padding: 0;
+    max-width: none;
+    max-height: none;
+    border: none;
 }
-aside#export::before {
+dialog#export::before {
     content: "";
     position: absolute;
     bottom: 100%;
@@ -507,7 +515,7 @@ aside#export::before {
     height: 100px;
     background: inherit;
 }
-aside#export div#container {
+dialog#export div#container {
     flex-direction: row;
     display: flex;
     max-width: 1000px;
@@ -515,11 +523,11 @@ aside#export div#container {
     margin: 0 auto;
     position: relative;
 }
-header aside#export div#container {
+header dialog#export div#container {
     /* to prevent the div from taking up horizontal page when the export pane is closed. On small screen this causes overscroll on the right. */
     overflow-x: hidden;
 }
-header.show_export aside#export div#container {
+header.show_export dialog#export div#container {
     overflow-x: auto;
 }
 a.export_card {
@@ -562,7 +570,7 @@ a.export_card section {
     /* font-size: 14px; */
     padding: 3px;
 }
-aside#export .export_small_btns {
+dialog#export .export_small_btns {
     display: flex;
     flex-direction: row;
     padding: 0.9em;
@@ -727,15 +735,15 @@ nav#at_the_top button.toggle_export span {
     background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/share-outline.svg");
     filter: var(--image-filters);
 }
-aside#export button.toggle_export span {
+dialog#export button.toggle_export span {
     background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/close-outline.svg");
     filter: invert(1);
 }
-aside#export button.toggle_frontmatter_edit span {
+dialog#export button.toggle_frontmatter_edit span {
     background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/newspaper-outline.svg");
     filter: invert(1);
 }
-aside#export button.toggle_presentation span {
+dialog#export button.toggle_presentation span {
     background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/ionicons@5.5.1/src/svg/easel-outline.svg");
     filter: invert(1);
 }