diff --git a/index.html b/index.html
index 40ffdba..32c8bec 100644
--- a/index.html
+++ b/index.html
@@ -26,14 +26,14 @@
 
   <!-- popup to add more keys to screen -->
   <section id="keyPool" class="tabmenu">
-    <h2>Add keys</h2>
-    <input type="search" id="keyPoolInput" placeholder="Search" oninput="buildOptions()">
+    <h2 data-i18n="menus.addkeys.title">Add keys</h2>
+    <input type="search" id="keyPoolInput" placeholder="🔎︎ Search" oninput="buildOptions()">
     <div id="keyPoolOptions"></div>
   </section>
 
   <!-- optional logging information -->
   <div id="optionalInfo">
-    <h1 id="values">Start pressing!</h1>
+    <h1 id="values" data-i18n="menus.extrainfo.initialhint">Start pressing!</h1>
     <hr>
     <h2 id="output"></h2>
   </div>
@@ -42,24 +42,24 @@ <h2 id="output"></h2>
   <div id="toolbar" class="mouseOver">
     <!-- settings popup menu -->
     <div id="settings" class="tabmenu">
-      <h2>Customisation</h2>
+      <h2 data-i18n="menus.customise.title">Customise</h2>
       <section class="flexRows">
-        <div>Active:
+        <div><span data-i18n="menus.customise.active">Active:</span>
           <input type="color" id="activeColorPicker" >
         </div>
-        <div>Inactive:
+        <div><span data-i18n="menus.customise.inactive">Inactive:</span>
           <input type="color" id="inactiveColorPicker">
         </div>
-        <div>Accent:
+        <div><span data-i18n="menus.customise.accent">Accent:</span>
           <input type="color" id="accentColorPicker">
         </div>
-        <div>Key Background:
+        <div><span data-i18n="menus.customise.keybackground">Key Background:</span>
           <input type="color" id="keyBgColorPicker">
         </div>
-        <div>Key Opacity:
+        <div><span data-i18n="menus.customise.keyopacity">Key Opacity:</span>
           <input type="range" step=0.1 min=0 max=1 id="keyBgOpacityPicker">
         </div>
-        <div>Background:
+        <div><span data-i18n="menus.customise.background">Background:</span>
           <input type="color" id="backgroundColorPicker">
         </div>
       </section>
@@ -67,19 +67,19 @@ <h2>Customisation</h2>
       <hr>
 
       <section class="flexRows">
-        <div>Accessiblity mode:
+        <div><span data-i18n="menus.customise.accessiblitymode">Accessiblity mode:</span>
           <label class="switch">
             <input type="checkbox" id="inputCheckbox">
             <span class="slider round"></span>
           </label>
         </div>
-        <div>Round progress:
+        <div><span data-i18n="menus.customise.roundprogress">Round progress:</span>
           <label class="switch">
             <input type="checkbox" id="roundingCheckbox">
             <span class="slider round"></span>
           </label>
         </div>
-        <div>Instant transitions:
+        <div><span data-i18n="menus.customise.instanttransitions">Instant transitions:</span>
           <label class="switch">
             <input type="checkbox" id="transitionCheckbox">
             <span class="slider round"></span>
@@ -90,53 +90,61 @@ <h2>Customisation</h2>
     </div>
 
     <div id="presets" class="tabmenu">
-      <h2>Presets</h2>
+      <h2 data-i18n="menus.presets.title">Presets</h2>
       <textarea id="presetInput" placeholder="Paste preset here"></textarea>
-      <button onclick="loadState()">Save</button>
-      <button onclick="copyToClipboard()">Copy to clipboard</button>
-      <button onclick="pasteFromClipboard()">Load from clipboard</button>
+      <button onclick="loadState()" data-i18n="menus.presets.save">Save</button>
+      <button onclick="copyToClipboard()" data-i18n="menus.presets.copytoclipboard">Copy to clipboard</button>
+      <button onclick="pasteFromClipboard()" data-i18n="menus.presets.loadclipboard">Load from clipboard</button>
       <hr>
-      <h3>Saved</h3>
+      <h3 data-i18n="menus.presets.saved">Saved</h3>
       <div id="savedPresets">
         <button onclick="loadPreset(0)" id="preset0Name">Empty</button> <button onclick="savePreset(0)">💾</button>
         <button onclick="loadPreset(1)" id="preset1Name">Empty</button> <button onclick="savePreset(1)">💾</button>
         <button onclick="loadPreset(2)" id="preset2Name">Empty</button> <button onclick="savePreset(2)">💾</button>
       </div>
       <hr>
-      <h3>Wooting layouts</h3>
+      <h3 data-i18n="menus.presets.wootinglayouts">Wooting layouts</h3>
       <div id="defaultPresets">
 
       </div>
-      <a href="https://github.com/DjCrqss/Woot-verlay/wiki/Presets" target="_blank">Community presets</a>
+      <a href="https://github.com/DjCrqss/Woot-verlay/wiki/Presets" target="_blank" data-i18n="menus.presets.communitypresets">Community presets</a>
     </div>
 
     <div id="lanSettings" class="tabmenu">
