diff --git a/static/resources_list.txt b/static/resources_list.txt
index fb45dce55..383c8228e 100644
--- a/static/resources_list.txt
+++ b/static/resources_list.txt
@@ -19,8 +19,9 @@ skin/jquery-ui/jquery-ui.theme.min.css
 skin/jquery-ui/jquery-ui.min.css
 skin/caret.png
 skin/taskbar.js
-skin/langList.json
-skin/categoryList.json
+skin/langList.js
+skin/categoryList.js
+skin/iso6391To3.js
 skin/isotope.pkgd.min.js
 skin/index.js
 skin/taskbar.css
diff --git a/static/skin/categoryList.json b/static/skin/categoryList.js
similarity index 89%
rename from static/skin/categoryList.json
rename to static/skin/categoryList.js
index cd1f3a7f6..a5f6b2345 100644
--- a/static/skin/categoryList.json
+++ b/static/skin/categoryList.js
@@ -1,4 +1,5 @@
-{
+/* exported variableName */
+var categoryList = {
   "other": "Other",
   "gutenberg": "Gutenberg",
   "mooc": "Mooc",
diff --git a/static/skin/index.js b/static/skin/index.js
index 6d3296797..8ab849bbf 100644
--- a/static/skin/index.js
+++ b/static/skin/index.js
@@ -1,14 +1,15 @@
 (function() {
     const root = $(`link[type='root']`).attr('href');
-    let isFetching = false;
-    let iso;
-    let bookMap = {};
     const incrementalLoadingParams = {
         start: 0,
         count: viewPortToCount()
     };
-    let params = new URLSearchParams(window.location.search);
     const filterTypes = ['lang', 'category', 'q'];
+    let iso;
+    let isFetching = false;
+    let noResultInjected = false;
+    let params = new URLSearchParams(window.location.search);
+    let bookMap = {};
 
     function queryUrlBuilder() {
         let url = `${root}/catalog/search?`;
@@ -58,26 +59,50 @@
             incrementalLoadingParams.start += books.length;
             if (books.length < incrementalLoadingParams.count) {
                 incrementalLoadingParams.count = 0;
-    }
+            }
             return books;
         });
     }
 
     async function loadAndDisplayOptions(nodeQuery, query) {
-        // currently taking an array in place of query, will replace it with query while fetching data from backend later on.
-        await fetch(query)
-        .then(async (resp) => {
-            const data = await resp.json();
-            Object.keys(data).forEach((option) => {
-                document.querySelector(nodeQuery).innerHTML += `<option value='${option}'>${data[option]}</option>`;
-            });
-        });
+        // currently taking an object in place of query, will replace it with query while fetching data from backend later on.
+        document.querySelector(nodeQuery).innerHTML += Object.keys(query)
+            .map((option) => {return `<option value='${option}'>${query[option]}</option>`})
+        .join('');
+    }
+
+    function checkAndInjectEmptyMessage() {
+        const kiwixBodyDiv = document.getElementsByClassName('kiwixHomeBody')[0];
+        if (!Object.keys(bookMap).length) {
+            noResultInjected = true;
+            iso.remove(document.getElementsByClassName('book__list')[0].getElementsByTagName('a'));
+            iso.layout();
+            const spanTag = document.createElement('span');
+            spanTag.setAttribute('class', 'noResults');
+            spanTag.innerHTML = `No result. Would you like to <a href="">reset filter?</a>`;
+            kiwixBodyDiv.append(spanTag);
+            spanTag.getElementsByTagName('a')[0].onclick = (event) => {
+                event.preventDefault();
+                window.history.pushState({}, null, `${window.location.href.split('?')[0]}`);
+                resetAndFilter();
+                filterTypes.forEach(key => {document.getElementsByName(key)[0].value = params.get(key) || ''});
+            };
+            return true;
+        } else if (noResultInjected) {
+            noResultInjected = false;
+            kiwixBodyDiv.getElementsByClassName('noResults')[0].remove();
+        }
+        return false;
     }
 
     async function loadAndDisplayBooks(sort = false) {
         if (isFetching) return;
         isFetching = true;
         let books = await loadBooks();
+        if (checkAndInjectEmptyMessage()) {
+            isFetching = false;
+            return;
+        }
         const booksToFilter = new Set();
         const booksToDelete = new Set();
         iso.arrange({
@@ -102,29 +127,26 @@
         isFetching = false;
     }
 
-    async function filterBooks(filterType, filterValue) {
+    async function resetAndFilter(filterType = '', filterValue = '') {
         isFetching = false;
         incrementalLoadingParams.start = 0;
         incrementalLoadingParams.count = viewPortToCount();
         bookMap = {};
         params = new URLSearchParams(window.location.search);
-        if (!filterValue) {
-            params.delete(filterType);
-        } else {
-            params.set(filterType, filterValue);
+        if (filterType) {
+            if (!filterValue) {
+                params.delete(filterType);
+            } else {
+                params.set(filterType, filterValue);
+            }
+            window.history.pushState({}, null, `${window.location.href.split('?')[0]}?${params.toString()}`);
         }
-        window.history.pushState({}, null, `${window.location.href.split('?')[0]}?${params.toString()}`);
         await loadAndDisplayBooks(true);
     }
 
     window.addEventListener('popstate', async () => {
-        bookMap = {};
-        isFetching = false;
-        incrementalLoadingParams.start = 0;
-        incrementalLoadingParams.count = viewPortToCount();
-        params = new URLSearchParams(window.location.search);
+        await resetAndFilter();
         filterTypes.forEach(key => {document.getElementsByName(key)[0].value = params.get(key) || ''});
-        loadAndDisplayBooks(true);
     });
 
     async function loadSubset() {
@@ -151,16 +173,24 @@
                 },
                 sortBy: 'weight'
         });
-        loadAndDisplayBooks();
-        loadAndDisplayOptions('#languageFilter', `${root}/skin/langList.json`);
-        loadAndDisplayOptions('#categoryFilter', `${root}/skin/categoryList.json`);
-        for (const key of params.keys()) {
-            document.getElementsByName(key)[0].value = params.get(key);
-        }
+        await loadAndDisplayBooks();
+        await loadAndDisplayOptions('#languageFilter', langList);
+        await loadAndDisplayOptions('#categoryFilter', categoryList);
         filterTypes.forEach((filter) => {
             const filterTag = document.getElementsByName(filter)[0];
-            filterTag.addEventListener('change', () => {filterBooks(filterTag.name, filterTag.value)});
+            filterTag.addEventListener('change', () => {resetAndFilter(filterTag.name, filterTag.value)});
         });
-        document.getElementById('kiwixSearchForm').onsubmit = (event) => {event.preventDefault()}
+        params.forEach((value, key) => {document.getElementsByName(key)[0].value = value});
+        document.getElementById('kiwixSearchForm').onsubmit = (event) => {event.preventDefault()};
+        if (!window.location.search) {
+            const browserLang = navigator.language.split('-')[0];
+            if (browserLang.length === 3) {
+                document.getElementById('languageFilter').value = browserLang;
+            } else {
+                const langFilter = document.getElementById('languageFilter');
+                langFilter.value = iso6391To3[browserLang];
+                langFilter.dispatchEvent(new Event('change'));
+            }
+        }
     }
 })();
