diff --git a/src/main/resources/static/dark-mode.css b/src/main/resources/static/dark-mode.css
index a2925f766..6c528702b 100644
--- a/src/main/resources/static/dark-mode.css
+++ b/src/main/resources/static/dark-mode.css
@@ -11,4 +11,13 @@ body {
 .jumbotron {
   background-color: #222; /* or any other dark color */
   color: #fff; /* or any other light color */
+}
+
+.list-group {
+  background-color: #222 !important;
+  color: fff !important;
+}
+.list-group-item {
+  background-color: #222 !important;
+  color: fff !important;
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/merge-pdfs.html b/src/main/resources/templates/merge-pdfs.html
index c2ee73a2b..67ed1276a 100644
--- a/src/main/resources/templates/merge-pdfs.html
+++ b/src/main/resources/templates/merge-pdfs.html
@@ -25,13 +25,75 @@
 								class="custom-file-label">Choose PDFs</label>
 						</div>
 					</div>
+					<div class="form-group">
+					    <ul id="selectedFiles" class="list-group"></ul>
+					  </div>
 					<div class="form-group text-center">
 						<button type="submit" class="btn btn-primary">Merge</button>
 					</div>
 				</form>
-				<th:block th:insert="~{common :: filelist}"></th:block>
+				
+				
 
+				
 
+<script>
+document.getElementById("fileInput").addEventListener("change", function() {
+    var files = this.files;
+    var list = document.getElementById("selectedFiles");
+    list.innerHTML = "";
+    for (var i = 0; i < files.length; i++) {
+      var item = document.createElement("li");
+      item.className = "list-group-item d-flex justify-content-between align-items-center";
+      item.textContent = files[i].name;
+      item.innerHTML += '<div><button class="btn btn-secondary move-up">Move Up</button> <button class="btn btn-secondary move-down">Move Down</button></div>';
+      list.appendChild(item);
+    }
+    var moveUpButtons = document.querySelectorAll(".move-up");
+    for (var i = 0; i < moveUpButtons.length; i++) {
+      moveUpButtons[i].addEventListener("click", function(event) {
+        event.preventDefault();
+        var parent = this.parentNode.parentNode;
+        var grandParent = parent.parentNode;
+        if (parent.previousElementSibling) {
+          grandParent.insertBefore(parent, parent.previousElementSibling);
+          updateFiles();
+        }
+      });
+    }
+    var moveDownButtons = document.querySelectorAll(".move-down");
+    for (var i = 0; i < moveDownButtons.length; i++) {
+      moveDownButtons[i].addEventListener("click", function(event) {
+        event.preventDefault();
+        var parent = this.parentNode.parentNode;
+        var grandParent = parent.parentNode;
+        if (parent.nextElementSibling) {
+          grandParent.insertBefore(parent.nextElementSibling, parent);
+          updateFiles();
+        } 
+      });
+    }
+
+    function updateFiles() {
+      var dataTransfer = new DataTransfer();
+      var liElements = document.querySelectorAll("#selectedFiles li");
+      
+      for (var i = 0; i < liElements.length; i++) {
+    	var fileNameFromList = liElements[i].innerText.replace("\nMove Up Move Down","");
+    	var fileFromFiles 
+    	for (var j = 0; j < files.length; j++) {
+        	var file = files[j];
+        	if(file.name === fileNameFromList){
+        		dataTransfer.items.add(file);
+        		break;
+        	}
+    	}
+      }
+      document.getElementById("fileInput").files = dataTransfer.files;
+    }
+  });
+  
+</script>