diff --git a/booklist.html b/booklist.html
index 7f61f01..d502de4 100644
--- a/booklist.html
+++ b/booklist.html
@@ -149,7 +149,7 @@
             <h1><span class="icon icon_"></span>My Booklist</h1>
         </div>
         <div class="body">
-            <ul id="book-list">
+            <ul id="book-list" class="results">
 
             </ul>
         </div>
diff --git a/booklist.js b/booklist.js
index 2eb2d5b..04ea8e4 100644
--- a/booklist.js
+++ b/booklist.js
@@ -39,11 +39,20 @@ const displayUsingApi = false;
   }
 
   function makeListItem (id, book) {
-    const a = `<a href="${book.url}"><h3>${book.title}</h3></a>`
-    const li = `<li><div id="${id}" class="list-item"><img src="${book.imgSrc}"/>${a}<span>Author: ${book.author}</span>
-        <button title="Remove From Booklist" class="remove-from-booklist"
-            style="background-color: indianred;">-</button>
-    </div></li>`
+    const li = `<li class="booklink">
+                  <a class="link" href="${book.url}">
+                    <span id="${id}" class="cell leftcell with-cover">
+                      <img class="cover-thumb" src="${book.imgSrc}"/>
+                    </span>
+                    <span class="cell content">
+                      <span class="title">${book.title}</span>
+                      <span class="subtitle">Author: ${book.author}</span>
+                      <button title="Remove From Booklist" class="remove-from-booklist"
+                        style="background-color: indianred;">-</button>
+                    </span>
+                    <span class="hstrut"></span>
+                  </a>
+                </li>`
     return li
   }
 })(jQuery) // eslint-disable-line