diff --git a/apps/client/src/widgets/dialogs/confirm.ts b/apps/client/src/widgets/dialogs/confirm.ts
deleted file mode 100644
index 8fa25a728..000000000
--- a/apps/client/src/widgets/dialogs/confirm.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-import BasicWidget from "../basic_widget.js";
-import { t } from "../../services/i18n.js";
-import { Modal } from "bootstrap";
-
-const DELETE_NOTE_BUTTON_CLASS = "confirm-dialog-delete-note";
-
-const TPL = /*html*/`
-<div class="confirm-dialog modal mx-auto" tabindex="-1" role="dialog" style="z-index: 2000;">
-    <div class="modal-dialog modal-dialog-scrollable" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">${t("confirm.confirmation")}</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t("confirm.close")}"></button>
-            </div>
-            <div class="modal-body">
-                <div class="confirm-dialog-content"></div>
-
-                <div class="confirm-dialog-custom"></div>
-            </div>
-            <div class="modal-footer">
-                <button class="confirm-dialog-cancel-button btn btn-sm">${t("confirm.cancel")}</button>
-
-                &nbsp;
-
-                <button class="confirm-dialog-ok-button btn btn-primary btn-sm">${t("confirm.ok")}</button>
-            </div>
-        </div>
-    </div>
-</div>`;
-
-export type ConfirmDialogResult = false | ConfirmDialogOptions;
-export type ConfirmDialogCallback = (val?: ConfirmDialogResult) => void;
-
-export interface ConfirmDialogOptions {
-    confirmed: boolean;
-    isDeleteNoteChecked: boolean;
-}
-
-// For "showConfirmDialog"
-
-export interface ConfirmWithMessageOptions {
-    message: string | HTMLElement | JQuery<HTMLElement>;
-    callback: ConfirmDialogCallback;
-}
-
-export interface ConfirmWithTitleOptions {
-    title: string;
-    callback: ConfirmDialogCallback;
-}
-
-export default class ConfirmDialog extends BasicWidget {
-    private resolve: ConfirmDialogCallback | null;
-
-    private modal!: Modal;
-    private $originallyFocused!: JQuery<HTMLElement> | null;
-    private $confirmContent!: JQuery<HTMLElement>;
-    private $okButton!: JQuery<HTMLElement>;
-    private $cancelButton!: JQuery<HTMLElement>;
-    private $custom!: JQuery<HTMLElement>;
-
-    constructor() {
-        super();
-
-        this.resolve = null;
-        this.$originallyFocused = null; // element focused before the dialog was opened, so we can return to it afterward
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.modal = Modal.getOrCreateInstance(this.$widget[0]);
-        this.$confirmContent = this.$widget.find(".confirm-dialog-content");
-        this.$okButton = this.$widget.find(".confirm-dialog-ok-button");
-        this.$cancelButton = this.$widget.find(".confirm-dialog-cancel-button");
-        this.$custom = this.$widget.find(".confirm-dialog-custom");
-
-        this.$widget.on("shown.bs.modal", () => this.$okButton.trigger("focus"));
-
-        this.$widget.on("hidden.bs.modal", () => {
-            if (this.resolve) {
-                this.resolve(false);
-            }
-
-            if (this.$originallyFocused) {
-                this.$originallyFocused.trigger("focus");
-                this.$originallyFocused = null;
-            }
-        });
-
-        this.$cancelButton.on("click", () => this.doResolve(false));
-        this.$okButton.on("click", () => this.doResolve(true));
-    }
-
-    showConfirmDialogEvent({ message, callback }: ConfirmWithMessageOptions) {
-        this.$originallyFocused = $(":focus");
-
-        this.$custom.hide();
-
-        glob.activeDialog = this.$widget;
-
-        if (typeof message === "string") {
-            message = $("<div>").text(message);
-        }
-
-        this.$confirmContent.empty().append(message);
-
-        this.modal.show();
-
-        this.resolve = callback;
-    }
-
-    showConfirmDeleteNoteBoxWithNoteDialogEvent({ title, callback }: ConfirmWithTitleOptions) {
-        glob.activeDialog = this.$widget;
-
-        this.$confirmContent.text(`${t("confirm.are_you_sure_remove_note", { title: title })}`);
-
-        this.$custom
-            .empty()
-            .append("<br/>")
-            .append(
-                $("<div>")
-                    .addClass("form-check")
-                    .append(
-                        $("<label>")
-                            .addClass("form-check-label")
-                            .attr("style", "text-decoration: underline dotted var(--main-text-color)")
-                            .attr("title", `${t("confirm.if_you_dont_check")}`)
-                            .append($("<input>").attr("type", "checkbox").addClass(`form-check-input ${DELETE_NOTE_BUTTON_CLASS}`))
-                            .append(`${t("confirm.also_delete_note")}`)
-                    )
-            );
-
-        this.$custom.show();
-
-        this.modal.show();
-
-        this.resolve = callback;
-    }
-
-    doResolve(ret: boolean) {
-        if (this.resolve) {
-            this.resolve({
-                confirmed: ret,
-                isDeleteNoteChecked: this.$widget.find(`.${DELETE_NOTE_BUTTON_CLASS}:checked`).length > 0
-            });
-        }
-
-        this.resolve = null;
-
-        this.modal.hide();
-    }
-}
diff --git a/apps/client/src/widgets/dialogs/confirm.tsx b/apps/client/src/widgets/dialogs/confirm.tsx
new file mode 100644
index 000000000..5343f625a
--- /dev/null
+++ b/apps/client/src/widgets/dialogs/confirm.tsx
@@ -0,0 +1,78 @@
+import ReactBasicWidget from "../react/ReactBasicWidget";
+import Modal from "../react/Modal";
+import Button from "../react/Button";
+import { closeActiveDialog, openDialog } from "../../services/dialog";
+import { t } from "../../services/i18n";
+import { useState } from "react";
+
+interface ConfirmDialogProps {
+    message?: string | HTMLElement;   
+    callback?: ConfirmDialogCallback;
+    lastElementToFocus?: HTMLElement | null;
+}
+
+function ConfirmDialogComponent({ message, callback, lastElementToFocus }: ConfirmDialogProps) {
+
+    const [ confirmed, setConfirmed ] = useState<boolean>(false);
+
+    return (message && 
+        <Modal
+            title={t("confirm.confirmation")}
+            size="md"
+            zIndex={2000}
+            scrollable={true}
+            onHidden={() => {
+                callback?.({
+                    confirmed,
+                    isDeleteNoteChecked: false // This can be extended to include more options if needed
+                });
+                lastElementToFocus?.focus();
+            }}
+            footer={<>
+                <Button text={t("confirm.cancel")} onClick={() => closeActiveDialog()} />
+                <Button text={t("confirm.ok")} onClick={() => {
+                    setConfirmed(true);
+                    closeActiveDialog();
+                }} />
+            </>}
+        >
+            {typeof message === "string"
+                ? <div>{message ?? ""}</div>
+                : <div dangerouslySetInnerHTML={{ __html: message.outerHTML ?? "" }} />}
+        </Modal>
+    );
+}
+
+export type ConfirmDialogResult = false | ConfirmDialogOptions;
+export type ConfirmDialogCallback = (val?: ConfirmDialogResult) => void;
+type MessageType = string | HTMLElement | JQuery<HTMLElement>;
+
+export interface ConfirmDialogOptions {
+    confirmed: boolean;
+    isDeleteNoteChecked: boolean;
+}
+
+export interface ConfirmWithMessageOptions {
+    message: MessageType;
+    callback: ConfirmDialogCallback;
+}
+
+export default class ConfirmDialog extends ReactBasicWidget {
+
+    private props: ConfirmDialogProps = {};
+
+    get component() {
+        return <ConfirmDialogComponent {...this.props} />;
+    }
+
+    showConfirmDialogEvent({ message, callback }: ConfirmWithMessageOptions) {
+        this.props = {
+            message: (typeof message === "object" && "length" in message ? message[0] : message),
+            lastElementToFocus: (document.activeElement as HTMLElement),
+            callback
+        };
+        this.doRender();
+        openDialog(this.$widget);
+    }
+
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/Modal.tsx b/apps/client/src/widgets/react/Modal.tsx
index 677b8ef0b..57df14635 100644
--- a/apps/client/src/widgets/react/Modal.tsx
+++ b/apps/client/src/widgets/react/Modal.tsx
@@ -10,6 +10,14 @@ interface ModalProps {
     children: ComponentChildren;
     footer?: ComponentChildren;
     maxWidth?: number;
+    zIndex?: number;
+    /**
+     * If true, the modal body will be scrollable if the content overflows.
+     * This is useful for larger modals where you want to keep the header and footer visible
+     * while allowing the body content to scroll.
+     * Defaults to false.
+     */
+    scrollable?: boolean;
     /**
      * If set, the modal body and footer will be wrapped in a form and the submit event will call this function.
      * Especially useful for user input that can be submitted with Enter key.
@@ -22,7 +30,7 @@ interface ModalProps {
     helpPageId?: string;
 }
 
-export default function Modal({ children, className, size, title, footer, onShown, onSubmit, helpPageId, maxWidth, onHidden: onHidden }: ModalProps) {
+export default function Modal({ children, className, size, title, footer, onShown, onSubmit, helpPageId, maxWidth, zIndex, scrollable, onHidden: onHidden }: ModalProps) {
     const modalRef = useRef<HTMLDivElement>(null);
 
     if (onShown || onHidden) {
@@ -48,18 +56,23 @@ export default function Modal({ children, className, size, title, footer, onShow
         });
     }    
 
-    const style: CSSProperties = {};
+    const dialogStyle: CSSProperties = {};
+    if (zIndex) {
+        dialogStyle.zIndex = zIndex;
+    }
+
+    const documentStyle: CSSProperties = {};
     if (maxWidth) {
-        style.maxWidth = `${maxWidth}px`;
+        documentStyle.maxWidth = `${maxWidth}px`;
     }
 
     return (
-        <div className={`modal fade mx-auto ${className}`} tabIndex={-1} role="dialog" ref={modalRef}>
-            <div className={`modal-dialog modal-${size}`} style={style} role="document">
+        <div className={`modal fade mx-auto ${className}`} tabIndex={-1} style={dialogStyle} role="dialog" ref={modalRef}>
+            <div className={`modal-dialog modal-${size} ${scrollable ? "modal-dialog-scrollable" : ""}`} style={documentStyle} role="document">
                 <div className="modal-content">
                     <div className="modal-header">
-                        {typeof title === "string" ? (
-                            <h5 className="modal-title">{title}</h5>
+                        {!title || typeof title === "string" ? (
+                            <h5 className="modal-title">{title ?? <>&nbsp;</>}</h5>
                         ) : (
                             title
                         )}