diff --git a/src/components/canvas/SelectionBox.tsx b/src/components/canvas/SelectionBox.tsx
index ad764d6..c5540d3 100644
--- a/src/components/canvas/SelectionBox.tsx
+++ b/src/components/canvas/SelectionBox.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useRef } from "react";
 import { useApp } from "@pixi/react";
 import { DashLineShader, SmoothGraphics } from "@pixi/graphics-smooth";
@@ -21,12 +22,30 @@ function SelectionBox({ selection, coords, scale, isDark }: Props) {
 		graphics.clear();
 		graphics.lineStyle({ width: 1, color: isDark ? 0xffffff : 0x000000, shader });
 
-		selection.forEach(([x, y]) => {
-			const rectX = x * 16 * scale;
-			const rectY = y * 16 * scale;
+		const edges = new Set<string>();
 
-			graphics.drawRect(rectX, rectY, 16 * scale, 16 * scale);
-			// todo: remove lines on adjacent rectangles
+		selection.forEach(([x, y]) => {
+			const top = [x, y, x + 1, y];
+			const bottom = [x, y + 1, x + 1, y + 1];
+			const left = [x, y, x, y + 1];
+			const right = [x + 1, y, x + 1, y + 1];
+
+			// Add edges, or remove them if they already exist (shared edges)
+			[top, bottom, left, right].forEach((edge) => {
+				const stringified = JSON.stringify(edge);
+				if (edges.has(stringified)) {
+					edges.delete(stringified); // Shared edge, remove it
+				} else {
+					edges.add(stringified); // Unique edge, add it
+				}
+			});
+		});
+
+		// Draw the remaining edges
+		edges.forEach((edge) => {
+			const [x1, y1, x2, y2] = JSON.parse(edge);
+			graphics.moveTo(x1 * 16 * scale, y1 * 16 * scale);
+			graphics.lineTo(x2 * 16 * scale, y2 * 16 * scale);
 		});
 	};