diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index b4cae58d..5d911403 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -10,12 +10,16 @@
         <div id="content-wrap">
             <div th:insert="~{fragments/navbar.html :: navbar}"></div>
             <br> <br>
-            <div class="container">
+            <div class="multi-tool-container">
                 <div class="row justify-content-center">
                     <h2 th:text="#{multiTool.header}"></h2>
                     <div class="col-md-12" id="pages-container-wrapper">
                         <div id="pages-container"></div>
                     </div>
+                </div>
+            </div>
+            <div class="container">
+                <div class="row justify-content-center">
                     <div class="col-md-6" style="text-align: center">
                         <div id="global-buttons-container">
                             
@@ -158,6 +162,7 @@
 
             const moveUpButtonCallback = e => {
                 var imgContainer = e.target;
+                const startingPosition = imgContainer.getBoundingClientRect();
                 while (!imgContainer.classList.contains("page-container")) {
                     imgContainer = imgContainer.parentNode;
                 }
@@ -165,9 +170,10 @@
                 if (sibling) {
                     pagesContainer.removeChild(imgContainer);
                     pagesContainer.insertBefore(imgContainer, sibling);
-                    imgContainer.scrollIntoView({
-                        behavior: "instant",
-                        block: "center",
+
+                    const { width } = imgContainer.getBoundingClientRect();
+                    pagesContainerWrapper.scroll({
+                        left: pagesContainerWrapper.scrollLeft - width,
                     })
                 }
             };
@@ -184,9 +190,9 @@
                     } else {
                         pagesContainer.appendChild(imgContainer)
                     }
-                    imgContainer.scrollIntoView({
-                        behavior: "instant",
-                        block: "center",
+                    const { width } = imgContainer.getBoundingClientRect();
+                    pagesContainerWrapper.scroll({
+                        left: pagesContainerWrapper.scrollLeft + width,
                     })
                 }
             };
@@ -434,6 +440,10 @@
     </script>
 
     <style>
+        .multi-tool-container {
+            max-width: 95vw;
+            margin: 0 auto;
+        }
         #global-buttons-container {
             display: flex;
             gap: 10px;
@@ -534,7 +544,14 @@
         .page-container .button-container {
             z-index: 2;
             display:flex;
+            opacity: 0;
+            transition: opacity 0.1s linear;
         }
+
+        .page-container:hover .button-container {
+            opacity: 1;
+        }
+
         .page-container .button-container > * {
             padding: 0.25rem 0.5rem;
             margin: 3px;