diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
index 57c8bb6..34479d3 100644
--- a/frontend/src/components/ConfirmDialog.tsx
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -1,8 +1,6 @@
-import { useEffect } from 'react'
+import { useEffect, forwardRef } from 'react'
 
 interface Props {
-  /** The <dialog> element ref — call ref.current?.showModal() to open. */
-  ref?: React.Ref<HTMLDialogElement>
   /** Title shown in the dialog header. */
   title: string
   /** Body text explaining what will happen. */
@@ -17,18 +15,17 @@ interface Props {
   danger?: boolean
 }
 
-export default function ConfirmDialog({
-  ref,
+const ConfirmDialog = forwardRef<HTMLDialogElement, Props>(function ConfirmDialog({
   title,
   message,
   confirmLabel = 'Confirm',
   onConfirm,
   onCancel,
   danger = true,
-}: Props) {
+}, ref) {
   useEffect(() => {
-    const dialog = ref && 'current' in ref ? ref.current : null
-    if (!dialog) return
+    if (!ref || !('current' in ref) || !ref.current) return
+    const dialog = ref.current
 
     const handleClose = () => onCancel?.()
     dialog.addEventListener('close', handleClose)
@@ -78,4 +75,6 @@ export default function ConfirmDialog({
       </form>
     </dialog>
   )
-}
\ No newline at end of file
+})
+
+export default ConfirmDialog
\ No newline at end of file