diff --git a/static/skin/i18n.js b/static/skin/i18n.js
index 6c5eb0ad..53c11c7f 100644
--- a/static/skin/i18n.js
+++ b/static/skin/i18n.js
@@ -97,7 +97,51 @@ function setUserLanguage(lang, callback) {
   Translations.whenReady(callback);
 }
 
+function createModalUILanguageSelector() {
+  document.body.insertAdjacentHTML('beforeend',
+    `<div id="uiLanguageSelector" class="modal-wrapper">
+      <div class="modal">
+        <div class="modal-heading">
+          <div class="modal-title">
+            <div>
+                Select UI language
+            </div>
+          </div>
+          <div onclick="window.modalUILanguageSelector.close()" class="modal-close-button">
+            <div>
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.7071 1.70711C14.0976 1.31658 14.0976
+                  0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711
+                  0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417
+                  -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834
+                  -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7
+                  8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166
+                  14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z" fill="black" />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div class="modal-content">
+          <select id="ui_language"></select>
+        </div>
+      </div>
+    </div>`);
+
+  window.modalUILanguageSelector = {
+    show: () => {
+      document.getElementById('uiLanguageSelector').style.display = 'flex';
+    },
+
+    close: () => {
+      document.getElementById('uiLanguageSelector').style.display = 'none';
+    }
+  };
+}
+
 function initUILanguageSelector(activeLanguage, languageChangeCallback) {
+  if ( document.getElementById("ui_language") == null ) {
+    createModalUILanguageSelector();
+  }
   const languageSelector = document.getElementById("ui_language");
   for (const lang of uiLanguages ) {
     const lang_name = Object.getOwnPropertyNames(lang)[0];
diff --git a/static/skin/index.css b/static/skin/index.css
index e0d43fbb..df0b33ff 100644
--- a/static/skin/index.css
+++ b/static/skin/index.css
@@ -157,9 +157,26 @@ body {
     font-weight: bolder;
 }
 
-#ui_language {
+#uiLanguageSelector {
+  display: none;
+}
+
+#uiLanguageSelector .modal {
+  height: 140px;
+}
+
+#uiLanguageSelector .modal-heading {
+  height: 40%;
+}
+
+#uiLanguageSelector .modal-content #ui_language {
+  font-size: 1.6rem;
+  width: 100%;
+}
+
+#uiLanguageSelectorButton {
+  margin: 16px 12px 0 0;
   float: right;
