diff --git a/map/app/public/css/admin.css b/map/app/public/css/admin.css
index cb68277..7878978 100644
--- a/map/app/public/css/admin.css
+++ b/map/app/public/css/admin.css
@@ -575,26 +575,41 @@
     }
 }
 
+/* Mobile/Small Screen Layout - Stack config above preview */
 @media (max-width: 1200px) {
     .walk-sheet-container {
-        grid-template-columns: 1fr;
+        display: flex !important; /* Change from grid to flex */
+        flex-direction: column !important; /* Stack vertically */
+        gap: 20px;
     }
+    
+    .walk-sheet-config {
+        order: 1 !important; /* Config first */
+        margin-bottom: 20px;
+    }
+    
     .walk-sheet-preview {
-        order: -1;
+        order: 2 !important; /* Preview second */
+        padding: 20px;
+        min-height: auto;
         max-width: 100vw;
-        min-height: 750px;
+        overflow-x: auto; /* Allow horizontal scroll if needed */
+        display: flex;
+        justify-content: center; /* Center the page */
     }
+    
     .walk-sheet-preview .walk-sheet-page {
         transform: scale(0.75);
+        transform-origin: top center;
+        margin-bottom: -200px;
+        max-width: 100%; /* Prevent overflow */
     }
 }
 
 @media (max-width: 1000px) {
     .walk-sheet-preview .walk-sheet-page {
-        transform: scale(0.65);
-    }
-    .walk-sheet-preview {
-        min-height: 700px;
+        transform: scale(0.5);
+        margin-bottom: -400px;
     }
 }
 
@@ -635,17 +650,43 @@
     }
     .walk-sheet-preview {
         min-width: 0;
-        max-width: 100vw;
+        max-width: 100%;
+        width: 100%;
         min-height: 500px;
         padding: 10px;
+        overflow: hidden; /* Change from overflow-x: hidden to overflow: hidden */
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
     }
-    .walk-sheet-preview .walk-sheet-page {
-        transform: scale(0.45);
+    
+    /* Container for the scaled page */
+    .walk-sheet-preview #walk-sheet-preview-content {
+        transform: scale(0.35);
+        transform-origin: top center;
         margin: 0 auto;
+        width: 816px;
+        max-width: none;
+        margin-bottom: -600px;
+        position: relative;
+        left: 50%;
+        margin-left: -408px; /* Half of 816px to center it */
     }
-    .walk-sheet-page {
-        font-size: 8px;
-        padding: 8px;
+}
+
+/* Even smaller screens */
+@media (max-width: 480px) {
+    .walk-sheet-preview {
+        padding: 5px;
+        width: 100%;
+    }
+    
+    .walk-sheet-preview #walk-sheet-preview-content {
+        transform: scale(0.25);
+        margin-bottom: -750px;
+        left: 50%;
+        margin-left: -408px; /* Keep centered */
     }
 }