diff --git a/package-lock.json b/package-lock.json
index bcaa779..8528f08 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,12 @@
       "name": "atsphinx-mini18n",
       "version": "0.4.0",
       "license": "Apache-2.0",
+      "dependencies": {
+        "js-cookie": "^3.0.5"
+      },
       "devDependencies": {
         "@biomejs/biome": "^1.7.3",
+        "@types/js-cookie": "^3.0.6",
         "esbuild": "^0.21.3",
         "typescript": "^5.4.5"
       }
@@ -537,6 +541,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true
+    },
     "node_modules/esbuild": {
       "version": "0.21.3",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.3.tgz",
@@ -575,6 +585,14 @@
         "@esbuild/win32-x64": "0.21.3"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.4.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
diff --git a/package.json b/package.json
index 597cb4d..2790be8 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.7.3",
+    "@types/js-cookie": "^3.0.6",
     "esbuild": "^0.21.3",
     "typescript": "^5.4.5"
   },
@@ -19,5 +20,8 @@
   "license": "Apache-2.0",
   "volta": {
     "node": "20.13.1"
+  },
+  "dependencies": {
+    "js-cookie": "^3.0.5"
   }
 }
diff --git a/src/atsphinx/mini18n/templates/mini18n/snippets/select-lang.html b/src/atsphinx/mini18n/templates/mini18n/snippets/select-lang.html
index 0a4b16c..fcd1d4c 100644
--- a/src/atsphinx/mini18n/templates/mini18n/snippets/select-lang.html
+++ b/src/atsphinx/mini18n/templates/mini18n/snippets/select-lang.html
@@ -6,15 +6,22 @@
   </style>
   <div>
     <label for="atsphinx-mini18n-select-lang">{{ mini18n.select_lang_label }}</label>
-    <select name="lang" onchange="{
-                        const values = value.split('@@');
-                        document.cookie = `lang=${values[0]}; path=/; samesite=Strict; max-age=${60*60*24*400};`;
-                        location.href=values[1];
-                        }" id="atsphinx-mini18n-select-lang">
+    <select name="lang" id="atsphinx-mini18n-select-lang">
       {%- for code in mini18n.support_languages %}
-      <option value="{{ code }}@@{{ pathto('../' + code + '/', 1) }}{{ pathto(pagename, 0, '.') }}" {%- if code==language %}
-        selected {%- endif %}>{{ code }}</option>
+      <option
+        value="{{ code }}"
+        data-url="{{ pathto('../' + code + '/', 1) }}{{ pathto(pagename, 0, '.') }}"
+        {%- if code==language %}selected{%- endif %}
+      >
+        {{ code }}
+      </option>
       {%- endfor %}
     </select>
+    <script type="module">
+      import { Widget } from "./{{ pathto('_static/atsphinx-mini18n.js', 1) }}";
+      document.addEventListener("DOMContentLoaded", () => {
+        document.querySelector("#atsphinx-mini18n-select-component select").addEventListener("change", Widget.redirectBySelect);
+      })
+    </script>
   </div>
 </div>
diff --git a/src/frontend/main.ts b/src/frontend/main.ts
index 8068ed0..d6444e4 100644
--- a/src/frontend/main.ts
+++ b/src/frontend/main.ts
@@ -1,6 +1,36 @@
 /**
  * Module to manage cross-move into i18n sites.
  */
+import Cookies from "js-cookie";
 import * as packageJson from "../../package.json";
 
+const COOKIE_SELECTED_LANG = "lang";
+const COOKIE_MAX_AGE_DAYS = 400;
+
+/**
+ * Redirect page of selected language.
+ */
+const redirectWithRemember = (lang: string, url: string) => {
+  Cookies.set(COOKIE_SELECTED_LANG, lang, {
+    sameSite: "strict",
+    path: "/",
+    expires: new Date(
+      new Date().getTime() + 1000 * 60 * 60 * 24 * COOKIE_MAX_AGE_DAYS,
+    ),
+  });
+  location.href = url;
+};
+
+/**
+ * Handlers for HTML
+ */
+export namespace Widget {
+  export const redirectBySelect = (e: Event) => {
+    //
+    const langCode = e.target.value;
+    const langUrl = e.target.selectedOptions[0].dataset.url;
+    redirectWithRemember(langCode, langUrl);
+  };
+}
+
 console.debug(`Current version is ${packageJson.version}`);