diff --git a/js/app.js b/js/app.js
index edae3f181..be2d09634 100644
--- a/js/app.js
+++ b/js/app.js
@@ -401,3 +401,57 @@ $(document).ready(function() {
     // Data Tables
     new DataTable('.dataTables');
 });
+
+/*
+ |---------------------------------------------------------------
+ | Nested Modal Fix for ITFlow AJAX Modals
+ | Each modal gets a unique container, parent modals remain open
+ |---------------------------------------------------------------
+*/
+
+(function() {
+    if (!window.createAjaxModal) return;
+
+    // Keep original function just in case
+    const originalCreateAjaxModal = window.createAjaxModal;
+
+    window.createAjaxModal = function(contentHtml) {
+        // Generate a unique ID for this modal
+        const modalId = 'ajaxModal_' + Date.now();
+
+        // Create a new modal container
+        const $modal = $('<div class="modal fade" tabindex="-1" aria-hidden="true">')
+            .attr('id', modalId)
+            .html(contentHtml)
+            .appendTo('body');
+
+        // Initialize Bootstrap modal
+        $modal.modal('show');
+
+        // Ensure only this modal is removed when hidden
+        $modal.on('hidden.bs.modal', function () {
+            $(this).remove();
+        });
+
+        return $modal;
+    };
+
+    // Optional: Keep proper z-index stacking for multiple nested modals
+    $(document).on('show.bs.modal', '.modal', function () {
+        const zIndex = 1040 + (10 * $('.modal:visible').length);
+        $(this).css('z-index', zIndex);
+        setTimeout(() => {
+            $('.modal-backdrop').not('.modal-stack')
+                .css('z-index', zIndex - 1)
+                .addClass('modal-stack');
+        }, 0);
+    });
+
+    $(document).on('hidden.bs.modal', '.modal', function () {
+        if ($('.modal:visible').length > 0) {
+            $('body').addClass('modal-open');
+        }
+    });
+
+})();
+