diff --git a/assets/image.svg b/assets/image.svg
new file mode 100644
index 000000000..02520b83a
--- /dev/null
+++ b/assets/image.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
\ No newline at end of file
diff --git a/src/lib/draw/Toolbox.svelte b/src/lib/draw/Toolbox.svelte
index fa9da0e9a..d26465d37 100644
--- a/src/lib/draw/Toolbox.svelte
+++ b/src/lib/draw/Toolbox.svelte
@@ -2,6 +2,7 @@
   import { SecondaryButton } from "lib/govuk";
   import { mode, pointTool, polygonTool, routeTool } from "stores";
   import type { Schema } from "types";
+  import imageIcon from "../../../assets/image.svg";
   import pointIcon from "../../../assets/point.svg";
   import polygonFreehandIcon from "../../../assets/polygon_freehand.svg";
   import polygonSnappedIcon from "../../../assets/polygon_snapped.svg";
@@ -52,8 +53,9 @@
       Split route
     </SecondaryButton>
   {/if}
-  <SecondaryButton on:click={() => mode.set({ mode: "new-image" })}>
-    New image
+  <SecondaryButton on:click={() => mode.set({ mode: "set-image" })}>
+    <img src={imageIcon} alt="Set image" />
+    Set image
   </SecondaryButton>
   <SecondaryButton on:click={() => mode.set({ mode: "streetview" })}>
     <img src={streetViewIcon} alt="StreetView" />
diff --git a/src/lib/draw/image/ImageLayer.svelte b/src/lib/draw/image/ImageLayer.svelte
index a3ad15800..1be54844a 100644
--- a/src/lib/draw/image/ImageLayer.svelte
+++ b/src/lib/draw/image/ImageLayer.svelte
@@ -1,7 +1,4 @@
 <script lang="ts">
-  // TODO This should just be part of InterventionLayer? treat it like a
-  // feature? could even base64 encode the bytes to embed it, at risk of
-  // blowing up local storage?
   import { map } from "stores";
   import { Marker } from "svelte-maplibre";
   import { imgSrc, opacity, rotate, scale } from "./stores";
@@ -9,6 +6,8 @@
   let lngLat = $map.getCenter().toArray();
 
   $: style = `transform: rotate(${$rotate}deg); opacity: ${$opacity / 100.0}`;
+
+  // TODO draggable isn't reactive
 </script>
 
 {#if $imgSrc}
diff --git a/src/lib/draw/image/ImageMode.svelte b/src/lib/draw/image/ImageMode.svelte
index 5e254fa4e..e344a92dd 100644
--- a/src/lib/draw/image/ImageMode.svelte
+++ b/src/lib/draw/image/ImageMode.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { FormElement, SecondaryButton } from "lib/govuk";
+  import {
+    ButtonGroup,
+    FormElement,
+    SecondaryButton,
+    WarningButton,
+  } from "lib/govuk";
   import { mode } from "stores";
   import { imgSrc, opacity, rotate, scale } from "./stores";
 
@@ -8,14 +13,26 @@
   async function fileLoaded(e: Event) {
     let buffer = await fileInput.files![0].arrayBuffer();
     // TODO Detect image type
-    let blob = new Blob([new Uint8Array(buffer)], { type: "image/png" } );
+    let blob = new Blob([new Uint8Array(buffer)], { type: "image/png" });
     $imgSrc = URL.createObjectURL(blob);
   }
+
+  function deleteImage() {
+    $imgSrc = null;
+    $scale = 1.0;
+    $rotate = 0.0;
+    $opacity = 100;
+  }
 </script>
 
-<SecondaryButton on:click={() => mode.set({ mode: "list" })}>
-  Cancel
-</SecondaryButton>
+<ButtonGroup>
+  <SecondaryButton on:click={() => mode.set({ mode: "list" })}>
+    Back
+  </SecondaryButton>
+  <WarningButton on:click={deleteImage} disabled={!$imgSrc}>
+    Delete
+  </WarningButton>
+</ButtonGroup>
 
 <FormElement label="Load an image" id="load-image">
   <input
@@ -36,15 +53,20 @@
   </div>
   <div>
     <label>
-      Rotation (degrees)
-      <input type="number" bind:value={$rotate} />
+      <input type="range" min="0" max="360" bind:value={$rotate} />
+      Rotation: {$rotate} degrees
     </label>
   </div>
 
   <div>
     <label>
       <input type="range" min="0" max="100" bind:value={$opacity} />
-      Opacity
+      Opacity: {$opacity}%
     </label>
   </div>
 {/if}
+
+<p>
+  Note this image isn't saved as part of this scheme. When you close this page,
+  it'll be lost.
+</p>
diff --git a/src/lib/sidebar/LeftSidebar.svelte b/src/lib/sidebar/LeftSidebar.svelte
index b9f1e046a..2097f3f42 100644
--- a/src/lib/sidebar/LeftSidebar.svelte
+++ b/src/lib/sidebar/LeftSidebar.svelte
@@ -79,8 +79,8 @@ toolbox, but that gets created and destroyed frequently. -->
       to cancel
     </li>
   </ul>
-{:else if $mode.mode == "new-image"}
-  <h2>New image</h2>
+{:else if $mode.mode == "set-image"}
+  <h2>Set image</h2>
   <ImageMode />
 {:else if $mode.mode == "streetview"}
   <h2>StreetView</h2>
diff --git a/src/pages/SketchSchemes.svelte b/src/pages/SketchSchemes.svelte
index 475e3f7ec..f19fd45c1 100644
--- a/src/pages/SketchSchemes.svelte
+++ b/src/pages/SketchSchemes.svelte
@@ -112,12 +112,11 @@
       <Geocoder position="bottom-left" />
       <BoundaryLayer {boundaryGeojson} />
       <InterventionLayer {schema} />
+      <ImageLayer />
       {#if $mode.mode == "list"}
         <Toolbox {schema} />
       {:else if $mode.mode == "split-route"}
         <SplitRouteMode />
-      {:else if $mode.mode == "new-image"}
-        <ImageLayer />
       {/if}
     </MapLibreMap>
   </div>
diff --git a/src/types.ts b/src/types.ts
index 704779558..28494e4c7 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -146,5 +146,5 @@ export type Mode =
   | { mode: "new-snapped-polygon" }
   | { mode: "new-route" }
   | { mode: "split-route" }
-  | { mode: "new-image" }
+  | { mode: "set-image" }
   | { mode: "streetview" };