From 4f114ba9ae1a34094e10e1c3ee2e0d8c8cd6ddf0 Mon Sep 17 00:00:00 2001
From: gerlofvanek <info@gerlofvanek.com>
Date: Mon, 26 Feb 2024 20:07:33 +0100
Subject: [PATCH] ui: Clean-up / Fixes / Updates

- Moved parts of the svg code/images in style.html and update the templates.
- Restyled and updated the JS for the cryptocurrency price boxes on the offers page.
- Started on restyling the offers page.
- Offers page, Posted timestamps are displayed as (X min ago) and Expires in -h min.
- Fixed broken breadscrumb links.
---
 basicswap/templates/bids.html   |  56 +--
 basicswap/templates/header.html | 472 +++++++------------------
 basicswap/templates/offers.html | 607 +++++++++++++++++---------------
 basicswap/templates/style.html  | 562 ++++++++++++++++++++++-------
 basicswap/ui/page_offers.py     |  39 +-
 basicswap/ui/util.py            |   2 +-
 6 files changed, 958 insertions(+), 780 deletions(-)

diff --git a/basicswap/templates/bids.html b/basicswap/templates/bids.html
index 05b71b2..ddc44dd 100644
--- a/basicswap/templates/bids.html
+++ b/basicswap/templates/bids.html
@@ -201,7 +201,7 @@
               <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
               </div>
-             </th>           
+             </th>
             </tr>
            </thead>
            <tbody>
@@ -238,7 +238,7 @@
               <td class="py-3 px-6 text-xs">
                <a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md bg-blue-500 text-white border border-blue-500 hover:bg-blue-600 transition duration-200 bg-blue-500 text-white hover:bg-blue-600 transition duration-200" href="/bid/{{ b[1] }}">Accept</a>
               </td>
-             {% endif %} 
+             {% endif %}
             </tr>
            </tbody>
            {% endfor %}
@@ -247,33 +247,35 @@
           <input type="hidden" name="pageno" value="{{ filters.page_no }}">
          </div>
         </div>
+
         <div class="rounded-b-md">
-         <div class="w-full md:w-0/12">
-          <div class="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-100 dark:border-gray-400">
-           <div class="w-full md:w-auto p-1.5">
-            <button type="submit" name='pageback' value="Page Back" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
-             <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
-             </svg>
-             <span>Page Back</span>
-            </button>
-           </div>
-           <div class="flex items-center">
-            <div class="w-full md:w-auto p-1.5">
-             <p class="text-sm font-heading dark:text-white">Page: {{ filters.page_no }}</p>
+            <div class="w-full md:w-0/12">
+                <div class="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-100 dark:border-gray-400">
+                    {% if filters.page_no > 1 %}
+                    <div class="w-full md:w-auto p-1.5">
+                        <button type="submit" name='pageback' value="Previous" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+                            {{ page_back_svg | safe }}
+                            <span>Previous</span>
+                        </button>
+                    </div>
+                    {% endif %}
+                    <div class="flex items-center">
+                        <div class="w-full md:w-auto p-1.5">
+                            <p class="text-sm font-heading dark:text-white">Page: {{ filters.page_no }}</p>
+                        </div>
+                    </div>
+                    {% if bids_count > 10 %}
+                    <div class="w-full md:w-auto p-1.5">
+                            <button type="submit" name='pageforwards' value="Next" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+                                <span>Next</span>
+                                {{ page_forwards_svg | safe }}
+                            </button>
+                    </div>
+                    {% endif %}
+                </div>
             </div>
-           </div>
-           <div class="w-full md:w-auto p-1.5">
-            <button type="submit" name='pageforwards' value="Page Forwards" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
-             <span>Page Forwards</span>
-             <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-             </svg>
-            </button>
-           </div>
-          </div>
-         </div>
         </div>
+
      </form>
     </div>
    </div>
@@ -283,4 +285,4 @@
 </div>
 {% include 'footer.html' %}
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/basicswap/templates/header.html b/basicswap/templates/header.html
index c939198..9e50ea9 100644
--- a/basicswap/templates/header.html
+++ b/basicswap/templates/header.html
@@ -1,3 +1,4 @@
+{% from 'style.html' import notifications_network_offer_svg, notifications_bid_accepted_svg, notifications_unknow_event_svg, notifications_new_bid_on_offer_svg, notifications_close_svg, swap_in_progress_mobile_svg, wallet_svg, page_back_svg, order_book_svg, new_offer_svg, settings_svg, asettings_svg, cog_svg, rpc_svg, debug_svg, explorer_svg, tor_svg, smsg_svg, outputs_svg, automation_svg, shutdown_svg, notifications_svg, debug_nerd_svg, wallet_locked_svg, mobile_menu_svg, wallet_unlocked_svg, tor_purple_svg, sun_svg, moon_svg, swap_in_progress_svg, available_bids_svg, your_offers_svg, bids_received_svg, bids_sent_svg, header_arrow_down_svg %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -91,57 +92,34 @@
 <body class="dark:bg-gray-700">
   <section>
     <nav class="relative bg-gray-700">
+
       <div class="p-6 container flex flex-wrap items-center justify-between items-center mx-auto">
         <a class="flex-shrink-0 mr-12 text-2xl text-white font-semibold" href="/"> <img class="h-10" src="/static/images/logos/basicswap-logo.svg" alt="" width="auto"></a>
         <ul class="hidden xl:flex">
           <li>
             <a class="flex mr-10 items-center py-3 text-gray-50 hover:text-gray-100 text-sm" href="/wallets">
-              <svg class="text-gray-500 w-5 h-5 mr-2" 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="#6b7280" stroke-linejoin="round">
-                  <path d="M6,3H3C1.895,3,1,3.895,1,5 v0c0,1.105,0.895,2,2,2"></path>
-                  <polyline points=" 6,7 6,1 20,1 20,7 " stroke="#6b7280"></polyline>
-                  <path d="M23,7H3 C1.895,7,1,6.105,1,5v15c0,1.657,1.343,3,3,3h19V7z"></path>
-                  <circle cx="17" cy="15" r="2"></circle>
-                </g>
-              </svg> <span>Wallets</span></a>
+              {{ wallet_svg | safe }}
+               <span>Wallets</span>
+             </a>
           </li>
+
           <li>
             <a class="flex mr-10 items-center py-2.5 text-gray-50 hover:text-gray-100 text-sm" href="/offers">
-              <svg class="text-gray-500 w-5 h-5 mr-2" 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="#6b7280" stroke-linejoin="round">
-                  <rect x="3" y="1" width="18" height="22"></rect>
-                  <line x1="12" y1="8" x2="12" y2="16" stroke="#6b7280"></line>
-                  <line x1="8" y1="14" x2="8" y2="16" stroke="#6b7280"></line>
-                  <line x1="16" y1="11" x2="16" y2="16" stroke="#6b7280"> </line>
-                </g>
-              </svg> <span>Show Order Book</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_network_offers }}</span></a>
+              {{ order_book_svg | safe }}<span>Show Order Book</span>
+              <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_network_offers }}</span>
+            </a>
           </li>
           <li>
-            <a class="flex flex-wrap justify-center w-full px-4 py-2.5 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" href="/newoffer">
-              <svg class="text-gray-500 w-5 h-5 mr-2" 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> <span>Place new Offer</span></a>
+            <a class="flex rounded-full flex-wrap justify-center w-full px-4 py-2.5 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" href="/newoffer">
+              {{ new_offer_svg | safe }}
+              <span>Place new Offer</span>
+            </a>
           </li>
         </ul>
         <ul class="mr-10 hidden xl:flex lg:justify-end lg:items-center lg:space-x-6 ml-auto">
           <div id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex justify-between items-center py-2 pr-4 pl-3 w-full text-gray-50 text-sm  md:border-0 md:p-0 md:w-auto text-gray-50 hover:text-gray-100">
-            <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 stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                <path d="M14,19l2.95,2.95A3.5,3.5,0,0,0,21.9,22l.051-.051h0A3.5,3.5,0,0,0,22,17l-.051-.051L20,15" stroke="#6b7280"></path>
-                <polyline data-cap="butt" points="11.491 8.866 4.203 1.578 1.661 4.12 8.779 11.238" stroke="#6b7280"></polyline>
-                <path d="M22.678,4.922,19.6,7.987l-3.6-3.576,3.08-3.066a4.214,4.214,0,0,0-2.259-.307,5.615,5.615,0,0,0-5.133,5.723A4.223,4.223,0,0,0,12,8.4L2.145,17.083a3.419,3.419,0,0,0-.276,4.827c.023.027.047.052.071.078h0a3.286,3.286,0,0,0,4.647.1,3.232,3.232,0,0,0,.281-.3l8.726-9.81a6.717,6.717,0,0,0,2.875.2A5.687,5.687,0,0,0,22.78,8.192,5.088,5.088,0,0,0,22.678,4.922Z"></path>
-              </g>
-            </svg> Settings & Tools
-            <svg class="text-gray-400 ml-4" width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M9.08335 0.666657C8.75002 0.333323 8.25002 0.333323 7.91669 0.666657L5.00002 3.58332L2.08335 0.666657C1.75002 0.333323 1.25002 0.333323 0.916687 0.666657C0.583354 0.99999 0.583354 1.49999 0.916687 1.83332L4.41669 5.33332C4.58335 5.49999 4.75002 5.58332 5.00002 5.58332C5.25002 5.58332 5.41669 5.49999 5.58335 5.33332L9.08335 1.83332C9.41669 1.49999 9.41669 0.99999 9.08335 0.666657Z" fill="#6b7280"></path>
-            </svg>
+            {{ settings_svg | safe }} Settings & Tools
+            {{ header_arrow_down_svg| safe }}
           </div>
         </ul>
         <!-- dropdown settings & tools -->
@@ -149,138 +127,77 @@
           <ul class="py-0 text-sm text-gray-700" aria-labelledby="dropdownLargeButton">
             <li>
               <a href="/settings" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <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="18" width="18" viewBox="0 0 24 24">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <circle cx="12" cy="12" r="3" stroke="#6b7280"></circle>
-                    <path d="M20,12a8.049,8.049,0,0,0-.188-1.713l2.714-2.055-2-3.464L17.383,6.094a7.987,7.987,0,0,0-2.961-1.719L14,1H10L9.578,4.375A7.987,7.987,0,0,0,6.617,6.094L3.474,4.768l-2,3.464,2.714,2.055a7.9,7.9,0,0,0,0,3.426L1.474,15.768l2,3.464,3.143-1.326a7.987,7.987,0,0,0,2.961,1.719L10,23h4l.422-3.375a7.987,7.987,0,0,0,2.961-1.719l3.143,1.326,2-3.464-2.714-2.055A8.049,8.049,0,0,0,20,12Z"></path>
-                  </g>
-                </svg> Settings</a>
+            {{ cog_svg | safe }} Settings</a>
             </li>
             {% if debug_mode == true %}
             <li>
               <a href="/rpc" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">RPC</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">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <rect x="1" y="2" width="22" height="20"></rect>
-                    <line x1="1" y1="6" x2="23" y2="6"></line>
-                    <polyline points=" 5,11 7,13 5,15 " stroke="#6b7280"></polyline>
-                    <line x1="10" y1="15" x2="14" y2="15" stroke="#6b7280"></line>
-                    <line x1="6" y1="2" x2="6" y2="6"></line>
-                  </g>
-                </svg> RPC Console </a>
+                {{ rpc_svg | safe }} RPC Console </a>
             </li>
             {% endif %}
             {% if debug_mode == true %}
             <li>
-              <a href="/debug" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <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 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>
-                    <line x1="5" y1="14" x2="1" y2="14" stroke="#6b7280"></line>
-                    <path data-cap="butt" d="M18.71,10H20a3,3,0,0,0,3-3V6" stroke="#6b7280"></path>
-                    <path data-cap="butt" d="M18.71,18H20a3,3,0,0,1,3,3v1" stroke="#6b7280"></path>
-                    <line x1="19" y1="14" x2="23" y2="14" stroke="#6b7280"></line>
-                    <path d="M19,16A7,7,0,0,1,5,16V12a7,7,0,0,1,14,0Z"></path>
-                  </g>
-                </svg> Debug</a>
+            <a href="/debug" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Debug</span>
+            {{ debug_svg | safe }}  Debug</a>
             </li>
             {% endif %}
             {% if debug_mode == true %}
             <li>
               <a href="/explorers" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Explorers</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">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <line x1="22" y1="22" x2="15.656" y2="15.656" stroke="#6b7280"></line>
-                    <circle cx="10" cy="10" r="8"></circle>
-                  </g>
-                </svg> Explorers </a>
+            {{ explorer_svg | safe }}  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 dark:hover:bg-gray-700 dark:text-white"> <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>
+              <a href="/tor" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Tor</span>
+            {{ tor_svg | safe }} Tor </a>
             </li>
             {% endif %}
             <li>
               <a href="/smsgaddresses" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <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">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#6b7280"></path>
-                    <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#6b7280"></rect>
-                    <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path>
-                    <line x1="23" y1="5" x2="23" y2="9" stroke="#6b7280"></line>
-                  </g>
-                </svg> SMSG Addresses</a>
+            {{ smsg_svg | safe }}  SMSG Addresses</a>
             </li>
             <li>
-              <a href="/watched" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <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">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <path d="M1.373,13.183a2.064,2.064,0,0,1,0-2.366C2.946,8.59,6.819,4,12,4s9.054,4.59,10.627,6.817a2.064,2.064,0,0,1,0,2.366C21.054,15.41,17.181,20,12,20S2.946,15.41,1.373,13.183Z"></path>
-                    <circle cx="12" cy="12" r="4" stroke="#6b7280"></circle>
-                  </g>
-                </svg> Watch Outputs <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_watched_outputs }}</span> </a>
+            <a href="/watched" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Automation Strategies</span>
+            {{ outputs_svg | safe }}  Watch Outputs
+            <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_watched_outputs }}</span>
+            </a>
             </li>
             {% if debug_mode == true %}
             <li>
               <a href="/automation" class="flex items-center block py-4 px-4 hover:bg-gray-10 dark:hover:bg-gray-700 dark:text-white"> <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">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <line data-cap="butt" x1="5" y1="1" x2="5" y2="6" stroke="#6b7280"></line>
