diff --git a/static/skin/index.css b/static/skin/index.css
index 3fd1fd716..769397fe6 100644
--- a/static/skin/index.css
+++ b/static/skin/index.css
@@ -177,7 +177,7 @@ body {
     max-height: 100%;
 }
 
-.book__title {
+.book__header {
     display: grid;
     font-family: poppins;
     color: black;
@@ -188,18 +188,33 @@ body {
     align-content: center;
 }
 
-#bookTitle {
+.book__title {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     font-size: 1.45rem;
 }
 
-#bookDownload {
+.book__download {
     font-size: 1.1rem;
     margin: 3px 0;
 }
 
+.book__download > span {
+    cursor: pointer;
+    text-decoration: none;
+    position: relative;
+    padding: 0 3px 1px;
+    font-family: roboto;
+    background: #00b4e4;
+    color: white;
+    box-shadow: 0 0 0 0;
+}
+
+.book__download > span:hover {
+    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1)
+}
+
 .book__description {
     grid-column: 1 / 3;
     margin: 10px 10px 5px;
@@ -250,21 +265,6 @@ body {
     -webkit-box-orient: vertical;
 }
 
-#bookDownload > span {
-    cursor: pointer;
-    text-decoration: none;
-    position: relative;
-    padding: 0 3px 1px;
-    font-family: roboto;
-    background: #00b4e4;
-    color: white;
-    box-shadow: 0 0 0 0;
-}
-
-#bookDownload > span:hover {
-    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1)
-}
-
 .modal-wrapper {
     position: fixed;
     z-index: 100;
diff --git a/static/skin/index.js b/static/skin/index.js
index 09ca8db59..033ae01f9 100644
--- a/static/skin/index.js
+++ b/static/skin/index.js
@@ -106,9 +106,9 @@
         divTag.innerHTML = `<a class="book__link" href="${root}${link}" data-hover="Preview">
             <div class="book__wrapper">
             <div class="book__icon"><img class="book__icon--image" src="${root}${iconUrl}"></div>
-            <div class="book__title">
-                <div id="bookTitle">${title}</div>
-                ${downloadLink ? `<div id="bookDownload"><span data-link="${downloadLink}" class="modal-button">Download ${humanFriendlyZimSize ? ` - ${humanFriendlyZimSize}</span></div>`: ''}` : ''}
+            <div class="book__header">
+                <div id="book__title">${title}</div>
+                ${downloadLink ? `<div class="book__download"><span data-link="${downloadLink}">Download ${humanFriendlyZimSize ? ` - ${humanFriendlyZimSize}</span></div>`: ''}` : ''}
             </div>
             <div class="book__description" title="${description}">${description}</div>
             <div class="book__languageTag">${language.substr(0, 2).toUpperCase()}</div>
@@ -307,7 +307,7 @@
         booksToDelete.forEach(book => {iso.remove(book);});
         books.forEach((book) => {
             iso.insert(generateBookHtml(book, sort))
-            const downloadButton = document.querySelector(`[data-id="${getInnerHtml(book, 'id')}"] .modal-button`);
+            const downloadButton = document.querySelector(`[data-id="${getInnerHtml(book, 'id')}"] .book__download`);
             if (downloadButton) {
                 insertModal(downloadButton);
             }