diff --git a/.idea/deploymentTargetDropDown.xml b/.idea/deploymentTargetDropDown.xml
index a2b98ce68..0967167a5 100644
--- a/.idea/deploymentTargetDropDown.xml
+++ b/.idea/deploymentTargetDropDown.xml
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="deploymentTargetDropDown">
-    <targetSelectedWithDropDown>
+    <runningDeviceTargetSelectedWithDropDown>
       <Target>
-        <type value="QUICK_BOOT_TARGET" />
+        <type value="RUNNING_DEVICE_TARGET" />
         <deviceKey>
           <Key>
-            <type value="VIRTUAL_DEVICE_PATH" />
-            <value value="C:\Users\hukam\.android\avd\Pixel_7_Pro_API_VanillaIceCream.avd" />
+            <type value="SERIAL_NUMBER" />
+            <value value="0611631137014982" />
           </Key>
         </deviceKey>
       </Target>
-    </targetSelectedWithDropDown>
-    <timeTargetWasSelectedWithDropDown value="2024-06-16T13:34:09.721229400Z" />
+    </runningDeviceTargetSelectedWithDropDown>
+    <timeTargetWasSelectedWithDropDown value="2024-07-13T14:37:20.016536200Z" />
   </component>
 </project>
\ No newline at end of file
diff --git a/app/build.gradle b/app/build.gradle
index 9d5abda25..aa572673c 100644
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -11,7 +11,7 @@ android {
         minSdk 22
         targetSdk 33
         versionCode 2
-        versionName "1.1.7 (W)"
+        versionName "1.1.8 (W)"
 
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
     }