-                    <line x1="3" y1="1" x2="7" y2="1" stroke="#6b7280"> </line>
-                    <line data-cap="butt" x1="19" y1="1" x2="19" y2="6" stroke="#6b7280"></line>
-                    <line x1="17" y1="1" x2="21" y2="1" stroke="#6b7280"></line>
-                    <rect x="6" y="15" width="12" height="4" stroke="#6b7280"></rect>
-                    <line data-cap="butt" x1="10" y1="19" x2="10" y2="15" stroke="#6b7280"></line>
-                    <line data-cap="butt" x1="14" y1="19" x2="14" y2="15" stroke="#6b7280"></line>
-                    <line x1="6" y1="11" x2="8" y2="11" stroke="#6b7280"></line>
-                    <line x1="16" y1="11" x2="18" y2="11" stroke="#6b7280"> </line>
-                    <polygon points="23 6 5 6 1 6 1 23 23 23 23 6"></polygon>
-                  </g>
-                </svg> Automation Strategies</a>
+            {{ automation_svg | safe }} Automation Strategies</a>
             </li>
           {% 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 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Shutdown</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">
-                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                  <line data-cap="butt" x1="11" y1="10" x2="22" y2="10" stroke="#6b7280"></line>
-                  <polyline points="18 6 22 10 18 14" stroke="#6b7280"></polyline>
-                  <polyline data-cap="butt" points="13 13 13 17 8 17"></polyline>
-                  <polyline data-cap="butt" points="1 2 8 7.016 8 22 1 17 1 2 13 2 13 7"></polyline>
-                </g>
-              </svg> Shutdown </a>
+            {{ shutdown_svg | safe }}  Shutdown </a>
           </div>
         </div>
+
         <!-- dropdown settings & tools -->
+
         <!-- notifications -->
         <button id="dropdownNotificationButton" data-dropdown-toggle="dropdownNotification" class="inline-flex items-center text-sm font-medium text-center text-gray-500 focus:outline-none " type="button">
-          <svg class="h-5 w-5" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="#6b7280"></path>
-          </svg>
+          {{ notifications_svg | safe }}
           <div class="flex relative">
             <!-- Todo -->
             <!-- <div class="inline-flex relative -top-2 right-2 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-800"></div> -->
-            <!-- Red <div class="inline-flex relative -top-2 right-3 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></div>  --></div>
+            <!-- Red <div class="inline-flex relative -top-2 right-3 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></div>  -->
+            <!-- Todo -->
+          </div>
         </button>
+
         <!-- Dropdown menu -->
         <div id="dropdownNotification" class="hidden z-50 w-full max-w-sm bg-white shadow rounded divide-y divide-gray-100 drop-shadow dark:bg-gray-500 dark:divide-gray-400 dark:text-white" aria-labelledby="dropdownNotificationButton">
           <div class="block py-2 px-4 font-semibold text-center text-gray-700 bg-gray-50 drop-shadow dark:text-white dark:bg-gray-500">Notifications History</div>
           <div class="divide-y divide-gray-100 dark:divide-gray-400">
             {% for entry in notifications %} {% if entry[1] == 1 %}
             <div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700">
-              <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="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-blue-500 rounded-lg">
+                {{ notifications_network_offer_svg | safe }}
+              </div>
               <div class="pl-3 w-full">
                 <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900 dark:text-white">
                     NEW NETWORK <a class="underline text-blue-500" href="/offer/{{ entry[2].offer_id }}">OFFER</a></span>
@@ -292,7 +209,9 @@
             </div>
             {% elif entry[1] == 2 %}
             <div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700">
-              <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="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-blue-500 rounded-lg">
+                {{ notifications_new_bid_on_offer_svg | safe }}
+              </div>
               <div class="pl-3 w-full">
                 <div class="text-gray-500 dark:text-white text-sm mb-1.5"> <span class="font-semibold text-gray-900 dark:text-white">
                     <a class="underline text-blue-500" href="/bid/{{ entry[2].bid_id }}">NEW BID</a> ON <a class="underline text-blue-500" href="/offer/{{ entry[2].offer_id }}">OFFER</a></span>
@@ -304,7 +223,9 @@
             </div>
             {% elif entry[1] == 3 %}
             <div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700">
-              <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="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-violet-500 rounded-lg">
+                {{ notifications_bid_accepted_svg | safe }}
+              </div>
               <div class="pl-3 w-full">
                 <div class="text-gray-500 text-sm mb-1.5 dark:text-white"> <span class="font-semibold text-gray-900 dark:text-white">
                     <a class="underline text-blue-500" href="/bid/{{ entry[2].bid_id }}">BID</a> ACCEPTED</span>
@@ -316,7 +237,9 @@
             </div>
             {% else %}
             <div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700">
-              <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="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-blue-500 rounded-lg">
+                {{ notifications_unknow_event_svg | safe }}
+              </div>
               <div class="pl-3 w-full">
                 <div class="text-gray-500 text-sm mb-1.5 dark:text-white"> <span class="font-semibold text-gray-900 dark:text-white">
                     UNKNOWN EVENT</span>
@@ -328,36 +251,19 @@
                {% endif %}
                {% endfor %}
             </div>
-           <!-- todo <a href="#" class="block py-2 text-sm font-medium text-center text-gray-900 bg-gray-50 hover:bg-gray-100">
-             <div class="inline-flex items-center ">
-                <svg class="mr-2 w-4 h-4 text-gray-500" 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="#6b7280" stroke-linejoin="round">
-                    <path d="M1.373,13.183a2.064,2.064,0,0,1,0-2.366C2.946,8.59,6.819,4,12,4s9.054,4.59,10.627,6.817a2.064,2.064,0,0,1,0,2.366C21.054,15.41,17.181,20,12,20S2.946,15.41,1.373,13.183Z"></path>
-                    <circle cx="12" cy="12" r="4" stroke="#6b7280"></circle>
-                  </g>
-                </svg> View all
-              </div>
-            </a>-->
           </div>
 <!-- notifications -->
-<!-- todo - fix line -->
+
 <div class="flex mr-2 items-center text-gray-50 hover:text-gray-100 text-sm ml-5">
   <div class="flex-shrink-0 w-px h-10 bg-gray-400 dark:bg-gray-400 ml-4 mr-5"></div>
               {% if debug_mode == true %}
               <!-- dev mode icons on/off -->
               <ul class="xl:flex">
               <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">
-                      <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>
-                      <circle cx="7" cy="10" r="3" stroke="#2ad167"></circle>
-                      <path data-cap="butt" d="M10,10a2,2,0,0,1,4,0" stroke="#2ad167"></path></g>
-                  </svg>
+                <div data-tooltip-target="tooltip-debug" class="ml-5 flex items-center text-gray-50 hover:text-gray-100 text-sm">
+                  {{ debug_nerd_svg | safe }}
                   <span data-tooltip-target="tooltip-DEV" ></span> </div>
-                <div id="tooltip-DEV" 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">
+                <div id="tooltip-debug" 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><b>Debug mode:</b> Active</p>
                   {% if debug_ui_mode == true %}
                   <p><b>Debug UI mode:</b> Active</p>
@@ -372,7 +278,7 @@
                 <ul class="xl:flex"><li>
                 {% if locked == true %}
                 <div data-tooltip-target="tooltip-locked-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="#2ad167" stroke-linejoin="round"><rect x="3" y="11" width="18" height="12" rx="2"></rect><circle cx="12" cy="17" r="2" stroke="#2ad167"></circle><path d="M17,7V6a4.951,4.951,0,0,0-4.9-5H12A4.951,4.951,0,0,0,7,5.9V7" stroke="#2ad167"></path></g></svg>
+                  {{ wallet_locked_svg | safe }}
                   <span data-tooltip-target="tooltip-locked-wallets" ></span> </div>
                 <div id="tooltip-locked-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><b>Wallets:</b> Locked </p>
@@ -380,7 +286,7 @@
                 {% else %}
                 <a href='/lock'>
                 <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"><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>
+                {{ wallet_unlocked_svg | safe }}
                   <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">
@@ -395,68 +301,67 @@
                 <ul class="xl:flex ml-5">
                   <li>
                     <a href="/tor">
-                      <div data-tooltip-target="tooltip-TOR" class="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="20" width="20" viewBox="0 0 24 24">
-                          <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#AA70E4" 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="#AA70E4"></path>
-                            <path d="M15,18.8A6.455,6.455,0,0,0,17,14a6.455,6.455,0,0,0-2-4.8" stroke="#AA70E4"></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>
-                    </a> <span data-tooltip-target="tooltip-TOR"></span></div>
-                    <div id="tooltip-TOR" 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"><b>Tor mode:</b> Active {% if tor_established == true %}
-                      <br><b>Tor:</b> Connected{% endif %}</div>
+                      <div data-tooltip-target="tooltip-tor" class="flex items-center text-gray-50 hover:text-gray-100 text-sm">
+                        {{ tor_purple_svg | safe }}
+                    </a> <span data-tooltip-target="tooltip-tor"></span></div>
+                    <div id="tooltip-tor" 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"><b>Tor mode:</b> Active
+                      {% if tor_established == true %}
+                      <br><b>Tor:</b> Connected
+                      {% endif %}
+                    </div>
                   </li>
                 </ul>
                 <!-- tor -->
               {% endif %}
               <button data-tooltip-target="tooltip-darkmode" id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 focus:outline-none rounded-lg text-sm ml-5">
-               <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="#F59E0B" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
-               <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="#F59E0B" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+                {{ sun_svg | safe }}
+                {{ moon_svg | safe }}
                <span data-tooltip-target="tooltip-darkmode"></span>
                   <div id="tooltip-darkmode" 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">Dark mode</div>
               </button>
             </div>
+
               <div class="hidden xl:block"></div>
+
               <!-- mobile menu -->
               <div class="ml-auto flex xl:hidden">
                 <button class="navbar-burger flex items-center rounded focus:outline-none">
-                  <svg class="text-white bg-blue-500 hover:bg-blue-600 block h-8 w-8 p-2 rounded" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
-                    <title>Mobile Menu</title>
-                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
-                  </svg>
+                  {{ mobile_menu_svg | safe }}
                 </button>
               </div>
-              <!-- mobile menu -->
+
             </div>
             <div class="hidden xl:block py-5 px-6 bg-coolGray-100 border-gray-100 dark:border-gray-500 dark:bg-body border-b dark:border-b-2">
               <div class="flex items-center container flex flex-wrap items-center justify-between items-center mx-auto">
                 <ul class="flex items-center">
+
                   <li>
                     <a class="flex mr-5 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/active">
-                      <svg class="text-gray-100 w-5 h-5 ml-7 mr-2" 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="#6b7280" stroke-linejoin="round">
-                          <circle data-cap="butt" cx="12" cy="12" r="3" stroke="#6b7280"></circle>
-                          <polyline points="16.071 5.341 21.763 6.927 21.034 1.13"></polyline>
-                          <path data-cap="butt" d="M1,12A11,11,0,0,1,21.763,6.927"></path>
-                          <polyline points="7.929 18.659 2.237 17.073 2.966 22.87"></polyline>
-                          <path data-cap="butt" d="M23,12A11,11,0,0,1,2.237,17.073"></path>
-                        </g>
-                      </svg><span>Swaps in Progress </span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_swapping }}</span></a>
+                      <div id="swapContainer" class="inline-flex center-spin ml-7 mr-2" {% if summary.num_swapping != 0 %}style="animation: spin 2s linear infinite;"{% endif %}>
+                        {{ swap_in_progress_svg | safe }}
+                      </div>
+                      <span>Swaps in Progress</span>
+                      <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full num-swap">{{ summary.num_swapping }}</span>
+                    </a>
                   </li>
+<style>
+.center-spin {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>
                   <div class="flex-shrink-0 w-px h-10 bg-gray-200 dark:bg-gray-400 mr-10"></div>
+
                   <li>
                     <a data-tooltip-target="tooltip-your-offers" class="flex mr-5 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/sentoffers">
-                      <svg class="text-gray-500 w-5 h-5 mr-2" 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="#6b7280" 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="#6b7280"></polyline>
-                          <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#6b7280"></polyline>
-                          <polyline points=" 16,2 13,5 16,8 " stroke="#6b7280"></polyline>
-                          <polyline points=" 8,16 11,19 8,22 " stroke="#6b7280"></polyline>
-                        </g>
-                      </svg><span>Your Offers</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_active_offers }}</span></a>
+                      {{ your_offers_svg | safe }}
+                      <span>Your Offers</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_active_offers }}</span></a>
 
                 <div id="tooltip-your-offers" 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><b>Total:</b> {{ summary.num_sent_offers }}</p>
@@ -466,23 +371,13 @@
                   </li>
                   <div class="flex-shrink-0 w-px h-10 bg-gray-200 dark:bg-gray-400 mr-10"></div>
                   <li>
-                    <a class="flex mr-10 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/availablebids">
-                      <svg class="text-gray-500 w-5 h-5 mr-2" 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="#6b7280" stroke-linejoin="round">
-                          <circle cx="12" cy="12" r="11"></circle>
-                          <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
-                        </g>
-                      </svg><span>Available Bids</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_available_bids }}</span></a>
+                    <a class="flex mr-10 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/availablebids">{{ available_bids_svg | safe }}
+                      <span>Available Bids</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_available_bids }}</span></a>
                   </li>
                   <li>
                     <a data-tooltip-target="tooltip-bids-received" class="flex mr-10 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/receivedbids">
-                      <svg class="text-gray-100 w-5 h-5 mr-2" 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="#6b7280" stroke-linejoin="round">
-                          <path d="M2,16v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V16"> </path>
-                          <line data-cap="butt" x1="12" y1="1" x2="12" y2="16" stroke="#6b7280"></line>
-                          <polyline points="7 11 12 16 17 11" stroke="#6b7280"></polyline>
-                        </g>
-                      </svg><span>Bids Received</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_recv_active_bids }}</span></a>
+                      {{ bids_received_svg | safe }}
+                      <span>Bids Received</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_recv_active_bids }}</span></a>
                   </li>
 
                 <div id="tooltip-bids-received" 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">
