diff --git a/controller/sync_controller.go b/controller/sync_controller.go
index bfcc9a2..7561733 100644
--- a/controller/sync_controller.go
+++ b/controller/sync_controller.go
@@ -12,6 +12,9 @@ func HandleSync(ctx *gin.Context) {
 	if ctx.Request.FormValue("retry") != "" {
 		handleRetry(ctx)
 		return
+	} else if ctx.Request.FormValue("cancel") != "" {
+		handleCancel(ctx)
+		return
 	}
 
 	sourceServer := ctx.PostForm("source_server")
@@ -47,6 +50,21 @@ func HandleSync(ctx *gin.Context) {
 	ctx.HTML(200, "sync_success.html", creds)
 }
 
+func handleCancel(ctx *gin.Context) {
+	id := ctx.Request.FormValue("cancel")
+
+	val, err := strconv.Atoi(id)
+	if err != nil {
+		log.Errorf("Error converting %s to int", id)
+	}
+
+	task := internal.GetTaskFromID(val)
+
+	internal.CancelTask(task)
+
+	log.Infof("%#v", task)
+}
+
 func handleRetry(ctx *gin.Context) {
 	id := ctx.Request.FormValue("retry")
 
diff --git a/internal/cancel.go b/internal/cancel.go
new file mode 100644
index 0000000..ea8782a
--- /dev/null
+++ b/internal/cancel.go
@@ -0,0 +1,12 @@
+package internal
+
+func CancelTask(task *Task) {
+	if task.Status != "In Progress" {
+		updateTaskStatus(task, "Cancelled")
+		log.Debug(len(taskChan))
+		_ = <-taskChan
+		log.Debug(len(taskChan))
+		return
+	}
+
+}
diff --git a/internal/sync_loop.go b/internal/sync_loop.go
index c59c7c3..3e51cee 100644
--- a/internal/sync_loop.go
+++ b/internal/sync_loop.go
@@ -16,8 +16,8 @@ func processPendingTasks() {
 			continue
 		}
 
-		syncIMAP(task)
-		// simulateTask(task)
+		// syncIMAP(task)
+		simulateTask(task)
 		time.Sleep(100 * time.Millisecond)
 	}
 }
diff --git a/templates/index.html b/templates/index.html
index 9825843..b6c3015 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -111,6 +111,10 @@ <h2 class="text-2xl font-semibold mb-4">Destination Details</h2>
         </div>
     </form>
 
+    <div class="modal w-screen" id="detailsmodal" :class="model_open ? 'visible opacity-100' : '' ">
+        {{ template "log_window.html"}}
+    </div>
+    
     <!-- Log output -->
     <div class="container mx-auto flex px-4" x-show='source_validated && destination_validated'>
         <div class="w-full bg-backgroundSecondary p-4 shadow-md border border-border rounded-lg">
@@ -209,10 +213,9 @@ <h2 class="text-2xl font-semibold">User queue</h2>
         toggleDark.addEventListener("click", darkMode, false);
         toggleLight.addEventListener("click", lightMode, false);
 
-
-
         document.addEventListener('alpine:init', () => {
             Alpine.data('data', () => ({
+                model_open: '',
                 source_server: '',
                 source_account: '',
                 destination_server: '',
@@ -220,11 +223,19 @@ <h2 class="text-2xl font-semibold">User queue</h2>
 
                 source_validated: false,
                 destination_validated: false,
+
                 showQueue(){
                     if (this.source_validated === true && this.destination_validated === true) {
                         htmx.ajax('POST', "/api/search?exact=true&source_server="+this.source_server+"&source_account="+this.source_account+"&destination_server="+this.destination_server+"&destination_account="+this.destination_account+"", {target:'#table-body',swap:'innerHTML'})
                     }
                 },
+
+                init() {
+                    setInterval(() => {
+                        this.showQueue();
+                    }, 2000);
+                },
+
                 update_source_status(result) {
                     this.source_validated = result;
                     this.showQueue();
@@ -233,9 +244,13 @@ <h2 class="text-2xl font-semibold">User queue</h2>
                     this.destination_validated = result;
                     this.showQueue();
                 },
-            }))
+            }
+            
+            ))
+
         })
 
