diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 48f30f5b..bac1122d 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -1419,6 +1419,10 @@ div.task-fs-initimage {
     display: none;
     position: absolute;
 }
+div.task-fs-initimage img {
+    max-height: 70vH;
+    max-width: 70vW;
+}
 div.task-initimg:hover div.task-fs-initimage {
     display: block;
     position: absolute;
@@ -1434,9 +1438,13 @@ div.top-right {
     right: 8px;
 }
 
+button.useForControlnetBtn {
+    margin-top: 6px;
+}
+
 #small_image_warning {
-     font-size: smaller;
-     color: var(--status-orange);
+    font-size: smaller;
+    color: var(--status-orange);
 }
 
 button#save-system-settings-btn {
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 162ea3be..69224dbc 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -1217,6 +1217,27 @@ async function onTaskStart(task) {
 
 /* Hover effect for the init image in the task list */
 function createInitImageHover(taskEntry) {
+    taskEntry.querySelectorAll(".task-initimg").forEach( thumb => {
+        let thumbimg = thumb.querySelector("img")
+        let img = createElement("img", {src: thumbimg.src})
+        thumb.querySelector(".task-fs-initimage").appendChild(img)
+        let div = createElement("div", undefined, ["top-right"])
+        div.innerHTML = `
+            <button class="useAsInputBtn">Use as Input</button>
+            <br>
+            <button class="useForControlnetBtn">Use for Controlnet</button>`
+        div.querySelector(".useAsInputBtn").addEventListener("click", e => {
+            e.preventDefault()
+            onUseAsInputClick(null, img)
+        })
+        div.querySelector(".useForControlnetBtn").addEventListener("click", e => {
+            e.preventDefault()
+            controlImagePreview.src = img.src
+        })
+        thumb.querySelector(".task-fs-initimage").appendChild(div)
+    })
+    return
+
     var $tooltip = $(taskEntry.querySelector(".task-fs-initimage"))
     var img = document.createElement("img")
     img.src = taskEntry.querySelector("div.task-initimg > img").src
@@ -1281,6 +1302,11 @@ function createTask(task) {
         let w = ((task.reqBody.width * h) / task.reqBody.height) >> 0
         taskConfig += `<div class="task-initimg" style="float:left;"><img style="width:${w}px;height:${h}px;" src="${task.reqBody.init_image}"><div class="task-fs-initimage"></div></div>`
     }
+    if (task.reqBody.control_image !== undefined) {
+        let h = 80
+        let w = ((task.reqBody.width * h) / task.reqBody.height) >> 0
+        taskConfig += `<div class="task-initimg" style="float:left;"><img style="width:${w}px;height:${h}px;" src="${task.reqBody.control_image}"><div class="task-fs-initimage"></div></div>`
+    }
 
     taskConfig += `<div class="taskConfigData">${createTaskConfig(task)}</span></div></div>`
 
@@ -1331,7 +1357,7 @@ function createTask(task) {
         startY = e.target.closest(".imageTaskContainer").offsetTop
     })
 
-    if (task.reqBody.init_image !== undefined) {
+    if (task.reqBody.init_image !== undefined || task.reqBody.control_image !== undefined) {
         createInitImageHover(taskEntry)
     }