diff --git a/frontend/src/components/reminders/ReminderItem.tsx b/frontend/src/components/reminders/ReminderItem.tsx
index 93b5473..dac840f 100644
--- a/frontend/src/components/reminders/ReminderItem.tsx
+++ b/frontend/src/components/reminders/ReminderItem.tsx
@@ -146,21 +146,28 @@ export default function ReminderItem({ reminder, onEdit }: ReminderItemProps) {
         <Pencil className="h-3 w-3" />
       </Button>
 
-      <Button
-        variant="ghost"
-        size="icon"
-        aria-label={confirmingDelete ? 'Confirm delete' : 'Delete reminder'}
-        onClick={handleDelete}
-        disabled={deleteMutation.isPending}
-        className={cn(
-          'h-7 w-7 shrink-0',
-          confirmingDelete
-            ? 'bg-destructive/20 text-destructive'
-            : 'hover:bg-destructive/10 hover:text-destructive'
-        )}
-      >
-        <Trash2 className="h-3 w-3" />
-      </Button>
+      {confirmingDelete ? (
+        <Button
+          variant="ghost"
+          aria-label="Confirm delete"
+          onClick={handleDelete}
+          disabled={deleteMutation.isPending}
+          className="h-7 shrink-0 px-2 bg-destructive/20 text-destructive text-[11px] font-medium"
+        >
+          Sure?
+        </Button>
+      ) : (
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="Delete reminder"
+          onClick={handleDelete}
+          disabled={deleteMutation.isPending}
+          className="h-7 w-7 shrink-0 hover:bg-destructive/10 hover:text-destructive"
+        >
+          <Trash2 className="h-3 w-3" />
+        </Button>
+      )}
     </div>
   );
 }
diff --git a/frontend/src/components/todos/TodoItem.tsx b/frontend/src/components/todos/TodoItem.tsx
index e31946a..bccdcf8 100644
--- a/frontend/src/components/todos/TodoItem.tsx
+++ b/frontend/src/components/todos/TodoItem.tsx
@@ -176,21 +176,28 @@ export default function TodoItem({ todo, onEdit }: TodoItemProps) {
       <Button variant="ghost" size="icon" onClick={() => onEdit(todo)} className="h-7 w-7 shrink-0" aria-label="Edit todo">
         <Pencil className="h-3 w-3" />
       </Button>
-      <Button
-        variant="ghost"
-        size="icon"
-        aria-label={confirmingDelete ? 'Confirm delete' : 'Delete todo'}
-        onClick={handleDelete}
-        disabled={deleteMutation.isPending}
-        className={cn(
-          'h-7 w-7 shrink-0',
-          confirmingDelete
-            ? 'bg-destructive/20 text-destructive'
-            : 'hover:bg-destructive/10 hover:text-destructive'
-        )}
-      >
-        <Trash2 className="h-3 w-3" />
-      </Button>
+      {confirmingDelete ? (
+        <Button
+          variant="ghost"
+          aria-label="Confirm delete"
+          onClick={handleDelete}
+          disabled={deleteMutation.isPending}
+          className="h-7 shrink-0 px-2 bg-destructive/20 text-destructive text-[11px] font-medium"
+        >
+          Sure?
+        </Button>
+      ) : (
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="Delete todo"
+          onClick={handleDelete}
+          disabled={deleteMutation.isPending}
+          className="h-7 w-7 shrink-0 hover:bg-destructive/10 hover:text-destructive"
+        >
+          <Trash2 className="h-3 w-3" />
+        </Button>
+      )}
     </div>
   );
 }