@@ -491,13 +386,8 @@
                 </div>
                   <li>
                     <a data-tooltip-target="tooltip-bids-sent" class="flex mr-10 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/sentbids">
-                      <svg class="text-gray-100 w-5 h-5 mr-2" 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="#6b7280" stroke-linejoin="round">
-                          <path d="M2,16v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V16"></path>
-                          <line data-cap="butt" x1="12" y1="17" x2="12" y2="2" stroke="#6b7280"></line>
-                          <polyline points="17 7 12 2 7 7" stroke="#6b7280"></polyline>
-                        </g>
-                      </svg><span>Bids Sent</span><span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_active_bids }}</span></a>
+                      {{ bids_sent_svg| safe }}
+                      <span>Bids Sent</span><span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_active_bids }}</span></a>
                 <div id="tooltip-bids-sent" 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><b>Total:</b>  {{ summary.num_sent_bids }}</p>
                 <div class="tooltip-arrow" data-popper-arrow></div>
@@ -520,103 +410,46 @@
           <ul class="mb-8 text-sm font-medium">
             <li>
               <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/wallets"> <span class="inline-block mr-3">
-                <svg class="text-gray-500 w-5 h-5 mr-2" 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="#6b7280" stroke-linejoin="round">
-                    <path d="M6,3H3C1.895,3,1,3.895,1,5 v0c0,1.105,0.895,2,2,2"></path>
-                    <polyline points=" 6,7 6,1 20,1 20,7 " stroke="#6b7280"></polyline>
-                    <path d="M23,7H3 C1.895,7,1,6.105,1,5v15c0,1.657,1.343,3,3,3h19V7z"></path>
-                    <circle cx="17" cy="15" r="2"></circle>
-                  </g>
-                </svg>
-                </span><span>Wallets</span> <span class="inline-block ml-auto">
-                </span></a>
+                {{ wallet_svg | safe }}
+                </span><span>Wallets</span>
+                <span class="inline-block ml-auto"></span></a>
             </li>
           </ul>
           <h3 class="mb-2 text-xs uppercase text-gray-300 font-medium dark:text-gray-300">Exchange</h3>
           <ul class="text-sm font-medium">
             <li>
               <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="/newoffer"> <span class="inline-block mr-3">
-                <svg class="text-gray-500 w-5 h-5 mr-2" 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="#6b7280" 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="#6b7280"></polyline>
-                    <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#6b7280"></polyline>
-                    <polyline points=" 16,2 13,5 16,8 " stroke="#6b7280"></polyline>
-                    <polyline points=" 8,16 11,19 8,22 " stroke="#6b7280"></polyline>
-                  </g>
-                </svg>
+                {{ new_offer_svg | safe }}
                 </span><span>Place new Offer</span></a>
             </li>
             <li>
               <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/active"> <span class="inline-block mr-3">
-                <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 stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <circle data-cap="butt" cx="12" cy="12" r="3" stroke="#6b7280"></circle>
-                    <polyline points="16.071 5.341 21.763 6.927 21.034 1.13"></polyline>
-                    <path data-cap="butt" d="M1,12A11,11,0,0,1,21.763,6.927"></path>
-                    <polyline points="7.929 18.659 2.237 17.073 2.966 22.87"></polyline>
-                    <path data-cap="butt" d="M23,12A11,11,0,0,1,2.237,17.073"></path>
-                  </g>
-                </svg>
-                </span><span>Swaps in Progress</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_swapping }}</span></a>
+                {{ swap_in_progress_mobile_svg | safe }}
+              </span><span>Swaps in Progress</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_swapping }}</span></a>
             </li>
             <li>
               <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/offers"> <span class="inline-block mr-3">
-                <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 stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <rect x="3" y="1" width="18" height="22"></rect>
-                    <line x1="12" y1="8" x2="12" y2="16" stroke="#6b7280"></line>
-                    <line x1="8" y1="14" x2="8" y2="16" stroke="#6b7280"></line>
-                    <line x1="16" y1="11" x2="16" y2="16" stroke="#6b7280"> </line>
-                  </g>
-                </svg>
+                {{ order_book_svg | safe }}
                 </span><span>Show Order Book</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_network_offers }}</span></a>
             </li>
             <li>
               <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="sentoffers"> <span class="inline-block mr-3">
-                <svg class="text-gray-500 w-5 h-5 mr-2" 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="#6b7280" 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="#6b7280"></polyline>
-                    <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#6b7280"></polyline>
-                    <polyline points=" 16,2 13,5 16,8 " stroke="#6b7280"></polyline>
-                    <polyline points=" 8,16 11,19 8,22 " stroke="#6b7280"></polyline>
-                  </g>
-                </svg>
+                {{ your_offers_svg | safe }}
               </span><span>Your Offers</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_offers }}</span></a>
             </li>
             <li>
               <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/availablebids"> <span class="inline-block mr-3">
-                <svg class="text-gray-500 w-5 h-5 mr-2" 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="#6b7280" stroke-linejoin="round">
-                    <circle cx="12" cy="12" r="11"></circle>
-                    <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
-                  </g>
-                </svg>
+                {{ available_bids_svg | safe }}
                 </span><span>Available Bids</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_available_bids }}</span></a>
             </li>
             <li>
               <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/receivedbids"> <span class="inline-block mr-3">
-                <svg class="text-gray-100 w-5 h-5 mr-2" 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="#6b7280" stroke-linejoin="round">
-                    <path d="M2,16v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V16"> </path>
-                    <line data-cap="butt" x1="12" y1="1" x2="12" y2="16" stroke="#6b7280"></line>
-                    <polyline points="7 11 12 16 17 11" stroke="#6b7280"></polyline>
-                  </g>
-                </svg>
+                {{ bids_received_svg | safe }}
                 </span><span>Bids Received</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_recv_bids }}</span></a>
             </li>
             <li>
               <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/sentbids"> <span class="inline-block mr-3">
-                <svg class="text-gray-100 w-5 h-5 mr-2" 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="#6b7280" stroke-linejoin="round">
-                    <path d="M2,16v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V16"></path>
-                    <line data-cap="butt" x1="12" y1="17" x2="12" y2="2" stroke="#6b7280"></line>
-                    <polyline points="17 7 12 2 7 7" stroke="#6b7280"></polyline>
-                  </g>
-                </svg>
+                {{ bids_sent_svg | safe }}
                 </span><span>Bids Sent</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_bids }}</span></a>
             </li>
           </ul>
@@ -624,127 +457,65 @@
           <ul class="text-sm font-medium">
             <li>
               <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="/settings"> <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="18" width="18" viewBox="0 0 24 24">
