diff --git a/app/src/main/assets/pages/LanguagesPage.html b/app/src/main/assets/pages/LanguagesPage.html
index f8aef6a1..4d007ba0 100644
--- a/app/src/main/assets/pages/LanguagesPage.html
+++ b/app/src/main/assets/pages/LanguagesPage.html
@@ -61,15 +61,15 @@
             position: relative;
         }
 
-        img_area i {
+        img_area span {
             width: 40px;
             height: 40px;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 24px;
+            font-size: 14px;
             background-color: var(--Surface-Container-Low);
-            color: var(--On-Surface);
+            color: var(--Primary);
             border-radius: 50px;
         }
 
@@ -115,208 +115,314 @@
 
 <body style="background-color: var(--Surface);">
 
-    <div class="activity-large open">
-        <div class="header-activity-large" id="head-1">
-            <button class="ripple-icon-btn regular" ontouchstart="playEffect(this)" ontouchend="playEffect2(this)"
+<div class="activity-large open">
+    <div class="header-activity-large" id="head-1">
+        <button class="ripple-icon-btn regular" ontouchstart="playEffect(this)" ontouchend="playEffect2(this)"
                 title="Go back" onclick="sendThemeToAndroid('GoBack')">
-                <span class="ripple-effect-icon"></span>
-                <span icon-outlined>arrow_back</span>
-            </button>
-            <p class="label-hidden-large" style="white-space: nowrap;" data-translate="language">Language</p>
-        </div>
-        <div class="activity-large-content" id="headUser-1">
-            <p class="label-large-main" data-translate="language">Language</p>
-            <div class="content-parent-large" style="padding-bottom: 32px;">
-
-                <md-list style="padding: 10px;">
-                    <md-list-item style="background-color: var(--Secondary-Container); border-radius: 15px;"
-                        type="button" href="https://crowdin.com/project/weathermaster/invite?h=448278a9b1370f3c10d4336a091dae792286917">
-                        <md-icon icon-outlined slot="start">translate</md-icon>
-                        <div slot="headline" style="color: var(--On-Secondary-Container);" data-translate="translate_this_app">Translate this app</div>
-                        <div slot="supporting-text">On Crowdin</div>
-                    </md-list-item>
-                </md-list>
-
-                <md-list>
-                    <label class="language_item">
-                        <input checked name="app_language_radios" value="English" lang="en" onclick="updateImgAreas()" type="radio">
-                        <img_area>
-                            <i icon-filled>globe</i>
-                        </img_area>
-                        English
-                        <md-ripple></md-ripple>
-                    </label>
-
-                    <label class="language_item">
-                        <input name="app_language_radios" value="Chinese (Simplified)" lang="zh" onclick="updateImgAreas()" type="radio">
-                        <img_area>
-                            <i icon-filled>globe</i>
-                        </img_area>
-                        Chinese (Simplified)
-                        <md-ripple></md-ripple>
-                    </label>
-
-                    <label class="language_item">
-                        <input name="app_language_radios" value="Dutch" lang="nl" onclick="updateImgAreas()" type="radio">
-                        <img_area>
-                            <i icon-filled>globe</i>
-                        </img_area>
-                        Dutch
-                        <md-ripple></md-ripple>
-                    </label>
-
-                    <label class="language_item">
-                        <input name="app_language_radios" value="Filipino" lang="fil" onclick="updateImgAreas()" type="radio">
-                        <img_area>
-                            <i icon-filled>globe</i>
-                        </img_area>
-                        Filipino
-                        <md-ripple></md-ripple>
-                    </label>
-
-                    <label class="language_item">
-                        <input name="app_language_radios" value="French" lang="fr" onclick="updateImgAreas()" type="radio">
-                        <img_area>
-                            <i icon-filled>globe</i>
-                        </img_area>
-                        French
-                        <md-ripple></md-ripple>
-                    </label>
-
-                    <label class="language_item">
-                        <input name="app_language_radios" value="German" lang="de" onclick="updateImgAreas()" type="radio">
-                        <img_area>
-                            <i icon-filled>globe</i>
-                        </img_area>
-                        German
-                        <md-ripple></md-ripple>
-                    </label>
-
-                    <label class="language_item">
-                        <input name="app_language_radios" value="Greek" lang="el" onclick="updateImgAreas()" type="radio">
-                        <img_area>
-                            <i icon-filled>globe</i>
-                        </img_area>
-                        Greek
-                        <md-ripple></md-ripple>
-                    </label>
-
-                    <label class="language_item">
-                        <input name="app_language_radios" value="Italian" lang="it" onclick="updateImgAreas()" type="radio">
-                        <img_area>
-                            <i icon-filled>globe</i>
-                        </img_area>
-                        Italian
-                        <md-ripple></md-ripple>
-                    </label>
-
-                    <label class="language_item">
-                        <input name="app_language_radios" value="Japanese" lang="ja" onclick="updateImgAreas()" type="radio">
-                        <img_area>
-                            <i icon-filled>globe</i>
-                        </img_area>
-                        Japanese
-                        <md-ripple></md-ripple>
-                    </label>
-
-                    <label class="language_item">
-                        <input name="app_language_radios" value="Persian" lang="fa" onclick="updateImgAreas()" type="radio">
-                        <img_area>
-                            <i icon-filled>globe</i>
-                        </img_area>
-                        Persian
-                        <md-ripple></md-ripple>
-                    </label>
-
-                    <label class="language_item">
-                        <input name="app_language_radios" value="Polish" lang="pl" onclick="updateImgAreas()" type="radio">
-                        <img_area>
-                            <i icon-filled>globe</i>
-                        </img_area>
-                        Polish
-                        <md-ripple></md-ripple>
-                    </label>
-
-                    <label class="language_item">
-                        <input name="app_language_radios" value="Portuguese" lang="pt" onclick="updateImgAreas()" type="radio">
-                        <img_area>
-                            <i icon-filled>globe</i>
-                        </img_area>
-                        Portuguese
-                        <md-ripple></md-ripple>
-                    </label>
-
-                    <label class="language_item">
-                        <input name="app_language_radios" value="Romanian" lang="ro" onclick="updateImgAreas()" type="radio">
-                        <img_area>
-                            <i icon-filled>globe</i>
-                        </img_area>
-                        Romanian
-                        <md-ripple></md-ripple>
-                    </label>
-
-                    <label class="language_item">
-                        <input name="app_language_radios" value="Russian" lang="ru" onclick="updateImgAreas()" type="radio">
-                        <img_area>
-                            <i icon-filled>globe</i>
-                        </img_area>
-                        Russian
-                        <md-ripple></md-ripple>
-                    </label>
-
-                    <label class="language_item">
-                        <input name="app_language_radios" value="Spanish" lang="es" onclick="updateImgAreas()" type="radio">
-                        <img_area>
-                            <i icon-filled>globe</i>
-                        </img_area>
-                        Spanish
-                        <md-ripple></md-ripple>
-                    </label>
-
-                    <label class="language_item">
-                        <input name="app_language_radios" value="Turkish" lang="tr" onclick="updateImgAreas()" type="radio">
-                        <img_area>
-                            <i icon-filled>globe</i>
-                        </img_area>
-                        Turkish
-                        <md-ripple></md-ripple>
-                    </label>
-
-                    <label class="language_item">
-                        <input name="app_language_radios" value="Ukrainian" lang="uk" onclick="updateImgAreas()" type="radio">
-                        <img_area>
-                            <i icon-filled>globe</i>
-                        </img_area>
-                        Ukrainian
-                        <md-ripple></md-ripple>
-                    </label>
-
-                    <label class="language_item">
-                        <input name="app_language_radios" value="Vietnamese" lang="vi" onclick="updateImgAreas()" type="radio">
-                        <img_area>
-                            <i icon-filled>globe</i>
-                        </img_area>
-                        Vietnamese
-                        <md-ripple></md-ripple>
-                    </label>
-                </md-list>
-
-                <br>
-                <br>
-                <br>
-                <br>
-                <br>
-                <br>
-                <br>
-                <br>
-                <br>
-            </div>
+            <span class="ripple-effect-icon"></span>
+            <span icon-outlined>arrow_back</span>
+        </button>
+        <p class="label-hidden-large" style="white-space: nowrap;" data-translate="language">Language</p>
+    </div>
+    <div class="activity-large-content" id="headUser-1">
+        <p class="label-large-main" data-translate="language">Language</p>
+        <div class="content-parent-large" style="padding-bottom: 32px;">
+
+            <md-list style="padding: 10px;">
+                <md-list-item style="background-color: var(--Secondary-Container); border-radius: 15px;"
+                              type="button" href="https://crowdin.com/project/weathermaster/invite?h=448278a9b1370f3c10d4336a091dae792286917">
+                    <md-icon icon-outlined slot="start">translate</md-icon>
+                    <div slot="headline" style="color: var(--On-Secondary-Container);" data-translate="translate_this_app">Translate this app</div>
+                    <div slot="supporting-text">On Crowdin</div>
+                </md-list-item>
+            </md-list>
+
+            <md-list>
+                <label class="language_item">
+                    <input checked name="app_language_radios" value="English" lang="en" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span>100%</span>
+                    </img_area>
+                    English
+                    <md-ripple></md-ripple>
+                </label>
+
+                <label class="language_item">
+                    <input name="app_language_radios" value="Chinese (Simplified)" lang="zh" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span id="lang-zh-CN">--</span>
+                    </img_area>
+                    Chinese (Simplified)
+                    <md-ripple></md-ripple>
+                </label>
+
+                <label class="language_item">
+                    <input name="app_language_radios" value="Dutch" lang="nl" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span id="lang-nl">--</span>
+                    </img_area>
+                    Dutch
+                    <md-ripple></md-ripple>
+                </label>
+
+                <label class="language_item">
+                    <input name="app_language_radios" value="Filipino" lang="fil" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span id="lang-fil">--</span>
+                    </img_area>
+                    Filipino
+                    <md-ripple></md-ripple>
+                </label>
+
+                <label class="language_item">
+                    <input name="app_language_radios" value="French" lang="fr" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span id="lang-fr">--</span>
+                    </img_area>
+                    French
+                    <md-ripple></md-ripple>
+                </label>
+
+                <label class="language_item">
+                    <input name="app_language_radios" value="German" lang="de" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span id="lang-de">--</span>
+                    </img_area>
+                    German
+                    <md-ripple></md-ripple>
+                </label>
+
+                <label class="language_item">
+                    <input name="app_language_radios" value="Greek" lang="el" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span id="lang-el">--</span>
+                    </img_area>
+                    Greek
+                    <md-ripple></md-ripple>
+                </label>
+
+                <label class="language_item">
+                    <input name="app_language_radios" value="Italian" lang="it" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span id="lang-it">--</span>
+                    </img_area>
+                    Italian
+                    <md-ripple></md-ripple>
+                </label>
+
+                <label class="language_item">
+                    <input name="app_language_radios" value="Japanese" lang="ja" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span id="lang-ja">--</span>
+                    </img_area>
+                    Japanese
+                    <md-ripple></md-ripple>
+                </label>
+
+                <label class="language_item">
+                    <input name="app_language_radios" value="Persian" lang="fa" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span id="lang-fa">--</span>
+                    </img_area>
+                    Persian
+                    <md-ripple></md-ripple>
+                </label>
+
+                <label class="language_item">
+                    <input name="app_language_radios" value="Polish" lang="pl" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span id="lang-pl">--</span>
+                    </img_area>
+                    Polish
+                    <md-ripple></md-ripple>
+                </label>
+
+                <label class="language_item">
+                    <input name="app_language_radios" value="Portuguese" lang="pt" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span id="lang-pt">--</span>
+                    </img_area>
+                    Portuguese
+                    <md-ripple></md-ripple>
+                </label>
+
+                <label class="language_item">
+                    <input name="app_language_radios" value="Romanian" lang="ro" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span id="lang-ro">--</span>
+                    </img_area>
+                    Romanian
+                    <md-ripple></md-ripple>
+                </label>
+
+                <label class="language_item">
+                    <input name="app_language_radios" value="Russian" lang="ru" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span id="lang-ru">--</span>
+                    </img_area>
+                    Russian
+                    <md-ripple></md-ripple>
+                </label>
+
+                <label class="language_item">
+                    <input name="app_language_radios" value="Spanish" lang="es" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span id="lang-es">--</span>
+                    </img_area>
+                    Spanish
+                    <md-ripple></md-ripple>
+                </label>
+
+                <label class="language_item">
+                    <input name="app_language_radios" value="Turkish" lang="tr" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span id="lang-tr">--</span>
+                    </img_area>
+                    Turkish
+                    <md-ripple></md-ripple>
+                </label>
+
+                <label class="language_item">
+                    <input name="app_language_radios" value="Ukrainian" lang="uk" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span id="lang-uk">--</span>
+                    </img_area>
+                    Ukrainian
+                    <md-ripple></md-ripple>
+                </label>
+
+                <label class="language_item">
+                    <input name="app_language_radios" value="Vietnamese" lang="vi" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span id="lang-vi">--</span>
+                    </img_area>
+                    Vietnamese
+                    <md-ripple></md-ripple>
+                </label>
+            </md-list>
+
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
         </div>
     </div>
+</div>
+
+
+
+<script>
+
+async function fetchTranslationProgress() {
+    const projectId = 'KEY'; // Replace with your Crowdin project ID
+    const apiToken = 'KEY';  // Replace with your Crowdin API token
+
+    const response = await fetch(`https://api.crowdin.com/api/v2/projects/${projectId}/languages/progress`, {
+        headers: {
+            'Authorization': `Bearer ${apiToken}`,
+            'Content-Type': 'application/json',
+        },
+    });
+
+    if (!response.ok) {
+        console.error('Failed to fetch translation progress:', response.statusText);
+        return;
+    }
+
+    const data = await response.json();
+    return data.data.map(lang => ({
+        language: lang.data.languageId,
+        translationProgress: lang.data.translationProgress,
+    }));
+    console.log(data)
+
+}
+
+async function updateProgressInDivs() {
+    const progressData = await fetchTranslationProgress();
 
+    progressData.forEach(({ language, translationProgress }) => {
+        // Select the corresponding div based on the language
+        const languageDiv = document.getElementById(`lang-${language}`);
+        if (languageDiv) {
+                // Update the progress span with the translation progress
+                languageDiv.textContent = `${translationProgress}%`;
+        }
+    });
+}
+
+// Run the function to fetch data and update the divs
+updateProgressInDivs();
+
+
+    function hexToRgb(hex) {
+    const bigint = parseInt(hex.slice(1), 16);
+    return {
+        r: (bigint >> 16) & 255,
+        g: (bigint >> 8) & 255,
+        b: bigint & 255
+    };
+}
 
+function rgbToHsl({ r, g, b }) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h, s, l = (max + min) / 2;
+
+    if (max === min) {
+        h = s = 0; // Achromatic
+    } else {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+            case g: h = (b - r) / d + 2; break;
+            case b: h = (r - g) / d + 4; break;
+        }
+        h /= 6;
+    }
+
+    return { h: h * 360, s: s * 100, l: l * 100 };
+}
+
+function CreateMaterialYouTheme(hex) {
+    const colors = {
+        orange_material: "#FFA500",
+        red_material: "#FF0000",
+        pink_material: "#FFC0CB",
+        purple_material: "#800080",
+        blue_material: "#0000FF",
+        yellow_material: "#FFFF00",
+        green_material: "#008000"
+    };
+
+    const targetHsl = rgbToHsl(hexToRgb(hex));
+    let closestColor = null;
+    let smallestHueDifference = Infinity;
+
+    for (const [color, colorHex] of Object.entries(colors)) {
+        const colorHsl = rgbToHsl(hexToRgb(colorHex));
+        const hueDifference = Math.abs(targetHsl.h - colorHsl.h);
+
+        if (hueDifference < smallestHueDifference) {
+            smallestHueDifference = hueDifference;
+            closestColor = color;
+        }
+    }
+
+    document.documentElement.setAttribute('Theme', closestColor);
+    sendThemeToAndroid(`${closestColor}_ScrollFalse`);
+}
 
