diff --git a/basicswap/static/css/style.css b/basicswap/static/css/style.css
index 0ac5384..528c400 100644
--- a/basicswap/static/css/style.css
+++ b/basicswap/static/css/style.css
@@ -16,11 +16,9 @@
 
 .floatright
 {
-  position:fixed;
-  top:10px;
-  right:18px;
-  margin: 0;
-  width:calc(33.33% - 25px);
+  position: absolute;
+  top:1.25rem;
+  right:1.25rem;
   z-index: 9999;
 }
 
@@ -32,3 +30,29 @@
 {
   color:red;
 }
+
+#hide {
+    -moz-animation: cssAnimation 0s ease-in 15s forwards;
+    /* Firefox */
+    -webkit-animation: cssAnimation 0s ease-in 15s forwards;
+    /* Safari and Chrome */
+    -o-animation: cssAnimation 0s ease-in 15s forwards;
+    /* Opera */
+    animation: cssAnimation 0s ease-in 15s forwards;
+    -webkit-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+}
+@keyframes cssAnimation {
+    to {
+        width:0;
+        height:0;
+        overflow:hidden;
+    }
+}
+@-webkit-keyframes cssAnimation {
+    to {
+        width:0;
+        height:0;
+        visibility:hidden;
+    }
+}
\ No newline at end of file
diff --git a/basicswap/templates/bids.html b/basicswap/templates/bids.html
index 9064336..40d14f5 100644
--- a/basicswap/templates/bids.html
+++ b/basicswap/templates/bids.html
@@ -171,9 +171,9 @@
                       <tr class="bg-white border-t hover:bg-gray-50">
                         <th scope="row" class="flex items-center py-7 px-46 text-gray-900 whitespace-nowrap">
                           <svg class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3B82F6" stroke-linejoin="round" class="nc-icon-wrapper">
+                            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                               <circle cx="12" cy="12" r="11"></circle>
-                              <polyline points=" 12,6 12,12 18,12 " stroke="#3B82F6"></polyline>
+                              <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
                             </g>
                           </svg>
                           <div class="pl-3">
diff --git a/basicswap/templates/header.html b/basicswap/templates/header.html
index 53cb2c3..09b4822 100644
--- a/basicswap/templates/header.html
+++ b/basicswap/templates/header.html
@@ -113,7 +113,7 @@
                   </g>
                 </svg> Debug </a>
             </li>
-            {% endif %}
+            {% endif %}           
             {% if debug_mode == true %}
             <li>
               <a href="/explorers" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Explorers</span>
@@ -125,6 +125,19 @@
                 </svg> Explorers </a>
             </li>
             {% endif %}
+            {% if use_tor_proxy == true %}
+            <li>
+              <a href="/tor" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Debug</span>
+                <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                          <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+                            <path d="M9,18.8A6.455,6.455,0,0,1,7,14,6.455,6.455,0,0,1,9,9.2" stroke="#6b7280"></path>
+                            <path d="M15,18.8A6.455,6.455,0,0,0,17,14a6.455,6.455,0,0,0-2-4.8" stroke="#6b7280"></path>
+                            <path d="M14,2.256V1H10V2.256A3.949,3.949,0,0,1,7.658,5.891,8.979,8.979,0,0,0,2,14c0,4.971,4.477,9,10,9s10-4.029,10-9a8.978,8.978,0,0,0-5.658-8.109A3.95,3.95,0,0,1,14,2.256Z"></path>
+                          </g>
+                        </svg>
+                </svg> Tor </a>
+            </li>
+            {% endif %}                
             <li>
               <a href="/smsgaddresses" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Settings</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -135,7 +148,7 @@
                     <line x1="23" y1="5" x2="23" y2="9" stroke="#6b7280"></line>
                   </g>
                 </svg> SMSG Addresses </a>
-            </li>
+            </li>          
             <li>
               <a href="/watched" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Automation Strategies</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -163,7 +176,7 @@
                   </g>
                 </svg> Automation Strategies</a>
             </li>
