diff --git a/frontend/src/utils/dialogs.js b/frontend/src/utils/dialogs.js
deleted file mode 100644
index 9efdde3b..00000000
--- a/frontend/src/utils/dialogs.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Dialog, ErrorMessage } from 'frappe-ui'
-import { h, reactive, ref } from 'vue'
-
-let dialogs = ref([])
-
-export let Dialogs = {
-  name: 'Dialogs',
-  render() {
-    return dialogs.value.map((dialog) => {
-      return h(
-        Dialog,
-        {
-          options: dialog,
-          modelValue: dialog.show,
-          'onUpdate:modelValue': (val) => (dialog.show = val),
-        },
-        () => [
-          h('p', { class: 'text-p-base text-gray-700' }, dialog.message),
-          h(ErrorMessage, { class: 'mt-2', message: dialog.error }),
-        ]
-      )
-    })
-  },
-}
-
-export function createDialog(options) {
-  let dialog = reactive(options)
-  dialog.key = `dialog-${Math.random().toString(36).slice(2, 9)}`
-  dialogs.value.push(dialog)
-  dialog.show = true
-}
diff --git a/frontend/src/utils/dialogs.jsx b/frontend/src/utils/dialogs.jsx
new file mode 100644
index 00000000..11836e22
--- /dev/null
+++ b/frontend/src/utils/dialogs.jsx
@@ -0,0 +1,41 @@
+import { Dialog, ErrorMessage } from 'frappe-ui'
+import { reactive, ref } from 'vue'
+
+let dialogs = ref([])
+
+export let Dialogs = {
+  name: 'Dialogs',
+  render() {
+    return dialogs.value.map((dialog) => (
+      <Dialog
+        options={dialog}
+        modelValue={dialog.show}
+        onUpdate:modelValue={(val) => (dialog.show = val)}
+      >
+        {{
+          'body-content': () => {
+            return [
+              dialog.message && (
+                <p class="text-p-base text-gray-700">{dialog.message}</p>
+              ),
+              dialog.html && (
+                <div v-html={dialog.html} />
+              ),
+              <ErrorMessage class="mt-2" message={dialog.error} />,
+            ]
+          },
+        }}
+      </Dialog>
+    ))
+  },
+}
+
+export function createDialog(dialogOptions) {
+  let dialog = reactive(dialogOptions)
+  dialog.key = 'dialog-' + dialogs.value.length
+  dialog.show = false
+  setTimeout(() => {
+    dialog.show = true
+  }, 0)
+  dialogs.value.push(dialog)
+}