diff --git a/static/skin/iso6391To3.js b/static/skin/iso6391To3.js
new file mode 100644
index 000000000..fd131a59f
--- /dev/null
+++ b/static/skin/iso6391To3.js
@@ -0,0 +1,124 @@
+/* exported variableName */
+var iso6391To3 = {
+    "aa": "aar",
+    "af": "afr",
+    "ak": "aka",
+    "am": "amh",
+    "ar": "ara",
+    "as": "asm",
+    "az": "aze",
+    "ba": "bak",
+    "be": "bel",
+    "bg": "bul",
+    "bm": "bam",
+    "bn": "ben",
+    "bo": "bod",
+    "br": "bre",
+    "bs": "bos",
+    "ca": "cat",
+    "ce": "che",
+    "co": "cos",
+    "cs": "ces",
+    "cv": "chv",
+    "cy": "cym",
+    "da": "dan",
+    "de": "deu",
+    "dz": "dzo",
+    "ee": "ewe",
+    "en": "eng",
+    "es": "spa",
+    "et": "est",
+    "eu": "eus",
+    "fa": "fas",
+    "ff": "ful",
+    "fi": "fin",
+    "fo": "fao",
+    "fr": "fra",
+    "ga": "gle",
+    "gl": "glg",
+    "gn": "grn",
+    "gu": "guj",
+    "gv": "glv",
+    "ha": "hau",
+    "he": "heb",
+    "hi": "hin",
+    "hr": "hrv",
+    "hu": "hun",
+    "hy": "hye",
+    "id": "ind",
+    "ig": "ibo",
+    "is": "isl",
+    "it": "ita",
+    "iu": "iku",
+    "ja": "jpn",
+    "jv": "jav",
+    "ka": "kat",
+    "ki": "kik",
+    "kk": "kaz",
+    "km": "khm",
+    "kn": "kan",
+    "ko": "kor",
+    "ks": "kas",
+    "ku": "kur",
+    "kw": "cor",
+    "ky": "kir",
+    "lb": "ltz",
+    "lg": "lug",
+    "ln": "lin",
+    "lo": "lao",
+    "lt": "lit",
+    "lv": "lav",
+    "mg": "mlg",
+    "mi": "mri",
+    "mk": "mkd",
+    "ml": "mal",
+    "mn": "mon",
+    "mr": "mar",
+    "mt": "mlt",
+    "my": "mya",
+    "nl": "nld",
+    "ny": "nya",
+    "om": "orm",
+    "pl": "pol",
+    "pt": "por",
+    "qu": "que",
+    "rm": "roh",
+    "rn": "run",
+    "ro": "ron",
+    "ru": "rus",
+    "rw": "kin",
+    "sa": "san",
+    "sd": "snd",
+    "sg": "sag",
+    "si": "sin",
+    "sk": "slk",
+    "sl": "slv",
+    "sn": "sna",
+    "so": "som",
+    "sq": "sqi",
+    "sr": "srp",
+    "ss": "ssw",
+    "sv": "swe",
+    "ta": "tam",
+    "te": "tel",
+    "tg": "tgk",
+    "th": "tha",
+    "ti": "tir",
+    "tk": "tuk",
+    "tn": "tsn",
+    "tr": "tur",
+    "ts": "tso",
+    "tt": "tat",
+    "ug": "uig",
+    "uk": "ukr",
+    "ur": "urd",
+    "uz": "uzb",
+    "ve": "ven",
+    "vi": "vie",
+    "wa": "wln",
+    "wo": "wol",
+    "xh": "xho",
+    "yo": "yor",
+    "zh": "zho",
+    "zu": "zul"
+}
\ No newline at end of file
diff --git a/static/skin/langList.json b/static/skin/langList.js
similarity index 98%
rename from static/skin/langList.json
rename to static/skin/langList.js
index c56d7c65a..dfeae89ca 100644
--- a/static/skin/langList.json
+++ b/static/skin/langList.js
@@ -1,4 +1,5 @@
-{
+/* exported variableName */
+var langList = {
   "aar": "Afar",
   "afr": "Afrikaans",
   "aka": "Akan",
diff --git a/static/templates/index.html b/static/templates/index.html
index a06618233..db457b8db 100644
--- a/static/templates/index.html
+++ b/static/templates/index.html
@@ -36,6 +36,10 @@
       .book__list {
         text-align: center;
       }
+      .kiwixHomeBody {
+        padding: 30px 0;
+        text-align: center;
+      }
       .book {
         display: inline-block;
         vertical-align: bottom;
@@ -111,6 +115,9 @@
       }
     </style>
     <script src="{{root}}/skin/isotope.pkgd.min.js" defer></script>
+    <script src="{{root}}/skin/categoryList.js"></script>
+    <script src="{{root}}/skin/langList.js"></script>
+    <script src="{{root}}/skin/iso6391To3.js"></script>
     <script type="text/javascript" src="{{root}}/skin/index.js" defer></script>
   </head>
   <body class="kiwix">
@@ -119,7 +126,7 @@
         <option value="" selected>All languages</option>
       </select>
       <select name="category" id="categoryFilter" class='kiwixFilter'>
-        <option value="" selected>ALl categories</option>
+        <option value="" selected>All categories</option>
       </select>
       <form id='kiwixSearchForm' class='kiwixSearchForm'>
         <input type="text" name="q" id="searchFilter" class='kiwixSearch'>