diff --git a/client/webserver/site/src/css/application.scss b/client/webserver/site/src/css/application.scss
index dae0a95cb0..2223263c6f 100644
--- a/client/webserver/site/src/css/application.scss
+++ b/client/webserver/site/src/css/application.scss
@@ -6,10 +6,14 @@ $buycolor_dark: #29bb77;
 $sellcolor_dark: #e95e5e;
 $buycolor_light: #207a46;
 $sellcolor_light: #99302b;
-$light_body_bg: white;
-$dark_body_bg: #091a28;
+$dark_body_bg: #04111c;
+$dark_main_bg: #091a28;
+$dark_dialog_bg: #102332;
+$light_body_bg: #ecebf0;
+$light_main_bg: #f4f2f9;
+$light_dialog_bg: #fff;
 $light_border_color: #ddd;
-$dark_border_color: #383f4b;
+$dark_border_color: #272c3580;
 $light_input_border: #999;
 $dark_input_border: #555;
 $sans: "source-sans", sans-serif;
diff --git a/client/webserver/site/src/css/forms.scss b/client/webserver/site/src/css/forms.scss
index 1415309ddb..ea0c51580b 100644
--- a/client/webserver/site/src/css/forms.scss
+++ b/client/webserver/site/src/css/forms.scss
@@ -24,7 +24,7 @@
         linear-gradient(
           to bottom,
           #e0e0e000,
-          $light_body_bg
+          $light_dialog_bg
           90%
         );
     }
@@ -153,16 +153,17 @@
     display: flex;
     justify-content: flex-start;
     align-items: stretch;
+    border-bottom: 1px solid $light_border_color;
+    padding-left: 15px;
 
     .wtab {
       padding: 8px 20px;
       font-size: 15px;
-      border-style: solid solid none;
       border-radius: 5px 5px 0 0;
-      border-width: 1px;
-      border-color: #555;
-      opacity: 0.8;
-      background-color: $light_body_bg;
+      border: 1px solid $light_border_color;
+      border-bottom: none;
+      opacity: 0.6;
+      background-color: transparent;
       position: relative;
       z-index: 150;
     }
@@ -175,6 +176,8 @@
       opacity: 1;
       top: 1px;
       cursor: default;
+      background: linear-gradient(0deg, $light_dialog_bg 20%, #ddd 100%);
+      border-top: none;
     }
 
     .wtab:not(.selected) {
@@ -187,7 +190,7 @@
   }
 
   .bordertop {
-    border-top: solid 1px #555;
+    border-top: solid 1px $light_border_color;
     border-radius: 0 10px 0 0;
   }
 
diff --git a/client/webserver/site/src/css/forms_dark.scss b/client/webserver/site/src/css/forms_dark.scss
index 5de4fa84ac..b2c6711701 100644
--- a/client/webserver/site/src/css/forms_dark.scss
+++ b/client/webserver/site/src/css/forms_dark.scss
@@ -14,7 +14,7 @@ body.dark {
           linear-gradient(
             to bottom,
             #13202b00,
-            $dark_body_bg
+            $dark_dialog_bg
             90%
           );
       }
@@ -41,20 +41,20 @@ body.dark {
 
   #newWalletForm {
     .wallet-tabs {
+      border-bottom: 1px solid $dark_border_color;
+  
       .wtab {
-        background-color: $dark_body_bg;
-        border-color: #999;
-        opacity: 0.8;
-      }
+        border-color: $dark_border_color;
+        background-color: $dark_dialog_bg;
 
-      .wtab.selected {
-        opacity: 1;
-        background-color: #263846;
+        &.selected {
+          background: linear-gradient(0deg, $dark_dialog_bg 20%, $dark_main_bg 100%);
+        }
       }
     }
 
     .bordertop {
-      border-top: solid 1px #999;
+      border-top: solid 1px $dark_border_color;
     }
   }
 
diff --git a/client/webserver/site/src/css/main.scss b/client/webserver/site/src/css/main.scss
index a65bb696cf..c1e054223d 100644
--- a/client/webserver/site/src/css/main.scss
+++ b/client/webserver/site/src/css/main.scss
@@ -77,7 +77,6 @@ header.maintop {
   justify-content: space-between;
   align-items: center;
   z-index: 100;
-  border-bottom: 1px solid $light_border_color;
   background-color: $light_body_bg;
 }
 
@@ -173,7 +172,7 @@ header.maintop a:hover,
 }
 
 #header .hoverbright:hover {
