diff --git a/assets/web/app.js b/assets/web/app.js
index 12c13a7..ff46a02 100644
--- a/assets/web/app.js
+++ b/assets/web/app.js
@@ -42,36 +42,31 @@ function init() {
     document.body.onmouseup = onMoveableDivMouseUp;
 
     let mapBackground = document.getElementById('map-background');
-    updateGridCanvas(mapBackground.width, mapBackground.height, 1.0);
+    updateGridCanvas(mapBackground.width, mapBackground.height);
 }
 
-function updateGridCanvas(width, height, lineWidth) {
+function updateGridCanvas(width, height) {
     // Draw the grid on the grid thing
-    let canvas = document.getElementById('map-grid');
-    canvas.width = width;
-    canvas.height = height;
-    let ctx = canvas.getContext('2d');
-    ctx.reset();
-    if (!showGrid) { return; }
-    ctx.lineWidth = lineWidth ?? 1.0;
+    let svg = document.getElementById('map-grid');
     let lineDashTypes = [
         [0.1, 0.8, 0.1, 0.0],
         [0, 0.1, 0.1, 0.6, 0.1, 0.1],
         [0, 0.1, 0.3, 0.2, 0.3, 0.1],
         [0.1, 0.8, 0.1],
-    ]
-    ctx.setLineDash(lineDashTypes[gridDashType].map(i => GRID_SIZE * i));
-    ctx.beginPath();
+    ];
+    svg.setAttribute('width', width);
+    svg.setAttribute('height', height);
+    svg.innerHTML = '';
+    svg.setAttribute('stroke', 'black');
+    svg.setAttribute('stroke-width', '15');
+    svg.setAttribute('stroke-dash-array', lineDashTypes[gridDashType].join(' '))
+    
     let i = 0;
     while (i < Math.max(width, height)) {
         i += GRID_SIZE;
-        ctx.moveTo(i, 0);
-        ctx.lineTo(i, width);
-        ctx.moveTo(0, i);
-        ctx.lineTo(height, i);
+        svg.innerHTML += `<line x1="0" x2="${width}" y1="${i}" y2="${i}" />`;
+        svg.innerHTML += `<line x1="${i}" x2="${i}" y1="0" y2="${height}" />`;
     }
-    ctx.closePath();
-    ctx.stroke();
 }
 
 tavern.onlogin = (s) => {
@@ -168,6 +163,9 @@ tavern.onshowscene = (show) => {
     // Remove existing tokens
     Array.from(map.children).filter(c => c.classList.contains('token')).forEach(c => map.removeChild(c));
 
+    let background = document.getElementById('map-background');
+    background.src = show.background ?? '';
+    updateGridCanvas(background.width, background.height);
     for (let token of show.tokens) {
         tavern.onspawntoken(token);
     }
@@ -183,11 +181,9 @@ function onLoginClick() {
 }
 function onGameViewScroll(event) {
     let map = document.getElementById('map');
-    let mapBackground = document.getElementById('map-background');
     mapScale += (event.wheelDelta / 1800.0);
     if (mapScale < 0.1) { mapScale = 0.1; }
     map.style.transform = `scale(${mapScale})`;
-    updateGridCanvas(mapBackground.width, mapBackground.height, 1.0 / mapScale);
 }
 function onGameMouseMove(event) {
     if (event.buttons == 2) {
diff --git a/assets/web/index.html b/assets/web/index.html
index a53b985..a809f5e 100644
--- a/assets/web/index.html
+++ b/assets/web/index.html
@@ -64,9 +64,8 @@
                 <button style="background-color: #ffffd6;" onclick="showHideDiv('initiative-tracker')"><b>i</b></button>
             </div>
             <div id="map" style="position:absolute; transform-origin: top left; user-select: none;">
-                <img id="map-background" src="https://rustystriker.dev/molly.jpg" height="200%">
-                <canvas style="position: absolute; top: 0px; left: 0px;" id="map-grid" width="1000"
-                    height="1000"></canvas>
+                <img id="map-background" src="https://rustystriker.dev/molly.jpg">
+                <svg id="map-grid" xmlns="http://www.w3.org/2000/svg" vector-effect="non-scaling-stroke" style="position: absolute; top: 0px; left: 0px"></svg>
             </div>
         </div>
     </div>