diff --git a/packages/common/business_components/src/ui/alert_dialog_ui/index.tsx b/packages/common/business_components/src/ui/alert_dialog_ui/index.tsx
new file mode 100644
index 000000000..8437c87a8
--- /dev/null
+++ b/packages/common/business_components/src/ui/alert_dialog_ui/index.tsx
@@ -0,0 +1,53 @@
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@common/components";
+import React from "react";
+
+type ModalType = { 
+  bodyClass: string;
+  butNm: string;
+  title: string;
+  body: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function UiModal({ bodyClass, butNm, title, body, open, onOpenChange }: ModalType) {
+  const dialogProps = open !== undefined && onOpenChange !== undefined 
+    ? { open, onOpenChange } 
+    : {};
+
+  return (
+    <>
+      {!open && (
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button className="mr-4 rounded-lg">{butNm}</Button>
+          </DialogTrigger>
+          <DialogContent className={bodyClass}>
+            <DialogHeader>
+              <DialogTitle>{title}</DialogTitle>
+              <DialogDescription>
+              </DialogDescription>
+            </DialogHeader>
+            {body}
+            <DialogFooter className="sm:justify-start">
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )}
+      {open && (
+        <Dialog {...dialogProps}>
+          <DialogContent className={bodyClass}>
+            <DialogHeader>
+              <DialogTitle>{title}</DialogTitle>
+              <DialogDescription>
+              </DialogDescription>
+            </DialogHeader>
+            {body}
+            <DialogFooter className="sm:justify-start">
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )}
+    </>
+  );
+}