diff --git a/source/js/background.js b/source/js/background.js
index 884fdce..af4f4d6 100644
--- a/source/js/background.js
+++ b/source/js/background.js
@@ -57,6 +57,10 @@ function processMessages(request, sender) {
 				syncLocalTasks(resolve, reject);
 				break;
 			}
+			case 'deleteTask': {
+				deleteTask(resolve, reject, request.taskId);
+				break;
+			}
 			case 'getErrorMessage': {
 				resolve(await getErrorMessage());
 				break;
@@ -235,6 +239,34 @@ async function syncLocalTasks(resolve, reject) {
 	});
 }
 
+async function deleteTask(resolve, reject, taskId) {
+	console.log('API: DELETE TASK');
+	chrome.identity.getAuthToken({ interactive: true }, async accessToken => {
+		if (accessToken == undefined) {
+			reject(new Error(LOGIN_FAILED));
+			return;
+		}
+		fetch(`${API_ENDPOINT}/${taskId}?` + new URLSearchParams({ access_token: accessToken }), {
+			method: 'DELETE',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+		})
+			.then(getJsonOrError)
+			.then(async deleteOp => {
+				if(deleteOp.deleted){
+					const storage = await optionsStorage.getAll();
+					delete storage.archivedUrls[taskId];
+					await optionsStorage.set(storage);
+					resolve(storage.archivedUrls);
+					return;
+				}
+				throw new Error(`Could not delete archive task.`);
+			})
+			.catch(e => reject(e));
+	});
+}
+
 async function getJsonOrError(response) {
 	let additionalErrorInfo = "";
 	if (response.status == 401) additionalErrorInfo = `Check that this email has been granted permission.`;
diff --git a/source/vue/Popup.vue b/source/vue/Popup.vue
index a263106..e7d067f 100644
--- a/source/vue/Popup.vue
+++ b/source/vue/Popup.vue
@@ -27,7 +27,7 @@
             </tr>
         </thead>
         <tbody>
-            <TaskItem v-for="t in displayTasks" :key="t.id" :initial-task="t" taskType="local" />
+            <TaskItem v-for="t in displayTasks" :key="t.id" :initial-task="t" taskType="local" @remove="deleteTask" />
             <TaskItem v-for="t in onlineTasks" :key="t.id" :initial-task="t" taskType="online" />
         </tbody>
     </table>
@@ -140,6 +140,12 @@ export default {
         addTask: function (task) {
             this.tasks[task.id] = task;
         },
+        deleteTask: async function (taskId) {
+            const tasksAfterDelete = await this.callBackground({ action: "deleteTask", taskId });
+            if (tasksAfterDelete === null) return;
+            this.tasks = tasksAfterDelete;
+            M.toast({ html: `archive task deleted`, classes: "green accent-4" });
+        },
         searchTasks: function () {
             console.log(`searching tasks? ${!this.isSearchingOnline}`);
             if (this.isSearchingOnline) {
diff --git a/source/vue/TaskItem.vue b/source/vue/TaskItem.vue
index e638cbb..265fdf0 100644
--- a/source/vue/TaskItem.vue
+++ b/source/vue/TaskItem.vue
@@ -67,6 +67,9 @@ export default {
 				});
 			}.bind(this), 2500);
 		},
+		deleteTask: function () {
+			this.$emit('remove', this.task.id);
+		},
 		taskFinished: function (task) {
 			return task.status == 'SUCCESS' || task.status == 'FAILURE' || task.status == 'REVOKED';
 		},