diff --git a/web_interface/static/v3/js/app-shell.js b/web_interface/static/v3/js/app-shell.js
index f7049106..c366b16b 100644
--- a/web_interface/static/v3/js/app-shell.js
+++ b/web_interface/static/v3/js/app-shell.js
@@ -1870,29 +1870,35 @@
                 // Current scale from slider
                 const scale = parseInt(document.getElementById('scaleRange')?.value || '8');
 
-                // Update image and meta label
+                // Update image and meta label. Size everything from the PNG's
+                // OWN dimensions (naturalWidth/Height) once it has loaded —
+                // not from the server-reported config dimensions. If the
+                // config disagrees with what the display service actually
+                // renders (stale config, service not yet restarted), sizing
+                // from config stretches the image at a fractional ratio and
+                // the preview looks blurry until the scale slider forces a
+                // re-render. The slider path always used natural dimensions;
+                // now both paths do.
                 img.style.imageRendering = 'pixelated';
                 img.onload = () => {
+                    const nw = img.naturalWidth || data.width || 128;
+                    const nh = img.naturalHeight || data.height || 64;
+                    const width = nw * scale;
+                    const height = nh * scale;
+                    img.style.width = width + 'px';
+                    img.style.height = height + 'px';
+                    ledCanvas.width = width;
+                    ledCanvas.height = height;
+                    canvas.width = width;
+                    canvas.height = height;
+                    const meta = document.getElementById('previewMeta');
+                    if (meta) {
+                        meta.textContent = `${nw} x ${nh} @ ${scale}x`;
+                    }
+                    drawGrid(canvas, nw, nh, scale);
                     renderLedDots();
                 };
                 img.src = `data:image/png;base64,${data.image}`;
-                
-                const meta = document.getElementById('previewMeta');
-                if (meta) {
-                    meta.textContent = `${data.width || 128} x ${data.height || 64} @ ${scale}x`;
-                }
-
-                // Size the canvases to match
-                const width = (data.width || 128) * scale;
-                const height = (data.height || 64) * scale;
-                img.style.width = width + 'px';
-                img.style.height = height + 'px';
-                ledCanvas.width = width;
-                ledCanvas.height = height;
-                canvas.width = width;
-                canvas.height = height;
-                drawGrid(canvas, data.width || 128, data.height || 64, scale);
-                renderLedDots();
             } else {
                 stage.style.display = 'none';
                 placeholder.style.display = 'block';
diff --git a/web_interface/templates/v3/partials/overview.html b/web_interface/templates/v3/partials/overview.html
index daa8f990..11e3e398 100644
--- a/web_interface/templates/v3/partials/overview.html
+++ b/web_interface/templates/v3/partials/overview.html
@@ -321,7 +321,10 @@
         <h3 class="text-md font-medium text-gray-900 mb-4">
             <i class="fas fa-desktop"></i> Live Display Preview
         </h3>
-        <div class="bg-gray-900 rounded-lg p-6 border border-gray-700" style="position: relative;">
+        <!-- overflow-x-auto: on narrow screens a wide preview scrolls at its
+             true pixel-perfect size instead of being squeezed (fractional
+             downscaling of pixel art reads as blur) -->
+        <div class="bg-gray-900 rounded-lg p-6 border border-gray-700 overflow-x-auto" style="position: relative;">
             <div id="previewStage" class="preview-stage" style="display:none; position:relative; display:inline-block;">
                 <div id="previewMeta" style="position:absolute; top:-28px; left:0; color:#ddd; font-size:12px; opacity:0.85;"></div>
                 <img id="displayImage" style="image-rendering: pixelated; display: block;" alt="LED Matrix Display">