diff --git a/controllers/website.js b/controllers/website.js
index eb60983..9fb38bd 100644
--- a/controllers/website.js
+++ b/controllers/website.js
@@ -26,13 +26,14 @@ function updateLightning() {
       lightningListChannels = response;
       let channels = [];
       for (let channel of lightningListChannels.channels) {
+        let magic = 104287;
         let divider = 0.01;
-        let max = 100;
         let ascii_length1 = channel.local_balance * divider;
         let ascii_length2 = channel.remote_balance * divider;
         channel.local = (Math.round(ascii_length1));
-        channel.remote = (max - (Math.round(ascii_length1)));
-        channel.total = ((channel.local) + (channel.remote);
+        channel.remote = (Math.round(ascii_length2));
+        channel.total = (channel.local) + (channel.remote);
+        channel.size = (channel.capacity / magic);
         channel.capacity_btc = channel.capacity / 100000000;
         channel.name = pubkey2name[channel.remote_pubkey];
         if (channel.name) {
diff --git a/static/css/style.css b/static/css/style.css
index 9d2cb16..0bc9d58 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -112,10 +112,13 @@ body {
 	appearance: none;
 	margin: 0;
 	padding: 0;
+	max-width : 100%;
+	-webkit-appearance: none;
 }
 #progressbar[max]::-webkit-progress-value {
 	border-radius: 8px 0 0 8px;
 	background: linear-gradient(0deg, rgba(104,187,225,1) 0%, rgba(139,215,249,1) 100%);
+	-webkit-appearance: none;
 }
 #progressbar[value]::-webkit-progress-bar {
 	background: linear-gradient(0deg, rgba(47,95,179,1) 0%, rgba(63,120,220,1) 100%);
@@ -123,6 +126,7 @@ body {
 	border-radius: 8px;
 	transition: 0.4s linear;
 	transition-property: width, background-color;
+	-webkit-appearance: none;
 }
 .row {
 	padding: 8px 0;
diff --git a/templates/index.html b/templates/index.html
index c7aa32c..8690272 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -106,7 +106,7 @@
                             {{/name}}
                             <span class="amount">{{capacity_btc}} BTC</span>
                         </div>
-                        <div class="graph"><progress id="progressbar" class="" value="{{local}}" max="{{remote}}" style="width:{{total}}%"></progress></div>
+                        <div class="graph"><progress id="progressbar" class="" value="{{local}}" max="{{total}}" style="width: {{size}}%"></progress></div>
                         {{^active}}
                         <div class="status"><span class="label right" title="inactive"></span></div>
                         {{/active}}