diff --git a/frontend/src/api/fetch.tsx b/frontend/src/api/fetch.tsx
index 780d26b3..2dbd7e2b 100644
--- a/frontend/src/api/fetch.tsx
+++ b/frontend/src/api/fetch.tsx
@@ -36,3 +36,12 @@ export async function queryDownloadTask(taskID: string): Promise<DownloadTask> {
   const res = await fetchURL(`/api/download/${taskID}`, {});
   return await res.json();
 }
+
+export async function cancelDownloadTask(taskID: string): Promise<void> {
+  const res = await fetchURL(`/api/download/${taskID}`, {
+    method: "DELETE",
+  });
+  if (!res.ok) {
+    throw new Error("Failed to cancel download task");
+  }
+}
diff --git a/frontend/src/components/prompts/Fetch.vue b/frontend/src/components/prompts/Fetch.vue
index cf4bbdc0..8174ad80 100644
--- a/frontend/src/components/prompts/Fetch.vue
+++ b/frontend/src/components/prompts/Fetch.vue
@@ -32,7 +32,7 @@
     <div class="card-action">
       <button
         class="button button--flat button--grey"
-        @click="layoutStore.closeHovers"
+        @click="cancel"
         :aria-label="t('buttons.cancel')"
         :title="t('buttons.cancel')"
         tabindex="4"
@@ -45,12 +45,14 @@
         :title="t('buttons.create')"
         @click="submit"
         tabindex="3"
-        :disabled="isDownloading"
       >
         {{ t("buttons.create") }}
       </button>
     </div>
-    <div v-if="isDownloading || isFailed" class="material-progress-container">
+    <div
+      v-if="isDownloading || isFailed || isCanceled"
+      class="material-progress-container"
+    >
       <div
         class="material-progress-bar"
         id="downloadProgress"
@@ -58,7 +60,7 @@
       ></div>
       <div
         class="material-progress-label"
-        :style="{ color: isFailed ? '#ff4757' : '' }"
+        :style="{ color: isFailed || isCanceled ? '#ff4757' : '' }"
       >
         {{ Math.floor(currentTask.progress * 100) + "%" }}
       </div>
@@ -110,6 +112,9 @@ const isDownloading = computed(() => {
 const isFailed = computed(() => {
   return currentTask.status === "error";
 });
+const isCanceled = computed(() => {
+  return currentTask.status === "canceled";
+});
 
 watch(fetchUrl, (value) => {
   try {
@@ -120,6 +125,21 @@ watch(fetchUrl, (value) => {
   } catch (e) {}
 });
 
+const cancel = async () => {
+  if (!isDownloading.value) {
+    layoutStore.closeHovers();
+    taskID.value = "";
+    return;
+  }
+  try {
+    await api.cancelDownloadTask(taskID.value);
+  } catch (e) {
+    if (e instanceof Error) {
+      $showError(e);
+    }
+  }
+};
+
 const submit = async (event: Event) => {
   event.preventDefault();
   if (