diff --git a/ui/index.html b/ui/index.html
index ef16ec38..f3f0574d 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -524,7 +524,7 @@
                 <input id="gallery-model-search" type="text" onkeydown="gallery_keyDown_handler(event)" placeholder="Search for a model..."></input>
                 <label for="gallery-page">Page:</label>
                 <input id="gallery-page" name="Page" value="0" size="1" onkeypress="gallery_keyDown_handler(event)">
-                <input id="gallery-thumbnail-size" name="gallery-thumbnail-size" class="editor-slider" type="range" value="300" min="50" max="800">
+                <input id="gallery-thumbnail-size" name="gallery-thumbnail-size" class="editor-slider" type="range" value="5.5" min="3" max="20" step="0.05">
                 <button class="primaryButton" id="gallery-refresh" onclick="refreshGallery(true)">Load</button>
                 <button class="primaryButton" onclick="incrementGalleryPage()"><i class="fa-solid fa-arrow-right"></i></button>
             </div>
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 9259e6c8..3bba6a31 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -3244,13 +3244,15 @@ window.addEventListener("resize", layoutGallery)
 
 function layoutGallery() {
     let container = document.getElementById("imagecontainer")
-    let thumbSize = parseInt(galleryThumbnailSize.value)
+    let thumbSize = parseFloat(galleryThumbnailSize.value)
+    thumbSize = (10*thumbSize*thumbSize)>>>0
     let root = document.querySelector(':root')
     root.style.setProperty('--gallery-width', thumbSize + "px")
     let msnry = new Masonry( container, {
         gutter: 10,
         itemSelector: '.gallery-image',
-        columnWidth: thumbSize
+        columnWidth: thumbSize,
+        fitWidth: true,
     })
 }