-  color: #222;
+  color: #666;
 }
 
 form.card button:hover {
@@ -336,7 +335,7 @@ div.popup-notes {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  background-color: $light_body_bg;
+  background-color: $light_dialog_bg;
   border: 1px solid #7777;
   z-index: 100;
   font-family: $sans;
@@ -402,6 +401,10 @@ div.popup-notes {
   display: none !important;
 }
 
+.d-conceal {
+  visibility: hidden !important;
+}
+
 .buycolor {
   color: $buycolor_light;
 }
@@ -466,7 +469,8 @@ hr.dashed {
 }
 
 .hoverbg:hover {
-  background-color: #7775;
+  background-color: #7777771b;
+  cursor: pointer;
 }
 
 div.form-closer {
@@ -550,3 +554,8 @@ sup.token-parent {
   }
 }
 
+.dialog-panel {
+  background-color: $light_dialog_bg;
+  filter: drop-shadow(3px 3px 5px #00000030);
+}
+
diff --git a/client/webserver/site/src/css/main_dark.scss b/client/webserver/site/src/css/main_dark.scss
index 9b82015d46..f80c56e70d 100644
--- a/client/webserver/site/src/css/main_dark.scss
+++ b/client/webserver/site/src/css/main_dark.scss
@@ -4,7 +4,7 @@ body.dark {
 
   header.maintop {
     background-color: $dark_body_bg;
-    border-bottom-style: solid;
+    border-bottom-style: none;
     border-color: $dark_border_color;
     border-width: 1px;
   }
@@ -62,6 +62,10 @@ body.dark {
     text-decoration: underline;
   }
 
+  .hoverbg:hover {
+    background-color: #1d2936a0;
+  }
+
   button {
     color: $font-color-dark;
     background-color: transparent;
@@ -125,7 +129,7 @@ body.dark {
 
   #noteBox,
   #profileBox {
-    background-color: $dark_body_bg;
+    background-color: $dark_dialog_bg;
   }
 
   #tooltip {
@@ -146,4 +150,9 @@ body.dark {
       background-color: #27278d;
     }
   }
+
+  .dialog-panel {
+    background-color: $dark_dialog_bg;
+    filter: drop-shadow(3px 3px 8px #00000040);
+  }
 }
diff --git a/client/webserver/site/src/css/market.scss b/client/webserver/site/src/css/market.scss
index d48a61f3f4..6f98773df8 100644
--- a/client/webserver/site/src/css/market.scss
+++ b/client/webserver/site/src/css/market.scss
@@ -18,14 +18,13 @@ div[data-handler=markets] {
   .ordertable-header {
     height: 30px;
     padding: 0 45px 0 10px;
+    background-color: $light_dialog_bg;
   }
 
   .orderbook {
     min-width: 300px;
     width: 90%;
-    border-right: 1px solid $light_border_color;
-    border-left: 1px solid $light_border_color;
-    border-top: 1px solid $light_border_color;
+    border-right: 5px solid $light_body_bg;
 
     & > div:first-child { // buy orders
       order: 3;
@@ -43,12 +42,17 @@ div[data-handler=markets] {
   .order-panel {
     min-width: 375px;
     width: 90%;
+    border-left: 5px solid $light_body_bg;
 
-    & > div {
-      border: 1px solid $light_border_color;
+    #orderTypeBttns {
+      button {
+        border-radius: 5px 5px 0 0;
+      }
     }
 
     #orderForm {
+      background: $light_dialog_bg;
+   
       input[type=number] {
         height: 30px;
         border-radius: 0;
@@ -129,6 +133,20 @@ div[data-handler=markets] {
     background-color: #6e0909;
   }
 
+  #notRegistered,
+  #registrationStatus,
+  #bondCreationPending {
+    background-color: $light_dialog_bg;
+  }
+
+  .charts, 
+  .orderbook,
+  .balances-panel,
+  .user-order-panel,
+  #recentMatchesBox {
+    background: $light_main_bg;
+  }
+
   .user-order {
     border: 1px solid $light_border_color;
 
@@ -141,6 +159,10 @@ div[data-handler=markets] {
       padding-bottom: 0;
     }
 
+    &.inactive {
+      opacity: 0.5;
+    }
+
     .user-order-header {
       @extend .flex-center;
 
@@ -164,9 +186,6 @@ div[data-handler=markets] {
           background-color: $sellcolor_light;
         }
 
-        &.inactive {
-          opacity: 0.5;
-        }
       }
 
       .active-indicator {
@@ -240,22 +259,28 @@ div[data-handler=markets] {
       min-width: 30px;
     }
 
-    tbody > tr:hover,
-    tbody > tr.hover {
-      background-color: white;
-    }
-
     .ico-check {
       color: #9b8c09;
     }
   }
 
+  #orderTypeBttns {
+    border-bottom: 1px solid $light_border_color;
+  }
+
   .markettab {
     height: 30px;
     border-style: none;
+    border: 1px solid $light_border_color;
+    border-bottom: none;
+    background-color: $light_main_bg;
+    position: relative;
+    opacity: 0.8;
 
     &.selected {
-      background-color: #fffe;
+      top: 1px;
+      opacity: 1;
+      background-color: $light_dialog_bg;
     }
   }
 
@@ -671,34 +696,26 @@ div[data-handler=markets] {
     }
   }
 
+  span.label {
+    text-transform: uppercase;
+    font-weight: normal;
+    font-size: small;
+  }
+
   .twentyfour {
-    margin-left: 0;
-    border-left: 1px solid $light_border_color;
+    padding-left: 5px;
 
     .data-point {
       margin-left: 0;
 
       & > * {
+        align-items: flex-start;
         padding-right: 20px;
       }
 
       span.label {
+        text-align: left;
         width: 100%;
-        border-bottom: 1px solid $light_border_color;
-      }
-
-      &:first-child > span.label {
-        padding-right: 5px;
-        padding-left: 5px;
-      }
-
-      &:nth-child(3),
-      &:nth-child(4) {
-        align-items: flex-end;
-
-        span.label {
-          text-align: right;
-        }
       }
 
       &:nth-child(4) > * {
@@ -881,7 +898,6 @@ div[data-handler=markets] {
 
         height: 100%;
         overflow-x: hidden;
-        border-style: none none none solid;
       }
     }
 
diff --git a/client/webserver/site/src/css/market_dark.scss b/client/webserver/site/src/css/market_dark.scss
index f5d3bc4f45..05d816a158 100644
--- a/client/webserver/site/src/css/market_dark.scss
+++ b/client/webserver/site/src/css/market_dark.scss
@@ -2,19 +2,23 @@ body.dark {
   div[data-handler=markets] {
     table.ordertable {
       color: #a1a1a1;
-
-      tbody > tr:hover,
-      tbody > tr.hover {
-        background-color: #1d2936;
-      }
     }
 
     .numorders {
       background-color: #141488;
     }
 
-    .markettab.selected {
-      background-color: #fff1;
+    #orderTypeBttns {
+      border-color: $dark_border_color;
+    }
+
+    .markettab {
+      background-color: $dark_main_bg;
+      border-color: $dark_border_color;
+
+      &.selected {
+        background-color: $dark_dialog_bg;
+      }
     }
 
     .market-bal {
@@ -56,18 +60,39 @@ body.dark {
       }
     }
 
-    .orderbook {
-      border-right: 1px solid $dark_border_color;
-      border-left: 1px solid $dark_border_color;
-      border-top: 1px solid $dark_border_color;
+    #notRegistered,
+    #registrationStatus,
+    #bondCreationPending {
+      background-color: $dark_dialog_bg;
     }
 
-    .order-panel > div {
-      border: 1px solid $dark_border_color;
+    .charts, 
+    .orderbook,
+    .balances-panel,
+    .user-order-panel,
+    #recentMatchesBox {
+      background: $dark_main_bg;
+    }
+
+    .order-panel {
+      border-left-color: $dark_body_bg;
+    }
+
+    .orderbook {
+      border-right-color: $dark_body_bg;
+
+      .ordertable-header {
+        background-color: $dark_dialog_bg;
+      }
     }
 
     .user-order {
-      border: 1px solid $dark_border_color;
+      border: none;
+      border-bottom: 1px solid $dark_border_color;
+
+      &:first-child {
+        border-top: 1px solid $dark_border_color;
+      }
 
       .order-details {
         border-color: $dark_border_color;
@@ -91,6 +116,7 @@ body.dark {
     }
 
     #orderForm {
+      background: $dark_dialog_bg;
       color: #a1a1a1;
 
       button {
@@ -147,7 +173,7 @@ body.dark {
 
     #leftMarketDock {
       border-color: $dark_border_color;
-      background-color: $dark_body_bg;
+      background-color: $dark_main_bg;
 
       #searchBoxV1 {
         border-color: $dark_border_color;
@@ -159,35 +185,27 @@ body.dark {
     }
   }
 
-  .twentyfour {
-    border-left: 1px solid $dark_border_color;
-
-    .data-point span.label {
-      border-bottom: 1px solid $dark_border_color;
-    }
-  }
-
   #main .market-stats-v1 {
     border-bottom: 1px solid $dark_border_color;
   }
 
   #durBttnBox,
   #epochLine {
-    background-color: $dark_body_bg;
+    background-color: $dark_main_bg;
 
     .candle-dur-bttn {
-      background-color: $dark_body_bg;
+      background-color: $dark_main_bg;
     }
   }
 
   #marketReopener {
     border-color: $dark_border_color;
-    background-color: $dark_body_bg;
+    background-color: $dark_main_bg;
   }
 
   .user-order-floaty-menu {
     border-color: $dark_border_color $dark_input_border $dark_input_border $dark_input_border;
-    background-color: $dark_body_bg;
+    background-color: $dark_main_bg;
   }
 }
 
diff --git a/client/webserver/site/src/css/orders.scss b/client/webserver/site/src/css/orders.scss
index acb2cf1acb..6fd39ad682 100644
--- a/client/webserver/site/src/css/orders.scss
+++ b/client/webserver/site/src/css/orders.scss
@@ -6,7 +6,7 @@
 }
 
 .orders-left-side {
-  border-right: 1px solid black;
+  border-right: 1px solid $light_border_color;
 }
 
 .filter-opts {
@@ -47,6 +47,7 @@
 }
 
 #ordersTable {
+  background-color: $light_dialog_bg;
   width: 100%;
   // max-width: 90%;
   margin: 0 auto;
@@ -73,3 +74,27 @@
     }
   }
 }
+
+body.dark {
+  .orders-left-side {
+    border-color: $dark_border_color;
+  }
+
+  #ordersTable {
+    background-color: $dark_main_bg;
+
+    thead {
+      background-color: $dark_dialog_bg;
+    }
+
+    tbody {
+      tr:nth-child(even) {
+        background-color: #7771;
+      }
+  
+      tr:hover {
+        background-color: #77777716;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/client/webserver/site/src/css/settings.scss b/client/webserver/site/src/css/settings.scss
index 360977ddc1..1ef56d0d9c 100644
--- a/client/webserver/site/src/css/settings.scss
+++ b/client/webserver/site/src/css/settings.scss
@@ -27,7 +27,8 @@ div.settings {
 }
 
 span.settings-gear {
-  display: inline-block;
+  display: block;
+  text-align: center;
   font-size: 40px;
   opacity: 0.6;
   margin: 10px;
diff --git a/client/webserver/site/src/css/wallets.scss b/client/webserver/site/src/css/wallets.scss
index a55b888a79..4b0e1ec08a 100644
--- a/client/webserver/site/src/css/wallets.scss
+++ b/client/webserver/site/src/css/wallets.scss
@@ -40,8 +40,6 @@
   }
 
   #assetSelect {
-    border-right: 1px solid $dark-border-color;
-
     .icon-select {
       padding: 15px;
       cursor: pointer;
@@ -75,7 +73,7 @@
     .icon-select:hover,
     .icon-select.selected {
       opacity: 1;
-      background-color: #fff1;
+      background-color: $light_main_bg;
     }
   }
 
@@ -108,7 +106,7 @@
 
   #walletInfo {
     padding-top: 25px;
-    border-top: solid 1px #777;
+    border-top: solid 1px $light_border_color;
 
     table#walletInfoTable {
       width: 100%;
@@ -181,14 +179,7 @@
     height: 100px;
   }
 
-  #marketsOverviewBox {
-    border-left: 1px solid $light_border_color;
-    border-bottom: 1px solid $light_border_color;
-  }
-
   #walletDetailsBox {
-    border-bottom: $light_border_color;
-
     #assetLogo {
       width: 35px;
       height: 35px;
@@ -210,10 +201,8 @@
     @extend .table-striped;
   }
 
-  #stakingBox {
-    border-width: 1px;
-    border-style: solid none;
-    border-color: $light_border_color;
+  #vspPicker {
+    padding: 50px !important;
   }
 
   table#vspPickerTable,
@@ -279,12 +268,18 @@
   }
 
   .walletspage {
-    #orderActivityBox {
-      border-top: 1px solid $dark-border-color;
+    #walletDetailsBox,
+    #orderActivityBox,
+    #marketsOverviewBox {
+      background-color: $light_main_bg;
+    }
+
+    #stakingBox {
+      border-top: 8px solid $light_body_bg;
     }
 
     #marketsOverviewBox {
-      border-right: 1px solid $dark-border-color;
+      border-left: 8px solid $light_body_bg;
       border-bottom: none;
     }
 
@@ -304,7 +299,7 @@
       padding-top: 0;
       padding-left: 25px;
       border-top: none;
-      border-left: solid 1px #777;
+      border-left: solid 1px $light_border_color;
 
       table#walletInfoTable {
         width: auto;
diff --git a/client/webserver/site/src/css/wallets_dark.scss b/client/webserver/site/src/css/wallets_dark.scss
index d279eabdaf..065308ab8b 100644
--- a/client/webserver/site/src/css/wallets_dark.scss
+++ b/client/webserver/site/src/css/wallets_dark.scss
@@ -1,12 +1,21 @@
 body.dark {
   .walletspage {
+    #walletDetailsBox,
+    #orderActivityBox,
     #marketsOverviewBox {
-      border-left: 1px solid $dark_border_color;
-      border-bottom: 1px solid $dark_border_color;
+      background-color: $dark_main_bg;
     }
 
-    #walletDetailsBox {
-      border-bottom: $dark_border_color;
+    #stakingBox {
+      border-top-color: $dark_body_bg;
+    }
+
+    #marketsOverviewBox {
+      border-left-color: $dark_body_bg;
+    }
+
+    #walletInfo {
+      border-color: $dark_border_color
     }
 
     #peersTable,
@@ -20,10 +29,6 @@ body.dark {
       }
     }
 
-    #stakingBox {
-      border-color: $dark_border_color;
-    }
-
     table#vspPickerTable,
     table#ticketHistoryTable {
       border: 1px solid $dark_border_color;
@@ -45,6 +50,12 @@ body.dark {
         background-color: $dark_body_bg;
         border-color: $dark_body_bg;
       }
+
+      &:hover,
+      &.selected {
+        opacity: 1;
+        background-color: $dark_main_bg;
+      }
     }
   }
 }
diff --git a/client/webserver/site/src/html/bodybuilder.tmpl b/client/webserver/site/src/html/bodybuilder.tmpl
index 328c602a5f..0f70b657f0 100644
--- a/client/webserver/site/src/html/bodybuilder.tmpl
+++ b/client/webserver/site/src/html/bodybuilder.tmpl
@@ -49,11 +49,11 @@
     <div id="loaderMsg" class="mx-2"></div>
   </div>
 
-  <div id="noteBox" class="d-hide">
+  <div id="noteBox" class="d-hide dialog-panel">
     <div class="icon fs20 ico-bell p-1" id="innerNoteIcon"></div>
-    <div class="header d-flex align-items-center justify-content-start fs17 demi hoverbg px-3 py-2 min-fit">
-      <div id="noteCat" class="active">[[[Notifications]]]</div>
-      <div id="pokeCat">[[[Recent Activity]]]</div>
+    <div class="header d-flex align-items-center justify-content-start fs17 demi px-3 py-2 min-fit">
+      <div id="noteCat" class="hoverbg active">[[[Notifications]]]</div>
+      <div id="pokeCat" class="hoverbg">[[[Recent Activity]]]</div>
     </div>
     <div id="noteList" class="flex-grow-1 stylish-overflow">
       <div id="noteTmpl" class="note firstview p-2">
@@ -76,7 +76,7 @@
     </div>
   </div>
 
-  <div id="profileBox" class="d-hide">
+  <div id="profileBox" class="d-hide dialog-panel">
     <div class="icon fs20 ico-hamburger p-1" id="innerBurgerIcon"></div>
     <div class="demi hoverbright pointer d-flex align-items-center py-1 authed-only" id="profileSignout">
       <span class="ico-profile fs16 me-2"></span>
diff --git a/client/webserver/site/src/html/dexsettings.tmpl b/client/webserver/site/src/html/dexsettings.tmpl
index fded08256a..f749dc48d8 100644
--- a/client/webserver/site/src/html/dexsettings.tmpl
+++ b/client/webserver/site/src/html/dexsettings.tmpl
@@ -35,7 +35,7 @@
 
   <div id="forms" class="d-hide">
     {{- /* DISABLE ACCOUNT */ -}}
-    <form class="d-hide" id="disableAccountForm">
+    <form class="d-hide dialog-panel" id="disableAccountForm">
       {{template "disableAccountForm"}}
     </form>
 
