diff --git a/inventory/static/js/components/draw.js b/inventory/static/js/components/draw.js
index 68b266f..f3682ec 100644
--- a/inventory/static/js/components/draw.js
+++ b/inventory/static/js/components/draw.js
@@ -37,9 +37,9 @@ function initGridWidget(root, opts = {}) {
     const widthValEl = root.querySelector('[data-stroke-width-val]');
 
     if (cellSizeEl && cellSizeValEl) bindRangeWithLabel(cellSizeEl, cellSizeValEl, v => `${v}px`);
-    if (fillOpacityEl && fillValEl) bindRangeWithLabel(fillOpacityEl, fillValEl, v => `${Number(v) * 100}%`);
-    if (strokeOpacityEl && strokeValEl) bindRangeWithLabel(strokeOpacityEl, strokeValEl, v => `${Number(v) * 100}%`);
-    if (strokeWidthEl && widthValEl) bindRangeWithLabel(strokeWidthEl, widthValEl, v => `${Number(v) * 100}%`);
+    if (fillOpacityEl && fillValEl) bindRangeWithLabel(fillOpacityEl, fillValEl, v => `${parseInt(Number(v) * 100)}%`);
+    if (strokeOpacityEl && strokeValEl) bindRangeWithLabel(strokeOpacityEl, strokeValEl, v => `${parseInt(Number(v) * 100)}%`);
+    if (strokeWidthEl && widthValEl) bindRangeWithLabel(strokeWidthEl, widthValEl, v => `${parseInt(Number(v) * 100)}%`);
 
     const storageKey = opts.storageKey ?? 'gridDoc';
 
@@ -300,7 +300,7 @@ function initGridWidget(root, opts = {}) {
         gridEl.style.width = `${snappedW}px`;
         gridEl.style.height = `${snappedH}px`;
 
-        toolBarEl.style.maxWidth = `${snappedW}px`;
+        toolBarEl.style.setProperty('--grid-maxw', `${snappedW}px`);
 
         gridEl.getBoundingClientRect();
         resizeAndSetupCanvas();
diff --git a/inventory/templates/components/draw.html b/inventory/templates/components/draw.html
index f38ff8d..a8d0ce8 100644
--- a/inventory/templates/components/draw.html
+++ b/inventory/templates/components/draw.html
@@ -4,32 +4,73 @@
         <div data-toolbar
             class="btn-toolbar bg-light border border-bottom-0 rounded-bottom-0 border-secondary-subtle rounded p-1 align-items-center flex-nowrap overflow-auto toolbar">
             <div class="d-flex flex-wrap align-items-center gap-2">
-                <div class="d-flex align-items-center gap-2">
-                    <span class="badge text-bg-light border">Spacing</span>
-                    <input type="range" min="1" max="100" step="1" value="25" data-cell-size
-                        class="form-range toolbar-range">
-                    <span class="badge text-bg-secondary" data-cell-size-val>25px</span>
+                <div class="dropdown">
+                    <button type="button" class="btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-grid-3x3-gap" viewBox="0 0 16 16">
+                            <path
+                                d="M4 2v2H2V2zm1 12v-2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m0-5V7a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m0-5V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m5 10v-2a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m0-5V7a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1m0-5V2a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1M9 2v2H7V2zm5 0v2h-2V2zM4 7v2H2V7zm5 0v2H7V7zm5 0h-2v2h2zM4 12v2H2v-2zm5 0v2H7v-2zm5 0v2h-2v-2zM12 1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm-1 6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zm1 4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1z" />
+                        </svg>
+                        <span class="badge text-bg-secondary" data-cell-size-val>25px</span>
+                    </button>
+                    <ul class="dropdown-menu">
+                        <li>
+                            <input type="range" min="1" max="100" step="1" value="25" data-cell-size
+                                class="form-range toolbar-range">
+                        </li>
+                    </ul>
                 </div>
 
-                <div class="d-flex align-items-center gap-2">
-                    <span class="badge text-bg-light border">Fill</span>
-                    <input type="range" min="0" max="1" step="0.01" value="1" data-fill-opacity
-                        class="form-range toolbar-range">
-                    <span class="badge text-bg-secondary" data-fill-opacity-val>100%</span>
+                <div class="dropdown">
+                    <button type="button" class="btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-droplet-fill" viewBox="0 0 16 16">
+                            <path
+                                d="M8 16a6 6 0 0 0 6-6c0-1.655-1.122-2.904-2.432-4.362C10.254 4.176 8.75 2.503 8 0c0 0-6 5.686-6 10a6 6 0 0 0 6 6M6.646 4.646l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448c.82-1.641 1.717-2.753 2.093-3.13" />
+                        </svg>
+                        <span class="badge text-bg-secondary" data-fill-opacity-val>100%</span>
+                    </button>
+                    <ul class="dropdown-menu">
+                        <li>
+                            <input type="range" min="0" max="1" step="0.01" value="1" data-fill-opacity
+                                class="form-range toolbar-range">
+                        </li>
+                    </ul>
                 </div>
 
-                <div class="d-flex align-items-center gap-2">
-                    <span class="badge text-bg-light border">Stroke</span>
-                    <input type="range" min="0" max="1" step="0.01" value="1" data-stroke-opacity
-                        class="form-range toolbar-range">
-                    <span class="badge text-bg-secondary" data-stroke-opacity-val>100%</span>
+                <div class="dropdown">
+                    <button type="button" class="btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                            class="bi bi-dash-square-dotted" viewBox="0 0 16 16">
+                            <path
+                                d="M2.5 0q-.25 0-.487.048l.194.98A1.5 1.5 0 0 1 2.5 1h.458V0zm2.292 0h-.917v1h.917zm1.833 0h-.917v1h.917zm1.833 0h-.916v1h.916zm1.834 0h-.917v1h.917zm1.833 0h-.917v1h.917zM13.5 0h-.458v1h.458q.151 0 .293.029l.194-.981A2.5 2.5 0 0 0 13.5 0m2.079 1.11a2.5 2.5 0 0 0-.69-.689l-.556.831q.248.167.415.415l.83-.556zM1.11.421a2.5 2.5 0 0 0-.689.69l.831.556c.11-.164.251-.305.415-.415zM16 2.5q0-.25-.048-.487l-.98.194q.027.141.028.293v.458h1zM.048 2.013A2.5 2.5 0 0 0 0 2.5v.458h1V2.5q0-.151.029-.293zM0 3.875v.917h1v-.917zm16 .917v-.917h-1v.917zM0 5.708v.917h1v-.917zm16 .917v-.917h-1v.917zM0 7.542v.916h1v-.916zm15 .916h1v-.916h-1zM0 9.375v.917h1v-.917zm16 .917v-.917h-1v.917zm-16 .916v.917h1v-.917zm16 .917v-.917h-1v.917zm-16 .917v.458q0 .25.048.487l.98-.194A1.5 1.5 0 0 1 1 13.5v-.458zm16 .458v-.458h-1v.458q0 .151-.029.293l.981.194Q16 13.75 16 13.5M.421 14.89c.183.272.417.506.69.689l.556-.831a1.5 1.5 0 0 1-.415-.415zm14.469.689c.272-.183.506-.417.689-.69l-.831-.556c-.11.164-.251.305-.415.415l.556.83zm-12.877.373Q2.25 16 2.5 16h.458v-1H2.5q-.151 0-.293-.029zM13.5 16q.25 0 .487-.048l-.194-.98A1.5 1.5 0 0 1 13.5 15h-.458v1zm-9.625 0h.917v-1h-.917zm1.833 0h.917v-1h-.917zm1.834 0h.916v-1h-.916zm1.833 0h.917v-1h-.917zm1.833 0h.917v-1h-.917zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z" />
+                        </svg>
+                        <span class="badge text-bg-secondary" data-stroke-opacity-val>100%</span>
+                    </button>
+                    <ul class="dropdown-menu">
+                        <li>
+                            <input type="range" min="0" max="1" step="0.01" value="1" data-stroke-opacity
+                                class="form-range toolbar-range">
+                        </li>
+                    </ul>
                 </div>
 
-                <div class="d-flex align-items-center gap-2">
-                    <span class="badge text-bg-light border">Width</span>
-                    <input type="range" min="0" max="1" step="0.01" value="0.12" data-stroke-width
-                        class="form-range toolbar-range">
-                    <span class="badge text-bg-secondary" data-stroke-width-val>12%</span>
+                <div class="dropdown">
+                    <button type="button" class="btn btn-light dropdown-toggle border" data-bs-toggle="dropdown">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+                            fill="currentColor" class="me-1" aria-hidden="true">
+                            <rect x="2" y="3" width="12" height="1" rx=".5"></rect>
+                            <rect x="2" y="7" width="12" height="2" rx="1"></rect>
+                            <rect x="2" y="12" width="12" height="3" rx="1.5"></rect>
+                        </svg>
+                        <span class="badge text-bg-secondary" data-stroke-width-val>12%</span>
+                    </button>
+                    <ul class="dropdown-menu">
+                        <li>
+                            <input type="range" min="0" max="1" step="0.01" value="0.12" data-stroke-width
+                                class="form-range toolbar-range">
+                        </li>
+                    </ul>
                 </div>
             </div>
             <div class="vr mx-1"></div>
@@ -92,9 +133,15 @@
                     data-tool>
                 <label for="tool-line-{{ uid }}"
                     class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
-                    ⎯
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"
+                        aria-hidden="true">
+                        <path d="M4 12 L12 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                        <circle cx="4" cy="12" r="1.5" fill="currentColor" />
+                        <circle cx="12" cy="4" r="1.5" fill="currentColor" />
+                    </svg>
                 </label>
             </div>
+
             <div class="vr mx-1"></div>
             <div class="btn-group">
                 <input type="radio" class="btn-check" name="gridType-{{ uid }}" value="noGrid"