diff --git a/minetest_biome_voronoi.html b/minetest_biome_voronoi.html
index edb25f8..a27b047 100644
--- a/minetest_biome_voronoi.html
+++ b/minetest_biome_voronoi.html
@@ -8,14 +8,49 @@
 		border: 1px solid black;
 	}
 </style>
+<!-- Voronoi diagram API -->
 <script src="./rhill-voronoi-core.js"></script>
 </head>
 <body>
 <h1>Minetest Biome Point Visualizer</h1>
-<!-- TODO: Add proper fallback by listing the voronoi points -->
+<div>
+<!-- TODO: Add proper canvas browser fallback by listing the voronoi points -->
 <canvas id="voronoiCanvas" width="900" height="900">
 A voronoi diagram is supposed to be here but for some reason it cannot be displayed.
 </canvas> 
+</div>
+<div>
+<form id="biomeForm">
+	<label>Biomes:<br>
+		<select id="biomeSelector" name="biomeList" size="16" multiple>
+		<option>Biome 1</option>
+		</select>
+	</label>
+	<br>
+	<button>Add</button>
+	<button>Remove</button>
+	<br>
+	<div>
+	<label>Heat:
+		<input id="inputHeat" type="number" value="50"></input>
+	</label>
+	<label>Humidity:
+		<input id="inputHumidity" type="number" value="50"></input>
+	</label>
+
+	<br>
+
+	<label>Min. Y:
+		<input id="minY" type="number" value="-31000"></input>
+	</label>
+	<label>Max. Y:
+		<input id="maxY" type="number" value="31000"></input>
+	</label>
+	</div>
+</form>
+<div>
+
+
 <script>
 "use strict";
 let biomePoints = [
@@ -26,6 +61,45 @@ let biomePoints = [
 	{ heat: 100, humidity: 100 },
 	{ heat: 100, humidity: 5 },
 ];
+
+// FOREST-16 palette, plus black
+const pointColor = "#913636";
+const edgeColor = "#0f2c2e";
+const gridColor = "#00000040";
+const axisColor = "#000000";
+const cellColors = [
+	"#64988e",
+	"#3d7085",
+	"#345644",
+	"#6b7f5c",
+	"#b0b17c",
+	"#e1c584",
+	"#c89660",
+	"#ad5f52",
+	"#692f11",
+	"#89542f",
+	"#796e63",
+	"#a17d5e",
+	"#b4a18f",
+	"#ecddba",
+];
+const fallbackCellColor = "#ecddba";
+
+// define an array and randomize it
+function shuffleArray(values) {
+	let index = values.length, randomIndex;
+	// While there remain elements to shuffle
+	while (index != 0) {
+		// Pick a remaining element.
+		randomIndex = Math.floor(Math.random() * index);
+		index--; // And swap it with the current element.
+		[values[index], values[randomIndex]] = [values[randomIndex], values[index]];
+	}
+	return values;
+}
+let colors = shuffleArray(cellColors);
+
+// DEBUG: Random points
 biomePoints = [];
 for (let i=0; i<10; i++) {
 	biomePoints.push({
@@ -54,7 +128,7 @@ const GRID_STEP = 10
 
 function putGrid(context) {
 	context.lineWidth = 0.5;
-	context.strokeStyle = "#00000040"
+	context.strokeStyle = gridColor;
 	for (let x=-LIMIT; x<=LIMIT; x+=GRID_STEP) {
 		context.beginPath();
 		context.moveTo(x, -LIMIT);
@@ -76,12 +150,14 @@ function putAxes(context) {
 	context.beginPath();
 	context.moveTo(-LIMIT,0)
 	context.lineTo(LIMIT,0)
+	context.closePath();
 	context.stroke();
 
 	// humidity axis ()
 	context.beginPath();
 	context.moveTo(0,-LIMIT)
 	context.lineTo(0,LIMIT)
+	context.closePath();
 	context.stroke();
 }
 
@@ -91,12 +167,6 @@ function draw() {
 	let context = canvas.getContext("2d")
 	context.translate(voronoiCanvas.width/2, voronoiCanvas.height/2);
 	context.scale(voronoiCanvas.width/300, voronoiCanvas.height/300);
-	//putAxes(context);
-	//putGrid(context);
-	context.fillStyle = "#ef0000";
-	for (let p of biomePoints) {
-		putPoint(context, p)
-	}
 	let voronoi = new Voronoi();
 	let vbbox = {xl: -LIMIT, xr: LIMIT, yt: -LIMIT, yb: LIMIT};
 	let sites = []
@@ -104,14 +174,48 @@ function draw() {
 		sites.push(biomePointToVoronoiPoint(p));
 	}
 	let diagram = voronoi.compute(sites, vbbox);
-	context.strokeStyle = "#009f00";
+
+	for (let c=0; c<diagram.cells.length; c++) {
+		let cell = diagram.cells[c]
+		if (c <= colors.length) {
+			context.fillStyle = colors[c];
+		} else {
+			context.fillStyle = fallbackColor;
+		}
+		context.beginPath();
+		for (let h=0; h<cell.halfedges.length; h++) {
+			let halfedge = cell.halfedges[h]
+			let start = halfedge.getStartpoint()
+			let end = halfedge.getEndpoint()
+			if (h === 0) {
+				context.moveTo(start.x, start.y);
+			} else {
+				context.lineTo(start.x, start.y);
+			}
+			context.lineTo(end.x, end.y);
+		}
+		context.closePath();
+		context.fill();
+	}
+
+	putAxes(context);
+	putGrid(context);
+
+	context.strokeStyle = edgeColor;
 	for (let e=0; e<diagram.edges.length; e++) {
 		let edge = diagram.edges[e];
 		context.beginPath();
 		context.moveTo(edge.va.x, edge.va.y);
 		context.lineTo(edge.vb.x, edge.vb.y);
+		context.closePath();
 		context.stroke();
 	}
+
+	context.fillStyle = pointColor;
+	for (let p of biomePoints) {
+		putPoint(context, p)
+	}
+
 }
 window.addEventListener("load", draw);
 </script>
