diff --git a/src/components/rundetail.vue b/src/components/rundetail.vue
index b3e3d80..15584e3 100644
--- a/src/components/rundetail.vue
+++ b/src/components/rundetail.vue
@@ -43,6 +43,11 @@
                     </div>
                   </div>
                 </div>
+                <button
+                  class="button is-danger"
+                  v-if="run.phase == 'queued'"
+                  @click="cancelRun(run.id)"
+                >Cancel</button>
                 <button
                   class="button is-danger"
                   v-if="run.phase == 'running'"
@@ -94,7 +99,7 @@
 </template>
 
 <script>
-import { stopRun, restartRun } from "@/util/data.js";
+import { cancelRun, stopRun, restartRun } from "@/util/data.js";
 
 export default {
   name: "RunDetail",
@@ -141,6 +146,7 @@ export default {
       return "unknown";
     },
     stopRun: stopRun,
+    cancelRun: cancelRun,
     restartRun(runid, fromStart) {
       this.dropdownActive = false;
       restartRun(runid, fromStart);
diff --git a/src/util/data.js b/src/util/data.js
index 74f1ac4..28053ba 100644
--- a/src/util/data.js
+++ b/src/util/data.js
@@ -170,6 +170,17 @@ export async function restartRun(runid, fromStart) {
     return await fetch(apiurl(path), init)
 }
 
+export async function cancelRun(runid) {
+    let path = "/runs/" + runid + "/actions"
+    let init = {
+        method: "PUT",
+        body: JSON.stringify({
+            action_type: "cancel"
+        })
+    }
+    return await fetch(apiurl(path), init)
+}
+
 export async function stopRun(runid) {
     let path = "/runs/" + runid + "/actions"
     let init = {