diff --git a/app/src/main/assets/app/app.js b/app/src/main/assets/app/app.js
index c73dffd7e..7d6f0e3d3 100644
--- a/app/src/main/assets/app/app.js
+++ b/app/src/main/assets/app/app.js
@@ -26,32 +26,20 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 
-const uvIndexData = [
-    { description: "Very Low", style: "background-color: #4AC708;", img: 'uv-images/uv-0.png', detail: 'A UV index of 0 is considered satisfactory, indicating that there is little or no risk of harm from ultraviolet radiation.' },
-    { description: "Low", style: "background-color: #4AC708;", img: 'uv-images/uv-1.png', detail: 'A UV index of 1 is considered satisfactory, indicating that there is little or no risk of harm from ultraviolet radiation.' },
-    { description: "Acceptable", style: "background-color: #4AC708;", img: 'uv-images/uv-2.png', detail: 'With a UV index of 2, conditions are still generally low-risk, indicating that exposure to ultraviolet radiation poses a minimal threat.' },
-    { description: "Fair", style: "background-color: #FFB800;", img: 'uv-images/uv-3.png', detail: 'At a index of 3, the risk of harm from ultraviolet radiation remains low. It is considered moderate, suggesting a slight increase in caution for prolonged sun exposure.' },
-    { description: "Moderate", style: "background-color: #FFB800;", img: 'uv-images/uv-4.png', detail: 'index at 4 Moderate risk. Caution advised—consider sunscreen and limit sun exposure during peak hours.' },
-    { description: "Balanced", style: "background-color: #FFB800;", img: 'uv-images/uv-5.png', detail: 'index of 5 Moderate risk. Use sunscreen, especially during midday hours, and take precautions for extended sun exposure.' },
-    { description: "Elevated", style: "background-color: #ff8d00;", img: 'uv-images/uv-6.png', detail: 'index at 6 Moderate to high risk. Apply sunscreen, wear protective clothing, and limit sun exposure, especially during midday hours.' },
-    { description: "Intense", style: "background-color: #ff8d00;", img: 'uv-images/uv-7.png', detail: 'index at 7 High risk. Use sunscreen, protective clothing, and limit sun exposure, particularly during midday hours, to reduce the risk of harm from intense ultraviolet radiation.' },
-    { description: "Severe", style: "background-color: #ff3c00;", img: 'uv-images/uv-8.png', detail: 'index of 8 Very high risk. Take utmost precautions—apply sunscreen, wear protective clothing, and minimize sun exposure, especially during midday hours, to prevent harm from intense ultraviolet radiation.' },
-    { description: "Critical", style: "background-color: #ff3c00;", img: 'uv-images/uv-9.png', detail: 'index at 9 Extremely high risk. Use high SPF sunscreen, wear protective clothing, and avoid prolonged sun exposure, especially midday, to minimize harm from intense ultraviolet radiation.' },
-    { description: "Its Very High", style: "background-color: #ff3c00;", img: 'uv-images/uv-10.png', detail: 'index at 10 Very high risk. Maximize precautions—use high SPF sunscreen, wear protective clothing, and limit sun exposure, especially midday, to minimize harm from intense ultraviolet radiation.' },
-    { description: "Extreme", style: "background-color: #9936D4;", img: 'uv-images/uv-11.png', detail: 'Index at 11 avoid every outdoor activies.' },
-    { description: "Extreme+", style: "background-color: #FF0087;", img: 'uv-images/uv-12.png', detail: 'Index at 12 avoid every outdoor activies.' },
-    { description: "Extreme++", style: "background-color: #FF0087;", img: 'uv-images/uv-13.png', detail: 'Index at 13 avoid every outdoor activies.' },
-    { description: "Extreme++", style: "background-color: #FF0087;", img: 'uv-images/uv-13.png', detail: 'Index at 13 avoid every outdoor activies.' },
-    { description: "Extreme++", style: "background-color: #FF0087;", img: 'uv-images/uv-13.png', detail: 'Index at 13 avoid every outdoor activies.' },
-    { description: "Extreme++", style: "background-color: #FF0087;", img: 'uv-images/uv-13.png', detail: 'Index at 13 avoid every outdoor activies.' },
-    { description: "Extreme++", style: "background-color: #FF0087;", img: 'uv-images/uv-13.png', detail: 'Index at 13 avoid every outdoor activies.' },
-    { description: "Extreme++", style: "background-color: #FF0087;", img: 'uv-images/uv-13.png', detail: 'Index at 13 avoid every outdoor activies.' },
-    { description: "Extreme++", style: "background-color: #FF0087;", img: 'uv-images/uv-13.png', detail: 'Index at 13 avoid every outdoor activies.' },
-    { description: "Extreme++", style: "background-color: #FF0087;", img: 'uv-images/uv-13.png', detail: 'Index at 13 avoid every outdoor activies.' },
-    { description: "Extreme++", style: "background-color: #FF0087;", img: 'uv-images/uv-13.png', detail: 'Index at 13 avoid every outdoor activies.' }
-
-];
-
+const Uv_0 = 'A UV index is satisfactory, indicating that there is little or no risk of harm from ultraviolet radiation.';
+const Uv_1 = 'Conditions are generally low-risk, indicating that exposure to ultraviolet radiation poses a minimal threat.';
+const Uv_2 = 'Low exposure level with minimal risk of harm from UV radiation, suitable for most people.';
+const Uv_3 = 'Moderate risk of harm from unprotected sun exposure, protective measures recommended.';
+const Uv_4 = 'Moderate risk of harm from unprotected sun exposure, protective measures recommended.';
+const Uv_5 = 'Moderate risk of harm from unprotected sun exposure, protective measures recommended.';
+const Uv_6 = 'High risk of harm from unprotected sun exposure, protective measures required.';
+const Uv_7 = 'High risk of harm from unprotected sun exposure, protective measures required.';
+const Uv_8 = 'Very high risk of harm from unprotected sun exposure, extra precautions required.';
+const Uv_9 = 'Very high risk of harm from unprotected sun exposure, extra precautions required.';
+const Uv_10 = 'Very high risk of harm from unprotected sun exposure, extra precautions required.';
+const Uv_11 = 'Extreme risk of harm from unprotected sun exposure, full protection necessary.';
+const Uv_12 = 'Extreme risk of harm from unprotected sun exposure, full protection necessary.';
+const Uv_13 = 'Extreme risk of harm from unprotected sun exposure, full protection necessary.';
 
 function handleGeolocationError(error) {
     console.error('Error getting geolocation:', error);
@@ -231,10 +219,11 @@ function getWeather(city, latitude, longitude) {
     const apiKey = '120d979ba5b2d0780f51872890f5ad0b';
     const apiUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric`;
 
+    setTimeout(() => {
+        updateMoonTrackProgress(latitude, longitude)
+        updateSunTrackProgress(latitude, longitude);
+    }, 500);
 
-    updateMoonTrackProgress(latitude, longitude)
-
-    updateSunTrackProgress(latitude, longitude);
 
 
     function SendupdateSunTrackProgress(){
@@ -250,6 +239,8 @@ function getWeather(city, latitude, longitude) {
 
 
     
+    localStorage.setItem('currentLong', longitude)
+    localStorage.setItem('currentLat', latitude)
 
 
     fetch(apiUrl)
@@ -300,24 +291,17 @@ function getWeather(city, latitude, longitude) {
                             document.querySelector('.excessiveHeat').hidden = true;
                         }
 
-                                    const rainWithInHour = document.getElementById('rainNextHourText');
+                        if (data.rain && data.rain['1h']) {
+                            const precipitation = data.rain['1h'];
+                            if (precipitation > 0) {
+                                document.getElementById('AmountRainMM').innerHTML = `${data.rain['1h'].toFixed(1)} mm`
+                                document.querySelector('noRain').hidden = true;
 
-                                    if (data.rain && data.rain['1h']) {
-                                        const precipitation = data.rain['1h'];
-                                        if (precipitation < 2.5) {
-                                            rainWithInHour.innerHTML = 'Light rain within an hour' + ` <span>${Math.round(data.rain['1h'])} mm</span>`;
-                                            document.getElementById('icon-next-Hour').innerHTML = 'rainy'
-                                        } else if (precipitation < 7.6) {
-                                            rainWithInHour.innerHTML = 'Moderate rain within an hour' + ` <span>${Math.round(data.rain['1h'])} mm</span>`;
-                                            document.getElementById('icon-next-Hour').innerHTML = 'rainy'
-                                        } else {
-                                            rainWithInHour.innerHTML = 'Heavy rain within an hour' + ` <span>${Math.round(data.rain['1h'])} mm</span>`;
-                                            document.getElementById('icon-next-Hour').innerHTML = 'rainy'
-                                        }
-                                    } else {
-                                        rainWithInHour.innerHTML = 'No rain expected for now or within an hour';
-                                        document.getElementById('icon-next-Hour').innerHTML = 'umbrella'
-                                    }
+                            }
+                        } else {
+                            document.querySelector('noRain').hidden = false;
+                            document.getElementById('AmountRainMM').innerHTML = `0.0 mm`
+                        }
 
           document.getElementById('currentLocationName').textContent = `${cityName}, ${countryName}`;
              document.getElementById('currentSearchImg').src = `weather-icons/${iconCode}.svg`;
@@ -443,11 +427,11 @@ function getWeather(city, latitude, longitude) {
                     };
 
                     const backgroundColor = {
-                        1: 'rgb(11, 189, 5)',
-                        2: 'rgb(218, 179, 8)',
-                        3: 'rgb(255, 136, 0)',
-                        4: 'rgb(255, 0, 0)',
-                        5: 'rgb(183, 0, 255)'
+                        1: '#43b710',
+                        2: '#eaaf10',
+                        3: '#eb8a11',
+                        4: '#e83f0f',
+                        5: '#8e3acf'
                     }
 
 
@@ -455,32 +439,97 @@ function getWeather(city, latitude, longitude) {
                     document.getElementById('aqi-level').style.backgroundColor = backgroundColor[aqi];
                 });
 
-            const api_uv = 'c3a14b64fd3eb5f994230183700f79d1'
+            const url = `https://currentuvindex.com/api/v1/uvi?latitude=${latitude}&longitude=${longitude}`;
+            const option = { method: 'GET', headers: { Accept: 'application/json' } };
 
-            const uvUrl = `https://api.openweathermap.org/data/2.5/uvi?lat=${latitude}&lon=${longitude}&appid=${api_uv}`;
-            fetch(uvUrl)
-                .then(response => response.json())
-                .then(uvData => {
-                    const uvIndexValue = uvData.value;
-                    const uvIndex = Math.round(uvIndexValue);
-
-                    const uvIndexInfo = uvIndexData[uvIndex];
-
-                    const uvIndexText = uvIndexInfo.description;
+            fetch(url, option)
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    const now = data.now;
+                    const uvIndex = now.uvi;
 
 
-                    const uvIndexElement = document.getElementById('uv-index');
-                    uvIndexElement.textContent = uvIndexText;
-                    document.getElementById('uv-index').style = uvIndexInfo.style;
-                    document.getElementById('uv_img').src = uvIndexInfo.img;
-                    document.getElementById('detail_uv').innerHTML = uvIndexInfo.detail;
+                    if (uvIndex >= 0 && uvIndex <= 1) {
+                        document.getElementById('uv-index').innerHTML = 'Minimal risk';
+                        document.getElementById('uv-index').style = 'background-color: #43b710';
+                        document.getElementById('uv_img').src = 'uv-images/uv-0.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_0
+                    } else if (uvIndex > 1 && uvIndex <= 2) {
+                        document.getElementById('uv-index').innerHTML = 'Low risk';
+                        document.getElementById('uv-index').style = 'background-color: #43b710';
+                        document.getElementById('uv_img').src = 'uv-images/uv-1.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_1
+                    } else if (uvIndex > 2 && uvIndex <= 3) {
+                        document.getElementById('uv-index').innerHTML = 'Low risk';
+                        document.getElementById('uv-index').style = 'background-color: #43b710';
+                        document.getElementById('uv_img').src = 'uv-images/uv-2.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_2
+                    } else if (uvIndex > 3 && uvIndex <= 4) {
+                        document.getElementById('uv-index').innerHTML = 'Moderate risk';
+                        document.getElementById('uv-index').style = 'background-color: #eaaf10';
+                        document.getElementById('uv_img').src = 'uv-images/uv-3.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_3
+                    } else if (uvIndex > 4 && uvIndex <= 5) {
+                        document.getElementById('uv-index').innerHTML = 'Moderate risk';
+                        document.getElementById('uv-index').style = 'background-color: #eaaf10';
+                        document.getElementById('uv_img').src = 'uv-images/uv-4.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_4
+                    } else if (uvIndex > 5 && uvIndex <= 6) {
+                        document.getElementById('uv-index').innerHTML = 'Moderate risk';
+                        document.getElementById('uv-index').style = 'background-color: #eaaf10';
+                        document.getElementById('uv_img').src = 'uv-images/uv-5.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_5
+                    } else if (uvIndex > 6 && uvIndex <= 7) {
+                        document.getElementById('uv-index').innerHTML = 'High risk';
+                        document.getElementById('uv-index').style = 'background-color: #eb8a11';
+                        document.getElementById('uv_img').src = 'uv-images/uv-6.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_6
+                    } else if (uvIndex > 7 && uvIndex <= 8) {
+                        document.getElementById('uv-index').innerHTML = 'High risk';
+                        document.getElementById('uv-index').style = 'background-color: #eb8a11';
+                        document.getElementById('uv_img').src = 'uv-images/uv-7.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_7
+                    } else if (uvIndex > 8 && uvIndex <= 9) {
+                        document.getElementById('uv-index').innerHTML = 'Very high risk';
+                        document.getElementById('uv-index').style = 'background-color: #e83f0f';
+                        document.getElementById('uv_img').src = 'uv-images/uv-8.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_8
+                    } else if (uvIndex > 9 && uvIndex <= 10) {
+                        document.getElementById('uv-index').innerHTML = 'Very high risk';
+                        document.getElementById('uv-index').style = 'background-color: #e83f0f';
+                        document.getElementById('uv_img').src = 'uv-images/uv-9.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_9
+                    } else if (uvIndex > 10 && uvIndex <= 11) {
+                        document.getElementById('uv-index').innerHTML = 'Very high risk';
+                        document.getElementById('uv-index').style = 'background-color: #e83f0f';
+                        document.getElementById('uv_img').src = 'uv-images/uv-10.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_10
+                    } else if (uvIndex > 11 && uvIndex <= 12) {
+                        document.getElementById('uv-index').innerHTML = 'Extreme risk';
+                        document.getElementById('uv-index').style = 'background-color: #8e3acf';
+                        document.getElementById('uv_img').src = 'uv-images/uv-11.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_11
+                    } else if (uvIndex > 12 && uvIndex <= 13) {
+                        document.getElementById('uv-index').innerHTML = 'Extreme risk';
+                        document.getElementById('uv-index').style = 'background-color: #ec0c8b';
+                        document.getElementById('uv_img').src = 'uv-images/uv-12.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_12
+                    } else if (uvIndex > 13) {
+                        document.getElementById('uv-index').innerHTML = 'Extreme risk';
+                        document.getElementById('uv-index').style = 'background-color: #550ef9';
+                        document.getElementById('uv_img').src = 'uv-images/uv-13.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_13
+                    }
 
-                    hideLoader();
-                    localStorage.setItem('currentLat', latitude)
-                    localStorage.setItem('currentLong', longitude)
+                    hideLoader()
 
                 })
-                .catch(error => console.error('Error fetching UV Index:', error));
+
 
 
         })
