add: new webui framework (using navbar and refactor lang file)

2025-09-06 06:37:01 +00:00 · 2024-07-12 17:34:59 +07:00
parent 0b7c939c9f
commit 4dac5409d8
35 changed files with 1087 additions and 819 deletions
--- a/module/build.gradle.kts
+++ b/module/build.gradle.kts
@@ -168,13 +168,22 @@ androidComponents.onVariants { variant ->
                    set.add(Pair(root.file("webroot/js/kernelsu.js").asFile, null))
                    set.add(Pair(root.file("webroot/js/theme.js").asFile, null))
                    set.add(Pair(root.file("webroot/js/language.js").asFile, null))
-                    set.add(Pair(root.file("webroot/js/light.icon.js").asFile, null))
                    set.add(Pair(root.file("webroot/js/restoreError.js").asFile, null))
+                    set.add(Pair(root.file("webroot/js/navbar.js").asFile, null))
+
+                    set.add(Pair(root.file("webroot/js/translate/action.js").asFile, null))
+                    set.add(Pair(root.file("webroot/js/translate/home.js").asFile, null))
+                    set.add(Pair(root.file("webroot/js/translate/modules.js").asFile, null))
+                    set.add(Pair(root.file("webroot/js/translate/settings.js").asFile, null))
+
+                    set.add(Pair(root.file("webroot/js/themes/dark/index.js").asFile, null))
+                    set.add(Pair(root.file("webroot/js/themes/dark/navbar.js").asFile, null))
+
+                    set.add(Pair(root.file("webroot/js/themes/light/index.js").asFile, null))
+                    set.add(Pair(root.file("webroot/js/themes/light/navbar.js").asFile, null))
+                    set.add(Pair(root.file("webroot/js/themes/light/icon.js").asFile, null))

-                    set.add(Pair(root.file("webroot/js/list/module.js").asFile, null))
-                    set.add(Pair(root.file("webroot/js/list/settings.js").asFile, null))
                    set.add(Pair(root.file("webroot/js/list/language.js").asFile, null))
-                    set.add(Pair(root.file("webroot/js/list/action.js").asFile, null))

                    set.add(Pair(root.file("webroot/js/switcher/fontChanger.js").asFile, null))

@@ -199,16 +208,14 @@ androidComponents.onVariants { variant ->
                    set.add(Pair(root.file("webroot/assets/mark.svg").asFile, null))
                    set.add(Pair(root.file("webroot/assets/tick.svg").asFile, null))
                    set.add(Pair(root.file("webroot/assets/warn.svg").asFile, null))
-                    set.add(Pair(root.file("webroot/assets/light.svg").asFile, null))
-                    set.add(Pair(root.file("webroot/assets/dark.svg").asFile, null))
                    set.add(Pair(root.file("webroot/assets/module.svg").asFile, null))
                    set.add(Pair(root.file("webroot/assets/expand.svg").asFile, null))
                    set.add(Pair(root.file("webroot/assets/settings.svg").asFile, null))
                    set.add(Pair(root.file("webroot/assets/close.svg").asFile, null))
-                    set.add(Pair(root.file("webroot/assets/lang.svg").asFile, null))
                    set.add(Pair(root.file("webroot/assets/content.svg").asFile, null))
                    set.add(Pair(root.file("webroot/assets/error.svg").asFile, null))
                    set.add(Pair(root.file("webroot/assets/action.svg").asFile, null))
+                    set.add(Pair(root.file("webroot/assets/home.svg").asFile, null))
                    sig.initSign(privKey)
                    set.forEach { it.first.sha(it.second) }
                    val signFile = root.file(name).asFile
--- a/module/src/customize.sh
+++ b/module/src/customize.sh
@@ -119,13 +119,21 @@ extract "$ZIPFILE" 'webroot/js/main.js' "$MODPATH/webroot/js" true
 extract "$ZIPFILE" 'webroot/js/kernelsu.js' "$MODPATH/webroot/js" true
 extract "$ZIPFILE" 'webroot/js/theme.js' "$MODPATH/webroot/js" true
 extract "$ZIPFILE" 'webroot/js/language.js' "$MODPATH/webroot/js" true
-extract "$ZIPFILE" 'webroot/js/light.icon.js' "$MODPATH/webroot/js/list" true
+extract "$ZIPFILE" 'webroot/js/navbar.js' "$MODPATH/webroot/js/list" true
 extract "$ZIPFILE" 'webroot/js/restoreError.js' "$MODPATH/webroot/js/list" true

-extract "$ZIPFILE" 'webroot/js/list/module.js' "$MODPATH/webroot/js/list" true
-extract "$ZIPFILE" 'webroot/js/list/settings.js' "$MODPATH/webroot/js/list" true
+extract "$ZIPFILE" 'webroot/js/translate/home.js' "$MODPATH/webroot/js/translate" true
+extract "$ZIPFILE" 'webroot/js/translate/action.js' "$MODPATH/webroot/js/translate" true
+extract "$ZIPFILE" 'webroot/js/translate/modules.js' "$MODPATH/webroot/js/translate" true
+extract "$ZIPFILE" 'webroot/js/translate/settings.js' "$MODPATH/webroot/js/translate" true
+
+extract "$ZIPFILE" 'webroot/js/theme/dark/index.js' "$MODPATH/webroot/js/theme/dark" true
+extract "$ZIPFILE" 'webroot/js/theme/dark/navbar.js' "$MODPATH/webroot/js/theme/dark" true
+extract "$ZIPFILE" 'webroot/js/theme/light/index.js' "$MODPATH/webroot/js/theme/light" true
+extract "$ZIPFILE" 'webroot/js/theme/light/navbar.js' "$MODPATH/webroot/js/theme/light" true
+extract "$ZIPFILE" 'webroot/js/theme/light/icon.js' "$MODPATH/webroot/js/theme/light" true
+
 extract "$ZIPFILE" 'webroot/js/list/language.js' "$MODPATH/webroot/js/list" true
-extract "$ZIPFILE" 'webroot/js/list/action.js' "$MODPATH/webroot/js/list" true

 for lang in en_US ja_JP pt_BR ro_RO ru_RU vi_VN zh_CN zh_TW; do
  extract "$ZIPFILE" "webroot/lang/${lang}.json" "$MODPATH/webroot/lang" true
@@ -142,7 +150,7 @@ extract "$ZIPFILE" 'webroot/css/fonts.css' "$MODPATH/webroot/css" true
 extract "$ZIPFILE" 'webroot/fonts/ProductSans-Italic.ttf' "$MODPATH/webroot/fonts" true
 extract "$ZIPFILE" 'webroot/fonts/ProductSans-Regular.ttf' "$MODPATH/webroot/fonts" true

-for svg in mark tick warn light dark module expand settings close lang content error action; do
+for svg in mark tick warn module expand settings close content error action home; do
  extract "$ZIPFILE" "webroot/assets/${svg}.svg" "$MODPATH/webroot/assets" true
 done

--- a/webroot/assets/dark.svg
+++ b/webroot/assets/dark.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>
--- a/webroot/assets/home.svg
+++ b/webroot/assets/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg>
--- a/webroot/assets/lang.svg
+++ b/webroot/assets/lang.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q83 0 155.5 31.5t127 86q54.5 54.5 86 127T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Zm0-82q26-36 45-75t31-83H404q12 44 31 83t45 75Zm-104-16q-18-33-31.5-68.5T322-320H204q29 50 72.5 87t99.5 55Zm208 0q56-18 99.5-55t72.5-87H638q-9 38-22.5 73.5T584-178ZM170-400h136q-3-20-4.5-39.5T300-480q0-21 1.5-40.5T306-560H170q-5 20-7.5 39.5T160-480q0 21 2.5 40.5T170-400Zm216 0h188q3-20 4.5-39.5T580-480q0-21-1.5-40.5T574-560H386q-3 20-4.5 39.5T380-480q0 21 1.5 40.5T386-400Zm268 0h136q5-20 7.5-39.5T800-480q0-21-2.5-40.5T790-560H654q3 20 4.5 39.5T660-480q0 21-1.5 40.5T654-400Zm-16-240h118q-29-50-72.5-87T584-782q18 33 31.5 68.5T638-640Zm-234 0h152q-12-44-31-83t-45-75q-26 36-45 75t-31 83Zm-200 0h118q9-38 22.5-73.5T376-782q-56 18-99.5 55T204-640Z"/></svg>
--- a/webroot/assets/light.svg
+++ b/webroot/assets/light.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>
--- a/webroot/css/index.css
+++ b/webroot/css/index.css
@@ -17,6 +17,16 @@
  /* --font-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif */
 }

+.radios input[type=radio] {
+  display: none;
+}
+
+.radio input[type=radio] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 * {
  background-color: var(--background);
  color: var(--font);
@@ -45,8 +55,9 @@ a {
 }

 .full_screen {
-  position: fixed; 
-  z-index: 10; 
+  position: fixed;
+  overflow-y: scroll;
+  z-index: 10;
  top: 0;
  bottom: 0; 
  left: 0; 
@@ -80,6 +91,51 @@ a {
  font-size: 20px;
 }

+.navbar {
+  display: flex;
+  position: fixed;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--dim);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 25px 25px;
+  font-size: 20px;
+}
+
+.navtitle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: small;
+  margin-top: 8px;
+  opacity: 1;
+}
+
+.navhidden {
+  visibility: hidden;
+}
+
+.navicon {
+  background-color: var(--small-card);
+  display: flex;
+  width: 65px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50px;
+}
+
+.navicon_disable {
+  display: flex;
+  width: 65px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50px;
+}
+
 .card {
  margin-left: 15px;
  margin-right: 15px;
@@ -153,6 +209,8 @@ a {
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
  padding-bottom: 5px;
 }

@@ -229,21 +287,7 @@ a {
  color: var(--lock-desc);
 }

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+/* Switch */
 .switch {
  position: relative;
  display: inline-block;
@@ -273,19 +317,19 @@ a {
 .slider:before {
  position: absolute;
  content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
+  height: 23px;
+  width: 23px;
+  left: 6px;
+  bottom: 6px;
  background-color: var(--desc);
  -webkit-transition: .4s;
  transition: .4s;
 }

 input:checked + .slider:before {
-  -webkit-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  transform: translateX(100%);
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
 }

 /* Rounded sliders */
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -7,10 +7,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="js/theme.js" type="module"></script>
    <script src="js/restoreError.js" type="module"></script>
-    <script src="js/list/module.js" type="module"></script>
-    <script src="js/list/settings.js" type="module"></script>
+    <script src="js/navbar.js" type="module"></script>
    <script src="js/list/language.js" type="module"></script>
-    <script src="js/list/action.js" type="module"></script>
    <script src="js/switcher/fontChanger.js" type="module"></script>
    <script src="js/main.js" type="module"></script>
    <script src="js/modal/language.js" type="module"></script>
@@ -58,95 +56,59 @@
        <textarea id="errorh_panel" disabled class="errorh_textarea" placeholder="No error log recorded here!"></textarea>
      </div>
    </div>
-    
-    <!-- INFO: Headers -->
-    <div class="header">
-      <div>ReZygisk</div>
-      <div style="display: flex; align-items: center;">
-        <div id="lang_switcher" class="icon_animation">
-          <img src="assets/lang.svg">
-        </div>
-        <div id="theme_switcher" class="icon_animation" style="margin-left: 10px;">
-          <img src="assets/dark.svg">
-        </div>
-      </div>
-    </div>

-    <div style="padding: 40px 0px;"></div>
+    <!-- INFO: Home page -->
+    <div id="panel_home" style="display: none;">
+      <div class="header">ReZygisk</div>
+      <div style="padding: 40px 0px;"></div>

-    <!-- INFO: Info card -->
-    <div id="info_card" class="bright card">
-      <div class="brightc content" style="display: flex; align-items: center;">
-        <div id="rezygisk_icon_state" class="brightc">
-          <img class="brightc" src="assets/mark.svg">
-        </div>
-        <div id="rezygisk_state" class="brightc content lock" style="font-size: 1.2em; padding-bottom: 4px; padding-left: 5px;">
-          ReZygisk is at an unknown state!
-        </div>
-      </div>
-      <div class="brightc content">
-        <div id="version_info_title" class="brightc lock" style="font-size: 1.1em">Version</div>
-        <div class="brightc desc lockd" id="version_code" style="font-size: 0.9em; margin-top: 3px;">Unknown</div>
-      </div>
-      <div class="brightc content">
-        <div id="root_info_title" class="brightc lock" style="font-size: 1.1em">Root Implementation</div>
-        <div class="brightc desc lockd" id="root_impl" style="font-size: 0.9em; margin-top: 3px;">Unknown</div>
-      </div>
-      <div class="brightc content">
-        <div class="brightc lock" style="font-size: 1.1em">Zygote64</div>
-        <div class="brightc desc lockd" id="zygote32_status" style="font-size: 0.9em; margin-top: 3px;">Unknown</div>
-      </div>
-      <div class="brightc content lock">
-        <div class="brightc lock" style="font-size: 1.1em">Zygote32</div>
-        <div class="brightc desc lockd" id="zygote64_status" style="font-size: 0.9em; margin-top: 3px;">Unknown</div>
-      </div>
-    </div>
-
-    <!-- INFO: Module list card -->
-    <div id="modules_card" class="dim card list" style="display: none;">
-      <!-- INFO: Module list card header -->
-      <div id="modules_header" class="dimc liste">
-        <div class="dimc" style="font-size: 1.2em; display: flex; align-items: center;">
-          <div id="modules_list_icon" class="dimc">
-            <img class="dimc" src="assets/module.svg">
+      <!-- INFO: Status card -->
+      <div id="info_card" class="bright card list">
+        <div class="brightc" style="display: flex; align-items: center;">
+          <div id="rezygisk_icon_state" class="brightc" style="margin-bottom: 1px;">
+            <img class="brightc" src="assets/mark.svg">
+          </div>
+          <div id="rezygisk_state" class="brightc content lock" style="font-size: 1.2em; padding-bottom: 4px; padding-left: 5px;">
+            Unknown
          </div>
-          <div id="module_card_title" class="dimc" style="padding-bottom: 4px; padding-left: 5px;">Modules</div>
        </div>
+      </div>

+      <!-- INFO: Info card -->
+      <div class="dim card">
+        <div class="dimc content">
+          <div id="version_info_title" class="dimc" style="font-size: 1.1em">Version</div>
+          <div class="dimc desc" id="version_code" style="font-size: 0.9em; margin-top: 3px;">Unknown</div>
+        </div>
+        <div class="dimc content">
+          <div id="root_info_title" class="dimc" style="font-size: 1.1em">Root Implementation</div>
+          <div class="dimc desc" id="root_impl" style="font-size: 0.9em; margin-top: 3px;">Unknown</div>
+        </div>
+        <div class="dimc content">
+          <div class="dimc" style="font-size: 1.1em">Zygote64</div>
+          <div class="dimc desc" id="zygote32_status" style="font-size: 0.9em; margin-top: 3px;">Unknown</div>
+        </div>
        <div class="dimc">
-          <div id="module_expand_icon" class="dimc expander" style="max-height: 24px;">
-            <img class="dimc" src="assets/expand.svg">
-          </div>
+          <div class="dimc" style="font-size: 1.1em">Zygote32</div>
+          <div class="dimc desc" id="zygote64_status" style="font-size: 0.9em; margin-top: 3px;">Unknown</div>
        </div>
      </div>
+    </div>

-      <!-- INFO: Module list card body -->
-      <div id="modules_list" class="dimc" style="width: 100%;">
+    <div id="panel_modules" style="display: none;">
+      <div id="panel_modules_header" class="header">Modules</div>
+      <div style="padding: 40px 0px;"></div>
+      <div id="modules_list" class="dimc" style="width: 100%; margin-bottom: 6.5em;">
        <!-- N/A -->
      </div>
    </div>

-    <!-- INFO: Action card -->
-    <div id="rezygisk_action" class="dim card list" style="display: none;">
-      <!-- INFO: Action card header -->
-      <div id="action_header" class="dimc" style="align-items: center; display: flex; justify-content: space-between; padding-bottom: 10px;">
-        <div class="dimc" style="align-items: center; display: flex;">
-          <div class="dimc" id="action_icon">
-            <img class="dimc" src="assets/action.svg">
-          </div>
-          <div id="action_card_title" class="dimc content" style="padding-left: 5px; font-size: 1.2em;">
-            Actions
-          </div>
-        </div>
-
-        <div class="dimc">
-          <div id="action_expand_icon" class="dimc expander" style="margin-bottom: 4px; max-height: 24px;">
-            <img class="dimc" src="assets/expand.svg">
-          </div>
-        </div>
-      </div>
+    <!-- INFO: Action page -->
+    <div id="panel_actions" style="display: none;">
+      <div id="panel_actions_header" class="header">Actions</div>
+      <div style="padding: 40px 0px;"></div>
      <!-- INFO: Settings card body (Daemon32) -->
-      <div class="small_card">
+      <div class="small_card" style="margin-left: 10px; margin-right: 10px;">
        <div class="small_card_bg content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 14px;">Daemon (32 bit)</div>
        <div class="small_card_bg content button_list">
          <div id="daemon32_stop_button" class="center button">Stop</div>
@@ -155,7 +117,7 @@
        </div>
      </div>
      <!-- INFO: Settings card body (Daemon64) -->
-      <div class="small_card" style="margin-top: 15px;">
+      <div class="small_card" style="margin-top: 15px; margin-left: 10px; margin-right: 10px;">
        <div class="small_card_bg content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 14px;">Daemon (64 bit)</div>
        <div class="small_card_bg content button_list">
          <div id="daemon64_stop_button" class="center button">Stop</div>
@@ -165,54 +127,140 @@
      </div>
    </div>

-    <!-- INFO: Settings card -->
-    <div id="rezygisk_settings" class="dim card list">
-      <!-- INFO: Settings card header -->
-      <div id="settings_header" class="dimc" style="align-items: center; display: flex; justify-content: space-between; padding-bottom: 10px;">
-        <div class="dimc" style="align-items: center; display: flex;">
-          <div class="dimc" id="setting_icon">
-            <img class="dimc" src="assets/settings.svg">
-          </div>
-          <div id="settings_card_title" class="dimc content" style="padding-left: 5px; font-size: 1.2em;">
-            Settings
-          </div>
-        </div>
-
-        <div class="dimc">
-          <div id="settings_expand_icon" class="dimc expander" style="margin-bottom: 4px; max-height: 24px;">
-            <img class="dimc" src="assets/expand.svg">
-          </div>
-        </div>
-      </div>
+    <!-- INFO: Settings page -->
+    <div id="panel_settings" style="display: none;">
+      <div id="panel_settings_header" class="header">Settings</div>
+      <div style="padding: 40px 0px;"></div>
      <!-- INFO: Enable system font option -->
-      <div class="small_card" style="margin-top: 15px; justify-content: space-between; display: flex; align-items: center;">
-        <div class="small_card_bg" style="display: inline-block; width: 80%;">
-          <div id="sys_font_option_title" class="small_card_bg content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 2px;">Enable system font</div>
-          <div id="sys_font_option_desc" class="small_card_bg desc" style="font-size: 0.9em; padding-left: 5px; padding-bottom: 6px;">
+      <div class="small_card dimc" style="margin-top: 15px; justify-content: space-between; display: flex; align-items: center;">
+        <div class="dimc" style="display: inline-block; width: 80%;">
+          <div id="sys_font_option_title" class="dimc content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 2px;">
+            Enable system font
+          </div>
+          <div id="sys_font_option_desc" class="dimc desc" style="font-size: 0.9em; padding-left: 5px; padding-bottom: 6px;">
            This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont
          </div>
        </div>

-        <label class="switch small_card_bg">
+        <label class="switch dimc">
          <input id="font_switcher" type="checkbox">
          <span class="slider round"></span>
        </label>
-        
+      </div>
+
+      <!-- INFO: Enable light theme option -->
+      <div class="small_card dimc" style="margin-top: 15px; justify-content: space-between; display: flex; align-items: center;">
+        <div class="dimc" style="display: inline-block; width: 80%;">
+          <div id="sys_theme_option_title" class="dimc content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 2px;">
+            Enable light theme
+          </div>
+          <div id="sys_theme_option_desc" class="dimc desc" style="font-size: 0.9em; padding-left: 5px; padding-bottom: 6px;">
+            This option will enable light theme for WebUI
+          </div>
+        </div>
+
+        <label class="switch dimc">
+          <input id="theme_switcher" type="checkbox">
+          <span class="slider round"></span>
+        </label>
+      </div>
+
+      <!-- INFO: Change language -->
+      <div id="lang_switcher" class="small_card dimc card_animation" style="margin-top: 15px; justify-content: space-between; display: flex; align-items: center;">
+        <div class="dimc" style="display: inline-block;">
+          <div id="sys_lang_option_title" class="dimc content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 2px;">
+            Change language
+          </div>
+          <div id="sys_lang_option_desc" class="dimc desc" style="font-size: 0.9em; padding-left: 5px; padding-bottom: 6px;">
+            Change to your new language
+          </div>
+        </div>
+      </div>
+
+      <!-- INFO: Error history -->
+      <div id="rezygisk_errorh" class="small_card dimc card_animation" style="margin-top: 15px; justify-content: space-between; display: flex; align-items: center;">
+        <div class="dimc" style="display: inline-block;">
+          <div id="sys_errorh_title" class="dimc content" style="font-size: 1.1em; padding-left: 5px; padding-top: 6px; padding-bottom: 2px;">
+            Error History
+          </div>
+          <div id="sys_errorh_desc" class="dimc desc" style="font-size: 0.9em; padding-left: 5px; padding-bottom: 6px;">
+            View all of your error log
+          </div>
+        </div>
      </div>
    </div>

-    <!-- INFO: Get error logs button card -->
-    <div id="rezygisk_errorh" class="dim card list card_animation">
-      <!-- INFO: Settings card header -->
-      <div class="dimc" style="align-items: center; display: flex;">
-        <div class="dimc" id="logs_icon">
-          <img class="dimc" src="assets/error.svg">
-        </div>
-        <div id="errorh_card_title" class="dimc content" style="padding-left: 5px; font-size: 1.2em;">
-          Error History
-        </div>
+    <!-- INFO: Bottom navbar -->
+    <div id="navbar" class="navbar radios">
+      <div class="dimc">
+        <input id="n_home" type="radio" name="navbutton" value="home" checked/>
+        <label class="radio dimc" for="n_home">
+
+          <div class="dimc" style="display: grid; place-items: center;">
+            <div id="nid_home" class="dimc navicon_disable">
+              <img class="dimc" style="width: 24px; height: 24px" src="assets/home.svg">
+            </div>
+            <div id="ni_home" class="navicon" style="display: none;">
+              <img style="width: 24px; height: 24px; background-color: var(--small-card);" src="assets/home.svg">
+            </div>
+            <div id="nav_home_title" class="navtitle dimc">Home</div>
+          </div>
+
+        </label>
+      </div>
+
+      <div class="dimc">
+        <input id="n_modules" type="radio" name="navbutton" value="modules"/>
+        <label class="radio dimc" for="n_modules">
+
+          <div class="dimc" style="display: grid; place-items: center;">
+            <div id="nid_modules" class="dimc navicon_disable">
+              <img class="dimc" style="width: 24px; height: 24px" src="assets/module.svg">
+            </div>
+            <div id="ni_modules" class="navicon" style="display: none;">
+              <img style="width: 24px; height: 24px; background-color: var(--small-card);" src="assets/module.svg">
+            </div>
+            <div id="nav_modules_title" class="navtitle dimc">Modules</div>
+          </div>
+
+        </label>
+      </div>
+
+      <div class="dimc">
+        <input id="n_actions" type="radio" name="navbutton" value="actions"/>
+        <label class="radio dimc" for="n_actions">
+
+          <div class="dimc" style="display: grid; place-items: center;">
+            <div id="nid_actions" class="dimc navicon_disable">
+              <img class="dimc" style="width: 24px; height: 24px" src="assets/action.svg">
+            </div>
+            <div id="ni_actions" class="navicon" style="display: none;">
+              <img style="width: 24px; height: 24px; background-color: var(--small-card);" src="assets/action.svg">
+            </div>
+            <div id="nav_actions_title" class="navtitle dimc">Actions</div>
+          </div>
+
+        </label>
+      </div>
+
+      <div class="dimc">
+        <input id="n_settings" type="radio" name="navbutton" value="settings"/>
+        <label class="radio dimc" for="n_settings">
+
+          <div class="dimc" style="display: grid; place-items: center;">
+            <div id="nid_settings" class="dimc navicon_disable">
+              <img class="dimc" style="width: 24px; height: 24px" src="assets/settings.svg">
+            </div>
+            <div id="ni_settings" class="navicon" style="display: none;">
+              <img style="width: 24px; height: 24px; background-color: var(--small-card);" src="assets/settings.svg">
+            </div>
+            <div id="nav_settings_title" class="navtitle dimc">Settings</div>
+          </div>
+
+        </label>
      </div>
    </div>

+
  </body>
 </html>
--- a/webroot/js/language.js
+++ b/webroot/js/language.js
@@ -1,154 +1,41 @@
-/* INFO: info card */
-const version_info_title = document.getElementById('version_info_title')
-const version_code = document.getElementById('version_code')
-const root_info_title = document.getElementById('root_info_title')
-const root_impl = document.getElementById('root_impl')
-/* INFO: module card */
-const module_card_title = document.getElementById('module_card_title')
-const module_element_arch = document.getElementsByClassName('arch_desc')
-/* INFO: settings card */
-const settings_card_title = document.getElementById('settings_card_title')
-/* INFO: action card */
-const action_card_title = document.getElementById('action_card_title')
-/* INFO: daemon32 small card */
-const daemon32_stop_button = document.getElementById('daemon32_stop_button')
-const daemon32_start_button = document.getElementById('daemon32_start_button')
-const daemon32_exit_button = document.getElementById('daemon32_exit_button')
-/* INFO: daemon64 small card */
-const daemon64_stop_button = document.getElementById('daemon64_stop_button')
-const daemon64_start_button = document.getElementById('daemon64_start_button')
-const daemon64_exit_button = document.getElementById('daemon64_exit_button')
-/* INFO: error history button card */
-const errorh_card_title = document.getElementById('errorh_card_title')
-/* INFO: error history modal */
-const errorh_modal_title = document.getElementById('errorh_modal_title')
-const errorh_panel = document.getElementById('errorh_panel')
-/* INFO: lang modal */
-const lang_modal_title = document.getElementById('lang_modal_title')
-/* INFO: lang modal */
-const sys_font_option_title = document.getElementById('sys_font_option_title')
-const sys_font_option_desc = document.getElementById('sys_font_option_desc')
-/* INFO: Variable fields */
-const rezygisk_state = document.getElementById('rezygisk_state')
-const zygote32_status_div = document.getElementById('zygote32_status')
-const zygote64_status_div = document.getElementById('zygote64_status')
+import { translateActionPage } from "./translate/action.js"
+import { translateHomePage } from "./translate/home.js"
+import { translateModulesPage } from "./translate/modules.js"
+import { translateSettingsPage } from "./translate/settings.js"

 export async function setNewLanguage(locate, initialize) {
  const old_translations = await getTranslations(initialize ? 'en_US' : localStorage.getItem('/system/language'))
-  const new_lang = await getTranslations(locate)
+  const new_translations = await getTranslations(locate)

-  /* INFO: info card */
-  version_info_title.innerHTML = new_lang.infoCard.version
-  root_info_title.innerHTML = new_lang.infoCard.root
+  translateHomePage(old_translations, new_translations)
+  translateModulesPage(new_translations)
+  translateActionPage(new_translations)
+  translateSettingsPage(new_translations)

-  if (version_code.innerHTML.replace(/(\r\n|\n|\r)/gm,"").trim() === old_translations.global.unknown)
-    version_code.innerHTML = new_lang.global.unknown
-  if (root_impl.innerHTML.replace(/(\r\n|\n|\r)/gm,"").trim() === old_translations.global.unknown)
-    root_impl.innerHTML = new_lang.global.unknown
-  /* INFO: module card */
-  module_card_title.innerHTML = new_lang.moduleCard.header
-  /* INFO: settings card */
-  settings_card_title.innerHTML = new_lang.settings.header
-  /* INFO: action card */
-  action_card_title.innerHTML = new_lang.action.header
-  /* INFO: daemon32 small card */
-  if (daemon32_stop_button) { /* INFO: Not all devices have 32-bit support */
-    daemon32_stop_button.innerHTML = new_lang.action.daemonButton.stop
-    daemon32_start_button.innerHTML = new_lang.action.daemonButton.start
-    daemon32_exit_button.innerHTML = new_lang.action.daemonButton.exit
-  }
-  /* INFO: daemon64 small card */
-  if (daemon64_stop_button) { /* INFO: Not all devices have 64-bit support */
-    daemon64_stop_button.innerHTML = new_lang.action.daemonButton.stop
-    daemon64_start_button.innerHTML = new_lang.action.daemonButton.start
-    daemon64_exit_button.innerHTML = new_lang.action.daemonButton.exit
-  }
  /* INFO: lang modal */
-  lang_modal_title.innerHTML = new_lang.langModal.header
-
-  /* INFO: error history button card */
-  errorh_card_title.innerHTML = new_lang.errorHistory.header
+  document.getElementById('lang_modal_title').innerHTML 
+    = new_translations.modal.language.header

  /* INFO: error history modal */
-  errorh_modal_title.innerHTML = new_lang.errorHistory.header
-  errorh_panel.placeholder = new_lang.errorHistory.placeholder
+  document.getElementById('errorh_modal_title').innerHTML 
+    = new_translations.modal.logs.header
+  document.getElementById('errorh_panel').placeholder 
+    = new_translations.modal.logs.placeholder

-  /* INFO: lang modal */
-  sys_font_option_title.innerHTML = new_lang.switcher.font.header
-  sys_font_option_desc.innerHTML = new_lang.switcher.font.description
-
-  /* INFO: Translate variables */
-  switch (rezygisk_state.innerHTML.replace(/(\r\n|\n|\r)/gm,"").trim()) {
-    case old_translations.infoCard.status.ok: {
-      rezygisk_state.innerHTML = new_lang.infoCard.status.ok
-
-      break
-    }
-    case old_translations.infoCard.status.partially: {
-      rezygisk_state.innerHTML = new_lang.infoCard.status.partially
-
-      break
-    }
-    case old_translations.infoCard.status.notWorking: {
-      rezygisk_state.innerHTML = new_lang.infoCard.status.notWorking
-
-      break
-    }
-    case old_translations.infoCard.status.unknown: {
-      rezygisk_state.innerHTML = new_lang.infoCard.status.unknown
-
-      break
-    }
-  }
-
-  if (zygote32_status_div) {
-    switch (zygote32_status_div.innerHTML.replace(/(\r\n|\n|\r)/gm,"").trim()) {
-      case old_translations.infoCard.zygote.injected: {
-        zygote32_status_div.innerHTML = new_lang.infoCard.zygote.injected
-
-        break
-      }
-      case old_translations.infoCard.zygote.notInjected: {
-        zygote32_status_div.innerHTML = new_lang.infoCard.zygote.notInjected
-
-        break
-      }
-      case old_translations.infoCard.zygote.unknown: {
-        zygote32_status_div.innerHTML = new_lang.infoCard.zygote.unknown
-
-        break
-      }
-    }
-  }
-
-  if (zygote64_status_div) {
-    switch (zygote64_status_div.innerHTML.replace(/(\r\n|\n|\r)/gm,"").trim()) {
-      case old_translations.infoCard.zygote.injected: {
-        zygote64_status_div.innerHTML = new_lang.infoCard.zygote.injected
-
-        break
-      }
-      case old_translations.infoCard.zygote.notInjected: {
-        zygote64_status_div.innerHTML = new_lang.infoCard.zygote.notInjected
-
-        break
-      }
-      case old_translations.infoCard.zygote.unknown: {
-        zygote64_status_div.innerHTML = new_lang.infoCard.zygote.unknown
-
-        break
-      }
-    }
-  }
-
-  for (const module of module_element_arch) {
-    module.innerHTML = new_lang.moduleCard.arch
-  }
+  /* INFO: navbar info */
+  document.getElementById('nav_home_title').innerHTML
+    = new_translations.page.home.header
+  document.getElementById('nav_modules_title').innerHTML
+    = new_translations.page.modules.header
+  document.getElementById('nav_actions_title').innerHTML
+    = new_translations.page.action.header
+  document.getElementById('nav_settings_title').innerHTML
+    = new_translations.page.settings.header
 }

 export async function getTranslations(locate) {
  const translateData = await fetch(`./lang/${locate}.json`)
-    .catch(error => reject(error))
+    .catch(() => null)
  return await translateData.json()
 }

--- a/webroot/js/list/action.js
+++ b/webroot/js/list/action.js
@@ -1,26 +0,0 @@
-const button = document.getElementById('action_header')
-const icon = document.getElementById('action_expand_icon')
-const card = document.getElementById('rezygisk_action')
-
-let sys_module_mode = localStorage.getItem('/cache/list/action/state')
-sys_module_mode = setData('closed')
-
-button.addEventListener('click', () => {
-  if (sys_module_mode === 'closed') {
-    sys_module_mode = setData('opened')
-    icon.style.transform = 'rotate(180deg)'
-    card.style.maxHeight = `${card.scrollHeight}px`
-
-    return;
-  }
-
-  sys_module_mode = setData('closed')
-  icon.style.transform = 'rotate(0deg)'
-  card.style.maxHeight = null
-})
-
-function setData(mode) {
-  localStorage.setItem('/cache/list/action/state', mode)
-
-  return localStorage.getItem('/cache/list/action/state')
-}
--- a/webroot/js/list/module.js
+++ b/webroot/js/list/module.js
@@ -1,26 +0,0 @@
-const button = document.getElementById('modules_header')
-const icon = document.getElementById('module_expand_icon')
-const card = document.getElementById('modules_card')
-
-let sys_module_mode = localStorage.getItem('/cache/list/module/state')
-sys_module_mode = setData('closed')
-
-button.addEventListener('click', () => {
-  if (sys_module_mode === 'closed') {
-    sys_module_mode = setData('opened')
-    icon.style.transform = 'rotate(180deg)'
-    card.style.maxHeight = `${card.scrollHeight}px`
-
-    return;
-  }
-
-  sys_module_mode = setData('closed')
-  icon.style.transform = 'rotate(0deg)'
-  card.style.maxHeight = null
-})
-
-function setData(mode) {
-  localStorage.setItem('/cache/list/module/state', mode)
-
-  return localStorage.getItem('/cache/list/module/state')
-}
--- a/webroot/js/list/settings.js
+++ b/webroot/js/list/settings.js
@@ -1,26 +0,0 @@
-const button = document.getElementById('settings_header')
-const icon = document.getElementById('settings_expand_icon')
-const card = document.getElementById('rezygisk_settings')
-
-let sys_module_mode = localStorage.getItem('/cache/list/settings/state')
-sys_module_mode = setData('closed')
-
-button.addEventListener('click', () => {
-  if (sys_module_mode === 'closed') {
-    sys_module_mode = setData('opened')
-    icon.style.transform = 'rotate(180deg)'
-    card.style.maxHeight = `${card.scrollHeight}px`
-
-    return;
-  }
-
-  sys_module_mode = setData('closed')
-  icon.style.transform = 'rotate(0deg)'
-  card.style.maxHeight = null
-})
-
-function setData(mode) {
-  localStorage.setItem('/cache/list/settings/state', mode)
-
-  return localStorage.getItem('/cache/list/settings/state')
-}
--- a/webroot/js/main.js
+++ b/webroot/js/main.js
@@ -103,7 +103,6 @@ import { setNewLanguage, getTranslations } from './language.js'
    rezygisk_state.innerHTML = translations.infoCard.status.notWorking
  }

-  const modules_card = document.getElementById('modules_card')
  const modules_list = document.getElementById('modules_list')

  /* INFO: This hides the throbber screen */
@@ -116,8 +115,6 @@ import { setNewLanguage, getTranslations } from './language.js'

    if (modules.length === 0) return;

-    modules_card.removeAttribute('style')
-
    let index = 0
    for (const module of modules) {
      index += 1
@@ -142,11 +139,11 @@ import { setNewLanguage, getTranslations } from './language.js'
        const name = lines.find(line => line.includes('name=')).split('=')[1]

        modules_list.innerHTML += 
-        `<div class="dimc ${index !== modules.length ? 'spliter' : ''}" style="padding-top: 13px; padding-bottom: 13px;">
-          <div class="dimc" style="font-size: 1.1em;">${name}</div>
-          <div class="dimc desc" style="font-size: 0.9em; margin-top: 3px; white-space: nowrap; align-items: center; display: flex;">
-            <div class="dimc arch_desc">${translations.moduleCard.arch}</div>
-            <div class="dimc" style="margin-left: 5px;">${bitsUsed.join(' / ')}</div>
+        `<div class="${index !== modules.length ? 'spliter' : ''}" style="padding-top: 13px; padding-bottom: 13px; padding-left: 10px; padding-right: 10px">
+          <div style="font-size: 1.1em;">${name}</div>
+          <div class="desc" style="font-size: 0.9em; margin-top: 3px; white-space: nowrap; align-items: center; display: flex;">
+            <div class="arch_desc">${translations.moduleCard.arch}</div>
+            <div style="margin-left: 5px;">${bitsUsed.join(' / ')}</div>
          </div>
        </div>`
      } else {
--- a/webroot/js/modal/errorHistory.js
+++ b/webroot/js/modal/errorHistory.js
@@ -25,6 +25,5 @@ copy_button.addEventListener('click', () => {

 function setData(mode) {
  localStorage.setItem('/cache/modal/error_history/state', mode)
-
-  return localStorage.getItem('/cache/modal/error_history/state')
+  return mode
 }
--- a/webroot/js/modal/language.js
+++ b/webroot/js/modal/language.js
@@ -19,6 +19,5 @@ close_button.addEventListener('click', () => {

 function setData(mode) {
  localStorage.setItem('/cache/modal/language/state', mode)
-
-  return localStorage.getItem('/cache/modal/language/state')
+  return mode
 }
--- a/webroot/js/navbar.js
+++ b/webroot/js/navbar.js
@@ -0,0 +1,41 @@
+setData('home')
+document.getElementById(`ni_home`).style.display = 'flex'
+document.getElementById(`nid_home`).style.display = 'none'
+document.getElementById(`panel_home`).style.display = 'block'
+
+document.querySelectorAll("[name=navbutton]").forEach((element) => {
+  element.addEventListener('click', (e) => {
+    const value = e.target.value
+    let previous = 
+      !localStorage.getItem('/cache/navbar/previous')
+        ? setData('home')
+        : localStorage.getItem('/cache/navbar/previous')
+    if (previous === value) return
+
+    /* INFO: Disable icon on old state */
+    const pre_input = document.getElementById(`n_${previous}`)
+    const pre_icon = document.getElementById(`ni_${previous}`)
+    const pre_icon_disabled = document.getElementById(`nid_${previous}`)
+
+    document.getElementById(`panel_${previous}`).style.display = 'none'
+    pre_input.removeAttribute('checked')
+    pre_icon.style.display = 'none'
+    pre_icon_disabled.style.display = 'flex'
+
+    /* INFO: Enable icon on new state */
+    const curr_input = document.getElementById(`n_${value}`)
+    const icon = document.getElementById(`ni_${value}`)
+    const icon_disabled = document.getElementById(`nid_${value}`)
+
+    document.getElementById(`panel_${value}`).style.display = 'block'
+    curr_input.setAttribute('checked', '')
+    icon.style.display = 'flex'
+    icon_disabled.style.display = 'none'
+    setData(value)
+  })
+})
+
+function setData(data) {
+  localStorage.setItem('/cache/navbar/previous', data)
+  return data
+}
--- a/webroot/js/switcher/fontChanger.js
+++ b/webroot/js/switcher/fontChanger.js
@@ -29,6 +29,5 @@ function setSystemFont() {

 function setData(mode) {
  localStorage.setItem('/system/font', mode)
-
-  return localStorage.getItem('/system/font')
+  return mode
 }
--- a/webroot/js/theme.js
+++ b/webroot/js/theme.js
@@ -1,99 +1,23 @@
-import { 
-  light_icon,
-  light_logs_icon,
-  light_lang_icon,
-  light_close_icon,
-  light_expand_icon,
-  light_module_icon,
-  light_settings_icon,
-  light_copy_icon,
-  light_action_icon
-} from "./light.icon.js"
-const rootCss = document.querySelector(':root')
-const button = document.getElementById('theme_switcher')
+import { setDark } from "./themes/dark/index.js"
+import { setLight } from "./themes/light/index.js"

-/* INFO: Changes the icons to match the theme */
-const module_list_icon = document.getElementById('modules_list_icon')
-const settings_icon = document.getElementById('setting_icon')
-const lang_switcher = document.getElementById('lang_switcher')
-const logs_icon = document.getElementById('logs_icon')
-const close_icons = document.getElementsByClassName('close_icon')
-const expand_icons = document.getElementsByClassName('expander')
-const copy_button = document.getElementById('errorh_copy')
-const action_icon = document.getElementById('action_icon')
+const button = document.getElementById('theme_switcher')

 let sys_theme = localStorage.getItem('/system/theme')
 if (!sys_theme) sys_theme = setData('dark')

-if (sys_theme === 'light') setLight()
+if (sys_theme === 'light') {
+  button.setAttribute('checked', '')
+  setLight()
+}

 button.addEventListener('click', () => {
-  switch (sys_theme) {
-    case 'dark': setLight(); break;
-    case 'light': setDark(); break;
-  }
+  button.checked 
+    ? setLight()
+    : setDark()
 })

-function setDark() {
-  rootCss.style.setProperty('--background', '#181c20')
-  rootCss.style.setProperty('--font', '#ffffff')
-  rootCss.style.setProperty('--desc', '#c9c9c9')
-  rootCss.style.setProperty('--spliter', '#283136')
-  rootCss.style.setProperty('--dim', '#1d2327')
-  rootCss.style.setProperty('--icon', '#48565e')
-  rootCss.style.setProperty('--icon-bc', '#313a3f')
-  rootCss.style.setProperty('--button', 'var(--background)')
-
-  sys_theme = setData('dark')
-
-  for (const close_icon of close_icons) {
-    close_icon.innerHTML = '<img src="assets/close.svg">'
-  }
-
-  for (const expand_icon of expand_icons) {
-    expand_icon.innerHTML = '<img class="dimc" src="assets/expand.svg">'
-  }
-
-  settings_icon.innerHTML = '<img class="dimc" src="assets/settings.svg">'
-  button.innerHTML = '<img src="assets/dark.svg">'
-  module_list_icon.innerHTML = '<img class="dimc" src="assets/module.svg">'
-  lang_switcher.innerHTML = '<img src="assets/lang.svg">'
-  logs_icon.innerHTML = '<img class="dimc" src="assets/error.svg">'
-  copy_button.innerHTML = '<img src="assets/content.svg">'
-  action_icon.innerHTML = '<img class="dimc" src="assets/action.svg">'
-}
-
-function setLight() {
-  rootCss.style.setProperty('--background', '#eff1f6')
-  rootCss.style.setProperty('--font', '#181c20')
-  rootCss.style.setProperty('--desc', '#484d53')
-  rootCss.style.setProperty('--spliter', '#4f6069')
-  rootCss.style.setProperty('--dim', '#e0e0e0')
-  rootCss.style.setProperty('--icon', '#acacac')
-  rootCss.style.setProperty('--icon-bc', '#c9c9c9')
-  rootCss.style.setProperty('--button', '#b3b3b3')
-
-  sys_theme = setData('light')
-
-  for (const close_icon of close_icons) {
-    close_icon.innerHTML = light_close_icon
-  }
-
-  for (const expand_icon of expand_icons) {
-    expand_icon.innerHTML = light_expand_icon
-  }
-
-  settings_icon.innerHTML = light_settings_icon
-  button.innerHTML = light_icon
-  module_list_icon.innerHTML = light_module_icon
-  lang_switcher.innerHTML = light_lang_icon
-  logs_icon.innerHTML = light_logs_icon
-  copy_button.innerHTML = light_copy_icon
-  action_icon.innerHTML = light_action_icon
-}
-
 function setData(mode) {
  localStorage.setItem('/system/theme', mode)
-
-  return localStorage.getItem('/system/theme')
+  return mode
 }
--- a/webroot/js/themes/dark/index.js
+++ b/webroot/js/themes/dark/index.js
@@ -0,0 +1,38 @@
+import { setDarkNav } from "./navbar.js"
+
+const rootCss = document.querySelector(':root')
+
+/* INFO: Changes the icons to match the theme */
+const close_icons = document.getElementsByClassName('close_icon')
+const expand_icons = document.getElementsByClassName('expander')
+const copy_button = document.getElementById('errorh_copy')
+
+
+export function setDark() {
+  rootCss.style.setProperty('--background', '#181c20')
+  rootCss.style.setProperty('--font', '#ffffff')
+  rootCss.style.setProperty('--desc', '#c9c9c9')
+  rootCss.style.setProperty('--spliter', '#283136')
+  rootCss.style.setProperty('--dim', '#1d2327')
+  rootCss.style.setProperty('--icon', '#48565e')
+  rootCss.style.setProperty('--icon-bc', '#313a3f')
+  rootCss.style.setProperty('--button', 'var(--background)')
+
+  setData('dark')
+
+  for (const close_icon of close_icons) {
+    close_icon.innerHTML = '<img src="assets/close.svg">'
+  }
+
+  for (const expand_icon of expand_icons) {
+    expand_icon.innerHTML = '<img class="dimc" src="assets/expand.svg">'
+  }
+
+  copy_button.innerHTML = '<img src="assets/content.svg">'
+  setDarkNav()
+}
+
+function setData(mode) {
+  localStorage.setItem('/system/theme', mode)
+  return mode
+}
--- a/webroot/js/themes/dark/navbar.js
+++ b/webroot/js/themes/dark/navbar.js
@@ -0,0 +1,22 @@
+export function setDarkNav() {
+  document.getElementById('nid_home').innerHTML 
+    = '<img class="dimc" style="width: 24px; height: 24px" src="assets/home.svg">'
+  document.getElementById('ni_home').innerHTML 
+    = '<img style="width: 24px; height: 24px; background-color: var(--small-card);" src="assets/home.svg">'
+
+  document.getElementById('nid_modules').innerHTML
+    = '<img class="dimc" style="width: 24px; height: 24px" src="assets/module.svg">'
+  document.getElementById('ni_modules').innerHTML
+    = '<img style="width: 24px; height: 24px; background-color: var(--small-card);" src="assets/module.svg">'
+
+  document.getElementById('nid_actions').innerHTML
+    = '<img class="dimc" style="width: 24px; height: 24px" src="assets/action.svg">'
+  document.getElementById('ni_actions').innerHTML
+    = '<img style="width: 24px; height: 24px; background-color: var(--small-card);" src="assets/action.svg">'
+
+  document.getElementById('nid_settings').innerHTML
+    = '<img class="dimc" style="width: 24px; height: 24px" src="assets/settings.svg">'
+  document.getElementById('ni_settings').innerHTML
+    = '<img style="width: 24px; height: 24px; background-color: var(--small-card);" src="assets/settings.svg">'
+  return
+}
--- a/webroot/js/themes/light/icon.js
+++ b/webroot/js/themes/light/icon.js
@@ -1,28 +1,8 @@
-export const light_icon = `
-  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
-    <path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/>
-  </svg>
-`
-export const light_module_icon = `
-  <svg class="dimc" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
-    <path d="M627-520h133v-160H627v160Zm-214 0h133v-160H413v160Zm-213 0h133v-160H200v160Zm0 240h133v-160H200v160Zm213 0h133v-160H413v160Zm214 0h133v-160H627v160Zm-507 0v-400q0-33 23.5-56.5T200-760h560q33 0 56.5 23.5T840-680v400q0 33-23.5 56.5T760-200H200q-33 0-56.5-23.5T120-280Z"/>
-  </svg>
-`
 export const light_expand_icon = `
  <svg class="dimc" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
    <path d="m480-340 180-180-57-56-123 123-123-123-57 56 180 180Zm0 260q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
  </svg>
 `
-export const light_settings_icon = `
-  <svg class="dimc" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
-    <path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/>
-  </svg>
-`
-export const light_lang_icon = `
-  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
-    <path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q83 0 155.5 31.5t127 86q54.5 54.5 86 127T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Zm0-82q26-36 45-75t31-83H404q12 44 31 83t45 75Zm-104-16q-18-33-31.5-68.5T322-320H204q29 50 72.5 87t99.5 55Zm208 0q56-18 99.5-55t72.5-87H638q-9 38-22.5 73.5T584-178ZM170-400h136q-3-20-4.5-39.5T300-480q0-21 1.5-40.5T306-560H170q-5 20-7.5 39.5T160-480q0 21 2.5 40.5T170-400Zm216 0h188q3-20 4.5-39.5T580-480q0-21-1.5-40.5T574-560H386q-3 20-4.5 39.5T380-480q0 21 1.5 40.5T386-400Zm268 0h136q5-20 7.5-39.5T800-480q0-21-2.5-40.5T790-560H654q3 20 4.5 39.5T660-480q0 21-1.5 40.5T654-400Zm-16-240h118q-29-50-72.5-87T584-782q18 33 31.5 68.5T638-640Zm-234 0h152q-12-44-31-83t-45-75q-26 36-45 75t-31 83Zm-200 0h118q9-38 22.5-73.5T376-782q-56 18-99.5 55T204-640Z"/>
-  </svg>
-`
 export const light_close_icon = `
  <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#2c2c2c">
    <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/>
@@ -38,9 +18,23 @@ export const light_copy_icon = `
    <path d="M320-213.33q-27 0-46.83-19.84Q253.33-253 253.33-280v-533.33q0-27 19.84-46.84Q293-880 320-880h413.33q27 0 46.84 19.83Q800-840.33 800-813.33V-280q0 27-19.83 46.83-19.84 19.84-46.84 19.84H320Zm0-66.67h413.33v-533.33H320V-280ZM186.67-80q-27 0-46.84-19.83Q120-119.67 120-146.67v-600h66.67v600h480V-80h-480ZM320-280v-533.33V-280Z"/>
  </svg>
 `
-
-export const light_action_icon = `
-  <svg class="dimc" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
+export const light_module_icon = (inside) => `
+  <svg ${inside ? 'style="background-color: var(--small-card);"' : ''} class="dimc" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
+    <path d="M627-520h133v-160H627v160Zm-214 0h133v-160H413v160Zm-213 0h133v-160H200v160Zm0 240h133v-160H200v160Zm213 0h133v-160H413v160Zm214 0h133v-160H627v160Zm-507 0v-400q0-33 23.5-56.5T200-760h560q33 0 56.5 23.5T840-680v400q0 33-23.5 56.5T760-200H200q-33 0-56.5-23.5T120-280Z"/>
+  </svg>
+`
+export const light_settings_icon = (inside) => `
+  <svg ${inside ? 'style="background-color: var(--small-card);"' : ''} class="dimc" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
+    <path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/>
+  </svg>
+`
+export const light_action_icon = (inside) =>  `
+  <svg ${inside ? 'style="background-color: var(--small-card);"' : ''} class="dimc" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
    <path d="M240-160q-33 0-56.5-23.5T160-240q0-33 23.5-56.5T240-320q33 0 56.5 23.5T320-240q0 33-23.5 56.5T240-160Zm240 0q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm240 0q-33 0-56.5-23.5T640-240q0-33 23.5-56.5T720-320q33 0 56.5 23.5T800-240q0 33-23.5 56.5T720-160ZM240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400ZM240-640q-33 0-56.5-23.5T160-720q0-33 23.5-56.5T240-800q33 0 56.5 23.5T320-720q0 33-23.5 56.5T240-640Zm240 0q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Zm240 0q-33 0-56.5-23.5T640-720q0-33 23.5-56.5T720-800q33 0 56.5 23.5T800-720q0 33-23.5 56.5T720-640Z"/>
  </svg>
+`
+export const light_home_icon = (inside) => `
+  <svg ${inside ? 'style="background-color: var(--small-card);"' : ''} class="dimc" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
+    <path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/>
+  </svg>
 `
--- a/webroot/js/themes/light/index.js
+++ b/webroot/js/themes/light/index.js
@@ -0,0 +1,41 @@
+import { 
+  light_close_icon,
+  light_expand_icon,
+  light_copy_icon,
+} from "./icon.js"
+import { setLightNav } from "./navbar.js"
+const rootCss = document.querySelector(':root')
+
+/* INFO: Changes the icons to match the theme */
+const close_icons = document.getElementsByClassName('close_icon')
+const expand_icons = document.getElementsByClassName('expander')
+const copy_button = document.getElementById('errorh_copy')
+
+export function setLight() {
+  rootCss.style.setProperty('--background', '#eff1f6')
+  rootCss.style.setProperty('--font', '#181c20')
+  rootCss.style.setProperty('--desc', '#484d53')
+  rootCss.style.setProperty('--spliter', '#4f6069')
+  rootCss.style.setProperty('--dim', '#e0e0e0')
+  rootCss.style.setProperty('--icon', '#acacac')
+  rootCss.style.setProperty('--icon-bc', '#c9c9c9')
+  rootCss.style.setProperty('--button', '#b3b3b3')
+
+  setData('light')
+
+  for (const close_icon of close_icons) {
+    close_icon.innerHTML = light_close_icon
+  }
+
+  for (const expand_icon of expand_icons) {
+    expand_icon.innerHTML = light_expand_icon
+  }
+
+  copy_button.innerHTML = light_copy_icon
+  setLightNav()
+}
+
+function setData(mode) {
+  localStorage.setItem('/system/theme', mode)
+  return mode
+}
--- a/webroot/js/themes/light/navbar.js
+++ b/webroot/js/themes/light/navbar.js
@@ -0,0 +1,16 @@
+import { light_action_icon, light_home_icon, light_module_icon, light_settings_icon } from "./icon.js"
+
+export function setLightNav() {
+  document.getElementById('nid_home').innerHTML = light_home_icon()
+  document.getElementById('ni_home').innerHTML = light_home_icon(true)
+
+  document.getElementById('nid_modules').innerHTML = light_module_icon()
+  document.getElementById('ni_modules').innerHTML = light_module_icon(true)
+
+  document.getElementById('nid_actions').innerHTML = light_action_icon()
+  document.getElementById('ni_actions').innerHTML = light_action_icon(true)
+
+  document.getElementById('nid_settings').innerHTML = light_settings_icon()
+  document.getElementById('ni_settings').innerHTML = light_settings_icon(true)
+  return
+}
--- a/webroot/js/translate/action.js
+++ b/webroot/js/translate/action.js
@@ -0,0 +1,25 @@
+export function translateActionPage(new_translations) {
+  /* INFO: action card */
+  document.getElementById('panel_actions_header').innerHTML 
+    = new_translations.page.action.header
+
+  /* INFO: daemon32 small card */
+  if (document.getElementById('daemon32_stop_button')) { /* INFO: Not all devices have 32-bit support */
+    document.getElementById('daemon32_stop_button').innerHTML 
+      = new_translations.page.action.daemonButton.stop
+    document.getElementById('daemon32_start_button').innerHTML
+      = new_translations.page.action.daemonButton.start
+    document.getElementById('daemon32_exit_button').innerHTML 
+      = new_translations.page.action.daemonButton.exit
+  }
+
+  /* INFO: daemon64 small card */
+  if (document.getElementById('daemon64_stop_button')) { /* INFO: Not all devices have 64-bit support */
+    document.getElementById('daemon64_stop_button').innerHTML 
+      = new_translations.page.action.daemonButton.stop
+    document.getElementById('daemon64_start_button').innerHTML 
+      = new_translations.page.action.daemonButton.start
+    document.getElementById('daemon64_exit_button').innerHTML 
+      = new_translations.page.action.daemonButton.exit
+  }
+}
--- a/webroot/js/translate/home.js
+++ b/webroot/js/translate/home.js
@@ -0,0 +1,89 @@
+export function translateHomePage(old_translations, new_translations) {
+  /* INFO: Translate variables */
+  const rezygisk_state = document.getElementById('rezygisk_state')
+  const zygote32_status_div = document.getElementById('zygote32_status')
+  const zygote64_status_div = document.getElementById('zygote64_status')
+
+  switch (rezygisk_state.innerHTML.replace(/(\r\n|\n|\r)/gm,"").trim()) {
+    case old_translations.page.home.status.ok: {
+      rezygisk_state.innerHTML = new_translations.page.home.status.ok
+
+      break
+    }
+    case old_translations.page.home.status.partially: {
+      rezygisk_state.innerHTML = new_translations.page.home.status.partially
+
+      break
+    }
+    case old_translations.page.home.status.notWorking: {
+      rezygisk_state.innerHTML = new_translations.page.home.status.notWorking
+
+      break
+    }
+    case old_translations.page.home.status.unknown: {
+      rezygisk_state.innerHTML = new_translations.page.home.status.unknown
+
+      break
+    }
+  }
+
+  if (zygote32_status_div) {
+    switch (zygote32_status_div.innerHTML.replace(/(\r\n|\n|\r)/gm,"").trim()) {
+      case old_translations.page.home.info.zygote.injected: {
+        zygote32_status_div.innerHTML 
+          = new_translations.page.home.info.zygote.injected
+
+        break
+      }
+      case old_translations.page.home.info.zygote.notInjected: {
+        zygote32_status_div.innerHTML 
+          = new_translations.page.home.info.zygote.notInjected
+
+        break
+      }
+      case old_translations.page.home.info.zygote.unknown: {
+        zygote32_status_div.innerHTML 
+          = new_translations.page.home.info.zygote.unknown
+
+        break
+      }
+    }
+  }
+
+  if (zygote64_status_div) {
+    switch (zygote64_status_div.innerHTML.replace(/(\r\n|\n|\r)/gm,"").trim()) {
+      case old_translations.page.home.info.zygote.injected: {
+        zygote64_status_div.innerHTML 
+          = new_translations.page.home.info.zygote.injected
+
+        break
+      }
+      case old_translations.page.home.info.zygote.notInjected: {
+        zygote64_status_div.innerHTML 
+          = new_translations.page.home.info.zygote.notInjected
+
+        break
+      }
+      case old_translations.page.home.info.zygote.unknown: {
+        zygote64_status_div.innerHTML 
+          = new_translations.page.home.info.zygote.unknown
+
+        break
+      }
+    }
+  }
+
+  /* INFO: info card */
+  document.getElementById('version_info_title').innerHTML 
+    = new_translations.page.home.info.version
+  document.getElementById('root_info_title').innerHTML 
+    = new_translations.page.home.info.root
+
+  const version_code = document.getElementById('version_code')
+  const root_impl = document.getElementById('root_impl')
+
+  if (version_code.innerHTML.replace(/(\r\n|\n|\r)/gm,"").trim() === old_translations.global.unknown)
+    version_code.innerHTML = new_translations.global.unknown
+  if (root_impl.innerHTML.replace(/(\r\n|\n|\r)/gm,"").trim() === old_translations.global.unknown)
+    root_impl.innerHTML = new_translations.global.unknown
+}
--- a/webroot/js/translate/modules.js
+++ b/webroot/js/translate/modules.js
@@ -0,0 +1,9 @@
+export function translateModulesPage(new_translations) {
+  document.getElementById('panel_modules_header').innerHTML 
+    = new_translations.page.modules.header
+  /* INFO: arch type */
+  const module_element_arch = document.getElementsByClassName('arch_desc')
+  for (const module of module_element_arch) {
+    module.innerHTML = new_translations.page.modules.arch
+  }
+}
--- a/webroot/js/translate/settings.js
+++ b/webroot/js/translate/settings.js
@@ -0,0 +1,28 @@
+export function translateSettingsPage(new_translations) {
+  document.getElementById('panel_settings_header').innerHTML 
+    = new_translations.page.settings.header
+
+  /* INFO: Change font option */
+  document.getElementById('sys_font_option_title').innerHTML 
+    = new_translations.page.settings.font.header
+  document.getElementById('sys_font_option_desc').innerHTML 
+    = new_translations.page.settings.font.description
+  
+  /* INFO: Change font option */
+  document.getElementById('sys_theme_option_title').innerHTML 
+    = new_translations.page.settings.theme.header
+  document.getElementById('sys_theme_option_desc').innerHTML 
+    = new_translations.page.settings.theme.description
+
+  /* INFO: Change font option */
+  document.getElementById('sys_lang_option_title').innerHTML 
+    = new_translations.page.settings.language.header
+  document.getElementById('sys_lang_option_desc').innerHTML 
+    = new_translations.page.settings.language.description
+
+  /* INFO: Change font option */
+  document.getElementById('sys_errorh_title').innerHTML 
+    = new_translations.page.settings.logs.header
+  document.getElementById('sys_errorh_desc').innerHTML 
+    = new_translations.page.settings.logs.description
+}
--- a/webroot/lang/en_US.json
+++ b/webroot/lang/en_US.json
@@ -1,38 +1,5 @@
 {
  "langName": "English (United States)",
-  "langModal": {
-    "header": "Choose your new language"
-  },
-  "infoCard": {
-    "status": {
-      "unknown": "ReZygisk is at an unknown state!",
-      "notWorking": "ReZygisk is not functioning!",
-      "ok": "ReZygisk is fully functioning!",
-      "partially": "ReZygisk is partially functioning!"
-    },
-    "version": "Version",
-    "root": "Root Implementation",
-    "zygote": {
-      "injected": "Injected",
-      "notInjected": "Not Injected",
-      "unknown": "Unknown"
-    }
-  },
-  "moduleCard": {
-    "header": "Modules",
-    "arch": "Arch: "
-  },
-  "action": {
-    "header": "Action",
-    "daemonButton": {
-      "start": "Start",
-      "stop": "Stop",
-      "exit": "Exit"
-    }
-  },
-  "settings": {
-    "header": "Settings"
-  },
  "cmdErrors": {
    "ptrace64": "Error while executing zygisk-ptrace64",
    "ptrace32": "Error while executing zygisk-ptrace32",
@@ -43,14 +10,64 @@
  "global": {
    "unknown": "Unknown"
  },
-  "errorHistory": {
-    "header": "Error History",
-    "placeholder": "No error log recorded here!"
+  "modal": {
+    "logs": {
+      "header": "Error History",
+      "placeholder": "No error log recorded here!"
+    },
+    "language": {
+      "header": "Choose your new language"
+    }
  },
-  "switcher": {
-    "font": {
-      "header": "Enable system font",
-      "description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
+  "page": {
+    "home": {
+      "header": "Home",
+      "status": {
+        "unknown": "Unknown",
+        "notWorking": "Not Working",
+        "ok": "Working",
+        "partially": "Partially Working"
+      },
+      "info": {
+        "version": "Version",
+        "root": "Root Implementation",
+        "zygote": {
+          "injected": "Injected",
+          "notInjected": "Not Injected",
+          "unknown": "Unknown"
+        }
+      }
+    },
+    "modules": {
+      "header": "Modules",
+      "arch": "Arch: "
+    },
+    "action": {
+      "header": "Action",
+      "daemonButton": {
+        "start": "Start",
+        "stop": "Stop",
+        "exit": "Exit"
+      }
+    },
+    "settings": {
+      "header": "Settings",
+      "font": {
+        "header": "Enable system font",
+        "description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
+      },
+      "theme": {
+        "header": "Enable light theme",
+        "description": "This option will enable light theme for WebUI"
+      },
+      "language": {
+        "header": "Change language",
+        "description": "Change to your new language"
+      },
+      "logs": {
+        "header": "Error History",
+        "description": "View all of your error log"
+      }
    }
  }
 }
--- a/webroot/lang/ja_JP.json
+++ b/webroot/lang/ja_JP.json
@@ -1,38 +1,5 @@
 {
  "langName": "日本語 (日本)",
-  "langModal": {
-    "header": "言語を選択してください"
-  },
-  "infoCard": {
-    "status": {
-      "unknown": "ReZygiskのステータスが不明です！",
-      "notWorking": "ReZygiskが機能していません！",
-      "ok": "ReZygiskは完全に機能しています！",
-      "partially": "ReZygiskは部分的に機能しています！"
-    },
-    "version": "バージョン",
-    "root": "root権限実装",
-    "zygote": {
-      "injected": "改変完了",
-      "notInjected": "未改変",
-      "unknown": "不明"
-    }
-  },
-  "moduleCard": {
-    "header": "モジュール",
-    "arch": "アーキテクチャー: "
-  },
-  "action": {
-    "header": "設定",
-    "daemonButton": {
-      "start": "スタート",
-      "stop": "ストップ",
-      "exit": "終了"
-    }
-  },
-  "settings": {
-    "header": "設定"
-  },
  "cmdErrors": {
    "ptrace64": "zygisk-ptrace64を実行している間にエラーが発生しました。",
    "ptrace32": "zygisk-ptrace32を実行している間にエラーが発生しました。",
@@ -43,14 +10,64 @@
  "global": {
    "unknown": "不明"
  },
-  "errorHistory": {
-    "header": "Error History",
-    "placeholder": "No error log recorded here!"
+  "modal": {
+    "logs": {
+      "header": "エラー履歴",
+      "placeholder": "ここにはエラーログは記録されていません。"
+    },
+    "language": {
+      "header": "言語を選択してください"
+    }
  },
-  "switcher": {
-    "font": {
-      "header": "Enable system font",
-      "description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
+  "page": {
+    "home": {
+      "header": "家",
+    "status": {
+      "unknown": "未知",
+      "notWorking": "動作しない",
+      "ok": "働く",
+      "partially": "部分的に動作"
+    },
+      "info": {
+        "version": "バージョン",
+        "root": "root権限実装",
+        "zygote": {
+          "injected": "改変完了",
+          "notInjected": "未改変",
+          "unknown": "不明"
+        }
+      }
+    },
+    "modules": {
+    "header": "モジュール",
+    "arch": "アーキテクチャー: "
+    },
+    "action": {
+      "header": "設定",
+      "daemonButton": {
+        "start": "スタート",
+        "stop": "ストップ",
+        "exit": "終了"
+      }
+    },
+    "settings": {
+      "header": "設定",
+      "font": {
+        "header": "システムフォントを有効にする",
+        "description": "このオプションは、現在のWebUIでシステムフォントを有効にします。注意: FlipFontと互換性がない可能性があります"
+      },
+      "theme": {
+        "header": "ライトテーマを有効にする",
+        "description": "このオプションはWebUIのライトテーマを有効にします"
+      },
+      "language": {
+        "header": "言語を変えてください",
+        "description": "新しい言語に変更する"
+      },
+      "logs": {
+        "header": "エラー履歴",
+        "description": "すべてのエラーログを表示する"
+      }
    }
  }
 }
--- a/webroot/lang/pt_BR.json
+++ b/webroot/lang/pt_BR.json
@@ -1,38 +1,5 @@
 {
  "langName": "Português (Brasil)",
-  "langModal": {
-    "header": "Escolha sua nova língua"
-  },
-  "infoCard": {
-    "status": {
-      "unknown": "ReZygisk está em um estado desconhecido!",
-      "notWorking": "ReZygisk não está funcionando!",
-      "ok": "ReZygisk está totalmente funcionando!",
-      "partially": "ReZygisk está parcialmente funcionando!"
-    },
-    "version": "Versão",
-    "root": "Implementação de root",
-    "zygote": {
-      "injected": "Injetado",
-      "notInjected": "Não Injetado",
-      "unknown": "Desconhecido"
-    }
-  },
-  "moduleCard": {
-    "header": "Módulos",
-    "arch": "Arquitetura: "
-  },
-  "action": {
-    "header": "Ações",
-    "daemonButton": {
-      "start": "Iniciar",
-      "stop": "Parar",
-      "exit": "Sair"
-    }
-  },
-  "settings": {
-    "header": "Configurações"
-  },
  "cmdErrors": {
    "ptrace64": "Erro ao executar zygisk-ptrace64",
    "ptrace32": "Erro ao executar zygisk-ptrace32",
@@ -43,14 +10,64 @@
  "global": {
    "unknown": "Desconhecido"
  },
-  "errorHistory": {
-    "header": "Error History",
-    "placeholder": "No error log recorded here!"
+  "modal": {
+    "logs": {
+      "header": "Histórico de erros",
+      "placeholder": "No error log recorded here!"
+    },
+    "language": {
+      "header": "Escolha sua nova língua"
+    }
  },
-  "switcher": {
-    "font": {
-      "header": "Enable system font",
-      "description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
+  "page": {
+    "home": {
+      "header": "Lar",
+      "status": {
+        "unknown": "Desconhecido",
+        "notWorking": "Não está funcionando",
+        "ok": "Trabalhando",
+        "partially": "Parcialmente funcionando"
+      },
+      "info": {
+        "version": "Versão",
+        "root": "Implementação de root",
+        "zygote": {
+          "injected": "Injetado",
+          "notInjected": "Não Injetado",
+          "unknown": "Desconhecido"
+        }
+      }
+    },
+    "modules": {
+      "header": "Módulos",
+      "arch": "Arquitetura: "
+    },
+    "action": {
+      "header": "Ações",
+      "daemonButton": {
+        "start": "Iniciar",
+        "stop": "Parar",
+        "exit": "Sair"
+      }
+    },
+    "settings": {
+      "header": "Configurações",
+      "font": {
+        "header": "Enable system font",
+        "description": "Esta opção habilitará a fonte do sistema na WebUI atual. NOTA: Pode não ser compatível com FlipFont"
+      },
+      "theme": {
+        "header": "Habilitar tema claro",
+        "description": "Esta opção habilitará o tema claro para WebUI"
+      },
+      "language": {
+        "header": "Mudar idioma",
+        "description": "Mude para o seu novo idioma"
+      },
+      "logs": {
+        "header": "Histórico de erros",
+        "description": "Veja todo o seu log de erros"
+      }
    }
  }
 }
--- a/webroot/lang/ro_RO.json
+++ b/webroot/lang/ro_RO.json
@@ -1,38 +1,5 @@
 {
  "langName": "Română (România)",
-  "langModal": {
-    "header": "Alegeți limba prestabilită"
-  },
-  "infoCard": {
-    "status": {
-      "unknown": "ReZygisk este într-o stare necunoscută!",
-      "notWorking": "ReZygisk nu este în funcțiune!",
-      "ok": "ReZygisk funcționează în totalitate!",
-      "partially": "ReZygisk funcționează parțial!"
-    },
-    "version": "Versiune",
-    "root": "Implementare Root",
-    "zygote": {
-      "injected": "Injectat",
-      "notInjected": "Neinjectat",
-      "unknown": "Necunoscut"
-    }
-  },
-  "moduleCard": {
-    "header": "Module",
-    "arch": "Arhitectură: "
-  },
-  "action": {
-    "header": "Action",
-    "daemonButton": {
-      "start": "Start",
-      "stop": "Stop",
-      "exit": "Ieșire"
-    }
-  },
-  "settings": {
-    "header": "Setări"
-  },
  "cmdErrors": {
    "ptrace64": "Eroare în timpul executării zygisk-ptrace64",
    "ptrace32": "Eroare în timpul executării zygisk-ptrace32",
@@ -43,14 +10,64 @@
  "global": {
    "unknown": "Necunoscut"
  },
-  "errorHistory": {
-    "header": "Error History",
-    "placeholder": "No error log recorded here!"
+  "modal": {
+    "logs": {
+      "header": "Historia e xatăripnasqi",
+      "placeholder": "No error log recorded here!"
+    },
+    "language": {
+      "header": "Alegeți limba prestabilită"
+    }
  },
-  "switcher": {
-    "font": {
-      "header": "Enable system font",
-      "description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
+  "page": {
+    "home": {
+      "header": "Khere",
+      "status": {
+        "unknown": "Necunoscut",
+        "notWorking": "Na si funkcionalno",
+        "ok": "Funkcionalo",
+        "partially": "Parśialno funkcionalo"
+      },
+      "info": {
+        "version": "Versiune",
+        "root": "Implementare Root",
+        "zygote": {
+          "injected": "Injectat",
+          "notInjected": "Neinjectat",
+          "unknown": "Necunoscut"
+        }
+      }
+    },
+    "modules": {
+      "header": "Module",
+      "arch": "Arhitectură: "
+    },
+    "action": {
+      "header": "Àkcia",
+      "daemonButton": {
+        "start": "Start",
+        "stop": "Stop",
+        "exit": "Ieșire"
+      }
+    },
+    "settings": {
+      "header": "Setări",
+      "font": {
+        "header": "Aktivisar o sistemosqo fonto",
+        "description": "Akaja opcia ka del śajsaripen e sistemosqo fonto anθ-o akanutno WebUI. NOTA: Shaj te na ovel kompatibilno e FlipFont-esa"
+      },
+      "theme": {
+        "header": "Aktivisar e lumjaki tema",
+        "description": "Akaja opcia ka del shaipe e lumiake temake vash o WebUI"
+      },
+      "language": {
+        "header": "Paruv i ćhib",
+        "description": "Paruv ki tiri nevi ćhib"
+      },
+      "logs": {
+        "header": "Historia e xatăripnasqi",
+        "description": "Dikh sa o lil e greśenqo"
+      }
    }
  }
 }
--- a/webroot/lang/ru_RU.json
+++ b/webroot/lang/ru_RU.json
@@ -1,38 +1,5 @@
 {
  "langName": "Русский (Россия)",
-  "langModal": {
-    "header": "Выберите Ваш новый язык"
-  },
-  "infoCard": {
-    "status": {
-      "unknown": "ReZygisk в неопределённом состоянии!",
-      "notWorking": "ReZygisk не функционирует!",
-      "ok": "ReZygisk работает в штатном режиме!",
-      "partially": "ReZygisk функционирует частично!"
-    },
-    "version": "Версия",
-    "root": "Реализация ROOT",
-    "zygote": {
-      "injected": "Инъецирован",
-      "notInjected": "Не инъецирован",
-      "unknown": "Неизвестно"
-    }
-  },
-  "moduleCard": {
-    "header": "Модули",
-    "arch": "Архи-ра: "
-  },
-  "action": {
-    "header": "Action",
-    "daemonButton": {
-      "start": "Старт",
-      "stop": "Пауза",
-      "exit": "Стоп"
-    }
-  },
-  "settings": {
-    "header": "Настройки"
-  },
  "cmdErrors": {
    "ptrace64": "Ошибка выполнения zygisk-ptrace64",
    "ptrace32": "Ошибка выполнения zygisk-ptrace32",
@@ -43,14 +10,64 @@
  "global": {
    "unknown": "Неизвестно"
  },
-  "errorHistory": {
-    "header": "Error History",
-    "placeholder": "No error log recorded here!"
+  "modal": {
+    "logs": {
+      "header": "История ошибок",
+      "placeholder": "No error log recorded here!"
+    },
+    "language": {
+      "header": "Выберите Ваш новый язык"
+    }
  },
-  "switcher": {
-    "font": {
-      "header": "Enable system font",
-      "description": "This option will enable system font in current WebUI. NOTE: May not be compatible with FlipFont"
+  "page": {
+    "home": {
+      "header": "Дом",
+      "status": {
+        "unknown": "Неизвестно",
+        "notWorking": "Не работает",
+        "ok": "Работающий",
+        "partially": "Частично работает"
+      },
+      "info": {
+        "version": "Версия",
+        "root": "Реализация ROOT",
+        "zygote": {
+          "injected": "Инъецирован",
+          "notInjected": "Не инъецирован",
+          "unknown": "Неизвестно"
+        }
+      }
+    },
+    "modules": {
+      "header": "Модули",
+      "arch": "Архи-ра: "
+    },
+    "action": {
+      "header": "Действие",
+      "daemonButton": {
+        "start": "Старт",
+        "stop": "Пауза",
+        "exit": "Стоп"
+      }
+    },
+    "settings": {
+      "header": "Настройки",
+      "font": {
+        "header": "Включить системный шрифт",
+        "description": "Эта опция включит системный шрифт в текущем WebUI. ПРИМЕЧАНИЕ: Может быть несовместимо с FlipFont"
+      },
+      "theme": {
+        "header": "Включить светлую тему",
+        "description": "Эта опция включит светлую тему для WebUI."
+      },
+      "language": {
+        "header": "Изменить язык",
+        "description": "Измените на новый язык"
+      },
+      "logs": {
+        "header": "История ошибок",
+        "description": "Просмотреть все ваши журналы ошибок"
+      }
    }
  }
-}
+}
--- a/webroot/lang/vi_VN.json
+++ b/webroot/lang/vi_VN.json
@@ -1,38 +1,5 @@
 {
  "langName": "Tiếng Việt",
-  "langModal": {
-    "header": "Chọn ngôn ngữ mới của bạn"
-  },
-  "infoCard": {
-    "status": {
-      "unknown": "ReZygisk đang ở trạng thái không xác định!",
-      "notWorking": "ReZygisk không hoạt động!",
-      "ok": "ReZygisk đang hoạt động!",
-      "partially": "ReZygisk đang hoạt động một phần!"
-    },
-    "version": "Phiên bản",
-    "root": "Hệ thống root",
-    "zygote": {
-      "injected": "Đã can thiệp",
-      "notInjected": "Chưa can thiệp",
-      "unknown": "Không xác định"
-    }
-  },
-  "moduleCard": {
-    "header": "Mô Đun",
-    "arch": "Cấu trúc: "
-  },
-  "action": {
-    "header": "Trình điều khiển",
-    "daemonButton": {
-      "start": "Chạy",
-      "stop": "Dừng",
-      "exit": "Thoát"
-    }
-  },
-  "settings": {
-    "header": "Cài đặt"
-  },
  "cmdErrors": {
    "ptrace64": "Đã xảy ra lỗi khi chạy zygisk-ptrace64",
    "ptrace32": "Đã xảy ra lỗi khi chạy zygisk-ptrace32",
@@ -43,14 +10,64 @@
  "global": {
    "unknown": "Không xác định"
  },
-  "errorHistory": {
-    "header": "Lịch sử lỗi",
-    "placeholder": "Không có lỗi nào đã được ghi lại ở đây!"
+  "modal": {
+    "logs": {
+      "header": "Lịch sử lỗi",
+      "placeholder": "Không có lỗi nào đã được ghi lại ở đây!"
+    },
+    "language": {
+      "header": "Chọn ngôn ngữ mới của bạn"
+    }
  },
-  "switcher": {
-    "font": {
-      "header": "Sử dụng phông chữ hệ thống",
-      "description": "Tuỳ chọn nãy sẽ cho phép người dùng sử dụng phông chữ của hệ thống. LƯU Ý: Có thể sẽ không tương thích với FlipFont"
+  "page": {
+    "home": {
+      "header": "Trang Chủ",
+      "status": {
+        "unknown": "ReZygisk đang ở trạng thái không xác định!",
+        "notWorking": "ReZygisk không hoạt động!",
+        "ok": "ReZygisk đang hoạt động!",
+        "partially": "ReZygisk đang hoạt động một phần!"
+      },
+      "info": {
+        "version": "Phiên bản",
+        "root": "Hệ thống root",
+        "zygote": {
+          "injected": "Đã can thiệp",
+          "notInjected": "Chưa can thiệp",
+          "unknown": "Không xác định"
+        }
+      }
+    },
+    "modules": {
+      "header": "Mô Đun",
+      "arch": "Cấu trúc: "
+    },
+    "action": {
+      "header": "Trình điều khiển",
+      "daemonButton": {
+        "start": "Chạy",
+        "stop": "Dừng",
+        "exit": "Thoát"
+      }
+    },
+    "settings": {
+      "header": "Cài đặt",
+      "font": {
+        "header": "Sử dụng phông chữ hệ thống",
+        "description": "Tuỳ chọn này sẽ cho phép người dùng sử dụng phông chữ của hệ thống. LƯU Ý: Có thể sẽ không tương thích với FlipFont"
+      },
+      "theme": {
+        "header": "Sử dụng chế độ sáng",
+        "description": "Tuỳ chọn này sẽ bật chế độ sáng cho WebUI"
+      },
+      "language": {
+        "header": "Thay đổi ngôn ngữ",
+        "description": "Thay đổi sang ngôn ngữ mới"
+      },
+      "logs": {
+        "header": "Lịch sử lỗi",
+        "description": "Xem tất cả các lỗi"
+      }
    }
  }
 }
--- a/webroot/lang/zh_CN.json
+++ b/webroot/lang/zh_CN.json
@@ -1,39 +1,5 @@
-
 {
  "langName": "简体中文 (中国)",
-  "langModal": {
-    "header": "选择你的语言"
-  },
-  "infoCard": {
-    "status": {
-      "unknown": "ReZygisk处于未知状态!",
-      "notWorking": "ReZygisk无法运行!",
-      "ok": "ReZygisk正常运行!",
-      "partially": "ReZygisk部分正常运行!"
-    },
-    "version": "版本",
-    "root": "Root实现",
-    "zygote": {
-      "injected": "已注入",
-      "notInjected": "注入失败",
-      "unknown": "未知"
-    }
-  },
-  "moduleCard": {
-    "header": "模块",
-    "arch": "架构: "
-  },
-  "action": {
-    "header": "Action",
-    "daemonButton": {
-      "start": "启动",
-      "stop": "停止",
-      "exit": "退出"
-    }
-  },
-  "settings": {
-    "header": "设置"
-  },
  "cmdErrors": {
    "ptrace64": "执行zygisk-ptrace64时出现错误",
    "ptrace32": "执行zygisk-ptrace32时出现错误",
@@ -44,14 +10,64 @@
  "global": {
    "unknown": "未知"
  },
-  "errorHistory": {
-    "header": "错误记录",
-    "placeholder": "未发现任何错误!"
+  "modal": {
+    "logs": {
+      "header": "错误记录",
+      "placeholder": "未发现任何错误!"
+    },
+    "language": {
+      "header": "选择你的语言"
+    }
  },
-  "switcher": {
-    "font": {
-      "header": "使用系统字体",
-      "description": "此选项将在当前界面中使用系统字体。注意：可能与 FlipFont 不兼容"
+  "page": {
+    "home": {
+      "header": "Home",
+      "status": {
+        "unknown": "ReZygisk处于未知状态!",
+        "notWorking": "ReZygisk无法运行!",
+        "ok": "ReZygisk正常运行!",
+        "partially": "ReZygisk部分正常运行!"
+      },
+      "info": {
+        "version": "版本",
+        "root": "Root实现",
+        "zygote": {
+          "injected": "已注入",
+          "notInjected": "注入失败",
+          "unknown": "未知"
+        }
+      }
+    },
+    "modules": {
+      "header": "模块",
+      "arch": "架构: "
+    },
+    "action": {
+      "header": "Action",
+      "daemonButton": {
+        "start": "启动",
+        "stop": "停止",
+        "exit": "退出"
+      }
+    },
+    "settings": {
+      "header": "设置",
+      "font": {
+        "header": "使用系统字体",
+        "description": "此选项将在当前界面中使用系统字体。注意：可能与 FlipFont 不兼容"
+      },
+      "theme": {
+        "header": "Enable light theme",
+        "description": "This option will enable light theme for WebUI"
+      },
+      "language": {
+        "header": "Change language",
+        "description": "Change to your new language"
+      },
+      "logs": {
+        "header": "Error History",
+        "description": "View all of your error log"
+      }
    }
  }
-}
+}
--- a/webroot/lang/zh_TW.json
+++ b/webroot/lang/zh_TW.json
@@ -1,40 +1,5 @@
-
-
 {
  "langName": "繁體中文 (中國台灣)",
-  "langModal": {
-    "header": "選擇你的語言"
-  },
-  "infoCard": {
-    "status": {
-      "unknown": "ReZygisk處於未知狀態!",
-      "notWorking": "ReZygisk無法運作!",
-      "ok": "ReZygisk正常運作!",
-      "partially": "ReZygisk部分正常運作!"
-    },
-    "version": "版本",
-    "root": "Root實現",
-    "zygote": {
-      "injected": "已註入",
-      "notInjected": "注入失敗",
-      "unknown": "未知"
-    }
-  },
-  "moduleCard": {
-    "header": "模塊",
-    "arch": "架構: "
-  },
-  "action": {
-    "header": "Action",
-    "daemonButton": {
-      "start": "啟動",
-      "stop": "停止",
-      "exit": "退出"
-    }
-  },
-  "settings": {
-    "header": "設定"
-  },
  "cmdErrors": {
    "ptrace64": "執行zygisk-ptrace64時發生錯誤",
    "ptrace32": "執行zygisk-ptrace32時發生錯誤",
@@ -45,14 +10,64 @@
  "global": {
    "unknown": "未知"
  },
-  "errorHistory": {
-    "header": "錯誤記錄",
-    "placeholder": "未發現任何錯誤!"
+  "modal": {
+    "logs": {
+      "header": "錯誤記錄",
+      "placeholder": "未發現任何錯誤!"
+    },
+    "language": {
+      "header": "選擇你的語言"
+    }
  },
-  "switcher": {
-    "font": {
-      "header": "使用系統字體",
-      "description": "此選項將在目前介面中使用系統字體。注意：可能與 FlipFont 不相容"
+  "page": {
+    "home": {
+      "header": "Home",
+      "status": {
+        "unknown": "ReZygisk處於未知狀態!",
+        "notWorking": "ReZygisk無法運作!",
+        "ok": "ReZygisk正常運作!",
+        "partially": "ReZygisk部分正常運作!"
+      },
+      "info": {
+        "version": "版本",
+        "root": "Root實現",
+        "zygote": {
+          "injected": "已註入",
+          "notInjected": "注入失敗",
+          "unknown": "未知"
+        }
+      }
+    },
+    "modules": {
+      "header": "模塊",
+      "arch": "架構: "
+    },
+    "action": {
+      "header": "Action",
+      "daemonButton": {
+        "start": "啟動",
+        "stop": "停止",
+        "exit": "退出"
+      }
+    },
+    "settings": {
+      "header": "設定",
+      "font": {
+        "header": "使用系統字體",
+        "description": "此選項將在目前介面中使用系統字體。注意：可能與 FlipFont 不相容"
+      },
+      "theme": {
+        "header": "Enable light theme",
+        "description": "This option will enable light theme for WebUI"
+      },
+      "language": {
+        "header": "Change language",
+        "description": "Change to your new language"
+      },
+      "logs": {
+        "header": "Error History",
+        "description": "View all of your error log"
+      }
    }
  }
-}
+}
				`@@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>`
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg>`
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q83 0 155.5 31.5t127 86q54.5 54.5 86 127T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Zm0-82q26-36 45-75t31-83H404q12 44 31 83t45 75Zm-104-16q-18-33-31.5-68.5T322-320H204q29 50 72.5 87t99.5 55Zm208 0q56-18 99.5-55t72.5-87H638q-9 38-22.5 73.5T584-178ZM170-400h136q-3-20-4.5-39.5T300-480q0-21 1.5-40.5T306-560H170q-5 20-7.5 39.5T160-480q0 21 2.5 40.5T170-400Zm216 0h188q3-20 4.5-39.5T580-480q0-21-1.5-40.5T574-560H386q-3 20-4.5 39.5T380-480q0 21 1.5 40.5T386-400Zm268 0h136q5-20 7.5-39.5T800-480q0-21-2.5-40.5T790-560H654q3 20 4.5 39.5T660-480q0 21-1.5 40.5T654-400Zm-16-240h118q-29-50-72.5-87T584-782q18 33 31.5 68.5T638-640Zm-234 0h152q-12-44-31-83t-45-75q-26 36-45 75t-31 83Zm-200 0h118q9-38 22.5-73.5T376-782q-56 18-99.5 55T204-640Z"/></svg>