diff --git a/tests/js/gallery-settings.test.js b/tests/js/gallery-settings.test.js
new file mode 100644
index 0000000..44098a5
--- /dev/null
+++ b/tests/js/gallery-settings.test.js
@@ -0,0 +1,57 @@
+// Run with: node --test tests/js/
+const test = require("node:test");
+const assert = require("node:assert/strict");
+const {
+    DEFAULT_SETTINGS,
+    normalizeGallerySettings,
+    gridColumnsStyle,
+    LIMIT_OPTIONS,
+} = require("../../web/js/gallery-settings.js");
+
+test("defaults are a complete, sane settings object", () => {
+    const s = normalizeGallerySettings(null);
+    assert.deepEqual(s, DEFAULT_SETTINGS);
+    assert.equal(s.defaultViewMode, "grid");
+    assert.equal(s.defaultLimit, 100);
+    assert.equal(s.gridColumns, 8);
+    assert.equal(s.showImageInfo, true);
+    assert.equal(s.sidebarCollapsedByDefault, false);
+});
+
+test("stored values override defaults and unknown keys are kept", () => {
+    const s = normalizeGallerySettings({ defaultViewMode: "list", defaultLimit: 500, gridColumns: 10, showImageInfo: false, videoLoop: false, extra: 1 });
+    assert.equal(s.defaultViewMode, "list");
+    assert.equal(s.defaultLimit, 500);
+    assert.equal(s.gridColumns, 10);
+    assert.equal(s.showImageInfo, false);
+    assert.equal(s.videoLoop, false);
+    assert.equal(s.extra, 1);
+});
+
+test("invalid stored values fall back to defaults instead of breaking the page", () => {
+    const s = normalizeGallerySettings({ defaultViewMode: "mosaic", defaultLimit: 7, gridColumns: "lots", showImageInfo: "no" });
+    assert.equal(s.defaultViewMode, "grid");
+    assert.equal(s.defaultLimit, 100);
+    assert.equal(s.gridColumns, 8);
+    assert.equal(s.showImageInfo, true);
+});
+
+test("numeric strings from <select> values are accepted and columns are clamped", () => {
+    assert.equal(normalizeGallerySettings({ defaultLimit: "200" }).defaultLimit, 200);
+    assert.equal(normalizeGallerySettings({ gridColumns: "10" }).gridColumns, 10);
+    assert.equal(normalizeGallerySettings({ gridColumns: 40 }).gridColumns, 12);
+    assert.equal(normalizeGallerySettings({ gridColumns: 1 }).gridColumns, 2);
+    assert.deepEqual(LIMIT_OPTIONS, [50, 100, 200, 500]);
+});
+
+test("normalize never mutates its input", () => {
+    const raw = { gridColumns: 4 };
+    normalizeGallerySettings(raw);
+    assert.deepEqual(raw, { gridColumns: 4 });
+});
+
+test("gridColumnsStyle produces an explicit grid template", () => {
+    assert.equal(gridColumnsStyle(10), "repeat(10, minmax(0, 1fr))");
+    assert.equal(gridColumnsStyle("6"), "repeat(6, minmax(0, 1fr))");
+    assert.equal(gridColumnsStyle("x"), "repeat(8, minmax(0, 1fr))");
+});
diff --git a/web/gallery.html b/web/gallery.html
index 4185bf9..be41110 100644
--- a/web/gallery.html
+++ b/web/gallery.html
@@ -7,6 +7,7 @@
     <script src="/prompt_manager/js/theme-bridge.js"></script>
     <script src="/prompt_manager/js/html-escape.js"></script>
     <script src="/prompt_manager/js/image-helpers.js"></script>
+    <script src="/prompt_manager/js/gallery-settings.js"></script>
     <script src="/prompt_manager/js/api-client.js"></script>
     <script src="/prompt_manager/js/png-metadata.js"></script>
     <script src="/prompt_manager/js/list-state.js"></script>
@@ -16,6 +17,15 @@
     <link rel="stylesheet" href="lib/tailwind/styles.css">
     <link rel="stylesheet" href="lib/viewerjs/viewer.min.css">
     <script src="lib/viewerjs/viewer.min.js"></script>
+    <style>
+        /* Column count from Display Settings. An id selector inside the desktop
+           media query outranks the Tailwind breakpoint classes on #galleryGrid. */
+        @media (min-width: 1280px) {
+            #galleryGrid.gallery-columns-custom {
+                grid-template-columns: var(--gallery-columns, repeat(8, minmax(0, 1fr)));
+            }
+        }
+    </style>
 </head>
 <body class="bg-pm-primary text-pm min-h-screen">
     <div class="min-h-screen flex flex-col">