-  top: 0;
 }
 
 .book__list {
diff --git a/static/skin/index.js b/static/skin/index.js
index 06147f88..c87a4787 100644
--- a/static/skin/index.js
+++ b/static/skin/index.js
@@ -33,6 +33,7 @@
     }
 
     function changeUILanguage() {
+      window.modalUILanguageSelector.close();
       const s = document.getElementById("ui_language");
       const lang = s.options[s.selectedIndex].value;
       setPermanentGlobalCookie('userlang', lang);
diff --git a/static/templates/index.html b/static/templates/index.html
index aae63a6a..6bbe6d12 100644
--- a/static/templates/index.html
+++ b/static/templates/index.html
@@ -52,9 +52,18 @@
            aria-label="Library OPDS Feed"
            title="Library OPDS Feed">
     </a>
+    <a onclick="window.modalUILanguageSelector.show()">
+      <svg xmlns="http://www.w3.org/2000/svg"
+           id="uiLanguageSelectorButton"
+           width="30"
+           height="30"
+           viewBox="0 0 20 20">
+        <g fill="#36c">
+          <path d="M20 18h-1.44a.61.61 0 0 1-.4-.12.81.81 0 0 1-.23-.31L17 15h-5l-1 2.54a.77.77 0 0 1-.22.3.59.59 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a11.62 11.62 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.43 13.43 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.19 17.19 0 0 1-5 2.1q.56.82.87 1.38a23.28 23.28 0 0 0 5.22-2.51 15.64 15.64 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.11 8.11 0 0 1-2.45 4.45 9.11 9.11 0 0 1-2.46-4.45z"/>
+        </g>
+      </svg>
+    </a>
     <div class='kiwixNav'>
-      <select id="ui_language">
-      </select>
       <div class="kiwixNav__filters">
         <div class="kiwixNav__select">
           <select name="lang" id="languageFilter" class='kiwixNav__kiwixFilter filter'>
@@ -85,7 +94,11 @@
   <script>
     function closeModal() {
       for(modal of document.getElementsByClassName('modal-wrapper')) {
-        modal.remove();
+        if ( modal.id == "uiLanguageSelector" ) {
+          window.modalUILanguageSelector.close();
+        } else {
+          modal.remove();
+        }
       }
     }
   </script>
diff --git a/test/server.cpp b/test/server.cpp
index ce3836c9..e0b13f93 100644
--- a/test/server.cpp
+++ b/test/server.cpp
@@ -59,11 +59,11 @@ const ResourceCollection resources200Compressible{
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/css/autoComplete.css" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/css/autoComplete.css?cacheid=08951e06" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/i18n.js" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/i18n.js?cacheid=c475fe0b" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/i18n.js?cacheid=2cf0f8c5" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.css?cacheid=ac5767d8" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.css?cacheid=489b1f15" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.js" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.js?cacheid=5b1775c2" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.js?cacheid=7348b4df" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/isotope.pkgd.min.js" },
@@ -270,7 +270,7 @@ TEST_F(ServerTest, CacheIdsOfStaticResources)
   const std::vector<UrlAndExpectedResult> testData{
     {
       /* url */ "/ROOT%23%3F/",
-R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=ac5767d8"
+R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=489b1f15"
     <link rel="apple-touch-icon" sizes="180x180" href="/ROOT%23%3F/skin/favicon/apple-touch-icon.png?cacheid=f86f8df3">
     <link rel="icon" type="image/png" sizes="32x32" href="/ROOT%23%3F/skin/favicon/favicon-32x32.png?cacheid=79ded625">
     <link rel="icon" type="image/png" sizes="16x16" href="/ROOT%23%3F/skin/favicon/favicon-16x16.png?cacheid=a986fedc">
@@ -280,11 +280,11 @@ R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=ac5767d8"
     <meta name="msapplication-config" content="/ROOT%23%3F/skin/favicon/browserconfig.xml?cacheid=f29a7c4a">
         src: url("/ROOT%23%3F/skin/fonts/Poppins.ttf?cacheid=af705837") format("truetype");
           src: url("/ROOT%23%3F/skin/fonts/Roboto.ttf?cacheid=84d10248") format("truetype");
-    <script type="module" src="/ROOT%23%3F/skin/i18n.js?cacheid=c475fe0b" defer></script>
+    <script type="module" src="/ROOT%23%3F/skin/i18n.js?cacheid=2cf0f8c5" defer></script>
     <script type="text/javascript" src="/ROOT%23%3F/skin/languages.js?cacheid=fe100348" defer></script>
     <script src="/ROOT%23%3F/skin/isotope.pkgd.min.js?cacheid=2e48d392" defer></script>
     <script src="/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3"></script>
-    <script type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=5b1775c2" defer></script>
+    <script type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=7348b4df" defer></script>
       <img src="/ROOT%23%3F/skin/feed.png?cacheid=56a672b1"
 )EXPECTEDRESULT"
     },
@@ -305,7 +305,7 @@ R"EXPECTEDRESULT(                                <img src="${root}/skin/download
       /* url */ "/ROOT%23%3F/viewer",
 R"EXPECTEDRESULT(    <link type="text/css" href="./skin/taskbar.css?cacheid=af241ff1" rel="Stylesheet" />
     <link type="text/css" href="./skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" />
-    <script type="module" src="./skin/i18n.js?cacheid=c475fe0b" defer></script>
+    <script type="module" src="./skin/i18n.js?cacheid=2cf0f8c5" defer></script>
     <script type="text/javascript" src="./skin/languages.js?cacheid=fe100348" defer></script>
     <script type="text/javascript" src="./skin/viewer.js?cacheid=d0c7f567" defer></script>
     <script type="text/javascript" src="./skin/autoComplete.min.js?cacheid=1191aaaf"></script>