@@ -547,9 +596,11 @@ function getWeatherByCoordinates(latitude, longitude) {
     const apiUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric`;
 
 
-    updateMoonTrackProgress(latitude, longitude)
+    setTimeout(() => {
+        updateMoonTrackProgress(latitude, longitude)
+        updateSunTrackProgress(latitude, longitude);
+    }, 500);
 
-    updateSunTrackProgress(latitude, longitude);
 
 
     function SendupdateSunTrackProgress(){
@@ -563,6 +614,10 @@ function getWeatherByCoordinates(latitude, longitude) {
     setInterval(SendupdateSunTrackProgress, 60000);
     setInterval(SendupdateMoonTrackProgress, 60000);
 
+        localStorage.setItem('currentLong', longitude)
+        localStorage.setItem('currentLat', latitude)
+
+
     fetch(apiUrl)
         .then(response => response.json())
         .then(data => {
@@ -610,24 +665,18 @@ function getWeatherByCoordinates(latitude, longitude) {
 
 
 
-                                    const rainWithInHour = document.getElementById('rainNextHourText');
+                        if (data.rain && data.rain['1h']) {
+                            const precipitation = data.rain['1h'];
+                            if (precipitation > 0) {
+                                document.getElementById('AmountRainMM').innerHTML = `${data.rain['1h'].toFixed(1)} mm`
+                                document.querySelector('noRain').hidden = true;
 
-                                    if (data.rain && data.rain['1h']) {
-                                        const precipitation = data.rain['1h'];
-                                        if (precipitation < 2.5) {
-                                            rainWithInHour.innerHTML = 'Light rain within an hour' + ` <span>${Math.round(data.rain['1h'])} mm</span>`;
-                                            document.getElementById('icon-next-Hour').innerHTML = 'rainy'
-                                        } else if (precipitation < 7.6) {
-                                            rainWithInHour.innerHTML = 'Moderate rain within an hour' + ` <span>${Math.round(data.rain['1h'])} mm</span>`;
-                                            document.getElementById('icon-next-Hour').innerHTML = 'rainy'
-                                        } else {
-                                            rainWithInHour.innerHTML = 'Heavy rain within an hour' + ` <span>${Math.round(data.rain['1h'])} mm</span>`;
-                                            document.getElementById('icon-next-Hour').innerHTML = 'rainy'
-                                        }
-                                    } else {
-                                        rainWithInHour.innerHTML = 'No rain expected for now or within an hour';
-                                        document.getElementById('icon-next-Hour').innerHTML = 'umbrella'
-                                    }
+
+                            }
+                        } else {
+                            document.querySelector('noRain').hidden = false;
+                            document.getElementById('AmountRainMM').innerHTML = `0.0 mm`
+                        }
 
               document.getElementById('currentLocationName').textContent = `${cityName}, ${countryName}`;
                  document.getElementById('currentSearchImg').src = `weather-icons/${iconCode}.svg`;
@@ -758,40 +807,109 @@ function getWeatherByCoordinates(latitude, longitude) {
                     };
 
                     const backgroundColor = {
-                        1: 'rgb(11, 189, 5)',
-                        2: 'rgb(218, 179, 8)',
-                        3: 'rgb(255, 136, 0)',
-                        4: 'rgb(255, 0, 0)',
-                        5: 'rgb(183, 0, 255)'
+                        1: '#43b710',
+                        2: '#eaaf10',
+                        3: '#eb8a11',
+                        4: '#e83f0f',
+                        5: '#8e3acf'
                     }
 
 
                     document.getElementById('aqi_img').src = backgroundImage[aqi];
                     document.getElementById('aqi-level').style.backgroundColor = backgroundColor[aqi];
                 })
-            const uvUrl = `https://api.openweathermap.org/data/2.5/uvi?lat=${latitude}&lon=${longitude}&appid=${apiKey}`;
-            fetch(uvUrl)
-                .then(response => response.json())
-                .then(uvData => {
-                    const uvIndexValue = uvData.value;
-                    const uvIndex = Math.round(uvIndexValue);
 
-                    const uvIndexInfo = uvIndexData[uvIndex];
+            const url = `https://currentuvindex.com/api/v1/uvi?latitude=${latitude}&longitude=${longitude}`;
+            const option = { method: 'GET', headers: { Accept: 'application/json' } };
 
-                    const uvIndexText = uvIndexInfo.description;
-
-                    // Set the text and class on the element
-                    const uvIndexElement = document.getElementById('uv-index');
-                    uvIndexElement.textContent = uvIndexText;
-                    document.getElementById('uv-index').style = uvIndexInfo.style;
-                    document.getElementById('uv_img').src = uvIndexInfo.img;
-                    document.getElementById('detail_uv').innerHTML = uvIndexInfo.detail;
-
-                    hideLoader();
-                    localStorage.setItem('currentLat', latitude)
-                    localStorage.setItem('currentLong', longitude)
+            fetch(url, option)
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    return response.json();
                 })
-                .catch(error => console.error('Error fetching UV Index:', error));
+                .then(data => {
+                    const now = data.now;
+                    const uvIndex = now.uvi;
+
+
+                    if (uvIndex >= 0 && uvIndex <= 1) {
+                        document.getElementById('uv-index').innerHTML = 'Minimal risk';
+                        document.getElementById('uv-index').style = 'background-color: #43b710';
+                        document.getElementById('uv_img').src = 'uv-images/uv-0.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_0
+                    } else if (uvIndex > 1 && uvIndex <= 2) {
+                        document.getElementById('uv-index').innerHTML = 'Low risk';
+                        document.getElementById('uv-index').style = 'background-color: #43b710';
+                        document.getElementById('uv_img').src = 'uv-images/uv-1.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_1
+                    } else if (uvIndex > 2 && uvIndex <= 3) {
+                        document.getElementById('uv-index').innerHTML = 'Low risk';
+                        document.getElementById('uv-index').style = 'background-color: #43b710';
+                        document.getElementById('uv_img').src = 'uv-images/uv-2.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_2
+                    } else if (uvIndex > 3 && uvIndex <= 4) {
+                        document.getElementById('uv-index').innerHTML = 'Moderate risk';
+                        document.getElementById('uv-index').style = 'background-color: #eaaf10';
+                        document.getElementById('uv_img').src = 'uv-images/uv-3.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_3
+                    } else if (uvIndex > 4 && uvIndex <= 5) {
+                        document.getElementById('uv-index').innerHTML = 'Moderate risk';
+                        document.getElementById('uv-index').style = 'background-color: #eaaf10';
+                        document.getElementById('uv_img').src = 'uv-images/uv-4.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_4
+                    } else if (uvIndex > 5 && uvIndex <= 6) {
+                        document.getElementById('uv-index').innerHTML = 'Moderate risk';
+                        document.getElementById('uv-index').style = 'background-color: #eaaf10';
+                        document.getElementById('uv_img').src = 'uv-images/uv-5.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_5
+                    } else if (uvIndex > 6 && uvIndex <= 7) {
+                        document.getElementById('uv-index').innerHTML = 'High risk';
+                        document.getElementById('uv-index').style = 'background-color: #eb8a11';
+                        document.getElementById('uv_img').src = 'uv-images/uv-6.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_6
+                    } else if (uvIndex > 7 && uvIndex <= 8) {
+                        document.getElementById('uv-index').innerHTML = 'High risk';
+                        document.getElementById('uv-index').style = 'background-color: #eb8a11';
+                        document.getElementById('uv_img').src = 'uv-images/uv-7.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_7
+                    } else if (uvIndex > 8 && uvIndex <= 9) {
+                        document.getElementById('uv-index').innerHTML = 'Very high risk';
+                        document.getElementById('uv-index').style = 'background-color: #e83f0f';
+                        document.getElementById('uv_img').src = 'uv-images/uv-8.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_8
+                    } else if (uvIndex > 9 && uvIndex <= 10) {
+                        document.getElementById('uv-index').innerHTML = 'Very high risk';
+                        document.getElementById('uv-index').style = 'background-color: #e83f0f';
+                        document.getElementById('uv_img').src = 'uv-images/uv-9.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_9
+                    } else if (uvIndex > 10 && uvIndex <= 11) {
+                        document.getElementById('uv-index').innerHTML = 'Very high risk';
+                        document.getElementById('uv-index').style = 'background-color: #e83f0f';
+                        document.getElementById('uv_img').src = 'uv-images/uv-10.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_10
+                    } else if (uvIndex > 11 && uvIndex <= 12) {
+                        document.getElementById('uv-index').innerHTML = 'Extreme risk';
+                        document.getElementById('uv-index').style = 'background-color: #8e3acf';
+                        document.getElementById('uv_img').src = 'uv-images/uv-11.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_11
+                    } else if (uvIndex > 12 && uvIndex <= 13) {
+                        document.getElementById('uv-index').innerHTML = 'Extreme risk';
+                        document.getElementById('uv-index').style = 'background-color: #ec0c8b';
+                        document.getElementById('uv_img').src = 'uv-images/uv-12.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_12
+                    } else if (uvIndex > 13) {
+                        document.getElementById('uv-index').innerHTML = 'Extreme risk';
+                        document.getElementById('uv-index').style = 'background-color: #550ef9';
+                        document.getElementById('uv_img').src = 'uv-images/uv-13.png';
+                        document.getElementById('detail_uv').innerHTML = Uv_13
+                    }
+
+                    hideLoader()
+
+                })
+
 
 
         })
