diff --git a/templates/collections_templ.go b/templates/collections_templ.go
index 78284f9..784aea0 100644
--- a/templates/collections_templ.go
+++ b/templates/collections_templ.go
@@ -202,14 +202,14 @@ func CollectionDetail(user User, collection CollectionData, books []handlers.Boo
 			}
 		}
 		for _, book := range books {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<div class=\"card p-4 rounded-lg border hover:shadow-lg transition-shadow\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex items-start gap-4\"><input type=\"checkbox\" onchange=\"toggleBookForRemoval('{ book.MediaItemID }')\" class=\"w-5 h-5 mt-2\"><div class=\"aspect-w-3 aspect-h-4 flex-shrink-0 w-24 mb-3 overflow-hidden rounded\"><img src=\"{ book.CoverImagePath }\" alt=\"Cover\" class=\"w-full h-32 object-cover rounded\" onerror=\"this.src='/static/placeholder-book.svg'\"></div><div class=\"flex-1\"><h3 class=\"font-semibold text-lg mb-1 line-clamp-2\" style=\"color: var(--text-primary)\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<div class=\"card p-4 rounded-lg border hover:shadow-lg transition-shadow\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex gap-4\"><!-- Checkbox and Book Info --><div class=\"flex-shrink-0 pt-1\"><input type=\"checkbox\" onchange=\"toggleBookForRemoval('{ book.MediaItemID }')\" class=\"w-5 h-5\"></div><div class=\"flex-1 min-w-0\"><h3 class=\"font-semibold text-lg mb-1 line-clamp-2\" style=\"color: var(--text-primary)\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var10 string
 			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(book.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 301, Col: 108}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 300, Col: 22}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 			if templ_7745c5c3_Err != nil {
@@ -220,14 +220,14 @@ func CollectionDetail(user User, collection CollectionData, books []handlers.Boo
 				return templ_7745c5c3_Err
 			}
 			if book.Author != "" {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<p class=\"text-sm\" style=\"color: var(--text-secondary)\">by ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<p class=\"text-sm line-clamp-1\" style=\"color: var(--text-secondary)\">by ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var11 string
 				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(book.Author)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 303, Col: 82}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 307, Col: 27}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 				if templ_7745c5c3_Err != nil {
@@ -238,12 +238,40 @@ func CollectionDetail(user User, collection CollectionData, books []handlers.Boo
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<button onclick=\"removeBook('{ book.MediaItemID }')\" class=\"mt-2 px-3 py-1 text-sm border rounded hover:opacity-80\" style=\"border-color: var(--border); color: var(--text-secondary);\">Remove</button></div></div></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</div><!-- Book Cover --><div class=\"flex-shrink-0 w-16 sm:w-20\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if book.CoverImagePath != "" {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<img src=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var12 string
+				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(book.CoverImagePath)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 315, Col: 36}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "\" alt=\"Cover\" class=\"w-full aspect-[3/4] object-cover rounded shadow-md\" onerror=\"this.src='/static/placeholder-book.svg'\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			} else {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "<img src=\"/static/placeholder-book.svg\" alt=\"Cover\" class=\"w-full aspect-[3/4] object-cover rounded shadow-md\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</div></div><!-- Remove Button --><div class=\"mt-3 pt-3 border-t\" style=\"border-color: var(--border);\"><button onclick=\"removeBook('{ book.MediaItemID }')\" class=\"px-3 py-1 text-sm border rounded hover:opacity-80\" style=\"border-color: var(--border); color: var(--text-secondary);\">🗑️ Remove from Collection</button></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</div></div><div id=\"add-books-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-2xl mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Add Books to Collection</h2><button onclick=\"hideAddBooksModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><p class=\"mb-4\" style=\"color: var(--text-secondary)\">Search and select books to add to this collection.</p><div class=\"mb-4\"><input type=\"text\" id=\"book-search\" placeholder=\"Search books...\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div id=\"book-results\" class=\"max-h-64 overflow-y-auto mb-4\"></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" onclick=\"hideAddBooksModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"button\" onclick=\"addSelectedBooks()\" class=\"btn-primary px-4 py-2 rounded-lg\">Add Selected Books</button></div></div></div><script>\n            let collectionId = '{ collection.ID }';\n            let selectedBooks = new Set();\n            let booksToRemove = new Set();\n            let allBooks = [\n                { range books }{\n                    {\n                        id: '{ book.MediaItemID }',\n                        title: '{ book.Title }',\n                        author: '{ book.Author }',\n                        cover: '{ book.CoverImagePath }'\n                    },\n                }{ end }\n            ];\n            let ws = null;\n\n            function backToCollections() {\n                window.location.href = '/collections';\n            }\n\n            function connectWebSocket() {\n                const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';\n                const wsUrl = `${protocol}//${window.location.host}/ws/sync`;\n\n                ws = new WebSocket(wsUrl);\n\n                ws.onopen = function() {\n                    console.log('WebSocket connected');\n                };\n\n                ws.onmessage = function(event) {\n                    const message = JSON.parse(event.data);\n\n                    if (message.type === 'collection_updated' && message.data.collection_id === collectionId) {\n                        showToast(`Collection updated: ${message.data.action} (${message.data.count} books)`, 'info');\n\n                        setTimeout(() => {\n                            location.reload();\n                        }, 1000);\n                    }\n                };\n\n                ws.onclose = function() {\n                    console.log('WebSocket disconnected, reconnecting in 5s...');\n                    setTimeout(connectWebSocket, 5000);\n                };\n\n                ws.onerror = function(error) {\n                    console.error('WebSocket error:', error);\n                };\n            }\n\n            connectWebSocket();\n\n            function filterCollectionBooks() {\n                const searchTerm = document.getElementById('collection-search').value.toLowerCase();\n                const booksContainer = document.getElementById('books-container');\n                const bookCards = booksContainer.children;\n\n                let visibleCount = 0;\n                for (let i = 0; i < bookCards.length; i++) {\n                    const card = bookCards[i];\n                    if (card.id === 'empty-state') continue;\n\n                    const title = card.querySelector('.font-semibold')?.textContent.toLowerCase() || '';\n                    const author = card.querySelector('.text-sm')?.textContent.toLowerCase() || '';\n\n                    const matches = title.includes(searchTerm) || author.includes(searchTerm);\n\n                    if (matches || searchTerm === '') {\n                        card.style.display = '';\n                        visibleCount++;\n                    } else {\n                        card.style.display = 'none';\n                    }\n                }\n            }\n\n            function showAddBooksModal() {\n                document.getElementById('add-books-modal').classList.remove('hidden');\n                selectedBooks.clear();\n                document.getElementById('book-results').innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">Enter at least 2 characters to search.</p>';\n            }\n\n            function hideAddBooksModal() {\n                document.getElementById('add-books-modal').classList.add('hidden');\n                document.getElementById('book-search').value = '';\n                document.getElementById('book-results').innerHTML = '';\n                selectedBooks.clear();\n            }\n\n            function searchBooks() {\n                const searchTerm = document.getElementById('book-search').value;\n                const container = document.getElementById('book-results');\n\n                if (searchTerm.length < 2) {\n                    container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">Enter at least 2 characters to search.</p>';\n                    return;\n                }\n\n                container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">Searching...</p>';\n\n                fetch(`/api/media-items/search?q=${encodeURIComponent(searchTerm)}`, {\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => response.json())\n                .then(result => {\n                    if (result.data && result.data.length > 0) {\n                        let html = '<div class=\"space-y-2\">';\n                        result.data.slice(0, 50).forEach(book => {\n                            const isSelected = selectedBooks.has(book.media_item_id);\n                            const checkedAttr = isSelected ? 'checked' : '';\n                            const authorHtml = book.author ? `<div class=\"text-xs\" style=\"color: var(--text-secondary)\">${book.author}</div>` : '';\n                            html += `\n                                <div class=\"flex items-center gap-3 p-2 rounded cursor-pointer hover:opacity-80\"\n                                     style=\"background-color: var(--bg-primary);\"\n                                     onclick=\"toggleBookSelection('${book.media_item_id}')\">\n                                    <input type=\"checkbox\" ${checkedAttr} class=\"w-4 h-4\">\n                                    <img src=\"${book.cover_image_path || '/static/placeholder-book.svg'}\"\n                                         alt=\"Cover\" class=\"w-10 h-14 object-cover rounded\">\n                                    <div class=\"flex-1\">\n                                        <div class=\"text-sm font-medium\" style=\"color: var(--text-primary)\">${book.title}</div>\n                                        ${authorHtml}\n                                    </div>\n                                </div>\n                            `;\n                        });\n                        html += '</div>';\n                        if (result.data.length > 50) {\n                            html += '<p class=\"text-sm mt-2\" style=\"color: var(--text-secondary)\">Showing first 50 of ' + result.data.length + ' results</p>';\n                        }\n                        container.innerHTML = html;\n                    } else {\n                        container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">No books found</p>';\n                    }\n                })\n                .catch(error => {\n                    container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--error)\">Failed to search books</p>';\n                });\n            }\n\n            function toggleBookSelection(bookId) {\n                if (selectedBooks.has(bookId)) {\n                    selectedBooks.delete(bookId);\n                } else {\n                    selectedBooks.add(bookId);\n                }\n                searchBooks();\n            }\n\n            function addSelectedBooks() {\n                if (selectedBooks.size === 0) {\n                    showToast('Please select at least one book', 'error');\n                    return;\n                }\n\n                const bookIds = Array.from(selectedBooks);\n\n                fetch(`/api/collections/${collectionId}/books`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Authorization': 'Bearer ' + localStorage.getItem('token')\n                    },\n                    body: JSON.stringify({ book_ids: bookIds })\n                })\n                .then(response => {\n                    if (response.ok) {\n                        showToast(`Added ${bookIds.length} book(s) to collection`, 'success');\n                        hideAddBooksModal();\n                        location.reload();\n                    } else {\n                        showToast('Failed to add books', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to add books', 'error');\n                });\n            }\n\n            function removeBook(bookId) {\n                if (!confirm('Remove this book from the collection?')) return;\n\n                fetch(`/api/collections/${collectionId}/books/${bookId}`, {\n                    method: 'DELETE',\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => {\n                    if (response.ok) {\n                        showToast('Book removed from collection', 'success');\n                        location.reload();\n                    } else {\n                        showToast('Failed to remove book', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to remove book', 'error');\n                });\n            }\n\n            function toggleBookForRemoval(bookId) {\n                if (booksToRemove.has(bookId)) {\n                    booksToRemove.delete(bookId);\n                } else {\n                    booksToRemove.add(bookId);\n                }\n                updateSelectedCount();\n            }\n\n            function updateSelectedCount() {\n                const count = booksToRemove.size;\n                const countSpan = document.getElementById('selected-count');\n                const removeBtn = document.getElementById('bulk-remove-btn');\n\n                if (count > 0) {\n                    countSpan.textContent = count + ' selected';\n                    countSpan.classList.remove('hidden');\n                    removeBtn.disabled = false;\n                } else {\n                    countSpan.classList.add('hidden');\n                    removeBtn.disabled = true;\n                }\n            }\n\n            function removeSelectedBooks() {\n                if (booksToRemove.size === 0) {\n                    showToast('No books selected', 'error');\n                    return;\n                }\n\n                if (!confirm(`Remove ${booksToRemove.size} book(s) from the collection?`)) return;\n\n                const bookIds = Array.from(booksToRemove);\n\n                fetch(`/api/collections/${collectionId}/books/bulk-remove`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Authorization': 'Bearer ' + localStorage.getItem('token')\n                    },\n                    body: JSON.stringify({ book_ids: bookIds })\n                })\n                .then(response => response.json())\n                .then(result => {\n                    if (result.removed > 0) {\n                        showToast(`Removed ${result.removed} book(s) from collection`, 'success');\n                        location.reload();\n                    } else {\n                        showToast('Failed to remove books', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to remove books', 'error');\n                });\n            }\n                })\n                .catch(error => {\n                    showToast('Failed to remove book', 'error');\n                });\n            }\n\n            function logout() {\n                localStorage.removeItem('token');\n                window.location.href = '/login';\n            }\n\n            renderBooks();\n        </script></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</div></div><div id=\"add-books-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-2xl mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Add Books to Collection</h2><button onclick=\"hideAddBooksModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><p class=\"mb-4\" style=\"color: var(--text-secondary)\">Search and select books to add to this collection.</p><div class=\"mb-4\"><input type=\"text\" id=\"book-search\" placeholder=\"Search books...\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div id=\"book-results\" class=\"max-h-64 overflow-y-auto mb-4\"></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" onclick=\"hideAddBooksModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"button\" onclick=\"addSelectedBooks()\" class=\"btn-primary px-4 py-2 rounded-lg\">Add Selected Books</button></div></div></div><script>\n            let collectionId = '{ collection.ID }';\n            let selectedBooks = new Set();\n            let booksToRemove = new Set();\n            let allBooks = [\n                { range books }{\n                    {\n                        id: '{ book.MediaItemID }',\n                        title: '{ book.Title }',\n                        author: '{ book.Author }',\n                        cover: '{ book.CoverImagePath }'\n                    },\n                }{ end }\n            ];\n            let ws = null;\n\n            function backToCollections() {\n                window.location.href = '/collections';\n            }\n\n            function connectWebSocket() {\n                const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';\n                const wsUrl = `${protocol}//${window.location.host}/ws/sync`;\n\n                ws = new WebSocket(wsUrl);\n\n                ws.onopen = function() {\n                    console.log('WebSocket connected');\n                };\n\n                ws.onmessage = function(event) {\n                    const message = JSON.parse(event.data);\n\n                    if (message.type === 'collection_updated' && message.data.collection_id === collectionId) {\n                        showToast(`Collection updated: ${message.data.action} (${message.data.count} books)`, 'info');\n\n                        setTimeout(() => {\n                            location.reload();\n                        }, 1000);\n                    }\n                };\n\n                ws.onclose = function() {\n                    console.log('WebSocket disconnected, reconnecting in 5s...');\n                    setTimeout(connectWebSocket, 5000);\n                };\n\n                ws.onerror = function(error) {\n                    console.error('WebSocket error:', error);\n                };\n            }\n\n            connectWebSocket();\n\n            function filterCollectionBooks() {\n                const searchTerm = document.getElementById('collection-search').value.toLowerCase();\n                const booksContainer = document.getElementById('books-container');\n                const bookCards = booksContainer.children;\n\n                let visibleCount = 0;\n                for (let i = 0; i < bookCards.length; i++) {\n                    const card = bookCards[i];\n                    if (card.id === 'empty-state') continue;\n\n                    const title = card.querySelector('.font-semibold')?.textContent.toLowerCase() || '';\n                    const author = card.querySelector('.text-sm')?.textContent.toLowerCase() || '';\n\n                    const matches = title.includes(searchTerm) || author.includes(searchTerm);\n\n                    if (matches || searchTerm === '') {\n                        card.style.display = '';\n                        visibleCount++;\n                    } else {\n                        card.style.display = 'none';\n                    }\n                }\n            }\n\n            function showAddBooksModal() {\n                document.getElementById('add-books-modal').classList.remove('hidden');\n                selectedBooks.clear();\n                document.getElementById('book-results').innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">Enter at least 2 characters to search.</p>';\n            }\n\n            function hideAddBooksModal() {\n                document.getElementById('add-books-modal').classList.add('hidden');\n                document.getElementById('book-search').value = '';\n                document.getElementById('book-results').innerHTML = '';\n                selectedBooks.clear();\n            }\n\n            function searchBooks() {\n                const searchTerm = document.getElementById('book-search').value;\n                const container = document.getElementById('book-results');\n\n                if (searchTerm.length < 2) {\n                    container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">Enter at least 2 characters to search.</p>';\n                    return;\n                }\n\n                container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">Searching...</p>';\n\n                fetch(`/api/media-items/search?q=${encodeURIComponent(searchTerm)}`, {\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => response.json())\n                .then(result => {\n                    if (result.data && result.data.length > 0) {\n                        let html = '<div class=\"space-y-2\">';\n                        result.data.slice(0, 50).forEach(book => {\n                            const isSelected = selectedBooks.has(book.media_item_id);\n                            const checkedAttr = isSelected ? 'checked' : '';\n                            const authorHtml = book.author ? `<div class=\"text-xs\" style=\"color: var(--text-secondary)\">${book.author}</div>` : '';\n                            html += `\n                                <div class=\"flex items-center gap-3 p-2 rounded cursor-pointer hover:opacity-80\"\n                                     style=\"background-color: var(--bg-primary);\"\n                                     onclick=\"toggleBookSelection('${book.media_item_id}')\">\n                                    <input type=\"checkbox\" ${checkedAttr} class=\"w-4 h-4\">\n                                    <img src=\"${book.cover_image_path || '/static/placeholder-book.svg'}\"\n                                         alt=\"Cover\" class=\"w-10 h-14 object-cover rounded\">\n                                    <div class=\"flex-1\">\n                                        <div class=\"text-sm font-medium\" style=\"color: var(--text-primary)\">${book.title}</div>\n                                        ${authorHtml}\n                                    </div>\n                                </div>\n                            `;\n                        });\n                        html += '</div>';\n                        if (result.data.length > 50) {\n                            html += '<p class=\"text-sm mt-2\" style=\"color: var(--text-secondary)\">Showing first 50 of ' + result.data.length + ' results</p>';\n                        }\n                        container.innerHTML = html;\n                    } else {\n                        container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">No books found</p>';\n                    }\n                })\n                .catch(error => {\n                    container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--error)\">Failed to search books</p>';\n                });\n            }\n\n            function toggleBookSelection(bookId) {\n                if (selectedBooks.has(bookId)) {\n                    selectedBooks.delete(bookId);\n                } else {\n                    selectedBooks.add(bookId);\n                }\n                searchBooks();\n            }\n\n            function addSelectedBooks() {\n                if (selectedBooks.size === 0) {\n                    showToast('Please select at least one book', 'error');\n                    return;\n                }\n\n                const bookIds = Array.from(selectedBooks);\n\n                fetch(`/api/collections/${collectionId}/books`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Authorization': 'Bearer ' + localStorage.getItem('token')\n                    },\n                    body: JSON.stringify({ book_ids: bookIds })\n                })\n                .then(response => {\n                    if (response.ok) {\n                        showToast(`Added ${bookIds.length} book(s) to collection`, 'success');\n                        hideAddBooksModal();\n                        location.reload();\n                    } else {\n                        showToast('Failed to add books', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to add books', 'error');\n                });\n            }\n\n            function removeBook(bookId) {\n                if (!confirm('Remove this book from the collection?')) return;\n\n                fetch(`/api/collections/${collectionId}/books/${bookId}`, {\n                    method: 'DELETE',\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => {\n                    if (response.ok) {\n                        showToast('Book removed from collection', 'success');\n                        location.reload();\n                    } else {\n                        showToast('Failed to remove book', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to remove book', 'error');\n                });\n            }\n\n            function toggleBookForRemoval(bookId) {\n                if (booksToRemove.has(bookId)) {\n                    booksToRemove.delete(bookId);\n                } else {\n                    booksToRemove.add(bookId);\n                }\n                updateSelectedCount();\n            }\n\n            function updateSelectedCount() {\n                const count = booksToRemove.size;\n                const countSpan = document.getElementById('selected-count');\n                const removeBtn = document.getElementById('bulk-remove-btn');\n\n                if (count > 0) {\n                    countSpan.textContent = count + ' selected';\n                    countSpan.classList.remove('hidden');\n                    removeBtn.disabled = false;\n                } else {\n                    countSpan.classList.add('hidden');\n                    removeBtn.disabled = true;\n                }\n            }\n\n            function removeSelectedBooks() {\n                if (booksToRemove.size === 0) {\n                    showToast('No books selected', 'error');\n                    return;\n                }\n\n                if (!confirm(`Remove ${booksToRemove.size} book(s) from the collection?`)) return;\n\n                const bookIds = Array.from(booksToRemove);\n\n                fetch(`/api/collections/${collectionId}/books/bulk-remove`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Authorization': 'Bearer ' + localStorage.getItem('token')\n                    },\n                    body: JSON.stringify({ book_ids: bookIds })\n                })\n                .then(response => response.json())\n                .then(result => {\n                    if (result.removed > 0) {\n                        showToast(`Removed ${result.removed} book(s) from collection`, 'success');\n                        location.reload();\n                    } else {\n                        showToast('Failed to remove books', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to remove books', 'error');\n                });\n            }\n                })\n                .catch(error => {\n                    showToast('Failed to remove book', 'error');\n                });\n            }\n\n            function logout() {\n                localStorage.removeItem('token');\n                window.location.href = '/login';\n            }\n        </script></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/dashboard.templ b/templates/dashboard.templ
index 99c5415..f5b8bce 100644
--- a/templates/dashboard.templ
+++ b/templates/dashboard.templ
@@ -185,7 +185,7 @@ templ BookCard(item handlers.BookInfo) {
 				/>
 			}
 		</div>
-		<div class="book-card-text px-2 py-1 bg-[color-mix(in_srgb,var(--wood-border)_60%,transparent)]">
+		<div class="book-card-text px-2 py-1 bg-[color-mix(in_srgb,var(--wood-border)_40%,transparent)]">
 			<h3 class="font-semibold text-base line-clamp-2" style="color: var(--text-primary)">
 				{ item.Title }
 			</h3>
diff --git a/templates/dashboard_templ.go b/templates/dashboard_templ.go
index 29d91df..bb7c376 100644
--- a/templates/dashboard_templ.go
+++ b/templates/dashboard_templ.go
@@ -424,7 +424,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "</div><div class=\"book-card-text px-2 py-1 bg-[color-mix(in_srgb,var(--wood-border)_60%,transparent)]\"><h3 class=\"font-semibold text-base line-clamp-2\" style=\"color: var(--text-primary)\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "</div><div class=\"book-card-text px-2 py-1 bg-[color-mix(in_srgb,var(--wood-border)_40%,transparent)]\"><h3 class=\"font-semibold text-base line-clamp-2\" style=\"color: var(--text-primary)\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/web/src/dashboard.ts b/web/src/dashboard.ts
index 30a3fa4..33b3e91 100644
--- a/web/src/dashboard.ts
+++ b/web/src/dashboard.ts
@@ -344,7 +344,7 @@ function renderBookCard(book: BookInfo): string {
                      loading="lazy"
                      onerror="this.src='/static/placeholder-book.svg'">
             </div>
-            <div class="book-card-text px-2 py-1 bg-[color-mix(in_srgb,var(--wood-border)_60%,transparent)]">
+            <div class="book-card-text px-2 py-1 bg-[color-mix(in_srgb,var(--wood-border)_40%,transparent)]">
                 <h3 class="font-semibold text-base line-clamp-2" style="color: var(--text-primary)">
                     ${book.title}
                 </h3>
diff --git a/web/static/input.css b/web/static/input.css
index d97eff9..e2779ff 100644
--- a/web/static/input.css
+++ b/web/static/input.css
@@ -265,21 +265,21 @@
     #collections-container[data-wood="wood-light"] {
         --wood-text-primary: #1a1a1a;
         --wood-text-secondary: #4a4a4a;
-        --wood-border: #2a2a2a;
+        --wood-border: #8b5a2b;
     }
 
     /* Wood Dark - needs light text */
     #collections-container[data-wood="wood-dark"] {
         --wood-text-primary: #f5f5f5;
         --wood-text-secondary: #c0c0c0;
-        --wood-border: #5c3317;
+        --wood-border: #7a5228;
     }
 
     /* Wood Mahogany - needs light text (darkest background) */
     #collections-container[data-wood="wood-mahogany"] {
         --wood-text-primary: #f5f5f5;
         --wood-text-secondary: #c0c0c0;
-        --wood-border: #5c3317;
+        --wood-border: #8b3a3a;
     }
 
     /* Apply wood-specific text colors to all text within collections container */