diff --git a/.gitignore b/.gitignore
index 88be02aa..3c11770c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -109,4 +109,6 @@ local.properties
 *.tar.gz
 *.rar
 
-/build
\ No newline at end of file
+/build
+
+/.vscode
\ No newline at end of file
diff --git a/src/main/resources/static/css/general.css b/src/main/resources/static/css/general.css
index 3190465e..124a35e4 100644
--- a/src/main/resources/static/css/general.css
+++ b/src/main/resources/static/css/general.css
@@ -42,3 +42,8 @@ html[lang-direction=rtl] * {
     position: absolute;
     bottom: 0;
 }
+
+.btn-group > label:first-of-type {
+    border-top-left-radius: 0.25rem !important;
+    border-bottom-left-radius: 0.25rem !important;
+}
diff --git a/src/main/resources/static/js/game.js b/src/main/resources/static/js/game.js
index 2d138f93..ffad304b 100644
--- a/src/main/resources/static/js/game.js
+++ b/src/main/resources/static/js/game.js
@@ -108,16 +108,17 @@ function initializeGame() {
     }
 
 
-function resetEnemies() {
-    pdfs.forEach((pdf) => gameContainer.removeChild(pdf));
-    pdfs.length = 0;
-}
+    function resetEnemies() {
+        pdfs.forEach((pdf) => gameContainer.removeChild(pdf));
+        pdfs.length = 0;
+    }
 
 
     function updateGame() {
         if (gameOver || paused) return;
 
-        pdfs.forEach((pdf, pdfIndex) => {
+        for (let pdfIndex = 0; pdfIndex < pdfs.length; pdfIndex++) {
+            const pdf = pdfs[pdfIndex];
             const pdfY = parseInt(pdf.style.top) + pdfSpeed;
             if (pdfY + 50 > gameContainer.clientHeight) {
                 gameContainer.removeChild(pdf);
@@ -149,11 +150,7 @@ function resetEnemies() {
                     }
                 }
             }
-        });
-
-       
-
-
+        };
 
         projectiles.forEach((projectile, projectileIndex) => {
             const projectileY = parseInt(projectile.style.top) - 10;
@@ -180,31 +177,32 @@ function resetEnemies() {
 
         setTimeout(updateGame, 1000 / 60);
     }
-function resetGame() {
-    playerX = gameContainer.clientWidth / 2;
-    playerY = 50;
-    updatePlayerPosition();
 
-    pdfs.forEach((pdf) => gameContainer.removeChild(pdf));
-    projectiles.forEach((projectile) => gameContainer.removeChild(projectile));
+    function resetGame() {
+        playerX = gameContainer.clientWidth / 2;
+        playerY = 50;
+        updatePlayerPosition();
 
-    pdfs.length = 0;
-    projectiles.length = 0;
+        pdfs.forEach((pdf) => gameContainer.removeChild(pdf));
+        projectiles.forEach((projectile) => gameContainer.removeChild(projectile));
 
-    score = 0;
-    level = 1;
-    lives = 3;
-    
-    gameOver = false;
+        pdfs.length = 0;
+        projectiles.length = 0;
 
-    updateScore();
-    updateLives();
-    levelElement.textContent = 'Level: ' + level;
-    pdfSpeed = 1;
-    clearTimeout(spawnPdfTimeout); // Clear the existing spawnPdfTimeout
-    setTimeout(updateGame, 1000 / 60);
-    spawnPdfInterval();
-}
+        score = 0;
+        level = 1;
+        lives = 3;
+        
+        gameOver = false;
+
+        updateScore();
+        updateLives();
+        levelElement.textContent = 'Level: ' + level;
+        pdfSpeed = 1;
+        clearTimeout(spawnPdfTimeout); // Clear the existing spawnPdfTimeout
+        setTimeout(updateGame, 1000 / 60);
+        spawnPdfInterval();
+    }
 
 
 
@@ -243,9 +241,7 @@ function resetGame() {
             updateHighScore();
         }
         alert('Game Over! Your final score is: ' + score);
-        setTimeout(() => { // Wrap the resetGame() call in a setTimeout
-            resetGame();
-        }, 0);
+        document.getElementById('game-container-wrapper').close();
     }
 
 
@@ -281,6 +277,7 @@ function resetGame() {
 
     });
 
+    window.resetGame = resetGame;
 }
 
 window.initializeGame = initializeGame;
diff --git a/src/main/resources/templates/convert/file-to-pdf.html b/src/main/resources/templates/convert/file-to-pdf.html
index 2aab4bf5..f90572f0 100644
--- a/src/main/resources/templates/convert/file-to-pdf.html
+++ b/src/main/resources/templates/convert/file-to-pdf.html
@@ -5,6 +5,7 @@
 
 
 <body>
+    <th:block th:insert="~{fragments/common :: game}"></th:block>
     <div id="page-container">
         <div id="content-wrap">
             <div th:insert="~{fragments/navbar.html :: navbar}"></div>
diff --git a/src/main/resources/templates/convert/img-to-pdf.html b/src/main/resources/templates/convert/img-to-pdf.html
index afd704dc..a3c2bcf8 100644
--- a/src/main/resources/templates/convert/img-to-pdf.html
+++ b/src/main/resources/templates/convert/img-to-pdf.html
@@ -5,6 +5,7 @@
 
 
 <body>
+    <th:block th:insert="~{fragments/common :: game}"></th:block>
     <div id="page-container">
         <div id="content-wrap">
             <div th:insert="~{fragments/navbar.html :: navbar}"></div>
@@ -40,7 +41,7 @@
                             
                             <br> <br>
                             <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{imageToPDF.submit}"></button>