-      <h2>Lan Connection</h2>
-      <p>Connect to external client.<br>Press connect and wait ~3 seconds.</p>
+      <h2 data-i18n="menus.lanconnection.title">Lan Connection</h2>
+      <p data-i18n="menus.lanconnection.desc">Connect to external client.<br>Press connect and wait ~3 seconds.</p>
       <input type="text" id="lanInput" placeholder="192.168.x.x">
-      <button onclick="connectToExternalLan()">Connect</button>
+      <button onclick="connectToExternalLan()" data-i18n="menus.lanconnection.connect">Connect</button>
+    </div>
+
+    <div id="languages" class="tabmenu">
+      <h2 data-i18n="menus.language.title">Language</h2>
+        <button data-lang="en">English</button>
+        <button data-lang="zh">Chinese (简体字)</button>
     </div>
 
     <!-- icons -->
-    <i class="material-symbols-outlined" onclick="toggleVisiblity('keyPool')">add_circle<span class="infoField">Add
-        keys</span></i>
+    <i class="material-symbols-outlined" onclick="toggleVisiblity('keyPool')">add_circle
+      <span class="infoField" data-i18n="menus.addkeys.title">Add keys</span></i>
     <i class="material-symbols-outlined" onclick="toggleVisiblity('settings')">settings<span
-        class="infoField">Customise</span></i>
+        class="infoField" data-i18n="menus.customise.title">Customise</span></i>
     <i class="material-symbols-outlined" onclick="toggleVisiblity('presets')">bookmarks<span
-        class="infoField">Presets</span></i>
+        class="infoField" data-i18n="menus.presets.title">Presets</span></i>
     <i class="material-symbols-outlined" onclick="toggleVisiblity('lanSettings')">magic_tether<span
-        class="infoField">LAN connection</span></i>
+        class="infoField" data-i18n="menus.lanconnection.title">LAN connection</span></i>
     <i class="material-symbols-outlined" onclick="toggleVisiblity('optionalInfo')">visibility<span
-        class="infoField">Toggle info</span></i>
+        class="infoField" data-i18n="menus.extrainfo.title">Toggle info</span></i>
+    <i class="material-symbols-outlined" onclick="toggleVisiblity('languages')">translate<span
+      class="infoField" data-i18n="menus.language.title">Language</span></i>
   </div>
 
   <!-- Key option dialog -->
   <div id="keyOptionDialog">
-    <span>Rename:
+    <span data-i18n="edit.rename">Rename:
       <input type="text" id="keyLabel" placeholder="New name" style="width: 100%"
         onkeydown="if(event.keyCode === 13) updateKeyLabel(this)">
     </span>
-    <span>Fill dir.
+    <span data-i18n="edit.filldir">Fill dir.
       <table class="directions">
         <tr>
           <td id="topLeft" onclick=updateKeySettings(this.id)>🡦</td>
@@ -162,7 +170,7 @@ <h2>Lan Connection</h2>
       </table>
     </span>
 
-    <span class="deleteButton" onclick=removeKey()>Remove</span>
+    <span class="deleteButton" onclick=removeKey() data-i18n="edit.remove">Remove</span>
   </div>
 </body>
 
@@ -186,4 +194,8 @@ <h2>Lan Connection</h2>
 <!-- toolbar settings related scripts -->
 <script type="text/javascript" src="pages/globaldefault/js/toolbarfunctions.js"></script>
 
+<!-- translations -->
+<script src="https://unpkg.com/@andreasremdt/simple-translator@latest/dist/umd/translator.min.js"></script>
+<script type="text/javascript" src="pages/globaldefault/data/languages.js" defer></script>
+
 </html>
