diff --git a/src/components/task.css b/src/components/task.css
index d759e7a..5f92175 100644
--- a/src/components/task.css
+++ b/src/components/task.css
@@ -1,3 +1,7 @@
+.task {
+    position: relative;
+}
+
 .task-cm > .cm-mountpoint {
     padding: 0;
 }
@@ -33,6 +37,11 @@
     margin-right: 0 !important;
 }
 
+.floating-task-action {
+    position: absolute;
+    transform: translateX(-18px) scale(0.8);
+}
+
 .task-action:hover {
     color: var(--foreground-color);
 }
diff --git a/src/components/task.jsx b/src/components/task.jsx
index 85eded8..51176bb 100644
--- a/src/components/task.jsx
+++ b/src/components/task.jsx
@@ -82,7 +82,7 @@ export default function Task( { task, initialFocus, onFocusChange } ) {
     const deffered = (task.start && new Date(task.start) > today);
 
     return (
-        <div className="task" ref={wrapperRef}>
+        <div className="task group" ref={wrapperRef}>
             <DateModal
                 initialDate={task.schedule ? new Date(task.schedule) : null}
                 onDate={(d) => {
@@ -107,6 +107,22 @@ export default function Task( { task, initialFocus, onFocusChange } ) {
                 }}
                 onClose={() => setDeferOpen(false)}
                 ref={deferRef} />
+
+            <div className={`task-action cursor-pointer floating-task-action ${hasFocus ? "opacity-1" : "opacity-0" } group-hover:opacity-100 transition-opacity` }
+                 style={{cursor: "pointer !important", zIndex: 100000}}
+                    onClick={() => {
+                        // TODO completing tasks is a bit of a thing so
+                        // TODO supporting repeating tasks, etc.
+                        dispatch(edit({id: task.id, completed: !task.completed}));
+                        setHasFocus(false);
+                    }}
+            >
+                <i className={task.completed ? "task-action fa-solid fa-circle-check" : "task-action fa-solid fa-check" } style={{transform: "translateY(-4px)"}} />
+            </div>
+
+            <div className="h-full w-[25px] absolute translate-x-[-25px] opacity-0 pointer-events-none"> </div>
+
+            
             <div className={"task-cm"+(task.start && deffered ? " deferred" : "")+(task.completed ? " completed" : "")+(dueSoon && !overdue ? " due-soon" : "")+(overdue ? " overdue" : "")}>
                 <Editor
                     strike={task.completed}
@@ -120,16 +136,6 @@ export default function Task( { task, initialFocus, onFocusChange } ) {
                 />
 
                 <animated.div className={"task-actions"} style={{...springs}}>
-                    <div className="task-action" data-tooltip-id={hasFocus? "rootp" : "notp"}  data-tooltip-content={task.completed ? strings.TOOLTIPS.UNCOMPLETE : strings.TOOLTIPS.COMPLETE} data-tooltip-place={"bottom"}
-                         onClick={() => {
-                             // TODO completing tasks is a bit of a thing so
-                             // TODO supporting repeating tasks, etc.
-                             dispatch(edit({id: task.id, completed: !task.completed}));
-                             setHasFocus(false);
-                         }}
-                    >
-                        <i className={task.completed ? "task-action fa-solid fa-circle-check" : "task-action fa-solid fa-check" } style={{transform: "translateY(0.5px)"}} />
-                    </div>
                     <div className={"task-action pr-5" + (scheduleOpen ? " accent": "")}
                          onClick={() => setScheduleOpen(true)}
                          data-tooltip-id={hasFocus? "rootp" : "notp"}