-  <script>
+                            <script>
                                  $('#fileInput-input').on('change', function() {
                                     var files = document.getElementById("fileInput-input").files;
                                     var conversionType = document.getElementById("conversionType");
diff --git a/src/main/resources/templates/convert/pdf-to-html.html b/src/main/resources/templates/convert/pdf-to-html.html
index 1fe4bec9..a67329ac 100644
--- a/src/main/resources/templates/convert/pdf-to-html.html
+++ b/src/main/resources/templates/convert/pdf-to-html.html
@@ -3,6 +3,7 @@
 
 <th:block th:insert="~{fragments/common :: head(title=#{PDFToHTML.title})}"></th:block>
 <body>
+    <th:block th:insert="~{fragments/common :: game}"></th:block>
     <div id="page-container">
         <div id="content-wrap">
             <div th:insert="~{fragments/navbar.html :: navbar}"></div>
diff --git a/src/main/resources/templates/convert/pdf-to-img.html b/src/main/resources/templates/convert/pdf-to-img.html
index a82c91a2..7e39f154 100644
--- a/src/main/resources/templates/convert/pdf-to-img.html
+++ b/src/main/resources/templates/convert/pdf-to-img.html
@@ -5,6 +5,7 @@
 
 
 <body>
+    <th:block th:insert="~{fragments/common :: game}"></th:block>
     <div id="page-container">
         <div id="content-wrap">
             <div th:insert="~{fragments/navbar.html :: navbar}"></div>
diff --git a/src/main/resources/templates/convert/pdf-to-pdfa.html b/src/main/resources/templates/convert/pdf-to-pdfa.html
index 0ebebe63..6a5a17c6 100644
--- a/src/main/resources/templates/convert/pdf-to-pdfa.html
+++ b/src/main/resources/templates/convert/pdf-to-pdfa.html
@@ -5,6 +5,7 @@
 
 
 <body>
+    <th:block th:insert="~{fragments/common :: game}"></th:block>
     <div id="page-container">
         <div id="content-wrap">
             <div th:insert="~{fragments/navbar.html :: navbar}"></div>
diff --git a/src/main/resources/templates/convert/pdf-to-presentation.html b/src/main/resources/templates/convert/pdf-to-presentation.html
index ea99e2a0..f5f73397 100644
--- a/src/main/resources/templates/convert/pdf-to-presentation.html
+++ b/src/main/resources/templates/convert/pdf-to-presentation.html
@@ -3,6 +3,7 @@
 
 <th:block th:insert="~{fragments/common :: head(title=#{PDFToPresentation.title})}"></th:block>
 <body>
+    <th:block th:insert="~{fragments/common :: game}"></th:block>
     <div id="page-container">
         <div id="content-wrap">
             <div th:insert="~{fragments/navbar.html :: navbar}"></div>
diff --git a/src/main/resources/templates/convert/pdf-to-text.html b/src/main/resources/templates/convert/pdf-to-text.html
index 007ec547..5655c28f 100644
--- a/src/main/resources/templates/convert/pdf-to-text.html
+++ b/src/main/resources/templates/convert/pdf-to-text.html
@@ -3,6 +3,7 @@
 
 <th:block th:insert="~{fragments/common :: head(title=#{PDFToText.title})}"></th:block>
 <body>
+    <th:block th:insert="~{fragments/common :: game}"></th:block>
     <div id="page-container">
         <div id="content-wrap">
             <div th:insert="~{fragments/navbar.html :: navbar}"></div>
diff --git a/src/main/resources/templates/convert/pdf-to-word.html b/src/main/resources/templates/convert/pdf-to-word.html
index 50abafe4..c183d1bc 100644
--- a/src/main/resources/templates/convert/pdf-to-word.html
+++ b/src/main/resources/templates/convert/pdf-to-word.html
@@ -3,6 +3,7 @@
 
 <th:block th:insert="~{fragments/common :: head(title=#{PDFToWord.title})}"></th:block>
 <body>
+    <th:block th:insert="~{fragments/common :: game}"></th:block>
     <div id="page-container">
         <div id="content-wrap">
             <div th:insert="~{fragments/navbar.html :: navbar}"></div>
diff --git a/src/main/resources/templates/convert/pdf-to-xml.html b/src/main/resources/templates/convert/pdf-to-xml.html
index 5ec23f2d..4aecbc66 100644
--- a/src/main/resources/templates/convert/pdf-to-xml.html
+++ b/src/main/resources/templates/convert/pdf-to-xml.html
@@ -3,6 +3,7 @@
 
 <th:block th:insert="~{fragments/common :: head(title=#{PDFToXML.title})}"></th:block>
 <body>
+    <th:block th:insert="~{fragments/common :: game}"></th:block>
     <div id="page-container">
         <div id="content-wrap">
             <div th:insert="~{fragments/navbar.html :: navbar}"></div>
diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index 0e5118e5..1a858563 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -101,456 +101,439 @@ document.addEventListener("DOMContentLoaded", function () {
 </script>
 
 </head>
-<th:block th:fragment="fileSelector(name, multiple)"  th:with="accept=${accept} ?: '*/*', inputText=${inputText} ?: #{pdfPrompt}">
 
-
-<script>
-
-
-            
+<th:block th:fragment="game">
+    <dialog id="game-container-wrapper" class="game-container-wrapper" data-modal>
+        <script>
+            console.log("loaded game")
             $(document).ready(function() {
-            	
-            	function loadGameScript(callback) {
-            	    console.log('loadGameScript called');
-            	    const script = document.createElement('script');
-            	    script.src = 'js/game.js';
-            	    script.onload = callback;
-            	    document.body.appendChild(script);
-            	}
-            	let gameScriptLoaded = false;
-            	$('#show-game-btn').on('click', function() {
-            	    console.log('Show game button clicked');
-            	    if (!gameScriptLoaded) {
-            	        console.log('Show game button load');
-            	        loadGameScript(function() {
-            	            console.log('Game script loaded');
-            	            window.initializeGame();
-            	            gameScriptLoaded = true;
-            	        });
-            	    }
-            	    $('#game-container-wrapper').show();
-            	});
-
-
-                $('form').submit(function(event) {
-                    
-                    const boredWaiting = localStorage.getItem('boredWaiting');
-                    if (boredWaiting === 'enabled') {
-                          $('#show-game-btn').show();
-                    }
-                    var processing = "Processing..."
-                    var submitButtonText = $('#submitBtn').text()
-                        
-                    $('#submitBtn').text('Processing...');
-                    console.log("start download code")
-                    var files = $('#fileInput-input')[0].files;
-                    var url = this.action;
-                    console.log(url)
-                    event.preventDefault(); // Prevent the default form handling behavior
-                     /* Check if ${multiple} is false */
-                     var multiple = [[${multiple}]] || false;
-                     var override = $('#override').val() || '';
-                     console.log("override=" + override)
-                     if (override === 'multi' || (!multiple && files.length > 1) && override !== 'single' ) {
-                         console.log("multi parallel download")
-                         submitMultiPdfForm(event,url);
-                     } else {
-                         console.log("start single download")
-    
-                         // Get the selected download option from localStorage
-                         const downloadOption = localStorage.getItem('downloadOption');
-    
-                         var formData = new FormData($('form')[0]);
-                         
-                         // Send the request to the server using the fetch() API
-                         fetch(url, {
-                             method: 'POST',
-                             body: formData
-                         }).then(response => {
-                             if (!response) {
-                                 throw new Error('Received null response for file ' + i);
-                             }
-                             console.log("load single download")
-    
-                             
-                             // Extract the filename from the Content-Disposition header, if present
-                            let filename = null;
-                            const contentDispositionHeader = response.headers.get('Content-Disposition');
-                            console.log(contentDispositionHeader)
-                            if (contentDispositionHeader && contentDispositionHeader.indexOf('attachment') !== -1) {
-                                filename = decodeURIComponent(contentDispositionHeader.split('filename=')[1].replace(/"/g, ''));
-                            } else {
-                                // If the Content-Disposition header is not present or does not contain the filename, use a default filename
-                                filename = 'download';
-                            }
-                            console.log("filename=" + filename)
-    
-                        
-                            const contentType = response.headers.get('Content-Type');
-                            console.log("contentType=" + contentType)
-                             // Check if the response is a PDF or an image
-                             if (contentType.includes('pdf') || contentType.includes('image')) {
-                                 response.blob().then(blob => {
-                                     console.log("pdf/image")
-        
-                                     // Perform the appropriate action based on the download option
-                                     if (downloadOption === 'sameWindow') {
-                                         console.log("same window")
-        
-                                         // Open the file in the same window
-                                         window.location.href = URL.createObjectURL(blob);
-                                     } else if (downloadOption === 'newWindow') {
-                                         console.log("new window")
-        
-                                         // Open the file in a new window
-                                         window.open(URL.createObjectURL(blob), '_blank');
-                                     } else {
-                                         console.log("else save")
-        
-                                         // Download the file
-                                         const link = document.createElement('a');
-                                         link.href = URL.createObjectURL(blob);
-                                         link.download = filename;
-                                         link.click();
-                                     }
-                                 });
-                             } else if (contentType.includes('json')) {
-                                // Handle the JSON response
-                                    response.json().then(data => {
-                                      // Format the error message
-                                      const errorMessage = JSON.stringify(data, null, 2);
-                                      
-                                      // Display the error message in an alert
-                                      alert(`An error occurred: ${errorMessage}`);
-                                    });
-                                 
-                             } else {
-                                 response.blob().then(blob => {
-                                     console.log("else save 2 zip")
-        
-                                     // For ZIP files or other file types, just download the file
-                                     const link = document.createElement('a');
-                                     link.href = URL.createObjectURL(blob);
-                                     link.download = filename;
-                                     link.click();
-                                 });
-                             }
-                        })
-                         .catch(error => {
-                             console.log("error listener")
-    
-                             // Extract the error message and stack trace from the response
-                             const errorMessage = error.message;
-                             const stackTrace = error.stack;
-    
-                             // Create an error message to display to the user
-                             const message = `${errorMessage}\n\n${stackTrace}`;
-                            
-                             $('#submitBtn').text(submitButtonText);
-                             
-                             // Display the error message to the user
-                             alert(message);
-                             
-                         });
-                         
-                     }
-                     $('#submitBtn').text(submitButtonText);
-                 });
-            });
-            async function submitMultiPdfForm(event, url) {
-                // Get the selected PDF files
-                let files = $('#fileInput-input')[0].files;
-
-                // Get the existing form data
-                let formData = new FormData($('form')[0]);
-                formData.delete('fileInput');
-
-                // Show the progress bar
-                $('#progressBarContainer').show();
-
-                // Initialize the progress bar
-                let progressBar = $('#progressBar');
-                progressBar.css('width', '0%');
-                progressBar.attr('aria-valuenow', 0);
-                progressBar.attr('aria-valuemax', files.length);
-
-                // Check the flag in localStorage, default to 4
-                const zipThreshold = parseInt(localStorage.getItem('zipThreshold'), 10) || 4;
-                const zipFiles = files.length > zipThreshold;
-
-                // Initialize JSZip instance if needed
-                let jszip = null;
-                if (zipFiles) {
-                    jszip = new JSZip();
+                function loadGameScript(callback) {
+                    console.log('loadGameScript called');
+                    const script = document.createElement('script');
+                    script.src = 'js/game.js';
+                    script.onload = callback;
+                    document.body.appendChild(script);
                 }
+                let gameScriptLoaded = false;
+                $('#show-game-btn').on('click', function() {
+                    console.log('Show game button clicked');
+                    if (!gameScriptLoaded) {
+                        console.log('Show game button load');
+                        loadGameScript(function() {
+                            console.log('Game script loaded');
+                            window.initializeGame();
+                            gameScriptLoaded = true;
+                        });
+                    } else {
+                        window.resetGame();
+                    }
+                    document.getElementById('game-container-wrapper').showModal();
+                });
+            })
+        </script>
+        <div id="game-container">
+            <div id="lives">Lives: 3</div>
+            <div id="score">Score: 0</div>
+            <div id="high-score">High Score: 0</div>
+            <div id="level">Level: 1</div>
+            <img src="favicon.svg" class="player" id="player">
+        </div>
+        <style>
+            #game-container {
+                position: relative;
+                width: 100vh;
+                height: 0;
+                padding-bottom: 75%; /* 4:3 aspect ratio */
+                background-color: transparent;
+                margin: auto;
+                overflow: hidden;
+                border: 2px solid black; /* Add border */
+            }
 
-                // Submit each PDF file in parallel
-                let promises = [];
-                for (let i = 0; i < files.length; i++) {
-                    let promise = new Promise(async function(resolve, reject) {
-                        let fileFormData = new FormData();
-                        fileFormData.append('fileInput', files[i]);
-                        for (let pair of formData.entries()) {
-                            fileFormData.append(pair[0], pair[1]);
-                        }
-                        console.log(fileFormData);
+            .pdf, .player, .projectile {
+                position: absolute;
+            }
+            .pdf {
+                width: 50px;
+                height: 50px;
+            }
+            .player {
+                width: 50px;
+                height: 50px;
+            }
+            .projectile {
+                background-color: black  !important;
+                width: 5px;
+                height: 10px;
+            }
+            #score, #level, #lives, #high-score {
+                color: black;
+                font-family: sans-serif;
+                position: absolute;
+                font-size: calc(14px + 0.25vw); /* Reduced font size */
+            }
+            #score {
+                top: 10px;
+                left: 10px;
+            }
+            #lives {
+                top: 10px;
+                left: calc(7vw); /* Adjusted position */
+            }
+            #high-score {
+                top: 10px;
+                left: calc(14vw); /* Adjusted position */
+            }
+            #level {
+                top: 10px;
+                right: 10px;
+            }
 
-                        try {
-                            let response = await fetch(url, {
-                                method: 'POST',
-                                body: fileFormData
-                            });
+        </style>
+    </dialog>
+</th:block>
 
+<th:block th:fragment="fileSelector(name, multiple)"  th:with="accept=${accept} ?: '*/*', inputText=${inputText} ?: #{pdfPrompt}">
+    <script>
+        $(document).ready(function() {
+            $('form').submit(function(event) {
+                const boredWaiting = localStorage.getItem('boredWaiting');
+                if (boredWaiting === 'enabled') {
+                    $('#show-game-btn').show();
+                }
+                var processing = "Processing..."
+                var submitButtonText = $('#submitBtn').text()
+                    
+                $('#submitBtn').text('Processing...');
+                console.log("start download code")
+                var files = $('#fileInput-input')[0].files;
+                var url = this.action;
+                console.log(url)
+                event.preventDefault(); // Prevent the default form handling behavior
+                    /* Check if ${multiple} is false */
+                    var multiple = [[${multiple}]] || false;
+                    var override = $('#override').val() || '';
+                    console.log("override=" + override)
+                    if (override === 'multi' || (!multiple && files.length > 1) && override !== 'single' ) {
+                        console.log("multi parallel download")
+                        submitMultiPdfForm(event,url);
+                    } else {
+                        console.log("start single download")
+
+                        // Get the selected download option from localStorage
+                        const downloadOption = localStorage.getItem('downloadOption');
+
+                        var formData = new FormData($('form')[0]);
+                        
+                        // Send the request to the server using the fetch() API
+                        fetch(url, {
+                            method: 'POST',
+                            body: formData
+                        }).then(response => {
                             if (!response) {
                                 throw new Error('Received null response for file ' + i);
                             }
+                            console.log("load single download")
 
-                            if (!response.ok) {
-                                throw new Error(`Error submitting request for file ${i}: ${response.status} ${response.statusText}`);
-                            }
-
-                            let contentDisposition = response.headers.get('content-disposition');
-                            let fileName = "file.pdf"
-                            if (!contentDisposition) {
-                                //throw new Error('Content-Disposition header not found for file ' + i);
-                            } else {
-                                fileName = contentDisposition.split('filename=')[1].replace(/"/g, '');
-                            }
-                            console.log('Received response for file ' + i + ': ' + response);
-
-  
-
-                            let blob = await response.blob();
-                            if (zipFiles) {
-                                // Add the file to the ZIP archive
-                                jszip.file(fileName, blob);
-                                resolve();
-                            } else {
-                                // Download the file directly
-                                let url = window.URL.createObjectURL(blob);
-                                let a = document.createElement('a');
-                                a.href = url;
-                                a.download = fileName;
-                                document.body.appendChild(a);
-                                a.click();
-                                a.remove();
-                                resolve();
-                            }
-                        } catch (error) {
-                            console.error('Error submitting request for file ' + i + ': ' + error);
-
-                            // Set default values or fallbacks for error properties
-                            let status = error && error.status || 500;
-                            let statusText = error && error.statusText || 'Internal Server Error';
-                            let message = error && error.message || 'An error occurred while processing your request.';
-
-                            // Reject the Promise to signal that the request has failed
-                            reject();
-                            // Redirect to error page with Spring Boot error parameters
-                            let url = '/error?status=' + status + '&error=' + encodeURIComponent(statusText) + '&message=' + encodeURIComponent(message);
-                            window.location.href = url;
+                            
+                            // Extract the filename from the Content-Disposition header, if present
+                        let filename = null;
+                        const contentDispositionHeader = response.headers.get('Content-Disposition');
+                        console.log(contentDispositionHeader)
+                        if (contentDispositionHeader && contentDispositionHeader.indexOf('attachment') !== -1) {
+                            filename = decodeURIComponent(contentDispositionHeader.split('filename=')[1].replace(/"/g, ''));
+                        } else {
+                            // If the Content-Disposition header is not present or does not contain the filename, use a default filename
+                            filename = 'download';
                         }
-                    });
+                        console.log("filename=" + filename)
 
-                    // Update the progress bar as each request finishes
-                    promise.then(function() {
-                        updateProgressBar(progressBar, files);
-                    });
-
-                    promises.push(promise);
-                }
-
-                // Wait for all requests to finish
-                try {
-                    await Promise.all(promises);
-                } catch (error) {
-                    console.error('Error while uploading files: ' + error);
-                }
-
-                // Update the progress bar
-                progressBar.css('width', '100%');
-                progressBar.attr('aria-valuenow', files.length);
-
-                // After all requests are finished, download the ZIP file if needed
-                if (zipFiles) {
-                    try {
-                        let content = await jszip.generateAsync({ type: "blob" });
-                        let url = window.URL.createObjectURL(content);
-                        let a = document.createElement('a');
-                        a.href = url;
-                        a.download = "files.zip";
-                        document.body.appendChild(a);
-                        a.click();
-                        a.remove();
-                    } catch (error) {
-                        console.error('Error generating ZIP file: ' + error);
-                    }
-                }
-            }
-            function updateProgressBar(progressBar, files) {
-                let progress = ((progressBar.attr('aria-valuenow') / files.length) * 100) + (100 / files.length);
-                progressBar.css('width', progress + '%');
-                progressBar.attr('aria-valuenow', parseInt(progressBar.attr('aria-valuenow')) + 1);
-            }
-
-            
-            
-
-            </script>
-            
-            
-            
-            
-    <div class="custom-file-chooser">
-  <div class="custom-file">
-    <input type="file" class="custom-file-input" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" multiple>
-    <label class="custom-file-label" th:for="${name}+'-input'" th:text="${inputText}"></label>
-  </div>
-  <div class="selected-files"></div>
-</div>
-<br>
-    <div id="progressBarContainer" style="display: none; position: relative;">
-                <div class="progress" style="height: 1rem;">
-                    <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
-                        <span class="sr-only">Loading...</span>
-                    </div>
-                </div>
-            </div>
-<button type="button" class="btn btn-primary" id="show-game-btn" style="display:none;">Bored waiting?</button>
-
-<div id="game-container-wrapper" class="game-container-wrapper" style="display: none;">
-              <div id="game-container">
-                <div id="lives">Lives: 3</div>
-                <div id="score">Score: 0</div>
-                <div id="high-score">High Score: 0</div>
-                <div id="level">Level: 1</div>
-                <img src="favicon.svg" class="player" id="player">
-            </div>
-              <style>
-                #game-container {
-                    position: relative;
-                    width: 100%;
-                    height: 0;
-                    padding-bottom: 75%; /* 4:3 aspect ratio */
-                    background-color: transparent;
-                    margin: auto;
-                    overflow: hidden;
-                    border: 2px solid black; /* Add border */
-                }
-
-                .pdf, .player, .projectile {
-                    position: absolute;
-                }
-                .pdf {
-                    width: 50px;
-                    height: 50px;
-                }
-                .player {
-                    width: 50px;
-                    height: 50px;
-                }
-                .projectile {
-                    background-color: black  !important;
-                    width: 5px;
-                    height: 10px;
-                }
-              #score, #level, #lives, #high-score {
-    color: black;
-    font-family: sans-serif;
-    position: absolute;
-    font-size: calc(14px + 0.25vw); /* Reduced font size */
-}
-#score {
-    top: 10px;
-    left: 10px;
-}
-#lives {
-    top: 10px;
-    left: calc(7vw); /* Adjusted position */
-}
-#high-score {
-    top: 10px;
-    left: calc(14vw); /* Adjusted position */
-}
-#level {
-    top: 10px;
-    right: 10px;
-}
-
-              </style>
-            </div>
- 
-          
-          
-          
-            
-            
-    <script th:inline="javascript">
+                    
+                        const contentType = response.headers.get('Content-Type');
+                        console.log("contentType=" + contentType)
+                            // Check if the response is a PDF or an image
+                            if (contentType.includes('pdf') || contentType.includes('image')) {
+                                response.blob().then(blob => {
+                                    console.log("pdf/image")
     
-    document.addEventListener('DOMContentLoaded', function () {
-    	  const fileInput = document.getElementById('fileInput-input');
+                                    // Perform the appropriate action based on the download option
+                                    if (downloadOption === 'sameWindow') {
+                                        console.log("same window")
+    
+                                        // Open the file in the same window
+                                        window.location.href = URL.createObjectURL(blob);
+                                    } else if (downloadOption === 'newWindow') {
+                                        console.log("new window")
+    
+                                        // Open the file in a new window
+                                        window.open(URL.createObjectURL(blob), '_blank');
+                                    } else {
+                                        console.log("else save")
+    
+                                        // Download the file
+                                        const link = document.createElement('a');
+                                        link.href = URL.createObjectURL(blob);
+                                        link.download = filename;
+                                        link.click();
+                                    }
+                                });
+                            } else if (contentType.includes('json')) {
+                            // Handle the JSON response
+                                response.json().then(data => {
+                                    // Format the error message
+                                    const errorMessage = JSON.stringify(data, null, 2);
+                                    
+                                    // Display the error message in an alert
+                                    alert(`An error occurred: ${errorMessage}`);
+                                });
+                                
+                            } else {
+                                response.blob().then(blob => {
+                                    console.log("else save 2 zip")
+    
+                                    // For ZIP files or other file types, just download the file
+                                    const link = document.createElement('a');
+                                    link.href = URL.createObjectURL(blob);
+                                    link.download = filename;
+                                    link.click();
+                                });
+                            }
+                    })
+                        .catch(error => {
+                            console.log("error listener")
 
-    	  // Prevent default behavior for drag events
-    	  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-    	    fileInput.addEventListener(eventName, preventDefaults, false);
-    	  });
+                            // Extract the error message and stack trace from the response
+                            const errorMessage = error.message;
+                            const stackTrace = error.stack;
 
-    	  function preventDefaults(e) {
-    	    e.preventDefault();
-    	    e.stopPropagation();
-    	  }
+                            // Create an error message to display to the user
+                            const message = `${errorMessage}\n\n${stackTrace}`;
+                        
+                            $('#submitBtn').text(submitButtonText);
+                            
+                            // Display the error message to the user
+                            alert(message);
+                            
+                        });
+                        
+                    }
+                    $('#submitBtn').text(submitButtonText);
+                });
+        });
+        async function submitMultiPdfForm(event, url) {
+            // Get the selected PDF files
+            let files = $('#fileInput-input')[0].files;
 
-    	  // Add drop event listener
-    	  fileInput.addEventListener('drop', handleDrop, false);
+            // Get the existing form data
+            let formData = new FormData($('form')[0]);
+            formData.delete('fileInput');
 
-    	  function handleDrop(e) {
-    	    const dt = e.dataTransfer;
-    	    const files = dt.files;
-    	    fileInput.files = files;
-    	    handleFileInputChange(fileInput)
-    	  }
+            // Show the progress bar
+            $('#progressBarContainer').show();
 
+            // Initialize the progress bar
+            let progressBar = $('#progressBar');
+            progressBar.css('width', '0%');
+            progressBar.attr('aria-valuenow', 0);
+            progressBar.attr('aria-valuemax', files.length);
+
+            // Check the flag in localStorage, default to 4
+            const zipThreshold = parseInt(localStorage.getItem('zipThreshold'), 10) || 4;
+            const zipFiles = files.length > zipThreshold;
+
+            // Initialize JSZip instance if needed
+            let jszip = null;
+            if (zipFiles) {
+                jszip = new JSZip();
+            }
+
+            // Submit each PDF file in parallel
+            let promises = [];
+            for (let i = 0; i < files.length; i++) {
+                let promise = new Promise(async function(resolve, reject) {
+                    let fileFormData = new FormData();
+                    fileFormData.append('fileInput', files[i]);
+                    for (let pair of formData.entries()) {
+                        fileFormData.append(pair[0], pair[1]);
+                    }
+                    console.log(fileFormData);
+
+                    try {
+                        let response = await fetch(url, {
+                            method: 'POST',
+                            body: fileFormData
+                        });
+
+                        if (!response) {
+                            throw new Error('Received null response for file ' + i);
+                        }
+
+                        if (!response.ok) {
+                            throw new Error(`Error submitting request for file ${i}: ${response.status} ${response.statusText}`);
+                        }
+
+                        let contentDisposition = response.headers.get('content-disposition');
+                        let fileName = "file.pdf"
+                        if (!contentDisposition) {
+                            //throw new Error('Content-Disposition header not found for file ' + i);
+                        } else {
+                            fileName = contentDisposition.split('filename=')[1].replace(/"/g, '');
+                        }
+                        console.log('Received response for file ' + i + ': ' + response);
+
+
+
+                        let blob = await response.blob();
+                        if (zipFiles) {
+                            // Add the file to the ZIP archive
+                            jszip.file(fileName, blob);
+                            resolve();
+                        } else {
+                            // Download the file directly
+                            let url = window.URL.createObjectURL(blob);
+                            let a = document.createElement('a');
+                            a.href = url;
+                            a.download = fileName;
+                            document.body.appendChild(a);
+                            a.click();
+                            a.remove();
+                            resolve();
+                        }
+                    } catch (error) {
+                        console.error('Error submitting request for file ' + i + ': ' + error);
+
+                        // Set default values or fallbacks for error properties
+                        let status = error && error.status || 500;
+                        let statusText = error && error.statusText || 'Internal Server Error';
+                        let message = error && error.message || 'An error occurred while processing your request.';
+
+                        // Reject the Promise to signal that the request has failed
+                        reject();
+                        // Redirect to error page with Spring Boot error parameters
+                        let url = '/error?status=' + status + '&error=' + encodeURIComponent(statusText) + '&message=' + encodeURIComponent(message);
+                        window.location.href = url;
+                    }
+                });
+
+                // Update the progress bar as each request finishes
+                promise.then(function() {
+                    updateProgressBar(progressBar, files);
+                });
+
+                promises.push(promise);
+            }
+
+            // Wait for all requests to finish
+            try {
+                await Promise.all(promises);
+            } catch (error) {
+                console.error('Error while uploading files: ' + error);
+            }
+
+            // Update the progress bar
+            progressBar.css('width', '100%');
+            progressBar.attr('aria-valuenow', files.length);
+
+            // After all requests are finished, download the ZIP file if needed
+            if (zipFiles) {
+                try {
+                    let content = await jszip.generateAsync({ type: "blob" });
+                    let url = window.URL.createObjectURL(content);
+                    let a = document.createElement('a');
+                    a.href = url;
+                    a.download = "files.zip";
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                } catch (error) {
+                    console.error('Error generating ZIP file: ' + error);
+                }
+            }
+        }
+        function updateProgressBar(progressBar, files) {
+            let progress = ((progressBar.attr('aria-valuenow') / files.length) * 100) + (100 / files.length);
+            progressBar.css('width', progress + '%');
+            progressBar.attr('aria-valuenow', parseInt(progressBar.attr('aria-valuenow')) + 1);
+        }
+    </script>
+
+    <div class="custom-file-chooser">
+        <div class="custom-file">
+            <input type="file" class="custom-file-input" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" multiple>
+            <label class="custom-file-label" th:for="${name}+'-input'" th:text="${inputText}"></label>
+        </div>
+        <div class="selected-files"></div>
+    </div>
+    <br>
+    <div id="progressBarContainer" style="display: none; position: relative;">
+        <div class="progress" style="height: 1rem;">
+            <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
+                <span class="sr-only">Loading...</span>
+            </div>
+        </div>
+    </div>
+    <button type="button" class="btn btn-primary" id="show-game-btn" style="display:none;">Bored waiting?</button>
+
+    
+
+    <script th:inline="javascript">
+        document.addEventListener('DOMContentLoaded', function () {
+            const fileInput = document.getElementById([[${name+"-input"}]]);
+
+            // Prevent default behavior for drag events
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                fileInput.addEventListener(eventName, preventDefaults, false);
+            });
+
+            function preventDefaults(e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+
+            // Add drop event listener
+            fileInput.addEventListener('drop', handleDrop, false);
+
+            function handleDrop(e) {
+                const dt = e.dataTransfer;
+                const files = dt.files;
+                fileInput.files = files;
+                handleFileInputChange(fileInput)
+            }
     	});
     
