diff --git a/addform.html b/addform.html
index 093dc3e..60703d6 100644
--- a/addform.html
+++ b/addform.html
@@ -342,6 +342,90 @@
 
 
 </style>
+<style>
+	/* Styles for the overlay background */
+	.overlay {
+		display: none;
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0); /* Initial opacity set to 0 */
+		transition: background-color 0.3s; /* Add a transition effect for smooth opacity change */
+		z-index: 1;
+	}
+
+	/* Styles for the popup container */
+	.popup {
+		display: none;
+		position: fixed;
+		background-color: #c8c8cb;
+		width: 30%;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		padding: 20px;
+		z-index: 2;
+		font-size: larger;
+	}
+	.popupbox {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 16px;
+    	padding: 10px;
+		border-radius: 8px;
+		background: #fff;
+		border: 1px solid #e6e6e6;
+		box-shadow: 0 0 5px rgb(0 0 0 / 10%);
+		}
+	.popupbox p{margin: 0;}
+	.popup-save{
+		display: flex;
+		justify-content: flex-end;
+	}
+	.popup-save button{
+		border-radius: 5px;
+		border-color:#eee;
+	}
+	.popupbox q{
+		align-items: center;
+		margin-bottom: 16px;
+    	padding: 10px;
+		border-radius: 8px;
+		background: #fff;
+		border: 1px solid #e6e6e6;
+		box-shadow: 0 0 5px rgb(0 0 0 / 10%);
+		}
+</style>
+<style>
+        .dropdown {
+            position: relative;
+            display: inline-block;
+			padding:20px;
+        }
+
+        .dropdown-content {
+            display: none;
+            position: absolute;
+            background-color: #f9f9f9;
+            min-width: 56px;
+            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+            z-index: 1;
+			right:12px;
+        }
+
+        .dropdown-content a {
+            padding: 12px 16px;
+            text-decoration: none;
+            display: block;
+        }
+
+        .dropdown:hover .dropdown-content {
+            display: block;
+        }
+    </style>
 
 </head>
 <body>
@@ -409,6 +493,8 @@
 
         <!-- QuestionPapper Start -->
 		<div class="row section QuestionPaperClass" id="QuestionPaper">
+			
+			
 
 		<!-- QuestionPapper Title Start-->
 		
@@ -499,6 +585,21 @@
 	</div>
 	<!-- QuestionPapper Container End -->
 	</div>
+
+		<!-- The overlay background -->
+		<div class="overlay " id="overlay"></div>
+		<!-- The popup container -->
+		<div class="popup " id="popup">
+			<ul id="output" class="">
+				<div style="margin-bottom: 9px;">Reorder sections</div>
+				
+			</ul>
+			<div class="popup-save">
+				<button onclick="saveFile()" id="closePopupButton">Save</button>
+			</div>
+			
+			<!-- <button id="closePopupButton">Close</button> -->
+		</div>
 	
 	
         <div class="copy-right-area">
@@ -574,6 +675,9 @@
 
 	
 <script>