@@ -800,8 +918,6 @@ function getWeatherByCoordinates(latitude, longitude) {
                     document.querySelector('.no_internet_error').hidden = false;
                 });
 
-
-
     currentLocation = {
         latitude,
         longitude
@@ -854,6 +970,8 @@ function get24HourForecast(latitude, longitude) {
 
 function display24HourForecast(forecastData) {
     const forecastContainer = document.getElementById('forecast');
+        const RainBarsContainer = document.querySelector('rainMeterBar');
+
     forecastContainer.innerHTML = ''; 
 
     if (forecastData && forecastData.length >= 24) {
@@ -872,6 +990,7 @@ function display24HourForecast(forecastData) {
             const iconCode = forecast.weather[0].icon;
             const description = forecast.weather[0].description;
             const rainPercentage = forecast.pop * 100;
+            const rainMeterBarItem = document.createElement('rainMeterBarItem');
 
 
             const forecastItem = document.createElement('div');
@@ -883,21 +1002,41 @@ function display24HourForecast(forecastData) {
                 <p class="time-24">${time}</p>
                 <img id="icon-24" src="weather-icons/${iconCode}.svg" alt="Weather Icon" class="icon-24">
                 <p class="temp-24">${tempF}°F</p>
-                 <p class="rain-24"><span icon-outlined>water_drop</span> ${Math.round(rainPercentage)}%</p>
 
                  <p class="disc_sml-24" >${description}</p>
+                  <md-ripple style="--md-ripple-pressed-opacity: 0.1;"></md-ripple>
+
             `;
             } else{
             forecastItem.innerHTML = `
             <p class="time-24">${time}</p>
             <img id="icon-24" src="weather-icons/${iconCode}.svg" alt="Weather Icon" class="icon-24">
             <p class="temp-24">${temperature}°C</p>
-             <p class="rain-24"><span icon-outlined>water_drop</span> ${Math.round(rainPercentage)}%</p>
 
              <p class="disc_sml-24" >${description}</p>
+              <md-ripple style="--md-ripple-pressed-opacity: 0.1;"></md-ripple>
+
         `;
             }
 
+            rainMeterBarItem.innerHTML = `
+                <rainPerBar>
+                  <rainPerBarProgress style="height: ${Math.round(rainPercentage)}%;">
+                </rainPerBarProgress>
+                </rainPerBar>
+                <p>${Math.round(rainPercentage)}%</p>
+                 <span>${time}</span>
+
+
+            `
+
+            forecastItem.addEventListener('click', ()=>{
+                ShowSnack(`<span style="text-transform: capitalize;">${description}</span>`, 2000, 3, 'none', ' ', 'no-up')
+
+            });
+
+
+            RainBarsContainer.append(rainMeterBarItem)
             
 
             forecastContainer.appendChild(forecastItem);
@@ -1103,7 +1242,6 @@ function updateMoonTrackProgress(lat, long) {
         .catch(error => {
             console.error('Error fetching moonrise/moonset data:', error);
         });
-
 }
 
 function parseTime(time24) {
@@ -1145,3 +1283,6 @@ function sendThemeToAndroid(theme) {
 
     AndroidInterface.updateStatusBarColor(theme);
   };
+function Toast(toastText, time){
+    ToastAndroidShow.ShowToast(toastText, time);
+}
diff --git a/app/src/main/assets/components/components.css b/app/src/main/assets/components/components.css
index 337c9b302..39e381fc5 100644
--- a/app/src/main/assets/components/components.css
+++ b/app/src/main/assets/components/components.css
@@ -958,19 +958,20 @@ circle-loader #spinner {
   position: fixed;
   bottom: var(--snackbar-bottom, 5%);
 border-radius: 5px;
-left: 50%;
+left: 20px;
   display: none;
   align-items: center;
   justify-content: flex-start;
-  padding: 10px;
+  padding: 5px;
 min-height: 30px;
-width: 85%;
+width: max-content;
 max-height: calc(100vh - var(--snackbar-bottom) - 50px);
-transform: translate(-50%);
   background-color: var(--Inverse-Surface);
   transition: all 0.3s;
   z-index: 999999;
   overflow-y: auto;
+  padding-left: 10px;
+  padding-right: 10px;
   animation: snackbar 0.5s cubic-bezier(0,0,0,1);
 }
 
@@ -1016,7 +1017,7 @@ transform: translate(-50%);
   font-family: var(--outfit);
   color: var(--Inverse-On-Surface);
   margin: 0;
-  font-size: 18px;
+  font-size: 17px;
   word-wrap: break-word;
   overflow: hidden;
 
diff --git a/app/src/main/assets/index.html b/app/src/main/assets/index.html
index b6d716579..0e4c28087 100644
--- a/app/src/main/assets/index.html
+++ b/app/src/main/assets/index.html
@@ -78,12 +78,12 @@
 
         </div>
 
-        <div class="rainNextHour"style="">
-            <div class="icon-container-rainnextHour">
-                <md-icon icon-filled id="icon-next-Hour">circle</md-icon>
-            </div>
-            <p id="rainNextHourText"></p>
-        </div>
+<!--        <div class="rainNextHour"style="">-->
+<!--            <div class="icon-container-rainnextHour">-->
+<!--                <md-icon icon-filled id="icon-next-Hour">circle</md-icon>-->
+<!--            </div>-->
+<!--            <p id="rainNextHourText"></p>-->
+<!--        </div>-->
 
 
         <div class="high-all">
@@ -122,6 +122,24 @@
 
                 </div>
             </div>
+
+            <rainMeter>
+                <div class="h1">
+                    <p>Hourly precipitation</p>
+                </div>
+                <div class="todaysAmount">
+                    <p>Current amount</p>
+                    <span id="AmountRainMM">1.5 mm</span>
+                </div>
+
+                <noRain hidden>No rain expected for now</noRain>
+
+                <rainMeterBar>
+
+                </rainMeterBar>
+
+            </rainMeter>
+
             <div class="all-5d">
                 <div class="h2">
                     <p class="forecast_Text">Next 5 Days</p>
@@ -263,7 +281,6 @@
                     </div>
                 </div>
 
-
             </div>
 
             <div class="all_air_quality" style="border-radius: 5px 5px 10px 10px; margin-top: 0px;">
diff --git a/app/src/main/assets/pages/AboutPage.html b/app/src/main/assets/pages/AboutPage.html
index 2bd165b1c..d8c3b702e 100644
--- a/app/src/main/assets/pages/AboutPage.html
+++ b/app/src/main/assets/pages/AboutPage.html
@@ -61,7 +61,7 @@
                 <md-list-item id="show_time_toast">
                     <md-icon slot="start" icon-filled>info</md-icon>
                     <div slot="headline" style="margin-bottom: 2px;">Version</div>
-                    <div slot="supporting-text">1.1.7 (W)</div>
+                    <div slot="supporting-text">1.1.8 (W)</div>
                 </md-list-item>
 
             </md-list>
diff --git a/app/src/main/assets/pages/aboutPages/PrivacyPolicy.html b/app/src/main/assets/pages/aboutPages/PrivacyPolicy.html
index 423acac19..67f37d018 100644
--- a/app/src/main/assets/pages/aboutPages/PrivacyPolicy.html
+++ b/app/src/main/assets/pages/aboutPages/PrivacyPolicy.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" Theme="default" data-theme="dark">
+<html lang="en" Theme="default" data-theme="dark" draggable="false">
 
 <head>
     <meta charset="UTF-8">
diff --git a/app/src/main/assets/pages/aboutPages/TermsConditions.html b/app/src/main/assets/pages/aboutPages/TermsConditions.html
index b64487e14..29e23c602 100644
--- a/app/src/main/assets/pages/aboutPages/TermsConditions.html
+++ b/app/src/main/assets/pages/aboutPages/TermsConditions.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" Theme="default" data-theme="dark">
+<html lang="en" Theme="default" data-theme="dark" draggable="false">
 
 <head>
     <meta charset="UTF-8">
diff --git a/app/src/main/assets/pages/settings.html b/app/src/main/assets/pages/settings.html
index 1560cd21f..4d065ea58 100644
--- a/app/src/main/assets/pages/settings.html
+++ b/app/src/main/assets/pages/settings.html
@@ -114,6 +114,8 @@
             </md-list>
 
 
+            <p style="margin-top: 170px;"></p>
+
 
 
         </div>
diff --git a/app/src/main/assets/ui-files/ui.css b/app/src/main/assets/ui-files/ui.css
index 66a0126c9..3c78c9bb6 100644
--- a/app/src/main/assets/ui-files/ui.css
+++ b/app/src/main/assets/ui-files/ui.css
@@ -254,13 +254,13 @@ body {
   /* background-color: var(--Surface-Container-Low); */
   background-color: rgba(0, 0, 0, 0.247);
   border-radius: 10px;
-  padding-left: 25px;
-  padding-right: 25px;
+  padding-left: 13px;
+  padding-right: 13px;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  padding-bottom: 63px;
+  padding-bottom: 15px;
   margin-bottom: 5px;
   min-width: calc(60px + 2px);
   position: relative;
@@ -270,7 +270,7 @@ body {
 
 .disc_sml-24 {
   width: calc(100% - 30px);
-    display: flex;
+    display: none;
     padding-left: 10px;
     padding-right: 10px;
     align-items: center;
@@ -280,14 +280,13 @@ body {
   margin-right: 0;
   margin-bottom: 0;
   text-transform: capitalize;
-  background-color: var(--Surface);
+  /* background-color: var(--Surface); */
   border-radius: 10px;
   color: var(--On-Surface);
-  font-size: 13px;
+  font-size: 16px;
   margin-top: 5px;
   padding-top: 3px;
   padding-bottom: 3px;
-  font-family: var(--google-normal);
   position: absolute;
   bottom: 5px;
   max-height: calc(45px - 5px);
@@ -296,6 +295,7 @@ body {
   padding-top: 10px;
   padding-bottom: 5px;
 
+  overflow: auto;
 
 }
 
@@ -326,8 +326,10 @@ body {
 }
 
 .temp-24 {
-  margin: 10px 0;
+  margin: 20px 0;
   color: var(--On-Surface);
+  margin-bottom: 0;
+  font-family: var(--google-mid);
 }
 
 .icon-24 {
@@ -1165,4 +1167,108 @@ humidityBarWrap humidityBarProgress{
 humidityBar span{
   color: var(--On-Surface);
   font-size: 15px;
+}
+
+rainMeter{
+  margin: 10px;
+  margin-top: 5px;
+  margin-bottom: 0;
+  background-color: var(--Surface);
+  border-radius: 5px;
+  display: block;
+  padding-bottom: 10px;
+}
+
+rainMeter .todaysAmount{
+  padding: 10px;
+  padding-left: 20px;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  gap: 5px;
+}
+
+rainMeter .todaysAmount p{
+  margin: 0;
+  color: var(--On-Surface-Variant);
+  font-size: 14px;
+  font-family: var(--google-normal);
+
+}
+
+
+rainMeter .todaysAmount span{
+  color: var(--On-Surface);
+  font-size: 24px;
+  font-family: var(--google-normal);
+}
+
+
+rainMeter noRain{
+  font-size: 18px;
+  color: var(--On-Surface);
+  opacity: 0.6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+rainMeterBar rainmeterbaritem{
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+
+}
+
+rainMeterBar rainmeterbaritem rainperbar{
+   /* max-height: 55px;
+  min-height: 5px;    */
+  height: 55px;
+  width: 30px;
+  /* border: 1px solid #7cacf8; */
+  display: block;
+  border-radius: 5px;
+  position: relative;
+
+}
+
+rainMeterBar rainmeterbaritem rainperbar rainperbarProgress{
+  position: absolute;
+  width: 100%;
+  height: 5%;
+  min-height: 10%;
+  background: linear-gradient(0deg, #4d8ef8, #0062ff);
+  border: 1px solid linear-gradient(0deg, #4d8ef8, #0062ff);
+  border-radius: 2px;
+  bottom: 0;
+  left: 0;
+}
+
+
+
+rainMeterBar rainmeterbaritem span{
+  color: var(--On-Surface-Variant);
+  font-size: 14px;
+}
+
+rainMeterBar rainmeterbaritem p{
+  margin: 0;
+  color: var(--On-Surface);
+  font-family: var(--google-normal);
+}
+
+rainMeterBar{
+  display: flex;
+  align-items: center;
+  overflow: auto;
+  padding: 10px;
+  padding-left: 15px;
+  padding-right: 15px;
+  gap: 25px;
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/example/weathermaster/MainActivity.java b/app/src/main/java/com/example/weathermaster/MainActivity.java
index 8e5826858..212cd7f20 100644
--- a/app/src/main/java/com/example/weathermaster/MainActivity.java
+++ b/app/src/main/java/com/example/weathermaster/MainActivity.java
@@ -89,6 +89,7 @@ public class MainActivity extends AppCompatActivity {
 
         AndroidInterface androidInterface = new AndroidInterface(this);
         webview.addJavascriptInterface(androidInterface, "AndroidInterface");
+        webview.addJavascriptInterface(new ShowToastInterface(this), "ToastAndroidShow");
         webview.setBackgroundColor(getResources().getColor(R.color.diffDefault));
 
 
@@ -181,6 +182,25 @@ public class MainActivity extends AppCompatActivity {
     }
 
 
+    public class ShowToastInterface {
+        private final Context mContext;
+
+        public ShowToastInterface(Context context) {
+            this.mContext = context;
+        }
+
+        @JavascriptInterface
+        public void ShowToast(final String text, final String time) {
+            int duration = Toast.LENGTH_SHORT;
+            if (time.equals("long")) {
+                duration = Toast.LENGTH_LONG;
+            } else if(time.equals("short")){
+                duration = Toast.LENGTH_SHORT;
+            }
+            Toast.makeText(mContext, text, duration).show();
+        }
+    }
+
     public class AndroidInterface {
         private MainActivity mActivity;