diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 27e2a8a..f2d05a3 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -15,8 +15,11 @@ Aidventure is an MVP web application that helps adventure racers generate and ma
 - ✅ Complete type definitions for checklists / items (`src/types/checklist.ts`)
 - ✅ LocalStorage persistence layer with versioning + cross-tab sync
 - ✅ Zustand state management with full CRUD operations
-- ✅ Checklist UI: category grouping, add/edit/delete items, inline editing, bulk complete/reset, progress metrics (see `CHECKLIST_UI.md`)
-- ✅ Accessibility basics: keyboard flows, ARIA labels on interactive elements
+- ✅ Checklist UI: category-based organization, add/edit/delete items, inline editing, bulk complete/reset, progress metrics
+- ✅ Category labels displayed and editable from both checklist view and item edit mode
+- ✅ In-page confirmations for all delete actions (checklist and items)
+- ✅ Hover underlines on clickable checklist and item names
+- ✅ Accessibility basics: keyboard flows, ARIA labels on interactive elements, no popups for confirmations
 - ✅ Comprehensive tests for storage + state layers (Vitest + RTL)
 - ✅ Docker setup for consistent development
 
diff --git a/README.md b/README.md
index b47bb76..e7320b5 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,10 @@ Aidventure is a React-based web application designed to help adventure racers cr
 - Complete type system for checklists and items
 - LocalStorage persistence layer with cross-tab synchronization
 - Zustand state management with full CRUD operations
-- Checklist UI (category grouping, add/edit/delete items, progress, bulk actions) – see `frontend/CHECKLIST_UI.md`
+- Checklist UI with category-based organization, inline editing, and delete confirmations
+- Category labels displayed and editable from both checklist view and item scope
+- In-page confirmations for all delete actions (no popups)
+- Visual feedback with hover underlines on clickable elements
 - Comprehensive test coverage (storage + state management; UI tests upcoming)
 - Docker development environment with hot reload
 - Complete linting and formatting setup
diff --git a/frontend/src/components/ChecklistDemo.tsx b/frontend/src/components/ChecklistDemo.tsx
index 311c379..f864c35 100644
--- a/frontend/src/components/ChecklistDemo.tsx
+++ b/frontend/src/components/ChecklistDemo.tsx
@@ -32,14 +32,12 @@ export function ChecklistDemo() {
     await addItem(checklist.id, {
       name: 'Topographic maps',
       category: 'Navigation',
-      priority: 'high',
       completed: false,
     });
 
     await addItem(checklist.id, {
       name: 'Compass',
       category: 'Navigation',
-      priority: 'high',
       completed: false,
     });
 
@@ -47,7 +45,6 @@ export function ChecklistDemo() {
       name: 'Energy gels',
       category: 'Nutrition',
       quantity: 10,
-      priority: 'normal',
       completed: false,
     });
 
@@ -55,14 +52,12 @@ export function ChecklistDemo() {
       name: 'Water bottles',
       category: 'Hydration',
       quantity: 2,
-      priority: 'high',
       completed: false,
     });
 
     await addItem(checklist.id, {
       name: 'First aid kit',
       category: 'Emergency',
-      priority: 'high',
       completed: false,
     });
 