+
     </script>
 
 </body>
\ No newline at end of file
diff --git a/templates/table.html b/templates/table.html
index 85cc82c..161485a 100644
--- a/templates/table.html
+++ b/templates/table.html
@@ -10,6 +10,6 @@
     </tr>
 </thead>
 <tbody id="table-body" hx-boost="true" hx-get="/api/queue?page={{if .Index}}{{.Index}}{{else}}1{{end}}"
-    hx-swap="innerHTML transition:true" hx-trigger="every 60s">
+    hx-swap="innerHTML transition:true" hx-trigger="every 2s">
     {{template "tbody.html" .}}
 </tbody>
\ No newline at end of file
diff --git a/templates/tbody.html b/templates/tbody.html
index 264e6f9..84513f4 100644
--- a/templates/tbody.html
+++ b/templates/tbody.html
@@ -1,31 +1,56 @@
 {{range .Tasks}}
 <tr>
-    <th>{{.ID}}</th>
-    <td>{{.SourceServer}}</td>
-    <td>{{.SourceAccount}}</td>
-    <td>{{.DestinationServer}}</td>
-    <td>{{.DestinationAccount}}</td>
-    <td>
-        {{if eq .Status "Done"}}
-        <span class="badge badge-outline-success">{{.Status}}</span>
-        {{else if eq .Status "Error" "Cancelled" }}
-        <span class="badge badge-outline-error">{{.Status}}</span>
-        {{else}}
-        <span class="badge badge-outline-warning">{{.Status}}</span>
-        {{end}}
-    </td>
-    <td>
-        {{if (eq .Status "Done" "Error" "Cancelled")}}
-        <div class="btn-group btn-group-rounded btn-group-scrollable">
-            <label hx-get="/api/details?id={{.ID}}" hx-target="#detailsmodal" hx-swap="innerHTML" hx-trigger="click"
-                class="btn btn-solid-primary" for="modal-details">Details</label>
-            <input class="modal-state" id="modal-details" type="checkbox" x-model="model_open" />
-            <button hx-get="/api/sync?retry={{.ID}}" hx-target="#error-notification" hx-swap="outerHTML"
-                class="btn btn-solid-warning">Retry</button>
-        </div>
-        {{else}}
-        <button class="btn btn-solid-error btn-rounded" hx-trigger="none">Cancel</button>
-        {{end}}
-    </td>
+  <th>{{.ID}}</th>
+  <td>{{.SourceServer}}</td>
+  <td>{{.SourceAccount}}</td>
+  <td>{{.DestinationServer}}</td>
+  <td>{{.DestinationAccount}}</td>
+  <td>
+    {{if eq .Status "Done"}}
+    <span class="badge badge-outline-success">{{.Status}}</span>
+    {{else if eq .Status "Error" "Cancelled" }}
+    <span class="badge badge-outline-error">{{.Status}}</span>
+    {{else}}
+    <span class="badge badge-outline-warning">{{.Status}}</span>
+    {{end}}
+  </td>
+  <td>
+    {{if (eq .Status "Done" "Error" "Cancelled")}}
+    <div class="btn-group btn-group-rounded btn-group-scrollable">
+      <label
+        hx-get="/api/details?id={{.ID}}"
+        hx-target="#detailsmodal"
+        hx-swap="innerHTML"
+        hx-trigger="click"
+        class="btn btn-solid-primary"
+        for="modal-details"
+        >Details</label
+      >
+      <input
+        class="modal-state"
+        id="modal-details"
+        type="checkbox"
+        x-model="model_open"
+      />
+      <button
+        hx-get="/api/sync?retry={{.ID}}"
+        hx-target="#error-notification"
+        hx-swap="outerHTML"
+        class="btn btn-solid-warning"
+      >
+        Retry
+      </button>
+    </div>
+    {{else}}
+    <button
+      hx-get="/api/sync?cancel={{.ID}}"
+      hx-target="#error-notification"
+      hx-swap="outerHTML"
+      class="btn btn-solid-error btn-rounded"
+    >
+      Cancel
+    </button>
+    {{end}}
+  </td>
 </tr>
-{{end}}
\ No newline at end of file
+{{end}}