-          {% endif %}
+          {% endif %}        
         </ul>
           <div class="text-sm text-gray-700">
             <a href="/shutdown/{{ shutdown_token }}" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Shutdown</span>
@@ -194,49 +207,49 @@
           <div class="divide-y divide-gray-100">
             {% for entry in notifications %} {% if entry[1] == 1 %}
             <div class="flex py-3 px-4 hover:bg-gray-100">
-              <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/new_offer.png" alt="New Offer"> </div>
+              <div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-blue-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"><circle cx="5" cy="5" r="4"></circle> <circle cx="19" cy="19" r="4"></circle> <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#ffffff"></polyline> <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#ffffff"></polyline> <polyline points=" 16,2 13,5 16,8 " stroke="#ffffff"></polyline> <polyline points=" 8,16 11,19 8,22 " stroke="#ffffff"></polyline></g></svg></div>
               <div class="pl-3 w-full">
                 <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900">
-                    NEW NETWORK OFFER</span>
-                  <br/> <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-900 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300">
-                  <a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(37, True) }}</a>
+                    NEW NETWORK <a class="underline" href="/offer/{{ entry[2].offer_id }}">OFFER</a></span>
+                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center">
+                  <a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(42, True) }}</a>
                   </span></div>
-                <div class="text-xs text-blue-600">{{ entry[0] }}</div>
+                <div class="text-xs text-gray-600">{{ entry[0] }}</div>
               </div>
             </div>
             {% elif entry[1] == 2 %}
             <div class="flex py-3 px-4 hover:bg-gray-100">
-              <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/bid_accepted.png" alt="New Accepted"> </div>
+              <div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-blue-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"><rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect> <polyline points="3,23 3,19 15,19 15,23 "></polyline> <line x1="4" y1="15" x2="1" y2="15" stroke="#ffffff"></line> <line x1="5.757" y1="10.757" x2="3.636" y2="8.636" stroke="#ffffff"></line> <line x1="1" y1="23" x2="17" y2="23"></line> <line x1="17" y1="9" x2="23" y2="15"></line></g></svg></div>
               <div class="pl-3 w-full">
                 <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900">
-                    <a href="/bid/{{ entry[2].bid_id }}">NEW BID</a> ON OFFER</span>
-                  <br/> <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300">
-                      <a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(37, True) }}</a>
+                    <a class="underline" href="/bid/{{ entry[2].bid_id }}">NEW BID</a> ON <a class="underline" href="/offer/{{ entry[2].offer_id }}">OFFER</a></span>
+                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center">
+                      <a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(42, True) }}</a>
                     </span></div>
-                <div class="text-xs text-blue-600">{{ entry[0] }}</div>
+                <div class="text-xs text-gray-600">{{ entry[0] }}</div>
               </div>
             </div>
             {% elif entry[1] == 3 %}
             <div class="flex py-3 px-4 hover:bg-gray-100">
-              <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/new_offer.png" alt="New Offer"> </div>
+              <div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-violet-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g fill="#ffffff"><path d="M8.5,20a1.5,1.5,0,0,1-1.061-.439L.379,12.5,2.5,10.379l6,6,13-13L23.621,5.5,9.561,19.561A1.5,1.5,0,0,1,8.5,20Z" fill="#ffffff"></path></g></svg></div>
               <div class="pl-3 w-full">
                 <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900">
-                    BID ACCEPTED</span>
-                  <br/> <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300">
-                  <a href="/bid/{{ entry[2].bid_id }}">{{ entry[2].bid_id|truncate(37, True) }}</a>
+                    <a class="underline" href="/bid/{{ entry[2].bid_id }}">BID</a> ACCEPTED</span>
+                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center">
+                  <a href="/bid/{{ entry[2].bid_id }}">{{ entry[2].bid_id|truncate(42, True) }}</a>
                   </span></div>