-    
-    $([[${"#"+name+"-input"}]]).on("change", function() {
+        $([[${"#"+name+"-input"}]]).on("change", function() {
     		handleFileInputChange(this);
     	});
     
-    function handleFileInputChange(inputElement) {
-      const files = $(inputElement).get(0).files;
-  	  const fileNames = Array.from(files).map(f => f.name);
-  	  const selectedFilesContainer = $(inputElement).siblings(".selected-files");
-  	  selectedFilesContainer.empty();
-  	  fileNames.forEach(fileName => {
-  	    selectedFilesContainer.append("<div>" + fileName + "</div>");
-  	  });
-  	  console.log("fileNames.length=" + fileNames.length)
-  	  if (fileNames.length === 1) {
-  		$(inputElement).siblings(".custom-file-label").addClass("selected").html(fileNames[0]);
-		  } else if (fileNames.length > 1) {
-			  $(inputElement).siblings(".custom-file-label").addClass("selected").html(fileNames.length + " files selected");
-		  } else {
-			  $(inputElement).siblings(".custom-file-label").addClass("selected").html([[#{pdfPrompt}]]);
-		  }
-    
-    }
-
+        function handleFileInputChange(inputElement) {
+            const files = $(inputElement).get(0).files;
+            const fileNames = Array.from(files).map(f => f.name);
+            const selectedFilesContainer = $(inputElement).siblings(".selected-files");
+            selectedFilesContainer.empty();
+            fileNames.forEach(fileName => {
+                selectedFilesContainer.append("<div>" + fileName + "</div>");
+            });
+            console.log("fileNames.length=" + fileNames.length)
+            if (fileNames.length === 1) {
+                $(inputElement).siblings(".custom-file-label").addClass("selected").html(fileNames[0]);
+            } else if (fileNames.length > 1) {
+                $(inputElement).siblings(".custom-file-label").addClass("selected").html(fileNames.length + " files selected");
+            } else {
+                $(inputElement).siblings(".custom-file-label").addClass("selected").html([[#{pdfPrompt}]]);
+            }
+        }
 	</script>
 
     <style>
-    .custom-file-label {
-  padding-right: 90px;
-}
-
-.selected-files {
-  margin-top: 10px;
-  max-height: 150px;
-  overflow-y: auto;
-  white-space: pre-wrap;
-}
-
+        .custom-file-label {
+            padding-right: 90px;
+        }
+        .selected-files {
+            margin-top: 10px;
+            max-height: 150px;
+            overflow-y: auto;
+            white-space: pre-wrap;
+        }
     </style>
     
-    
 </th:block>
\ No newline at end of file
diff --git a/src/main/resources/templates/other/compress-pdf.html b/src/main/resources/templates/other/compress-pdf.html
index 189dd993..f173dba4 100644
--- a/src/main/resources/templates/other/compress-pdf.html
+++ b/src/main/resources/templates/other/compress-pdf.html
@@ -6,6 +6,7 @@
 
 
 <body>
+    <th:block th:insert="~{fragments/common :: game}"></th:block>
     <div id="page-container">
         <div id="content-wrap">
             <div th:insert="~{fragments/navbar.html :: navbar}"></div>
diff --git a/src/main/resources/templates/other/ocr-pdf.html b/src/main/resources/templates/other/ocr-pdf.html
index 3e36b5eb..d9c400bb 100644
--- a/src/main/resources/templates/other/ocr-pdf.html
+++ b/src/main/resources/templates/other/ocr-pdf.html
@@ -6,6 +6,7 @@
 
 
 <body>
+    <th:block th:insert="~{fragments/common :: game}"></th:block>
     <div id="page-container">
         <div id="content-wrap">
             <div th:insert="~{fragments/navbar.html :: navbar}"></div>
diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html
index 8613ec07..cc9d2dfc 100644
--- a/src/main/resources/templates/sign.html
+++ b/src/main/resources/templates/sign.html
@@ -12,32 +12,41 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.10.11/interact.min.js"></script>
     <style>
        #pdf-container {
-    position: relative;
-}
+            position: relative;
+        }
 
-#pdf-canvas {
-    border: 1px solid black;
-    margin-top: 10px;
-}
+        #pdf-canvas {
+            border: 1px solid black;
+            margin-top: 10px;
+        }
 
-#signature-canvas {
-    border: 1px solid red;
-    position: absolute;
-    touch-action: none;
-    top: 10px; /* Make sure this value matches the margin-top of #pdf-canvas */
-    left: 0;
-}
+        #signature-canvas {
+            border: 1px solid red;
+            position: absolute;
+            touch-action: none;
+            top: 10px; /* Make sure this value matches the margin-top of #pdf-canvas */
+            left: 0;
+        }
 
-.signature-pad-container {
-    border: 1px solid black;
-    display: none;
-    margin-top: 10px;
-}
+        #signature-pad-container {
+            border: 1px solid black;
+            display: block;
+            text-align: center;
+            padding: 15px;
+        }
 
+        #signature-pad-canvas {
+            background: rgba(125,125,125,0.2);
+        }
+
+        #pdf-canvas {
+            width: 100%;
+        }
     </style>
 </head>
 
 <body>