+	
+	
+
 	var sidebarWrapper = document.getElementById("questionPaper");
 
 	function clearSidebarWrapper() {
@@ -715,7 +819,7 @@ function loadXML(xmlFileName) {
 }
 
 // Function for Save the XML File 
-function saveFile() {
+function saveFile(flag=0) {
 	html2json();
 	json2xml();
 
@@ -725,8 +829,13 @@ function saveFile() {
 	}else{   
 
 		const newFileName = FileName.split(".")[0];
-		savexml(newFileName);
-
+		//if 1 it is used for re-order and redirect to the qn paper itself
+		if (flag=1){
+			savexml(newFileName,reorder=true);
+		//if 0 it is used as nrml save which will redierect to dashboard
+		}else{
+			savexml(newFileName);
+		}
 	}
 
 };
@@ -856,6 +965,7 @@ function addSection(title = false, description = false, random_no = false, secti
 		i = i + 1;
 		addsection +=
 		`		
+		<div id="reorder_${sectionRandomID}">
 		<div class="section-heading">
 			<i class="fa fa-angle-down float-left" id="collapseSection_${random_no == false ? text_field_created_time : random_no}" aria-hidden="true"></i>
 			&nbsp; <!-- Add a space character here -->
@@ -864,10 +974,21 @@ function addSection(title = false, description = false, random_no = false, secti
 		  <input type="hidden" id="Section_UUID_ID_${random_no == false ? text_field_created_time : random_no}" value="${section_uuid == false ? Section_UUID : section_uuid}">
 			<div class="section restrict-drop" id="section_${sectionRandomID}"  >
 				<div class="sectionTitle"  id="section_title_${random_no == false ? text_field_created_time : random_no}">
+					
 					<div class="nodrop col-lg-12 col-md-12">
 						<div class="row question element" style="border-top : 15px solid; margin-right: ;" id="SectionBox_${sectionRandomID}" onmouseover="showButtons(this)" >
+							  
+							<div class="items  align-items-center hideondrag" style="display: block;">
+									<div class="dropdown " id="toggle-menu">
+										<i class="fa fa-ellipsis-v" style="font-size:20px" aria-hidden="true"></i>
+										<div class="dropdown-content">
+											<button id="popupid_${sectionRandomID}" class="showPopupButton">Move</button>
+										</div>
+									</div>
+								</div>
 
 							<div class="row" style="text-align:right; width: 100%">
+								
 								<div class="col-lg-10 col-md-12">
 									<div class=" button-group align-items-center">
 										<div class="addButton buttons" style="display: none;" id="sectionAddButton_${sectionRandomID}">
@@ -932,6 +1053,7 @@ function addSection(title = false, description = false, random_no = false, secti
 					</div>
 				</div>
 			</div>
+			</div>
 			`;
         
 		var formContainer = document.getElementById('addNewSection');
@@ -945,7 +1067,14 @@ function addSection(title = false, description = false, random_no = false, secti
 		var groupQuestionButtonId = 'groupQuestionButton_' + sectionRandomID;
 
 	
-                
+        document.getElementById('popupid_'+sectionRandomID).addEventListener('click', function() {
+			// alert("dd")
+			// const popup = document.getElementById('popup');
+		    // popup.style.display = 'block';
+			executeScriptAndDisplayOutput()
+			
+
+		});          
 		$('#'+addNewButtonId).on('click', function() {  
                
 				$('#'+SectionButtonId).toggle();
@@ -2532,62 +2661,118 @@ function removeClonedQroupQuestion(index)
     let draggedItemGroup = null;
     let draggedItemQuestion = null;
     let dropTarget = null;
-    let richTextElements = null;
-    let questionLabels = null;
 
-    // Event listener for .draggable-group elements
-    document.addEventListener('mousedown', function (e) {
-        const dragHandle = e.target.closest('.drag-handle');
-        
-        if (dragHandle) {
-            // If the click is inside a drag handle, find the corresponding .draggable-group
-            const draggableGroup = dragHandle.closest('.draggable-group');
-            
-            if (draggableGroup) {
-                // Initiate the drag operation for the .draggable-group
-                draggedItemGroup = draggableGroup;
+	// Event listener for .drag-handle elements within questions
+	document.addEventListener('mousedown', function (e) {
+		const dragHandle = e.target.closest('.drag-handle');
+		
+		if (dragHandle) {
+			// If the click is inside a drag handle, find the corresponding .question
+			const questionElement = dragHandle.closest('.question');
 
-                // Add a dragStart event listener to set data
-                draggedItemGroup.addEventListener('dragstart', function (e) {
-                    e.dataTransfer.setData('text/plain', draggedItemGroup.id);
-                    // console.log(draggedItemGroup.id);
-                   // Hide all elements with class "hideondrag"
-				   richTextElements = document.querySelectorAll('.hideondrag');
-                    richTextElements.forEach((element) => {
-                        element.style.display = 'none';
-                    });
-                });
-            }
-        }
-    });
+			if (questionElement) {
+				console.log("draggHandle:",dragHandle);
+				// Initiate the drag operation for the .question
+				draggedItemQuestion = questionElement;
 
-    // Event listener for .question elements
-    document.addEventListener('mousedown', function (e) {
-        const dragHandle = e.target.closest('.drag-handle');
-        
-        if (dragHandle) {
-            // If the click is inside a drag handle, find the corresponding .question
-            const questionElement = dragHandle.closest('.question');
-            
-            if (questionElement) {
-                // Initiate the drag operation for the .question
-                draggedItemQuestion = questionElement;
+				// Add a dragStart event listener to set data
+				draggedItemQuestion.addEventListener('dragstart', function (e) {
+					e.dataTransfer.setData('text/plain', draggedItemQuestion.id);
+					console.log(draggedItemQuestion.id);
+					
+					
+				});
+			}
+		}
+	});
 
-                // Add a dragStart event listener to set data
-                draggedItemQuestion.addEventListener('dragstart', function (e) {
-                    e.dataTransfer.setData('text/plain', draggedItemQuestion.id);
+	// document.addEventListener('mousedown', function (e) {
+	// 	const dragHandle = e.target.closest('.drag-handle');
+		
+	// 	if (dragHandle) {
+	// 		// If the click is inside a drag handle, find the corresponding .question
+	// 		const questionElement = dragHandle.closest('.groupsection');
 
-                    // Hide all elements with class "hideondrag"
-                    richTextElements = document.querySelectorAll('.hideondrag');
-                    richTextElements.forEach((element) => {
-                        element.style.display = 'none';
-                    });
-                });
-            }
-        }
-    });
+	// 		if (questionElement) {
+	// 			console.log("draggHandle:",dragHandle);
+	// 			// Initiate the drag operation for the .question
+	// 			draggedItemQuestion = questionElement;
+
+	// 			// Add a dragStart event listener to set data
+	// 			draggedItemQuestion.addEventListener('dragstart', function (e) {
+	// 				e.dataTransfer.setData('text/plain', draggedItemQuestion.id);
+	// 				console.log(draggedItemQuestion.id);
+					
+					
+	// 			});
+	// 		}
+	// 	}
+	// });
+
+	// document.addEventListener('mousedown', function (e) {
+	// 	const dragHandle = e.target.closest('.drag-handle');
+		
+	// 	if (dragHandle) {
+	// 		// If the click is inside a drag handle, find the corresponding .question
+	// 		const questionElement = dragHandle.closest('.groupsection>.question');
+
+	// 		if (questionElement) {
+	// 			console.log(questionElement);
+	// 			console.log("draggHandle:",dragHandle);
+	// 			// Initiate the drag operation for the .question
+	// 			draggedItemQuestion = questionElement;
+
+	// 			// Add a dragStart event listener to set data
+	// 			draggedItemQuestion.addEventListener('dragstart', function (e) {
+	// 				e.dataTransfer.setData('text/plain', draggedItemQuestion.id);
+	// 				console.log(draggedItemQuestion.id);
+					
+					
+	// 			});
+	// 		}
+	// 	}
+	// });
+
+
+	// // Event listener for .draggable-group elements
+	// document.addEventListener('mousedown', function (e) {
+	// 	const dragHandle = e.target.closest('.drag-handle');
+	// 	if(groupqnornot){
+	// 		if (dragHandle) {
+				
+	// 			// If the click is inside a drag handle, find the corresponding .draggable-group
+	// 			const draggableGroup = dragHandle.closest('.draggable-group');
+	// 			console.log("draggableGroup:",draggableGroup);
+	// 			if (draggableGroup) {
+	// 				console.log("draggHandle:",dragHandle);
+	// 				// Initiate the drag operation for the .draggable-group
+	// 				draggedItemGroup = draggableGroup;
+
+	// 				// Add a dragStart event listener to set data
+	// 				draggedItemGroup.addEventListener('dragstart', function (e) {
+	// 					e.dataTransfer.setData('text/plain', draggedItemGroup.id);
+	// 					console.log(draggedItemGroup.id);
+
+	// 					// // Hide all elements with class "hideondrag" in the group
+	// 					// const richTextElements = document.querySelectorAll('.hideondrag');
+	// 					// richTextElements.forEach((element) => {
+	// 					// 	element.style.display = 'none';
+	// 					// });
+	// 				});
+	// 			}
+	// 		}
+	// 	}
+	// 	});
+
+    
 
     document.addEventListener('dragover', function (e) {
+		// groupqnornot = true;
+        // Hide all elements with class "hideondrag" in the question
+        const richTextElements = document.querySelectorAll('.hideondrag');
+        richTextElements.forEach((element) => {
+            element.style.display = 'none';
+        });
         e.preventDefault();
 
         // Allow scrolling while dragging
@@ -2619,12 +2804,11 @@ function removeClonedQroupQuestion(index)
         if (dropTarget) {
             dropTarget.classList.remove('highlight');
         }
-		if (dropTarget.classList.contains('nodrop')) {
-        // Remove the highlight class when leaving the drop target
-        dropTarget.classList.remove('highlight');
-    }
+        if (dropTarget.classList.contains('nodrop')) {
+            // Remove the highlight class when leaving the drop target
+            dropTarget.classList.remove('highlight');
+        }
     });
-	
 
     document.addEventListener('dragend', function () {
         // Remove the highlight class from all .draggable-group and .question elements
@@ -2633,20 +2817,13 @@ function removeClonedQroupQuestion(index)
             element.classList.remove('highlight');
         });
 
-        // Show all elements with class "hideondrag" again for .draggable-group
-        if (richTextElements) {
-            richTextElements.forEach((element) => {
-                element.style.display = '';
-            });
-        }
-
         // Show all elements with class "hideondrag" again for .question
-        if (richTextElements) {
-            richTextElements.forEach((element) => {
-                element.style.display = '';
-            });
-        }
+        const richTextElements = document.querySelectorAll('.hideondrag');
+        richTextElements.forEach((element) => {
+            element.style.display = '';
+        });
 
+        // Reset variables
         dropTarget = null;
         draggedItemGroup = null;
         draggedItemQuestion = null;
@@ -2680,6 +2857,7 @@ function removeClonedQroupQuestion(index)
         } else {
             console.error('No dragged item or drop target found.');
         }
+        
     });
 </script>
 
@@ -2729,6 +2907,128 @@ function removeClonedQroupQuestion(index)
 	  }
 	}
   </script>
+
+<script>
+	
+	// Function to execute the script and display its output in the popup
+	function executeScriptAndDisplayOutput() {
+			// Display the popup with the output
+		const popup = document.getElementById('popup');
+		popup.style.display = 'block';
+		// alert('hi');
+		// Sample JSON data with section names and section IDs
+		const jsonData = JSON.parse(localStorage.getItem('JSON_FOR_NAV'));
+		const reorderpop = document.getElementById('output');
+		const addsection= document.querySelector('#addNewSection'); // Replace with your actual right list ID
+
+		console.log("addsection:",addsection);
+		// Function to add a section name to the left side
+		function addSectionName(section) {
+			
+			v=section.section_title;
+			// // Remove <p> and </p> tags from the HTML content
+			  v = v.replace(/<p>|<\/p>/g, '');
+
+			console.log("v",v);
+			if (v === '<br>') {
+			// If the innerHTML is empty, add sample text
+			v = 'untitled'
+			// console.log("v",v);
+			}
+			console.log("v",v);
+			const reorderpop_item = document.createElement('li');
+			// Set the inner HTML of the list item to the section title
+			reorderpop_item.innerHTML = v;
+
+		
+			
+			reorderpop_item.classList.add('reorder-item');
+			reorderpop_item.classList.add('popupbox');
+
+			// Set the "id" attribute with the updated value from JSON data
+			reorderpop_item.id = 'reorder_' + section.section_id;
+
+			const buttons = document.createElement('span');
+			buttons.innerHTML = `
+				<span class="fa fa-chevron-up up-icon" style="transition: box-shadow 0.3s ease; border-radius: 50%;" onmouseover="this.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';" onmouseout="this.style.boxShadow = 'none';"></span>
+				<span class="fa fa-chevron-down down-icon" style="transition: box-shadow 0.3s ease; border-radius: 50%;" onmouseover="this.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';" onmouseout="this.style.boxShadow = 'none';"></span>
+
+			`;
+
+			reorderpop_item.appendChild(buttons);
+
+			reorderpop.appendChild(reorderpop_item);
+		}
+		// Populate the left side with section names and IDs from JSON data
+		jsonData.sections.forEach(section => {
+			addSectionName(section);
+		});
+
+		// Add event listeners to handle reordering
+		reorderpop.addEventListener('click', (e) => {
+			if (e.target.classList.contains('up-icon')) {
+				console.log("up");
+				const reorderpop_item = e.target.parentElement.parentElement;
+				const prevItem = reorderpop_item.previousElementSibling;
+				console.log("reorderpop_item:",reorderpop_item);
+				console.log("prevItem:",prevItem);
+				if (prevItem) {
+					reorderpop.insertBefore(reorderpop_item, prevItem);
+
+					// Remove the "reorder_" prefix from the ID
+					const originalId = reorderpop_item.id;
+					console.log("originalId",originalId);
+					const idWithoutPrefix = originalId.replace("reorder_section_title_text_", "");
+					console.log("idWithoutPrefix",idWithoutPrefix);
+					// Get the corresponding element in the right list
+					const item_to_be_reorderd = document.getElementById('reorder_' +idWithoutPrefix);
+					console.log("item_to_be_reorderd",item_to_be_reorderd);
+					// Find the previous element in the right list to determine where to insert
+					const prevItemInRightSide = item_to_be_reorderd.previousElementSibling;
+					console.log("prevItemInRightSide",prevItemInRightSide);
+					// Move the element to the right list
+					addsection.insertBefore(item_to_be_reorderd, prevItemInRightSide);
+				}
+			} else if (e.target.classList.contains('down-icon')) {
+				console.log("down");
+				const reorderpop_item = e.target.parentElement.parentElement;
+				const nextItem = reorderpop_item.nextElementSibling;
+				console.log("reorderpop_item:",reorderpop_item);
+				console.log("nextItem:",nextItem);
+				if (nextItem) {
+					reorderpop.insertBefore(nextItem, reorderpop_item);
+					// Add code to update the corresponding element in the right list if needed
+					const originalId = reorderpop_item.id;
+					console.log("originalId",originalId);
+					const idWithoutPrefix = originalId.replace("reorder_section_title_text_", "");
+					console.log("idWithoutPrefix",idWithoutPrefix);
+					const item_to_be_reorderd = document.getElementById('reorder_' + idWithoutPrefix);
+					console.log("item_to_be_reorderd",item_to_be_reorderd);
+					const nextItemInRightSide = item_to_be_reorderd.nextElementSibling;
+					console.log("nextItemInRightSide",nextItemInRightSide);
+
+					addsection.insertBefore(nextItemInRightSide,item_to_be_reorderd);
+				}
+			}
+		});
+
+	
+	}
+
+	// document.getElementById('showPopupButton').addEventListener('click', executeScriptAndDisplayOutput);
+
+	
+	// document.getElementById('1').addEventListener('click', function() {
+	// 	const popup = document.getElementById('popup');
+	// 	popup.style.display = 'none';
+	// });
+
+	// function Sample()
+	// {
+	// 	alert('hi');
+	// }
+	
+</script>
  
 </body>
 </html>
diff --git a/savexml.js b/savexml.js
index 36b8934..8c006e7 100644
--- a/savexml.js
+++ b/savexml.js
@@ -8,7 +8,7 @@ require('dotenv').config();
 //Get the value from .env
 const isEncrypted = process.env.ENCRYPTED;
 
-function saveXmlToFile(xmlData, filePath) {
+function saveXmlToFile(xmlData, filePath,reorder=false) {
   console.log(filePath);
   // Check if the file path is provided
   if (!filePath) {
@@ -31,13 +31,16 @@ function saveXmlToFile(xmlData, filePath) {
     }
   });
   localStorage.clear();
-
-//  window.location.href = 'dashboard.html';
-
+if(reorder){
+  window.location.reload();
+}else{
+  window.location.href = 'dashboard.html';
+}
+ 
 }
 
 
-function savexml(UserFilename) {
+function savexml(UserFilename,reorder=false) {
     
        // Get the XML string from localStorage
    var xmlString = localStorage.getItem("xml");
@@ -67,8 +70,13 @@ function savexml(UserFilename) {
     const xmlfilePath = `${xmlPath}` + xmlfilename;
     // const jsonfilePath = process.cwd() + '/xml/' + jsonfilename;
   
-    // Call the function to save the XML file
-    saveXmlToFile(enc, xmlfilePath);
+    if(reorder){
+      saveXmlToFile(enc, xmlfilePath,reorder=true);
+    }else{
+      // Call the function to save the XML file
+      saveXmlToFile(enc, xmlfilePath);
+    }
+    
     
   }
 