\ No newline at end of file
diff --git a/pages/globaldefault/data/languages.js b/pages/globaldefault/data/languages.js
new file mode 100644
index 0000000..fdf7419
--- /dev/null
+++ b/pages/globaldefault/data/languages.js
@@ -0,0 +1,125 @@
+var english = {
+    menus: {
+        // addkeys
+        addkeys: {
+            title: "Add Keys",
+        },
+        // customise
+        customise: {
+            title: "Customise",
+            active: "Active",
+            inactive: "Inactive",
+            accent: "Accent",
+            keybackground: "Key Background",
+            keyopacity: "Key Opacity",
+            background: "Background",
+            accessiblitymode: "Accessiblity Mode",
+            roundprogress: "Rounded Progress",
+            instanttransitions: "Instant Transitions",
+        },
+        // presets
+        presets: {
+            title: "Presets",
+            save: "Save",
+            loadclipboard: "Load from Clipboard",
+            copytoclipboard: "Copy to Clipboard",
+            saved: "Saved",
+            wootinglayouts: "Wooting Layouts",
+            communitypresets: "Community Presets",
+        },
+        // lanconnection
+        lanconnection: {
+            title: "LAN Connection",
+            desc: "Connect to an external client.<br>Please connect and wait ~3 seconds.",
+            connect: "Connect",
+        },
+        //extra info
+        extrainfo: {
+            title: "Toggle Info",
+            initialhint: "Start typing!",
+            acitvekeys: "Active Keys",
+        },
+        // edit right click
+        edit: {
+            rename: "Rename",
+            filldir: "Fill dir.",
+            remove: "Remove",
+        },
+        // language
+        language: {
+            title: "Language",
+        }
+    }
+
+}
+
+var chinese = {
+    menus: {
+        addkeys: {
+            title: "添加键",
+        },
+         // customise
+         customise: {
+            title: "定制",
+            active: "积极的",
+            inactive: "不活跃",
+            accent: "口音",
+            keybackground: "主要背景",
+            keyopacity: "键不透明度",
+            background: "背景",
+            accessiblitymode: "无障碍模式",
+            roundprogress: "全面进展",
+            instanttransitions: "即时转换",
+        },
+        // presets
+        presets: {
+            title: "预设",
+            save: "保存",
+            loadclipboard: "从剪贴板加载",
+            copytoclipboard: "复制到剪贴板",
+            saved: "保存的布局",
+            wootinglayouts: "Wooting 布局",
+            communitypresets: "社区布局",
+        },
+        // lanconnection
+        lanconnection: {
+            title: "LAN 联系",
+            desc: "连接到外部客户端。<br>请连接并等待约 3 秒",
+            connect: "连接",
+        },
+        //extra info
+        extrainfo: {
+            title: "切换信息",
+            initialhint: "开始打字!",
+            acitvekeys: "活动键",
+        },
+        // edit right click
+        edit: {
+            rename: "重命名",
+            filldir: "填充方向",
+            remove: "消除",
+        },
+        // language
+        language: {
+            title: "改变语言",
+        }
+    }
+}
+
+var translator = new Translator({
+    defaultLanguage: 'en',
+    detectLanguage: true,
+    persist : true,
+    persistKey: 'userLanguage',
+});
+translator.add('en', english);
+translator.add('zh', chinese);
+
+// translate the page to the detected language
+translator.translatePageTo();
+
+for (let button of document.querySelectorAll('button')) {
+    button.addEventListener('click', (evt) => {
+      translator.translatePageTo(evt.target.dataset.lang);
+    });
+  }
diff --git a/pages/globaldefault/styles.css b/pages/globaldefault/styles.css
index 75ff5cb..d8e5028 100644
--- a/pages/globaldefault/styles.css
+++ b/pages/globaldefault/styles.css
@@ -13,7 +13,7 @@
     --app-bg: #181818;
     --elem-prim-bg: #212121b3;
     --elem-prim-border: #353b44;
-    --elem-sec-bg: #212121;
+    --elem-sec-bg: rgba(33, 33, 33, 0.98);
     --elem-sec-border: #555555;
     --elem-tert-bg: #4d4d4d;
 
@@ -32,7 +32,8 @@
 body {
     background-color: var(--app-bg);
     color: white;
-    font-family: monospace;
+    /* find monospace sans serif font famil */
+    font-family: Consolas, monospace;
     -webkit-user-select: none;
     /* Safari */
     -ms-user-select: none;
@@ -44,7 +45,7 @@ body {
 
 /* Universal */
 * {
-    transition: color 0.5s, background-color 0.5s;
+    transition: background-color 0.5s;
     color: var(--fg-color);
 }
 
@@ -150,10 +151,12 @@ h2, h3 {
     display: flex;
     flex-direction: column;
     gap: 1em;
+
+    overflow: auto;
 }
 
 #presets,
-#lanSettings {
+#lanSettings, #languages {
     visibility: hidden;
     background-color: var(--elem-sec-bg);
     border: 1px solid var(--elem-sec-border);
@@ -172,6 +175,8 @@ h2, h3 {
     display: flex;
     flex-direction: column;
     gap: 0.5em;
+
+    overflow: auto
 }
 
 #savedPresets{
@@ -213,6 +218,7 @@ textarea {
     flex-shrink: 1;
     max-width: 100%;
     min-width: 0;
+    transition: color 0s;
 }
 
 input[type="text"] {
@@ -277,10 +283,10 @@ hr {
 #keyPool {
     /* width: 28vw; */
     width: min(420px, 32vw);
-    height: 90vh;
+    height: 94vh;
     position: fixed;
-    top: 5vmin;
-    right: 5vmin;
+    top: 3vh;
+    right: 3vh;
     background-color: var(--elem-prim-bg);
     border: 1px solid var(--elem-sec-border);
     backdrop-filter: blur(12px);
@@ -366,6 +372,7 @@ hr {
 .label {
     z-index: 0;
     text-shadow: 2px 2px 6px #1312123c;
+    transition: color 0.5s;
 }
 
 /* Pressure progress on keys */