@@ -45,14 +45,15 @@
     </form>
 
     {{- /* DEX ADDRESS */ -}}
-    <form class="d-hide" id="dexAddrForm" autocomplete="off">
+    <form class="d-hide dialog-panel" id="dexAddrForm" autocomplete="off">
       {{template "dexAddrForm" .}}
     </form>
 
     {{- /* BOND DETAILS */ -}}
-    <form class="d-hide" id="bondDetailsForm" autocomplete="off">
+    <form class="d-hide dialog-panel" id="bondDetailsForm" autocomplete="off">
       <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       <div class="py-1 fs28 text-center sans-light">[[[bond_details]]]</div>
+      <hr class="dashed my-2">
       <div class="d-flex justify-content-around my-3">
         <span class="text-center">
           [[[current_tier]]]
diff --git a/client/webserver/site/src/html/forms.tmpl b/client/webserver/site/src/html/forms.tmpl
index 326bda8b93..dccbd17384 100644
--- a/client/webserver/site/src/html/forms.tmpl
+++ b/client/webserver/site/src/html/forms.tmpl
@@ -52,10 +52,7 @@
 
 {{define "newWalletForm"}}
 <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
-<div class="wallet-tabs" data-tmpl="walletTypeTabs">
-  <div class="wtab" data-tmpl="walletTabTmpl"></div>
-</div>
-<div class="bordertop py-2 text-center fs22 sans-light position-relative" data-tmpl="header">
+<div class="bordertop py-2 text-center fs22 sans-light position-relative mb-3" data-tmpl="header">
   [[[add_a_x_wallet]]]
   <div class="flex-center pt-1 d-hide fs18 sans" data-tmpl="tokenMsgBox">
     <span>[[[Token on]]]</span>
@@ -63,10 +60,10 @@
     <span data-tmpl="tokenParentName"></span>
   </div>
 </div>
-<div class="position-relative" data-tmpl="mainForm">
-  <div class="flex-center py-3" data-tmpl="oneBttnBox">
-    <button class="one-bttn w-auto" data-tmpl="oneBttn">[[[Create]]]!</button>
-  </div>
+<div class="wallet-tabs tabs" data-tmpl="walletTypeTabs">
+  <div class="wtab" data-tmpl="walletTabTmpl"></div>
+</div>
+<div class="position-relative p-3" data-tmpl="mainForm">
   <div class="py-2 fs14 grey">
     <span class="hoverbg pointer d-hide" data-tmpl="goBack"><span class="ico-arrowback fs12 me-1"></span> [[[pick a different asset]]]</span>
   </div>
@@ -106,6 +103,9 @@
     <img data-tmpl="childLogo" class="micro-icon"> <span data-tmpl="childName"></span> [[[wallet_wait_synced]]].
   </div>
 </div>
+<div class="flex-center py-3" data-tmpl="oneBttnBox">
+  <button class="one-bttn w-auto" data-tmpl="oneBttn">[[[Create]]]!</button>
+</div>
 {{end}}
 
 {{define "unlockWalletForm"}}
@@ -227,7 +227,7 @@
 {{end}}
 
 {{define "regAssetForm"}}
-<div class="text-center sans-light fs24 mb-3" data-tmpl="how">[[[how_reg]]]</div>
+<div class="text-center sans-light fs24 mb-3 mt-3" data-tmpl="how">[[[how_reg]]]</div>
 <div id="whatsabond" class="mt-1 fs14">
   <span class="ico-info"></span>
   <span class="ms-1">[[[whatsabond]]]</span>
diff --git a/client/webserver/site/src/html/init.tmpl b/client/webserver/site/src/html/init.tmpl
index 405dfc986a..2f4bc4f2ba 100644
--- a/client/webserver/site/src/html/init.tmpl
+++ b/client/webserver/site/src/html/init.tmpl
@@ -4,7 +4,7 @@
   <div class="position-absolute" id="forms">
 
     {{- /* App Initialization */ -}}
-    <form id="appPWForm">
+    <form id="appPWForm" class="dialog-panel">
       <div class="px-2 py-1 text-center fs28 sans-light">[[[Set App Password]]]</div>
       <div class="fs18 mt-2 sans-light">[[[reg_set_app_pw_msg]]]</div>
       <hr class="dashed my-4">
@@ -36,7 +36,7 @@
     </form>
 
     {{- /* Quick Config Form */ -}}
-    <form id="quickConfigForm" class="d-hide">
+    <form id="quickConfigForm" class="d-hide dialog-panel">
       <div class="px-2 py-1 text-center fs28 sans-light">[[[Quick Configuration]]]</div>
       <div id="qcChoices">
         <div class="fs18 mt-2">[[[quickconfig_wallet_header]]]</div>
@@ -83,7 +83,7 @@
     </form>
 
     {{- /* Seed Backup */ -}}
-    <form id="seedBackupForm" class="d-hide">
+    <form id="seedBackupForm" class="d-hide dialog-panel">
       <div class="px-2 py-1 text-center fs28 sans-light">[[[Backup App Seed]]]</div>
       <div id="sbWanna">
         <div class="fs18 mt-2">
diff --git a/client/webserver/site/src/html/login.tmpl b/client/webserver/site/src/html/login.tmpl
index 239d3834fd..34d3c5cff2 100644
--- a/client/webserver/site/src/html/login.tmpl
+++ b/client/webserver/site/src/html/login.tmpl
@@ -3,12 +3,12 @@
 <div id="main" data-handler="login" class="main align-items-center justify-content-center flex-column">
   <div class="d-flex flex-column w-100" id="forms">
     {{- /* LOGIN FORM */ -}}
-    <form class="mx-auto my-5 d-hide" id="loginForm">
+    <form class="mx-auto my-5 d-hide dialog-panel" id="loginForm">
       {{template "loginForm"}}
     </form>
 
      {{- /* RESET APP PASSWORD */ -}}
-    <form class="mx-auto my-5 d-hide" id="resetAppPWForm">
+    <form class="mx-auto my-5 d-hide dialog-panel" id="resetAppPWForm">
       {{template "appPassResetForm"}}
     </form>
   </div>
diff --git a/client/webserver/site/src/html/markets.tmpl b/client/webserver/site/src/html/markets.tmpl
index 99635b3456..4a19ccc1cb 100644
--- a/client/webserver/site/src/html/markets.tmpl
+++ b/client/webserver/site/src/html/markets.tmpl
@@ -64,7 +64,7 @@
       <div id="marketStatsV1" class="market-stats-v1 align-items-center justify-content-center p-2 flex-wrap">
         <div class="flex-center me-2 pointer hoverbg" data-tmpl="marketSelect">
           <div class="flex-center">
-            <img class="market-stats-pair-img" data-tmpl="baseIcon"><img class="market-stats-pair-img" data-tmpl="quoteIcon" class="ms-1">
+            <img class="market-stats-pair-img me-2" data-tmpl="baseIcon"><img class="market-stats-pair-img" data-tmpl="quoteIcon" class="ms-1">
           </div>
           <div class="flex-center fs24 demi ms-2">
             <span data-tmpl="baseSymbol"></span>-<span data-tmpl="quoteSymbol"></span>
@@ -83,26 +83,22 @@
 
         <div class="twentyfour flex-center align-items-stretch">
           <div class="data-point">
-            <span class="label grey">24 Hr.</span>
-          </div>
-    
-          <div class="data-point">
-            <span class="label grey">[[[:title:volume]]]</span>
-            <div class="flex-center me-2">
+            <span class="label grey">24H [[[:title:volume]]]</span>
+            <div class="me-2">
               <div data-tmpl="volume">-</div>
             </div>
           </div>
     
           <div class="data-point">
             <span class="label grey">High</span>
-            <div class="flex-center ms-2">
+            <div class="me-2">
               <div data-tmpl="high">-</div>
             </div>
           </div>
     
           <div class="data-point">
             <span class="label grey">Low</span>
-            <div class="flex-center ms-2">
+            <div class="me-2">
               <div data-tmpl="low">-</div>
             </div>
           </div>
@@ -137,7 +133,7 @@
               <table class="ordertable buys">
                 <tbody id="buyRows">
                   {{- /* This row is used by the app as a template. */ -}}
-                  <tr id="rowTemplate">
+                  <tr id="rowTemplate" class="hoverbg">
                     <td class="ps-2">
                       <div class="d-flex justify-content-start align-items-center">
                         <div data-tmpl="qty">-</div>
@@ -153,8 +149,8 @@
           </div> {{- /* END ORDER BOOK */ -}}
 
           {{- /* CHARTS */ -}}
-          <div class="flex-grow-1 position-relative">
-            <div class="fill-abs d-flex flex-column align-items-stretch">
+          <div class="flex-grow-1 position-relative charts">
+            <div class="fill-abs d-flex flex-column align-items-stretch px-2">
               <div id="candlesChart" class="market-chart">
                 <div id="durBttnBox"><button class="candle-dur-bttn" id="durBttnTemplate"></button></div>
               </div>
@@ -195,297 +191,305 @@
           <div class="order-panel pb-3 position-relative">
             <div id="orderScroller" class="d-flex flex-column align-items-stretch">
 
-              {{- /* TOKEN APPROVAL */ -}}
-              <div class="fs15 pt-1 pb-3 text-center brdrbottom d-hide" id="tokenApproval">
-                <span class="p-3 flex-center fs16 grey d-hide" id="approvalRequiredBuy">[[[approval_required_buy]]]</span>
-                <span class="p-3 flex-center fs16 grey d-hide" id="approvalRequiredSell">[[[approval_required_sell]]]</span>
-                <span class="p-3 flex-center fs16 grey d-hide" id="approvalRequiredBoth">[[[approval_required_both]]]</span>
-                <button id="approveBaseBttn" type="button" class="pointer hoverbg text-center p-2 text-nowrap">[[[Approve]]] <span id="baseTokenAsset"></span></button>
-                <div id="approvalPendingBase" class="d-hide flex-center position-relative py-2">
-                  <span class="px-1" id="approvalPendingBaseSymbol"></span> [[[approval_change_pending]]] <div class="px-2 ico-spinner spinner fs15"></div>
-                </div>
-                <button id="approveQuoteBttn" type="button" class="pointer hoverbg text-center p-2 text-nowrap">[[[Approve]]] <span id="quoteTokenAsset"></span></button>
-                <div id="approvalPendingQuote" class="d-hide flex-center position-relative py-2">
-                  <span class="px-1" id="approvalPendingQuoteSymbol"></span> [[[approval_change_pending]]] <div class="px-2 ico-spinner spinner fs15"></div>
+              <div class="create-order-panel">
+                {{- /* TOKEN APPROVAL */ -}}
+                <div class="fs15 pt-1 pb-3 text-center brdrbottom d-hide" id="tokenApproval">
+                  <span class="p-3 flex-center fs16 grey d-hide" id="approvalRequiredBuy">[[[approval_required_buy]]]</span>
+                  <span class="p-3 flex-center fs16 grey d-hide" id="approvalRequiredSell">[[[approval_required_sell]]]</span>
+                  <span class="p-3 flex-center fs16 grey d-hide" id="approvalRequiredBoth">[[[approval_required_both]]]</span>
+                  <button id="approveBaseBttn" type="button" class="pointer hoverbg text-center p-2 text-nowrap">[[[Approve]]] <span id="baseTokenAsset"></span></button>
+                  <div id="approvalPendingBase" class="d-hide flex-center position-relative py-2">
+                    <span class="px-1" id="approvalPendingBaseSymbol"></span> [[[approval_change_pending]]] <div class="px-2 ico-spinner spinner fs15"></div>
+                  </div>
+                  <button id="approveQuoteBttn" type="button" class="pointer hoverbg text-center p-2 text-nowrap">[[[Approve]]] <span id="quoteTokenAsset"></span></button>
+                  <div id="approvalPendingQuote" class="d-hide flex-center position-relative py-2">
+                    <span class="px-1" id="approvalPendingQuoteSymbol"></span> [[[approval_change_pending]]] <div class="px-2 ico-spinner spinner fs15"></div>
+                  </div>
                 </div>
