diff --git a/inventory/static/css/components/draw.css b/inventory/static/css/components/draw.css
index d40b402..11470be 100644
--- a/inventory/static/css/components/draw.css
+++ b/inventory/static/css/components/draw.css
@@ -1,8 +1,18 @@
+.grid-widget {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+}
+
 .grid-widget .grid-wrap {
+    flex: 1 1 auto;
     width: 100%;
-    height: 80vh;
+    height: clamp(240px, 50vh, 700px);
     position: relative;
     overflow: hidden;
+    min-height: 0;
 }
 
 .grid-widget [data-grid] {
@@ -12,12 +22,17 @@
     height: 100%;
     touch-action: none;
     margin: 0 auto;
+    max-width: 100%;
 }
 
 .grid-widget [data-toolbar]::-webkit-scrollbar {
     height: 8px;
 }
 
+.grid-widget [data-grid-wrap] {
+    min-width: 0;
+}
+
 .grid-widget [data-coords] {
     bottom: 10px;
     pointer-events: none;
@@ -31,9 +46,11 @@
 }
 
 .grid-widget [data-toolbar] {
+    flex: 0 0 auto;
     width: min(100%, var(--grid-maxw, 100%));
     box-sizing: border-box;
     margin: 0 auto;
+    max-width: 100%;
 }
 
 .grid-widget [data-dot] {
@@ -64,11 +81,11 @@
     border-radius: .5rem;
 }
 
