diff --git a/src/components/NotesList.tsx b/src/components/NotesList.tsx
index c0e01e8..23bbe17 100644
--- a/src/components/NotesList.tsx
+++ b/src/components/NotesList.tsx
@@ -160,19 +160,26 @@ export function NotesList({
                     {note.title || 'Untitled'}
                   </h3>
                 </div>
-                <button
-                  onClick={(e) => handleDeleteClick(note, e)}
-                  className={`ml-2 p-1 rounded transition-all opacity-0 group-hover:opacity-100 ${
-                    deleteClickedId === note.id
-                      ? 'bg-red-600 text-white'
-                      : 'hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400'
-                  }`}
-                  title={deleteClickedId === note.id ? "Click again to confirm deletion" : "Delete"}
-                >
-                  <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 className="flex items-center gap-2">
+                  {deleteClickedId === note.id && (
+                    <span className="text-xs text-red-600 dark:text-red-400 font-medium whitespace-nowrap">
+                      Click again to delete
+                    </span>
+                  )}
+                  <button
+                    onClick={(e) => handleDeleteClick(note, e)}
+                    className={`p-1 rounded transition-all opacity-0 group-hover:opacity-100 ${
+                      deleteClickedId === note.id
+                        ? 'bg-red-600 text-white opacity-100'
+                        : 'hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400'
+                    }`}
+                    title={deleteClickedId === note.id ? "Click again to confirm deletion" : "Delete"}
+                  >
+                    <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>
               </div>
 
               <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 mb-2">