diff --git a/web/apps/photos/src/components/ExportModal.tsx b/web/apps/photos/src/components/Export.tsx
similarity index 96%
rename from web/apps/photos/src/components/ExportModal.tsx
rename to web/apps/photos/src/components/Export.tsx
index e5cbee3bf8..589dd71386 100644
--- a/web/apps/photos/src/components/ExportModal.tsx
+++ b/web/apps/photos/src/components/Export.tsx
@@ -1,4 +1,5 @@
 import { EnteSwitch } from "@/base/components/EnteSwitch";
+import type { ModalVisibilityProps } from "@/base/components/utils/modal";
 import { ensureElectron } from "@/base/electron";
 import log from "@/base/log";
 import { EnteFile } from "@/media/file";
@@ -36,17 +37,15 @@ import ExportFinished from "./ExportFinished";
 import ExportInProgress from "./ExportInProgress";
 import ExportInit from "./ExportInit";
 
-interface ExportModalProps {
-    show: boolean;
-    onHide: () => void;
+type ExportProps = ModalVisibilityProps & {
     collectionNameMap: Map<number, string>;
-}
+};
 
-export default function ExportModal({
-    show,
-    onHide,
+export const Export: React.FC<ExportProps> = ({
+    open,
+    onClose,
     collectionNameMap,
-}: ExportModalProps) {
+}) => {
     const { showMiniDialog } = useAppContext();
     const [exportStage, setExportStage] = useState(ExportStage.INIT);
     const [exportFolder, setExportFolder] = useState("");
@@ -84,11 +83,11 @@ export default function ExportModal({
     }, []);
 
     useEffect(() => {
-        if (!show) {
+        if (!open) {
             return;
         }
         void syncExportRecord(exportFolder);
-    }, [show]);
+    }, [open]);
 
     // ======================
     // HELPER FUNCTIONS
@@ -171,12 +170,12 @@ export default function ExportModal({
     };
 
     return (
-        <Dialog open={show} onClose={onHide} maxWidth="xs" fullWidth>
+        <Dialog {...{ open, onClose }} maxWidth="xs" fullWidth>
             <SpaceBetweenFlex sx={{ p: "12px 4px 0px 0px" }}>
                 <DialogTitle variant="h3" fontWeight={"bold"}>
                     {t("export_data")}
                 </DialogTitle>
-                <DialogCloseIconButton {...{ onClose: onHide }} />
+                <DialogCloseIconButton {...{ onClose }} />
             </SpaceBetweenFlex>
 
             <DialogContent>
@@ -195,7 +194,7 @@ export default function ExportModal({
                 exportStage={exportStage}
                 startExport={startExport}
                 stopExport={stopExport}
-                onHide={onHide}
+                onHide={onClose}
                 lastExportTime={lastExportTime}
                 exportProgress={exportProgress}
                 pendingExports={pendingExports}
@@ -203,7 +202,7 @@ export default function ExportModal({
             />
         </Dialog>
     );
-}
+};
 
 function ExportDirectory({ exportFolder, changeExportDirectory, exportStage }) {
     return (
diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx
index 72fe01620d..0f286d8ad4 100644
--- a/web/apps/photos/src/pages/gallery.tsx
+++ b/web/apps/photos/src/pages/gallery.tsx
@@ -90,7 +90,7 @@ import CollectionNamer, {
     CollectionNamerAttributes,
 } from "components/Collections/CollectionNamer";
 import { GalleryBarAndListHeader } from "components/Collections/GalleryBarAndListHeader";
-import ExportModal from "components/ExportModal";
+import { Export } from "components/Export";
 import {
     FilesDownloadProgress,
     FilesDownloadProgressAttributes,
@@ -249,8 +249,6 @@ export default function Gallery() {
     const closeSidebar = () => setSidebarView(false);
     const openSidebar = () => setSidebarView(true);
 
-    const [exportModalView, setExportModalView] = useState(false);
-
     const [authenticateUserModalView, setAuthenticateUserModalView] =
         useState(false);
 
@@ -297,6 +295,8 @@ export default function Gallery() {
         useModalVisibility();
     const { show: showFixCreationTime, props: fixCreationTimeVisibilityProps } =
         useModalVisibility();
+    const { show: showExport, props: exportVisibilityProps } =
+        useModalVisibility();
 
     // TODO: Temp
     const user = state.user;
@@ -496,7 +496,7 @@ export default function Gallery() {
             collectionNamerView ||
             planSelectorVisibilityProps.open ||
             fixCreationTimeVisibilityProps.open ||
-            exportModalView ||
+            exportVisibilityProps.open ||
             authenticateUserModalView ||
             isPhotoSwipeOpen ||
             !filteredFiles?.length ||
@@ -810,14 +810,6 @@ export default function Gallery() {
         setUploadTypeSelectorIntent(intent ?? "upload");
     };
 
-    const openExportModal = () => {
-        setExportModalView(true);
-    };
-
-    const closeExportModal = () => {
-        setExportModalView(false);
-    };
-
     const handleSetActiveCollectionID = (
         collectionSummaryID: number | undefined,
     ) =>
@@ -876,7 +868,7 @@ export default function Gallery() {
                 syncWithRemote,
                 setBlockingLoad,
                 photoListHeader,
-                openExportModal,
+                openExportModal: showExport,
                 authenticateUser,
                 userIDToEmailMap,
                 user,
@@ -1115,9 +1107,8 @@ export default function Gallery() {
                             isInHiddenSection={barMode == "hidden-albums"}
                         />
                     )}
-                <ExportModal
-                    show={exportModalView}
-                    onHide={closeExportModal}
+                <Export
+                    {...exportVisibilityProps}
                     collectionNameMap={state.allCollectionNameByID}
                 />
                 <AuthenticateUserModal