-                <div class="text-xs text-blue-600">{{ entry[0] }}</div>
+                <div class="text-xs text-gray-600">{{ entry[0] }}</div>
               </div>
             </div>
             {% else %}
             <div class="flex py-3 px-4 hover:bg-gray-100">
-              <div class="flex-shrink-0"> <img class="w-11 h-11 rounded-full" src="/static/images/other/new_offer.png" alt="New Offer"> </div>
+              <div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-blue-500 rounded-lg"><svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g fill="#ffffff"><path d="M8.5,20a1.5,1.5,0,0,1-1.061-.439L.379,12.5,2.5,10.379l6,6,13-13L23.621,5.5,9.561,19.561A1.5,1.5,0,0,1,8.5,20Z" fill="#ffffff"></path></g></svg></div>
               <div class="pl-3 w-full">
                 <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900">
                     UNKNOWN EVENT</span>
-                  <br/> <span class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300">
+                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center">
                   {{ entry[1] }}
-                  <div class="text-xs text-blue-600">{{ entry[0] }}</div>
+                  <div class="text-xs text-gray-600">{{ entry[0] }}</div>
                 </div>
               </div>
                {% endif %}
@@ -265,7 +278,7 @@
               <li>
                 <div data-tooltip-target="tooltip-DEV" class="ml-5 flex items-center text-gray-50 hover:text-gray-100 text-sm">
                     <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
-                    <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#2ad167" stroke-linejoin="round" class="nc-icon-wrapper">
+                    <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#2ad167" stroke-linejoin="round">
                       <circle cx="12" cy="12" r="11"></circle>
                       <path data-cap="butt" d="M9,16a3,3,0,0,0,6,0" stroke="#2ad167"></path>
                       <circle cx="17" cy="10" r="3" stroke="#2ad167"></circle>
@@ -296,18 +309,18 @@
                   <p> </p> </div>
                 </li>                
                 </ul>
-                <!-- else wallets unlocked -->
+                <!-- else wallets unlocked
                 <ul class="xl:flex">
               <li>
                 <div data-tooltip-target="tooltip-unlocked-wallets" class="ml-5 flex items-center text-gray-50 hover:text-gray-100 text-sm">
-                   <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#f80b0b" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="3" y="11" width="18" height="12"></rect><circle cx="12" cy="17" r="2" stroke="#f80b0b"></circle><path data-cap="butt" d="M17,6a4.951,4.951,0,0,0-4.9-5H12A4.951,4.951,0,0,0,7,5.9V11"></path></g></svg>        
+                   <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#f80b0b" stroke-linejoin="round"><rect x="3" y="11" width="18" height="12"></rect><circle cx="12" cy="17" r="2" stroke="#f80b0b"></circle><path data-cap="butt" d="M17,6a4.951,4.951,0,0,0-4.9-5H12A4.951,4.951,0,0,0,7,5.9V11"></path></g></svg>        
                   <span data-tooltip-target="tooltip-unlocked-wallets" ></span> </div>
                 <div class="tooltip-arrow" data-popper-arrow></div>
                 <div id="tooltip-unlocked-wallets" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
                   <p>Wallets unlocked </p>
                   <p> </p> </div>
                 </li>                
-                </ul>
+                </ul>-->
                  <!-- end wallets locked/unlock -->
                 {% endif %}
                 {% if use_tor_proxy == true %}
@@ -550,7 +563,7 @@
             <li>
               <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/debug"> <span class="inline-block mr-3">
               <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round" class="nc-icon-wrapper">
+              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
               <path data-cap="butt" d="M5.29,10H4A3,3,0,0,1,1,7V6" stroke="#6b7280"></path>
               <path data-cap="butt" d="M5.29,18H4a3,3,0,0,0-3,3v1" stroke="#6b7280"></path>
               <path data-cap="butt" d="M8,6.255V5a4,4,0,0,1,4-4h0a4,4,0,0,1,4,4V6.255" stroke="#6b7280"></path>
