diff --git a/app.php b/app.php
index fc0178b..64c5acb 100644
--- a/app.php
+++ b/app.php
@@ -283,7 +283,7 @@ $f3->route('POST /organize',
         $filenames = array();
         $tmpfile = tempnam($f3->get('UPLOADS'), 'pdfsignature_organize');
         unlink($tmpfile);
-        $pages = explode(',', preg_replace('/[^A-Z0-9,]+/', '', $f3->get('POST.pages')));
+        $pages = explode(',', preg_replace('/[^A-Z0-9a-z,]+/', '', $f3->get('POST.pages')));
 
         $files = Web::instance()->receive(function($file,$formFieldName){
             if(strpos(Web::instance()->mime($file['tmp_name'], true), 'application/pdf') !== 0) {
diff --git a/public/js/organization.js b/public/js/organization.js
index 4be42df..ff00955 100644
--- a/public/js/organization.js
+++ b/public/js/organization.js
@@ -33,7 +33,7 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
                 let pageIndex = pdfLetter + "_" + (page.pageNumber - 1);
                 pages[pageIndex] = page;
 
-                document.getElementById('container-pages').insertAdjacentHTML('beforeend', '<div class="position-relative mt-0 ms-1 me-0 mb-1 canvas-container shadow-sm d-flex align-items-center justify-content-center bg-white" id="canvas-container-' + pageIndex +'" draggable="true"><canvas class="canvas-pdf" style="border: 2px solid transparent;"></canvas><div class="position-absolute top-50 start-50 translate-middle p-2 ps-3 pe-3 rounded-circle container-resize btn-drag"><i class="bi bi-arrows-move"></i></div><div class="position-absolute top-50 end-0 translate-middle-y p-2 ps-3 pe-3 rounded-circle container-rotate btn-rotate"><i class="bi bi-arrow-clockwise"></i></div><div class="position-absolute text-center w-100 pt-1 container-checkbox pb-4" style="background: rgb(255,255,255,0.8); bottom: 0; cursor: pointer;"><div class="form-switch"><input form="form_pdf" class="form-check-input checkbox-page" role="switch" type="checkbox" checked="checked" style="cursor: pointer;" value="'+pdfLetter+page.pageNumber+'" /></div></div><p class="position-absolute text-center w-100 ps-2 pe-2 pb-0 mb-1 opacity-75" style="bottom: 0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">Page '+page.pageNumber+' - '+filename+'</p><input type="hidden" value="0" id="input_rotate_'+pageIndex+'" /></div>');
+                document.getElementById('container-pages').insertAdjacentHTML('beforeend', '<div class="position-relative mt-0 ms-1 me-0 mb-1 canvas-container shadow-sm d-flex align-items-center justify-content-center bg-white" id="canvas-container-' + pageIndex +'" draggable="true"><canvas class="canvas-pdf" style="border: 2px solid transparent;"></canvas><div class="position-absolute top-50 start-50 translate-middle p-2 ps-3 pe-3 rounded-circle container-resize btn-drag"><i class="bi bi-arrows-move"></i></div><div class="position-absolute top-50 end-0 translate-middle-y p-2 ps-3 pe-3 rounded-circle container-rotate btn-rotate"><i class="bi bi-arrow-clockwise"></i></div><div class="position-absolute text-center w-100 pt-1 container-checkbox pb-4" style="background: rgb(255,255,255,0.8); bottom: 0; cursor: pointer;"><div class="form-switch"><input form="form_pdf" class="form-check-input checkbox-page" role="switch" type="checkbox" checked="checked" style="cursor: pointer;" value="'+pdfLetter+page.pageNumber+'" /></div></div><p class="position-absolute text-center w-100 ps-2 pe-2 pb-0 mb-1 opacity-75" style="bottom: 0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">Page '+page.pageNumber+' - '+filename+'</p><input type="hidden" class="input-rotate" value="0" id="input_rotate_'+pageIndex+'" /></div>');
 
                 let canvasContainer = document.getElementById('canvas-container-' + pageIndex);
                 canvasContainer.addEventListener('dragstart', function(e) {
@@ -82,7 +82,7 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
                 });
                 canvasContainer.querySelector('.btn-rotate').addEventListener('click', function(e) {
                     let inputRotate = document.querySelector('#input_rotate_'+pageIndex);
-                    inputRotate.value = parseInt(inputRotate.value) + 90;
+                    inputRotate.value = (parseInt(inputRotate.value) + 90) % 360;
                     pageRender(pageIndex);
                 })
 
@@ -162,9 +162,24 @@ var createEventsListener = function() {
     });
     document.getElementById('save').addEventListener('click', function(event) {
         let order = [];
-        document.querySelectorAll('.checkbox-page').forEach(function(checkbox) {
+        document.querySelectorAll('.canvas-container').forEach(function(canvasContainer) {
+            let checkbox = canvasContainer.querySelector('.checkbox-page');
+            let inputRotate = canvasContainer.querySelector('.input-rotate');
+            let pageValue = "";
             if(checkbox.checked) {
-                order.push(checkbox.value);
+                pageValue = checkbox.value;
+            }
+            if(pageValue && inputRotate.value == 90) {
+                pageValue = pageValue + "-east";
+            }
+            if(pageValue && inputRotate.value == 180) {
+                pageValue = pageValue + "-south";
+            }
+            if(pageValue && inputRotate.value == 270) {
+                pageValue = pageValue + "-west";
+            }
+            if(pageValue) {
+                order.push(pageValue);
             }
         });
         document.querySelector('#input_pages').value = order.join(',');