diff --git a/Website/apiConnector.js b/Website/apiConnector.js
index f8b27b7..64b9047 100644
--- a/Website/apiConnector.js
+++ b/Website/apiConnector.js
@@ -176,4 +176,9 @@ function UpdateLunaSea(lunaseaWebhook){
 function RemoveJob(jobId){
     var uri = `${apiUri}/Jobs?jobId=${jobId}`;
     DeleteData(uri);
+}
+
+function CancelJob(jobId){
+    var uri = `${apiUri}/Jobs/Cancel?jobId=${jobId}`;
+    PostData(uri);
 }
\ No newline at end of file
diff --git a/Website/index.html b/Website/index.html
index d72d2f6..cbe69c1 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -101,9 +101,10 @@
             </publication-description>
             <publication-interactions>
               <publication-starttask id="startJobButton">Start Job ▶️</publication-starttask>
-              <publication-delete id="deleteJobButton">Delete Job ❌</publication-delete>
+              <publication-canceltask id="cancelJobButton">Cancel Job ❌</publication-canceltask>
+              <publication-delete id="deleteJobButton">Delete Job 🗑️</publication-delete>
               <publication-add id="createMonitorJobButton">Monitor ➕</publication-add>
-              <publication-add id="createDownloadChapterJobButton">Download Chapter ➕</publication-add>
+              <publication-add id="createDownloadChapterJobButton">Download Chapter 📥</publication-add>
             </publication-interactions>
           </publication-information>
         </publication-viewer>
diff --git a/Website/interaction.js b/Website/interaction.js
index 10b6953..6cc3604 100644
--- a/Website/interaction.js
+++ b/Website/interaction.js
@@ -11,6 +11,7 @@ const tasksContent = document.querySelector("content");
 const createMonitorTaskButton = document.querySelector("#createMonitoJobButton");
 const createDownloadChapterTaskButton = document.querySelector("#createDownloadChapterJobButton");
 const startJobButton = document.querySelector("#startJobButton");
+const cancelJobButton = document.querySelector("#cancelJobButton");
 const deleteJobButton = document.querySelector("#deleteJobButton");
 const mangaViewerPopup = document.querySelector("#publicationViewerPopup");
 const mangaViewerWindow = document.querySelector("publication-viewer");
@@ -137,6 +138,10 @@ startJobButton.addEventListener("click", () => {
   StartJob(selectedJob.id);
   mangaViewerPopup.style.display = "none";
 });
+cancelJobButton.addEventListener("click", () => {
+  CancelJob(selectedJob.id);
+  mangaViewerPopup.style.display = "none";
+});
 deleteJobButton.addEventListener("click", () => {
   RemoveJob(selectedJob.id);
   UpdateJobs();
@@ -172,12 +177,14 @@ function ShowMangaWindow(job, manga, event, add){
     if(add){
         createMonitorJobButton.style.display = "initial";
         createDownloadChapterJobButton.style.display = "initial";
+        cancelJobButton.style.display = "none";
         startJobButton.style.display = "none";
         deleteJobButton.style.display = "none";
     }
     else{
         createMonitorJobButton.style.display = "none";
         createDownloadChapterJobButton.style.display = "none";
+        cancelJobButton.style.display = "initial";
         startJobButton.style.display = "initial";
         deleteJobButton.style.display = "initial";
     }
diff --git a/Website/style.css b/Website/style.css
index 0387f84..b1ce7d6 100644
--- a/Website/style.css
+++ b/Website/style.css
@@ -462,6 +462,10 @@ publication-viewer publication-information publication-interactions publication-
     color: red;
 }
 
+publication-view publication-information publication-interactions publication-canceltask {
+  color: yellow;
+}
+
 publication-viewer publication-information publication-interactions publication-add {
     color: limegreen;
 }