diff --git a/TableturfBattleClient/src/CardButton.ts b/TableturfBattleClient/src/CardButton.ts
index b4058b6..95f52c3 100644
--- a/TableturfBattleClient/src/CardButton.ts
+++ b/TableturfBattleClient/src/CardButton.ts
@@ -16,24 +16,10 @@ class CardButton extends CheckButton {
 
 		this.card = card;
 
-		let size = 0;
-		let table = document.createElement('table');
-		table.classList.add('cardGrid');
-		for (var y = 0; y < 8; y++) {
-			let tr = document.createElement('tr');
-			table.appendChild(tr);
-			for (var x = 0; x < 8; x++) {
-				let td = document.createElement('td');
-				if (card.grid[x][y] == Space.Ink1) {
-					size++;
-					td.classList.add('ink');
-				} else if (card.grid[x][y] == Space.SpecialInactive1) {
-					size++;
-					td.classList.add('special');
-				}
-				tr.appendChild(td);
-			}
-		}
+		const gridSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+		gridSvg.classList.add('cardGrid');
+		gridSvg.setAttribute('viewBox', '0 0 800 800');
+		CardDisplay.CreateSvgCardGrid(card, gridSvg);
 
 		if (card.imageUrl) {
 			const bgDiv = document.createElement('div');
@@ -56,7 +42,7 @@ class CardButton extends CheckButton {
 		el2.innerText = card.name;
 		row.appendChild(el2);
 
-		button.appendChild(table);
+		button.appendChild(gridSvg);
 
 		row = document.createElement('div');
 		row.className = 'cardFooter';
@@ -65,7 +51,7 @@ class CardButton extends CheckButton {
 
 		el2 = document.createElement('div');
 		el2.classList.add('cardSize');
-		el2.innerText = size.toString();
+		el2.innerText = card.size.toString();
 		row.appendChild(el2);
 
 		el2 = document.createElement('div');
diff --git a/TableturfBattleClient/src/CardDisplay.ts b/TableturfBattleClient/src/CardDisplay.ts
index 9cc8931..1b828e1 100644
--- a/TableturfBattleClient/src/CardDisplay.ts
+++ b/TableturfBattleClient/src/CardDisplay.ts
@@ -47,38 +47,7 @@ class CardDisplay {
 		g.setAttribute('transform', 'translate(380 604) rotate(6.5) scale(0.283)');
 		svg.appendChild(g);
 
-		let size = 0;
-		for (var y = 0; y < 8; y++) {
-			for (var x = 0; x < 8; x++) {
-				if (card.grid[x][y] == Space.Empty) {
-					const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-					rect.classList.add('empty');
-					rect.setAttribute('x', (100 * x + 3).toString());
-					rect.setAttribute('y', (100 * y + 3).toString());
-					rect.setAttribute('width', '94');
-					rect.setAttribute('height', '94');
-					g.appendChild(rect);
-				} else {
-					const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-					const elements: Element[] = [ rect ];
-
-					size++;
-					rect.classList.add(card.grid[x][y] == Space.SpecialInactive1 ? 'special' : 'ink');
-
-					const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-					image.setAttribute('href', card.grid[x][y] == Space.SpecialInactive1 ? 'assets/SpecialOverlay.png' : 'assets/InkOverlay.png');
-					elements.push(image);
-
-					for (const el of elements) {
-						el.setAttribute('x', (100 * x).toString());
-						el.setAttribute('y', (100 * y).toString());
-						el.setAttribute('width', '100');
-						el.setAttribute('height', '100');
-						g.appendChild(el);
-					}
-				}
-			}
-		}
+		CardDisplay.CreateSvgCardGrid(card, g);
 
 		// Name
 		const text1 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
@@ -139,7 +108,7 @@ class CardDisplay {
 
 		// Size
 		svg.insertAdjacentHTML('beforeend', `<image href='assets/external/Game Assets/CardCost_0${card.rarity}.png' width='80' height='80' transform='translate(12 798) rotate(-45) scale(1.33)'/>`);
-		svg.insertAdjacentHTML('beforeend', `<text fill='white' stroke='${card.rarity == Rarity.Common ? '#482BB4' : card.rarity == Rarity.Rare ? '#8B7E25' : '#481EF9'}' paint-order='stroke' stroke-width='5' font-size='48' y='816' x='87'>${size}</text>`);
+		svg.insertAdjacentHTML('beforeend', `<text fill='white' stroke='${card.rarity == Rarity.Common ? '#482BB4' : card.rarity == Rarity.Rare ? '#8B7E25' : '#481EF9'}' paint-order='stroke' stroke-width='5' font-size='48' y='816' x='87'>${card.size}</text>`);
 
 		// Special cost
 		const g2 = document.createElementNS('http://www.w3.org/2000/svg', 'g');
@@ -162,4 +131,35 @@ class CardDisplay {
 
 		this.card = card;
 	}
+
+	static CreateSvgCardGrid(card: Card, parent: SVGElement) {
+		for (var y = 0; y < 8; y++) {
+			for (var x = 0; x < 8; x++) {
+				if (card.grid[x][y] == Space.Empty) {
+					const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+					rect.classList.add('empty');
+					rect.setAttribute('x', (100 * x + 3).toString());
+					rect.setAttribute('y', (100 * y + 3).toString());
+					rect.setAttribute('width', '94');
+					rect.setAttribute('height', '94');
+					parent.appendChild(rect);
+				} else {
+					const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+					rect.classList.add(card.grid[x][y] == Space.SpecialInactive1 ? 'special' : 'ink');
+					const elements: Element[] = [rect];
+					const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+					image.setAttribute('href', card.grid[x][y] == Space.SpecialInactive1 ? 'assets/SpecialOverlay.png' : 'assets/InkOverlay.png');
+					elements.push(image);
+
+					for (const el of elements) {
+						el.setAttribute('x', (100 * x).toString());
+						el.setAttribute('y', (100 * y).toString());
+						el.setAttribute('width', '100');
+						el.setAttribute('height', '100');
+						parent.appendChild(el);
+					}
+				}
+			}
+		}
+	}
 }
diff --git a/TableturfBattleClient/src/StageButton.ts b/TableturfBattleClient/src/StageButton.ts
index 77f94b6..adb87db 100644
--- a/TableturfBattleClient/src/StageButton.ts
+++ b/TableturfBattleClient/src/StageButton.ts
@@ -2,8 +2,8 @@ class StageButton extends CheckButton {
 	private static idNumber = 0;
 
 	readonly stage: Stage;
-	readonly cells: HTMLTableCellElement[][];
-	private readonly startCells: HTMLTableCellElement[] = [ ];
+	readonly cells: (SVGRectElement | null)[][];
+	private readonly startCells: [SVGRectElement, SVGImageElement][] = [ ];
 
 	constructor(stage: Stage) {
 		let button = document.createElement('button');
@@ -11,66 +11,65 @@ class StageButton extends CheckButton {
 		button.classList.add('stage');
 		super(button);
 
+		const gridSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+		gridSvg.classList.add('stageGrid');
+		gridSvg.setAttribute('viewBox', `0 0 ${stage.grid.length * 100} 3000`);
+
+		const offset = (3000 - stage.grid[0].length * 100) / 2;
+
 		this.stage = stage;
 
-		let cols: HTMLTableCellElement[][] = [ ];
-		for (let x = 0; x < stage.grid.length; x++) {
+		const cols = [ ];
+		for (var x = 0; x < stage.grid.length; x++) {
 			let col = [ ];
-			for (let y = 0; y < stage.grid[x].length; y++) {
-				let td = document.createElement('td');
-				if (stage.grid[x][y] == Space.OutOfBounds)
-					td.classList.add('OutOfBounds');
-				else
-					td.classList.add('Empty');
-				col.push(td);
+			for (var y = 0; y < stage.grid[x].length; y++) {
+				if (stage.grid[x][y] == Space.Empty) {
+					const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+					rect.classList.add('empty');
+					rect.setAttribute('x', (100 * x).toString());
+					rect.setAttribute('y', (100 * y + offset).toString());
+					rect.setAttribute('width', '100');
+					rect.setAttribute('height', '100');
+					gridSvg.appendChild(rect);
+					col.push(rect);
+				} else
+					col.push(null);
 			}
 			cols.push(col);
 		}
 		this.cells = cols;
 
-		let table = document.createElement('table');
-		table.classList.add('stageGrid');
-		for (let y = 0; y < stage.grid[0].length; y++) {
-			let tr = document.createElement('tr');
-			table.appendChild(tr);
-			for (let x = 0; x < stage.grid.length; x++) {
-				tr.appendChild(cols[x][y]);
-			}
-		}
-
-		let row = document.createElement('div');
-		row.className = 'stageHeader';
-		button.appendChild(row);
-
-		let el2 = document.createElement('div');
-		el2.classList.add('stageName');
-		el2.innerText = stage.name;
-		row.appendChild(el2);
-
-		row = document.createElement('div');
-		row.className = 'stageBody';
-		button.appendChild(row);
-		row.appendChild(table);
+		let el = document.createElement('div');
+		el.classList.add('stageName');
+		el.innerText = stage.name;
+		button.appendChild(el);
+		button.appendChild(gridSvg);
 
 		StageButton.idNumber++;
 	}
 
 	setStartSpaces(numPlayers: number) {
-		for (const td of this.startCells) {
-			td.classList.remove('Start1');
-			td.classList.remove('Start2');
-			td.classList.remove('Start3');
-			td.classList.remove('Start4');
-			td.classList.add('Empty');
+		for (const el of this.startCells) {
+			el[0].setAttribute('class', 'empty');
+			el[1].parentElement!.removeChild(el[1]);
 		}
 		this.startCells.splice(0);
 
 		const startSpaces = this.stage.getStartSpaces(numPlayers);
 		for (let i = 0; i < numPlayers; i++) {
-			const td = this.cells[startSpaces[i].x][startSpaces[i].y];
-			td.classList.remove('Empty');
-			td.classList.add(`Start${i + 1}`);
-			this.startCells.push(td);
+			const space = startSpaces[i];
+			const cell = this.cells[space.x][space.y]!;
+			cell.classList.add(`start${i + 1}`);
+
+			const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+			image.setAttribute('href', 'assets/SpecialOverlay.png');
+			image.setAttribute('x', cell.getAttribute('x')!);
+			image.setAttribute('y', cell.getAttribute('y')!);
+			image.setAttribute('width', cell.getAttribute('width')!);
+			image.setAttribute('height', cell.getAttribute('height')!);
+			cell.parentElement!.appendChild(image);
+
+			this.startCells.push([cell, image]);
 		}
 	}
 }
diff --git a/TableturfBattleClient/tableturf.css b/TableturfBattleClient/tableturf.css
index e041ee5..cfdd859 100644
--- a/TableturfBattleClient/tableturf.css
+++ b/TableturfBattleClient/tableturf.css
@@ -318,11 +318,10 @@ dialog::backdrop {
 	box-sizing: border-box;
 }
 
-.stageGrid td.Empty { outline: 1px solid grey; outline-offset: -1px; }
-.stageGrid td.Start1 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-1); }
-.stageGrid td.Start2 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-2); }
-.stageGrid td.Start3 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-3); }
-.stageGrid td.Start4 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-4); }
+.stageGrid rect.start1 { fill: var(--special-colour-1); }
+.stageGrid rect.start2 { fill: var(--special-colour-2); }
+.stageGrid rect.start3 { fill: var(--special-colour-3); }
+.stageGrid rect.start4 { fill: var(--special-colour-4); }
 
 :is(.stage, .stageRandom):is(:hover, :focus-within):not(.checked, .disabled)::before {
 	content: '';
@@ -480,16 +479,9 @@ dialog::backdrop {
 	position: relative;
 	margin: 0 auto;
 	border-spacing: 0;
+	width: 12ex;
+	display: block;
 }
-.cardGrid td {
-	width: 1.2ex;
-	height: 1.2ex;
-	outline: 1px solid #80808080;
-	outline-offset: -1px;
-}
-.cardGrid td { background: #00000080; }
-.cardGrid td.ink { background: url('assets/InkOverlay.png') center/cover, var(--player-primary-colour); outline: none; }
-.cardGrid td.special { background: url('assets/SpecialOverlay.png') center/cover, var(--player-special-colour); outline: none; }
 
 .cardFooter {
 	position: relative;
@@ -570,6 +562,10 @@ rect.empty {
 	stroke: #60606080;
 	stroke-width: 6;
 }
+.stageGrid rect.empty {
+	stroke: grey;
+	stroke-width: 12;
+}
 
 rect.ink {
 	fill: var(--player-primary-colour);