-    <script>
         const user1 = document.getElementById('headUser-1')
 
         function changeColorOnScroll1() {
@@ -329,7 +435,7 @@
 
                 document.getElementById('headUser-1').style.scrollSnapType = 'unset';
                 container.removeEventListener('scroll', changeColorOnScroll1);
-                sendThemeToAndroid('Scrolled')
+      sendThemeToAndroid(`${document.documentElement.getAttribute('Theme')}_Scrolled`);
 
 
             } else {
@@ -351,7 +457,7 @@
                 document.getElementById('head-1').style.backgroundColor = '';
                 document.getElementById('head-1').style.transition = 'background-color 0.2s ease-in';
 
-                sendThemeToAndroid('ScrollFalse')
+                  sendThemeToAndroid(`${document.documentElement.getAttribute('Theme')}_ScrollFalse`);
 
                 container.addEventListener('scroll', changeColorOnScroll1);
                 if (scrollY <= 20); {
@@ -423,14 +529,14 @@
 
     </script>
 
-    <script src="../components-script.js/components.js"></script>
-    <script src="../ripple-files/icon-ripple.js"></script>
-    <script src="../modules/scroll.js"></script>
-    <script src="../modules/ripple_acc.js"></script>
-    <script src="../app/navigate.js"></script>
-    <script  src="bundle.js"></script>
-    <script type="module" src="../index.js"></script>
-    <script src="../langs/langs.js"></script>
+<script src="../components-script.js/components.js"></script>
+<script src="../ripple-files/icon-ripple.js"></script>
+<script src="../modules/scroll.js"></script>
+<script src="../modules/ripple_acc.js"></script>
+<script src="../app/navigate.js"></script>
+<script  src="bundle.js"></script>
+<script type="module" src="../index.js"></script>
+<script src="../langs/langs.js"></script>
 </body>
 
 </html>
\ No newline at end of file
