diff --git a/scripts/remove_bloat.sh b/scripts/remove_bloat.sh
index 3eec27b..2fe1542 100755
--- a/scripts/remove_bloat.sh
+++ b/scripts/remove_bloat.sh
@@ -91,6 +91,11 @@ find dist -type f -not -name 'mapbox-gl.css' -not -name 'mapbox-gl.js' -delete
 rm -rf dist/style-spec
 cd $DIR
 
+cd onscan.js
+find . -type f -not -name 'onscan.min.js' -delete
+rm -rf {.github,.settings}
+cd $DIR
+
 cd @zxing/library
 rm -rf {esm,esm5}
 rm -f umd/index.min.js.map
diff --git a/www/assets/js/toolbox_weather.js b/www/assets/js/toolbox_weather.js
index 429e558..cbccc3c 100644
--- a/www/assets/js/toolbox_weather.js
+++ b/www/assets/js/toolbox_weather.js
@@ -77,20 +77,10 @@ function loadWeather(reload) {
                     $("#nowweathericon").attr("src", "assets/images/weather-none.svg");
                 }
 
-                var uvcolor = "#4CAF50";
-                if (resp.now.uv_index > 10) {
-                    uvcolor = "#673AB7";
-                } else if (resp.now.uv_index > 7) {
-                    uvcolor = "#F44336";
-                } else if (resp.now.uv_index > 5) {
-                    uvcolor = "#FF9800";
-                } else if (resp.now.uv_index > 2) {
-                    uvcolor = "#FFEB3B";
-                }
                 app.gauge.get('#nowuvindexgauge').update({
-                    value: Math.max(resp.now.uv_index / 11, 0.05),
+                    value: Math.min(resp.now.uv_index, 10) / 10,
                     valueText: resp.now.uv_index,
-                    borderColor: uvcolor,
+                    borderColor: colorThemeNameToHex(uvIndexToColor(resp.now.uv_index))
                 });
 
                 if (getStorage("units") == "metric") {
@@ -194,15 +184,24 @@ function loadWeather(reload) {
                     });
                 }
 
+
+
+                //
+                // Forecast tab
+                //
                 forecastItems = [];
 
                 for (var i = 1; i < resp.forecast.length; i++) {
                     var low = (getStorage("units") == "metric" ? Math.round(ftoc(resp.forecast[i].temp.min)) : Math.round(resp.forecast[i].temp.min));
                     var high = (getStorage("units") == "metric" ? Math.round(ftoc(resp.forecast[i].temp.max)) + " &deg;C" : Math.round(resp.forecast[i].temp.max) + " &deg;F");
+                    var precipcolor = precipChanceToColor(resp.forecast[i].precipitation.chance);
                     forecastItems.push({
                         day: formatTimestamp('l', resp.forecast[i].date),
                         temps: low + " to " + high,
-                        uv_index: resp.forecast[i].uv_index
+                        uv_index: resp.forecast[i].uv_index,
+                        uv_color: uvIndexToColor(resp.forecast[i].uv_index),
+                        precip_chance: Math.round(resp.forecast[i].precipitation.chance * 100),
+                        precip_color: precipcolor
                     });
                 }
 
@@ -212,7 +211,8 @@ function loadWeather(reload) {
                         + '    <div class="item-title">'
                         + '    <div class="item-header">{{day}}</div>'
                         + '        {{temps}}'
-                        + '        <br>UV Index: {{uv_index}}'
+                        + '        <br /><span class="padding-half forecast-uv-badge badge color-{{uv_color}}"><i class="fas fa-sun fa-fw"></i> {{uv_index}}</span>'
+                        + '        &nbsp; <span class="padding-half forecast-precip-badge badge color-{{precip_color}}"><i class="fas fa-tint fa-fw"></i> {{precip_chance}}%</span>'
                         + '    </div>'
                         + '  </div>'
                         + '</div>'
@@ -249,4 +249,48 @@ function loadWeather(reload) {
             }
         }, 1000);
     }