-              </div>
-
-              {{- /* ORDER TYPE BUTTONS */ -}}
-              <div id="orderTypeBttns" class="fs14 d-hide d-flex justify-content-start align-items-stretch d-hide min-fit">
-                <button id="limitBttn" type="button" class="flex-center px-3 py-0 markettab brdrbottom selected">[[[Limit Order]]]</button>
-                <button id="marketBttn" type="button" class="flex-center px-3 py-0 markettab brdrbottom brdrleft brdrright">[[[Market Order]]]</button>
-              </div>
-
-              <div class="fs15 pt-3 text-center d-hide" id="loaderMsg"></div>
-
-              {{- /* CREATE ACCOUNT TO TRADE */ -}}
-              <div id="notRegistered" class="d-hide">
-                <div class="p-3 flex-center fs16 grey">[[[create_account_to_trade]]]</div>
-                <div class="brdrtop brdrbottom flex-center p-2">
-                  <p class="text-center fs14 p-2 m-0">[[[need_to_register_msg]]]</p>
-                  <button data-tmpl="registerBttn" type="button" class="pointer hoverbg text-center p-2 text-nowrap">[[[Create Account]]]</button>
+  
+                {{- /* ORDER TYPE BUTTONS */ -}}
+                <div id="orderTypeBttns" class="fs14 d-hide d-flex justify-content-start align-items-stretch d-hide min-fit">
+                  <button id="limitBttn" type="button" class="flex-center px-3 py-0 markettab selected">[[[Limit Order]]]</button>
+                  <button id="marketBttn" type="button" class="flex-center px-3 py-0 markettab brdrleft brdrright">[[[Market Order]]]</button>
                 </div>
-              </div>
-
-              {{- /* BOND CREATION PENDING */ -}}
-              <div class="d-hide p-2 mt-2" id="bondCreationPending">
-                <div class="p-0 w-100">
-                  <div class="d-flex flex-column justify-content-center align-items-center">
-                    <p id="postingBondsShortlyTitle" class="title">[[[posting_bonds_shortly]]]
-                    </p>
-                    <p id="bondCreationPendingMessage">[[[bond_creation_pending_msg]]]
-                    </p>
+  
+                <div class="fs15 pt-3 text-center d-hide" id="loaderMsg"></div>
+  
+                {{- /* CREATE ACCOUNT TO TRADE */ -}}
+                <div id="notRegistered" class="d-hide">
+                  <div class="text-center fs20 sans-light py-2">[[[create_account_to_trade]]]</div>
+                  <div class="brdrtop flex-center p-2">
+                    <p class="text-center fs14 p-2 m-0">[[[need_to_register_msg]]]</p>
+                    <button data-tmpl="registerBttn" type="button" class="pointer hoverbg text-center p-2 text-nowrap">[[[Create Account]]]</button>
                   </div>
                 </div>
-              </div>
-
-              {{- /* REGISTRATION STATUS */ -}}
-              <div class="d-hide p-2 mt-2" id="registrationStatus">
-                <div class="p-0 w-100">
-                  <div class="d-flex flex-column justify-content-center align-items-center">
-                    <span id="regStatusTitle" class="title"></span>
-                    <p id="regStatusMessage">[[[reg_status_msg]]]
-                    </p>
-                    <span id="regStatusConfsDisplay"></span>
+  
+                {{- /* BOND CREATION PENDING */ -}}
+                <div class="d-hide p-2" id="bondCreationPending">
+                  <div class="p-0 w-100">
+                    <div class="d-flex flex-column justify-content-center align-items-center">
+                      <p id="postingBondsShortlyTitle" class="title">[[[posting_bonds_shortly]]]
+                      </p>
+                      <p id="bondCreationPendingMessage">[[[bond_creation_pending_msg]]]
+                      </p>
+                    </div>
                   </div>
                 </div>
-              </div>
-
-              {{- /* BOND REQUIRED TO TRADE */ -}}
-              <div class="d-hide p-2 mt-2" id="bondRequired">
-                <div class="p-3 flex-center fs16 grey">[[[action_required_to_trade]]]</div>
-                <div class="brdrtop brdrbottom flex-center p-2">
-                  <p class="text-center fs14 sans-light p-2 m-0">
-                  [[[acct_tier_post_bond]]]
-                  <a id="dexSettingsLink" class="fs15 hoverbg subtlelink">[[[enable_bond_maintenance]]]</a>
-                  </p>
-                </div>
-              </div>
-
-              {{- /* MM RUNNING */ -}}
-              <div class="d-hide fs15 pt-1 pb-3 text-center brdrbottom" id="mmRunning">
-                <div class="p-0 w-100">
-                  <div class="d-flex flex-column justify-content-center align-items-center">
-                    <span class="p-3 flex-center fs16 grey">[[[market_making_running]]]</span>
-                    <p class="text-center fs14 p-2 m-0">[[[cannot_manually_trade]]]</p>
+  
+                {{- /* REGISTRATION STATUS */ -}}
+                <div class="d-hide p-2" id="registrationStatus">
+                  <div class="p-0 w-100">
+                    <div class="d-flex flex-column justify-content-center align-items-center">
+                      <span id="regStatusTitle" class="title"></span>
+                      <p id="regStatusMessage">[[[reg_status_msg]]]
+                      </p>
+                      <span id="regStatusConfsDisplay"></span>
+                    </div>
                   </div>
                 </div>
-              </div>
-
-              {{- /* ORDER FORM */ -}}
-              <form id="orderForm" class="p-3 d-hide">
-                <div class="p-0 w-100">
-
-                  {{- /* BUY - SELL SELECTOR */ -}}
-                  <div class="d-flex justify-content-start pb-2 fs14">
-                    <button id="buyBttn" type="button" class="buygreen-bg selected">
-                      [[[Buy]]]
-                      <span data-unit="base" data-unit-format="noparent"></span>
-                    </button>
-                    <button id="sellBttn" type="button" class="sellred-bg ms-2">
-                      [[[Sell]]]
-                      <span data-unit="base" data-unit-format="noparent"></span>
-                    </button>
-                    <span></span>
+  
+                {{- /* BOND REQUIRED TO TRADE */ -}}
+                <div class="d-hide p-2 mt-2" id="bondRequired">
+                  <div class="p-3 flex-center fs16 grey">[[[action_required_to_trade]]]</div>
+                  <div class="brdrtop brdrbottom flex-center p-2">
+                    <p class="text-center fs14 sans-light p-2 m-0">
+                    [[[acct_tier_post_bond]]]
+                    <a id="dexSettingsLink" class="fs15 hoverbg subtlelink">[[[enable_bond_maintenance]]]</a>
+                    </p>
                   </div>
-
-                  {{- /* MARKET CONFIG */ -}}
-                  <div class="d-flex justify-content-between my-2 fs14">
-                    <div>
-                      [[[:title:lot_size]]]:
-                      <span id="lotSize"></span>
-                      <span data-unit="base" data-unit-format="noparent"></span>
-                    </div>
-                    <div>
-                      [[[Rate Step]]]:
-                      <span id="rateStep"></span>
-                      <span data-unit="quote" data-unit-format="noparent"></span>
+                </div>
+  
+                {{- /* MM RUNNING */ -}}
+                <div class="d-hide fs15 pt-1 pb-3 text-center brdrbottom" id="mmRunning">
+                  <div class="p-0 w-100">
+                    <div class="d-flex flex-column justify-content-center align-items-center">
+                      <span class="p-3 flex-center fs16 grey">[[[market_making_running]]]</span>
+                      <p class="text-center fs14 p-2 m-0">[[[cannot_manually_trade]]]</p>
                     </div>
                   </div>
-                  <div class="my-2 fs14 h21" id="maxBox">
-                    <div id="maxOrd" class="d-hide position-relative pointer">
-                      <span id="maxLotBox" class="d-hide">
-                        <span class="underline">[[[Max]]] <span id="maxLbl">[[[Buy]]]</span></span>:
-                        <span id="maxFromLots"></span>
-                        <span id="maxFromLotsLbl">[[[lot]]]</span>
-                      </span>
-                      <span id="maxAboveZero" class="d-hide">
-                        ,
-                        <span id="maxFromAmt"></span>
-                        <span id="maxFromTicker"></span>
-                        <!-- &rarr;
-                        <span id="maxToAmt"></span>
-                        <span id="maxToTicker"></span> -->
-                      </span>
+                </div>
+  
+                {{- /* ORDER FORM */ -}}
+                <form id="orderForm" class="p-3 d-hide">
+                  <div class="p-0 w-100">
+  
+                    {{- /* BUY - SELL SELECTOR */ -}}
+                    <div class="d-flex justify-content-start pb-2 fs14">
+                      <button id="buyBttn" type="button" class="buygreen-bg selected">
+                        [[[Buy]]]
+                        <span data-unit="base" data-unit-format="noparent"></span>
+                      </button>
+                      <button id="sellBttn" type="button" class="sellred-bg ms-2">
+                        [[[Sell]]]
+                        <span data-unit="base" data-unit-format="noparent"></span>
+                      </button>
+                      <span></span>
                     </div>
-                  </div>
-
-                  {{- /* RATE AND QUANTITY INPUTS */ -}}
-                  <div class="d-flex mt-3" id="priceBox">
-                    <label for="rateField" class="form-label col-6 d-flex align-items-center p-0">[[[:title:price]]]</label>
-                    <div class="col-18 p-0 position-relative">
-                      <input type="number" class="form-control select bg1" id="rateField">
-                      <span class="unitbox"><span class="unit" data-unit="quote" data-unit-format="noparent"></span>/<span class="unit" data-unit="base" data-unit-format="noparent"></span></span>
+  
+                    {{- /* MARKET CONFIG */ -}}
+                    <div class="d-flex justify-content-between my-2 fs14">
+                      <div>
+                        [[[:title:lot_size]]]:
+                        <span id="lotSize"></span>
+                        <span data-unit="base" data-unit-format="noparent"></span>
+                      </div>
+                      <div>
+                        [[[Rate Step]]]:
+                        <span id="rateStep"></span>
+                        <span data-unit="quote" data-unit-format="noparent"></span>
+                      </div>
                     </div>
