diff --git a/packages/frontend/src/components/shared/ConfirmDialog.tsx b/packages/frontend/src/components/shared/ConfirmDialog.tsx
index 9a943d54..e7374ad5 100644
--- a/packages/frontend/src/components/shared/ConfirmDialog.tsx
+++ b/packages/frontend/src/components/shared/ConfirmDialog.tsx
@@ -1,37 +1,49 @@
-import React from 'react';
-
-import { color } from '@material-tailwind/react/types/components/button';
+import React, { ReactNode } from 'react';
 import { Modal, ModalProps } from './Modal';
-import { Button } from './Button';
+import { Button, ButtonOrLinkProps } from './Button';
 
-type ConfirmDialogProp = ModalProps & {
-  children: React.ReactNode;
-  dialogTitle: string;
+export type ConfirmDialogProps = ModalProps & {
+  children?: ReactNode;
+  dialogTitle?: string;
   open: boolean;
-  handleOpen: () => void;
-  confirmButtonTitle: string;
+  handleCancel: () => void;
+  confirmButtonTitle?: string;
   handleConfirm?: () => void;
-  color: color;
+  cancelButtonProps?: ButtonOrLinkProps;
+  confirmButtonProps?: ButtonOrLinkProps;
 };
 
 const ConfirmDialog = ({
   children,
   dialogTitle,
-  handleOpen,
+  handleCancel,
   confirmButtonTitle,
   handleConfirm,
+  cancelButtonProps,
+  confirmButtonProps,
   ...props
-}: ConfirmDialogProp) => {
+}: ConfirmDialogProps) => {
+  // Close the dialog when the user clicks outside of it
+  const handleOpenChange = (open: boolean) => {
+    if (!open) return handleCancel?.();
+  };
+
   return (
-    <Modal {...props}>
+    <Modal {...props} onOpenChange={handleOpenChange}>
       <Modal.Content>
         <Modal.Header>{dialogTitle}</Modal.Header>
         <Modal.Body>{children}</Modal.Body>
-        <Modal.Footer className="flex justify-start gap-2">
-          <Button variant="tertiary" onClick={handleOpen}>
+        <Modal.Footer>
+          <Button
+            variant="tertiary"
+            onClick={handleCancel}
+            {...cancelButtonProps}
+          >
             Cancel
           </Button>
-          <Button onClick={handleConfirm}>{confirmButtonTitle}</Button>
+          <Button onClick={handleConfirm} {...confirmButtonProps}>
+            {confirmButtonTitle}
+          </Button>
         </Modal.Footer>
       </Modal.Content>
     </Modal>