+    <th:block th:insert="~{fragments/common.html :: game}"></th:block>
     <div id="page-container">
         <div id="content-wrap">
             <div th:insert="~{fragments/navbar.html :: navbar}"></div>
@@ -46,20 +55,30 @@
                 <div class="row justify-content-center">
                     <div class="col-md-6">
                         <h2 th:text="#{extractImages.header}"></h2>
-                        <input type="file" id="pdf-upload" accept=".pdf" class="btn btn-outline-primary mb-2" />
-                        <input type="file" id="signature-upload" accept="image/*" class="btn btn-outline-primary mb-2" />
-                        <button id="toggle-draw-signature" class="btn btn-outline-primary mb-2">Draw signature</button>
-                        <button id="download-pdf" class="btn btn-outline-primary mb-2">Download PDF</button>
+                        <div th:replace="~{fragments/common :: fileSelector(name='pdf-upload', multiple=false, accept='application/pdf')}"></div>
+
+                        <div class = "btn-group">
+                            <input type="radio" class="btn-check" name="signature-type" id="draw-signature" autocomplete="off" checked>
+                            <label class="btn btn-outline-secondary" for="draw-signature">Draw signature</label>
+                            <input type="radio" class="btn-check" name="signature-type" id="import-image" autocomplete="off">
+                            <label class="btn btn-outline-secondary" for="import-image">Import image</label>
+                        </div>
+                        
+                        <div th:replace="~{fragments/common :: fileSelector(name='signature-upload', multiple=false, accept='image/*', inputText=#{imgPrompt})}"></div>
+                        <!-- Signature Pad -->
+                        <div id="signature-pad-container">
+                            <canvas id="signature-pad-canvas"></canvas>
+                            <br>
+                            <button id="clear-signature" class="btn btn-outline-danger mt-2">Clear</button>
+                            <button id="save-signature" class="btn btn-outline-success mt-2">Save</button>
+                        </div>
+
                         <div id="pdf-container">
                             <canvas id="pdf-canvas"></canvas>
                             <canvas id="signature-canvas" hidden style="position: absolute;" data-scale="1"></canvas>
                         </div>
