diff --git a/WiFiManager.cpp b/WiFiManager.cpp
index 450e162..320af11 100644
--- a/WiFiManager.cpp
+++ b/WiFiManager.cpp
@@ -245,7 +245,7 @@ boolean  WiFiManager::startConfigPortal(char const *apName, char const *apPasswo
 }
 
 boolean WiFiManager::process(){
-    if(configPortalActive){
+    if(configPortalActive && !_configPortalIsBlocking){
         uint8_t state = handleConfigPortal();
         return state == WL_CONNECTED;
     }
@@ -559,6 +559,7 @@ void WiFiManager::handleWifi(boolean scan) {
           rssiQ += quality;
           item.replace("{v}", WiFi.SSID(indices[i]));
           item.replace("{r}", rssiQ);
+          item.replace("{q}", (String)round(map(quality,0,100,1,4)));
           if (WiFi.encryptionType(indices[i]) != ENC_TYPE_NONE) {
             item.replace("{i}", "l");
           } else {
diff --git a/WiFiManager.h b/WiFiManager.h
index e69c6eb..72956b0 100644
--- a/WiFiManager.h
+++ b/WiFiManager.h
@@ -23,11 +23,19 @@ extern "C" {
 }
 
 const char HTTP_HEAD[] PROGMEM            = "<!DOCTYPE html><html lang=\"en\"><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\"/><title>{v}</title>";
-const char HTTP_STYLE[] PROGMEM           = "<style>.c{text-align: center;} div,input{padding:5px;font-size:1em;} input{width:95%;} body{text-align: center;font-family:verdana;} button{border:0;border-radius:0.3rem;background-color:#1fa3ec;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%;} .q{float: right;width: 64px;text-align: right;} .l{background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAALVBMVEX///8EBwfBwsLw8PAzNjaCg4NTVVUjJiZDRUUUFxdiZGSho6OSk5Pg4eFydHTCjaf3AAAAZElEQVQ4je2NSw7AIAhEBamKn97/uMXEGBvozkWb9C2Zx4xzWykBhFAeYp9gkLyZE0zIMno9n4g19hmdY39scwqVkOXaxph0ZCXQcqxSpgQpONa59wkRDOL93eAXvimwlbPbwwVAegLS1HGfZAAAAABJRU5ErkJggg==\") no-repeat left center;background-size: 1em;}</style>";
+// const char HTTP_STYLE[] PROGMEM           = "<style>.c{text-align: center;} div,input{padding:5px;font-size:1em;} input{width:95%;} body{text-align: center;font-family:verdana;} button{border:0;border-radius:0.3rem;background-color:#1fa3ec;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%;} .q{float: right;width: 64px;text-align: right;} .l{background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAALVBMVEX///8EBwfBwsLw8PAzNjaCg4NTVVUjJiZDRUUUFxdiZGSho6OSk5Pg4eFydHTCjaf3AAAAZElEQVQ4je2NSw7AIAhEBamKn97/uMXEGBvozkWb9C2Zx4xzWykBhFAeYp9gkLyZE0zIMno9n4g19hmdY39scwqVkOXaxph0ZCXQcqxSpgQpONa59wkRDOL93eAXvimwlbPbwwVAegLS1HGfZAAAAABJRU5ErkJggg==\") no-repeat left center;background-size: 1em;}</style>";
+const char HTTP_STYLE[] PROGMEM           = "<style>.c,body{text-align:center}div,input{padding:5px;font-size:1em}input{width:95%}body{font-family:verdana}button{border:0;border-radius:.3rem;background-color:#1fa3ec;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%}a{color:#000;font-weight:700;text-decoration:none}a:hover{color:#1fa3ec;text-decoration:underline}.q{height:16px;margin:0;padding:0 5px;text-align:right;min-width:38px}.q.q-0:after{background-position-x:0}.q.q-1:after{background-position-x:-16px}.q.q-2:after{background-position-x:-32px}.q.q-3:after{background-position-x:-48px}.q.q-4:after{background-position-x:-64px}.q.l:before{background-position-x:-80px;padding-right:5px}.left .q{float:left}.right .q{float:right}.invert .q{-webkit-filter:invert(1);filter:invert(1)}.q:after,.q:before{content:\"\";width:16px;height:16px;display:inline-block;background-repeat:no-repeat;background-position: 16px 0;"
+"background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAQCAMAAADeZIrLAAAAJFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADHJj5lAAAAC3RSTlMAIjN3iJmqu8zd7vF8pzcAAABsSURBVHja7Y1BCsAwCASNSVo3/v+/BUEiXnIoXkoX5jAQMxTHzK9cVSnvDxwD8bFx8PhZ9q8FmghXBhqA1faxk92PsxvRc2CCCFdhQCbRkLoAQ3q/wWUBqG35ZxtVzW4Ed6LngPyBU2CobdIDQ5oPWI5nCUwAAAAASUVORK5CYII=');}"
+// @2x media query (32px rescaled)
+"@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.q:before,.q:after {"
+"background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAAAgCAMAAACfM+KhAAAALVBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAOrOgAAAADnRSTlMAESIzRGZ3iJmqu8zd7gKjCLQAAACmSURBVHgB7dDBCoMwEEXRmKlVY3L//3NLhyzqIqSUggy8uxnhCR5Mo8xLt+14aZ7wwgsvvPA/ofv9+44334UXXngvb6XsFhO/VoC2RsSv9J7x8BnYLW+AjT56ud/uePMdb7IP8Bsc/e7h8Cfk912ghsNXWPpDC4hvN+D1560A1QPORyh84VKLjjdvfPFm++i9EWq0348XXnjhhT+4dIbCW+WjZim9AKk4UZMnnCEuAAAAAElFTkSuQmCC');"
+"background-size: 95px 16px;}}"
+"</style>";
 const char HTTP_SCRIPT[] PROGMEM          = "<script>function c(l){document.getElementById('s').value=l.innerText||l.textContent;document.getElementById('p').focus();}</script>";
-const char HTTP_HEAD_END[] PROGMEM        = "</head><body><div style='text-align:left;display:inline-block;min-width:260px;'>";
+const char HTTP_HEAD_END[] PROGMEM        = "</head><body><div class='right' style='text-align:left;display:inline-block;min-width:260px;'>";
 const char HTTP_PORTAL_OPTIONS[] PROGMEM  = "<form action=\"/wifi\" method=\"get\"><button>Configure WiFi</button></form><br/><form action=\"/0wifi\" method=\"get\"><button>Configure WiFi (No Scan)</button></form><br/><form action=\"/i\" method=\"get\"><button>Info</button></form><br/><form action=\"/r\" method=\"post\"><button>Reset</button></form>";
-const char HTTP_ITEM[] PROGMEM            = "<div><a href='#p' onclick='c(this)'>{v}</a>&nbsp;<span class='q {i}'>{r}%</span></div>";
+const char HTTP_ITEM[] PROGMEM            = "<div><a href='#p' onclick='c(this)'>{v}</a><div role='img' aria-label='{r}%' title='{r}%' class='q q-{q} {i}'></div></div>";
+//const char HTTP_ITEM_PADLOCK[] PROGMEM = "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAALVBMVEX///8EBwfBwsLw8PAzNjaCg4NTVVUjJiZDRUUUFxdiZGSho6OSk5Pg4eFydHTCjaf3AAAAZElEQVQ4je2NSw7AIAhEBamKn97/uMXEGBvozkWb9C2Zx4xzWykBhFAeYp9gkLyZE0zIMno9n4g19hmdY39scwqVkOXaxph0ZCXQcqxSpgQpONa59wkRDOL93eAXvimwlbPbwwVAegLS1HGfZAAAAABJRU5ErkJggg==' width='13px'/>";
 const char HTTP_FORM_START[] PROGMEM      = "<form method='get' action='wifisave'><input id='s' name='s' length=32 placeholder='SSID'><br/><input id='p' name='p' length=64 type='password' placeholder='password'><br/>";
 const char HTTP_FORM_LABEL[] PROGMEM      = "<label for=\"{i}\">{p}</label>";
 const char HTTP_FORM_PARAM[] PROGMEM      = "<br/><input id='{i}' name='{n}' maxlength={l} placeholder='{p}' value='{v}' {c}>";
diff --git a/extras/png_signal_strength_master.png b/extras/png_signal_strength_master.png
new file mode 100644
index 0000000..f03c947
Binary files /dev/null and b/extras/png_signal_strength_master.png differ
diff --git a/extras/test.html b/extras/test.html
new file mode 100644
index 0000000..58c913c
--- /dev/null
+++ b/extras/test.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+    <title>Config ESP</title>
+    <script>
+
+    function c(l,e) {
+    	console.log(l);
+    	// preventDefault();
+        document.getElementById('s').value = l.innerText || l.textContent;
+        // document.location.href = document.location +"#wmform";
+        document.getElementById('p').focus();
+        return false;
+    }
+
+
+    </script>
+
+<style>
+.c,
+body {
+    text-align: center
+}
+
+div,
+input {
+    padding: 5px;
+    font-size: 1em
+}
+
+input {
+    width: 95%
+}
+
+body {
+    font-family: verdana
+}
+
+button {
+    border: 0;
+    border-radius: .3rem;
+    background-color: #1fa3ec;
+    color: #fff;
+    line-height: 2.4rem;
+    font-size: 1.2rem;
+    width: 100%
+}
+
+a {
+    color: #000;
+    font-weight: 700;
+    text-decoration: none
+}
+
+a:hover {
+    color: #1fa3ec;
+    text-decoration: underline
+}
+
+.q {
+    height: 16px;
+    margin: 0;
+    padding: 0 5px;
+    text-align: right;
+    min-width: 38px
+}
+
+.q.q-0:after {
+    background-position-x: 0
+}
+
+.q.q-1:after {
+    background-position-x: -16px
+}
+
+.q.q-2:after {
+    background-position-x: -32px
+}
+
+.q.q-3:after {
+    background-position-x: -48px
+}
+
+.q.q-4:after {
+    background-position-x: -64px
+}
+
+.q.l:before {
+    background-position-x: -80px;
+    padding-right: 5px
+}
+
+.left .q {
+    float: left
+}
+
+.right .q {
+    float: right
+}
+
+.invert .q {
+    -webkit-filter: invert(1);
+    filter: invert(1)
+}
+
+.q:after,
+.q:before {
+    content: '';
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    background-repeat: no-repeat;
+    background-position: 16px 0;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAQCAMAAADeZIrLAAAAJFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADHJj5lAAAAC3RSTlMAIjN3iJmqu8zd7vF8pzcAAABsSURBVHja7Y1BCsAwCASNSVo3/v+/BUEiXnIoXkoX5jAQMxTHzK9cVSnvDxwD8bFx8PhZ9q8FmghXBhqA1faxk92PsxvRc2CCCFdhQCbRkLoAQ3q/wWUBqG35ZxtVzW4Ed6LngPyBU2CobdIDQ5oPWI5nCUwAAAAASUVORK5CYII=');
+}
+
+@media (-webkit-min-device-pixel-ratio: 2),
+(min-resolution: 192dpi) {
+    .q:before,
+    .q:after {
+        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAAAgCAMAAACfM+KhAAAALVBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAOrOgAAAADnRSTlMAESIzRGZ3iJmqu8zd7gKjCLQAAACmSURBVHgB7dDBCoMwEEXRmKlVY3L//3NLhyzqIqSUggy8uxnhCR5Mo8xLt+14aZ7wwgsvvPA/ofv9+44334UXXngvb6XsFhO/VoC2RsSv9J7x8BnYLW+AjT56ud/uePMdb7IP8Bsc/e7h8Cfk912ghsNXWPpDC4hvN+D1560A1QPORyh84VKLjjdvfPFm++i9EWq0348XXnjhhT+4dIbCW+WjZim9AKk4UZMnnCEuAAAAAElFTkSuQmCC');
+        background-size: 95px 16px;
+    }
+}
+</style>
+
+</head>
+
+<body>
+ 	<!-- classes, left/right invert -->
+    <div class="right" style='text-align:left;display:inline-block;min-width:260px;'>
+        <div><a href='#p' onclick='c(this)'>Acccess Point 01</a><div role='img' aria-label='88%' title='88%' class='q q-4 l'></div></div>
+        <div><a href='#p' onclick='c(this)'>Acccess Point 02</a><div role='img' aria-label='88%' title='88%' class='q q-4'></div></div>
+        <div><a href='#p' onclick='c(this)'>Acccess Point 03</a><div role='img' aria-label='88%' title='88%' class='q q-3'></div></div>
+        <div><a href='#p' onclick='c(this)'>Acccess Point 04</a><div role='img' aria-label='88%' title='88%' class='q q-3'></div></div>
+        <div><a href='#p' onclick='c(this)'>Acccess Point 05</a><div role='img' aria-label='88%' title='88%' class='q q-3'></div></div>
+        <div><a href='#p' onclick='c(this)'>Acccess Point 06</a><div role='img' aria-label='88%' title='88%' class='q q-2'></div></div>
+        <div><a href='#p' onclick='c(this)'>Acccess Point 07</a><div role='img' aria-label='88%' title='88%' class='q q-2'></div></div>
+        <div><a href='#p' onclick='c(this)'>Acccess Point 08</a><div role='img' aria-label='88%' title='88%' class='q q-1'></div></div>
+        <div><a href='#p' onclick='c(this)'>Acccess Point 09</a><div role='img' aria-label='88%' title='88%' class='q q-1'></div></div>
+        <div><a href='#p' onclick='c(this)'>Acccess Point 10</a><div role='img' aria-label='88%' title='88%' class='q q-1'></div></div>
+        <div><a href='#p' onclick='c(this)'>Acccess Point 11</a><div role='img' aria-label='88%' title='88%' class='q q-0'></div></div>
+        <div><a href='#p' onclick='c(this)'>Acccess Point 12</a><div role='img' aria-label='88%' title='88%' class='q q-0'></div></div>
+        <div><a href='#p' onclick='c(this)'>Acccess Point 13</a><div role='img' aria-label='88%' title='88%' class='q q-0'></div></div>
+        <div><a href='#p' onclick='c(this)'>Acccess Point 14</a><div role='img' aria-label='88%' title='88%' class='q q-0 l'></div></div>
+        <br/>
+        <form id="wmform" method='get' action='wifisave'>
+            <input id='s' name='s' length=32 placeholder='SSID'>
+            <br/>
+            <input id='p' name='p' length=64 type='password' placeholder='password'>
+            <br/>
+            <br/>
+            <input id='server' name='server' length=4 placeholder='mqtt server' value=''>
+            <br/>
+            <input id='port' name='port' length=5 placeholder='mqtt port' value='8080'>
+            <br/>
+            <input id='blynk' name='blynk' length=3 placeholder='blynk token' value='YOUR_BLYNK_TOKEN'>
+            <br/>
+            <br/>
+            <input id='ip' name='ip' length=15 placeholder='Static IP' value='10.0.1.56'>
+            <br/>
+            <input id='gw' name='gw' length=15 placeholder='Static Gateway' value='10.0.1.1'>
+            <br/>
+            <input id='sn' name='sn' length=15 placeholder='Subnet' value='255.255.255.0'>
+            <br/>
+            <br/>
+            <button type='submit'>save</button>
+        </form>
+        <br/>
+        <div class="c"><a href="/wifi">Scan</a></div>
+    </div>
+</body>
+
+</html>