diff --git a/tabs/receiver.css b/tabs/receiver.css
index 90cecd14..b3e5745b 100644
--- a/tabs/receiver.css
+++ b/tabs/receiver.css
@@ -19,42 +19,6 @@
     height: 22px;
     line-height: 20px;
 }
-.tab-receiver .bars ul:nth-of-type(1) meter::-webkit-meter-optimum-value {
-    background: #00A8F0;
-}
-.tab-receiver .bars ul:nth-of-type(2) meter::-webkit-meter-optimum-value {
-    background: #C0D800;
-}
-.tab-receiver .bars ul:nth-of-type(3) meter::-webkit-meter-optimum-value {
-    background: #f8921a;
-}
-.tab-receiver .bars ul:nth-of-type(4) meter::-webkit-meter-optimum-value {
-    background: #f02525;
-}
-.tab-receiver .bars ul:nth-of-type(5) meter::-webkit-meter-optimum-value {
-    background: #9440ED;
-}
-.tab-receiver .bars ul:nth-of-type(6) meter::-webkit-meter-optimum-value {
-    background: #45147a;
-}
-.tab-receiver .bars ul:nth-of-type(7) meter::-webkit-meter-optimum-value {
-    background: #cf7a26;
-}
-.tab-receiver .bars ul:nth-of-type(8) meter::-webkit-meter-optimum-value {
-    background: #147a66;
-}
-.tab-receiver .bars ul:nth-of-type(9) meter::-webkit-meter-optimum-value {
-    background: #0609a9;
-}
-.tab-receiver .bars ul:nth-of-type(10) meter::-webkit-meter-optimum-value {
-    background: #7a1445;
-}
-.tab-receiver .bars ul:nth-of-type(11) meter::-webkit-meter-optimum-value {
-    background: #267acf;
-}
-.tab-receiver .bars ul:nth-of-type(12) meter::-webkit-meter-optimum-value {
-    background: #7a6614;
-}
 .tab-receiver .bars .name {
     padding: 0 10px 0 0;
 
@@ -63,33 +27,75 @@
     text-align: right;
 }
 .tab-receiver .bars .meter {
-    position: relative;
     width: calc(100% - 50px);
 }
-.tab-receiver .bars .meter meter {
-    -webkit-appearance: none;
-
+.tab-receiver .bars .meter-bar {
+    position: relative;
     margin-top: 2px;
 
     width: 100%;
-    height: 17px; /* border doesn't count here */
+    height: 15px;
 
     border: 1px solid silver;
+    background-color: #f4f4f4;
 }
-.tab-receiver .bars .meter meter::-webkit-meter-bar {
-    background: #f4f4f4;
-}
-.tab-receiver .bars .value {
+.tab-receiver .bars .meter-bar .label {
     position: absolute;
 
-    margin-top: 2px;
-    left: calc(50% - 25px);
     width: 50px;
+    height: 15px;
+    line-height: 15px;
 
     text-align: center;
-    line-height: 16px;
+    color: #474747;
+}
+.tab-receiver .bars .meter-bar .fill {
+    position: relative;
+    overflow: hidden;
+
+    width: 50%;
+    height: 15px;
+
+    background-color: green;
+}
+.tab-receiver .bars .meter-bar .fill .label {
     color: white;
-    text-shadow: 0px 0px 2px #000000;
+}
+.tab-receiver .bars ul:nth-of-type(1) .fill {
+    background-color: #00A8F0;
+}
+.tab-receiver .bars ul:nth-of-type(2) .fill {
+    background-color: #C0D800;
+}
+.tab-receiver .bars ul:nth-of-type(3) .fill {
+    background-color: #f8921a;
+}
+.tab-receiver .bars ul:nth-of-type(4) .fill {
+    background-color: #f02525;
+}
+.tab-receiver .bars ul:nth-of-type(5) .fill {
+    background-color: #9440ED;
+}
+.tab-receiver .bars ul:nth-of-type(6) .fill {
+    background-color: #45147a;
+}
+.tab-receiver .bars ul:nth-of-type(7) .fill {
+    background-color: #cf7a26;
+}
+.tab-receiver .bars ul:nth-of-type(8) .fill {
+    background-color: #147a66;
+}
+.tab-receiver .bars ul:nth-of-type(9) .fill {
+    background-color: #0609a9;
+}
+.tab-receiver .bars ul:nth-of-type(10) .fill {
+    background-color: #7a1445;
+}
+.tab-receiver .bars ul:nth-of-type(11) .fill {
+    background-color: #267acf;
+}
+.tab-receiver .bars ul:nth-of-type(12) .fill {
+    background-color: #7a6614;
 }
 .tab-receiver .tunings {
     float: right;
diff --git a/tabs/receiver.js b/tabs/receiver.js
index b4dfaa50..70b6acf0 100644
--- a/tabs/receiver.js
+++ b/tabs/receiver.js
@@ -61,23 +61,44 @@ TABS.receiver.initialize = function (callback) {
                 <ul>\
                     <li class="name">' + name + '</li>\
                     <li class="meter">\
-                        <span class="value"></span>\
-                        <meter min="800" max="2200"></meter>\
+                        <div class="meter-bar">\
+                            <div class="label"></div>\
+                            <div class="fill">\
+                                <div class="label"></div>\
+                            </div>\
+                        </div>\
                     </li>\
                 </ul>\
             ');
         }
 
-        var meter_array = [];
-        $('meter', bar_container).each(function () {
-            meter_array.push($(this));
+        // we could probably use min and max throttle for the range, will see
+        var meter_scale = {
+            'min': 800,
+            'max': 2200
+        };
+
+        var meter_fill_array = [];
+        $('.meter .fill', bar_container).each(function () {
+            meter_fill_array.push($(this));
         });
 
-        var meter_values_array = [];
-        $('.value', bar_container).each(function () {
-            meter_values_array.push($(this));
+        var meter_label_array = [];
+        $('.meter', bar_container).each(function () {
+            meter_label_array.push($('.label' , this));
         });
 
+        // correct inner label margin on window resize (i don't know how we could do this in css)
+        $(window).resize(function () {
+            var containerWidth = $('.meter:first', bar_container).width(),
+                labelWidth = $('.meter .label:first', bar_container).width(),
+                margin = (containerWidth / 2) - (labelWidth / 2);
+
+            for (var i = 0; i < meter_label_array.length; i++) {
+                meter_label_array[i].css('margin-left', margin);
+            }
+        }).resize(); // trigger so labels get correctly aligned on creation
+
         // handle rcmap
         if (bit_check(CONFIG.capability, 30)) {
             var RC_MAP_Letters = ['A', 'E', 'R', 'T', '1', '2', '3', '4'];
@@ -296,8 +317,8 @@ TABS.receiver.initialize = function (callback) {
             function update_ui() {
                 // update bars with latest data
                 for (var i = 0; i < RC.active_channels; i++) {
-                    meter_array[i].val(RC.channels[i]);
-                    meter_values_array[i].text(RC.channels[i]);
+                    meter_fill_array[i].css('width', (RC.channels[i] - meter_scale.min) / (meter_scale.max - meter_scale.min) * 100 + '%');
+                    meter_label_array[i].text(RC.channels[i]);
                 }
 
                 // push latest data to the main array
@@ -377,5 +398,7 @@ TABS.receiver.initialize = function (callback) {
 };
 
 TABS.receiver.cleanup = function (callback) {
+    $(window).unbind('resize');
+
     if (callback) callback();
 };