diff --git a/packages/common/business_components/src/ui/dialog_ui/index.tsx b/packages/common/business_components/src/ui/dialog_ui/index.tsx
index bbb27d327..df7fffd3a 100644
--- a/packages/common/business_components/src/ui/dialog_ui/index.tsx
+++ b/packages/common/business_components/src/ui/dialog_ui/index.tsx
@@ -1,7 +1,7 @@
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader } from "@common/components";
 import { cn } from "../../lib/utils";
 
-type ModalType = { 
+type ModalType = {
   bodyClass: string;
   body: React.ReactNode;
   open?: boolean;
@@ -10,43 +10,45 @@ type ModalType = {
   noFooterYn?: 'N' | 'Y';
   headerTitle?: string;
   footerContent?: React.ReactNode;
+  useDirectRender?: boolean;
 }
 
-export function UiModal({ 
-  bodyClass,  
-  body, 
-  open, 
+export function UiModal({
+  bodyClass,
+  body,
+  open,
   onOpenChange,
   noHeaderYn = 'N',
   noFooterYn = 'N',
   headerTitle,
-  footerContent
+  footerContent,
+  useDirectRender = false
 }: ModalType) {
- 
+
   return (
     <>
-        <Dialog open={open} onOpenChange={onOpenChange}>
+      <Dialog open={open} onOpenChange={onOpenChange}>
         <DialogContent className={bodyClass}>
-        {noHeaderYn === 'N' && (
-              <DialogHeader>
-                <DialogDescription>
-                  {headerTitle}
-                </DialogDescription>
-              </DialogHeader>
-            )}
-            {(open && body) ?
-            <div> {body}</div>:<></>
-            
-            
-            
-            } 
-            {noFooterYn === 'N' && (
-              <DialogFooter className="sm:justify-start">
-                {footerContent}
-              </DialogFooter>
-            )}
-          </DialogContent>
-        </Dialog>
+          {noHeaderYn === 'N' && (
+            <DialogHeader>
+              <DialogDescription>
+                {headerTitle}
+              </DialogDescription>
+            </DialogHeader>
+          )}
+          {(open && body) ?
+            useDirectRender
+              ? body
+              : <div>{body}</div>
+            : <></>
+          }
+          {noFooterYn === 'N' && (
+            <DialogFooter className="sm:justify-start">
+              {footerContent}
+            </DialogFooter>
+          )}
+        </DialogContent>
+      </Dialog>
     </>
   );
 }