-                  </div>
-                  <div class="d-flex mt-4" id="qtyBox">
-                    <label for="qtyField" class="form-label col-6 d-flex align-items-center p-0">[[[Quantity]]]</label>
-                    <div class="col-6 p-0 position-relative">
-                      <input type="number" class="form-control select bg1" id="lotField">
-                      <span class="unit unitbox">[[[:title:lots]]]</span>
+                    <div class="my-2 fs14 h21" id="maxBox">
+                      <div id="maxOrd" class="d-hide position-relative pointer">
+                        <span id="maxLotBox" class="d-hide">
+                          <span class="underline">[[[Max]]] <span id="maxLbl">[[[Buy]]]</span></span>:
+                          <span id="maxFromLots"></span>
+                          <span id="maxFromLotsLbl">[[[lot]]]</span>
+                        </span>
+                        <span id="maxAboveZero" class="d-hide">
+                          ,
+                          <span id="maxFromAmt"></span>
+                          <span id="maxFromTicker"></span>
+                          <!-- &rarr;
+                          <span id="maxToAmt"></span>
+                          <span id="maxToTicker"></span> -->
+                        </span>
+                      </div>
                     </div>
-                    <div class="col-1 p-0"></div> {{/* spacer */}}
-                    <div class="col-11 p-0 position-relative">
-                      <input type="number" class="form-control select bg1" id="qtyField">
-                      <span class="unit unitbox" data-unit="base" data-unit-format="noparent"></span>
+  
+                    {{- /* RATE AND QUANTITY INPUTS */ -}}
+                    <div class="d-flex mt-3" id="priceBox">
+                      <label for="rateField" class="form-label col-6 d-flex align-items-center p-0">[[[:title:price]]]</label>
+                      <div class="col-18 p-0 position-relative">
+                        <input type="number" class="form-control select bg1" id="rateField">
+                        <span class="unitbox"><span class="unit" data-unit="quote" data-unit-format="noparent"></span>/<span class="unit" data-unit="base" data-unit-format="noparent"></span></span>
+                      </div>
                     </div>
-                  </div>
-
-                  {{- /* MARKET BUY ORDER QUANTITY INPUT */ -}}
-                  <div id="mktBuyBox" class="d-hide">
-                    <div class="text-center mt-2 fs15">
-                      [[[min trade is about]]] <span id="minMktBuy"></span> <span data-unit="quote" data-unit-format="noparent"></span>
+                    <div class="d-flex mt-4" id="qtyBox">
+                      <label for="qtyField" class="form-label col-6 d-flex align-items-center p-0">[[[Quantity]]]</label>
+                      <div class="col-6 p-0 position-relative">
+                        <input type="number" class="form-control select bg1" id="lotField">
+                        <span class="unit unitbox">[[[:title:lots]]]</span>
+                      </div>
+                      <div class="col-1 p-0"></div> {{/* spacer */}}
+                      <div class="col-11 p-0 position-relative">
+                        <input type="number" class="form-control select bg1" id="qtyField">
+                        <span class="unit unitbox" data-unit="base" data-unit-format="noparent"></span>
+                      </div>
                     </div>
-                    <div class="d-flex justify-content-center mt-2">
-                      <!-- <label for="mktBuyField" class="flex-center col-12 p-0">Trading</label> -->
-                      <div class="col-12 p-0 position-relative">
-                        <input type="number" class="form-control select bg1" id="mktBuyField">
-                        <span class="unit unitbox" data-unit="quote" data-unit-format="noparent"></span>
+  
+                    {{- /* MARKET BUY ORDER QUANTITY INPUT */ -}}
+                    <div id="mktBuyBox" class="d-hide">
+                      <div class="text-center mt-2 fs15">
+                        [[[min trade is about]]] <span id="minMktBuy"></span> <span data-unit="quote" data-unit-format="noparent"></span>
+                      </div>
+                      <div class="d-flex justify-content-center mt-2">
+                        <!-- <label for="mktBuyField" class="flex-center col-12 p-0">Trading</label> -->
+                        <div class="col-12 p-0 position-relative">
+                          <input type="number" class="form-control select bg1" id="mktBuyField">
+                          <span class="unit unitbox" data-unit="quote" data-unit-format="noparent"></span>
+                        </div>
+                      </div>
+                      <div class="p-0 fs14 flex-center mt-1">
+                        <span>
+                          ~ <span id="mktBuyScore">0</span> <span data-unit="base" data-unit-format="noparent"></span>
+                          @ <span id="mktBuyLots">0</span> <span >[[[:title:lots]]]</span><br>
+  
+                        </span>
                       </div>
                     </div>
-                    <div class="p-0 fs14 flex-center mt-1">
-                      <span>
-                        ~ <span id="mktBuyScore">0</span> <span data-unit="base" data-unit-format="noparent"></span>
-                        @ <span id="mktBuyLots">0</span> <span >[[[:title:lots]]]</span><br>
-
-                      </span>
+  
+                    {{- /* ORDER PREVIEW */ -}}
+                    <div class="mt-2 fs14 text-end" id="orderPreview"></div>
+  
+                    {{- /* TIME-IN-FORCE CHECK BOX */ -}}
+                    <div class="my-1 text-start form-check" id="tifBox">
+                      <input id="tifNow" class="form-check-input" type="checkbox" value="">
+                      <label class="form-check-label" for="tifNow">
+                        [[[Immediate or cancel]]]
+                        <span class="ico-info fs12" data-tooltip="[[[immediate_explanation]]]"></span>
+                      </label>
+                    </div>
+  
+                    {{- /* SUBMIT ORDER BUTTON */ -}}
+                    <div class="text-end">
+                      <button id="submitBttn" type="button" class="my-1 fs14 submit text-center buygreen-bg"></button> {{/* textContent set by script */}}
                     </div>
                   </div>
+                  <div class="fs15 pt-3 text-center d-hide errcolor text-break" id="orderErr"></div>
+                </form>
+              </div>
 
-                  {{- /* ORDER PREVIEW */ -}}
-                  <div class="mt-2 fs14 text-end" id="orderPreview"></div>
-
-                  {{- /* TIME-IN-FORCE CHECK BOX */ -}}
-                  <div class="my-1 text-start form-check" id="tifBox">
-                    <input id="tifNow" class="form-check-input" type="checkbox" value="">
-                    <label class="form-check-label" for="tifNow">
-                      [[[Immediate or cancel]]]
-                      <span class="ico-info fs12" data-tooltip="[[[immediate_explanation]]]"></span>
-                    </label>
-                  </div>
-
-                  {{- /* SUBMIT ORDER BUTTON */ -}}
-                  <div class="text-end">
-                    <button id="submitBttn" type="button" class="my-1 fs14 submit text-center buygreen-bg"></button> {{/* textContent set by script */}}
-                  </div>
-                </div>
-                <div class="fs15 pt-3 text-center d-hide errcolor text-break" id="orderErr"></div>
-              </form>
-
+ 
               {{- /* BALANCES */ -}}
-              <div id="noWallet" class="p-3 brdrbottom flex-center fs16 grey d-hide">
-                Create wallets to trade
-              </div>
-              <div id="walletInfoTmpl" class="brdrtop brdrbottom mb-3 d-flex flex-column align-items-stretch min-fit">
-                <div class="d-flex align-items-center px-3 py-1 brdrbottom" data-tmpl="walletIcons">
-                  <img data-tmpl="logo" class="micro-icon me-1">
-                  <span data-tmpl="symbol"></span>
-                  <div class="flex-grow-1"></div>
-                  <div data-tmpl="walletState" class="fs12">{{template "walletIcons"}}</div>
-                  <div data-tmpl="walletAddr" class="ico-qrcode fs12 p-2 pointer hoverbg"></div>
-                  <span class="ico-expired fs16 ps-1" data-tmpl="expired" data-tooltip="[[[outdated_tooltip]]]"></span>
+              <div class="balances-panel mb-2">
+                <div id="noWallet" class="p-3 brdrbottom flex-center fs16 grey d-hide">
+                  Create wallets to trade
                 </div>
-                <div data-tmpl="unsupported" class="flex-center position-relative py-2 d-hide">
-                  <div class="fs13 ico-cross"></div>
-                  <span class="fs15 grey ms-1">asset not supported</span>
-                </div>
-                <div data-tmpl="connect" class="pointer d-hide" data-tooltip="[[[connect_refresh_tooltip]]]">
-                  <div class="ico-sleeping"></div>
-                </div>
-                <div data-tmpl="newWalletRow" class="flex-center p-2 d-hide">
-                  <button data-tmpl="newWalletBttn" type="button" class="pointer hoverbg text-center p-2 text-nowrap">[[[add_a_wallet]]]</button>
-                </div>
-                <div data-tmpl="spinner" class="flex-center position-relative py-2">
-                  <div class="ico-spinner spinner fs15"></div>
-                </div>
-                <div data-tmpl="balanceRows" class="d-flex flex-column align-items-stretch brdrbottom lh1">
-                  <div class="d-flex justify-content-between align-items-center px-3 py-1 fs15" data-tmpl="balanceRowTmpl">
-                    <span data-tmpl="title"></span>
-                    <div data-tmpl="bal" class="flex-center"></div>
+                <div id="walletInfoTmpl" class="d-flex flex-column align-items-stretch min-fit mb-3">
+                  <div class="d-flex align-items-center px-3 py-1 brdrbottom brdrtop" data-tmpl="walletIcons">
+                    <img data-tmpl="logo" class="micro-icon me-1">
+                    <span data-tmpl="symbol"></span>
+                    <div class="flex-grow-1"></div>
+                    <div data-tmpl="walletState" class="fs12">{{template "walletIcons"}}</div>
+                    <div data-tmpl="walletAddr" class="ico-qrcode fs12 p-2 pointer hoverbg"></div>
+                    <span class="ico-expired fs16 ps-1" data-tmpl="expired" data-tooltip="[[[outdated_tooltip]]]"></span>
+                  </div>
+                  <div data-tmpl="unsupported" class="flex-center position-relative py-2 d-hide">
+                    <div class="fs13 ico-cross"></div>
+                    <span class="fs15 grey ms-1">asset not supported</span>
+                  </div>
+                  <div data-tmpl="connect" class="pointer d-hide" data-tooltip="[[[connect_refresh_tooltip]]]">
+                    <div class="ico-sleeping"></div>
+                  </div>
+                  <div data-tmpl="newWalletRow" class="flex-center p-2 d-hide">
+                    <button data-tmpl="newWalletBttn" type="button" class="pointer hoverbg text-center p-2 text-nowrap">[[[add_a_wallet]]]</button>
+                  </div>
+                  <div data-tmpl="spinner" class="flex-center position-relative py-2">
+                    <div class="ico-spinner spinner fs15"></div>
+                  </div>
+                  <div data-tmpl="balanceRows" class="d-flex flex-column align-items-stretch lh1">
+                    <div class="d-flex justify-content-between align-items-center px-3 py-1 fs15" data-tmpl="balanceRowTmpl">
+                      <span data-tmpl="title"></span>
+                      <div data-tmpl="bal" class="flex-center"></div>
+                    </div>
                   </div>
                 </div>
               </div>
 
               {{- /* USER ORDERS */ -}}