-.grid-widget .dropdown-menu > *:first-child {
+.grid-widget .dropdown-menu>*:first-child {
     margin-top: 0;
 }
 
-.grid-widget .dropdown-menu > *:last-child {
+.grid-widget .dropdown-menu>*:last-child {
     margin-bottom: 0;
 }
 
diff --git a/inventory/static/js/components/draw.js b/inventory/static/js/components/draw.js
index 7c7bfda..f6cf1c1 100644
--- a/inventory/static/js/components/draw.js
+++ b/inventory/static/js/components/draw.js
@@ -2,7 +2,6 @@ document.querySelectorAll('[data-grid-widget]').forEach((root, index) => {
     initGridWidget(root, { storageKey: `gridDoc:${index}` });
 });
 
-
 let activeGridWidget = null;
 
 document.addEventListener('keydown', (e) => {
@@ -10,7 +9,6 @@ document.addEventListener('keydown', (e) => {
     activeGridWidget.handleKeyDown(e);
 });
 
-
 function initGridWidget(root, opts = {}) {
     const DEFAULT_DOC = { version: 1, cellSize: 25, shapes: [] };
     const MAX_HISTORY = 100;
@@ -102,6 +100,8 @@ function initGridWidget(root, opts = {}) {
         });
     });
 
+    requestAnimationFrame(() => requestAnimationFrame(scheduleSnappedCellSize));
+
     const api = {
         handleKeyDown(e) {
             const key = e.key.toLowerCase();
diff --git a/inventory/templates/components/draw.html b/inventory/templates/components/draw.html
index 88b8cb7..6bf02fc 100644
--- a/inventory/templates/components/draw.html
+++ b/inventory/templates/components/draw.html
@@ -1,240 +1,235 @@
 {% macro drawWidget(uid) %}
-<div class="container">
-    <div class="grid-widget" data-grid-widget>
-        <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="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 p-2">
-                        <li>
-                            <div class="small text-secondary mb-1">Cell Size</div>
-                            <input type="range" min="1" max="100" step="1" value="25" data-cell-size
-                                class="form-range w-100">
-                        </li>
-                    </ul>
-                </div>
-
-                <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 p-2">
-                        <li>
-                            <div class="small text-secondary mb-1">Fill Opacity</div>
-                            <input type="range" min="0" max="1" step="0.01" value="1" data-fill-opacity
-                                class="form-range w-100">
-                        </li>
-                    </ul>
-                </div>
-
-                <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 p-2">
-                        <li>
-                            <div class="small text-secondary mb-1">Stroke Opacity</div>
-                            <input type="range" min="0" max="1" step="0.01" value="1" data-stroke-opacity
-                                class="form-range w-100">
-                        </li>
-                    </ul>
-                </div>
-
-                <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 p-2">
-                        <li>
-                            <div class="small text-secondary mb-1">Stroke Width</div>
-                            <input type="range" min="0" max="1" step="0.01" value="0.12" data-stroke-width
-                                class="form-range w-100">
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="vr mx-1"></div>
-            <input type="color" class="form-control form-control-sm form-control-color" data-color>
-            <div class="vr mx-1"></div>
-            <div class="btn-group">
-                <input type="radio" class="btn-check" value="pen" name="tool-{{ uid }}" id="tool-pen-{{ uid }}"
-                    data-tool checked>
-                <label for="tool-pen-{{ 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" fill="currentColor" class="bi bi-pen"
-                        viewBox="0 0 16 16">
+<div class="grid-widget" data-grid-widget>
+    <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="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="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001m-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708z" />
+                            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>
-                </label>
-
-                <input type="radio" class="btn-check" value="outline" name="tool-{{ uid }}" id="tool-outline-{{ uid }}"
-                    data-tool>
-                <label for="tool-outline-{{ 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" fill="currentColor"
-                        class="bi bi-square" viewBox="0 0 16 16">
-                        <path
-                            d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" />
-                    </svg>
-                </label>
-
-                <input type="radio" class="btn-check" value="filled" name="tool-{{ uid }}" id="tool-filled-{{ uid }}"
-                    data-tool>
-                <label for="tool-filled-{{ 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" fill="currentColor"
-                        class="bi bi-square-fill" viewBox="0 0 16 16">
-                        <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2z" />
-                    </svg>
-                </label>
-
-                <input type="radio" class="btn-check" value="outlineEllipse" name="tool-{{ uid }}"
-                    id="tool-outline-ellipse-{{ uid }}" data-tool>
-                <label for="tool-outline-ellipse-{{ 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" fill="currentColor"
-                        class="bi bi-circle" viewBox="0 0 16 16">
-                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
-                    </svg>
-                </label>
-
-                <input type="radio" class="btn-check" value="filledEllipse" name="tool-{{ uid }}"
-                    id="tool-filled-ellipse-{{ uid }}" data-tool>
-                <label for="tool-filled-ellipse-{{ 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" fill="currentColor"
-                        class="bi bi-circle-fill" viewBox="0 0 16 16">
-                        <circle cx="8" cy="8" r="8" />
-                    </svg>
-                </label>
-
-                <input type="radio" class="btn-check" value="line" name="tool-{{ uid }}" id="tool-line-{{ uid }}"
-                    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>
+                    <span class="badge text-bg-secondary" data-cell-size-val>25px</span>
+                </button>
+                <ul class="dropdown-menu p-2">
+                    <li>
+                        <div class="small text-secondary mb-1">Cell Size</div>
+                        <input type="range" min="1" max="100" step="1" value="25" data-cell-size
+                            class="form-range w-100">
+                    </li>
+                </ul>
             </div>
 
-            <div class="vr mx-1"></div>
-            <div class="btn-group">
-                <input type="radio" class="btn-check" name="gridType-{{ uid }}" value="noGrid"
-                    id="type-no-grid-{{ uid }}" data-gridtype checked>
-                <label for="type-no-grid-{{ uid }}"
-                    class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center">
+            <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-border" viewBox="0 0 16 16">
+                        class="bi bi-droplet-fill" viewBox="0 0 16 16">
                         <path
-                            d="M0 0h.969v.5H1v.469H.969V1H.5V.969H0zm2.844 1h-.938V0h.938zm1.875 0H3.78V0h.938v1zm1.875 0h-.938V0h.938zm.937 0V.969H7.5V.5h.031V0h.938v.5H8.5v.469h-.031V1zm2.813 0h-.938V0h.938zm1.875 0h-.938V0h.938zm1.875 0h-.938V0h.938zM15.5 1h-.469V.969H15V.5h.031V0H16v.969h-.5zM1 1.906v.938H0v-.938zm6.5.938v-.938h1v.938zm7.5 0v-.938h1v.938zM1 3.78v.938H0V3.78zm6.5.938V3.78h1v.938zm7.5 0V3.78h1v.938zM1 5.656v.938H0v-.938zm6.5.938v-.938h1v.938zm7.5 0v-.938h1v.938zM.969 8.5H.5v-.031H0V7.53h.5V7.5h.469v.031H1v.938H.969zm1.875 0h-.938v-1h.938zm1.875 0H3.78v-1h.938v1zm1.875 0h-.938v-1h.938zm1.875-.031V8.5H7.53v-.031H7.5V7.53h.031V7.5h.938v.031H8.5v.938zm1.875.031h-.938v-1h.938zm1.875 0h-.938v-1h.938zm1.875 0h-.938v-1h.938zm1.406 0h-.469v-.031H15V7.53h.031V7.5h.469v.031h.5v.938h-.5zM0 10.344v-.938h1v.938zm7.5 0v-.938h1v.938zm8.5-.938v.938h-1v-.938zM0 12.22v-.938h1v.938zm7.5 0v-.938h1v.938zm8.5-.938v.938h-1v-.938zM0 14.094v-.938h1v.938zm7.5 0v-.938h1v.938zm8.5-.938v.938h-1v-.938zM.969 16H0v-.969h.5V15h.469v.031H1v.469H.969zm1.875 0h-.938v-1h.938zm1.875 0H3.78v-1h.938v1zm1.875 0h-.938v-1h.938zm.937 0v-.5H7.5v-.469h.031V15h.938v.031H8.5v.469h-.031v.5zm2.813 0h-.938v-1h.938zm1.875 0h-.938v-1h.938zm1.875 0h-.938v-1h.938zm.937 0v-.5H15v-.469h.031V15h.469v.031h.5V16z" />
+                            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>
-                </label>
-                <input type="radio" class="btn-check" name="gridType-{{ uid }}" value="horizontalGrid"
-                    id="type-horizontal-{{ uid }}" data-gridtype>
-                <label for="type-horizontal-{{ 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" fill="currentColor"
-                        class="bi bi-border-center" viewBox="0 0 16 16">
-                        <path
-                            d="M.969 0H0v.969h.5V1h.469V.969H1V.5H.969zm.937 1h.938V0h-.938zm1.875 0h.938V0H3.78v1zm1.875 0h.938V0h-.938zM7.531.969V1h.938V.969H8.5V.5h-.031V0H7.53v.5H7.5v.469zM9.406 1h.938V0h-.938zm1.875 0h.938V0h-.938zm1.875 0h.938V0h-.938zm1.875 0h.469V.969h.5V0h-.969v.5H15v.469h.031zM1 2.844v-.938H0v.938zm6.5-.938v.938h1v-.938zm7.5 0v.938h1v-.938zM1 4.719V3.78H0v.938h1zm6.5-.938v.938h1V3.78h-1zm7.5 0v.938h1V3.78h-1zM1 6.594v-.938H0v.938zm6.5-.938v.938h1v-.938zm7.5 0v.938h1v-.938zM0 8.5v-1h16v1zm0 .906v.938h1v-.938zm7.5 0v.938h1v-.938zm8.5.938v-.938h-1v.938zm-16 .937v.938h1v-.938zm7.5 0v.938h1v-.938zm8.5.938v-.938h-1v.938zm-16 .937v.938h1v-.938zm7.5 0v.938h1v-.938zm8.5.938v-.938h-1v.938zM0 16h.969v-.5H1v-.469H.969V15H.5v.031H0zm1.906 0h.938v-1h-.938zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938zm1.875-.5v.5h.938v-.5H8.5v-.469h-.031V15H7.53v.031H7.5v.469zm1.875.5h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875-.5v.5H16v-.969h-.5V15h-.469v.031H15v.469z" />
-                    </svg>
-                </label>
-                <input type="radio" class="btn-check" name="gridType-{{ uid }}" value="verticalGrid"
-                    id="type-vertical-{{ uid }}" data-gridtype>
-                <label for="type-vertical-{{ 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" fill="currentColor"
-                        class="bi bi-border-middle" viewBox="0 0 16 16">
-                        <path
-                            d="M.969 0H0v.969h.5V1h.469V.969H1V.5H.969zm.937 1h.938V0h-.938zm1.875 0h.938V0H3.78v1zm1.875 0h.938V0h-.938zM8.5 16h-1V0h1zm.906-15h.938V0h-.938zm1.875 0h.938V0h-.938zm1.875 0h.938V0h-.938zm1.875 0h.469V.969h.5V0h-.969v.5H15v.469h.031zM1 2.844v-.938H0v.938zm14-.938v.938h1v-.938zM1 4.719V3.78H0v.938h1zm14-.938v.938h1V3.78h-1zM1 6.594v-.938H0v.938zm14-.938v.938h1v-.938zM.5 8.5h.469v-.031H1V7.53H.969V7.5H.5v.031H0v.938h.5zm1.406 0h.938v-1h-.938zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938zm3.75 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.469v-.031h.5V7.53h-.5V7.5h-.469v.031H15v.938h.031zM0 9.406v.938h1v-.938zm16 .938v-.938h-1v.938zm-16 .937v.938h1v-.938zm16 .938v-.938h-1v.938zm-16 .937v.938h1v-.938zm16 .938v-.938h-1v.938zM0 16h.969v-.5H1v-.469H.969V15H.5v.031H0zm1.906 0h.938v-1h-.938zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938zm3.75 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875-.5v.5H16v-.969h-.5V15h-.469v.031H15v.469z" />
-                    </svg>
-                </label>
-                <input type="radio" class="btn-check" name="gridType-{{ uid }}" value="fullGrid"
-                    id="type-full-{{ uid }}" data-gridtype>
-                <label for="type-full-{{ 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" fill="currentColor"
-                        class="bi bi-border-all" viewBox="0 0 16 16">
-                        <path d="M0 0h16v16H0zm1 1v6.5h6.5V1zm7.5 0v6.5H15V1zM15 8.5H8.5V15H15zM7.5 15V8.5H1V15z" />
-                    </svg>
-                </label>
+                    <span class="badge text-bg-secondary" data-fill-opacity-val>100%</span>
+                </button>
+                <ul class="dropdown-menu p-2">
+                    <li>
+                        <div class="small text-secondary mb-1">Fill Opacity</div>
+                        <input type="range" min="0" max="1" step="0.01" value="1" data-fill-opacity
+                            class="form-range w-100">
+                    </li>
+                </ul>
             </div>
-            <div class="vr mx-1"></div>
-            <div class="btn-group">
-                <button type="button"
-                    class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center"
-                    data-export>
+
+            <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-download" viewBox="0 0 16 16">
+                        class="bi bi-dash-square-dotted" viewBox="0 0 16 16">
                         <path
-                            d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
-                        <path
-                            d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z" />
+                            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>
-                <input type="file" data-import accept="application/json" class="d-none">
-                <button type="button"
-                    class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center"
-                    data-import-button>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                        class="bi bi-upload" viewBox="0 0 16 16">
-                        <path
-                            d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
-                        <path
-                            d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z" />
-                    </svg>
-                </button>
-                <button type="button"
-                    class="btn btn-sm btn-danger border d-inline-flex align-items-center justify-content-center"
-                    data-clear>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                        class="bi bi-x-lg" viewBox="0 0 16 16">
-                        <path
-                            d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z" />
+                <ul class="dropdown-menu p-2">
+                    <li>
+                        <div class="small text-secondary mb-1">Stroke Opacity</div>
+                        <input type="range" min="0" max="1" step="0.01" value="1" data-stroke-opacity
+                            class="form-range w-100">
+                    </li>
+                </ul>
+            </div>
+
+            <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 p-2">
+                    <li>
+                        <div class="small text-secondary mb-1">Stroke Width</div>
+                        <input type="range" min="0" max="1" step="0.01" value="0.12" data-stroke-width
+                            class="form-range w-100">
+                    </li>
+                </ul>
             </div>
         </div>
-        <div class="grid-wrap" data-grid-wrap>
-            <span class="position-absolute p-0 m-0 d-none dot" data-dot>
-                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" data-dot-svg>
-                    <circle cx="16" cy="16" r="4" fill="black" />
+        <div class="vr mx-1"></div>
+        <input type="color" class="form-control form-control-sm form-control-color" data-color>
+        <div class="vr mx-1"></div>
+        <div class="btn-group">
+            <input type="radio" class="btn-check" value="pen" name="tool-{{ uid }}" id="tool-pen-{{ uid }}" data-tool
+                checked>
+            <label for="tool-pen-{{ 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" fill="currentColor" class="bi bi-pen"
+                    viewBox="0 0 16 16">
+                    <path
+                        d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001m-.644.766a.5.5 0 0 0-.707 0L1.95 11.756l-.764 3.057 3.057-.764L14.44 3.854a.5.5 0 0 0 0-.708z" />
                 </svg>
-            </span>
-            <div class="position-relative overflow-hidden grid" data-grid>
-                <div class="border border-black position-absolute d-none bg-warning-subtle px-1 py-0 user-select-none coords"
-                    data-coords></div>
-                <canvas class="position-absolute w-100 h-100" data-canvas></canvas>
-            </div>
+            </label>
+
+            <input type="radio" class="btn-check" value="outline" name="tool-{{ uid }}" id="tool-outline-{{ uid }}"
+                data-tool>
+            <label for="tool-outline-{{ 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" fill="currentColor" class="bi bi-square"
+                    viewBox="0 0 16 16">
+                    <path
+                        d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" />
+                </svg>
+            </label>
+
+            <input type="radio" class="btn-check" value="filled" name="tool-{{ uid }}" id="tool-filled-{{ uid }}"
+                data-tool>
+            <label for="tool-filled-{{ 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" fill="currentColor"
+                    class="bi bi-square-fill" viewBox="0 0 16 16">
+                    <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2z" />
+                </svg>
+            </label>
+
+            <input type="radio" class="btn-check" value="outlineEllipse" name="tool-{{ uid }}"
+                id="tool-outline-ellipse-{{ uid }}" data-tool>
+            <label for="tool-outline-ellipse-{{ 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" fill="currentColor" class="bi bi-circle"
+                    viewBox="0 0 16 16">
+                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
+                </svg>
+            </label>
+
+            <input type="radio" class="btn-check" value="filledEllipse" name="tool-{{ uid }}"
+                id="tool-filled-ellipse-{{ uid }}" data-tool>
+            <label for="tool-filled-ellipse-{{ 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" fill="currentColor"
+                    class="bi bi-circle-fill" viewBox="0 0 16 16">
+                    <circle cx="8" cy="8" r="8" />
+                </svg>
+            </label>
+
+            <input type="radio" class="btn-check" value="line" name="tool-{{ uid }}" id="tool-line-{{ uid }}" 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" id="type-no-grid-{{ uid }}"
+                data-gridtype checked>
+            <label for="type-no-grid-{{ 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" fill="currentColor" class="bi bi-border"
+                    viewBox="0 0 16 16">
+                    <path
+                        d="M0 0h.969v.5H1v.469H.969V1H.5V.969H0zm2.844 1h-.938V0h.938zm1.875 0H3.78V0h.938v1zm1.875 0h-.938V0h.938zm.937 0V.969H7.5V.5h.031V0h.938v.5H8.5v.469h-.031V1zm2.813 0h-.938V0h.938zm1.875 0h-.938V0h.938zm1.875 0h-.938V0h.938zM15.5 1h-.469V.969H15V.5h.031V0H16v.969h-.5zM1 1.906v.938H0v-.938zm6.5.938v-.938h1v.938zm7.5 0v-.938h1v.938zM1 3.78v.938H0V3.78zm6.5.938V3.78h1v.938zm7.5 0V3.78h1v.938zM1 5.656v.938H0v-.938zm6.5.938v-.938h1v.938zm7.5 0v-.938h1v.938zM.969 8.5H.5v-.031H0V7.53h.5V7.5h.469v.031H1v.938H.969zm1.875 0h-.938v-1h.938zm1.875 0H3.78v-1h.938v1zm1.875 0h-.938v-1h.938zm1.875-.031V8.5H7.53v-.031H7.5V7.53h.031V7.5h.938v.031H8.5v.938zm1.875.031h-.938v-1h.938zm1.875 0h-.938v-1h.938zm1.875 0h-.938v-1h.938zm1.406 0h-.469v-.031H15V7.53h.031V7.5h.469v.031h.5v.938h-.5zM0 10.344v-.938h1v.938zm7.5 0v-.938h1v.938zm8.5-.938v.938h-1v-.938zM0 12.22v-.938h1v.938zm7.5 0v-.938h1v.938zm8.5-.938v.938h-1v-.938zM0 14.094v-.938h1v.938zm7.5 0v-.938h1v.938zm8.5-.938v.938h-1v-.938zM.969 16H0v-.969h.5V15h.469v.031H1v.469H.969zm1.875 0h-.938v-1h.938zm1.875 0H3.78v-1h.938v1zm1.875 0h-.938v-1h.938zm.937 0v-.5H7.5v-.469h.031V15h.938v.031H8.5v.469h-.031v.5zm2.813 0h-.938v-1h.938zm1.875 0h-.938v-1h.938zm1.875 0h-.938v-1h.938zm.937 0v-.5H15v-.469h.031V15h.469v.031h.5V16z" />
+                </svg>
+            </label>
+            <input type="radio" class="btn-check" name="gridType-{{ uid }}" value="horizontalGrid"
+                id="type-horizontal-{{ uid }}" data-gridtype>
+            <label for="type-horizontal-{{ 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" fill="currentColor"
+                    class="bi bi-border-center" viewBox="0 0 16 16">
+                    <path
+                        d="M.969 0H0v.969h.5V1h.469V.969H1V.5H.969zm.937 1h.938V0h-.938zm1.875 0h.938V0H3.78v1zm1.875 0h.938V0h-.938zM7.531.969V1h.938V.969H8.5V.5h-.031V0H7.53v.5H7.5v.469zM9.406 1h.938V0h-.938zm1.875 0h.938V0h-.938zm1.875 0h.938V0h-.938zm1.875 0h.469V.969h.5V0h-.969v.5H15v.469h.031zM1 2.844v-.938H0v.938zm6.5-.938v.938h1v-.938zm7.5 0v.938h1v-.938zM1 4.719V3.78H0v.938h1zm6.5-.938v.938h1V3.78h-1zm7.5 0v.938h1V3.78h-1zM1 6.594v-.938H0v.938zm6.5-.938v.938h1v-.938zm7.5 0v.938h1v-.938zM0 8.5v-1h16v1zm0 .906v.938h1v-.938zm7.5 0v.938h1v-.938zm8.5.938v-.938h-1v.938zm-16 .937v.938h1v-.938zm7.5 0v.938h1v-.938zm8.5.938v-.938h-1v.938zm-16 .937v.938h1v-.938zm7.5 0v.938h1v-.938zm8.5.938v-.938h-1v.938zM0 16h.969v-.5H1v-.469H.969V15H.5v.031H0zm1.906 0h.938v-1h-.938zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938zm1.875-.5v.5h.938v-.5H8.5v-.469h-.031V15H7.53v.031H7.5v.469zm1.875.5h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875-.5v.5H16v-.969h-.5V15h-.469v.031H15v.469z" />
+                </svg>
+            </label>
+            <input type="radio" class="btn-check" name="gridType-{{ uid }}" value="verticalGrid"
+                id="type-vertical-{{ uid }}" data-gridtype>
+            <label for="type-vertical-{{ 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" fill="currentColor"
+                    class="bi bi-border-middle" viewBox="0 0 16 16">
+                    <path
+                        d="M.969 0H0v.969h.5V1h.469V.969H1V.5H.969zm.937 1h.938V0h-.938zm1.875 0h.938V0H3.78v1zm1.875 0h.938V0h-.938zM8.5 16h-1V0h1zm.906-15h.938V0h-.938zm1.875 0h.938V0h-.938zm1.875 0h.938V0h-.938zm1.875 0h.469V.969h.5V0h-.969v.5H15v.469h.031zM1 2.844v-.938H0v.938zm14-.938v.938h1v-.938zM1 4.719V3.78H0v.938h1zm14-.938v.938h1V3.78h-1zM1 6.594v-.938H0v.938zm14-.938v.938h1v-.938zM.5 8.5h.469v-.031H1V7.53H.969V7.5H.5v.031H0v.938h.5zm1.406 0h.938v-1h-.938zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938zm3.75 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.469v-.031h.5V7.53h-.5V7.5h-.469v.031H15v.938h.031zM0 9.406v.938h1v-.938zm16 .938v-.938h-1v.938zm-16 .937v.938h1v-.938zm16 .938v-.938h-1v.938zm-16 .937v.938h1v-.938zm16 .938v-.938h-1v.938zM0 16h.969v-.5H1v-.469H.969V15H.5v.031H0zm1.906 0h.938v-1h-.938zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938zm3.75 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875-.5v.5H16v-.969h-.5V15h-.469v.031H15v.469z" />
+                </svg>
+            </label>
+            <input type="radio" class="btn-check" name="gridType-{{ uid }}" value="fullGrid" id="type-full-{{ uid }}"
+                data-gridtype>
+            <label for="type-full-{{ 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" fill="currentColor"
+                    class="bi bi-border-all" viewBox="0 0 16 16">
+                    <path d="M0 0h16v16H0zm1 1v6.5h6.5V1zm7.5 0v6.5H15V1zM15 8.5H8.5V15H15zM7.5 15V8.5H1V15z" />
+                </svg>
+            </label>
+        </div>
+        <div class="vr mx-1"></div>
+        <div class="btn-group">
+            <button type="button"
+                class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center" data-export>
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                    class="bi bi-download" viewBox="0 0 16 16">
+                    <path
+                        d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
+                    <path
+                        d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z" />
+                </svg>
+            </button>
+            <input type="file" data-import accept="application/json" class="d-none">
+            <button type="button"
+                class="btn btn-sm btn-light border d-inline-flex align-items-center justify-content-center"
+                data-import-button>
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-upload"
+                    viewBox="0 0 16 16">
+                    <path
+                        d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
+                    <path
+                        d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z" />
+                </svg>
+            </button>
+            <button type="button"
+                class="btn btn-sm btn-danger border d-inline-flex align-items-center justify-content-center" data-clear>
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
+                    viewBox="0 0 16 16">
+                    <path
+                        d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z" />
+                </svg>
+            </button>
+        </div>
+    </div>
+    <div class="grid-wrap" data-grid-wrap>
+        <span class="position-absolute p-0 m-0 d-none dot" data-dot>
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" data-dot-svg>
+                <circle cx="16" cy="16" r="4" fill="black" />
+            </svg>
+        </span>
+        <div class="position-relative overflow-hidden grid" data-grid>
+            <div class="border border-black position-absolute d-none bg-warning-subtle px-1 py-0 user-select-none coords"
+                data-coords></div>
+            <canvas class="position-absolute w-100 h-100" data-canvas></canvas>
         </div>
     </div>
 </div>
diff --git a/inventory/templates/testing.html b/inventory/templates/testing.html
index 9786d6d..2e8736f 100644
--- a/inventory/templates/testing.html
+++ b/inventory/templates/testing.html
@@ -7,9 +7,9 @@
 {% endblock %}
 
 {% block main %}
-{{ draw.drawWidget('test') }}
+{{ draw.drawWidget('test1') }}
 {% endblock %}
 
 {% block scriptincludes %}
 <script src="{{ url_for('static', filename='js/components/draw.js') }}"></script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file