diff --git a/web/js/gallery-settings.js b/web/js/gallery-settings.js
new file mode 100644
index 0000000..d2fe3e2
--- /dev/null
+++ b/web/js/gallery-settings.js
@@ -0,0 +1,85 @@
+/**
+ * Gallery display settings: defaults, validation of what localStorage holds,
+ * and the grid template for a chosen column count.
+ *
+ * Settings are per browser (localStorage key "gallerySettings"). Anything
+ * stored can be stale or hand-edited, so every value is checked before use.
+ *
+ * Loadable in the browser (window.GallerySettings) and in Node for tests.
+ */
+(function (root) {
+    "use strict";
+
+    const VIEW_MODES = ["grid", "list"];
+    const LIMIT_OPTIONS = [50, 100, 200, 500];
+    const MIN_COLUMNS = 2;
+    const MAX_COLUMNS = 12;
+
+    const DEFAULT_SETTINGS = Object.freeze({
+        lazyLoading: true,
+        imageQuality: "medium",
+        defaultViewMode: "grid",
+        defaultLimit: 100,
+        gridColumns: 8,
+        showImageInfo: true,
+        autoLoadMetadata: true,
+        cacheMetadata: true,
+        showFilePaths: true,
+        sidebarCollapsedByDefault: false,
+        debugMode: false,
+        apiTimeout: 30,
+        thumbnailsGenerated: false,
+        checkThumbnailsAtStartup: true,
+        videoAutoplay: false,
+        videoMute: true,
+        videoLoop: true,
+    });
+
+    function toInt(value) {
+        const n = typeof value === "string" ? Number(value.trim()) : value;
+        return typeof n === "number" && Number.isInteger(n) ? n : null;
+    }
+
+    function bool(value, fallback) {
+        return typeof value === "boolean" ? value : fallback;
+    }
+
+    /** Merge stored settings over the defaults, replacing anything invalid. */
+    function normalizeGallerySettings(raw) {
+        const stored = raw && typeof raw === "object" ? raw : {};
+        const merged = { ...DEFAULT_SETTINGS, ...stored };
+        const limit = toInt(merged.defaultLimit);
+        const columns = toInt(merged.gridColumns);
+        const timeout = toInt(merged.apiTimeout);
+        return {
+            ...merged,
+            defaultViewMode: VIEW_MODES.includes(merged.defaultViewMode) ? merged.defaultViewMode : DEFAULT_SETTINGS.defaultViewMode,
+            defaultLimit: limit !== null && LIMIT_OPTIONS.includes(limit) ? limit : DEFAULT_SETTINGS.defaultLimit,
+            gridColumns: columns === null ? DEFAULT_SETTINGS.gridColumns : Math.min(MAX_COLUMNS, Math.max(MIN_COLUMNS, columns)),
+            apiTimeout: timeout !== null && timeout > 0 ? timeout : DEFAULT_SETTINGS.apiTimeout,
+            imageQuality: ["low", "medium", "high"].includes(merged.imageQuality) ? merged.imageQuality : DEFAULT_SETTINGS.imageQuality,
+            lazyLoading: bool(merged.lazyLoading, DEFAULT_SETTINGS.lazyLoading),
+            showImageInfo: bool(merged.showImageInfo, DEFAULT_SETTINGS.showImageInfo),
+            autoLoadMetadata: bool(merged.autoLoadMetadata, DEFAULT_SETTINGS.autoLoadMetadata),
+            cacheMetadata: bool(merged.cacheMetadata, DEFAULT_SETTINGS.cacheMetadata),
+            showFilePaths: bool(merged.showFilePaths, DEFAULT_SETTINGS.showFilePaths),
+            sidebarCollapsedByDefault: bool(merged.sidebarCollapsedByDefault, DEFAULT_SETTINGS.sidebarCollapsedByDefault),
+            debugMode: bool(merged.debugMode, DEFAULT_SETTINGS.debugMode),
+            thumbnailsGenerated: bool(merged.thumbnailsGenerated, DEFAULT_SETTINGS.thumbnailsGenerated),
+            checkThumbnailsAtStartup: bool(merged.checkThumbnailsAtStartup, DEFAULT_SETTINGS.checkThumbnailsAtStartup),
+            videoAutoplay: bool(merged.videoAutoplay, DEFAULT_SETTINGS.videoAutoplay),
+            videoMute: bool(merged.videoMute, DEFAULT_SETTINGS.videoMute),
+            videoLoop: bool(merged.videoLoop, DEFAULT_SETTINGS.videoLoop),
+        };
+    }
+
+    /** CSS grid-template-columns for the desktop grid. */
+    function gridColumnsStyle(columns) {
+        const n = normalizeGallerySettings({ gridColumns: columns }).gridColumns;
+        return `repeat(${n}, minmax(0, 1fr))`;
+    }
+
+    const api = { DEFAULT_SETTINGS, LIMIT_OPTIONS, VIEW_MODES, normalizeGallerySettings, gridColumnsStyle };
+    if (typeof module !== "undefined" && module.exports) module.exports = api;
+    else root.GallerySettings = api;
+})(typeof window !== "undefined" ? window : globalThis);
diff --git a/web/js/gallery.js b/web/js/gallery.js
index b64c302..2b70ed6 100644
--- a/web/js/gallery.js
+++ b/web/js/gallery.js
@@ -25,6 +25,7 @@
                 };
 
                 this.initializeEventListeners();