-              <div class="text-center fs20 sans-light my-1">
-                [[[Your Orders]]]
-              </div>
-              <div id="unreadyOrdersMsg" class="d-hide px-3 py-1 flex-center fs16 red">[[[unready_wallets_msg]]]</div>
-              <div id="userNoOrders" class="p-3 flex-center fs16 grey">no active orders</div>
-              <div id="userOrders">
-                <div id="userOrderTmpl" class="user-order">
-                  <div data-tmpl="header" class="user-order-header pointer">
-                    <div data-tmpl="sideLight" class="side-indicator"></div>
-                    <span data-tmpl="side"></span>
-                    <span data-tmpl="qty" class="ms-1"></span>
-                    <span data-tmpl="baseSymbol" class="ms-1 grey"></span>
-                    <span class="ms-1">@</span>
-                    <span data-tmpl="rate" class="ms-1"></span>
-                    <span class="flex-grow-1 d-flex align-items-center justify-content-end">
-                      <span data-tmpl="status"></span>
-                      <span data-tmpl="activeLight" class="active-indicator active"></span>
-                    </span>
-                    <div data-tmpl="expander" class="p-1 pointer hoverbg fs11 ico-arrowdown"></div>
-                    
-                    <!-- <span class="fs11 ico-open ms-2"></span> -->
-                  </div>
-                  <div data-tmpl="details" class="order-details d-hide">
-                    <div class="user-order-datum full-span d-flex flex-row justify-content-start align-items-center brdrbottom fs14">
-                      <span data-tmpl="accelerateBttn" class="ico-rocket pointer hoverbg d-hide py-2 px-3 me-1" data-tooltip="[[[accelerate_order]]]"></span>
-                      <span data-tmpl="cancelBttn" class="ico-cross pointer hoverbg fs11 d-hide py-2 px-3 mx-1" data-tooltip="[[[cancel_order]]]"></span>
-                      <a data-tmpl="link" class="ico-open pointer hoverbg fs13 plainlink py-2 px-3 ms-1" data-tooltip="[[[order details]]]"></a>
-                    </div>
-                    <div class="user-order-datum">
-                      <span>[[[Type]]]</span>
-                      <span data-tmpl="type"></span>
-                    </div>
-                    <div class="user-order-datum">
-                      <span>[[[Side]]]</span>
+              <div class="user-order-panel mb-2">
+                <div class="text-center fs20 sans-light my-1">
+                  [[[Your Orders]]]
+                </div>
+                <div id="unreadyOrdersMsg" class="d-hide px-3 py-1 flex-center fs16 red">[[[unready_wallets_msg]]]</div>
+                <div id="userNoOrders" class="p-3 flex-center fs16 grey">no active orders</div>
+                <div id="userOrders">
+                  <div id="userOrderTmpl" class="user-order hoverbg">
+                    <div data-tmpl="header" class="user-order-header pointer">
+                      <div data-tmpl="sideLight" class="side-indicator"></div>
                       <span data-tmpl="side"></span>
+                      <span data-tmpl="qty" class="ms-1"></span>
+                      <span data-tmpl="baseSymbol" class="ms-1 grey"></span>
+                      <span class="ms-1">@</span>
+                      <span data-tmpl="rate" class="ms-1"></span>
+                      <span class="flex-grow-1 d-flex align-items-center justify-content-end">
+                        <span data-tmpl="status"></span>
+                        <span data-tmpl="activeLight" class="active-indicator active"></span>
+                      </span>
+                      <div data-tmpl="expander" class="p-1 pointer hoverbg fs11 ico-arrowdown"></div>
+                      
+                      <!-- <span class="fs11 ico-open ms-2"></span> -->
                     </div>
-                    <div class="user-order-datum">
-                      <span>[[[Status]]]</span>
-                      <span data-tmpl="status"></span>
-                    </div>
-                    <div class="user-order-datum">
-                      <span>[[[Age]]]</span>
-                      <span data-tmpl="age"></span>
-                    </div>
-                    <div class="user-order-datum">
-                      <span>[[[Quantity]]]</span>
-                      <span data-tmpl="qty"></span>
-                    </div>
-                    <div class="user-order-datum">
-                      <span>[[[Rate]]]</span>
-                      <span data-tmpl="rate"></span>
-                    </div>
-                    <div class="user-order-datum">
-                      <span>[[[Filled]]]</span>
-                      <span data-tmpl="filled"></span>
-                    </div>
-                    <div class="user-order-datum">
-                      <span>[[[Settled]]]</span>
-                      <span data-tmpl="settled"></span>
+                    <div data-tmpl="details" class="order-details d-hide">
+                      <div class="user-order-datum full-span d-flex flex-row justify-content-start align-items-center brdrbottom fs14">
+                        <span data-tmpl="accelerateBttn" class="ico-rocket pointer hoverbg d-hide py-2 px-3 me-1" data-tooltip="[[[accelerate_order]]]"></span>
+                        <span data-tmpl="cancelBttn" class="ico-cross pointer hoverbg fs11 d-hide py-2 px-3 mx-1" data-tooltip="[[[cancel_order]]]"></span>
+                        <a data-tmpl="link" class="ico-open pointer hoverbg fs13 plainlink py-2 px-3 ms-1" data-tooltip="[[[order details]]]"></a>
+                      </div>
+                      <div class="user-order-datum">
+                        <span>[[[Type]]]</span>
+                        <span data-tmpl="type"></span>
+                      </div>
+                      <div class="user-order-datum">
+                        <span>[[[Side]]]</span>
+                        <span data-tmpl="side"></span>
+                      </div>
+                      <div class="user-order-datum">
+                        <span>[[[Status]]]</span>
+                        <span data-tmpl="status"></span>
+                      </div>
+                      <div class="user-order-datum">
+                        <span>[[[Age]]]</span>
+                        <span data-tmpl="age"></span>
+                      </div>
+                      <div class="user-order-datum">
+                        <span>[[[Quantity]]]</span>
+                        <span data-tmpl="qty"></span>
+                      </div>
+                      <div class="user-order-datum">
+                        <span>[[[Rate]]]</span>
+                        <span data-tmpl="rate"></span>
+                      </div>
+                      <div class="user-order-datum">
+                        <span>[[[Filled]]]</span>
+                        <span data-tmpl="filled"></span>
+                      </div>
+                      <div class="user-order-datum">
+                        <span>[[[Settled]]]</span>
+                        <span data-tmpl="settled"></span>
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>{{- /* END USER ORDERS */ -}}
+                <a href="/orders" class="flex-center py-1 plainlink hoverbg">[[[view order history]]]</a>
+              </div>
+              {{- /* END USER ORDERS */ -}}
 
-              <a href="/orders" class="flex-center py-1 plainlink hoverbg">[[[view order history]]]</a>
 
               {{- /* RECENT MATCHES */ -}}
-              <div id=recentMatchesBox  class="d-flex flex-column align-items-stretch px-3 pb-4 brdrtop">
-                <div class="text-center fs20 sans-light my-3">[[[Recent Matches]]]</div>
+              <div id=recentMatchesBox  class="d-flex flex-column align-items-stretch px-3 pb-4">
+                <div class="text-center fs20 sans-light my-1">[[[Recent Matches]]]</div>
                 <table id="recentMatchesTable" class="ordertable">
                   <thead>
                     <tr class="pointer">
@@ -515,27 +519,27 @@
   <div id="forms" class="d-hide">
 
     {{- /* UNLOCK WALLET */ -}}
-    <form class="position-relative d-hide" id="unlockWalletForm" autocomplete="off">
+    <form class="position-relative d-hide dialog-panel" id="unlockWalletForm" autocomplete="off">
       {{template "unlockWalletForm"}}
     </form>
 
     {{- /* DEPOSIT ADDRESS */ -}}
-    <form class="position-relative flex-center flex-column fs20 d-hide" id="deposit">
+    <form class="position-relative flex-center flex-column fs20 d-hide dialog-panel" id="deposit">
       {{template "depositAddress"}}
     </form>
 
     {{- /* NEW WALLET */ -}}
-    <form class="m-auto d-hide" id="newWalletForm" autocomplete="off">
+    <form class="m-auto d-hide dialog-panel" id="newWalletForm" autocomplete="off">
       {{template "newWalletForm"}}
     </form>
 
     {{- /* TOGGLE WALLET STATUS AUTHORIZATION */ -}}
-    <form class="d-hide" id="toggleWalletStatusConfirm">
+    <form class="d-hide dialog-panel" id="toggleWalletStatusConfirm">
       {{template "toggleWalletStatusConfirm"}}
     </form>
 
     {{- /* VERIFY FORM */ -}}
-      <form class="position-relative fs16 text-center d-hide" id="verifyForm" autocomplete="off">
+      <form class="position-relative fs16 text-center d-hide dialog-panel" id="verifyForm" autocomplete="off">
         <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
         <div class="py-1 text-center fs18 position-relative header buygreen-bg" id="vHeader">
           <span id="vBuySell"></span> <span data-unit="base"></span>
@@ -792,10 +796,10 @@
       </form>
 
       {{- /* CANCEL ORDER FORM */ -}}
-      <form class="d-hide" id="cancelForm" autocomplete="off">
+      <form class="d-hide dialog-panel" id="cancelForm" autocomplete="off">
         {{template "cancelOrderForm" .}}
       </form>
-      <form class="d-hide" id="accelerateForm">
+      <form class="d-hide dialog-panel" id="accelerateForm">
         {{template "accelerateForm" .}}
       </form>
     </div>
diff --git a/client/webserver/site/src/html/mm.tmpl b/client/webserver/site/src/html/mm.tmpl
index ee7d67cf00..69b799bc6c 100644
--- a/client/webserver/site/src/html/mm.tmpl
+++ b/client/webserver/site/src/html/mm.tmpl
@@ -48,7 +48,7 @@
     {{template "orderOptionTemplates"}}
 
     {{- /* APP PASSWORD */ -}}
-    <form id="pwForm" class="d-flex flex-column align-items-stretch">
+    <form id="pwForm" class="d-flex flex-column align-items-stretch dialog-panel">
       <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       <div>
         <label for="pwInput" class="form-label pt-3 ps-1 mb-1">[[[App Password]]]</label>
@@ -60,12 +60,12 @@
     </form>
 
     {{- /* NEW WALLET */ -}}
-    <form class="position-relative d-hide" id="newWalletForm" autocomplete="off">
+    <form class="position-relative d-hide dialog-panel" id="newWalletForm" autocomplete="off">
       {{template "newWalletForm"}}
     </form>
 
     {{- /* ADD BOT FORM */ -}}
