diff --git a/src/app/components/delete/deleteConfirmationModal.tsx b/src/app/components/delete/deleteConfirmationModal.tsx
index 09155e1..12bc257 100644
--- a/src/app/components/delete/deleteConfirmationModal.tsx
+++ b/src/app/components/delete/deleteConfirmationModal.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import ConfirmActionModal from "../modals/ConfirmActionModal";
 
 type DeleteConfirmationModalProps = {
   open: boolean;
@@ -23,44 +24,18 @@ export default function DeleteConfirmationModal({
   onCancel,
   children,
 }: DeleteConfirmationModalProps) {
-  if (!open) return null;
   return (
-    <div className="fixed inset-0 z-50">
-      <div className="absolute inset-0 bg-black/40" onClick={onCancel} />
-      <div className="absolute inset-0 flex items-center justify-center p-4">
-        <div className="w-full max-w-md rounded-2xl bg-white shadow-2xl ring-1 ring-black/10">
-          <div className="p-6">
-            <div className="flex items-center gap-3 mb-3">
-              <div className="flex items-center justify-center h-10 w-10 rounded-full bg-red-100">
-                <svg width="24" height="24" fill="none" stroke="currentColor" className="text-red-600">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </div>
-              <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
-            </div>
-            <p className="text-sm text-gray-700 mb-4">{description}</p>
-            {children}
-            <div className="flex items-center justify-end gap-2 mt-6">
-              <button
-                type="button"
-                onClick={onCancel}
-                className="text-sm px-4 py-2 rounded-lg bg-white hover:bg-gray-50 text-gray-800 border border-gray-200"
-                disabled={loading}
-              >
-                {cancelText}
-              </button>
-              <button
-                type="button"
-                onClick={onConfirm}
-                disabled={loading}
-                className="text-sm px-4 py-2 rounded-lg bg-red-600 hover:bg-red-500 text-white disabled:opacity-60"
-              >
-                {loading ? "Deleting…" : confirmText}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <ConfirmActionModal
+      open={open}
+      pending={loading}
+      intent="danger"
+      title={title}
+      description={description}
+      confirmText={confirmText}
+      cancelText={cancelText}
+      onConfirm={onConfirm}
+      onClose={onCancel}
+      extraContent={children}
+    />
   );
 }
diff --git a/src/app/components/modals/ConfirmActionModal.tsx b/src/app/components/modals/ConfirmActionModal.tsx
new file mode 100644
index 0000000..3523775
--- /dev/null
+++ b/src/app/components/modals/ConfirmActionModal.tsx
@@ -0,0 +1,132 @@
+'use client'
+
+import React from 'react'
+import { Fragment } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
+
+type ConfirmIntent = 'default' | 'danger'
+
+interface ConfirmActionModalProps {
+  open: boolean
+  title: string
+  description: string
+  confirmText?: string
+  cancelText?: string
+  pending?: boolean
+  intent?: ConfirmIntent
+  onClose: () => void
+  onConfirm: () => Promise<void> | void
+  extraContent?: React.ReactNode
+}
+
+export default function ConfirmActionModal({
+  open,
+  title,
+  description,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  pending = false,
+  intent = 'default',
+  onClose,
+  onConfirm,
+  extraContent,
+}: ConfirmActionModalProps) {
+  const [displayData, setDisplayData] = React.useState({
+    title,
+    description,
+    confirmText,
+    cancelText,
+    intent,
+    extraContent: extraContent ?? null,
+  })
+
+  React.useEffect(() => {
+    if (!open) return
+    setDisplayData({
+      title,
+      description,
+      confirmText,
+      cancelText,
+      intent,
+      extraContent: extraContent ?? null,
+    })
+  }, [open, title, description, confirmText, cancelText, intent, extraContent])
+
+  const activeIntent = displayData.intent
+
+  const confirmButtonClass =
+    activeIntent === 'danger'
+      ? 'inline-flex items-center rounded-md border border-red-300 bg-red-600 px-3 py-2 text-sm text-white hover:bg-red-700 disabled:opacity-60'
+      : 'inline-flex items-center rounded-md border border-[#8D6B1D] bg-[#8D6B1D] px-3 py-2 text-sm text-white hover:bg-[#7A5E1A] disabled:opacity-60'
+
+  const iconColorClass = activeIntent === 'danger' ? 'text-red-600' : 'text-amber-600'
+
+  return (
+    <Transition show={open} as={Fragment}>
+      <Dialog onClose={pending ? () => {} : onClose} className="relative z-[1100]">
+        <Transition.Child
+          as={Fragment}
+          enter="transition-opacity ease-out duration-200"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="transition-opacity ease-in duration-150"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black/40 backdrop-blur-sm" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4">
+            <Transition.Child
+              as={Fragment}
+              enter="transition-all ease-out duration-200"
+              enterFrom="opacity-0 translate-y-2 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="transition-all ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-2 sm:scale-95"
+            >
+              <Dialog.Panel className="w-full max-w-md rounded-lg bg-white p-6 shadow-xl ring-1 ring-black/10">
+                <div className="flex items-start gap-3">
+                  <div className="shrink-0">
+                    <ExclamationTriangleIcon className={`h-6 w-6 ${iconColorClass}`} />
+                  </div>
+                  <div className="flex-1">
+                    <Dialog.Title className="text-lg font-semibold text-gray-900">
+                      {displayData.title}
+                    </Dialog.Title>
+                    <div className="mt-2 text-sm text-gray-600">
+                      <p>{displayData.description}</p>
+                      {displayData.extraContent ? <div className="mt-3">{displayData.extraContent}</div> : null}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="mt-6 flex items-center justify-end gap-2">
+                  <button
+                    type="button"
+                    disabled={pending}
+                    onClick={onClose}
+                    className="inline-flex items-center rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-800 hover:bg-gray-50 disabled:opacity-60"
+                  >
+                    {displayData.cancelText}
+                  </button>
+                  <button
+                    type="button"
+                    disabled={pending}
+                    onClick={onConfirm}
+                    className={confirmButtonClass}
+                  >
+                    {displayData.confirmText}
+                  </button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  )
+}