@@ -157,7 +152,6 @@ export function ChecklistDemo() {
                       </p>
                       <p className="text-sm text-gray-600">
                         {item.category}
-                        {item.priority && ` • ${item.priority}`}
                       </p>
                     </div>
                   </div>
diff --git a/frontend/src/components/checklist/AddItemForm.tsx b/frontend/src/components/checklist/AddItemForm.tsx
index 45aae89..cc2141e 100644
--- a/frontend/src/components/checklist/AddItemForm.tsx
+++ b/frontend/src/components/checklist/AddItemForm.tsx
@@ -3,17 +3,16 @@ import type { Item } from '../../types/checklist';
 
 interface AddItemFormProps {
   checklistId: string;
-  category: string;
+  category?: string; // Optional, not used but kept for backward compatibility
   onAdd: (checklistId: string, item: Omit<Item, 'id'>) => Promise<void>;
   onCancel?: () => void;
 }
 
-export function AddItemForm({ checklistId, category, onAdd, onCancel }: AddItemFormProps) {
+export function AddItemForm({ checklistId, onAdd, onCancel }: AddItemFormProps) {
   const [name, setName] = useState('');
   const [notes, setNotes] = useState('');
   const [quantity, setQuantity] = useState('1');
-  const [priority, setPriority] = useState<'high' | 'normal' | 'optional'>('normal');
-  const [selectedCategory, setSelectedCategory] = useState(category);
+  const [selectedCategory, setSelectedCategory] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -32,10 +31,9 @@ export function AddItemForm({ checklistId, category, onAdd, onCancel }: AddItemF
     try {
       await onAdd(checklistId, {
         name: name.trim(),
-        category: selectedCategory,
+        category: selectedCategory.trim() || undefined,
         notes: notes.trim() || undefined,
         quantity: quantity ? parseInt(quantity, 10) : undefined,
-        priority,
         completed: false,
       });
 
@@ -43,7 +41,7 @@ export function AddItemForm({ checklistId, category, onAdd, onCancel }: AddItemF
       setName('');
       setNotes('');
       setQuantity('1');
-      setPriority('normal');
+      setSelectedCategory('');
       inputRef.current?.focus();
     } finally {
       setIsSubmitting(false);
@@ -92,29 +90,16 @@ export function AddItemForm({ checklistId, category, onAdd, onCancel }: AddItemF
           aria-label="Notes"
         />
 
-        <div className="flex gap-2">
-          <input
-            type="number"
-            value={quantity}
-            onChange={(e) => setQuantity(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder="Quantity"
-            className="w-24 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-accent"
-            aria-label="Quantity"
-            min="1"
-          />
-
-          <select
-            value={priority}
-            onChange={(e) => setPriority(e.target.value as 'high' | 'normal' | 'optional')}
-            className="flex-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-accent"
-            aria-label="Priority"
-          >
-            <option value="high">High Priority</option>
-            <option value="normal">Normal</option>
-            <option value="optional">Optional</option>
-          </select>
-        </div>
+        <input
+          type="number"
+          value={quantity}
+          onChange={(e) => setQuantity(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Quantity"
+          className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-accent"
+          aria-label="Quantity"
+          min="1"
+        />
 
         <div className="flex gap-2">
           <button
diff --git a/frontend/src/components/checklist/ChecklistOverview.tsx b/frontend/src/components/checklist/ChecklistOverview.tsx
index 7098eb2..cb5cd8f 100644
--- a/frontend/src/components/checklist/ChecklistOverview.tsx
+++ b/frontend/src/components/checklist/ChecklistOverview.tsx
@@ -35,8 +35,8 @@ export function ChecklistOverview() {
     setIsCreatingChecklist(false);
   };
 
-  // TODO: [Accessibility] Using confirm() is not ideal for accessibility. Replace with a proper modal dialog component that supports keyboard navigation and screen readers.
-  const handleDeleteChecklist = async (id: string, name: string) => {
+  const handleDeleteChecklist = async (e: React.MouseEvent, id: string, name: string) => {
+    e.stopPropagation(); // Prevent opening the checklist
     if (
       window.confirm(`Are you sure you want to delete "${name}"? This action cannot be undone.`)
     ) {
@@ -49,6 +49,11 @@ export function ChecklistOverview() {
     }
   };
 
+  const handleEditChecklist = (e: React.MouseEvent, id: string) => {
+    e.stopPropagation(); // Prevent opening the checklist
+    setCurrentChecklist(id);
+  };
+
   const handleSelectChecklist = (id: string) => {
     setCurrentChecklist(id);
   };
@@ -182,56 +187,72 @@ export function ChecklistOverview() {
             return (
               <div
                 key={checklist.id}
-                className="bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-shadow relative"
+                className="bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-shadow relative group"
               >
-                {/* Delete Button */}
-                <button
-                  onClick={() => handleDeleteChecklist(checklist.id, checklist.name)}
-                  disabled={isDeleting}
-                  className="absolute top-2 right-2 p-1 text-gray-400 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 rounded"
-                  aria-label={`Delete ${checklist.name}`}
-                >
-                  {isDeleting ? (
-                    <div className="w-4 h-4 border-2 border-gray-300 border-t-red-600 rounded-full animate-spin" />
-                  ) : (
+                {/* Edit and Delete Buttons */}
+                <div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <button
+                    onClick={(e) => handleEditChecklist(e, checklist.id)}
+                    className="p-1 text-gray-400 hover:text-accent focus:outline-none focus:ring-2 focus:ring-accent rounded"
+                    aria-label={`Edit ${checklist.name}`}
+                  >
                     <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path
                         strokeLinecap="round"
                         strokeLinejoin="round"
                         strokeWidth={2}
-                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                       />
                     </svg>
-                  )}
-                </button>
+                  </button>
+                  <button
+                    onClick={(e) => handleDeleteChecklist(e, checklist.id, checklist.name)}
+                    disabled={isDeleting}
+                    className="p-1 text-gray-400 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 rounded"
+                    aria-label={`Delete ${checklist.name}`}
+                  >
+                    {isDeleting ? (
+                      <div className="w-4 h-4 border-2 border-gray-300 border-t-red-600 rounded-full animate-spin" />
+                    ) : (
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                        />
+                      </svg>
+                    )}
+                  </button>
+                </div>
 
                 {/* Checklist Content */}
                 <div className="cursor-pointer" onClick={() => handleSelectChecklist(checklist.id)}>
-                  <h3 className="text-lg font-semibold text-gray-900 mb-2 pr-8">
+                  <h3 className="text-lg font-semibold text-gray-900 mb-2 pr-16 hover:underline">
                     {checklist.name}
                   </h3>
 
-                  <div className="space-y-2 mb-4">
-                    <div className="flex items-center justify-between text-sm text-gray-600">
-                      <span>
-                        {completedItems} of {totalItems} items completed
-                      </span>
-                      <span className="font-medium">{completionPercentage}%</span>
-                    </div>
-
-                    <div className="w-full bg-gray-200 rounded-full h-2">
-                      <div
-                        className="bg-success h-2 rounded-full transition-all"
-                        style={{ width: `${completionPercentage}%` }}
-                      />
-                    </div>
+                <div className="space-y-2 mb-4">
+                  <div className="flex items-center justify-between text-sm text-gray-600">
+                    <span>
+                      {completedItems} of {totalItems} items completed
+                    </span>
+                    <span className="font-medium">{completionPercentage}%</span>
                   </div>
 
-                  <div className="flex items-center justify-between text-xs text-gray-500">
-                    <span>Created: {formatDate(checklist.createdAt)}</span>
-                    <span>Updated: {formatDate(checklist.updatedAt)}</span>
+                  <div className="w-full bg-gray-200 rounded-full h-2">
+                    <div
+                      className="bg-success h-2 rounded-full transition-all"
+                      style={{ width: `${completionPercentage}%` }}
+                    />
                   </div>
                 </div>
+
+                <div className="flex items-center justify-between text-xs text-gray-500">
+                  <span>Created: {formatDate(checklist.createdAt)}</span>
+                  <span>Updated: {formatDate(checklist.updatedAt)}</span>
+                </div>
+                </div>
               </div>
             );
           })}
diff --git a/frontend/src/components/checklist/ChecklistPage.tsx b/frontend/src/components/checklist/ChecklistPage.tsx
index 48f6684..82f954c 100644
--- a/frontend/src/components/checklist/ChecklistPage.tsx
+++ b/frontend/src/components/checklist/ChecklistPage.tsx
@@ -16,11 +16,13 @@ export function ChecklistPage() {
     deleteItem,
     addItem,
     setCurrentChecklist,
+    deleteChecklist,
   } = useChecklistStore();
 
   const [isAddingItem, setIsAddingItem] = useState(false);
   const [isCreatingChecklist, setIsCreatingChecklist] = useState(false);
   const [newChecklistName, setNewChecklistName] = useState('');
+  const [isDeletingChecklist, setIsDeletingChecklist] = useState(false);
 
   useEffect(() => {
     loadChecklists();
@@ -48,6 +50,22 @@ export function ChecklistPage() {
     setIsAddingItem(false);
   };
 
+  const handleDeleteChecklistClick = () => {
+    setIsDeletingChecklist(true);
+  };
+
+  const handleConfirmDeleteChecklist = async () => {
+    if (currentChecklistId) {
+      await deleteChecklist(currentChecklistId);
+      setCurrentChecklist(null);
+      setIsDeletingChecklist(false);
+    }
+  };
+
+  const handleCancelDeleteChecklist = () => {
+    setIsDeletingChecklist(false);
+  };
+
   if (isLoading && checklists.length === 0) {
     return (
       <div className="flex items-center justify-center h-64">
@@ -93,12 +111,21 @@ export function ChecklistPage() {
               {currentChecklist?.name || 'Packing Checklist'}
             </h1>
           </div>
-          <button
-            onClick={() => setIsCreatingChecklist(true)}
-            className="px-4 py-2 bg-accent text-white rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-accent"
-          >
-            New Checklist
-          </button>
+          {currentChecklist ? (
+            <button
+              onClick={handleDeleteChecklistClick}
+              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-600"
+            >
+              Delete Checklist
+            </button>
+          ) : (
+            <button
+              onClick={() => setIsCreatingChecklist(true)}
+              className="px-4 py-2 bg-accent text-white rounded-lg hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-accent"
+            >
+              New Checklist
+            </button>
+          )}
         </div>
 
         {currentChecklist && (
@@ -118,6 +145,29 @@ export function ChecklistPage() {
         )}
       </div>
 
+      {/* Delete Checklist Confirmation */}
+      {isDeletingChecklist && currentChecklist && (
+        <div className="mb-6 p-4 bg-red-50 border border-red-500 rounded-lg">
+          <p className="text-sm text-gray-900 mb-3">
+            Are you sure you want to delete "{currentChecklist.name}"? This action cannot be undone.
+          </p>
+          <div className="flex gap-2">
+            <button
+              onClick={handleConfirmDeleteChecklist}
+              className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-600"
+            >
+              Delete Checklist
+            </button>
+            <button
+              onClick={handleCancelDeleteChecklist}
+              className="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
       {/* Create Checklist Form */}
       {isCreatingChecklist && (
         <div className="mb-6 bg-white p-4 rounded-lg border border-gray-200 shadow-sm">
@@ -218,7 +268,7 @@ export function ChecklistPage() {
                 {isAddingItem ? (
                   <AddItemForm
                     checklistId={currentChecklist.id}
-                    category="Miscellaneous"
+                    category=""
                     onAdd={handleAddItem}
                     onCancel={() => setIsAddingItem(false)}
                   />
diff --git a/frontend/src/components/checklist/ItemRow.tsx b/frontend/src/components/checklist/ItemRow.tsx
index 4ed8a20..1fde5c4 100644
--- a/frontend/src/components/checklist/ItemRow.tsx
+++ b/frontend/src/components/checklist/ItemRow.tsx
@@ -11,9 +11,11 @@ interface ItemRowProps {
 
 export function ItemRow({ item, checklistId, onToggleComplete, onUpdate, onDelete }: ItemRowProps) {
   const [isEditing, setIsEditing] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
   const [editedName, setEditedName] = useState(item.name);
   const [editedNotes, setEditedNotes] = useState(item.notes || '');
   const [editedQuantity, setEditedQuantity] = useState(item.quantity?.toString() || '');
+  const [editedCategory, setEditedCategory] = useState(item.category || '');
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -30,6 +32,7 @@ export function ItemRow({ item, checklistId, onToggleComplete, onUpdate, onDelet
 
     await onUpdate(checklistId, item.id, {
       name: editedName.trim(),
+      category: editedCategory.trim() || undefined,
       notes: editedNotes.trim() || undefined,
       quantity: editedQuantity ? parseInt(editedQuantity, 10) : undefined,
     });
@@ -40,6 +43,7 @@ export function ItemRow({ item, checklistId, onToggleComplete, onUpdate, onDelet
     setEditedName(item.name);
     setEditedNotes(item.notes || '');
     setEditedQuantity(item.quantity?.toString() || '');
+    setEditedCategory(item.category || '');
     setIsEditing(false);
   };
 
@@ -53,13 +57,47 @@ export function ItemRow({ item, checklistId, onToggleComplete, onUpdate, onDelet
     }
   };
 
-  // TODO: [Accessibility] Using confirm() is not ideal for accessibility. Replace with a proper modal dialog component that supports keyboard navigation and screen readers.
-  const handleDelete = async () => {
-    if (confirm(`Delete "${item.name}"?`)) {
-      await onDelete(checklistId, item.id);
-    }
+  // In-page confirmation for delete
+  const handleDeleteClick = () => {
+    setIsDeleting(true);
+  };
+
+  const handleConfirmDelete = async () => {
+    await onDelete(checklistId, item.id);
   };
 
+  const handleCancelDelete = () => {
+    setIsDeleting(false);
+  };
+
+  if (isDeleting) {
+    return (
+      <div className="p-3 border border-red-500 rounded bg-red-50">
+        <div className="space-y-3">
+          <p className="text-sm text-gray-900">
+            Delete "{item.name}"?
+          </p>
+          <div className="flex gap-2">
+            <button
+              onClick={handleConfirmDelete}
+              className="px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-600"
+              aria-label="Confirm delete"
+            >
+              Delete
+            </button>
+            <button
+              onClick={handleCancelDelete}
+              className="px-3 py-1 bg-gray-400 text-white rounded hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-gray-400"
+              aria-label="Cancel delete"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   if (isEditing) {
     return (
       <div className="p-3 border border-accent rounded bg-white">
@@ -74,6 +112,15 @@ export function ItemRow({ item, checklistId, onToggleComplete, onUpdate, onDelet
             placeholder="Item name"
             aria-label="Item name"
           />
+          <input
+            type="text"
+            value={editedCategory}
+            onChange={(e) => setEditedCategory(e.target.value)}
+            onKeyDown={handleKeyDown}
+            className="w-full px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-accent"
+            placeholder="Category (optional)"
+            aria-label="Category"
+          />
           <input
             type="text"
             value={editedNotes}
@@ -126,9 +173,10 @@ export function ItemRow({ item, checklistId, onToggleComplete, onUpdate, onDelet
         />
         <div className="flex-1 min-w-0">
           <p
-            className={`font-medium ${
+            className={`font-medium hover:underline cursor-pointer ${
               item.completed ? 'line-through text-gray-500' : 'text-gray-900'
             }`}
+            onClick={() => setIsEditing(true)}
           >
             {item.name}
             {item.quantity && (
@@ -138,17 +186,12 @@ export function ItemRow({ item, checklistId, onToggleComplete, onUpdate, onDelet
           {item.notes && (
             <p className="text-sm text-gray-600 mt-1">{item.notes}</p>
           )}
-          {item.priority && (
+          {item.category && (
             <span
-              className={`inline-block mt-1 px-2 py-0.5 text-xs rounded ${
-                item.priority === 'high'
-                  ? 'bg-warning/20 text-warning'
-                  : item.priority === 'optional'
-                  ? 'bg-gray-200 text-gray-600'
-                  : 'bg-blue-100 text-blue-600'
-              }`}
+              onClick={() => setIsEditing(true)}
+              className="inline-block mt-1 px-2 py-0.5 text-xs rounded bg-blue-100 text-blue-600 hover:bg-blue-200 cursor-pointer"
             >
-              {item.priority}
+              {item.category}
             </span>
           )}
         </div>
@@ -173,7 +216,7 @@ export function ItemRow({ item, checklistId, onToggleComplete, onUpdate, onDelet
             </svg>
           </button>
           <button
-            onClick={handleDelete}
+            onClick={handleDeleteClick}
             className="p-1 text-gray-600 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-600 rounded"
             aria-label={`Delete ${item.name}`}
           >
diff --git a/frontend/src/types/checklist.ts b/frontend/src/types/checklist.ts
index e695ea7..8012dda 100644
--- a/frontend/src/types/checklist.ts
+++ b/frontend/src/types/checklist.ts
@@ -15,10 +15,9 @@ export type Checklist = {
 export type Item = {
   id: string;
   name: string;
-  category: string;
+  category?: string;
   notes?: string;
   quantity?: number;
-  priority?: 'high' | 'normal' | 'optional';
   completed: boolean;
 };
 
@@ -59,5 +58,4 @@ export type ItemResponse = {
   itemName: string;
   quantity?: number;
   notes?: string;
-  priority?: 'high' | 'normal' | 'optional';
 };