diff --git a/apps/client/src/components/Dialog/Dialog.js b/apps/client/src/components/Dialog/Dialog.js
index 0d0c4f2f3..21334a41b 100644
--- a/apps/client/src/components/Dialog/Dialog.js
+++ b/apps/client/src/components/Dialog/Dialog.js
@@ -58,65 +58,72 @@ export default function ResponsiveDialog(props) {
   typeof onVisibilityChanged === "function" && onVisibilityChanged(open);
 
   return (
-    <Dialog
-      aria-labelledby="responsive-dialog-title"
-      fullScreen={fullScreen}
-      onClose={handleClose}
-      open={open}
-      // Must stop event-bubbling. Otherwise the parent element in react can be dragged etc.
-      onMouseDown={(e) => {
-        e.stopPropagation();
-      }}
-    >
-      {headerText && (
-        <DialogTitle id="responsive-dialog-title">{headerText}</DialogTitle>
-      )}
-      <DialogContent>
-        {children}
-        {useLegacyNonMarkdownRenderer === true ? (
-          <LegacyNonMarkdownRenderer text={text} />
-        ) : (
-          <ReactMarkdown
-            remarkPlugins={[gfm]} // GitHub Formatted Markdown adds support for Tables in MD
-            rehypePlugins={rehypePlugins} // Needed to parse HTML, activated in admin
-            components={customComponentsForReactMarkdown} // Custom renderers for components, see definition in components
-            children={text} // Our MD, as a text string
-          />
+    open && (
+      <Dialog
+        aria-labelledby="responsive-dialog-title"
+        aria-describedby="responsive-dialog-content"
+        fullScreen={fullScreen}
+        onClose={handleClose}
+        open={open}
+        // Must stop event-bubbling. Otherwise the parent element in react can be dragged etc.
+        onMouseDown={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        {headerText && (
+          <DialogTitle id="responsive-dialog-title">{headerText}</DialogTitle>
         )}
+        <DialogContent id="responsive-dialog-content">
+          {children}
+          {useLegacyNonMarkdownRenderer === true ? (
+            <LegacyNonMarkdownRenderer text={text} />
+          ) : (
+            <ReactMarkdown
+              remarkPlugins={[gfm]} // GitHub Formatted Markdown adds support for Tables in MD
+              rehypePlugins={rehypePlugins} // Needed to parse HTML, activated in admin
+              components={customComponentsForReactMarkdown} // Custom renderers for components, see definition in components
+              children={text} // Our MD, as a text string
+            />
+          )}
 
-        {prompt && (
-          <form
-            noValidate
-            autoComplete="off"
-            onSubmit={(e) => {
-              e.preventDefault();
-              props.onClose(promptText);
-              return false;
-            }}
-          >
-            <TextField
-              id="prompt-text"
-              label=""
-              value={promptText}
-              onChange={(e) => {
-                setPromptText(e.target.value);
+          {prompt && (
+            <form
+              noValidate
+              autoComplete="off"
+              onSubmit={(e) => {
+                e.preventDefault();
+                props.onClose(promptText);
+                return false;
               }}
-              margin="normal"
-              autoFocus={true}
-            />
-          </form>
-        )}
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={handleClose} variant={primaryButtonVariant || "text"}>
-          {buttonText}
-        </Button>
-        {abortText && (
-          <Button onClick={handleAbort} sx={{ color: "text.primary" }}>
-            {abortText}
+            >
+              <TextField
+                id="prompt-text"
+                label=""
+                value={promptText}
+                onChange={(e) => {
+                  setPromptText(e.target.value);
+                }}
+                margin="normal"
+                autoFocus={true}
+              />
+            </form>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button
+            onClick={handleClose}
+            variant={primaryButtonVariant || "text"}
+            sx={{ color: "text.primary" }}
+          >
+            {buttonText}
           </Button>
-        )}
-      </DialogActions>
-    </Dialog>
+          {abortText && (
+            <Button onClick={handleAbort} sx={{ color: "text.primary" }}>
+              {abortText}
+            </Button>
+          )}
+        </DialogActions>
+      </Dialog>
+    )
   );
 }