+}
+
+$("#app").on("click", "#weather-forecast .forecast-uv-badge", function () {
+    app.toast.show({
+            text: "<i class='fas fa-info-circle'></i> UV index",
+            position: "bottom",
+            destroyOnClose: true,
+            closeTimeout: 1000 * 3
+        });
+});
+
+$("#app").on("click", "#weather-forecast .forecast-precip-badge", function () {
+    app.toast.show({
+            text: "<i class='fas fa-info-circle'></i> Chance of precipitation",
+            position: "bottom",
+            destroyOnClose: true,
+            closeTimeout: 1000 * 3
+        });
+});
+
+function uvIndexToColor(index) {
+    var uvcolor = "green";
+    if (index >= 11) {
+        uvcolor = "purple";
+    } else if (index >= 8) {
+        uvcolor = "red";
+    } else if (index >= 6) {
+        uvcolor = "orange";
+    } else if (index >= 3) {
+        uvcolor = "yellow";
+    }
+    return uvcolor;
+}
+
+function precipChanceToColor(chance) {
+    var color = "lightblue";
+    if (chance > 0.8) {
+        color = "gray";
+    } else if (chance > 0.2) {
+        color = "blue";
+    } else {
+        color = "lightblue";
+    }
+    return color;
 }
\ No newline at end of file
diff --git a/www/assets/js/util.js b/www/assets/js/util.js
index e9ba4cb..2b5a2bb 100644
--- a/www/assets/js/util.js
+++ b/www/assets/js/util.js
@@ -314,4 +314,26 @@ function degreesToCardinal(deg) {
     } else {
         return "N";
     }
+}
+
+function colorThemeNameToHex(theme) {
+    var colors = {
+        red: "#ff3b30",
+        green: "#4cd964",
+        blue: "#2196f3",
+        pink: "#ff2d55",
+        yellow: "#ffcc00",
+        orange: "#ff9500",
+        purple: "#9c27b0",
+        deeppurple: "#673ab7",
+        lightblue: "#5ac8fa",
+        teal: "#009688",
+        lime: "#cddc39",
+        deeporange: "#ff6b22",
+        gray: "#8e8e93",
+        white: "#ffffff",
+        black: "#000000"
+    };
+
+    return colors[theme.toLowerCase()];
 }
\ No newline at end of file
diff --git a/www/package-lock.json b/www/package-lock.json
index d386d25..3a430dd 100644
--- a/www/package-lock.json
+++ b/www/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "PackageHelper",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -279,6 +279,11 @@
       "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
       "integrity": "sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E="
     },
+    "onscan.js": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/onscan.js/-/onscan.js-1.5.2.tgz",
+      "integrity": "sha512-9oGYy2gXYRjvXO9GYqqVca0VuCTAmWhbmX3egBSBP13rXiMNb+dKPJzKFEeECGqPBpf0m40Zoo+GUQ7eCackdw=="
+    },
     "path-to-regexp": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.1.0.tgz",
diff --git a/www/package.json b/www/package.json
index 8a362bc..3adf87d 100644
--- a/www/package.json
+++ b/www/package.json
@@ -16,7 +16,8 @@
     "leaflet.locatecontrol": "^0.67.0",
     "leaflet.markercluster": "^1.4.1",
     "mapbox-gl": "^1.12.0",
-    "material-design-icons": "^3.0.1"
+    "material-design-icons": "^3.0.1",
+    "onscan.js": "^1.5.2"
   },
   "devDependencies": {}
 }
diff --git a/www/pages/toolbox/weather.html b/www/pages/toolbox/weather.html
index 383faee..3cc8133 100644
--- a/www/pages/toolbox/weather.html
+++ b/www/pages/toolbox/weather.html
@@ -106,7 +106,7 @@
                 </div>
             </div>
             <div id="weather-forecast" class="page-content tab">
-                <div class="list virtual-list no-hairlines" id="forecast-list">
+                <div class="list virtual-list no-hairlines margin-top-half" id="forecast-list">
                 </div>
             </div>
         </div>