diff --git a/frontend/src/Editor/Components/Modal.jsx b/frontend/src/Editor/Components/Modal.jsx
index eef8675710..ba98f12098 100644
--- a/frontend/src/Editor/Components/Modal.jsx
+++ b/frontend/src/Editor/Components/Modal.jsx
@@ -18,6 +18,7 @@ export const Modal = function Modal({
   fireEvent,
   dataCy,
   height,
+  mode,
 }) {
   const [showModal, setShowModal] = useState(false);
 
@@ -42,10 +43,20 @@ export const Modal = function Modal({
     boxShadow,
   } = styles;
   const parentRef = useRef(null);
+  const controlBoxRef = useRef(null);
 
   const title = properties.title ?? '';
   const size = properties.size ?? 'lg';
 
+  /**** Start - Logic to reset the zIndex of modal control box ****/
+  useEffect(() => {
+    if (!showModal && mode === 'edit') {
+      controlBoxRef.current?.classList?.remove('modal-moveable');
+      controlBoxRef.current = null;
+    }
+  }, [showModal]);
+  /**** End - Logic to reset the zIndex of modal control box ****/
+
   useEffect(() => {
     const exposedVariables = {
       open: async function () {
@@ -181,6 +192,13 @@ export const Modal = function Modal({
           className="jet-button btn btn-primary p-1 overflow-hidden"
           style={customStyles.buttonStyles}
           onClick={(event) => {
+            /**** Start - Logic to reduce the zIndex of modal control box ****/
+            controlBoxRef.current = document.querySelector(`.selected-component.sc-${id}`)?.parentElement;
+            if (mode === 'edit' && controlBoxRef.current) {
+              controlBoxRef.current.classList.add('modal-moveable');
+            }
+            /**** End - Logic to reduce the zIndex of modal control box ****/
+
             event.stopPropagation();
             setShowModal(true);
             setExposedVariable('show', true);
diff --git a/frontend/src/Editor/DragContainer.css b/frontend/src/Editor/DragContainer.css
index 38b3534bee..17ef654af3 100644
--- a/frontend/src/Editor/DragContainer.css
+++ b/frontend/src/Editor/DragContainer.css
@@ -23,6 +23,9 @@
 .moveable-control-box>.moveable-control-box:hover, .moveable-control-box>.moveable-dragging{
 	visibility: visible !important;
 }
+.moveable-control-box.modal-moveable{
+    z-index: 1000 !important;
+}
 
 .moveable-control-box {
 	background: red;
diff --git a/frontend/src/Editor/DragContainer.jsx b/frontend/src/Editor/DragContainer.jsx
index a9cd2fc53b..c665eee642 100644
--- a/frontend/src/Editor/DragContainer.jsx
+++ b/frontend/src/Editor/DragContainer.jsx
@@ -192,7 +192,7 @@ export default function DragContainer({
     var elements = document.getElementsByClassName('selected-component');
     // Iterate through the elements and replace the old class with the new one
     for (var i = 0; i < elements.length; i++) {
-      elements[i].classList.remove('selected-component');
+      elements[i].className = 'moveable-control-box modal-moveable rCS1w3zcxh';
     }
     if (parentId) {
       // eslint-disable-next-line no-undef
@@ -201,7 +201,7 @@ export default function DragContainer({
       if (controlBoxes) {
         for (const element of controlBoxes) {
           if (selectedComponentsId.has(element?.props?.target?.id)) {
-            element?.controlBox?.classList.add('selected-component');
+            element?.controlBox?.classList.add('selected-component', `sc-${element?.props?.target?.id}`);
           }
         }
       }
@@ -210,7 +210,7 @@ export default function DragContainer({
       if (controlBoxes) {
         for (const element of controlBoxes) {
           if (selectedComponentsId.has(element?.props?.target?.id)) {
-            element?.controlBox?.classList.add('selected-component');
+            element?.controlBox?.classList.add('selected-component', `sc-${element?.props?.target?.id}`);
           }
         }
         // }