-                        <!-- Signature Pad -->
-                        <div class="signature-pad-container">
-                            <canvas id="signature-pad-canvas"></canvas>
-                            <button id="clear-signature" class="btn btn-outline-danger mt-2">Clear</button>
-                            <button id="save-signature" class="btn btn-outline-success mt-2">Save</button>
-                        </div>
+
+                        <button id="download-pdf" class="btn btn-primary mb-2">Download PDF</button>
                     </div>
                 </div>
             </div>
@@ -67,93 +86,58 @@
         <div th:insert="~{fragments/footer.html :: footer}"></div>
     </div>
     <script>
-    document.addEventListener('DOMContentLoaded', () => {
-        const pdfUpload = document.getElementById('pdf-upload');
-        const signatureUpload = document.getElementById('signature-upload');
-        const pdfCanvas = document.getElementById('pdf-canvas');
-        const signatureCanvas = document.getElementById('signature-canvas');
-        const downloadPdfBtn = document.getElementById('download-pdf');
-        const toggleDrawSignatureBtn = document.getElementById('toggle-draw-signature');
-        const signaturePadCanvas = document.getElementById('signature-pad-canvas');
-        const clearSignatureBtn = document.getElementById('clear-signature');
-        const saveSignatureBtn = document.getElementById('save-signature');
-        
-        const signaturePad = new SignaturePad(signaturePadCanvas, {
-            minWidth: 1,
-            maxWidth: 2,
-            penColor: 'black',
-        });
+        document.addEventListener('DOMContentLoaded', () => {
+            const pdfUpload = document.querySelector('input[name=pdf-upload]');
+            const signatureUpload = document.querySelector('input[name=signature-upload]');
+            const pdfCanvas = document.getElementById('pdf-canvas');
+            const signatureCanvas = document.getElementById('signature-canvas');
+            const downloadPdfBtn = document.getElementById('download-pdf');
+            const signaturePadContainer = document.getElementById('signature-pad-container')
+            const signaturePadCanvas = document.getElementById('signature-pad-canvas');
+            const clearSignatureBtn = document.getElementById('clear-signature');
+            const saveSignatureBtn = document.getElementById('save-signature');
 
-        
-        const pdfCtx = pdfCanvas.getContext('2d');
-        let pdfDoc = null;
+            document.querySelector('input[name=signature-upload]').closest(".custom-file-chooser").style.display = "none"
 
-        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.worker.min.js';
+            const signaturePad = new SignaturePad(signaturePadCanvas, {
+                minWidth: 1,
+                maxWidth: 2,
+                penColor: 'black',
+            });
 
-        async function loadPdf(pdfData) {
-            pdfDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
-            renderPage(1);
-        }
+            
+            const pdfCtx = pdfCanvas.getContext('2d');
+            let pdfDoc = null;
 
-        pdfUpload.addEventListener('change', async (event) => {
-            const file = event.target.files[0];
-            if (file) {
-                const pdfData = await file.arrayBuffer();
-                loadPdf(pdfData);
-            }
-        });
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.worker.min.js';
 
-        signatureUpload.addEventListener('change', async (event) => {
-            const file = event.target.files[0];
-            if (file) {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    const img = new Image();
-                    img.src = e.target.result;
-                    img.onload = () => {
-                        const ctx = signatureCanvas.getContext('2d');
-                        ctx.drawImage(img, 0, 0, img.width, img.height);
-                        signatureCanvas.width = img.width;
-                        signatureCanvas.height = img.height;
-                        signatureCanvas.hidden = false;
-                        setTimeout(() => {
-                            const x = 0;
-                            const y = 0;
-                            signatureCanvas.style.transform = `translate(${x}px, ${y}px)`;
-                            signatureCanvas.setAttribute('data-x', x);
-                            signatureCanvas.setAttribute('data-y', y);
-                        }, 0);
-                    };
-                };
-                reader.readAsDataURL(file);
-            }
-        });
+            pdfUpload.addEventListener('change', async (event) => {
+                const file = event.target.files[0];
+                if (file) {
+                    const pdfData = await file.arrayBuffer();
+                    pdfDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
+                    renderPage(1);
+                }
+            });
 
+            clearSignatureBtn.addEventListener('click', () => {
+                signaturePad.clear();
+            });
 
-        let usingSignaturePad = false;
+            $("input[name=signature-type]").change(function() {
+                const drawSignatureInput = document.getElementById('draw-signature');
+                signaturePadContainer.style.display = drawSignatureInput.checked ? 'block' : 'none';
+                document.querySelector('input[name=signature-upload]').closest(".custom-file-chooser").style.display = drawSignatureInput.checked ? 'none' : 'block';
 
-        toggleDrawSignatureBtn.addEventListener('click', () => {
-            usingSignaturePad = !usingSignaturePad;
-            if (usingSignaturePad) {
-                signatureCanvas.width = 0;
-                signatureCanvas.height = 0;
-            }
-            document.querySelector('.signature-pad-container').style.display = usingSignaturePad ? 'block' : 'none';
-            toggleDrawSignatureBtn.textContent = usingSignaturePad
-                ? 'Import signature image'
-                : 'Draw signature';
-        });
-
-
-        clearSignatureBtn.addEventListener('click', () => {
-            signaturePad.clear();
-        });
-
-        saveSignatureBtn.addEventListener('click', async () => {
-            if (!signaturePad.isEmpty()) {
-                const dataURL = signaturePad.toDataURL();
+                if (drawSignatureInput.checked) {
+                    populateSignatureFromPad();
+                } else {
+                    populateSignatureFromFileUpload();
+                }
+            });
+            
+            function populateSignature(imgUrl) {
                 const img = new Image();
-                img.src = dataURL;
                 img.onload = () => {
                     const ctx = signatureCanvas.getContext('2d');
                     ctx.clearRect(0, 0, signatureCanvas.width, signatureCanvas.height);
@@ -161,122 +145,151 @@
                     signatureCanvas.height = img.height;
                     ctx.drawImage(img, 0, 0, img.width, img.height);
                     signatureCanvas.hidden = false;
-                    setTimeout(() => {
-                        const x = 0;
-                        const y = 0;
-                        signatureCanvas.style.transform = `translate(${x}px, ${y}px)`;
-                        signatureCanvas.setAttribute('data-x', x);
-                        signatureCanvas.setAttribute('data-y', y);
-                    }, 0);
+
+                    const x = 0;
+                    const y = 0;
+                    signatureCanvas.style.transform = `translate(${x}px, ${y}px)`;
+                    signatureCanvas.setAttribute('data-x', x);
+                    signatureCanvas.setAttribute('data-y', y);
+                    
+                    // calcualte the max size
+                    const containerWidth = parseInt(getComputedStyle(pdfCanvas).width.replace('px',''));
+                    const containerHeight = parseInt(getComputedStyle(pdfCanvas).height.replace('px',''));
+                    const containerAspectRatio = containerWidth / containerHeight;
+                    const imgAspectRatio = img.width / img.height;
+                    if (imgAspectRatio > containerAspectRatio) {
+                        const width = Math.min(img.width, containerWidth);
+                        signatureCanvas.style.width = width+'px';
+                        signatureCanvas.style.height = (width/imgAspectRatio)+'px';
+                    } else {
+                        const height = Math.min(img.height, containerHeight);
+                        signatureCanvas.style.width = (height*imgAspectRatio)+'px';
+                        signatureCanvas.style.height = height+'px';
+                    }
                 };
+                img.src = imgUrl;
             }
-        });
+            function populateSignatureFromFileUpload() {
+                const file = signatureUpload.files[0];
+                if (!file) return;
+
+                const reader = new FileReader();
+                reader.onload = (e) => populateSignature(e.target.result);
+                reader.readAsDataURL(file);
+            }
+            function populateSignatureFromPad() {
+                if (signaturePad.isEmpty()) return;
+
+                const dataURL = signaturePad.toDataURL();
+                populateSignature(dataURL);
+            }
+            signatureUpload.addEventListener('change', populateSignatureFromFileUpload);
+            saveSignatureBtn.addEventListener('click', populateSignatureFromPad);
 
 
-        function renderPage(pageNum) {
-            pdfDoc.getPage(pageNum).then((page) => {
-                const viewport = page.getViewport({ scale: 1 });
-                pdfCanvas.width = viewport.width;
-                pdfCanvas.height = viewport.height;
+            function renderPage(pageNum) {
+                pdfDoc.getPage(pageNum).then((page) => {
+                    const viewport = page.getViewport({ scale: 1 });
+                    pdfCanvas.width = viewport.width;
+                    pdfCanvas.height = viewport.height;
 
-                const renderCtx = {
-                    canvasContext: pdfCtx,
-                    viewport: viewport,
-                };
+                    const renderCtx = {
+                        canvasContext: pdfCtx,
+                        viewport: viewport,
+                    };
 
-                page.render(renderCtx);
+                    page.render(renderCtx);
+                });
+            }
+
+            interact('#signature-canvas')
+            .draggable({
+                listeners: {
+                    move: (event) => {
+                        const target = event.target;
+                        const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
+                        const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
+
+                        target.style.transform = `translate(${x}px, ${y}px)`;
+                        target.setAttribute('data-x', x);
+                        target.setAttribute('data-y', y);
+                    },
+                },
+            })
+            .resizable({
+                edges: { left: true, right: true, bottom: true, top: true },
+                listeners: {
+                    move: (event) => {
+                        const target = event.target;
+                        const x = (parseFloat(target.getAttribute('data-x')) || 0);
+                        const y = (parseFloat(target.getAttribute('data-y')) || 0);
+
+                        const newWidth = event.rect.width;
+                        const newHeight = event.rect.height;
+                        const scale = newWidth / target.width;
+
+                        target.style.width = newWidth + 'px';
+                        target.style.height = newHeight + 'px';
+                        target.setAttribute('data-scale', scale);
+
+                        target.style.transform = `translate(${x}px, ${y}px)`;
+                    },
+                },
+                modifiers: [
+                    interact.modifiers.restrictSize({
+                        min: { width: 50, height: 50 },
+                    }),
+                ],
+                inertia: true,
             });
-        }
-
-        interact('#signature-canvas')
-        .draggable({
-            listeners: {
-                move: (event) => {
-                    const target = event.target;
-                    const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
-                    const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
-
-                    target.style.transform = `translate(${x}px, ${y}px)`;
-                    target.setAttribute('data-x', x);
-                    target.setAttribute('data-y', y);
-                },
-            },
-        })
-        .resizable({
-            edges: { left: true, right: true, bottom: true, top: true },
-            listeners: {
-                move: (event) => {
-                    const target = event.target;
-                    const x = (parseFloat(target.getAttribute('data-x')) || 0);
-                    const y = (parseFloat(target.getAttribute('data-y')) || 0);
-
-                    const newWidth = event.rect.width;
-                    const newHeight = event.rect.height;
-                    const scale = newWidth / target.width;
-
-                    target.style.width = newWidth + 'px';
-                    target.style.height = newHeight + 'px';
-                    target.setAttribute('data-scale', scale);
-
-                    target.style.transform = `translate(${x}px, ${y}px)`;
-                },
-            },
-            modifiers: [
-                interact.modifiers.restrictSize({
-                    min: { width: 50, height: 50 },
-                }),
-            ],
-            inertia: true,
-        });
 
 
-        async function getSignatureImage() {
-            const dataURL = signatureCanvas.toDataURL();
-            return dataURLToArrayBuffer(dataURL);
-        }
-
-        downloadPdfBtn.addEventListener('click', async () => {
-            if (pdfDoc) {
-                const pdfBytes = await pdfDoc.getData();
-                const pdfDocModified = await PDFLib.PDFDocument.load(pdfBytes);
-
-                if (signatureCanvas) {
-                    const signatureBytes = await getSignatureImage();
-                    const signatureImageObject = await pdfDocModified.embedPng(signatureBytes);
-
-                    const pageIndex = 0; // Choose the page index where the signature should be added (0 is the first page)
-                    const page = pdfDocModified.getPages()[pageIndex];
-
-                    const targetElement = signatureCanvas;
-                    const x = parseFloat(targetElement.getAttribute('data-x')) || 0;
-                    const y = parseFloat(targetElement.getAttribute('data-y')) || 0;
-                    const scale = parseFloat(targetElement.getAttribute('data-scale')) || 1;
-
-                    page.drawImage(signatureImageObject, {
-                        x: x,
-                        y: page.getHeight() - y - (targetElement.height * scale),
-                        width: targetElement.width * scale,
-                        height: targetElement.height * scale,
-                    });
-
-                }
-
-                const modifiedPdfBytes = await pdfDocModified.save();
-                const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
-                const link = document.createElement('a');
-                link.href = URL.createObjectURL(blob);
-                link.download = 'signed-document.pdf';
-                link.click();
+            async function getSignatureImage() {
+                const dataURL = signatureCanvas.toDataURL();
+                return dataURLToArrayBuffer(dataURL);
             }
+
+            downloadPdfBtn.addEventListener('click', async () => {
+                if (pdfDoc) {
+                    const pdfBytes = await pdfDoc.getData();
+                    const pdfDocModified = await PDFLib.PDFDocument.load(pdfBytes);
+
+                    if (signatureCanvas) {
+                        const signatureBytes = await getSignatureImage();
+                        const signatureImageObject = await pdfDocModified.embedPng(signatureBytes);
+
+                        const pageIndex = 0; // Choose the page index where the signature should be added (0 is the first page)
+                        const page = pdfDocModified.getPages()[pageIndex];
+
+                        const targetElement = signatureCanvas;
+                        const x = parseFloat(targetElement.getAttribute('data-x')) || 0;
+                        const y = parseFloat(targetElement.getAttribute('data-y')) || 0;
+                        const scale = parseFloat(targetElement.getAttribute('data-scale')) || 1;
+
+                        page.drawImage(signatureImageObject, {
+                            x: x,
+                            y: page.getHeight() - y - (targetElement.height * scale),
+                            width: targetElement.width * scale,
+                            height: targetElement.height * scale,
+                        });
+
+                    }
+
+                    const modifiedPdfBytes = await pdfDocModified.save();
+                    const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
+                    const link = document.createElement('a');
+                    link.href = URL.createObjectURL(blob);
+                    link.download = 'signed-document.pdf';
+                    link.click();
+                }
+            });
+
+            async function dataURLToArrayBuffer(dataURL) {
+                const response = await fetch(dataURL);
+                return response.arrayBuffer();
+            }
+            
         });
-
-
-        
-        async function dataURLToArrayBuffer(dataURL) {
-            const response = await fetch(dataURL);
-            return response.arrayBuffer();
-        }
-
-        
-    });
-</script>
+    </script>
+</body>
+</html>
\ No newline at end of file