@@ -559,7 +572,7 @@
               <path d="M19,16A7,7,0,0,1,5,16V12a7,7,0,0,1,14,0Z"></path></g></svg>
             </span> <span>Debug</span> </a>
             </li>
-            {% endif %}
+            {% endif %}          
             {% if debug_mode == true %}
             <li>
               <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/explorers"> <span class="inline-block mr-3">
@@ -624,7 +637,7 @@
                      <path d="M14,2.256V1H10V2.256A3.949,3.949,0,0,1,7.658,5.891,8.979,8.979,0,0,0,2,14c0,4.971,4.477,9,10,9s10-4.029,10-9a8.978,8.978,0,0,0-5.658-8.109A3.95,3.95,0,0,1,14,2.256Z"></path>
                    </g>
                  </svg>
-              </span> <span>TOR</span> </a>
+              </span> <span>Tor</span> </a>
             </li>
           {% endif %}
         </ul>
@@ -648,7 +661,7 @@
   {% if ws_url %}
   <script>
     var ws = new WebSocket("{{ ws_url }}"),
-      floating_div = document.createElement('div');
+    floating_div = document.createElement('div');
     floating_div.classList.add('floatright');
     messages = document.createElement('ul');
     messages.setAttribute('id', 'ul_updates');
@@ -656,15 +669,15 @@
       let json = JSON.parse(event.data);
       let event_message = 'Unknown event';
       if (json['event'] == 'new_offer') {
-        event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"> <div class="flex"> <div class="text-sm font-normal"> <div class="mb-1 text-sm font-semibold text-gray-900"> <a href=/offer/' + json['offer_id'] + '>New offer</a></div></div></div></div>';
+        event_message = '<div id="hide"><div id="toast-success" class="flex items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow" role="alert"><div class="inline-flex flex-shrink-0 justify-center items-center w-10 h-10 bg-blue-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"><circle cx="5" cy="5" r="4"></circle> <circle cx="19" cy="19" r="4"></circle> <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#ffffff"></polyline> <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#ffffff"></polyline> <polyline points=" 16,2 13,5 16,8 " stroke="#ffffff"></polyline> <polyline points=" 8,16 11,19 8,22 " stroke="#ffffff"></polyline></g></svg></div><div class="uppercase w-40 ml-3 text-sm font-semibold text-gray-900 dark:text-white">New network <a class="underline" href=/offer/' + json['offer_id'] + '>offer</a></div><button type="button" onclick="closeAlert(event)" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-0 focus:outline-none focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><span class="sr-only">Close</span><svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button></div></div>';
       }
       else
       if (json['event'] == 'new_bid') {
-        event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"> <div class="flex"> <div class="text-sm font-normal"> <div class="mb-1 text-sm font-semibold text-gray-900"> <a href=/bid/' + json['bid_id'] + '>New bid</a> on offer</div><div class="mt-2 mb-2 inline-flex px-2.5 py-1.5 text-xs font-small monospace text-center text-white bg-gray-800 rounded-lg hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300" href=/offer/' + json['offer_id'] + '>' + json['offer_id'] + '</a></div></div>';
+        event_message = '<div id="hide"><div id="toast-success" class="flex items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow" role="alert"><div class="inline-flex flex-shrink-0 justify-center items-center w-10 h-10 bg-violet-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"><rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect> <polyline points="3,23 3,19 15,19 15,23 "></polyline> <line x1="4" y1="15" x2="1" y2="15" stroke="#ffffff"></line> <line x1="5.757" y1="10.757" x2="3.636" y2="8.636" stroke="#ffffff"></line> <line x1="1" y1="23" x2="17" y2="23"></line> <line x1="17" y1="9" x2="23" y2="15"></line></g></svg></div><div class="uppercase w-40 ml-3 text-sm font-normal"><span class="mb-1 text-sm font-semibold text-gray-900"><a class="underline" href=/bid/' + json['bid_id'] + '>New bid</a> on <a class="underline" href=/offer/' + json['offer_id'] + '>offer</a></span></div><button type="button" onclick="closeAlert(event)" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-0 focus:outline-nonefocus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button></div></div>';
       }
       else
       if (json['event'] == 'bid_accepted') {
-        event_message = '<div class="p-4 w-full mt-5 text-gray-500 bg-white rounded-lg shadow"><div class="flex"><div class="text-sm font-normal"><div class="mb-1 text-sm font-semibold text-gray-900"><a href=/bid/' + json['bid_id'] + '>Bid accepted</a></div></div></div></div>';
+        event_message = '<div id="hide"><div id="toast-success" class="flex items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow" role="alert"><div class="inline-flex flex-shrink-0 justify-center items-center w-10 h-10 bg-green-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g fill="#ffffff"><path d="M8.5,20a1.5,1.5,0,0,1-1.061-.439L.379,12.5,2.5,10.379l6,6,13-13L23.621,5.5,9.561,19.561A1.5,1.5,0,0,1,8.5,20Z" fill="#ffffff"></path></g></svg></div><div class="uppercase w-40 ml-3 text-sm font-semibold text-gray-900 dark:text-white"><a class="underline" href=/bid/' + json['bid_id'] + '>Bid</a> accepted</div><button type="button" onclick="closeAlert(event)" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-0 focus:outline-none focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><span class="sr-only">Close</span><svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button></div></div>';
       }
       let messages = document.getElementById('ul_updates'),
         message = document.createElement('li');
