diff --git a/apps/client/src/services/dialog.ts b/apps/client/src/services/dialog.ts
index 22efee370..7199392d6 100644
--- a/apps/client/src/services/dialog.ts
+++ b/apps/client/src/services/dialog.ts
@@ -1,6 +1,6 @@
 import { Modal } from "bootstrap";
 import appContext from "../components/app_context.js";
-import type { ConfirmDialogOptions, ConfirmDialogResult, ConfirmWithMessageOptions } from "../widgets/dialogs/confirm.js";
+import type { ConfirmDialogOptions, ConfirmDialogResult, ConfirmWithMessageOptions, MessageType } from "../widgets/dialogs/confirm.js";
 import type { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
 import { focusSavedElement, saveFocusedElement } from "./focus.js";
 
@@ -37,7 +37,7 @@ export function closeActiveDialog() {
     }
 }
 
-async function info(message: string) {
+async function info(message: MessageType) {
     return new Promise((res) => appContext.triggerCommand("showInfoDialog", { message, callback: res }));
 }
 
diff --git a/apps/client/src/widgets/dialogs/confirm.tsx b/apps/client/src/widgets/dialogs/confirm.tsx
index 456f11ad2..8ccfcd6c2 100644
--- a/apps/client/src/widgets/dialogs/confirm.tsx
+++ b/apps/client/src/widgets/dialogs/confirm.tsx
@@ -4,12 +4,13 @@ import { t } from "../../services/i18n";
 import { useState } from "preact/hooks";
 import FormCheckbox from "../react/FormCheckbox";
 import { useTriliumEvent } from "../react/hooks";
+import type { VNode } from "preact";
 
 interface ConfirmDialogProps {
     title?: string;
     message?: string | HTMLElement;
     callback?: ConfirmDialogCallback;
-    isConfirmDeleteNoteBox?: boolean;   
+    isConfirmDeleteNoteBox?: boolean;
 }
 
 export default function ConfirmDialog() {
@@ -30,7 +31,7 @@ export default function ConfirmDialog() {
     useTriliumEvent("showConfirmDialog", ({ message, callback }) => showDialog(null, message, callback, false));
     useTriliumEvent("showConfirmDeleteNoteBoxWithNoteDialog", ({ title, callback }) => showDialog(title, t("confirm.are_you_sure_remove_note", { title: title }), callback, true));
 
-    return ( 
+    return (
         <Modal
             className="confirm-dialog"
             title={opts?.title ?? t("confirm.confirmation")}
@@ -74,7 +75,7 @@ export default function ConfirmDialog() {
 
 export type ConfirmDialogResult = false | ConfirmDialogOptions;
 export type ConfirmDialogCallback = (val?: ConfirmDialogResult) => void;
-type MessageType = string | HTMLElement | JQuery<HTMLElement>;
+export type MessageType = string | HTMLElement | JQuery<HTMLElement> | VNode;
 
 export interface ConfirmDialogOptions {
     confirmed: boolean;
diff --git a/apps/client/src/widgets/dialogs/info.tsx b/apps/client/src/widgets/dialogs/info.tsx
index 334f43ce6..ebdfd1403 100644
--- a/apps/client/src/widgets/dialogs/info.tsx
+++ b/apps/client/src/widgets/dialogs/info.tsx
@@ -5,6 +5,7 @@ import Button from "../react/Button";
 import { useRef, useState } from "preact/hooks";
 import { RawHtmlBlock } from "../react/RawHtml";
 import { useTriliumEvent } from "../react/hooks";
+import { isValidElement } from "preact";
 
 export default function InfoDialog() {
     const [ opts, setOpts ] = useState<EventData<"showInfoDialog">>();
@@ -32,7 +33,11 @@ export default function InfoDialog() {
         />}
         show={shown}
         stackable
+        scrollable
     >
-        <RawHtmlBlock className="info-dialog-content" html={opts?.message ?? ""} />
+        {isValidElement(opts?.message)
+        ? opts?.message
+        : <RawHtmlBlock className="info-dialog-content" html={opts?.message ?? ""} />
+        }
     </Modal>);
 }