diff --git a/static/app.js b/static/app.js
index 332860d..d0d578c 100644
--- a/static/app.js
+++ b/static/app.js
@@ -300,7 +300,7 @@ function renderProjectTasks(projectId) {
       ${phases.map((phase) => {
       const pt = tasks.filter((t) => t.phase === phase);
       if (!pt.length) return "";
-      return `<div class="task-group"><div class="task-group-hd"><span class="task-group-icon"><i data-lucide="layers"></i></span><span class="task-group-label">${phase}</span><span class="task-group-n">${pt.length}</span></div><div class="task-group-list" data-phase="${phase}" ondrop="handleTaskDrop(event, ${projectId}, '${phase}')" ondragover="event.preventDefault(); event.currentTarget.classList.add('drag-over')" ondragleave="event.currentTarget.classList.remove('drag-over')">${pt.map((t) => `<div class="task-row ${t.status === 'done' ? 'task-done' : ''}" data-id="${t.id}" draggable="true" ondragstart="handleTaskDragStart(event, ${t.id})" ondragend="event.currentTarget.classList.remove('dragging')"><span class="task-dot" onclick="event.stopPropagation(); toggleTaskDone(${t.id}, ${projectId})"><i data-lucide="${t.status === 'done' ? 'check-circle' : 'circle'}"></i></span><div class="task-main" onclick="openTaskForm(${projectId}, ${t.id})"><span class="task-name">${t.task}</span>${t.notes ? `<span class="task-desc">${t.notes}</span>` : ""}${t.blockers ? `<span class="task-blocker">⚠ ${t.blockers}</span>` : ""}</div><span class="task-col">${t.owner || ""}</span><span class="task-col-badge">${t.due_date || ""}</span></div>`).join("")}</div></div>`;
+      return `<div class="task-group"><div class="task-group-hd"><span class="task-group-icon"><i data-lucide="layers"></i></span><span class="task-group-label">${phase}</span><span class="task-group-n">${pt.length}</span></div><div class="task-group-list" data-phase="${phase}" ondrop="handleTaskDrop(event, ${projectId}, '${phase}')" ondragover="event.preventDefault(); event.currentTarget.classList.add('drag-over')" ondragleave="event.currentTarget.classList.remove('drag-over')">${pt.map((t) => `<div class="task-row ${t.status === 'done' ? 'task-done' : ''}" data-id="${t.id}" draggable="true" ondragstart="handleTaskDragStart(event, ${t.id})" ondragend="event.currentTarget.classList.remove('dragging')"><span class="task-dot" onclick="event.stopPropagation(); toggleTaskDone(${t.id}, ${projectId})"><i data-lucide="${t.status === 'done' ? 'check-circle' : 'circle'}"></i></span><span class="task-grip"><i data-lucide="grip-vertical"></i></span><div class="task-main" onclick="openTaskForm(${projectId}, ${t.id})"><span class="task-name">${t.task}</span>${t.notes ? `<span class="task-desc">${t.notes}</span>` : ""}${t.blockers ? `<span class="task-blocker">⚠ ${t.blockers}</span>` : ""}</div><span class="task-col">${t.owner || ""}</span><span class="task-col-badge">${t.due_date || ""}</span></div>`).join("")}</div></div>`;
     }).join("")}
       </div>
       <div id="task-drawer-${projectId}" class="task-drawer">
diff --git a/static/styles.css b/static/styles.css
index e6f942e..816ccdd 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -554,6 +554,9 @@ td {
 .task-row:hover { background: #f8fafc; }
 .task-dot { display: flex; color: #cbd5e1; flex-shrink: 0; cursor: pointer; }
 .task-dot:hover { color: #6366f1; }
+.task-grip { display: flex; color: #cbd5e1; flex-shrink: 0; cursor: grab; }
+.task-grip:hover { color: #94a3b8; }
+.task-grip:active { cursor: grabbing; }
 .task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
 .task-name { color: #1e293b; font-size: 13px; }
 .task-desc { color: #94a3b8; font-size: 12px; word-wrap: break-word; overflow-wrap: break-word; }