@@ -673,5 +686,12 @@
     };
     floating_div.appendChild(messages);
     document.body.appendChild(floating_div);
+      function closeAlert(event){
+    let element = event.target;
+    while(element.nodeName !== "BUTTON"){
+      element = element.parentNode;
+    }
+    element.parentNode.parentNode.removeChild(element.parentNode);
+  }
   </script>
   {% endif %}
\ No newline at end of file
diff --git a/basicswap/templates/tor.html b/basicswap/templates/tor.html
index a7d5a29..d9ce6ac 100644
--- a/basicswap/templates/tor.html
+++ b/basicswap/templates/tor.html
@@ -14,7 +14,7 @@
               <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
             </svg>
           </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/tor">TOR</a></li>
+          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/tor">Tor</a></li>
           <li>
             <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
@@ -29,13 +29,27 @@
       <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
         <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">TOR</h2>
-            <p class="font-semibold text-coolGray-200">TOR connection information</p>
+            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Tor</h2>
+            <p class="font-semibold text-coolGray-200">Tor connection information</p>
           </div>
-          <div class="w-full md:w-1/2 p-3">
-            <a id="refresh" href="/tor">
-              <button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Refresh</button>
-            </a>
+          <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> 
+            {% if refresh %}
+            <a id="refresh" href="/tor" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                <g fill="#ffffff">
+                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+                </g>
+              </svg> <span>Refresh {{ refresh }} seconds</span> </a>
+              {% else %}
+            <a id="refresh" href="/tor" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                <g fill="#ffffff">
+                  <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
+                  <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
+                </g>
+              </svg> <span>Refresh</span> </a> 
+            {% endif %} 
           </div>
         </div>
       </div>
@@ -52,12 +66,12 @@
                 <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
                   <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                     <tr>
-                      <th scope="col" class="py-3 px-6 w-80">Name:</th>
-                      <th scope="col" class="py-3">Output:</th>
+                      <th scope="col" class="py-3 px-6 w-80">Tor</th>
+                      <th scope="col" class="py-3"></th>
                     </tr>
                   </thead>
                   <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 pl-5 pr-5 w-80 bold">TOR Mode</td>
+                    <td class="py-4 pl-5 pr-5 w-80 bold">Tor Mode</td>
                     <td td class="py-4">{% if use_tor_proxy == true %} Active {% if tor_established == true %} & Connected{% endif %} {% endif %}</td>
                   </tr>
                   <tr class="bg-white border-t hover:bg-gray-50">