diff --git a/static/skin/home.css b/static/skin/home.css
index c7d444f32..221c6c472 100644
--- a/static/skin/home.css
+++ b/static/skin/home.css
@@ -95,21 +95,31 @@ body {
 }
 
 .book__title {
-    display: flex;
-    align-items: center;
-    font-weight: 500;
-    font-size: 1.3rem;
+    display: block;
     font-family: poppins;
     color: black;
     margin: 10px 10px 0 0;
 }
 
-.book__description {
-    grid-column: 1 / 3;
-    margin: 0.5px 10px;
+#bookSize {
+    font-size: 1.1rem;
+    margin: 3px 0;
+}
+
+#bookTitle {
     overflow: hidden;
     display: -webkit-box;
-    -webkit-line-clamp: 8;
+    font-size: 1.45rem;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.book__description {
+    grid-column: 1 / 3;
+    margin: 10px 10px 5px 10px;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 7;
     -webkit-box-orient: vertical;
     font-family: roboto;
     font-weight: 300;
@@ -130,6 +140,7 @@ body {
     width: 25px;
     margin: 10px auto 0 10px;
     border-radius: 5px;
+    font-size: 0.85rem;
 }
 
 .book__tags {
@@ -143,20 +154,43 @@ body {
 }
 
 .book__links {
+    display: flex;
+    text-align: end;
+    justify-content: flex-end;
     grid-column: 2 / 3;
     font-size: 1.1rem;
     margin: 10px;
+    color: #00b4e4;
 }
 
 .book__links > a, .book__links > span {
     text-decoration: none;
-    display: flex;
-    text-align: -webkit-right;
-    justify-content: flex-end;
+    color: #00b4e4;
+    position: relative;
+    padding: 0.2rem 0.6rem 0 0.6rem;
 }
 
-.book__links > a {
-    color: #00b4e4;
+.book__links > a::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transform: scaleY(0);
+    transform-origin: bottom center;
+    background: #00b4e4;
+    color: white;
+    z-index: -1;
+    transition: transform 0.3s;
+}
+
+.book__links > a:hover::after {
+    transform: scaleY(1);
+}
+
+.book__links > a:hover {
+    color: white;
 }
 
 .book__links > span {
diff --git a/static/skin/index.js b/static/skin/index.js
index 12a051309..82dc3cc34 100644
--- a/static/skin/index.js
+++ b/static/skin/index.js
@@ -42,6 +42,17 @@
         return result;
     }
 
+    const humanFriendlySize = (fileSize) => {
+        if (fileSize === 0) {
+            return 'unkown';
+        }
+        const units = ['bytes', 'kB', 'MB', 'GB', 'TB'];
+        let quotient = Math.floor(Math.log10(fileSize) / 3);
+        quotient = quotient < units.length ? quotient : units.length - 1;
+        fileSize /= (1000 ** quotient);
+        return `${+fileSize.toFixed(2)} ${units[quotient]}`;
+      };      
+
     function htmlEncode(str) {
         return str.replace(/[\u00A0-\u9999<>\&]/gim, (i) => `&#${i.charCodeAt(0)};`);
     }
@@ -75,26 +86,31 @@
             })
             .filter((tag, index, tags) => tags.indexOf(tag) === index).join(' | ');
         let downloadLink;
+        let zimSize = 0;
         try {
-            downloadLink = book.querySelector('link[type="application/x-zim"]').getAttribute('href').split('.meta4')[0];
+            const downloadBookLink = book.querySelector('link[type="application/x-zim"]')
+            zimSize = parseInt(downloadBookLink.getAttribute('length'));
+            downloadLink = downloadBookLink.getAttribute('href').split('.meta4')[0];
         } catch {
             downloadLink = '';
         }
 
-        const linkTag = document.createElement('a');
-        linkTag.setAttribute('class', 'book');
-        linkTag.setAttribute('data-id', id);
-        linkTag.setAttribute('href', link);
+        const divTag = document.createElement('div');
+        divTag.setAttribute('class', 'book');
+        divTag.setAttribute('data-id', id);
         if (sort) {
-            linkTag.setAttribute('data-idx', bookOrderMap.get(id));
+            divTag.setAttribute('data-idx', bookOrderMap.get(id));
         }
-        linkTag.innerHTML = `<div class="book__wrapper"><div class='book__icon' ><img src='${iconUrl}'></div>
-            <div class='book__title' title='${title}'>${title}</div>
+        divTag.innerHTML = `<div class="book__wrapper"><div class='book__icon' ><img src='${iconUrl}'></div>
+            <div class='book__title' title='${title}'>
+                <div id='bookSize'>${humanFriendlySize(zimSize)}</div>
+                <div id="bookTitle">${title}</div>
+            </div>
             <div class='book__description' title='${description}'>${description}</div>
             <div class='book__languageTag'>${language.substr(0, 2).toUpperCase()}</div>
             <div class='book__tags'>${tagHtml}</div>
-            <div class='book__links'> ${downloadLink ? `<a href="${downloadLink}" download>Download</a>` : `<span>Download</span>`} </div></div>`;
-        return linkTag;
+            <div class='book__links'> <a href="${link}" data-hover="Preview">Preview</a>&nbsp;|&nbsp;${downloadLink ? `<a href="${downloadLink}" data-hove="Download" download>Download</a>` : `<span>Download</span>`} </div></div>`;
+        return divTag;
     }
 
     function toggleFooter(show=false) {
@@ -140,21 +156,23 @@
         if (!bookOrderMap.size) {
             if (!noResultInjected) {
                 noResultInjected = true;
-                iso.remove(document.getElementsByClassName('book__list')[0].getElementsByTagName('a'));
+                iso.remove(document.getElementsByClassName('book__list')[0].getElementsByTagName('div'));
                 iso.layout();
-                const divTag = document.createElement('div');
-                divTag.setAttribute('class', 'noResults');
-                divTag.innerHTML = `No result. Would you like to<a href="/?lang="> reset filter?</a>`;
-                kiwixHomeBody.append(divTag);
-                kiwixHomeBody.setAttribute('style', 'display: flex; justify-content: center; align-items: center');
-                divTag.getElementsByTagName('a')[0].onclick = (event) => {
-                    event.preventDefault();
-                    window.history.pushState({}, null, `${window.location.href.split('?')[0]}?lang=`);
-                    setCookie(filterCookieName, 'lang=');
-                    resetAndFilter();
-                    filterTypes.forEach(key => {document.getElementsByName(key)[0].value = params.get(key) || ''});
-                };
-                loader.setAttribute('style', 'position: absolute; top: 50%');
+                setTimeout(() => {
+                    const divTag = document.createElement('div');
+                    divTag.setAttribute('class', 'noResults');
+                    divTag.innerHTML = `No result. Would you like to<a href="/?lang="> reset filter?</a>`;
+                    kiwixHomeBody.append(divTag);
+                    kiwixHomeBody.setAttribute('style', 'display: flex; justify-content: center; align-items: center');
+                    divTag.getElementsByTagName('a')[0].onclick = (event) => {
+                        event.preventDefault();
+                        window.history.pushState({}, null, `${window.location.href.split('?')[0]}?lang=`);
+                        setCookie(filterCookieName, 'lang=');
+                        resetAndFilter();
+                        filterTypes.forEach(key => {document.getElementsByName(key)[0].value = params.get(key) || ''});
+                    };
+                    loader.setAttribute('style', 'position: absolute; top: 50%');
+                }, 300);
             }
             return true;
         } else if (noResultInjected) {