diff --git a/css/ui/tool/dream.css b/css/ui/tool/dream.css
index 784ed59..b0ac86e 100644
--- a/css/ui/tool/dream.css
+++ b/css/ui/tool/dream.css
@@ -1,3 +1,3 @@
-.dream-interrupt-btn {
+.dream-stop-btn {
 	width: 100px;
 }
diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js
index bc96c3d..5bf1baf 100644
--- a/js/ui/tool/dream.js
+++ b/js/ui/tool/dream.js
@@ -129,10 +129,35 @@ const _generate = async (
 	if (generationAreas.has(areaid)) return;
 	generationAreas.add(areaid);
 
+	// Makes an element in a location
+	const makeElement = (type, x, y) => {
+		const el = document.createElement(type);
+		el.style.position = "absolute";
+		el.style.left = `${x - imageCollection.inputOffset.x}px`;
+		el.style.top = `${y - imageCollection.inputOffset.y}px`;
+
+		// We can use the input element to add interactible html elements in the world
+		imageCollection.inputElement.appendChild(el);
+
+		return el;
+	};
+
 	// Await for queue
+	let cancelled = false;
 	const waitQueue = async () => {
 		const stopQueueMarchingAnts = march(bb, {style: "#AAF"});
 
+		// Add cancel Button
+		const cancelButton = makeElement("button", bb.x + bb.w - 100, bb.y + bb.h);
+		cancelButton.classList.add("dream-stop-btn");
+		cancelButton.textContent = "Cancel";
+		cancelButton.addEventListener("click", () => {
+			cancelled = true;
+			imageCollection.inputElement.removeChild(cancelButton);
+			stopQueueMarchingAnts();
+		});
+		imageCollection.inputElement.appendChild(cancelButton);
+
 		let qPromise = null;
 		let qResolve = null;
 		await new Promise((finish) => {
@@ -151,8 +176,10 @@ const _generate = async (
 				finish();
 			}
 		});
-
-		stopQueueMarchingAnts();
+		if (!cancelled) {
+			imageCollection.inputElement.removeChild(cancelButton);
+			stopQueueMarchingAnts();
+		}
 
 		return {promise: qPromise, resolve: qResolve};
 	};
@@ -167,30 +194,22 @@ const _generate = async (
 
 	const initialQ = await waitQueue();
 
+	if (cancelled) {
+		nextQueue(initialQ);
+		return;
+	}
+
 	// Images to select through
 	let at = 0;
 	/** @type {Array<string|null>} */
 	const images = [null];
 	/** @type {HTMLDivElement} */
 	let imageSelectMenu = null;
-
 	// Layer for the images
 	const layer = imageCollection.registerLayer(null, {
 		after: maskPaintLayer,
 	});
 
-	const makeElement = (type, x, y) => {
-		const el = document.createElement(type);
-		el.style.position = "absolute";
-		el.style.left = `${x - imageCollection.inputOffset.x}px`;
-		el.style.top = `${y - imageCollection.inputOffset.y}px`;
-
-		// We can use the input element to add interactible html elements in the world
-		imageCollection.inputElement.appendChild(el);
-
-		return el;
-	};
-
 	const redraw = (url = images[at]) => {
 		if (url === null)
 			layer.ctx.clearRect(0, 0, layer.canvas.width, layer.canvas.height);
@@ -216,7 +235,7 @@ const _generate = async (
 
 	// Add Interrupt Button
 	const interruptButton = makeElement("button", bb.x + bb.w - 100, bb.y + bb.h);
-	interruptButton.classList.add("dream-interrupt-btn");
+	interruptButton.classList.add("dream-stop-btn");
 	interruptButton.textContent = "Interrupt";
 	interruptButton.addEventListener("click", () => {
 		fetch(`${host}${url}interrupt`, {method: "POST"});