diff --git a/app/src/main/assets/app/day_summary.js b/app/src/main/assets/app/day_summary.js
index 08dfe7b3a..b0c4ea3c3 100644
--- a/app/src/main/assets/app/day_summary.js
+++ b/app/src/main/assets/app/day_summary.js
@@ -30,7 +30,9 @@ function GenerateSummary(data) {
             if(localStorage.getItem('UseFrogSummary') === 'true'){
                 descriptions = {
 
-                ${frogSummary}
+                ${summary}
+
+                }
 
 
             } else{
@@ -68,7 +70,7 @@ function GenerateSummary(data) {
 
     if(localStorage.getItem('UseFrogSummary') === 'true'){
         weatherPhrases = [
-            ${frogPhrases}
+            summary
         ]
     } else{
      weatherPhrases = [
diff --git a/app/src/main/assets/app/fetch.js b/app/src/main/assets/app/fetch.js
index bac60e6b7..c2870cdf4 100644
--- a/app/src/main/assets/app/fetch.js
+++ b/app/src/main/assets/app/fetch.js
@@ -28,7 +28,7 @@ function processQueue() {
   isProcessingQueue = true;
   const { lat, lon, suggestionText, refreshValue, resolve, reject } = requestQueue.shift();
 
-  fetch(`https://api.timezonedb.com/v2.1/get-time-zone?key=&format=json&by=position&lat=${lat}&lng=${lon}`)
+  fetch(`https://api.timezonedb.com/v2.1/get-time-zone?key=${}&format=json&by=position&lat=${lat}&lng=${lon}`)
     .then(response => response.json())
     .then(data => {
       if (data.status === 'OK') {
@@ -178,7 +178,7 @@ function FetchWeather(lat, lon, timezone, suggestionText, refreshValue) {
 
 
   function MoreDetails(latSum, lonSum, suggestionText) {
-    fetch(`https://api.weatherapi.com/v1/forecast.json?key=&q=${latSum},${lonSum}`)
+    fetch(`https://api.weatherapi.com/v1/forecast.json?key=${}&q=${latSum},${lonSum}`)
       .then(response => response.json())
       .then(data => {
 
@@ -194,7 +194,7 @@ function FetchWeather(lat, lon, timezone, suggestionText, refreshValue) {
 
 
   function astronomyData(latSum, lonSum, suggestionText) {
-    fetch(`https://api.weatherapi.com/v1/astronomy.json?key=&q=${latSum},${lonSum}`)
+    fetch(`https://api.weatherapi.com/v1/astronomy.json?key=${}&q=${latSum},${lonSum}`)
       .then(response => response.json())
       .then(data => {
 
@@ -207,7 +207,7 @@ function FetchWeather(lat, lon, timezone, suggestionText, refreshValue) {
   FetchAlert(lat, lon, suggestionText)
 
   function FetchAlert(lat, lon, suggestionText) {
-    fetch(`https://api.weatherapi.com/v1/alerts.json?key=&q=${lat},${lon}`)
+    fetch(`https://api.weatherapi.com/v1/alerts.json?key=${}&q=${lat},${lon}`)
       .then(response => response.json())
       .then(data => {
 
@@ -234,7 +234,7 @@ function FetchOpenMeteo(lat, lon, timezone, suggestionText, refreshValue) {
   const currentSelectedProvider = localStorage.getItem('selectedMainWeatherProvider');
  const WeatherModel = localStorage.getItem('selectedWeatherModel') || 'best_match';
 
-  if (currentSelectedProvider === 'dwdGermany' || currentSelectedProvider === 'noaaUS' || currentSelectedProvider === 'meteoFrance' || currentSelectedProvider === 'ecmwf' || currentSelectedProvider === 'ukMetOffice' || currentSelectedProvider === 'jmaJapan' || currentSelectedProvider === 'gemCanada' || currentSelectedProvider === 'bomAustralia' || currentSelectedProvider === 'cmaChina' || currentSelectedProvider === 'knmiNetherlands' || currentSelectedProvider === 'dmiDenmark') {
+  if (currentSelectedProvider === 'dwdGermany' || currentSelectedProvider === 'noaaUS' || currentSelectedProvider === 'meteoFrance' || currentSelectedProvider === 'ecmwf' || currentSelectedProvider === 'ukMetOffice' || currentSelectedProvider === 'jmaJapan' || currentSelectedProvider === 'gemCanada' || currentSelectedProvider === 'bomAustralia' || currentSelectedProvider === 'cmaChina' || currentSelectedProvider === 'knmiNetherlands' || currentSelectedProvider === 'dmiDenmark' || currentSelectedProvider === 'Met norway') {
 
 
   } else {
diff --git a/app/src/main/assets/app/renderForecastPage.js b/app/src/main/assets/app/renderForecastPage.js
index 3591ca342..8dce900af 100644
--- a/app/src/main/assets/app/renderForecastPage.js
+++ b/app/src/main/assets/app/renderForecastPage.js
@@ -1286,27 +1286,7 @@ function GenerateSummary(data) {
             if(localStorage.getItem('UseFrogSummary') === 'true'){
                 descriptions = {
 
-                    'Clear sky': ["a shiny, froggy day full of sunshine 🐸🌞", "the sky is clear like a froggy pond in summer 🐸🌈", "perfectly sunny with no clouds, just like a frog's favorite weather 🐸☀️"],
-                    'Mostly clear': ["mostly sunny with a few clouds for froggies to hop on 🐸☁️", "some sunshine peeking through, perfect for froggy adventures 🐸🌤", "a mix of sunshine and clouds, just like froggies love it 🐸⛅"],
-                    'Partly cloudy': ["partly cloudy, just enough clouds to make it froggy and cool 🐸🌥", "frogs love a balance of sun and cloud, just like today 🐸🌤", "some clouds and sunshine, a froggy combo 🐸☁️☀️"],
-                    'Overcast': ["cloudy and overcast, a cozy day for frogs 🐸🌫", "the sky is grey like a frog in a puddle 🐸☁️", "overcast with no sunshine, just how some frogs like it 🐸🌥"],
-                    'Fog': ["foggy weather, like a frog lost in a misty swamp 🐸🌫", "dense fog that makes it hard to see the lily pads 🐸🌁", "a misty, foggy atmosphere, just like a frog's favorite hiding spot 🐸🌫"],
-                    'Drizzle': ["light drizzle, the perfect kind of rain for a froggy splash 🐸💧", "a gentle drizzle, just enough to make the frogs happy 🐸🌧️", "soft, light rain—perfect for frogs hopping around 🐸🌦️"],
-                    'Freezing Drizzle': ["icy drizzle that makes froggies hop for cover 🐸❄️", "freezing drizzle, the kind of weather froggies don’t like 🐸🥶", "a touch of freezing drizzle, froggies need to bundle up! 🐸🧊"],
-                    'Moderate rain': ["moderate rain showers, a little too wet for some frogs 🐸🌧️", "steady rain, perfect for a froggy swim 🐸🌧️💦", "a nice light to moderate rain—just enough for froggies to splash around 🐸🌧"],
-                    'Heavy intensity rain': ["heavy rainfall, even frogs are staying inside 🐸🌧️", "intense rain, time for froggies to huddle together 🐸💧💦", "a downpour that’ll leave the frogs drenched 🐸💦"],
-                    'Freezing Rain': ["freezing rain, a froggy nightmare of ice and cold 🐸❄️🧊", "rain turning to ice, froggies better stay warm 🐸🥶", "ice-covered conditions—frogs don’t like this kind of chill 🐸❄️"],
-                    'Slight snow': ["light snowfall, froggies hopping through tiny snowflakes 🐸❄️", "gentle snowflakes falling, just a dusting for froggies 🐸☃️", "a little snow, perfect for froggies to hop around in 🐸🌨️"],
-                    'Moderate snow': ["moderate snowfall, froggies love a good snowstorm 🐸❄️", "steady snowfall, froggies hopping through the fluff 🐸🌨️", "a nice amount of snow, froggies will enjoy playing in it 🐸❄️"],
-                    'Heavy intensity snow': ["heavy snowfall, froggies need to dig in for warmth 🐸🌨️❄️", "a snowstorm, froggies buried in snowflakes 🐸❄️❄️", "intense snowfall, froggies might need a warm pond 🐸❄️❄️"],
-                    'Snow grains': ["occasional snow grains, froggies making footprints in the light snow 🐸❄️", "sporadic snow grains, froggies can hardly notice them 🐸❄️", "light snow grains drifting down, just enough for froggies to enjoy 🐸🌨️"],
-                    'Rain showers': ["intermittent rain showers, froggies will need to hop in and out 🐸🌧️", "sporadic rain showers, but frogs don’t mind 🐸💧", "on and off rain, froggies love hopping between puddles 🐸🌧️"],
-                    'Heavy rain showers': ["heavy rain showers, froggies are staying dry 🐸🌧️💦", "frequent, intense rain showers, the froggies are hopping fast 🐸💧", "lots of rain today, the frogs are loving it... but a little too wet 🐸🌧️🌊"],
-                    'Slight snow showers': ["light snow showers, froggies hopping through the flakes 🐸❄️", "occasional snowflakes, froggies are enjoying the cool air 🐸❄️🌨", "intermittent light snow, froggies are catching snowflakes on their tongues 🐸❄️"],
-                    'Heavy snow showers': ["heavy snow showers, froggies making big leaps through the snow 🐸❄️❄️", "constant heavy snow, froggies hopping through the winter wonderland 🐸❄️🌨️", "snow showers with strong intensity, froggies building snow forts 🐸❄️🌨️"],
-                    'Thunderstorm': ["a thunderstorm, froggies are huddling under a big leaf 🐸⚡", "a storm with lightning, froggies are hiding from the thunder 🐸⚡🌩️", "thunder and lightning, froggies don't like the loud boom 🐸⚡🌩️"],
-                    'Strong thunderstorm': ["strong thunderstorms, froggies are taking cover 🐸⚡🌪", "severe thunderstorms, froggies are staying under the big, safe lily pads 🐸⚡🌩️", "intense thunderstorm activity, froggies are in full retreat 🐸⚡🌩️"],
-
+                     ${summary}
                 }
 
 
@@ -1345,14 +1325,7 @@ function GenerateSummary(data) {
 
     if(localStorage.getItem('UseFrogSummary') === 'true'){
         weatherPhrases = [
-        `Froggy says: Expect ${hourlyDescription} in the morning, followed by ${dailyDescription} later in the day. Ribbit! 🐸`,
-        `Hop into the day with ${hourlyDescription}, and then get ready for ${dailyDescription} later on. Frogs like variety! 🐸🌞`,
-        `It's gonna be ${hourlyDescription} this morning, and then a little bit of ${dailyDescription} to keep things interesting. Ribbit! 🐸🎉`,
-        `Frogs love a good weather change! Start with ${hourlyDescription}, and watch out for ${dailyDescription} as the day goes on. 🐸🌤`,
-        `Grab your umbrella! Expect ${hourlyDescription} to start, then hop into ${dailyDescription} by the afternoon. Ribbit! 🐸🌧️`,
-        `Ribbit! Froggies say: ${hourlyDescription} this morning, with ${dailyDescription} later. Time to hop around! 🐸🌞`,
-        `Frogs are jumping in joy because it’s ${hourlyDescription}, and by the afternoon, you’ll have ${dailyDescription}. 🐸💨`,
-        `It’s a froggy day out there! Start with ${hourlyDescription}, then get ready for ${dailyDescription}. 🐸☔`,
+                  summary
         ]
     } else{
      weatherPhrases = [
diff --git a/app/src/main/assets/pages/LanguagesPage.html b/app/src/main/assets/pages/LanguagesPage.html
index c47cbfa37..e1f3b1c41 100644
--- a/app/src/main/assets/pages/LanguagesPage.html
+++ b/app/src/main/assets/pages/LanguagesPage.html
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html lang="en" Theme="clothing" data-theme="dark">
+<html lang="en" Theme="blue_material" data-theme="dark">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
     <title>Select language</title>
+    <script src="../bridge/android.js"></script>
     <script src="../database/MainDataBase.js"></script>
     <link rel="stylesheet" href="../ui-files/ui.css">
     <link rel="stylesheet" href="../ui-files/font-usage.css">
@@ -14,7 +15,13 @@
     <link rel="stylesheet" href="../ripple-files/ripple.css">
     <link rel="stylesheet" href="../components/segment-btns.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css" />
-
+    <script src="../langs/langs.js"></script>
+    <script src="../configSource.js"></script>
+    <script>
+          if(localStorage.getItem('useLightTheme') && localStorage.getItem('useLightTheme') === 'true'){
+        document.documentElement.setAttribute('colorTheme', 'light');
+        }
+  </script>
     <style>
  .activity-large-content::before {
             position: fixed;
@@ -108,8 +115,8 @@
             align-items: center;
             flex-shrink: 0;
             justify-content: center;
-            background-color: var(--Primary);
-            color: var(--On-Primary);
+            background-color: var(--Tertiary-Container);
+            color: var(--On-Tertiary-Container);
             animation: scaleUp 0.2s ease-out;
             display: var(--display-before, none);
 
@@ -117,12 +124,13 @@
 
         @keyframes scaleUp {
             0% {
+                transform: scale(1.3);
                 opacity: 0;
             }
 
             100% {
+                transform: scale(1);
                 opacity: 1;
-
             }
         }
 
@@ -143,8 +151,20 @@
 
         lang_label{
             z-index: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 2px;
         }
 
+        lang_label lang_label_sub{
+            color: var(--On-Surface);
+            opacity: 0.7;
+            font-family: var(--google-normal);
+            font-size: 14px;
+        }
+
+
         .selected_lang  {
            background-color: var(--Primary);
            color: var(--On-Primary);
@@ -156,21 +176,58 @@
             color: var(--On-Primary);
         }
 
+        .selected_lang lang_label lang_label_sub{
+            color: var(--On-Primary);
+            opacity: 0.8;
 
+        }
 
+        #searchLanguageInput{
+            font-size: 18px;
+            color: var(--On-Surface);
+            background-color: transparent;
+            caret-color: var(--Primary);
+            width: 100%;
+            border: none;
+            padding-left: 8px;
+            padding-top: 4px;
+            padding-bottom: 3px;
+        }
+
+        #searchLanguageInput::placeholder{
+            color: var(--On-Surface-Variant);
+            opacity: 0.7;
+        }
+                #searchLanguageInput::selection{
+            background-color: var(--Secondary-Container);
+
+        }
     </style>
 </head>
 
-<body style="background-color: var(--Surface);   -webkit-user-drag: none;">
+<body style="background-color: var(--Surface);   -webkit-user-drag: none;" hidden>
 
 <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')">
+                title="Go back" onclick="ActivityBack()" id="btn_go_back_page">
+            <span class="ripple-effect-icon"></span>
+            <span icon-outlined>arrow_back</span>
+        </button>
+        <button class="ripple-icon-btn regular" ontouchstart="playEffect(this)" ontouchend="playEffect2(this)"
+                onclick="window.history.back()" hidden id="btn_set_back">
             <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>
+        <input type="text" id="searchLanguageInput" placeholder="Search..." hidden onkeyup="filterLanguages()">
+        <flex style="flex: 1;"></flex>
+
+        <button class="ripple-icon-btn regular searchLangbtn" onclick="searchLanguage()"  ontouchstart="playEffect(this)" ontouchend="playEffect2(this)"
+                title="Delete locations">
+            <span class="ripple-effect-icon"></span>
+            <span icon-outlined>search</span>
+        </button>
     </div>
     <div class="activity-large-content" id="headUser-1">
         <p class="label-large-main" data-translate="language">Language</p>
@@ -192,7 +249,7 @@
                     <img_area>
                         <span>EN</span>
                     </img_area>
-                    <lang_label>English</lang_label>
+                    <lang_label>English <lang_label_sub>United states</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-en-full"></progress-lang>
                     <p>100%</p>
@@ -203,20 +260,30 @@
                     <img_area>
                         <span>ZH</span>
                     </img_area>
-                    <lang_label>Chinese (Simplified)</lang_label>
+                    <lang_label>中文 (简体) <lang_label_sub>Chinese (Simplified)</lang_label_sub></lang_label>
 
 
                     <progress-lang class="progress-lang-zh-CN"></progress-lang>
                     <p id="lang-zh-CN">--</p>
                 </label>
 
+                <label class="language_item">
+                    <input name="app_language_radios" value="Chinese (Traditional)" lang="zh-TW" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span>TW</span>
+                    </img_area>
+                    <lang_label>中文 (繁體) <lang_label_sub>Chinese (Traditional)</lang_label_sub></lang_label>
+                    <progress-lang class="progress-lang-zh-TW"></progress-lang>
+                    <p id="lang-zh-TW">No data</p>
+                </label>
+
                 <label class="language_item">
                     <input name="app_language_radios" value="Dutch" lang="nl" onclick="updateImgAreas()" type="radio">
                     <img_area>
                         <span>NL</span>
                     </img_area>
 
-                    <lang_label>Dutch</lang_label>
+                    <lang_label>Nederlands <lang_label_sub>Dutch</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-nl"></progress-lang>
                     <p id="lang-nl">--</p>
@@ -229,7 +296,7 @@
                         <span>RU</span>
                     </img_area>
 
-                    <lang_label>Russian</lang_label>
+                    <lang_label>русский <lang_label_sub>Russian</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-ru"></progress-lang>
                     <p id="lang-ru">--</p>
@@ -241,7 +308,7 @@
                         <span>CS</span>
                     </img_area>
 
-                    <lang_label>Czech</lang_label>
+                    <lang_label>čeština <lang_label_sub>Czech</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-cs"></progress-lang>
                     <p id="lang-cs">--</p>
@@ -253,7 +320,7 @@
                         <span>FIL</span>
                     </img_area>
 
-                    <lang_label>Filipino</lang_label>
+                    <lang_label>Filipino <lang_label_sub>Filipino</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-fil"></progress-lang>
                     <p id="lang-fil">--</p>
@@ -265,7 +332,7 @@
                         <span>FR</span>
                     </img_area>
 
-                    <lang_label>French</lang_label>
+                    <lang_label>français <lang_label_sub>French</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-fr"></progress-lang>
                     <p id="lang-fr">--</p>
@@ -277,7 +344,7 @@
                         <span>DE</span>
                     </img_area>
 
-                    <lang_label>German</lang_label>
+                    <lang_label>Deutsch <lang_label_sub>German</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-de"></progress-lang>
                     <p id="lang-de">--</p>
@@ -289,7 +356,7 @@
                         <span>EL</span>
                     </img_area>
 
-                    <lang_label>Greek</lang_label>
+                    <lang_label>Ελληνικά <lang_label_sub>Greek</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-el"></progress-lang>
                     <p id="lang-el">--</p>
@@ -301,7 +368,7 @@
                         <span>IT</span>
                     </img_area>
 
-                    <lang_label>Italian</lang_label>
+                    <lang_label>italiano <lang_label_sub>Italian</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-it"></progress-lang>
                     <p id="lang-it">--</p>
@@ -313,7 +380,7 @@
                         <span>JA</span>
                     </img_area>
 
-                    <lang_label>Japanese</lang_label>
+                    <lang_label>日本語 <lang_label_sub>Japanese</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-ja"></progress-lang>
                     <p id="lang-ja">--</p>
@@ -325,7 +392,7 @@
                         <span>FA</span>
                     </img_area>
 
-                    <lang_label>Persian</lang_label>
+                    <lang_label>فارسی  <lang_label_sub>Persian</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-fa"></progress-lang>
                     <p id="lang-fa">--</p>
@@ -337,7 +404,7 @@
                         <span>PL</span>
                     </img_area>
 
-                    <lang_label>Polish</lang_label>
+                    <lang_label>Polski <lang_label_sub>Polish</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-pl"></progress-lang>
                     <p id="lang-pl">--</p>
@@ -349,7 +416,7 @@
                         <span>PT</span>
                     </img_area>
 
-                    <lang_label>Portuguese</lang_label>
+                    <lang_label>português <lang_label_sub>Portuguese</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-pt-PT"></progress-lang>
                     <p id="lang-pt-PT">--</p>
@@ -361,7 +428,7 @@
                         <span>RO</span>
                     </img_area>
 
-                    <lang_label>Romanian</lang_label>
+                    <lang_label>română <lang_label_sub>Romanian</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-ro"></progress-lang>
                     <p id="lang-ro">--</p>
@@ -374,7 +441,7 @@
                         <span>ES</span>
                     </img_area>
 
-                    <lang_label>Spanish</lang_label>
+                    <lang_label>español <lang_label_sub>Spanish</lang_label_sub></lang_label>
                     <progress-lang class="progress-lang-es-ES"></progress-lang>
                     <p id="lang-es-ES">--</p>
                 </label>
@@ -385,7 +452,7 @@
                         <span>TR</span>
                     </img_area>
 
-                    <lang_label>Turkish</lang_label>
+                    <lang_label>Türkçe <lang_label_sub>Turkish</lang_label_sub></lang_label>
                     <progress-lang class="progress-lang-tr"></progress-lang>
                     <p id="lang-tr">--</p>
                 </label>
@@ -396,7 +463,7 @@
                         <span>UK</span>
                     </img_area>
 
-                    <lang_label>Ukrainian</lang_label>
+                    <lang_label>українська <lang_label_sub>Ukrainian</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-uk"></progress-lang>
                     <p id="lang-uk">--</p>
@@ -408,7 +475,7 @@
                         <span>VI</span>
                     </img_area>
 
-                    <lang_label>Vietnamese</lang_label>
+                    <lang_label>Tiếng Việt <lang_label_sub>Vietnamese</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-vi"></progress-lang>
                     <p id="lang-vi">--</p>
@@ -420,19 +487,31 @@
                         <span>SR</span>
                     </img_area>
 
-                    <lang_label>Serbian (Latin)</lang_label>
+                    <lang_label>srpski (Latin) <lang_label_sub>Serbian (Latin)</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-sr-CS"></progress-lang>
                     <p id="lang-sr-CS">--</p>
                 </label>
 
+                <label class="language_item">
+                    <input name="app_language_radios" value="Serbian (Cyrillic)" lang="sr-CY" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span>SR</span>
+                    </img_area>
+
+                    <lang_label>srpski (Cyrillic) <lang_label_sub>Serbian (Cyrillic)</lang_label_sub></lang_label>
+
+                    <progress-lang class="progress-lang-sr"></progress-lang>
+                    <p id="lang-sr">--</p>
+                </label>
+
                 <label class="language_item">
                     <input name="app_language_radios" value="Azerbaijani" lang="az" onclick="updateImgAreas()" type="radio">
                     <img_area>
                         <span>AZ</span>
                     </img_area>
 
-                    <lang_label>Azerbaijani</lang_label>
+                    <lang_label>Azərbaycan dili <lang_label_sub>Azerbaijani</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-az"></progress-lang>
                     <p id="lang-az">--</p>
@@ -444,7 +523,7 @@
                         <span>SL</span>
                     </img_area>
 
-                    <lang_label>Slovenian</lang_label>
+                    <lang_label>slovenščina <lang_label_sub>Slovenian</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-sl"></progress-lang>
                     <p id="lang-sl">--</p>
@@ -456,7 +535,7 @@
                         <span>FI</span>
                     </img_area>
 
-                    <lang_label>Finnish</lang_label>
+                    <lang_label>suomi <lang_label_sub>Finnish</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-fi"></progress-lang>
                     <p id="lang-fi">--</p>
@@ -468,12 +547,23 @@
                         <span>HU</span>
                     </img_area>
 
-                    <lang_label>Hungarian</lang_label>
+                    <lang_label>magyar <lang_label_sub>Hungarian</lang_label_sub></lang_label>
 
                     <progress-lang class="progress-lang-hu"></progress-lang>
                     <p id="lang-hu">--</p>
                 </label>
 
+                <label class="language_item">
+                    <input name="app_language_radios" value="Arabic, Saudi Arabia" lang="ar-SA" onclick="updateImgAreas()" type="radio">
+                    <img_area>
+                        <span>AR</span>
+                    </img_area>
+
+                    <lang_label>العربية (السعودية) <lang_label_sub>Arabic, Saudi Arabia</lang_label_sub></lang_label>
+
+                    <progress-lang class="progress-lang-ar-SA"></progress-lang>
+                    <p id="lang-ar-SA">--</p>
+                </label>
 
             </md-list>
 
@@ -494,6 +584,95 @@
 
 <script>
 
+// toggle search language
+
+    document.getElementById('searchLanguageInput').setAttribute('placeholder', getTranslationByLang(localStorage.getItem("AppLanguageCode"), 'search') + '...')
+
+
+function searchLanguage() {
+    document.getElementById('headUser-1').style = 'scroll-snap-type: unset !important;'
+    document.getElementById('btn_go_back_page').hidden = true;
+    document.getElementById('btn_set_back').hidden =  false
+    window.history.pushState({ SearchOpen: true }, "");
+
+    setTimeout(() =>{
+        smoothScrollTo(document.getElementById('headUser-1'), 200);
+        document.querySelector('.label-hidden-large').hidden = true;
+        document.getElementById('searchLanguageInput').hidden = false;
+        document.querySelector('.searchLangbtn').hidden = true
+        setTimeout(() => {
+        document.getElementById('searchLanguageInput').focus()
+        }, 300);
+    }, 200);
+}
+
+function resetEveryThingOnHeader(){
+    document.getElementById('searchLanguageInput').value = ''
+    document.getElementById('searchLanguageInput').onkeyup()
+    setTimeout(() =>{
+        document.querySelector('.label-hidden-large').hidden = false;
+        document.getElementById('searchLanguageInput').hidden = true;
+        document.querySelector('.searchLangbtn').hidden = false
+        document.getElementById('btn_go_back_page').hidden = false;
+        document.getElementById('btn_set_back').hidden =  true
+    document.getElementById('searchLanguageInput').setAttribute('placeholder', getTranslationByLang(localStorage.getItem("AppLanguageCode"), 'search') + '...')
+
+
+    }, 200);
+}
+
+document.getElementById('searchLanguageInput').addEventListener('blur', () =>{
+    window.history.back()
+})
+
+window.addEventListener("popstate", function (event) {
+    if(!document.getElementById('searchLanguageInput').hidden){
+        resetEveryThingOnHeader()
+    }
+});
+
+function filterLanguages() {
+        var searchInput = document.getElementById('searchLanguageInput').value.toLowerCase();
+
+        var languageItems = document.querySelectorAll('.language_item');
+
+        languageItems.forEach(function(item) {
+            var languageName = item.querySelector('lang_label').innerText.toLowerCase();
+
+            if (languageName.includes(searchInput)) {
+                item.style.display = '';
+            } else {
+                item.style.display = 'none';
+            }
+        });
+    }
+
+    function smoothScrollTo(element, targetPosition, duration = 300) {
+    const startPosition = element.scrollTop;
+    const distance = targetPosition - startPosition;
+    let startTime = null;
+
+    function scrollStep(currentTime) {
+        if (!startTime) startTime = currentTime; // Initial timestamp
+        const timeElapsed = currentTime - startTime;
+        const progress = timeElapsed / duration; // Calculate the progress (0 to 1)
+
+        // Apply easing to make the scroll smoother (ease-in-out effect)
+        const easeProgress = Math.min(progress * (2 - progress), 1); // Ease-in-out curve
+
+        // Set the scroll position based on progress
+        element.scrollTop = startPosition + distance * easeProgress;
+
+        if (timeElapsed < duration) {
+            requestAnimationFrame(scrollStep); // Continue scrolling
+        } else {
+            element.scrollTop = targetPosition; // Ensure the final position is set
+        }
+    }
+
+    requestAnimationFrame(scrollStep); // Start the animation
+}
+
 
 async function fetchTranslationProgress() {
     const projectId = '';
@@ -577,9 +756,6 @@ async function updateProgressInDivs() {
     });
 }
 
-// Run the function to fetch data and update the divs
-updateProgressInDivs();
-
 
     function hexToRgb(hex) {
     const bigint = parseInt(hex.slice(1), 16);
@@ -623,7 +799,8 @@ async function CreateMaterialYouTheme(hex) {
         purple_material: "#800080",
         blue_material: "#0000FF",
         yellow_material: "#FFFF00",
-        green_material: "#008000"
+        green_material: "#008000",
+        mono_material: "#e2e2e2"
     };
 
     const targetHsl = rgbToHsl(hexToRgb(hex));
@@ -633,7 +810,10 @@ async function CreateMaterialYouTheme(hex) {
     for (const [color, colorHex] of Object.entries(colors)) {
         const colorHsl = rgbToHsl(hexToRgb(colorHex));
         const hueDifference = Math.abs(targetHsl.h - colorHsl.h);
-
+        if (targetHsl.s < 10) {
+            closestColor = "mono_material";
+            break;
+        }
         if (hueDifference < smallestHueDifference) {
             smallestHueDifference = hueDifference;
             closestColor = color;
@@ -641,19 +821,45 @@ async function CreateMaterialYouTheme(hex) {
     }
 
  if(localStorage.getItem("useDynamicColors") && localStorage.getItem("useDynamicColors") === "false"){
-        if (await customStorage.getItem("customTheme")) {
-      document.documentElement.setAttribute(
-        "Theme",
-        await customStorage.getItem("customTheme")
-      );
-            sendThemeToAndroid(
-        `${document.documentElement.getAttribute("Theme")}_ScrollFalse`
-      );
-    }
+  if (await customStorage.getItem("customTheme")) {
+    document.documentElement.setAttribute(
+      "Theme",
+      await customStorage.getItem("customTheme")
+    );
   } else{
-  document.documentElement.setAttribute('Theme', closestColor);
-  sendThemeToAndroid(`${closestColor}_ScrollFalse`);
+    document.documentElement.setAttribute(
+     "Theme",
+        "blue_material"
+   );
+     await customStorage.setItem("customTheme", "blue_material");
   }
+
+      if(localStorage.getItem('useLightTheme') && localStorage.getItem('useLightTheme') === 'true'){
+        document.documentElement.setAttribute('colorTheme', 'light');
+        sendThemeToAndroid(getComputedStyle(document.documentElement).getPropertyValue('--Surface'), getComputedStyle(document.documentElement).getPropertyValue('--Surface'), '1')
+
+      } else{
+        document.documentElement.setAttribute('colorTheme', 'dark');
+        sendThemeToAndroid(getComputedStyle(document.documentElement).getPropertyValue('--Surface'), getComputedStyle(document.documentElement).getPropertyValue('--Surface'), '0')
+      }
+        document.querySelector('body').hidden = false
+
+  } else{
+    document.documentElement.setAttribute('Theme', closestColor);
+
+if(localStorage.getItem('useLightTheme') && localStorage.getItem('useLightTheme') === 'true'){
+  document.documentElement.setAttribute('colorTheme', 'light');
+  sendThemeToAndroid(getComputedStyle(document.documentElement).getPropertyValue('--Surface'), getComputedStyle(document.documentElement).getPropertyValue('--Surface'), '1')
+
+} else{
+  document.documentElement.setAttribute('colorTheme', 'dark');
+  sendThemeToAndroid(getComputedStyle(document.documentElement).getPropertyValue('--Surface'), getComputedStyle(document.documentElement).getPropertyValue('--Surface'), '0')
+}
+  document.querySelector('body').hidden = false
+  }
+
+updateProgressInDivs();
+
 }
 
         const user1 = document.getElementById('headUser-1')
@@ -668,7 +874,8 @@ async function CreateMaterialYouTheme(hex) {
 
                 document.getElementById('headUser-1').style.scrollSnapType = 'unset';
                 container.removeEventListener('scroll', changeColorOnScroll1);
-      sendThemeToAndroid(`${document.documentElement.getAttribute('Theme')}_Scrolled`);
+                        sendThemeToAndroid(getComputedStyle(document.documentElement).getPropertyValue('--Surface-Container'), getComputedStyle(document.documentElement).getPropertyValue('--Surface'), Themeflag, '220')
+
 
 
             } else {
@@ -690,7 +897,8 @@ async function CreateMaterialYouTheme(hex) {
                 document.getElementById('head-1').style.backgroundColor = '';
                 document.getElementById('head-1').style.transition = 'background-color 0.2s ease-in';
 
-                  sendThemeToAndroid(`${document.documentElement.getAttribute('Theme')}_ScrollFalse`);
+              sendThemeToAndroid(getComputedStyle(document.documentElement).getPropertyValue('--Surface'), getComputedStyle(document.documentElement).getPropertyValue('--Surface'), Themeflag, '220')
+
 
                 container.addEventListener('scroll', changeColorOnScroll1);
                 if (scrollY <= 20); {
@@ -707,12 +915,6 @@ async function CreateMaterialYouTheme(hex) {
             document.getElementById('headUser-1').addEventListener('scroll', changeColorOnScroll1A);
         }
 
-        function sendThemeToAndroid(theme) {
-
-            AndroidInterface.updateStatusBarColor(theme);
-        };
-
-
 
             document.querySelectorAll('input[name="app_language_radios"]').forEach((radio) => {
             radio.addEventListener('change', (event) => {
@@ -773,7 +975,6 @@ async function CreateMaterialYouTheme(hex) {
 <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
diff --git a/app/src/main/assets/pages/contributors.html b/app/src/main/assets/pages/contributors.html
index 526e36c5f..ba7107f63 100644
--- a/app/src/main/assets/pages/contributors.html
+++ b/app/src/main/assets/pages/contributors.html
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html lang="en" Theme="clothing" data-theme="dark" >
+<html lang="en" Theme="blue_material" data-theme="dark" >
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
     <title>Contributors Page</title>
+    <script src="../bridge/android.js"></script>
     <script src="../database/MainDataBase.js"></script>
     <script src="../langs/langs.js"></script>
     <link rel="stylesheet" href="../ui-files/ui.css">
@@ -15,7 +16,11 @@
     <link rel="stylesheet" href="../components/md-buttons.css">
     <script src="../modules/lottie.js"></script>
     <script src="../configSource.js"></script>
-
+    <script>
+          if(localStorage.getItem('useLightTheme') && localStorage.getItem('useLightTheme') === 'true'){
+        document.documentElement.setAttribute('colorTheme', 'light');
+        }
+  </script>
     <style>
 
             .padding_about_app{
@@ -135,10 +140,10 @@
     </style>
 </head>
 
-<body class="center_all" style="--md-list-item-label-text-size: 1.15rem; --md-list-item-pressed-state-layer-opacity: 0.15; --md-ref-typeface-plain: var(--google-normal); background-color: var(--Surface); overflow: hidden;">
+<body class="center_all" style="--md-list-item-label-text-size: 1.15rem; --md-list-item-pressed-state-layer-opacity: 0.15; --md-ref-typeface-plain: var(--google-normal); background-color: var(--Surface); overflow: hidden;" hidden>
 <div class="head_area_about_page">
     <p data-translate="contributors">Contributors</p>
-    <md-icon-button onclick="sendThemeToAndroid('GoBack')"><md-icon icon-outlined>close</md-icon></md-icon-button>
+    <md-icon-button onclick="ActivityBack()"><md-icon icon-outlined>close</md-icon></md-icon-button>
 </div>
 <div class="padding_about_app">
     <p class="title" style="padding: 10px; margin: 0; font-size: 24px; color: var(--Primary); padding-bottom: 0;" data-translate="creator">Creator</p>
@@ -212,8 +217,8 @@
 <script>
 
 async function fetchTranslators() {
-    const projectId = "";
-    const apiToken = ""
+    const projectId = '';
+    const apiToken = '';
 
     try {
         // Check if data exists and is within 24 hours in customStorage
@@ -375,18 +380,41 @@ async function CreateMaterialYouTheme(hex) {
     }
 
  if(localStorage.getItem("useDynamicColors") && localStorage.getItem("useDynamicColors") === "false"){
-        if (await customStorage.getItem("customTheme")) {
-      document.documentElement.setAttribute(
-        "Theme",
-        await customStorage.getItem("customTheme")
-      );
-            sendThemeToAndroid(
-        `${document.documentElement.getAttribute("Theme")}_ScrollFalse`
-      );
-    }
+  if (await customStorage.getItem("customTheme")) {
+    document.documentElement.setAttribute(
+      "Theme",
+      await customStorage.getItem("customTheme")
+    );
   } else{
-  document.documentElement.setAttribute('Theme', closestColor);
-  sendThemeToAndroid(`${closestColor}_ScrollFalse`);
+    document.documentElement.setAttribute(
+     "Theme",
+        "blue_material"
+   );
+     await customStorage.setItem("customTheme", "blue_material");
+  }
+
+      if(localStorage.getItem('useLightTheme') && localStorage.getItem('useLightTheme') === 'true'){
+        document.documentElement.setAttribute('colorTheme', 'light');
+        sendThemeToAndroid(getComputedStyle(document.documentElement).getPropertyValue('--Surface'), getComputedStyle(document.documentElement).getPropertyValue('--Surface'), '1')
+
+      } else{
+        document.documentElement.setAttribute('colorTheme', 'dark');
+        sendThemeToAndroid(getComputedStyle(document.documentElement).getPropertyValue('--Surface'), getComputedStyle(document.documentElement).getPropertyValue('--Surface'), '0')
+      }
+        document.querySelector('body').hidden = false
+
+  } else{
+    document.documentElement.setAttribute('Theme', closestColor);
+
+if(localStorage.getItem('useLightTheme') && localStorage.getItem('useLightTheme') === 'true'){
+  document.documentElement.setAttribute('colorTheme', 'light');
+  sendThemeToAndroid(getComputedStyle(document.documentElement).getPropertyValue('--Surface'), getComputedStyle(document.documentElement).getPropertyValue('--Surface'), '1')
+
+} else{
+  document.documentElement.setAttribute('colorTheme', 'dark');
+  sendThemeToAndroid(getComputedStyle(document.documentElement).getPropertyValue('--Surface'), getComputedStyle(document.documentElement).getPropertyValue('--Surface'), '0')
+}
+  document.querySelector('body').hidden = false
   }
 }
 
@@ -396,11 +424,6 @@ async function CreateMaterialYouTheme(hex) {
 
         }
 
-                function sendThemeToAndroid(theme) {
-
-            AndroidInterface.updateStatusBarColor(theme);
-        };
-
 
     </script>
 
diff --git a/app/src/main/assets/pages/searchPage.html b/app/src/main/assets/pages/searchPage.html
index 6f870a565..18381583c 100644
--- a/app/src/main/assets/pages/searchPage.html
+++ b/app/src/main/assets/pages/searchPage.html
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html lang="en" Theme="clothing" data-theme="dark">
+<html lang="en" Theme="blue_material" data-theme="dark">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
     <title>Search page</title>
+    <script src="../bridge/android.js"></script>
     <script src="../database/MainDataBase.js"></script>
     <link rel="stylesheet" href="../ui-files/font-usage.css">
     <link rel="stylesheet" href="../ui-files/variables.css">
@@ -15,7 +16,11 @@
     <script src="../langs/langs.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css" />
     <script src="../configSource.js"></script>
-
+    <script>
+          if(localStorage.getItem('useLightTheme') && localStorage.getItem('useLightTheme') === 'true'){
+        document.documentElement.setAttribute('colorTheme', 'light');
+        }
+  </script>
     <style>
         input[type="search"]::-webkit-search-decoration,
         input[type="search"]::-webkit-search-cancel-button,
@@ -346,10 +351,10 @@
 
 </head>
 
-<body style="background-color: var(--Surface);">
+<body style="background-color: var(--Surface);" hidden>
 
     <div class="search_header">
-        <md-icon-button style="flex-shrink: 0;" onclick="sendThemeToAndroid('GoBack')">
+        <md-icon-button style="flex-shrink: 0;" onclick="ActivityBack()">
             <md-icon icon-outlined>arrow_back</md-icon>
         </md-icon-button>
         <input type="search" placeholder="Search..." id="location_input" autocomplete="off">
@@ -484,7 +489,8 @@ async function CreateMaterialYouTheme(hex) {
         purple_material: "#800080",
         blue_material: "#0000FF",
         yellow_material: "#FFFF00",
-        green_material: "#008000"
+        green_material: "#008000",
+        mono_material: "#e2e2e2"
     };
 
     const targetHsl = rgbToHsl(hexToRgb(hex));
@@ -494,7 +500,10 @@ async function CreateMaterialYouTheme(hex) {
     for (const [color, colorHex] of Object.entries(colors)) {
         const colorHsl = rgbToHsl(hexToRgb(colorHex));
         const hueDifference = Math.abs(targetHsl.h - colorHsl.h);
-
+        if (targetHsl.s < 10) {
+            closestColor = "mono_material";
+            break;
+        }
         if (hueDifference < smallestHueDifference) {
             smallestHueDifference = hueDifference;
             closestColor = color;
@@ -502,25 +511,45 @@ async function CreateMaterialYouTheme(hex) {
     }
 
  if(localStorage.getItem("useDynamicColors") && localStorage.getItem("useDynamicColors") === "false"){
-        if (await customStorage.getItem("customTheme")) {
-      document.documentElement.setAttribute(
-        "Theme",
-        await customStorage.getItem("customTheme")
-      );
-            sendThemeToAndroid(
-        `${document.documentElement.getAttribute("Theme")}_ScrollFalse`
-      );
-    }
+  if (await customStorage.getItem("customTheme")) {
+    document.documentElement.setAttribute(
+      "Theme",
+      await customStorage.getItem("customTheme")
+    );
   } else{
-  document.documentElement.setAttribute('Theme', closestColor);
-  sendThemeToAndroid(`${closestColor}_ScrollFalse`);
+    document.documentElement.setAttribute(
+     "Theme",
+        "blue_material"
+   );
+     await customStorage.setItem("customTheme", "blue_material");
+  }
+
+      if(localStorage.getItem('useLightTheme') && localStorage.getItem('useLightTheme') === 'true'){
+        document.documentElement.setAttribute('colorTheme', 'light');
+        sendThemeToAndroid(getComputedStyle(document.documentElement).getPropertyValue('--Surface'), getComputedStyle(document.documentElement).getPropertyValue('--Surface'), '1')
+
+      } else{
+        document.documentElement.setAttribute('colorTheme', 'dark');
+        sendThemeToAndroid(getComputedStyle(document.documentElement).getPropertyValue('--Surface'), getComputedStyle(document.documentElement).getPropertyValue('--Surface'), '0')
+      }
+        document.querySelector('body').hidden = false
+
+  } else{
+    document.documentElement.setAttribute('Theme', closestColor);
+
+if(localStorage.getItem('useLightTheme') && localStorage.getItem('useLightTheme') === 'true'){
+  document.documentElement.setAttribute('colorTheme', 'light');
+  sendThemeToAndroid(getComputedStyle(document.documentElement).getPropertyValue('--Surface'), getComputedStyle(document.documentElement).getPropertyValue('--Surface'), '1')
+
+} else{
+  document.documentElement.setAttribute('colorTheme', 'dark');
+  sendThemeToAndroid(getComputedStyle(document.documentElement).getPropertyValue('--Surface'), getComputedStyle(document.documentElement).getPropertyValue('--Surface'), '0')
+}
+  document.querySelector('body').hidden = false
   }
 }
 
-function sendThemeToAndroid(theme) {
 
-AndroidInterface.updateStatusBarColor(theme);
-};
 
 
         const cityList = document.getElementById('city-list');
@@ -657,7 +686,7 @@ AndroidInterface.updateStatusBarColor(theme);
         // provider GeoNames ----------------------
 
         async function getCitySuggestionsGeoNames(query) {
-            const username = 'geo_search_pranshulgg';
+            const username = '';
             const url = `https://secure.geonames.org/searchJSON?name_startsWith=${query}&maxRows=10&username=${username}`;
 
             try {
@@ -877,7 +906,8 @@ function clearSuggestionsNominatim() {
             document.getElementById('selectSearchProviderDialog').show()
             window.history.pushState({ SearchProviderDialogOpen: true }, "");
 
-         sendThemeToAndroid(`${document.documentElement.getAttribute('Theme')}_DialogNotScrolled`)
+          sendThemeToAndroid(colorsDialogsOpenSurface[GetDialogOverlayContainerColor()], colorsDialogsOpenSurface[GetDialogOverlayContainerColor()], '0', '200');
+
 
         }
 
@@ -896,7 +926,8 @@ function clearSuggestionsNominatim() {
         });
 
       document.getElementById('selectSearchProviderDialog').addEventListener('close', () => {
-         sendThemeToAndroid(`${document.documentElement.getAttribute('Theme')}_ScrollFalse`);
+         sendThemeToAndroid(getComputedStyle(document.documentElement).getPropertyValue('--Surface'), getComputedStyle(document.documentElement).getPropertyValue('--Surface'), Themeflag, '210')
+
 
             });
 
@@ -1003,4 +1034,4 @@ function clearSuggestionsNominatim() {
     <script type="module" src="../index.js"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file