diff --git a/static/skin/home.css b/static/skin/home.css
index f49548b86..04d3be7ef 100644
--- a/static/skin/home.css
+++ b/static/skin/home.css
@@ -141,6 +141,10 @@ body {
     border-color: #acacac;
 }
 
+.book__link {
+    text-decoration: none;
+}
+
 .book__wrapper {
     color: #444343;
     height: 280px;
@@ -453,4 +457,4 @@ body {
     .kiwixHomeBody {
         padding: 20px 5vw;
     }
-}
\ No newline at end of file
+}
diff --git a/static/skin/index.js b/static/skin/index.js
index ae4484deb..d632f3939 100644
--- a/static/skin/index.js
+++ b/static/skin/index.js
@@ -103,7 +103,9 @@
         if (sort) {
             divTag.setAttribute('data-idx', bookOrderMap.get(id));
         }
-        divTag.innerHTML = `<div class="book__wrapper"><div class='book__icon' ><img class="book__icon--image" src='${root}${iconUrl}'></div>
+        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' title='${title}'>
                 <div id="bookTitle">${title}</div>
                 ${humanFriendlyZimSize ? `<div id='bookSize'>${humanFriendlyZimSize}</div>`: ''}
@@ -111,7 +113,7 @@
             <div class='book__description' title='${description}'>${description}</div>
             <div class='book__languageTag'>${language.substr(0, 2).toUpperCase()}</div>
             <div class='book__tags'><div class="book__tags--wrapper">${tagHtml}</div></div>
-            <div class='book__links'> <a href="${root}${link}" data-hover="Preview">Preview</a>${downloadLink ? `&nbsp;|&nbsp;<span class="download" data-link=${downloadLink} class="modal-button">Download</span>` : ''} </div></div>`;
+            ${downloadLink ? `<div class='book__links'><span class="download" data-link=${downloadLink} class="modal-button">Download</span></div>` : ''} </div></div></a>`;
         return divTag;
     }
 
@@ -126,7 +128,8 @@
 
     function insertModal(button) {
         const downloadLink = button.getAttribute('data-link');
-        button.addEventListener('click', () => {
+        button.addEventListener('click', (event) => {
+            event.preventDefault();
             document.body.insertAdjacentHTML('beforeend', `<div class="modal-wrapper">
                 <div class="modal">
                     <div class="modal-heading">