-                    <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                      <circle cx="12" cy="12" r="3" stroke="#6b7280"></circle>
-                      <path d="M20,12a8.049,8.049,0,0,0-.188-1.713l2.714-2.055-2-3.464L17.383,6.094a7.987,7.987,0,0,0-2.961-1.719L14,1H10L9.578,4.375A7.987,7.987,0,0,0,6.617,6.094L3.474,4.768l-2,3.464,2.714,2.055a7.9,7.9,0,0,0,0,3.426L1.474,15.768l2,3.464,3.143-1.326a7.987,7.987,0,0,0,2.961,1.719L10,23h4l.422-3.375a7.987,7.987,0,0,0,2.961-1.719l3.143,1.326,2-3.464-2.714-2.055A8.049,8.049,0,0,0,20,12Z"></path>
-                    </g>
-                  </svg>
+                  {{ settings_svg | safe }}
                   </span><span>Settings</span></a>
             </li>
             {% 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="/rpc"> <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="20" width="20" viewBox="0 0 24 24">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <rect x="1" y="2" width="22" height="20"></rect>
-                    <line x1="1" y1="6" x2="23" y2="6"></line>
-                    <polyline points=" 5,11 7,13 5,15 " stroke="#6b7280"></polyline>
-                    <line x1="10" y1="15" x2="14" y2="15" stroke="#6b7280"></line>
-                    <line x1="6" y1="2" x2="6" y2="6"></line>
-                  </g>
-                </svg>
+                {{ rpc_svg | safe }}
                 </span><span>RPC Console</span></a>
             </li>
             {% 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="/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">
-              <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>
-              <line x1="5" y1="14" x2="1" y2="14" stroke="#6b7280"></line> <path data-cap="butt" d="M18.71,10H20a3,3,0,0,0,3-3V6" stroke="#6b7280"></path>
-              <path data-cap="butt" d="M18.71,18H20a3,3,0,0,1,3,3v1" stroke="#6b7280"></path> <line x1="19" y1="14" x2="23" y2="14" stroke="#6b7280"></line>
-              <path d="M19,16A7,7,0,0,1,5,16V12a7,7,0,0,1,14,0Z"></path></g></svg>
+              {{ debug_svg | safe }}
             </span> <span>Debug</span> </a>
             </li>
             {% 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">
-                <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">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <line x1="22" y1="22" x2="15.656" y2="15.656" stroke="#6b7280"></line>
-                    <circle cx="10" cy="10" r="8"></circle>
-                  </g>
-                </svg>
+            {{ explorer_svg | safe }}
                 </span><span>Explorers</span></a>
             </li>
             {% endif %}
             <li>
               <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/smsgaddresses"> <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="20" width="20" viewBox="0 0 24 24">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#6b7280"></path>
-                    <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#6b7280"></rect>
-                    <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path>
-                    <line x1="23" y1="5" x2="23" y2="9" stroke="#6b7280"></line>
-                  </g>
-                </svg>
+              {{ smsg_svg | safe }}
                 </span><span>SMSG Addresses</span></a>
             </li>
             <li>
               <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/watched"> <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="20" width="20" viewBox="0 0 24 24">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <path d="M1.373,13.183a2.064,2.064,0,0,1,0-2.366C2.946,8.59,6.819,4,12,4s9.054,4.59,10.627,6.817a2.064,2.064,0,0,1,0,2.366C21.054,15.41,17.181,20,12,20S2.946,15.41,1.373,13.183Z"></path>
-                    <circle cx="12" cy="12" r="4" stroke="#6b7280"></circle>
-                  </g>
-                </svg>
+                {{ outputs_svg| safe }}
                 </span><span>Watched Outputs</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_watched_outputs }}</span></a>
             </li>
             {% 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="/automation"> <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="20" width="20" viewBox="0 0 24 24">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                    <line data-cap="butt" x1="5" y1="1" x2="5" y2="6" stroke="#6b7280"></line>
-                    <line x1="3" y1="1" x2="7" y2="1" stroke="#6b7280"> </line>
-                    <line data-cap="butt" x1="19" y1="1" x2="19" y2="6" stroke="#6b7280"></line>
-                    <line x1="17" y1="1" x2="21" y2="1" stroke="#6b7280"></line>
-                    <rect x="6" y="15" width="12" height="4" stroke="#6b7280"></rect>
-                    <line data-cap="butt" x1="10" y1="19" x2="10" y2="15" stroke="#6b7280"></line>
-                    <line data-cap="butt" x1="14" y1="19" x2="14" y2="15" stroke="#6b7280"></line>
-                    <line x1="6" y1="11" x2="8" y2="11" stroke="#6b7280"></line>
-                    <line x1="16" y1="11" x2="18" y2="11" stroke="#6b7280"> </line>
-                    <polygon points="23 6 5 6 1 6 1 23 23 23 23 6"></polygon>
-                  </g>
-                </svg>
+              {{ automation_svg | safe }}
                 </span><span>Automation Strategies</span></a>
             </li>
             {% endif %}
             {% if use_tor_proxy == true %}
             <li>
               <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="/tor"> <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="20" width="20" viewBox="0 0 24 24">
-                  <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#AA70E4" 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="#AA70E4"></path>
-                    <path d="M15,18.8A6.455,6.455,0,0,0,17,14a6.455,6.455,0,0,0-2-4.8" stroke="#AA70E4"></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>
+              {{ tor_svg | safe }} <!-- change color -->
               </span><span>Tor</span></a>
             </li>
           {% endif %}
         </ul>
           <div class="pt-8 text-sm font-medium">
             <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/shutdown/{{ shutdown_token }}"> <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="20" width="20" viewBox="0 0 24 24">
-                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
-                  <line data-cap="butt" x1="11" y1="10" x2="22" y2="10" stroke="#6b7280"></line>
-                  <polyline points="18 6 22 10 18 14" stroke="#6b7280"></polyline>
-                  <polyline data-cap="butt" points="13 13 13 17 8 17"></polyline>
-                  <polyline data-cap="butt" points="1 2 8 7.016 8 22 1 17 1 2 13 2 13 7"></polyline>
-                </g>
-              </svg>
+              {{ shutdown_svg | safe }}
               </span><span>Shutdown</span></a>
           </div>
         </div>
       </nav>
     </div>
-    <!-- mobile sidebar -->
+  <!-- mobile sidebar -->
+
   </section>
   {% if ws_url %}
   <script>
@@ -757,15 +528,16 @@
       let json = JSON.parse(event.data);
       let event_message = 'Unknown event';
       if (json['event'] == 'new_offer') {
-        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">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>';
+        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">
+        {{ notifications_network_offer_svg | safe }}</div><div class="uppercase w-40 ml-3 text-sm font-semibold text-gray-900">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>{{ notifications_close_svg | safe }}</button></div></div>';
       }
       else
       if (json['event'] == 'new_bid') {
-        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>';
+        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">{{ notifications_new_bid_on_offer_svg | safe }}<</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">{{ notifications_close_svg | safe }}</button></div></div>';
       }
       else
       if (json['event'] == 'bid_accepted') {
-        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 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"><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>';
+        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">{{ notifications_bid_accepted_svg | safe }}<</div><div class="uppercase w-40 ml-3 text-sm font-semibold text-gray-900"><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>{{ notifications_close_svg | safe }}</button></div></div>';
       }
       let messages = document.getElementById('ul_updates'),
         message = document.createElement('li');
diff --git a/basicswap/templates/offers.html b/basicswap/templates/offers.html
index 23046db..3a683eb 100644
--- a/basicswap/templates/offers.html
+++ b/basicswap/templates/offers.html
@@ -8,7 +8,7 @@
         <ul class="flex flex-wrap items-center gap-x-3 mb-2">
           <li><a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">Home</a></li>
           <li>{{ breadcrumb_line_svg | safe }}</li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/wallets">{{ page_type }}</a></li>
+          <li><a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="{% if page_type == 'offers' %} offers {% elif page_type == 'sentoffers' %} sentoffers {% endif %}">{{ page_type }}</a></li>
           <li>{{ breadcrumb_line_svg | safe }}</li>
         </ul>
       </div>
@@ -45,9 +45,9 @@
             <div class="container mt-5 mx-auto relative">
               <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl container-to-blur">
                 <div class="px-6">
-                  <div class="w-full mt-6 pb-6 overflow-x-auto">
+                  <div class="w-full mt-6 overflow-x-auto">
                     <div class="chart-container" style="max-width: 100%;">
-                      <canvas id="coin-chart" style="height: 280px;"></canvas>
+                      <canvas id="coin-chart" style="height: 275px;"></canvas>
                     </div>
                   </div>
                 </div>
@@ -65,264 +65,304 @@
     </div>
   </section>
 
-<section class="py-4 overflow-hidden container-to-blur">
-  <div class="container px-4 mx-auto">
-    <div class="flex flex-wrap -m-3">
+  <section class="py-4 overflow-hidden container-to-blur">
+    <div class="container px-4 mx-auto">
+      <div class="flex flex-wrap -m-3">
 
-      <div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="btc-container">
-        <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white active-container" id="btc-active">
-          <div class="flex items-center mb-2.5">
-            <img src="/static/images/coins/Bitcoin-20.png" height="20" width="20" class="mr-2">
-            <p class="text-sm text-neutral-500 font-medium">Bitcoin (BTC)</p>
+        <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="btc-container">
+            <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white active-container" id="btc-active">
+              <div class="flex items-center">
+                  <img src="/static/images/coins/Bitcoin.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Bitcoin">
+                  <p class="ml-2 text-black text-sm dark:text-white">
+                      Bitcoin (BTC)
+                  </p>
+              </div>
+              <div class="flex flex-col justify-start">
+                  <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="btc-price-usd">
+                      <span class="text-sm">
+                          <span id="btc-price-usd-value"></span>
+                  </p>
+                  <div class="flex items-center text-sm">
+                      <div class="w-auto">
+                        <div id="btc-price-change-container" class="w-auto p-1"></div>
+                      </div>
+                  </div>
+                  <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+                    <span class="bold mr-2">VOL:</span>
+                      <div id="btc-volume-24h">
+                      </div>
+                  </div>
+              </div>
           </div>
-          <div class="flex flex-wrap items-center mb-2 -m-1">
-            <div class="w-auto p-1">
-              <h3 class="font-heading text-1xl font-semibold">
-                <div id="btc-price-usd"></div>
-              </h3>
-            </div>
-            <div class="w-auto p-1">
-              <div id="btc-price-change-container" class="w-auto p-1"></div>
-            </div>
-            <div class="w-auto p-1">
-              <h3 class="font-heading text-1xl font-semibold">
-                <div id="btc-price-btc"></div>
-              </h3>
-            </div>
           </div>
-          <p class="text-2xs text-neutral-400 font-medium">
-            Volume 24H:
-            <div class="text-xs" id="btc-volume-24h"></div>
+
+      <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="xmr-container">
+        <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white price-container">
+      <div class="flex items-center">
+          <img src="/static/images/coins/Monero.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Monero">
+          <p class="ml-2 text-black text-sm dark:text-white">
+              Monero (XMR)
           </p>
-          <p class="text-2xs text-neutral-400 font-medium hidden">
-            Price in BTC:
-            <div class="text-xs" id="usd-price-btc"></div>
+      </div>
+      <div class="flex flex-col justify-start">
+          <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="xmr-price-usd">
+              <span class="text-sm">
+                  <span id="xmr-price-usd-value"></span>
           </p>
-        </div>
+          <div class="flex items-center text-sm">
+              <div class="w-auto">
+                <div id="xmr-price-change-container" class="w-auto p-1"></div>
+              </div>
+          </div>
+          <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+            <span class="bold mr-2">VOL:</span>
+              <div id="xmr-volume-24h">
+              </div>
+          </div>
+          <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+              <span class="bold mr-2">BTC:</span>
+              <span id="xmr-price-btc">
+              </span>
+          </div>
       </div>
+  </div>
+  </div>
 
-      <div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="xmr-container">
-        <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white">
-          <div class="flex items-center mb-2.5">
-            <img src="/static/images/coins/Monero-20.png" height="20" width="20" class="mr-2">
-            <p class="text-sm text-neutral-500 font-medium">Monero (BTC)</p>
-          </div>
-          <div class="flex flex-wrap items-center mb-2 -m-1">
-            <div class="w-auto p-1">
-              <h3 class="font-heading text-1xl font-semibold">
-                <div id="xmr-price-usd"></div>
-              </h3>
+  <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="part-container">
+    <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
+        <div class="flex items-center">
+            <img src="/static/images/coins/Particl.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Particl">
+            <p class="ml-2 text-black text-md dark:text-white">
+                Particl (PART)
+            </p>
+        </div>
+        <div class="flex flex-col justify-start">
+            <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="part-price-usd">
+                <span class="text-sm">
+                    $ <span id="part-price-usd-value"></span>
+                </span>
+            </p>
+            <div class="flex items-center text-sm">
+                <div class="w-auto">
+                  <div id="part-price-change-container" class="w-auto p-1"></div>
+                </div>
             </div>
-            <div class="w-auto p-1">
-              <div id="xmr-price-change-container" class="w-auto p-1"></div>
+            <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+              <span class="bold mr-2">VOL:</span>
+                <div id="part-volume-24h">
+                </div>
             </div>
-            <div class="w-auto p-1">
-              <h3 class="font-heading text-1xl font-semibold">
-                <div id="xmr-price-usd"></div>
-              </h3>
+            <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+                <span class="bold mr-2">BTC:</span>
+                <span id="part-price-btc">
+                </span>
             </div>
-          </div>
-          <p class="text-2xs text-neutral-400 font-medium">
-            Volume 24H:
-            <div class="text-xs" id="xmr-volume-24h"></div>
-          </p>
-          <p class="text-2xs text-neutral-400 font-medium">
-            Price in BTC:
-            <div class="text-xs" id="xmr-price-btc"></div>
-          </p>
         </div>
-      </div>
+    </div>
+</div>
 
-      <div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="part-container">
-        <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white">
-          <div class="flex items-center mb-2.5">
-            <img src="/static/images/coins/Particl-20.png" height="20" width="20" class="mr-2">
-            <p class="text-sm text-neutral-500 font-medium">Particl (PART)</p>
-          </div>
-          <div class="flex flex-wrap items-center mb-2 -m-1">
-            <div class="w-auto p-1">
-              <h3 class="font-heading text-1xl font-semibold">
-                <div id="part-price-usd"></div>
-              </h3>
-            </div>
-            <div class="w-auto p-1">
-              <div id="part-price-change-container" class="w-auto p-1"></div>
-            </div>
-          </div>
-          <p class="text-2xs text-neutral-400 font-medium">
-            Volume 24H:
-            <div class="text-xs" id="part-volume-24h"></div>
-          </p>
-          <p class="text-2xs text-neutral-400 font-medium">
-            Price in BTC:
-            <div class="text-xs" id="part-price-btc"></div>
+<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="ltc-container">
+  <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
+      <div class="flex items-center">
+          <img src="/static/images/coins/Litecoin.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Litecoin">
+          <p class="ml-2 text-black text-md dark:text-white">
+              Litecoin (LTC)
           </p>
-        </div>
       </div>
-
-      <div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="pivx-container">
-        <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white">
-          <div class="flex items-center mb-2.5">
-            <img src="/static/images/coins/PIVX-20.png" height="20" width="20" class="mr-2">
-            <p class="text-sm text-neutral-500 font-medium">PIVX (PIVX)</p>
+      <div class="flex flex-col justify-start">
+          <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="ltc-price-usd">
+              <span class="text-sm">
+                  <span id="ltc-price-usd-value"></span>
+              </span>
+          </p>
+          <div class="flex items-center text-sm">
+              <div class="w-auto">
+                <div id="ltc-price-change-container" class="w-auto p-1"></div>
+              </div>
           </div>
-          <div class="flex flex-wrap items-center mb-2 -m-1">
-            <div class="w-auto p-1">
-              <h3 class="font-heading text-1xl font-semibold">
-                <div id="pivx-price-usd"></div>
-              </h3>
-            </div>
-            <div class="w-auto p-1">
-              <div id="pivx-price-change-container" class="w-auto p-1"></div>
-            </div>
+          <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+            <span class="bold mr-2">VOL:</span>
+              <div id="ltc-volume-24h">
+              </div>
+          </div>
+          <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+              <span class="bold mr-2">BTC:</span>
+              <span id="ltc-price-btc">
+              </span>
           </div>
-          <p class="text-2xs text-neutral-400 font-medium">
-            Volume 24H:
-            <div class="text-xs" id="pivx-volume-24h"></div>
-          </p>
-          <p class="text-2xs text-neutral-400 font-medium">
-            Price in BTC:
-            <div class="text-xs" id="pivx-price-btc"></div>
-          </p>
-        </div>
       </div>
+  </div>
+  </div>
 
-      <div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="firo-container">
-        <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white">
-          <div class="flex items-center mb-2.5">
-            <img src="/static/images/coins/Firo-20.png" height="20" width="20" class="mr-2">
-            <p class="text-sm text-neutral-500 font-medium">Firo (FIRO)</p>
-          </div>
-          <div class="flex flex-wrap items-center mb-2 -m-1">
-            <div class="w-auto p-1">
-              <h3 class="font-heading text-1xl font-semibold">
-                <div id="firo-price-usd"></div>
-              </h3>
-            </div>
-            <div class="w-auto p-1">
+  <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="firo-container">
+    <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
+            <div class="flex items-center">
+        <img src="/static/images/coins/Firo.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Firo">
+        <p class="ml-2 text-black text-md dark:text-white">
+            Firo (FIRO)
+        </p>
+    </div>
+    <div class="flex flex-col justify-start">
+        <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="firo-price-usd">
+            <span class="text-sm">
+                <span id="firo-price-usd-value"></span>
+            </span>
+        </p>
+        <div class="flex items-center text-sm">
+            <div class="w-auto">
               <div id="firo-price-change-container" class="w-auto p-1"></div>
             </div>
-          </div>
-          <p class="text-2xs text-neutral-400 font-medium">
-            Volume 24H:
-            <div class="text-xs" id="firo-volume-24h"></div>
-          </p>
-          <p class="text-2xs text-neutral-400 font-medium">
-            Price in BTC:
-            <div class="text-xs" id="firo-price-btc"></div>
-          </p>
         </div>
-      </div>
+        <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+          <span class="bold mr-2">VOL:</span>
+            <div id="firo-volume-24h">
+            </div>
+        </div>
+        <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+            <span class="bold mr-2">BTC:</span>
+            <span id="firo-price-btc">
+            </span>
+        </div>
+    </div>
+</div>
+</div>
 
-      <div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="ltc-container">
-        <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white">
-          <div class="flex items-center mb-2.5">
-            <img src="/static/images/coins/Litecoin-20.png" height="20" width="20" class="mr-2">
-            <p class="text-sm text-neutral-500 font-medium">Litecoin (LTC)</p>
+<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="pivx-container">
+  <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
+  <div class="flex items-center">
+      <img src="/static/images/coins/Pivx.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Pivx">
+      <p class="ml-2 text-black text-md dark:text-white">
+          PIVX (PIVX)
+      </p>
+  </div>
+  <div class="flex flex-col justify-start">
+      <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="pivx-price-usd">
+          <span class="text-sm">
+              <span id="pivx-price-usd-value"></span>
+          </span>
+      </p>
+      <div class="flex items-center text-sm">
+          <div class="w-auto">
+            <div id="pivx-price-change-container" class="w-auto p-1"></div>
           </div>
-          <div class="flex flex-wrap items-center mb-2 -m-1">
-            <div class="w-auto p-1">
-              <h3 class="font-heading text-1xl font-semibold">
-                <div id="ltc-price-usd"></div>
-              </h3>
-            </div>
-            <div class="w-auto p-1">
-              <div id="ltc-price-change-container" class="w-auto p-1"></div>
-            </div>
+      </div>
+      <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+        <span class="bold mr-2">VOL:</span>
+          <div id="pivx-volume-24h">
           </div>
-          <p class="text-2xs text-neutral-400 font-medium">
-            Volume 24H:
-            <div class="text-xs" id="ltc-volume-24h"></div>
-          </p>
-          <p class="text-2xs text-neutral-400 font-medium">
-            Price in BTC:
-            <div class="text-xs" id="ltc-price-btc"></div>
-          </p>
-        </div>
       </div>
+      <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+          <span class="bold mr-2">BTC:</span>
+          <span id="pivx-price-btc">
+          </span>
+      </div>
+  </div>
+</div>
+</div>
 
-       <div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="dash-container">
-        <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white">
-          <div class="flex items-center mb-2.5">
-            <img src="/static/images/coins/Dash-20.png" height="20" width="20" class="mr-2">
-            <p class="text-sm text-neutral-500 font-medium">Dash (DASH)</p>
+<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="dash-container">
+  <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
+  <div class="flex items-center">
+      <img src="/static/images/coins/Dash.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Dash">
+      <p class="ml-2 text-black text-md dark:text-white">
+          Dash (DASH)
+      </p>
+  </div>
+  <div class="flex flex-col justify-start">
+      <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="dash-price-usd">
+          <span class="text-sm">
+              <span id="dash-price-usd-value"></span>
+          </span>
+      </p>
+      <div class="flex items-center text-sm">
+          <div class="w-auto">
+            <div id="dash-price-change-container" class="w-auto p-1"></div>
           </div>
-          <div class="flex flex-wrap items-center mb-2 -m-1">
-            <div class="w-auto p-1">
-              <h3 class="font-heading text-1xl font-semibold">
-                <div id="dash-price-usd"></div>
-              </h3>
-            </div>
-            <div class="w-auto p-1">
-              <div id="dash-price-change-container" class="w-auto p-1"></div>
-            </div>
+      </div>
+      <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+        <span class="bold mr-2">VOL:</span>
+          <div id="dash-volume-24h">
           </div>
-          <p class="text-2xs text-neutral-400 font-medium">
-            Volume 24H:
-            <div class="text-xs" id="dash-volume-24h"></div>
-          </p>
-          <p class="text-2xs text-neutral-400 font-medium">
-            Price in BTC:
-            <div class="text-xs" id="dash-price-btc"></div>
-          </p>
-        </div>
       </div>
+      <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+          <span class="bold mr-2">BTC:</span>
+          <span id="dash-price-btc">
+          </span>
+      </div>
+  </div>
+</div>
+</div>
 
-      <div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="doge-container">
-        <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white">
-          <div class="flex items-center mb-2.5">
-            <img src="/static/images/coins/Doge-20.png" height="20" width="20" class="mr-2">
-            <p class="text-sm text-neutral-500 font-medium">Dogecoin (DOGE)</p>
+<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="eth-container">
+  <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
+  <div class="flex items-center">
+      <img src="/static/images/coins/Ethereum.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Ethereum">
+      <p class="ml-2 text-black text-md dark:text-white">
+          Ethereum (ETH)
+      </p>
+  </div>
+  <div class="flex flex-col justify-start">
+      <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="eth-price-usd">
+          <span class="text-sm">
+              <span id="eth-price-usd-value"></span>
+          </span>
+      </p>
+      <div class="flex items-center text-sm">
+          <div class="w-auto">
+            <div id="eth-price-change-container" class="w-auto p-1"></div>
           </div>
-          <div class="flex flex-wrap items-center mb-2 -m-1">
-            <div class="w-auto p-1">
-              <h3 class="font-heading text-1xl font-semibold">
-                <div id="doge-price-usd"></div>
-              </h3>
-            </div>
-            <div class="w-auto p-1">
-              <div id="doge-price-change-container" class="w-auto p-1"></div>
-            </div>
+      </div>
+      <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+        <span class="bold mr-2">VOL:</span>
+          <div id="eth-volume-24h">
           </div>
-          <p class="text-2xs text-neutral-400 font-medium">
-            Volume 24H:
-            <div class="text-xs" id="doge-volume-24h"></div>
-          </p>
-          <p class="text-2xs text-neutral-400 font-medium">
-            Price in BTC:
-            <div class="text-xs" id="doge-price-btc"></div>
-          </p>
-        </div>
       </div>
+      <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+          <span class="bold mr-2">BTC:</span>
+          <span id="eth-price-btc">
+          </span>
+      </div>
+  </div>
+</div>
+</div>
 
-       <div class="w-full sm:w-1/2 lg:w-1/5 p-3" id="eth-container">
-        <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white">
-          <div class="flex items-center mb-2.5">
-            <img src="/static/images/coins/Ethereum-20.png" height="20" width="20" class="mr-2">
-            <p class="text-sm text-neutral-500 font-medium">Ethereum (ETH)</p>
+<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="doge-container">
+  <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
+  <div class="flex items-center">
+      <img src="/static/images/coins/Doge.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Dogecoin">
+      <p class="ml-2 text-black text-md dark:text-white">
+          Dogecoin (DOGE)
+      </p>
+  </div>
+  <div class="flex flex-col justify-start">
+      <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="doge-price-usd">
+          <span class="text-sm">
+              <span id="doge-price-usd-value"></span>
+          </span>
+      </p>
+      <div class="flex items-center text-sm">
+          <div class="w-auto">
+            <div id="doge-price-change-container" class="w-auto p-1"></div>
           </div>
-          <div class="flex flex-wrap items-center mb-2 -m-1">
-            <div class="w-auto p-1">
-              <h3 class="font-heading text-1xl font-semibold">
-                <div id="eth-price-usd"></div>
-              </h3>
-            </div>
-            <div class="w-auto p-1">
-              <div id="eth-price-change-container" class="w-auto p-1"></div>
-            </div>
+      </div>
+      <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+        <span class="bold mr-2">VOL:</span>
+          <div id="doge-volume-24h">
           </div>
-          <p class="text-2xs text-neutral-400 font-medium">
-            Volume 24H:
-            <div class="text-xs" id="eth-volume-24h"></div>
-          </p>
-          <p class="text-2xs text-neutral-400 font-medium">
-            Price in BTC:
-            <div class="text-xs" id="eth-price-btc"></div>
-          </p>
-        </div>
       </div>
+      <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
+          <span class="bold mr-2">BTC:</span>
+          <span id="doge-price-btc">
+          </span>
+      </div>
+  </div>
+</div>
+</div>
 
-  </section>
+</div>
+</div>
+
+</section>
   <script>
     window.addEventListener('load', function() {
     const api_key = '{{chart_api_key}}';
@@ -351,7 +391,7 @@ function displayCoinData(coin, data) {
     const priceBTC = data.RAW[coin].BTC.PRICE;
     const priceChange1h = data.RAW[coin].USD.CHANGEPCTHOUR;
     const volume24h = data.RAW[coin].USD.TOTALVOLUME24HTO;
-    document.querySelector(`#${coin.toLowerCase()}-price-usd`).textContent = priceUSD.toFixed(2) + ' USD';
+    document.querySelector(`#${coin.toLowerCase()}-price-usd`).textContent = priceUSD.toFixed(2) + ' $';
     if (coin !== 'BTC') {
         document.querySelector(`#${coin.toLowerCase()}-price-btc`).textContent = priceBTC.toFixed(8) + ' BTC';
     }
@@ -712,24 +752,20 @@ const chart = new Chart(ctx, {
                   </div>
                 </div>
               </div>
+
               <div class="container mt-5 mx-auto">
                 <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
                   <div class="px-6">
                     <div class="w-full mt-6 pb-6 overflow-x-auto">
-                      <table class="w-full min-w-max">
+                      <table id="myTable" class="w-full min-w-max">
 
                         <thead class="uppercase">
-                          <tr class="text-left">
+                          <tr class="text-center">
                             <th class="p-0">
                               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
                                 <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Date/Time at</span>
                               </div>
                             </th>
-                            <th class="p-0">
-                              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
-                                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
-                              </div>
-                            </th>
                             <th class="p-0">
                               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
                                 <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Recipient</span>
@@ -762,36 +798,34 @@ const chart = new Chart(ctx, {
 
                         <tbody>
                           {% for o in offers %}
-                          <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+                          <tr class="text-center opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600 main-row"">
 
                             <!-- TIME + ACTIVE -->
-                            <td class="flex items-center py-7 px-46 dark:text-white text-gray-900 whitespace-nowrap" title="{% if o[12]==2 %}Revoked{% elif o[11]==true %}Expired{% else %}Active{% endif %}">
-                              <svg alt="" 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">
+                            <td class="flex py-3 px-6 dark:text-white text-gray-900" title="Time">
+                            <svg alt="" class="w-5 h-5 rounded-full mt-5 ml-5 mr-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="{% if o[12]==2 %}#AC0000{% elif o[11]==true %}#6b7280{% else %}#3B82F6{% endif %}" stroke-linejoin="round">
                                   <circle cx="12" cy="12" r="11"></circle>
                                   <polyline points=" 12,6 12,12 18,12 " stroke="{% if o[12]==2 %} #AC0000 {% elif o[11]==true %} #6b7280 {% else %} #3B82F6 {% endif %}"></polyline>
                                 </g>
                               </svg>
-                              <div class="pl-3">
-                                <div class="{% if o[11]==true or o[12]==2 %} dark:text-white {% else %} font-semibold {% endif %} text-xs">{{ o[0] }}</div>
+                              <div class="py-3 px-6 text-xs text-left" data-tooltip-target="tooltip-active" >
+                                  <div class="{% if o[11]==true or o[12]==2 %} dark:text-white {% else %} {% endif %} text-xs"><span class="bold">Posted:</span> {{ o[0] }} ago</div>
+                                  <div class="{% if o[11]==true or o[12]==2 %} dark:text-white {% else %} {% endif %} text-xs"><span class="bold">Expires in:</span> {{ o[13] }}</div>
                               </div>
                             </td>
+
+                            <div id="tooltip-active" 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">
+                              <div class="active-revoked-expired"><span class="bold">{% if o[12]==2 %}Revoked{% elif o[11]==true %}Expired{% else %}Active{% endif %}</div>
+                            <div class="tooltip-arrow" data-popper-arrow></div>
+                            </div>
+
                             <!-- TIME + ACTIVE -->
 
                             <!--<td class="py-4 px-6 text-xs"><a class="monospace text-xs" href=/offer/{{ o[1] }}>{{ o[1]|truncate(6, True) }}</a></td>-->
                             <!--<td class="py-4 px-6 text-xs monospace">{{ o[8] }}{% if o[9]==true %} <b>Sent</b>{% endif %}</td>-->
 
-                            <!-- DETAILS -->
-                            <td class="py-3 px-6 text-xs">
-                              <div class="network"><span class="bold">Network:</span> {{ o[7] }}</div>
-                              <div class="partial pt-1"><span class="bold">Amount Variable:</span>{{ o[14] }}</div>
-                              <div class="swaptype pt-1"><span class="bold">Swap Type:</span> {{ o[13] }}</div>
-                            <!-- {% if o[12]==2 %}(Revoked){% elif o[11]==true %}(Not Active){% else %}(Active){% endif %} -->
-                            </td>
-                            <!-- DETAILS -->
-
                             <!-- RECIPIENT -->
-                            <td class="py-3 px-6 text-xs monospace">
+                            <td class="py-3 text-xs monospace">
                               <a href="/identity/{{ o[8] }}{% if o[9]==true %}{% endif %}">{{ o[8] }}</a>
                             </td>
                             <!-- RECIPIENT -->
@@ -800,12 +834,13 @@ const chart = new Chart(ctx, {
                             {% if o[9] == true %}
                             <td class="py-3 px-6 text-xs">
                               <div class="flex items-center">
-                                <span class="inline-flex align-middle items-center justify-center w-9 h-10 rounded"><img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt=""></span>
+                                <span class="inline-flex align-middle items-center justify-center w-9 h-10 rounded"><img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt="{{ o[3] }}"></span>
                                 <div class="flex flex-col ml-2">
                                   <div class="coinname-value bold" data-coinname="{{ o[3] }}">
                                     {{ o[5]|truncate(8, true, '', 0) }} {{ o[3] }}
                                   </div>
                                   <div class="usd-value"></div>
+                                  <div class="coin-coin">{{ o[3] }}/{{ o[2] }}</div>
                                 </div>
                               </div>
                             </td>
@@ -815,12 +850,14 @@ const chart = new Chart(ctx, {
                             {% else %}
                             <td class="py-3 px-6 text-xs">
                               <div class="flex items-center">
-                                <span class="inline-flex align-middle items-center justify-center w-9 h-10 rounded"><img class="h-7" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt=""></span>
+                                <span class="inline-flex align-middle items-center justify-center w-9 h-10 rounded"><img class="h-7" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt="{{ o[2] }}"></span>
                                 <div class="flex flex-col ml-2">
                                   <div class="coinname-value bold" data-coinname="{{ o[2] }}">
                                     {{ o[4]|truncate(8, true, '', 0) }} {{ o[2] }}
                                   </div>
+
                                   <div class="usd-value"></div>
+                                  <div class="coin-coin">{{ o[2] }}/{{ o[3] }}</div>
                                 </div>
                               </div>
                             </td>
@@ -832,12 +869,13 @@ const chart = new Chart(ctx, {
                             {% if o[9] == true %}
                             <td class="py-3 px-6 text-xs">
                               <div class="flex items-center">
-                                <span class="inline-flex align-middle items-center justify-center w-9 h-10 rounded"><img class="h-7" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt=""></span>
+                                <span class="inline-flex align-middle items-center justify-center w-9 h-10 rounded"><img class="h-7" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt="{{ o[2] }}"></span>
                                 <div class="flex flex-col ml-2">
                                   <div class="coinname-value bold" data-coinname="{{ o[2] }}">
                                     {{ o[4]|truncate(8,true,'',0) }} {{ o[2] }}
                                   </div>
                                   <div class="usd-value"></div>
+                                    <div class="coin-coin">{{ o[2] }}/{{ o[3] }}</div>
                                 </div>
                               </div>
                             </td>
@@ -847,14 +885,13 @@ const chart = new Chart(ctx, {
                             {% else %}
                             <td class="py-3 px-6 text-xs">
                               <div class="flex items-center">
-                                <span class="inline-flex align-middle items-center justify-center w-9 h-10 rounded"><img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt=""></span>
+                                <span class="inline-flex align-middle items-center justify-center w-9 h-10 rounded"><img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt="{{ o[3] }}"></span>
                                 <div class="flex flex-col ml-2">
-
-                                  <!-- Added ml-2 for left margin -->
                                   <div class="coinname-value bold" data-coinname="{{ o[3] }}">
                                     {{ o[5]|truncate(8, true, '', 0) }} {{ o[3] }}
                                   </div>
                                   <div class="usd-value"></div>
+                                    <div class="coin-coin">{{ o[3] }}/{{ o[2] }}</div>
                                 </div>
                               </div>
                             </td>
@@ -863,9 +900,9 @@ const chart = new Chart(ctx, {
 
                             <!-- RATE -->
                             <td class="py-3 px-6 text-xs">
-                              <div class="coinname-value" data-coinname="{{ o[3] }}">{{ o[6]|truncate(8,true,'',0) }}</div>
-                              <div class="usd-value"></div>
-                              <div class="profit-value hidden"></div>
+                              <div class="coinname-value hidden" data-coinname="{{ o[3] }}">{{ o[6]|truncate(8,true,'',0) }}</div>
+                              <div class="usd-value hidden"></div>
+                              <div class="profit-value hidden "></div>
                               <div class="profit-loss"></div>
                             </td>
                             <!-- RATE -->
@@ -874,45 +911,57 @@ const chart = new Chart(ctx, {
 
                             <!-- SWAP OR EDIT -->
                             <td class="py-3 px-6">
-                              <a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md
+                              <a data-tooltip-target="tooltip-swaps" class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md
                               {% if o[9]==true %}  bg-blue-500 text-white border hover:bg-blue-600 dark:border-gray-700 bg-gray-700 transition duration-200
                                {% else %} bg-blue-500 text-white hover:bg-blue-600 transition duration-200 {% endif %}" href="/offer/{{ o[1] }}">{% if o[9]==true %} Edit {% else %} Swap {% endif %}</a>
                             </td>
-                            <!-- SWAP OR EDIT -->
 
+                            <div id="tooltip-swaps hidden" 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">
+                              <div class="network"><span class="bold">Network:</span> {{ o[7] }}</div>
+                              <div class="swaptype pt-1"><span class="bold">Swap Type:</span> {{ o[14] }}</div><!-- fix - not showing the correct swap type -->
+                              <div class="partial pt-1"><span class="bold">Amount Variable:</span> {{ o[15] }}</div>
+                            <!-- todo <div class="partial pt-1"><span class="bold">Auto Accept/;</span> Yes</div> -->
+                            <div class="tooltip-arrow" data-popper-arrow></div>
+                            </div>
+                            <!-- SWAP OR EDIT -->
                           </tr>
+
                         </tbody>
                         {% endfor %}
                       </table>
+
                       <input type="hidden" name="formid" value="{{ form_id }}">
                       <input type="hidden" name="pageno" value="{{ filters.page_no }}">
                     </div>
                   </div>
-
                   <div class="rounded-b-md">
-                    <div class="w-full md:w-0/12">
-                      <div class="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-100 dark:border-gray-400">
-                        <div class="w-full md:w-auto p-1.5">
-                          <button type="submit" name='pageback' value="Page Back" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
-                            {{ page_back_svg | safe }}
-                            <span>Page Back</span>
-                          </button>
-                        </div>
-                        <div class="flex items-center">
-                          <div class="w-full md:w-auto p-1.5">
-                            <p class="text-sm font-heading dark:text-white">Page: {{ filters.page_no }}</p>
+                      <div class="w-full md:w-0/12">
+                          <div class="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-100 dark:border-gray-400">
+                              {% if filters.page_no > 1 %}
+                              <div class="w-full md:w-auto p-1.5">
+                                  <button type="submit" name='pageback' value="Previous" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+                                      {{ page_back_svg | safe }}
+                                      <span>Previous</span>
+                                  </button>
+                              </div>
+                              {% endif %}
+                              <div class="flex items-center">
+                                  <div class="w-full md:w-auto p-1.5">
+                                      <p class="text-sm font-heading dark:text-white">Page: {{ filters.page_no }}</p>
+                                  </div>
+                              </div>
+                              {% if offers_count > 10 %}
+                              <div class="w-full md:w-auto p-1.5">
+                                      <button type="submit" name='pageforwards' value="Next" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+                                          <span>Next</span>
+                                          {{ page_forwards_svg | safe }}
+                                      </button>
+                              </div>
+                              {% endif %}
                           </div>
-                        </div>
-                        <div class="w-full md:w-auto p-1.5">
-                          <button type="submit" name='pageforwards' value="Page Forwards" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
-                            <span>Page Forwards</span>
-                            {{ page_forwards_svg | safe }}
-                          </button>
-                        </div>
                       </div>
-                    </div>
                   </div>
-
+                  </div>
             </form>
           </div>
         </div>
@@ -1024,7 +1073,6 @@ function updateProfitLoss(row) {
   }
 }
 
-
   function updateProfitValue(row) {
     const sellingUSD = parseFloat(row.querySelector('.usd-value').textContent);
     const profitValueCell = row.querySelector('.profit-value');
@@ -1045,7 +1093,6 @@ function updateProfitLoss(row) {
 
       if (!isRate) {
         coinNameValues[i].addEventListener('input', () => {
-          // Clear the cache when the user inputs a new value
           console.log(`Clearing cache for ${coinNameToSymbol[coinFullName]}`);
           exchangeRateCache[coinNameToSymbol[coinFullName]] = undefined;
           updateUsdValue(coinNameValues[i], coinFullName);
diff --git a/basicswap/templates/style.html b/basicswap/templates/style.html
index 8627a35..204fc8c 100644
--- a/basicswap/templates/style.html
+++ b/basicswap/templates/style.html
@@ -1,118 +1,444 @@
-{% set select_box_arrow_svg = '<svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
-</svg>' %}
-
-{% set circular_arrows_svg = '<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" class="nc-icon-wrapper">
-        <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.442C16.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.442C7.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>' %}
-
-{% set circular_error_svg = '<svg class="relative top-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M10.4733 5.52667C10.4114 5.46419 10.3376 5.41459 10.2564 5.38075C10.1751 5.3469 10.088 5.32947 9.99999 5.32947C9.91198 5.32947 9.82485 5.3469 9.74361 5.38075C9.66237 5.41459 9.58863 5.46419 9.52666 5.52667L7.99999 7.06001L6.47333 5.52667C6.34779 5.40114 6.17753 5.33061 5.99999 5.33061C5.82246 5.33061 5.65219 5.40114 5.52666 5.52667C5.40112 5.65221 5.3306 5.82247 5.3306 6.00001C5.3306 6.17754 5.40112 6.3478 5.52666 6.47334L7.05999 8.00001L5.52666 9.52667C5.46417 9.58865 5.41458 9.66238 5.38073 9.74362C5.34689 9.82486 5.32946 9.912 5.32946 10C5.32946 10.088 5.34689 10.1752 5.38073 10.2564C5.41458 10.3376 5.46417 10.4114 5.52666 10.4733C5.58863 10.5358 5.66237 10.5854 5.74361 10.6193C5.82485 10.6531 5.91198 10.6705 5.99999 10.6705C6.088 10.6705 6.17514 10.6531 6.25638 10.6193C6.33762 10.5854 6.41135 10.5358 6.47333 10.4733L7.99999 8.94001L9.52666 10.4733C9.58863 10.5358 9.66237 10.5854 9.74361 10.6193C9.82485 10.6531 9.91198 10.6705 9.99999 10.6705C10.088 10.6705 10.1751 10.6531 10.2564 10.6193C10.3376 10.5854 10.4114 10.5358 10.4733 10.4733C10.5358 10.4114 10.5854 10.3376 10.6193 10.2564C10.6531 10.1752 10.6705 10.088 10.6705 10C10.6705 9.912 10.6531 9.82486 10.6193 9.74362C10.5854 9.66238 10.5358 9.58865 10.4733 9.52667L8.93999 8.00001L10.4733 6.47334C10.5358 6.41137 10.5854 6.33763 10.6193 6.25639C10.6531 6.17515 10.6705 6.08802 10.6705 6.00001C10.6705 5.912 10.6531 5.82486 10.6193 5.74362C10.5854 5.66238 10.5358 5.58865 10.4733 5.52667ZM12.7133 3.28667C12.0983 2.64994 11.3627 2.14206 10.5494 1.79266C9.736 1.44327 8.8612 1.25936 7.976 1.25167C7.0908 1.24398 6.21294 1.41266 5.39363 1.74786C4.57432 2.08307 3.82998 2.57809 3.20403 3.20404C2.57807 3.82999 2.08305 4.57434 1.74785 5.39365C1.41264 6.21296 1.24396 7.09082 1.25166 7.97602C1.25935 8.86121 1.44326 9.73601 1.79265 10.5494C2.14204 11.3627 2.64992 12.0984 3.28666 12.7133C3.90164 13.3501 4.63727 13.858 5.45063 14.2074C6.26399 14.5567 7.13879 14.7407 8.02398 14.7483C8.90918 14.756 9.78704 14.5874 10.6064 14.2522C11.4257 13.9169 12.17 13.4219 12.796 12.796C13.4219 12.17 13.9169 11.4257 14.2521 10.6064C14.5873 9.78706 14.756 8.90919 14.7483 8.024C14.7406 7.1388 14.5567 6.264 14.2073 5.45064C13.8579 4.63728 13.3501 3.90165 12.7133 3.28667ZM11.7733 11.7733C10.9014 12.6463 9.75368 13.1899 8.52585 13.3115C7.29802 13.4332 6.066 13.1254 5.03967 12.4405C4.01335 11.7557 3.25623 10.7361 2.89731 9.55566C2.53838 8.37518 2.59986 7.10677 3.07127 5.96653C3.54267 4.82629 4.39484 3.88477 5.48259 3.30238C6.57033 2.71999 7.82635 2.53276 9.03666 2.77259C10.247 3.01242 11.3367 3.66447 12.1202 4.61765C12.9036 5.57083 13.3324 6.76617 13.3333 8.00001C13.3357 8.70087 13.1991 9.39524 12.9313 10.0429C12.6635 10.6906 12.2699 11.2788 11.7733 11.7733Z" fill="#EF5944"></path>
-</svg>' %}
-
-{% set circular_info_svg = '<svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
-</svg>' %}
-
-{% set cross_close_svg = '<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>' %}
-
-{% set breadcrumb_line_svg = '<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></svg>' %}
-
-{% set withdraw_svg = '<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" class="nc-icon-wrapper"><polygon data-color="color-2" points="6,10 12,17 18,10 13,10 13,1 11,1 11,10 "></polygon><path fill="#ffffff" d="M22,21H2v-6H0v7c0,0.552,0.448,1,1,1h22c0.552,0,1-0.448,1-1v-7h-2V21z"></path></g></svg>' %}
-
-{% set utxo_groups_svg = '<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 stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
-        <rect x="2" y="9" width="12" height="14"></rect>
-        <polyline points=" 6,5 18,5 18,19 " stroke="#ffffff"></polyline>
-        <polyline points=" 10,1 22,1 22,15 " stroke="#ffffff"></polyline>
-    </g>
-</svg>' %}
-
-{% set create_utxo_svg = '<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 stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
-        <polyline points="1 15 1 21 23 21 23 15"></polyline>
-        <line x1="12" y1="3" x2="12" y2="13" stroke="#ffffff"></line>
-        <line x1="17" y1="8" x2="7" y2="8" stroke="#ffffff"></line>
-    </g>
-</svg>' %}
-
-{% set lock_svg = '<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 d="M19,10H5a3,3,0,0,0-3,3v8a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V13A3,3,0,0,0,19,10Zm-7,9a2,2,0,1,1,2-2A2,2,0,0,1,12,19Z" fill="#ffffff"></path><path data-color="color-2" d="M18,8H16V6a3.958,3.958,0,0,0-3.911-4h-.042A3.978,3.978,0,0,0,8,5.911V8H6V5.9A5.961,5.961,0,0,1,11.949,0h.061A5.979,5.979,0,0,1,18,6.01Z"></path></g>
-</svg>
-' %}
-
-{% set eye_show_svg = '<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="20" width="20" viewBox="0 0 24 24">
-      <path d="M23.444,10.239a22.936,22.936,0,0,0-2.492-2.948l-4.021,4.021A5.026,5.026,0,0,1,17,12a5,5,0,0,1-5,5,5.026,5.026,0,0,1-.688-.069L8.055,20.188A10.286,10.286,0,0,0,12,21c5.708,0,9.905-5.062,11.445-7.24A3.058,3.058,0,0,0,23.444,10.239Z"></path>
-      <path d="M12,3C6.292,3,2.1,8.062,.555,10.24a3.058,3.058,0,0,0,0,3.52h0a21.272,21.272,0,0,0,4.784,4.9l3.124-3.124a5,5,0,0,1,7.071-7.072L8.464,15.536l10.2-10.2A11.484,11.484,0,0,0,12,3Z"></path>
-      <path data-color="color-2" d="M1,24a1,1,0,0,1-.707-1.707l22-22a1,1,0,0,1,1.414,1.414l-22,22A1,1,0,0,1,1,24Z"></path>
-</svg>
-' %}
-
-{% set place_new_offer_svg = '<svg class="text-gray-500 w-5 h-5 mr-2" 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>
-' %}
-
-{% set page_back_svg = '<svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-               <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
-              </svg>
-' %}
-
-{% set page_forwards_svg = '<svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-               <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-              </svg>
-' %}
-
-
-{% set filter_clear_svg = '<svg class="mr-2 w-5 h-5" 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="#ffffff" stroke-linejoin="round">
-                <line x1="20" y1="2" x2="12.329" y2="11.506"></line>
-                <path d="M11,11a2,2,0,0,1,2,2,3.659,3.659,0,0,1-.2.891A9.958,9.958,0,0,0,13.258,23H1C1,16.373,4.373,11,11,11Z"></path>
-                <line x1="18" y1="15" x2="23" y2="15" stroke="#ffffff"></line>
-                <line x1="17" y1="19" x2="23" y2="19" stroke="#ffffff"></line>
-                <line x1="19" y1="23" x2="23" y2="23" stroke="#ffffff"></line>
-                <path d="M8.059,11.415A3.9,3.9,0,0,0,12,16c.041,0,.079-.011.12-.012" data-cap="butt"></path>
-                <path d="M5,23a13.279,13.279,0,0,1,.208-3.4" data-cap="butt"></path>
-                <path d="M9.042,23c-.688-1.083-.313-3.4-.313-3.4" data-cap="butt"></path>
-               </g>
-              </svg>
-' %}
-
-{% set filter_apply_svg = ' <svg class="mr-2 w-5 h-5" 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="#ffffff" stroke-linejoin="round">
-                <rect x="2" y="2" width="7" height="7"></rect>
-                <rect x="15" y="15" width="7" height="7"></rect>
-                <rect x="2" y="15" width="7" height="7"></rect>
-                <polyline points="15 6 17 8 22 3" stroke="#ffffff"></polyline>
-               </g>
-              </svg>
-' %}
-
-
-{% set input_arrow_down_svg = '<svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
-             </svg>
-' %}
-
-{% set arrow_right_svg = '  <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="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z " clip-rule="evenodd"></path>
-              </svg>
-' %}
-
-             
-     
-
-
-{% set select_box_class = 'hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-white text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0' %}
\ No newline at end of file
+{% set select_box_arrow_svg = '
+<svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+   <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+</svg>
+' %}
+{% set circular_arrows_svg = '
+<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" class="nc-icon-wrapper">
+      <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.442C16.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.442C7.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>
+' %}
+{% set circular_error_svg = '
+<svg class="relative top-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+   <path d="M10.4733 5.52667C10.4114 5.46419 10.3376 5.41459 10.2564 5.38075C10.1751 5.3469 10.088 5.32947 9.99999 5.32947C9.91198 5.32947 9.82485 5.3469 9.74361 5.38075C9.66237 5.41459 9.58863 5.46419 9.52666 5.52667L7.99999 7.06001L6.47333 5.52667C6.34779 5.40114 6.17753 5.33061 5.99999 5.33061C5.82246 5.33061 5.65219 5.40114 5.52666 5.52667C5.40112 5.65221 5.3306 5.82247 5.3306 6.00001C5.3306 6.17754 5.40112 6.3478 5.52666 6.47334L7.05999 8.00001L5.52666 9.52667C5.46417 9.58865 5.41458 9.66238 5.38073 9.74362C5.34689 9.82486 5.32946 9.912 5.32946 10C5.32946 10.088 5.34689 10.1752 5.38073 10.2564C5.41458 10.3376 5.46417 10.4114 5.52666 10.4733C5.58863 10.5358 5.66237 10.5854 5.74361 10.6193C5.82485 10.6531 5.91198 10.6705 5.99999 10.6705C6.088 10.6705 6.17514 10.6531 6.25638 10.6193C6.33762 10.5854 6.41135 10.5358 6.47333 10.4733L7.99999 8.94001L9.52666 10.4733C9.58863 10.5358 9.66237 10.5854 9.74361 10.6193C9.82485 10.6531 9.91198 10.6705 9.99999 10.6705C10.088 10.6705 10.1751 10.6531 10.2564 10.6193C10.3376 10.5854 10.4114 10.5358 10.4733 10.4733C10.5358 10.4114 10.5854 10.3376 10.6193 10.2564C10.6531 10.1752 10.6705 10.088 10.6705 10C10.6705 9.912 10.6531 9.82486 10.6193 9.74362C10.5854 9.66238 10.5358 9.58865 10.4733 9.52667L8.93999 8.00001L10.4733 6.47334C10.5358 6.41137 10.5854 6.33763 10.6193 6.25639C10.6531 6.17515 10.6705 6.08802 10.6705 6.00001C10.6705 5.912 10.6531 5.82486 10.6193 5.74362C10.5854 5.66238 10.5358 5.58865 10.4733 5.52667ZM12.7133 3.28667C12.0983 2.64994 11.3627 2.14206 10.5494 1.79266C9.736 1.44327 8.8612 1.25936 7.976 1.25167C7.0908 1.24398 6.21294 1.41266 5.39363 1.74786C4.57432 2.08307 3.82998 2.57809 3.20403 3.20404C2.57807 3.82999 2.08305 4.57434 1.74785 5.39365C1.41264 6.21296 1.24396 7.09082 1.25166 7.97602C1.25935 8.86121 1.44326 9.73601 1.79265 10.5494C2.14204 11.3627 2.64992 12.0984 3.28666 12.7133C3.90164 13.3501 4.63727 13.858 5.45063 14.2074C6.26399 14.5567 7.13879 14.7407 8.02398 14.7483C8.90918 14.756 9.78704 14.5874 10.6064 14.2522C11.4257 13.9169 12.17 13.4219 12.796 12.796C13.4219 12.17 13.9169 11.4257 14.2521 10.6064C14.5873 9.78706 14.756 8.90919 14.7483 8.024C14.7406 7.1388 14.5567 6.264 14.2073 5.45064C13.8579 4.63728 13.3501 3.90165 12.7133 3.28667ZM11.7733 11.7733C10.9014 12.6463 9.75368 13.1899 8.52585 13.3115C7.29802 13.4332 6.066 13.1254 5.03967 12.4405C4.01335 11.7557 3.25623 10.7361 2.89731 9.55566C2.53838 8.37518 2.59986 7.10677 3.07127 5.96653C3.54267 4.82629 4.39484 3.88477 5.48259 3.30238C6.57033 2.71999 7.82635 2.53276 9.03666 2.77259C10.247 3.01242 11.3367 3.66447 12.1202 4.61765C12.9036 5.57083 13.3324 6.76617 13.3333 8.00001C13.3357 8.70087 13.1991 9.39524 12.9313 10.0429C12.6635 10.6906 12.2699 11.2788 11.7733 11.7733Z" fill="#EF5944"></path>
+</svg>
+' %}
+{% set circular_info_svg = '
+<svg aria-hidden="true" class="flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+   <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
+</svg>
+' %}
+{% set cross_close_svg = '
+<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>
+' %}
+{% set breadcrumb_line_svg = '
+<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>
+</svg>
+' %}
+{% set withdraw_svg = '
+<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" class="nc-icon-wrapper">
+      <polygon data-color="color-2" points="6,10 12,17 18,10 13,10 13,1 11,1 11,10 "></polygon>
+      <path fill="#ffffff" d="M22,21H2v-6H0v7c0,0.552,0.448,1,1,1h22c0.552,0,1-0.448,1-1v-7h-2V21z"></path>
+   </g>
+</svg>
+' %}
+{% set utxo_groups_svg = '
+<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 stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
+      <rect x="2" y="9" width="12" height="14"></rect>
+      <polyline points=" 6,5 18,5 18,19 " stroke="#ffffff"></polyline>
+      <polyline points=" 10,1 22,1 22,15 " stroke="#ffffff"></polyline>
+   </g>
+</svg>
+' %}
+{% set create_utxo_svg = '
+<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 stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
+      <polyline points="1 15 1 21 23 21 23 15"></polyline>
+      <line x1="12" y1="3" x2="12" y2="13" stroke="#ffffff"></line>
+      <line x1="17" y1="8" x2="7" y2="8" stroke="#ffffff"></line>
+   </g>
+</svg>
+' %}
+{% set lock_svg = '
+<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 d="M19,10H5a3,3,0,0,0-3,3v8a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V13A3,3,0,0,0,19,10Zm-7,9a2,2,0,1,1,2-2A2,2,0,0,1,12,19Z" fill="#ffffff"></path>
+      <path data-color="color-2" d="M18,8H16V6a3.958,3.958,0,0,0-3.911-4h-.042A3.978,3.978,0,0,0,8,5.911V8H6V5.9A5.961,5.961,0,0,1,11.949,0h.061A5.979,5.979,0,0,1,18,6.01Z"></path>
+   </g>
+</svg>
+' %}
+{% set eye_show_svg = '
+<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="20" width="20" viewBox="0 0 24 24">
+   <path d="M23.444,10.239a22.936,22.936,0,0,0-2.492-2.948l-4.021,4.021A5.026,5.026,0,0,1,17,12a5,5,0,0,1-5,5,5.026,5.026,0,0,1-.688-.069L8.055,20.188A10.286,10.286,0,0,0,12,21c5.708,0,9.905-5.062,11.445-7.24A3.058,3.058,0,0,0,23.444,10.239Z"></path>
+   <path d="M12,3C6.292,3,2.1,8.062,.555,10.24a3.058,3.058,0,0,0,0,3.52h0a21.272,21.272,0,0,0,4.784,4.9l3.124-3.124a5,5,0,0,1,7.071-7.072L8.464,15.536l10.2-10.2A11.484,11.484,0,0,0,12,3Z"></path>
+   <path data-color="color-2" d="M1,24a1,1,0,0,1-.707-1.707l22-22a1,1,0,0,1,1.414,1.414l-22,22A1,1,0,0,1,1,24Z"></path>
+</svg>
+' %}
+{% set place_new_offer_svg = '
+<svg class="text-gray-500 w-5 h-5 mr-2" 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>
+' %}
+{% set page_back_svg = '
+<svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+   <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
+</svg>
+' %}
+{% set page_forwards_svg = '
+<svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+   <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+</svg>
+' %}
+{% set filter_clear_svg = '
+<svg class="mr-2 w-5 h-5" 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="#ffffff" stroke-linejoin="round">
+      <line x1="20" y1="2" x2="12.329" y2="11.506"></line>
+      <path d="M11,11a2,2,0,0,1,2,2,3.659,3.659,0,0,1-.2.891A9.958,9.958,0,0,0,13.258,23H1C1,16.373,4.373,11,11,11Z"></path>
+      <line x1="18" y1="15" x2="23" y2="15" stroke="#ffffff"></line>
+      <line x1="17" y1="19" x2="23" y2="19" stroke="#ffffff"></line>
+      <line x1="19" y1="23" x2="23" y2="23" stroke="#ffffff"></line>
+      <path d="M8.059,11.415A3.9,3.9,0,0,0,12,16c.041,0,.079-.011.12-.012" data-cap="butt"></path>
+      <path d="M5,23a13.279,13.279,0,0,1,.208-3.4" data-cap="butt"></path>
+      <path d="M9.042,23c-.688-1.083-.313-3.4-.313-3.4" data-cap="butt"></path>
+   </g>
+</svg>
+' %}
+{% set filter_apply_svg = '
+<svg class="mr-2 w-5 h-5" 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="#ffffff" stroke-linejoin="round">
+      <rect x="2" y="2" width="7" height="7"></rect>
+      <rect x="15" y="15" width="7" height="7"></rect>
+      <rect x="2" y="15" width="7" height="7"></rect>
+      <polyline points="15 6 17 8 22 3" stroke="#ffffff"></polyline>
+   </g>
+</svg>
+' %}
+{% set input_arrow_down_svg = '
+<svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+   <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
+</svg>
+' %}
+{% set arrow_right_svg = '
+<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="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z " clip-rule="evenodd"></path>
+</svg>
+' %}
+{% set wallet_svg = '
+<svg class="text-gray-500 w-5 h-5 mr-2" 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="#6b7280" stroke-linejoin="round">
+      <path d="M6,3H3C1.895,3,1,3.895,1,5 v0c0,1.105,0.895,2,2,2"></path>
+      <polyline points=" 6,7 6,1 20,1 20,7 " stroke="#6b7280"></polyline>
+      <path d="M23,7H3 C1.895,7,1,6.105,1,5v15c0,1.657,1.343,3,3,3h19V7z"></path>
+      <circle cx="17" cy="15" r="2"></circle>
+   </g>
+</svg>
+' %}
+{% set order_book_svg = '
+<svg class="text-gray-500 w-5 h-5 mr-2" 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="#6b7280" stroke-linejoin="round">
+      <rect x="3" y="1" width="18" height="22"></rect>
+      <line x1="12" y1="8" x2="12" y2="16" stroke="#6b7280"></line>
+      <line x1="8" y1="14" x2="8" y2="16" stroke="#6b7280"></line>
+      <line x1="16" y1="11" x2="16" y2="16" stroke="#6b7280"> </line>
+   </g>
+</svg>
+' %}
+{% set new_offer_svg = '
+<svg class="text-gray-500 w-5 h-5 mr-2" 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>
+' %}
+{% set settings_svg = '
+<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 stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+      <path d="M14,19l2.95,2.95A3.5,3.5,0,0,0,21.9,22l.051-.051h0A3.5,3.5,0,0,0,22,17l-.051-.051L20,15" stroke="#6b7280"></path>
+      <polyline data-cap="butt" points="11.491 8.866 4.203 1.578 1.661 4.12 8.779 11.238" stroke="#6b7280"></polyline>
+      <path d="M22.678,4.922,19.6,7.987l-3.6-3.576,3.08-3.066a4.214,4.214,0,0,0-2.259-.307,5.615,5.615,0,0,0-5.133,5.723A4.223,4.223,0,0,0,12,8.4L2.145,17.083a3.419,3.419,0,0,0-.276,4.827c.023.027.047.052.071.078h0a3.286,3.286,0,0,0,4.647.1,3.232,3.232,0,0,0,.281-.3l8.726-9.81a6.717,6.717,0,0,0,2.875.2A5.687,5.687,0,0,0,22.78,8.192,5.088,5.088,0,0,0,22.678,4.922Z"></path>
+   </g>
+</svg>
+' %}
+{% set cog_svg = '
+<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="#6b7280" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="3" stroke="#6b7280"></circle>
+      <path d="M20,12a8.049,8.049,0,0,0-.188-1.713l2.714-2.055-2-3.464L17.383,6.094a7.987,7.987,0,0,0-2.961-1.719L14,1H10L9.578,4.375A7.987,7.987,0,0,0,6.617,6.094L3.474,4.768l-2,3.464,2.714,2.055a7.9,7.9,0,0,0,0,3.426L1.474,15.768l2,3.464,3.143-1.326a7.987,7.987,0,0,0,2.961,1.719L10,23h4l.422-3.375a7.987,7.987,0,0,0,2.961-1.719l3.143,1.326,2-3.464-2.714-2.055A8.049,8.049,0,0,0,20,12Z"></path>
+   </g>
+</svg>
+' %}
+{% set rpc_svg = '
+<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">
+   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+      <rect x="1" y="2" width="22" height="20"></rect>
+      <line x1="1" y1="6" x2="23" y2="6"></line>
+      <polyline points=" 5,11 7,13 5,15 " stroke="#6b7280"></polyline>
+      <line x1="10" y1="15" x2="14" y2="15" stroke="#6b7280"></line>
+      <line x1="6" y1="2" x2="6" y2="6"></line>
+   </g>
+</svg>
+' %}
+{% set debug_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="#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>
+      <line x1="5" y1="14" x2="1" y2="14" stroke="#6b7280"></line>
+      <path data-cap="butt" d="M18.71,10H20a3,3,0,0,0,3-3V6" stroke="#6b7280"></path>
+      <path data-cap="butt" d="M18.71,18H20a3,3,0,0,1,3,3v1" stroke="#6b7280"></path>
+      <line x1="19" y1="14" x2="23" y2="14" stroke="#6b7280"></line>
+      <path d="M19,16A7,7,0,0,1,5,16V12a7,7,0,0,1,14,0Z"></path>
+   </g>
+</svg>
+' %}
+{% set explorer_svg = '
+<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">
+   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+      <line x1="22" y1="22" x2="15.656" y2="15.656" stroke="#6b7280"></line>
+      <circle cx="10" cy="10" r="8"></circle>
+   </g>
+</svg>
+' %}
+{% set tor_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="#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>
+' %}
+{% set tor_purple_svg = '
+<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">
+   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#AA70E4" 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="#AA70E4"></path>
+      <path d="M15,18.8A6.455,6.455,0,0,0,17,14a6.455,6.455,0,0,0-2-4.8" stroke="#AA70E4"></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>
+' %}
+{% set smsg_svg = '
+<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">
+   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+      <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#6b7280"></path>
+      <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#6b7280"></rect>
+      <path d="M2,1H18a2,2,0,0,1,2,2V21a2,2,0,0,1-2,2H2Z"></path>
+      <line x1="23" y1="5" x2="23" y2="9" stroke="#6b7280"></line>
+   </g>
+</svg>
+' %}
+{% set outputs_svg = '
+<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">
+   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+      <path d="M1.373,13.183a2.064,2.064,0,0,1,0-2.366C2.946,8.59,6.819,4,12,4s9.054,4.59,10.627,6.817a2.064,2.064,0,0,1,0,2.366C21.054,15.41,17.181,20,12,20S2.946,15.41,1.373,13.183Z"></path>
+      <circle cx="12" cy="12" r="4" stroke="#6b7280"></circle>
+   </g>
+</svg>
+' %}
+{% set automation_svg = '
+<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">
+   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+      <line data-cap="butt" x1="5" y1="1" x2="5" y2="6" stroke="#6b7280"></line>
+      <line x1="3" y1="1" x2="7" y2="1" stroke="#6b7280"> </line>
+      <line data-cap="butt" x1="19" y1="1" x2="19" y2="6" stroke="#6b7280"></line>
+      <line x1="17" y1="1" x2="21" y2="1" stroke="#6b7280"></line>
+      <rect x="6" y="15" width="12" height="4" stroke="#6b7280"></rect>
+      <line data-cap="butt" x1="10" y1="19" x2="10" y2="15" stroke="#6b7280"></line>
+      <line data-cap="butt" x1="14" y1="19" x2="14" y2="15" stroke="#6b7280"></line>
+      <line x1="6" y1="11" x2="8" y2="11" stroke="#6b7280"></line>
+      <line x1="16" y1="11" x2="18" y2="11" stroke="#6b7280"> </line>
+      <polygon points="23 6 5 6 1 6 1 23 23 23 23 6"></polygon>
+   </g>
+</svg>
+' %}
+{% set shutdown_svg = '
+<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">
+   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+      <line data-cap="butt" x1="11" y1="10" x2="22" y2="10" stroke="#6b7280"></line>
+      <polyline points="18 6 22 10 18 14" stroke="#6b7280"></polyline>
+      <polyline data-cap="butt" points="13 13 13 17 8 17"></polyline>
+      <polyline data-cap="butt" points="1 2 8 7.016 8 22 1 17 1 2 13 2 13 7"></polyline>
+   </g>
+</svg>
+' %}
+{% set notifications_svg = '
+<svg class="h-5 w-5" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+   <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="#6b7280"></path>
+</svg>
+' %}
+{% set debug_nerd_svg = '
+<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">
+      <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>
+      <circle cx="7" cy="10" r="3" stroke="#2ad167"></circle>
+      <path data-cap="butt" d="M10,10a2,2,0,0,1,4,0" stroke="#2ad167"></path>
+   </g>
+</svg>
+' %}
+{% set wallet_unlocked_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>
+' %}
+{% set wallet_locked_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="#2ad167" stroke-linejoin="round">
+      <rect x="3" y="11" width="18" height="12" rx="2"></rect>
+      <circle cx="12" cy="17" r="2" stroke="#2ad167"></circle>
+      <path d="M17,7V6a4.951,4.951,0,0,0-4.9-5H12A4.951,4.951,0,0,0,7,5.9V7" stroke="#2ad167"></path>
+   </g>
+</svg>
+' %}
+{% set moon_svg = '
+<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="#F59E0B" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+   <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+</svg>
+' %}
+{% set sun_svg = '
+<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="#F59E0B" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+   <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
+</svg>
+' %}
+{% set swap_in_progress_svg = '
+<svg class="text-gray-100 w-5 h-5 ml-7 mr-2" 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="#6b7280" stroke-linejoin="round">
+      <circle data-cap="butt" cx="12" cy="12" r="3" stroke="#6b7280"></circle>
+      <polyline points="16.071 5.341 21.763 6.927 21.034 1.13"></polyline>
+      <path data-cap="butt" d="M1,12A11,11,0,0,1,21.763,6.927"></path>
+      <polyline points="7.929 18.659 2.237 17.073 2.966 22.87"></polyline>
+      <path data-cap="butt" d="M23,12A11,11,0,0,1,2.237,17.073"></path>
+   </g>
+</svg>
+' %}
+{% set swap_in_progress_svg = '
+<svg class="text-gray-100 w-5 h-5 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
+      <circle data-cap="butt" cx="12" cy="12" r="3" stroke="#6b7280"></circle>
+      <polyline points="16.071 5.341 21.763 6.927 21.034 1.13"></polyline>
+      <path data-cap="butt" d="M1,12A11,11,0,0,1,21.763,6.927"></path>
+      <polyline points="7.929 18.659 2.237 17.073 2.966 22.87"></polyline>
+      <path data-cap="butt" d="M23,12A11,11,0,0,1,2.237,17.073"></path>
+   </g>
+</svg>
+' %}
+{% set swap_in_progress_mobile_svg = '
+<svg class="text-gray-100 w-5 h-5 mr-2" 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="#6b7280" stroke-linejoin="round">
+      <circle data-cap="butt" cx="12" cy="12" r="3" stroke="#6b7280"></circle>
+      <polyline points="16.071 5.341 21.763 6.927 21.034 1.13"></polyline>
+      <path data-cap="butt" d="M1,12A11,11,0,0,1,21.763,6.927"></path>
+      <polyline points="7.929 18.659 2.237 17.073 2.966 22.87"></polyline>
+      <path data-cap="butt" d="M23,12A11,11,0,0,1,2.237,17.073"></path>
+   </g>
+</svg>
+' %}
+{% set your_offers_svg = '
+<svg class="text-gray-500 w-5 h-5 mr-2" 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="#6b7280" 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="#6b7280"></polyline>
+      <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#6b7280"></polyline>
+      <polyline points=" 16,2 13,5 16,8 " stroke="#6b7280"></polyline>
+      <polyline points=" 8,16 11,19 8,22 " stroke="#6b7280"></polyline>
+   </g>
+</svg>
+' %}
+{% set available_bids_svg = '
+<svg class="text-gray-500 w-5 h-5 mr-2" 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="#6b7280" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="11"></circle>
+      <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
+   </g>
+</svg>
+' %}
+{% set bids_received_svg = '
+<svg class="text-gray-100 w-5 h-5 mr-2" 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="#6b7280" stroke-linejoin="round">
+      <path d="M2,16v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V16"> </path>
+      <line data-cap="butt" x1="12" y1="1" x2="12" y2="16" stroke="#6b7280"></line>
+      <polyline points="7 11 12 16 17 11" stroke="#6b7280"></polyline>
+   </g>
+</svg>
+' %}
+{% set bids_sent_svg = '
+<svg class="text-gray-100 w-5 h-5 mr-2" 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="#6b7280" stroke-linejoin="round">
+      <path d="M2,16v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V16"></path>
+      <line data-cap="butt" x1="12" y1="17" x2="12" y2="2" stroke="#6b7280"></line>
+      <polyline points="17 7 12 2 7 7" stroke="#6b7280"></polyline>
+   </g>
+</svg>
+' %}
+{% set mobile_menu_svg = '
+<svg class="text-white bg-blue-500 hover:bg-blue-600 block h-8 w-8 p-2 rounded" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+   <title>Mobile Menu</title>
+   <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
+</svg>
+' %}
+{% set header_arrow_down_svg = '
+<svg class="text-gray-400 ml-4" width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+   <path d="M9.08335 0.666657C8.75002 0.333323 8.25002 0.333323 7.91669 0.666657L5.00002 3.58332L2.08335 0.666657C1.75002 0.333323 1.25002 0.333323 0.916687 0.666657C0.583354 0.99999 0.583354 1.49999 0.916687 1.83332L4.41669 5.33332C4.58335 5.49999 4.75002 5.58332 5.00002 5.58332C5.25002 5.58332 5.41669 5.49999 5.58335 5.33332L9.08335 1.83332C9.41669 1.49999 9.41669 0.99999 9.08335 0.666657Z" fill="#6b7280"></path>
+</svg>
+' %}
+{% set notifications_network_offer_svg = '
+<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>
+' %}
+{% set notifications_new_bid_on_offer_svg = '
+<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>
+' %}
+{% set notifications_bid_accepted_svg = '
+<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>
+' %}
+{% set notifications_unknow_event_svg = '
+<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>
+' %}
+{% set notifications_close_svg = '
+<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>
+' %}
+{% set select_box_class = 'hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-white text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0' %}
diff --git a/basicswap/ui/page_offers.py b/basicswap/ui/page_offers.py
index a1e37c8..d6521c0 100644
--- a/basicswap/ui/page_offers.py
+++ b/basicswap/ui/page_offers.py
@@ -5,6 +5,7 @@
 # file LICENSE or http://www.opensource.org/licenses/mit-license.php.
 
 import traceback
+import time
 
 from urllib import parse
 from .util import (
@@ -40,10 +41,8 @@ from basicswap.chainparams import (
     Coins,
 )
 
-
 default_chart_api_key = '95dd900af910656e0e17c41f2ddc5dba77d01bf8b0e7d2787634a16bd976c553'
 
-
 def value_or_none(v):
     if v == -1 or v == '-1':
         return None
@@ -662,6 +661,32 @@ def page_offer(self, url_split, post_string):
         'summary': summary,
     })
 
+def format_timestamp(timestamp):
+    current_time = int(time.time())
+    time_diff = current_time - timestamp
+
+    if time_diff <= 172800:  # Within the last 48 hours
+        hours_ago = time_diff // 3600
+        minutes_ago = (time_diff % 3600) // 60
+
+        if hours_ago == 0:  # Less than an hour ago
+            if minutes_ago == 1:
+                return "1 min"
+            else:
+                return f"{minutes_ago} mins"
+        elif hours_ago == 1:  # Within the last hour
+            if minutes_ago == 0:
+                return "1h ago"
+            else:
+                return f"1h {minutes_ago}min"
+        else:  # More than 1 hour ago
+            if minutes_ago == 0:
+                return f"{int(hours_ago)}h"
+            else:
+                return f"{int(hours_ago)}h {minutes_ago}min"
+    else:
+        return time.strftime('%Y-%m-%d %H:%M:%S', time.localtime(timestamp))
+
 
 def page_offers(self, url_split, post_string, sent=False):
     server = self.server
@@ -729,8 +754,10 @@ def page_offers(self, url_split, post_string, sent=False):
         ci_to = swap_client.ci(Coins(o.coin_to))
         is_expired = o.expire_at <= now
         amount_negotiable = "Yes" if o.amount_negotiable else "No"
+        formatted_created_at = format_timestamp(o.created_at)
+        formatted_expired_at = format_timestamp(o.expire_at)
         formatted_offers.append((
-            format_timestamp(o.created_at),
+            formatted_created_at,
             o.offer_id.hex(),
             ci_from.coin_name(),
             ci_to.coin_name(),
@@ -743,6 +770,7 @@ def page_offers(self, url_split, post_string, sent=False):
             ci_from.format_amount(completed_amount),
             is_expired,
             o.active_ind,
+            formatted_expired_at,
             strSwapDesc(o.swap_type),
             amount_negotiable))
 
@@ -753,10 +781,12 @@ def page_offers(self, url_split, post_string, sent=False):
         chart_api_key_enc = swap_client.settings.get('chart_api_key_enc', '')
         chart_api_key = default_chart_api_key if chart_api_key_enc == '' else bytes.fromhex(chart_api_key_enc).decode('utf-8')
 
+    offers_count = len(formatted_offers)
+
     template = server.env.get_template('offers.html')
     return self.render_template(template, {
         'page_type': 'Your Offers' if sent else 'Network Order Book',
-        'page_button': 'hidden' if sent else '',
+        'page_button': 'hidden' if sent or offers_count <= 30 else '',  # Conditionally hide the button
         'page_type_description': 'Your entire offer history.' if sent else 'Consult available offers in the order book and initiate a coin swap.',
         'messages': messages,
         'show_chart': False if sent else swap_client.settings.get('show_chart', True),
@@ -768,4 +798,5 @@ def page_offers(self, url_split, post_string, sent=False):
         'offers': formatted_offers,
         'summary': summary,
         'sent_offers': sent,
+        'offers_count': offers_count,
     })
diff --git a/basicswap/ui/util.py b/basicswap/ui/util.py
index a177afa..ce1ead0 100644
--- a/basicswap/ui/util.py
+++ b/basicswap/ui/util.py
@@ -31,7 +31,7 @@ from basicswap.basicswap_util import (
 
 from basicswap.protocols.xmr_swap_1 import getChainBSplitKey, getChainBRemoteSplitKey
 
-PAGE_LIMIT = 50
+PAGE_LIMIT = 30
 invalid_coins_from = []