-    <form class="position-relative d-hide" id="addBotForm" autocomplete="off">
+    <form class="position-relative d-hide dialog-panel" id="addBotForm" autocomplete="off">
 
       {{- /* ABSOLUTELY-POSITIONED CUSTOM ASSET SELECT */ -}}
       <div id="assetDropdown" class="position-absolute d-flex flex-column align-items-stretch d-hide"></div>
diff --git a/client/webserver/site/src/html/order.tmpl b/client/webserver/site/src/html/order.tmpl
index ca1ad702b2..22b97aad0b 100644
--- a/client/webserver/site/src/html/order.tmpl
+++ b/client/webserver/site/src/html/order.tmpl
@@ -40,7 +40,7 @@
       </div>
       <div class="order-datum">
         <div>[[[Offering]]]</div>
-        <div>{{$ord.OfferString}} {{$ord.FromTicker}} {{template "microIcon" $ord.FromTicker}}</div>
+        <div>{{$ord.OfferString}} {{$ord.FromTicker}} {{template "microIcon" $ord.BaseSymbol}}</div>
       </div>
       <div class="order-datum">
         <div>[[[Asking]]]</div>
@@ -96,7 +96,7 @@
     <div class="fs18 demi pt-4 pb-2{{if eq (len $ord.Matches) 0}} d-hide{{end}}" id="matchesLabel">[[[Matches]]]</div>
     <div class="d-flex align-items-stretch justify-content-start flex-wrap" id="matchBox">
 
-      <div class="match-card" id="matchCardTmpl">
+      <div class="match-card dialog-panel" id="matchCardTmpl">
         <div class="match-header">
           <div class="d-flex justify-content-between align-items-center">
             <span class="match-data-label ms-3">[[[Match ID]]]</span>
diff --git a/client/webserver/site/src/html/orders.tmpl b/client/webserver/site/src/html/orders.tmpl
index 5579f2df2e..fd0b17006e 100644
--- a/client/webserver/site/src/html/orders.tmpl
+++ b/client/webserver/site/src/html/orders.tmpl
@@ -89,7 +89,7 @@
   {{- /* POP UP FORMS */ -}}
   <div id="forms" class="d-hide">
     {{- /* DELETE ARCHIVED RECORDS FORM */ -}}
-    <form class="d-hide" id="deleteArchivedRecordsForm"><div class="form-closer hoverbg"><span class="ico-cross"></span></div>
+    <form class="d-hide dialog-panel" id="deleteArchivedRecordsForm"><div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       <div class="py-1 text-center position-relative fs22 sans-light">
        [[[delete_archived_records]]]
       </div>
diff --git a/client/webserver/site/src/html/register.tmpl b/client/webserver/site/src/html/register.tmpl
index 72e0b53061..ddb4f31d90 100644
--- a/client/webserver/site/src/html/register.tmpl
+++ b/client/webserver/site/src/html/register.tmpl
@@ -4,42 +4,42 @@
   <div class="position-absolute" id="forms">
 
     {{- /* LOGIN FORM */ -}}
-    <form class="d-hide{{if and (not .UserInfo.Authed) .Initialized }} selected{{end}}" id="loginForm">
+    <form class="d-hide{{if and (not .UserInfo.Authed) .Initialized }} selected{{end}} dialog-panel" id="loginForm">
       {{template "loginForm"}}
     </form>
 
     {{- /* RESET APP PASSWORD */ -}}
-    <form class="mx-auto my-5 d-hide" id="resetAppPWForm">
+    <form class="mx-auto my-5 d-hide dialog-panel" id="resetAppPWForm">
       {{template "appPassResetForm"}}
     </form>
 
     {{- /* Form to set up a wallet. Shown on demand when a user clicks a setupWallet button. */ -}}
-    <form class="d-hide" id="newWalletForm">
+    <form class="d-hide dialog-panel" id="newWalletForm">
       {{template "newWalletForm" }}
     </form>
 
     {{- /* DEX ADDRESS FORM */ -}}
-    <form class="d-hide{{if and .Initialized .UserInfo.Authed (not .Host)}} selected{{end}}" id="dexAddrForm">
+    <form class="d-hide{{if and .Initialized .UserInfo.Authed (not .Host)}} selected{{end}} dialog-panel" id="dexAddrForm">
       {{template "dexAddrForm" .}}
     </form>
 
     {{- /* DISCOVER ACCOUNT FORM */ -}}
-    <form class="d-hide{{if and .Initialized .UserInfo.Authed .Host}} selected{{end}}" id="discoverAcctForm" data-host="{{.Host}}">
+    <form class="d-hide{{if and .Initialized .UserInfo.Authed .Host}} selected{{end}} dialog-panel" id="discoverAcctForm" data-host="{{.Host}}">
       {{template "discoverAcctForm" .}}
     </form>
 
     {{- /* REG ASSET SELECTOR */ -}}
-    <form class="d-hide" id="regAssetForm">
+    <form class="d-hide dialog-panel" id="regAssetForm">
       {{template "regAssetForm"}}
     </form>
 
     {{- /* CONFIRM FEE PAYMENT */ -}}
-    <form class="d-hide" id="confirmRegForm">
+    <form class="d-hide dialog-panel" id="confirmRegForm">
       {{template "confirmRegistrationForm"}}
     </form>
 
     {{- /* SYNC AND BALANCE FORM */ -}}
-    <form class="d-hide" id="walletWait">
+    <form class="d-hide dialog-panel" id="walletWait">
       {{template "waitingForWalletForm"}}
     </form>
 
diff --git a/client/webserver/site/src/html/settings.tmpl b/client/webserver/site/src/html/settings.tmpl
index c79a95d341..dd42d661bc 100644
--- a/client/webserver/site/src/html/settings.tmpl
+++ b/client/webserver/site/src/html/settings.tmpl
@@ -3,8 +3,8 @@
 {{$passwordIsCached := .UserInfo.PasswordIsCached}}
 {{$authed := .UserInfo.Authed}}
 <div id="main" data-handler="settings" class="text-center py-5 overflow-y-auto">
-  <span class="settings-gear ico-settings"></span><br>
-  <div class="settings">
+  <div class="settings dialog-panel">
+    <span class="settings-gear ico-settings mt-4"></span>
     <div class="form-check">
       <input class="form-check-input" type="checkbox" value="" id="darkMode"{{if .UserInfo.DarkMode}} checked{{end}}>
       <label class="form-check-label" for="darkMode">
@@ -83,41 +83,41 @@
   <div id="forms" class="d-hide">
     
     {{- /* DEX ADDRESS */ -}}
-    <form class="position-relative text-start" id="dexAddrForm" autocomplete="off">
+    <form class="position-relative text-start dialog-panel" id="dexAddrForm" autocomplete="off">
       {{template "dexAddrForm" .}}
     </form>
 
     {{- /* REG ASSET SELECTOR */ -}}
-    <form class="d-hide" id="regAssetForm">
+    <form class="d-hide dialog-panel" id="regAssetForm">
       {{template "regAssetForm"}}
     </form>
     {{- /* CONFIRM REGISTRATION */ -}}
-    <form class="d-hide" id="confirmRegForm">
+    <form class="d-hide dialog-panel" id="confirmRegForm">
       {{template "confirmRegistrationForm"}}
     </form>
 
     {{- /* AUTHORIZE IMPORT ACCOUNT */ -}}
-    <form class="d-hide" id="authorizeAccountImportForm">
+    <form class="d-hide dialog-panel" id="authorizeAccountImportForm">
       {{template "authorizeAccountImportForm" .}}
     </form>
 
     {{- /* NEW WALLET */ -}}
-    <form class="d-hide" id="newWalletForm">
+    <form class="d-hide dialog-panel" id="newWalletForm">
       {{template "newWalletForm" }}
     </form>
 
     {{- /* CHANGE APP PASSWORD */ -}}
-    <form class="d-hide" id="changeAppPWForm">
+    <form class="d-hide dialog-panel" id="changeAppPWForm">
       {{template "changeAppPWForm"}}
     </form>
 
     {{- /* RESET APP PASSWORD */ -}}
-    <form class="d-hide" id="resetAppPWForm">
+    <form class="d-hide dialog-panel" id="resetAppPWForm">
       {{template "appPassResetForm"}}
     </form>
 
     {{- /* EXPORT SEED AUTHORIZATION */ -}}
-    <form class="d-hide" id="exportSeedAuth">
+    <form class="d-hide dialog-panel" id="exportSeedAuth">
       <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       <div class="py-1 text-center position-relative fs22 sans-light">
         [[[Export Seed]]]
@@ -136,7 +136,7 @@
     </form>
 
     {{- /* SEED DISPLAY */ -}}
-    <form class="d-hide" id="authorizeSeedDisplay">
+    <form class="d-hide dialog-panel" id="authorizeSeedDisplay">
       <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       <div class="fs18 sans-light text-center mb-2">[[[dont_share]]]</div>
       <div class="my-2 p-2 flex-center">
@@ -145,7 +145,7 @@
     </form>
 
     {{- /* SYNC AND BALANCE FORM */ -}}
-    <form class="d-hide" id="walletWait">
+    <form class="d-hide dialog-panel" id="walletWait">
       {{template "waitingForWalletForm"}}
     </form>
 
diff --git a/client/webserver/site/src/html/wallets.tmpl b/client/webserver/site/src/html/wallets.tmpl
index 46dad61ad6..4a78088c65 100644
--- a/client/webserver/site/src/html/wallets.tmpl
+++ b/client/webserver/site/src/html/wallets.tmpl
@@ -257,7 +257,7 @@
         </div>{{/* END MARKETS OVERVIEW */}}
 
         {{- /* RECENT ORDERS */ -}}
-        <div class="col-24 col-xxl-8 d-flex stylish-overflow-lg invisible" id="orderActivityBox">
+        <div class="col-24 col-xxl-8 d-flex stylish-overflow-lg invisible mt-2" id="orderActivityBox">
           <div class="my-auto flex-center w-100 p-3" id="orderActivity">
             <div class="d-flex align-items-start flex-column mw-90p">
               <span class="fs28 sans-light mb-2">[[[Recent asset_name Activity]]]</span>
@@ -310,12 +310,12 @@
     </form>
 
     {{- /* NEW WALLET */ -}}
-    <form class="position-relative d-hide" id="newWalletForm" autocomplete="off">
+    <form class="position-relative d-hide dialog-panel" id="newWalletForm" autocomplete="off">
       {{template "newWalletForm"}}
     </form>
 
     {{- /* SEND */ -}}
-    <form class="pb-3 d-hide" id="sendForm" autocomplete="off">
+    <form class="pb-3 d-hide dialog-panel" id="sendForm" autocomplete="off">
       <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       <div class="py-1 flex-center position-relative fs24 sans-light">
         [[[Send]]]
@@ -375,7 +375,7 @@
     </form>
 
     {{- /* Verify Send */ -}}
