diff --git a/templates/index.html b/templates/index.html
index b76e887..b053062 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -26,17 +26,20 @@
         flex-wrap: wrap;
     }
     
-    /* Mobile: stack search form vertically */
-    @media (max-width: 479px) {
+    /* Mobile and Tablet: stack search form vertically */
+    @media (max-width: 767px) {
         .search-form {
             flex-direction: column;
         }
         
         .search-form input,
+        .search-form select,
         .search-form button,
         .search-form a {
             flex: initial;
-            min-width: 100%;
+            width: 100%;
+            min-width: 0;
+            box-sizing: border-box;
         }
     }
     
@@ -130,15 +133,22 @@
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
     }
 
-    /* Desktop layout: cover on left, content on right */
+    /* Desktop layout: left column (cover + actions), right column (content) */
     @media (min-width: 768px) {
         .book-card {
             flex-direction: row;
             gap: 15px;
         }
 
-        .book-card-cover {
+        .book-card-left {
             flex-shrink: 0;
+            width: 120px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .book-card-cover {
             width: 120px;
             height: 180px;
             margin-bottom: 0;
@@ -169,13 +179,22 @@
             display: flex;
             flex-direction: column;
         }
+
+        .book-actions {
+            flex-direction: column;
+        }
+
+        .book-actions a {
+            flex: initial;
+            width: 100%;
+        }
     }
 
     /* Mobile layout: cover centered at top, content below */
     @media (max-width: 767px) {
         .book-card-cover {
             text-align: center;
-            margin-bottom: 15px;
+            margin-bottom: 10px;
         }
 
         .book-card-cover img {
@@ -233,7 +252,7 @@
     }
     
     .book-actions {
-        margin-top: 15px;
+        margin-top: 0;
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
@@ -367,15 +386,22 @@
             <div class="books-grid">
                 {% for book in books %}
                     <div class="book-card">
-                        {% if book.cover_url %}
-                            <div class="book-card-cover">
-                                <img src="{{ book.cover_url }}" alt="{{ book.title }}" onerror="(() => { const div = document.createElement('div'); div.className = 'book-card-cover-placeholder'; div.textContent = '📖'; this.parentElement.innerHTML = ''; this.parentElement.appendChild(div); }).call(this)">
-                            </div>
-                        {% else %}
-                            <div class="book-card-cover">
-                                <div class="book-card-cover-placeholder">📖</div>
+                        <div class="book-card-left">
+                            {% if book.cover_url %}
+                                <div class="book-card-cover">
+                                    <img src="{{ book.cover_url }}" alt="{{ book.title }}" onerror="(() => { const div = document.createElement('div'); div.className = 'book-card-cover-placeholder'; div.textContent = '📖'; this.parentElement.innerHTML = ''; this.parentElement.appendChild(div); }).call(this)">
+                                </div>
+                            {% else %}
+                                <div class="book-card-cover">
+                                    <div class="book-card-cover-placeholder">📖</div>
+                                </div>
+                            {% endif %}
+
+                            <div class="book-actions">
+                                <a href="{{ url_for('edit_book', id=book.id) }}" class="btn btn-secondary">Edit</a>
+                                <a href="{{ url_for('delete_book', id=book.id) }}" class="btn btn-danger" onclick="return confirm('Are you sure?')">Delete</a>
                             </div>
-                        {% endif %}
+                        </div>
 
                         <div class="book-card-content">
                             <h3>{{ book.title }}</h3>
@@ -419,10 +445,6 @@ <h3>{{ book.title }}</h3>
                                 <div class="notes">{{ book.notes }}</div>
                             {% endif %}
                             
-                            <div class="book-actions">
-                                <a href="{{ url_for('edit_book', id=book.id) }}" class="btn btn-secondary">Edit</a>
-                                <a href="{{ url_for('delete_book', id=book.id) }}" class="btn btn-danger" onclick="return confirm('Are you sure?')">Delete</a>
-                            </div>
                         </div>
                     </div>
             {% endfor %}