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 da5033f8a1..e6a9ede624 100644
--- a/frontend/src/Editor/DragContainer.jsx
+++ b/frontend/src/Editor/DragContainer.jsx
@@ -156,18 +156,16 @@ export default function DragContainer({
 
     const selectedComponentsId = new Set(
       selectedComponents.map((component) => {
-        console.log('here--- ', component.id, childMoveableRefs.current, childMoveableRefs.current[component.id]);
         return component.id;
       })
     );
     const parentId = selectedComponents.find((comp) => comp.component.parent)?.component?.parent;
-    console.log('parentId--', parentId, selectedComponents);
 
     // Get all elements with the old class name
     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) {
@@ -177,7 +175,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}`);
           }
         }
       }
@@ -186,7 +184,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}`);
           }
         }
         // }