-    <form class="pb-3 d-hide" id="vSendForm">
+    <form class="pb-3 d-hide dialog-panel" id="vSendForm">
       <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       <div class="py-1 text-center position-relative header fs22 sans-light">
       [[[confirm]]]
@@ -434,17 +434,17 @@
     </form>
 
     {{- /* DEPOSIT ADDRESS */ -}}
-    <form class="position-relative flex-center flex-column fs20 d-hide" id="deposit">
+    <form class="position-relative flex-center flex-column fs20 d-hide dialog-panel" id="deposit">
       {{template "depositAddress"}}
     </form>
 
     {{- /* UNLOCK WALLET */ -}}
-    <form class="position-relative d-hide" id="unlockWalletForm" autocomplete="off">
+    <form class="position-relative d-hide dialog-panel" id="unlockWalletForm" autocomplete="off">
       {{template "unlockWalletForm"}}
     </form>
 
     {{- /* RECONFIGURE WALLET */ -}}
-    <form class="pb-3 d-hide mt-3" id="reconfigForm" autocomplete="off">
+    <form class="pb-3 d-hide mt-3 dialog-panel" id="reconfigForm" autocomplete="off">
       <div class="form-closer recfg-form hoverbg"><span class="ico-cross"></span></div>
       <div class="py-1 text-center position-relative fs22 sans-light">
         [[[Reconfigure]]]
@@ -509,12 +509,12 @@
     </form>
 
     {{- /* TOGGLE WALLET STATUS AUTHORIZATION */ -}}
-    <form class="d-hide" id="toggleWalletStatusConfirm">
+    <form class="d-hide dialog-panel" id="toggleWalletStatusConfirm">
       {{template "toggleWalletStatusConfirm"}}
     </form>
 
     {{- /* MANAGE PEERS */ -}}
-    <form class="d-hide" id="managePeersForm">
+    <form class="d-hide dialog-panel" id="managePeersForm">
       <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       <div class="px-2 py-1 text-center position-relative fs22 sans-light">
         [[[manage_peers]]]
@@ -548,7 +548,7 @@
     </form>
 
     {{- /* UNAPPROVE TOKEN VERSIONS TABLE FORM */ -}}
-    <form class="d-hide" id="unapproveTokenTableForm">
+    <form class="d-hide dialog-panel" id="unapproveTokenTableForm">
       <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       <div class="px-2 py-1 text-center position-relative fs22 sans-light">
         [[[unapprove_token_for]]]
@@ -575,7 +575,7 @@
     </form>
 
     {{- /* UNAPPROVE SPECIFIC TOKEN VERSION FORM */ -}}
-    <form class="position-relative flex-center flex-column fs20 d-hide" id="unapproveTokenForm">
+    <form class="position-relative flex-center flex-column fs20 d-hide dialog-panel" id="unapproveTokenForm">
       <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       <div class="px-2 py-1 text-center fs22 text-nowrap sans-light position-relative">
         [[[unapprove_token_version]]]
@@ -602,7 +602,7 @@
     </form>
 
     {{- /* CONFIRM FORCE FORM */ -}}
-    <form class="d-hide" id="confirmForce">
+    <form class="d-hide dialog-panel" id="confirmForce">
       <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       <div class="px-2 py-1 text-center position-relative fs22 sans-light">
         [[[wallet_actively_used]]]
@@ -618,7 +618,7 @@
     </form>
 
     {{- /* RECOVER WALLET AUTHORIZATION */ -}}
-    <form class="d-hide" id="recoverWalletConfirm">
+    <form class="d-hide dialog-panel" id="recoverWalletConfirm">
       <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       <div class="px-2 py-1 text-center position-relative fs22 sans-light">
         [[[recover_wallet]]]
@@ -637,7 +637,7 @@
     </form>
 
     {{- /* EXPORT WALLET AUTHORIZATION */ -}}
-    <form class="d-hide" id="exportWalletAuth">
+    <form class="d-hide dialog-panel" id="exportWalletAuth">
       <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       <div class="py-1 text-center position-relative fs22 sans-light">
         [[[export_wallet]]]
@@ -659,7 +659,7 @@
     </form>
 
     {{- /* RESTORE WALLET INFO */ -}}
-    <form class="d-hide" id="restoreWalletInfo">
+    <form class="d-hide dialog-panel" id="restoreWalletInfo">
       <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       <div class="px-2 py-1 text-center position-relative fs22 sans-light">
         [[[export_wallet]]]
@@ -689,14 +689,14 @@
     </form>
 
     {{- /* Error Modal */ -}}
-    <form id="errorModal" class="d-hide mw-425">
+    <form id="errorModal" class="d-hide mw-425 dialog-panel">
       <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       <div class="fs22 text-center">[[[Error]]]</div>
       <div id="errorModalMsg" class="fs16 errcolor my-2 text-center"></div>
     </form>
 
     {{- /* PICK A VOTING SERVICE PROVIDER */ -}}
-    <form id="vspPicker" class="flex-center flex-column p-2 m-4">
+    <form id="vspPicker" class="flex-center flex-column p-2 m-4 dialog-panel">
       <div class="form-closer hoverbg">
         <span class="ico-cross"></span>
       </div>
@@ -734,7 +734,7 @@
     </form>
 
     {{- /* PURCHASE TICKETS */ -}}
-    <form id="purchaseTicketsForm" class="flex-center flex-column p-2 m-4 mw-425">
+    <form id="purchaseTicketsForm" class="flex-center flex-column p-2 m-4 mw-425 dialog-panel">
       <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       <div class="flex-center fs22 sans-light">[[[Purchase Tickets]]]</div>
       <div class="d-flex pt-2">
@@ -767,7 +767,7 @@
     </form>
 
     {{- /* TICKET HISTORY */ -}}
-    <form id="ticketHistoryForm" class="flex-center flex-column align-items-stretch p-2 m-4">
+    <form id="ticketHistoryForm" class="flex-center flex-column align-items-stretch p-5 m-4 dialog-panel">
       <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
       <div class="flex-center fs28 sans-light mb-2">[[[Ticket History]]]</div>
       <table id="ticketHistoryTable" class="fs14">
@@ -802,7 +802,7 @@
     </form>
 
     {{- /* SET VOTES */ -}}
-    <form id="votingForm" class="flex-center flex-column p-2 m-4 mw-425">
+    <form id="votingForm" class="flex-center flex-column p-2 m-4 mw-425 dialog-panel">
       <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
 
       {{- /* AGENDAS */ -}}
@@ -822,7 +822,7 @@
       </div>
 
       {{- /* TREASURY SPENDS */ -}}
-      <div class="flex-center fs28 sans-light mt-2 brdrtop w-100">[[[Treasury Spends]]]</div>
+      <div class="flex-center fs28 sans-light mt-2 brdrtop w-100 dialog-panel">[[[Treasury Spends]]]</div>
       <div id="votingTspends" class="d-flex flex-column align-items-stretch w-100">
         <div id="tspendTmpl" class="d-flex justify-content-between align-items-stretch py-2 brdrtop">
           <div class="flex-center flex-grow-1 pe-3">
@@ -844,7 +844,7 @@
       </div>
 
       {{- /* TREASURY KEYS */ -}}
-      <div class="flex-center fs28 sans-light mt-2 brdrtop w-100">[[[Treasury Keys]]]</div>
+      <div class="flex-center fs28 sans-light mt-2 brdrtop w-100 dialog-panel">[[[Treasury Keys]]]</div>
       <div id="votingTKeys" class="d-flex flex-column align-items-stretch w-100">
         <div id="tkeyTmpl" class="d-flex justify-content-between align-items-stretch py-2 brdrtop">
           <div class="flex-center flex-grow-1 pe-3">
diff --git a/client/webserver/site/src/js/charts.ts b/client/webserver/site/src/js/charts.ts
index f9a57385d4..b12e9d6a17 100644
--- a/client/webserver/site/src/js/charts.ts
+++ b/client/webserver/site/src/js/charts.ts
@@ -103,8 +103,8 @@ interface Theme {
 
 const darkTheme: Theme = {
   axisLabel: '#b1b1b1',
-  gridBorder: '#383f4b',
-  gridLines: '#383f4b',
+  gridBorder: '#383f4b80',
+  gridLines: '#383f4b80',
   gapLine: '#6b6b6b',
   value: '#9a9a9a',
   zoom: '#5b5b5b',
diff --git a/client/webserver/site/src/js/doc.ts b/client/webserver/site/src/js/doc.ts
index 277a1bee2d..e5dea0517e 100644
--- a/client/webserver/site/src/js/doc.ts
+++ b/client/webserver/site/src/js/doc.ts
@@ -235,6 +235,23 @@ export default class Doc {
     return !el.classList.contains('d-hide')
   }
 
+  /*
+   * conceal hides the specified elements while keeping the element's display
+   * attribute unchanged. This is accomplished by adding the d-conceal
+   * class to the element. Use Doc.reveal to undo.
+   */
+  static conceal (...els: Element[]) {
+    for (const el of els) el.classList.add('d-conceal')
+  }
+
+  /*
+   * reveal shows the specified elements. This is accomplished by removing the
+   * d-conceal class as added with Doc.conceal.
+   */
+  static reveal (...els: Element[]) {
+    for (const el of els) el.classList.remove('d-conceal')
+  }
+
   /*
    * animate runs the supplied function, which should be a "progress" function
    * accepting one argument. The progress function will be called repeatedly
diff --git a/client/webserver/site/src/js/forms.ts b/client/webserver/site/src/js/forms.ts
index 0163bf49c7..15bfe99b63 100644
--- a/client/webserver/site/src/js/forms.ts
+++ b/client/webserver/site/src/js/forms.ts
@@ -134,9 +134,11 @@ export class NewWalletForm {
       parentForm: parentForm
     }
 
-    const ani = new Wave(this.page.mainForm, { backgroundColor: true })
+    Doc.conceal(...Doc.kids(this.page.mainForm))
+    const ani = new Wave(this.page.mainForm, { backgroundColor: false })
     const res = await postJSON('/api/newwallet', createForm)
     ani.stop()
+    Doc.reveal(...Doc.kids(this.page.mainForm))
     return res
   }
 
diff --git a/client/webserver/site/src/js/markets.ts b/client/webserver/site/src/js/markets.ts
index bc7b789ca0..59f696e0f6 100644
--- a/client/webserver/site/src/js/markets.ts
+++ b/client/webserver/site/src/js/markets.ts
@@ -1559,7 +1559,7 @@ export default class MarketsPage extends BasePage {
         unreadyOrders = true
       }
       header.sideLight.classList.add(ord.sell ? 'sell' : 'buy')
-      if (!isActive) header.sideLight.classList.add('inactive')
+      if (!isActive) div.classList.add('inactive')
       details.side.textContent = mord.header.side.textContent = OrderUtil.sellString(ord)
       details.side.classList.add(ord.sell ? 'sellcolor' : 'buycolor')
       header.side.classList.add(ord.sell ? 'sellcolor' : 'buycolor')