+                this.applySettings(this.getSettings());
                 this.loadFolderTree();
                 this.loadImages();
 
@@ -44,8 +45,26 @@
                 });
             }
 
+            handleMediaError(img) {
+                if (!img || img.tagName !== 'IMG' || !img.dataset || img.dataset.original === undefined) return;
+                const next = ImageHelpers.fallbackImageSource(img.getAttribute('src'), img.dataset);
+                if (next) {
+                    // The thumbnail failed (stale cache, half-written file): show the original instead
+                    img.dataset.fellBack = '1';
+                    img.src = next;
+                    return;
+                }
+                img.style.display = 'none';
+                const fallback = img.nextElementSibling;
+                if (fallback && fallback.dataset && fallback.dataset.mediaFallback !== undefined) {
+                    fallback.style.display = 'flex';
+                }
+            }
+
             initializeEventListeners() {
                 document.addEventListener('click', (e) => this.handleActionClick(e));
+                // Image load failures do not bubble; capture them once for every card
+                document.addEventListener('error', (e) => this.handleMediaError(e.target), true);
                 document.getElementById('refreshBtn').addEventListener('click', () => this.loadImages());
                 document.getElementById('limitSelector').addEventListener('change', (e) => this.changeLimit(parseInt(e.target.value)));
                 document.getElementById('gridViewBtn').addEventListener('click', () => this.setViewMode('grid'));
@@ -408,6 +427,7 @@
             renderGridView() {
                 const grid = document.getElementById('galleryGrid');
                 const list = document.getElementById('galleryList');
+                const showInfo = this.getSettings().showImageInfo;
                 
                 list.classList.add('hidden');
                 grid.classList.remove('hidden');
@@ -431,9 +451,9 @@
                                  data-caption="${escapeHtml(this.formatImageCaption(image))}"
                                  data-media-type="${escapeHtml(mediaType)}"
                                  data-is-video="${isVideo}"
-                                 onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
+>
                             <!-- Fallback for failed thumbnails -->
-                            <div class="hidden absolute inset-0 bg-pm-surface text-pm-secondary flex items-center justify-center">
+                            <div data-media-fallback class="hidden absolute inset-0 bg-pm-surface text-pm-secondary flex items-center justify-center">
                                 <div class="text-center">
                                     <div class="text-lg mb-1">${isVideo ? '🎬' : '🖼️'}</div>
                                     <div class="text-xs">Failed to load</div>
@@ -457,7 +477,7 @@
                         </div>
                         <div class="p-2">
                             <div class="text-xs text-pm-secondary truncate" title="${escapeHtml(image.filename)}">${escapeHtml(image.filename)}</div>
-                            <div class="text-xs text-pm-muted">${this.formatFileSize(image.size)}${hasThumb ? ' • Fast' : ''}${isVideo ? ' • Video' : ''}</div>
+                            ${showInfo ? `<div class="text-xs text-pm-muted">${this.formatFileSize(image.size)}${hasThumb ? ' • Fast' : ''}${isVideo ? ' • Video' : ''}</div>` : ''}
                         </div>
                     </div>
                 `;
@@ -467,6 +487,7 @@
             renderListView() {
                 const grid = document.getElementById('galleryGrid');
                 const list = document.getElementById('galleryList');
+                const showInfo = this.getSettings().showImageInfo;
                 
                 grid.classList.add('hidden');
                 list.classList.remove('hidden');
@@ -489,14 +510,13 @@
                                  data-thumbnail="${escapeHtml(image.thumbnail_url || '')}"
                                  data-caption="${escapeHtml(this.formatImageCaption(image))}"
                                  data-media-type="${escapeHtml(mediaType)}"
-                                 data-is-video="${isVideo}"
-                                 onerror="this.style.display='none'">
+                                 data-is-video="${isVideo}">
                             ${hasThumb ? '<div class="absolute top-1 right-1 w-2 h-2 bg-pm-success rounded-full" title="Thumbnail available"></div>' : ''}
                             ${isVideo ? '<div class="absolute top-1 left-1 w-4 h-3 bg-pm-error text-pm text-xs flex items-center justify-center rounded" title="Video">▶</div>' : ''}
                         </div>
                         <div class="flex-1 min-w-0">
                             <div class="text-sm font-medium text-pm truncate">${escapeHtml(image.filename)}${isVideo ? ' 🎬' : ''}</div>
-                            <div class="text-xs text-pm-secondary">${this.formatFileSize(image.size)} • ${new Date(image.modified_time * 1000).toLocaleDateString()}${hasThumb ? ' • Fast' : ''}${isVideo ? ' • Video' : ''}</div>
+                            ${showInfo ? `<div class="text-xs text-pm-secondary">${this.formatFileSize(image.size)} • ${new Date(image.modified_time * 1000).toLocaleDateString()}${hasThumb ? ' • Fast' : ''}${isVideo ? ' • Video' : ''}</div>` : ''}
                             <div class="text-xs text-pm-muted truncate">${escapeHtml(image.relative_path)}</div>
                         </div>
                         <div class="flex-shrink-0 ml-4">
@@ -1657,37 +1677,14 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
             }
 
             getSettings() {
-                const defaultSettings = {
-                    lazyLoading: true,
-                    imageQuality: 'medium',
-                    defaultViewMode: 'grid',
-                    defaultLimit: 100,
-                    gridColumns: 8,
-                    showImageInfo: true,
-                    autoLoadMetadata: true,
-                    cacheMetadata: true,
-                    showFilePaths: true,
-                    sidebarCollapsedByDefault: false,
-                    debugMode: false,
-                    apiTimeout: 30,
-                    thumbnailsGenerated: false,
-                    checkThumbnailsAtStartup: true,
-                    // Video settings
-                    videoAutoplay: false,
-                    videoMute: true,
-                    videoLoop: true
-                };
-
+                let stored = null;
                 try {
-                    const stored = localStorage.getItem('gallerySettings');
-                    if (stored) {
-                        return { ...defaultSettings, ...JSON.parse(stored) };
-                    }
+                    const raw = localStorage.getItem('gallerySettings');
+                    if (raw) stored = JSON.parse(raw);
                 } catch (e) {
                     console.warn('Failed to load settings from localStorage:', e);
                 }
-
-                return defaultSettings;
+                return GallerySettings.normalizeGallerySettings(stored);
             }
 
             saveSettings() {
@@ -1734,29 +1731,31 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
             }
 
             applySettings(settings) {
-                // Apply grid columns
+                // Runs at startup and after Save, so every display setting takes effect
+                // without a reload. Settings that change what is rendered re-render.
+                const loaded = this.images.length > 0;
                 this.updateGridColumns(settings.gridColumns);
-                
-                // Apply default view mode if different
+
+                const limitChanged = this.limit !== settings.defaultLimit;
+                this.limit = settings.defaultLimit;
+                const limitSelector = document.getElementById('limitSelector');
+                if (limitSelector) limitSelector.value = String(settings.defaultLimit);
+
                 if (this.viewMode !== settings.defaultViewMode) {
                     this.setViewMode(settings.defaultViewMode);
+                } else if (loaded && !limitChanged) {
+                    this.renderGallery(); // e.g. "Show Media Info" toggled
                 }
-                
-                // Apply default limit if different
-                if (this.limit !== settings.defaultLimit) {
-                    this.limit = settings.defaultLimit;
-                    document.getElementById('limitSelector').value = settings.defaultLimit;
-                }
+                if (loaded && limitChanged) this.loadImages(1);
             }
 
             updateGridColumns(columns) {
                 const gridContainer = document.getElementById('galleryGrid');
-                if (gridContainer) {
-                    // Remove existing column classes
-                    gridContainer.className = gridContainer.className.replace(/xl:grid-cols-\d+/g, '');
-                    // Add new column class
-                    gridContainer.classList.add(`xl:grid-cols-${columns}`);
-                }
+                if (!gridContainer) return;
+                // The Tailwind column classes are compiled for a fixed set of values and a
+                // wider breakpoint overrides them; an explicit template wins on desktop widths.
+                gridContainer.style.setProperty('--gallery-columns', GallerySettings.gridColumnsStyle(columns));
+                gridContainer.classList.add('gallery-columns-custom');
             }
 
             async generateThumbnails() {