diff --git a/client/webserver/live_test.go b/client/webserver/live_test.go
index eae66d27ab..ff02a65802 100644
--- a/client/webserver/live_test.go
+++ b/client/webserver/live_test.go
@@ -29,6 +29,7 @@ import (
 	"decred.org/dcrdex/client/comms"
 	"decred.org/dcrdex/client/core"
 	"decred.org/dcrdex/client/db"
+	"decred.org/dcrdex/client/orderbook"
 	"decred.org/dcrdex/dex"
 	"decred.org/dcrdex/dex/calc"
 	"decred.org/dcrdex/dex/candles"
@@ -48,7 +49,7 @@ const (
 
 var (
 	tCtx                  context.Context
-	maxDelay                     = time.Second * 2
+	maxDelay                     = time.Second * 4
 	epochDuration                = time.Second * 30 // milliseconds
 	feedPeriod                   = time.Second * 10
 	creationPendingAsset  uint32 = 0xFFFFFFFF
@@ -183,7 +184,7 @@ func mkMrkt(base, quote string) *core.Market {
 			Rate:    rate,
 			// BookVolume: ,
 			Change24: change24,
-			// Vol24: ,
+			Vol24:    lotSize * uint64(50000*rand.Float32()),
 		},
 	}
 }
@@ -1141,12 +1142,24 @@ func (c *TCore) book(dexAddr, mktID string) *core.OrderBook {
 		buys = append(buys, ord)
 		c.buys[ord.Token] = ord
 	}
+	recentMatches := make([]*orderbook.MatchSummary, 0, 25)
+	tNow := time.Now()
+	for i := 0; i < 25; i++ {
+		ord := randomOrder(rand.Float32() > 0.5, maxQty, midGap, gapWidthFactor*midGap, false)
+		recentMatches = append(recentMatches, &orderbook.MatchSummary{
+			Rate:  ord.MsgRate,
+			Qty:   ord.QtyAtomic,
+			Stamp: uint64(tNow.Add(-time.Duration(i) * time.Minute).UnixMilli()),
+			Sell:  ord.Sell,
+		})
+	}
 	c.orderMtx.Unlock()
 	sort.Slice(buys, func(i, j int) bool { return buys[i].Rate > buys[j].Rate })
 	sort.Slice(sells, func(i, j int) bool { return sells[i].Rate < sells[j].Rate })
 	return &core.OrderBook{
-		Buys:  buys,
-		Sells: sells,
+		Buys:          buys,
+		Sells:         sells,
+		RecentMatches: recentMatches,
 	}
 }
 
diff --git a/client/webserver/locales/en-us.go b/client/webserver/locales/en-us.go
index 80d2094cb8..8e676d0f54 100644
--- a/client/webserver/locales/en-us.go
+++ b/client/webserver/locales/en-us.go
@@ -81,10 +81,10 @@ var EnUS = map[string]string{
 	"outdated_tooltip":               "Balance may be outdated. Connect to the wallet to refresh.",
 	"available":                      "available",
 	"connect_refresh_tooltip":        "Click to connect and refresh",
-	"add_a_base_wallet":              `Add a<br><span data-unit="base"></span><br>wallet`,
-	"add_a_quote_wallet":             `Add a<br><span data-unit="quote"></span><br>wallet`,
+	"add_a_wallet":                   `Add a <span data-tmpl="addWalletSymbol"></span> wallet`,
 	"locked":                         "locked",
 	"immature":                       "immature",
+	"fee balance":                    "fee balance",
 	"Sell Orders":                    "Sell Orders",
 	"Your Orders":                    "Your Orders",
 	"Recent Matches":                 "Recent Matches",
diff --git a/client/webserver/locales/pl-pl.go b/client/webserver/locales/pl-pl.go
index aad168313c..10d4847ecd 100644
--- a/client/webserver/locales/pl-pl.go
+++ b/client/webserver/locales/pl-pl.go
@@ -80,8 +80,7 @@ var PlPL = map[string]string{
 	"outdated_tooltip":               "Saldo może być nieaktualne. Połącz się z portfelem, aby je odświeżyć.",
 	"available":                      "dostępne",
 	"connect_refresh_tooltip":        "Kliknij, aby połączyć i odświeżyć",
-	"add_a_base_wallet":              `Dodaj portfel<br><span data-unit="base"></span><br>`,
-	"add_a_quote_wallet":             `Dodaj portfel<br><span data-unit="quote"></span><br>`,
+	"add_a_wallet":                   `Dodaj portfel <span data-tmpl="addWalletSymbol"></span> `,
 	"locked":                         "zablokowane",
 	"immature":                       "niedojrzałe",
 	"Sell Orders":                    "Zlecenia sprzedaży",
diff --git a/client/webserver/locales/pt-br.go b/client/webserver/locales/pt-br.go
index 8ac717169a..685a840ceb 100644
--- a/client/webserver/locales/pt-br.go
+++ b/client/webserver/locales/pt-br.go
@@ -80,8 +80,7 @@ var PtBr = map[string]string{
 	"outdated_tooltip":               "Balanço pode está desatualizado. Conecte-se a carteira para atualizar.",
 	"available":                      "disponível",
 	"connect_refresh_tooltip":        "Clique para conectar e atualizar",
-	"add_a_base_wallet":              `Adicionar uma carteira<br><span data-unit="base"></span><br>`,
-	"add_a_quote_wallet":             `Adicionar uma<br><span data-unit="quote"></span><br>carteira`,
+	"add_a_wallet":                   `Adicionar uma carteira <span data-tmpl="addWalletSymbol"></span> `,
 	"locked":                         "trancado",
 	"immature":                       "imaturo",
 	"Sell Orders":                    "Pedido de venda",
diff --git a/client/webserver/locales/zh-cn.go b/client/webserver/locales/zh-cn.go
index 864c7d6c84..11e4cccb70 100644
--- a/client/webserver/locales/zh-cn.go
+++ b/client/webserver/locales/zh-cn.go
@@ -80,8 +80,7 @@ var ZhCN = map[string]string{
 	"outdated_tooltip":               "账户可能已过期。请连接到钱包进行更新。",
 	"available":                      "可用",
 	"connect_refresh_tooltip":        "点击连接并刷新",
-	"add_a_base_wallet":              `添加一个<br><span data-unit="base"></span><br>钱包`,
-	"add_a_quote_wallet":             `添加一个<br><span data-unit="quote"></span><br>钱包`,
+	"add_a_wallet":                   `添加一个 <span data-tmpl="addWalletSymbol"></span> 钱包`,
 	"locked":                         "锁定",
 	"immature":                       "不成熟",
 	"Sell Orders":                    "卖单",
diff --git a/client/webserver/site/src/css/application.scss b/client/webserver/site/src/css/application.scss
index f7d7c803ca..a1e77f4f8c 100644
--- a/client/webserver/site/src/css/application.scss
+++ b/client/webserver/site/src/css/application.scss
@@ -2,17 +2,14 @@
 $grid-columns: 24;
 $font-color-dark: #dfe2e1;
 $font-color-light: #333;
-$buycolor_dark: #05a35a;
-$sellcolor_dark: #ae3333;
+$buycolor_dark: #29bb77;
+$sellcolor_dark: #e95e5e;
 $buycolor_light: #207a46;
 $sellcolor_light: #99302b;
-$light_bg_1: #eaeaea;
-$light_bg_2: #d5d5d5;
-$dark_bg_1: #111;
-$dark_bg_2: #1e1e1e;
-$dark_bg_3: #292929;
-$dark_body_bg: #13202b;
-$light_body_bg: #e0e0e0;
+$light_body_bg: white;
+$dark_body_bg: #091a28;
+$light_border_color: #ddd;
+$dark_border_color: #383f4b;
 $sans: "source-sans", sans-serif;
 $demi-sans: "demi-sans", sans-serif;
 $mono: "mono", monospace;
diff --git a/client/webserver/site/src/css/forms.scss b/client/webserver/site/src/css/forms.scss
index f65bf71b57..7c59355762 100644
--- a/client/webserver/site/src/css/forms.scss
+++ b/client/webserver/site/src/css/forms.scss
@@ -1,10 +1,6 @@
 #regAssetForm {
   position: relative;
 
-  .grey {
-    color: #999;
-  }
-
   div.reg-asset-allmkts {
     min-width: 210px;
     max-width: 320px;
@@ -117,10 +113,6 @@
 #confirmRegForm {
   width: 425px;
 
-  .grey {
-    color: grey;
-  }
-
   button.submit {
     width: auto;
     padding: 12px 30px;
@@ -155,10 +147,6 @@
 #newWalletForm {
   width: 425px;
 
-  .grey {
-    color: #999;
-  }
-
   .wallet-tabs {
     width: 100%;
     display: flex;
@@ -255,7 +243,7 @@ button.form-button {
   bottom: 0;
   right: 0;
   padding: 25px 0;
-  background-color: #e0e0e0f3;
+  background-color: $light_body_bg;
   z-index: 100;
 
   & > form {
@@ -274,10 +262,6 @@ button.form-button {
 #walletWait {
   max-width: 425px;
 
-  .grey {
-    color: #999;
-  }
-
   .icons {
     width: 25px;
   }
@@ -345,3 +329,10 @@ button.form-button {
 #authorizeSeedDisplay {
   width: 425px;
 }
+
+#deposit {
+  #copyAlert {
+    margin-left: 12px;
+    position: absolute;
+  }
+}
diff --git a/client/webserver/site/src/css/icons.scss b/client/webserver/site/src/css/icons.scss
index 65d1321b2f..75d0908a7d 100644
--- a/client/webserver/site/src/css/icons.scss
+++ b/client/webserver/site/src/css/icons.scss
@@ -110,6 +110,12 @@
   transform: rotate(180deg);
 }
 
+.ico-arrowup::before {
+  content: "\e90c";
+  display: inline-block;
+  transform: rotate(-90deg);
+}
+
 .ico-checkbox::before {
   content: "\e90d";
 }
diff --git a/client/webserver/site/src/css/main.scss b/client/webserver/site/src/css/main.scss
index 52d111e367..eb38e67515 100644
--- a/client/webserver/site/src/css/main.scss
+++ b/client/webserver/site/src/css/main.scss
@@ -60,39 +60,34 @@ input:invalid {
   overflow-y: auto;
 }
 
-.overflow-x-hidden {
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.overflow-x-hidden,
+.stylish-overflow.overflow-x-hidden {
   overflow-x: hidden;
 }
 
 header.maintop {
   width: 100%;
-  height: 60px;
-  min-height: 60px;
+  height: 70px;
+  min-height: 70px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 100;
-  background-color: white;
-  border-bottom: 1px solid #777;
+  border-bottom: 1px solid $light_border_color;
 }
 
-a.logo,
 a.logo-icon {
   display: block;
-  height: 30px;
-  margin: 0 20px;
+  margin: 0 10px;
   background-size: cover;
   cursor: pointer;
-}
-
-a.logo {
-  width: 145px;
-  background-image: url("/img/logo_wide_v1.svg");
-}
-
-a.logo-icon {
-  width: 30px;
-  background-image: url("/img/logo_icon_v1.svg");
+  height: 40px;
+  width: 40px;
+  background-image: url("/img/softened-icon.png");
 }
 
 div.main {
@@ -116,31 +111,6 @@ button:focus {
   outline: none;
 }
 
-.card {
-  width: 400px;
-  border-radius: 3px;
-  position: relative;
-
-  button {
-    padding: 6px 0;
-  }
-
-  input,
-  select {
-    background-color: $light_bg_2;
-  }
-
-  input:focus,
-  select:focus {
-    background-color: $light_bg_2;
-  }
-
-  form label {
-    font-size: 15px;
-    font-family: $demi-sans;
-  }
-}
-
 .dynamicopts {
   display: flex;
   align-items: stretch;
@@ -154,11 +124,17 @@ button:focus {
   }
 }
 
-div.mainlinks > div,
-div.mainlinks > a {
-  padding-right: 1em;
-  color: #4a4949;
-  cursor: pointer;
+div.mainlinks {
+  white-space: nowrap;
+
+  & > div,
+  & > a {
+    color: #4a4949;
+    cursor: pointer;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-left: 10px;
+  }
 }
 
 .plainlink {
@@ -187,12 +163,8 @@ header.maintop a:hover,
   cursor: pointer;
 }
 
-div.mainlinks .hoverbright:hover {
-  color: $dark_bg_3;
-}
-
-form.card button:hover {
-  color: black;
+div.mainlinks .hoverbg:hover {
+  color: #222;
 }
 
 div.spinner {
@@ -246,6 +218,19 @@ input[type=number] {
   @include stylish-overflow;
 }
 
+.stylish-overflow.hoveronly:not(:hover) {
+  scrollbar-color: transparent transparent;
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 4px;
+  }
+}
+
 .max-h-100 {
   max-height: 100%;
 }
@@ -327,7 +312,7 @@ div.popup-notes {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  background-color: white;
+  background-color: $light_body_bg;
   border: 1px solid #7777;
   z-index: 100;
   font-family: $sans;
@@ -389,32 +374,36 @@ div.popup-notes {
   display: none !important;
 }
 
-.bg0 {
-  background-color: white;
+.buycolor {
+  color: $buycolor_light;
 }
 
-.bg1 {
-  background-color: $light_bg_1;
+.sellcolor {
+  color: $sellcolor_light;
 }
 
-.border1 {
-  border: 1px solid #aaa;
+.errcolor {
+  color: #e61c00;
 }
 
-.bg2 {
-  background-color: $light_bg_2;
+.grey {
+  color: #999;
 }
 
-.buycolor {
-  color: $buycolor_light;
+.brdrleft {
+  border-left: 1px solid $light_border_color;
 }
 
-.sellcolor {
-  color: $sellcolor_light;
+.brdrright {
+  border-right: 1px solid $light_border_color;
 }
 
-.errcolor {
-  color: #e61c00;
+.brdrtop {
+  border-top: 1px solid $light_border_color;
+}
+
+.brdrbottom {
+  border-bottom: 1px solid $light_border_color;
 }
 
 hr.dashed {
@@ -477,10 +466,6 @@ div.form-closer {
   font-size: 15px;
 }
 
-div.border1 {
-  border: 1px solid #aaa;
-}
-
 #loader {
   background-color: #e0e0e077;
 }
@@ -498,6 +483,11 @@ span.token-aware-symbol sup {
 @include media-breakpoint-up(md) {
   div.mainlinks > div,
   div.mainlinks > a {
-    padding-right: 1.7em;
+    padding-left: 18px;
+    padding-right: 18px;
+
+    &:last-child {
+      padding-right: 0;
+    }
   }
 }
diff --git a/client/webserver/site/src/css/main_dark.scss b/client/webserver/site/src/css/main_dark.scss
index 343ff4a467..8cddd35ed2 100644
--- a/client/webserver/site/src/css/main_dark.scss
+++ b/client/webserver/site/src/css/main_dark.scss
@@ -3,49 +3,51 @@ body.dark {
   color: $font-color-dark;
 
   header.maintop {
-    background-color: black;
-    border-bottom-style: none;
+    // background-color: black;
+    border-bottom-style: solid;
+    border-color: $dark_border_color;
+    border-width: 1px;
+  }
+
+  a.logo-icon {
+    background-image: url("/img/softened-icon-dark.png");
   }
 
   .offwhite {
     color: #a1a1a1;
   }
 
+  .grey {
+    color: #666;
+  }
+
   div.mainlinks > div,
   div.mainlinks > a {
     color: #a8a8a8;
   }
 
-  div.mainlinks .hoverbright:hover {
+  div.mainlinks .hoverbg:hover {
     color: #c5c5c5;
   }
 
-  a.logo {
-    background-image: url("/img/logo_wide_dark_v1.svg");
-  }
-
   div.note:not(:last-child) {
     border-color: #333;
   }
 
-  .bg0 {
-    background-color: black;
-  }
-
-  .border1 {
-    border: 1px solid #333;
+  .brdrleft {
+    border-left: 1px solid dark_border_color;
   }
 
-  .bg1 {
-    background-color: $dark_bg_1;
+  .brdrright {
+    border-right: 1px solid dark_border_color;
   }
 
-  .bg2 {
-    background-color: $dark_bg_2;
+  .brdrtop {
+    border-top: 1px solid dark_border_color;
   }
 
-  .bg3 {
-    background-color: $dark_bg_3;
+  .brdrbottom {
+    border-bottom: 1px solid dark_border_color;
   }
 
   .subtlelink,
@@ -99,22 +101,13 @@ body.dark {
     opacity: 1;
   }
 
-  form.card button,
-  form.card label {
-    text-shadow: 0 0 4px black;
-  }
-
-  form.card button:hover {
-    color: #dde9ff;
-  }
-
   div.popup-notes > span {
     background-color: white;
     color: $font-color-light;
   }
 
   #forms {
-    background-color: #13202bf3;
+    background-color: $dark_body_bg;
   }
 
   .buycolor {
@@ -125,13 +118,9 @@ body.dark {
     color: $sellcolor_dark;
   }
 
-  div.border1 {
-    border: 1px solid #333;
-  }
-
   #noteBox,
   #profileBox {
-    background-color: $dark_bg_1;
+    background-color: $dark_body_bg;
   }
 
   #tooltip {
diff --git a/client/webserver/site/src/css/market.scss b/client/webserver/site/src/css/market.scss
index d64694cb41..bf89f95b1e 100644
--- a/client/webserver/site/src/css/market.scss
+++ b/client/webserver/site/src/css/market.scss
@@ -1,406 +1,405 @@
-div.marketlist {
-  // width: 175px;
-  border-right: 1px solid #626262;
-  z-index: 99;
-  background-color: #dbdbdb;
-  min-width: 190px;
-
-  .selected {
-    border-style: solid none;
-    border-width: 1px;
-    border-color: #aaa;
-  }
-
-  .header {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+div[data-handler=markets] {
+  .ordertable-wrap {
     width: 100%;
-    max-width: 250px;
-  }
 
-  .xc:not(:first-child) .header {
-    padding-top: 15px;
-  }
+    &:first-child {
+      border-bottom: 1px solid $light_border_color;
+    }
 
-  .grey {
-    color: #555;
-  }
-}
+    &:last-child {
+      border-top: 1px solid $light_border_color;
+    }
 
-div.marketrow {
-  font-size: 16px;
-  padding: 3px 4px;
-  cursor: pointer;
-  white-space: nowrap;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  margin: 3px;
-  background-color: #c2c9d4;
-  border-radius: 3px;
-  // border: 1px solid #7775;
-
-  & > div {
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    line-height: 1;
-    padding: 2px 0;
+    tbody#sellRows {
+      border-top: 1px solid $light_border_color;
+    }
   }
 
-  &:hover,
-  &.selected {
-    padding: 2px 3px;
-    border: 1px solid #1b966d;
+  .ordertable-header {
+    height: 30px;
+    padding: 0 45px 0 10px;
   }
 
-  span.upgreen {
-    color: #35b97c;
-  }
+  .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;
 
-  span.downred {
-    color: #c33b3b;
-  }
+    & > div:first-child { // buy orders
+      order: 3;
+    }
+
+    & > div:nth-child(2) { // header
+      order: 1;
+    }
 
-  span.pct-change {
-    min-width: 50px;
-    text-align: right;
+    & > div:last-child { // sell orders
+      order: 2;
+    }
   }
-}
 
-label.market-search {
-  display: flex;
-  justify-content: space-between;
-  align-items: stretch;
-  margin: 1px;
-  background-color: white;
+  .order-panel {
+    min-width: 375px;
+    width: 90%;
 
-  input {
-    border: none;
-    width: 100%;
-  }
+    & > div {
+      border: 1px solid $light_border_color;
+    }
 
-  span {
-    width: 25px;
-    text-align: center;
-  }
-}
+    #orderForm {
+      input[type=number] {
+        height: 30px;
+        border: 1px solid #6a6a6a;
+        border-radius: 0;
+        font-size: 14px;
+      }
 
-div.market-orders-table-container {
-  @include media-breakpoint-down(lg) {
-    max-height: 200px;
-  }
+      input:focus {
+        outline: none;
+      }
 
-  @include media-breakpoint-up(lg) {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-  }
-}
+      span.unitbox {
+        position: absolute;
+        font-size: 14px;
+        font-family: "demi-sans", sans-serif;
+        right: 5px;
+        top: 48%; // Looks better than 50 for some reason.
+        transform: translateY(-50%);
+        white-space: nowrap;
+      }
 
-div.user-orders-table-container {
-  @include media-breakpoint-down(xxl) {
-    max-height: 200px;
-  }
+      button {
+        padding: 5px 25px;
+        border-radius: 3px;
+        color: #555;
+      }
 
-  @include media-breakpoint-up(xxl) {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-  }
-}
+      button:hover,
+      button.selected {
+        color: black;
+      }
 
-table.ordertable {
-  border-collapse: collapse;
-  border: none;
-  width: 100%;
-  margin-bottom: 10px;
+      button.submit {
+        background-color: #5cba8b;
+      }
 
-  th {
-    font-size: 14px;
-    font-family: "demi-sans", sans-serif;
-  }
+      button.selected,
+      button.submit {
+        &.buygreen-bg {
+          background-color: #207a4699;
+        }
 
-  td {
-    font-size: 14px;
-  }
+        &.sellred-bg {
+          background-color: #99302b99;
+        }
+      }
 
-  td,
-  th {
-    font-size: 14px;
-    padding: 3px 0;
-  }
+      .ico-unlocked {
+        color: #1e7d11;
+      }
 
-  tr {
-    border-bottom: 1px solid #b3b3b3;
+      #orderPreview,
+      .h21 {
+        height: 21px;
+      }
+    }
   }
 
-  tbody > tr:hover,
-  tbody > tr.hover {
-    background-color: white;
-  }
+  .market-chart {
+    @extend .flex-center;
 
-  .ico-check {
-    color: #9b8c09;
+    flex-grow: 1;
+    position: relative;
+    min-width: 100px; // Letting it go to zero can be problematic, causing some major cpu during chart calcs
+
+    canvas {
+      position: absolute;
+      left: 0;
+      top: 0;
+      user-select: none;
+    }
   }
-}
 
-table.balance-table {
-  width: 96%;
-  margin: 0 2%;
-  font-size: 15px;
+  .user-order {
+    margin: 0 20px;
+    border: 1px solid $light_border_color;
 
-  td,
-  th {
-    white-space: nowrap;
-    text-align: left;
-    border-width: 1px;
-    border-color: #3a3a3a;
-    font-size: 14px;
-  }
+    &:not(:last-child) {
+      border-bottom-style: none;
+    }
 
-  th {
-    border-bottom-style: solid;
-  }
+    &:last-child .order-details {
+      border-bottom-style: none;
+      padding-bottom: 0;
+    }
 
-  button {
-    font-family: $sans;
-    padding: 2px 10px;
-    margin: 5px 0;
-    font-size: 14px;
-    border: 1px solid #444;
-    border-radius: 3px;
-    background-color: transparent;
-  }
+    .user-order-header {
+      @extend .flex-center;
 
-  td:not(:first-child) {
-    font-family: $mono;
-  }
+      padding: 5px 10px 5px 20px;
+      font-size: 14px;
+      position: relative;
+      // border: 1px solid grey;
 
-  td:first-child {
-    font-size: 14px;
-  }
+      .side-indicator {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 8px;
+
+        &.buy {
+          background-color: $buycolor_light;
+        }
+
+        &.sell {
+          background-color: $sellcolor_light;
+        }
+      }
 
-  td.fs16 {
-    font-size: 16px;
-  }
+      .active-indicator {
+        height: 8px;
+        border-radius: 4px;
 
-  th:not(:first-child),
-  td:not(:first-child) {
-    padding: 0 10px;
-    border-left-style: solid;
-  }
+        &.active {
+          margin: 0 5px;
+          width: 8px;
+          background-color: $buycolor_light;
+        }
+      }
+    }
 
-  td.pointer:hover {
-    background-color: #fff1;
-  }
+    .order-details {
+      margin-bottom: 25px;
+      padding: 0 10px 10px;
+      border-width: 1px;
+      border-color: $light_border_color;
+      border-style: solid none;
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+      row-gap: 10px;
+      line-height: 1;
 
-  .ico-expired {
-    color: orangered;
+      .user-order-datum {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+
+        & > span:first-child {
+          font-size: 12px;
+          font-family: $demi-sans;
+          color: grey;
+          margin-bottom: 2px;
+        }
+
+        & > span:nth-child(2) {
+          font-size: 14px;
+        }
+
+        &.full-span {
+          grid-column: 1 / -1;
+        }
+      }
+    }
   }
 
-  td .ico-spinner,
-  td .ico-sleeping,
-  td .ico-cross {
-    font-size: 18px;
-    width: 18px;
-    height: 18px;
-    margin: 0 auto;
-  }
+  table.ordertable {
+    border-collapse: collapse;
+    border: none;
+    width: 100%;
 
-  .micro-icon {
-    width: 13px;
-    height: 13px;
-    bottom: 1px;
-  }
-}
+    th {
+      font-family: "demi-sans", sans-serif;
+    }
 
-.card {
-  .grey {
-    color: #939b99;
-  }
+    td,
+    th {
+      font-size: 15px;
+      padding: 3px 0;
+    }
 
-  .buygreen {
-    background-color: #207a4699;
-  }
+    td:first-child {
+      width: 100%;
+    }
 
-  .micro-icon {
-    bottom: auto;
-  }
-}
+    td:last-child {
+      min-width: 30px;
+    }
 
-table#vFeeTable {
-  width: 100%;
-  font-size: 15px;
+    tbody > tr:hover,
+    tbody > tr.hover {
+      background-color: white;
+    }
 
-  tbody {
-    width: 100%;
+    .ico-check {
+      color: #9b8c09;
+    }
   }
 
-  td {
-    padding: 3px 6px;
-    border-color: #333;
-  }
+  .markettab {
+    height: 30px;
+    border-style: none;
 
-  td:first-child {
-    white-space: nowrap;
+    &.selected {
+      background-color: #fffe;
+    }
   }
 
-  td.squeeze {
-    width: 1px;
+  .numorders {
+    background-color: #c5c5e6;
+    border-radius: 3px;
+    line-height: 1;
+    padding: 1px;
+    font-size: 0.9em;
   }
 
-  tr:not(:first-child) > td {
-    border-style: solid;
+  #leftColumnV1 {
+    height: 100%;
+    position: absolute;
+    display: flex;
+    top: 0;
+    left: 0;
+    border-right-style: solid;
+    border-color: $light_border_color;
     border-width: 1px;
+    background-color: $light_body_bg;
+    z-index: 2;
 
-    &:first-child {
-      border-style: solid solid solid none;
+    &.default {
+      display: none;
     }
 
-    &:last-child {
-      border-style: solid none solid solid;
+    #searchBoxV1 {
+      height: 55px;
+      border-bottom-style: solid;
+      border-color: $light_border_color;
+      border-width: 1px;
     }
-  }
-
-  tr.heavy-bottom > td,
-  td.heavy-bottom {
-    border-bottom-color: #555;
-  }
 
-  tr.heavy-top > td {
-    border-top-color: #555;
-  }
-}
+    &.stashed {
+      display: none;
+    }
 
-.market-header button:hover {
-  color: black;
-}
+    #marketSearchV1:focus {
+      border: none;
+      outline: none;
+    }
 
-table.balance-table button:hover {
-  border-color: #959595;
-}
+    #marketSearchV1 {
+      @extend .fill-abs;
 
-.market-header {
-  height: 30px;
-  background-color: $light_bg_2;
-  color: #222;
+      z-index: 2;
+      background-color: transparent;
+      font-size: 25px;
+      text-align: center;
+      font-family: $demi-sans;
+      font-variant: small-caps;
+      border: none;
 
-  button.selected {
-    color: black;
-  }
-}
+      & + .ico-search {
+        z-index: 1;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        opacity: 0.25;
+      }
 
-#orderForm {
-  input[type=number] {
-    height: 30px;
-    border: 1px solid #6a6a6a;
-    border-radius: 0;
-    font-size: 14px;
-  }
+      &:hover + .ico-search {
+        opacity: 0.5;
+      }
 
-  input:focus {
-    outline: none;
-  }
+      &:focus + .ico-search {
+        display: none;
+      }
+    }
 
-  span.unitbox {
-    position: absolute;
-    font-size: 14px;
-    font-family: "demi-sans", sans-serif;
-    right: 5px;
-    top: 48%; // Looks better than 50 for some reason.
-    transform: translateY(-50%);
-    white-space: nowrap;
-  }
+    #leftHider {
+      padding: 0 5px;
+      border-left-style: solid;
+      border-color: $light_border_color;
+      border-width: 1px;
 
-  button {
-    padding: 5px 25px;
-    border-radius: 3px;
-    color: #555;
-  }
+      .ico-arrowback {
+        transform: scaleX(0.5);
+        opacity: 0.5;
+      }
 
-  button:hover,
-  button.selected {
-    color: black;
-  }
+      &:hover .ico-arrowback {
+        opacity: 1;
+      }
+    }
 
-  button.submit {
-    background-color: #5cba8b;
-  }
+    #marketListV1 {
+      height: 100%;
+      min-width: 225px;
 
-  button.selected,
-  button.submit {
-    &.buygreen {
-      background-color: #207a4699;
-    }
+      .market-tmpl-v1 {
+        line-height: 1;
+        margin-bottom: 10px;
+        width: 100%;
 
-    &.sellred {
-      background-color: #99302b99;
-    }
-  }
+        img {
+          width: 20px;
+          height: 20px;
+          position: relative;
 
-  .ico-unlocked {
-    color: #1e7d11;
-  }
+          // &:nth-child(0) {
+          //   top: 5px;
+          // }
 
-  #orderPreview,
-  .h21 {
-    height: 21px;
+          // &:nth-child(1) {
+          //   top: -5px;
+          // }
+        }
+      }
+    }
   }
-}
 
-#marketChart {
-  position: relative;
-  background-color: white;
-  height: 40%;
-  border-bottom: 1px solid #626262;
-  padding-top: 20px;
+  #mainContent {
+    @extend .fill-abs;
 
-  .chart-legend {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding: 0 5px;
-    height: 30px;
-    font-size: 14px;
-    color: #444;
-
-    .category-spacer {
-      display: inline-block;
-      margin: 0 7px;
-      position: relative;
-      bottom: 2px;
+    row-gap: 30px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+
+    & > div {
+      &:first-child { // order book
+        max-height: 1000px;
+        order: 3;
+      }
 
-      &::after {
-        content: "|";
+      &:nth-child(2) { // charts
+        min-height: 750px;
+        width: 90%;
+        order: 3;
       }
-    }
 
-    button.chart-selector {
-      width: 52px;
-      height: 20px;
-      padding: 1px;
-      margin-right: 10px;
-      background-color: #7772;
-      border: 1px solid #777;
-      border-radius: 5px;
+      &:last-child { // order form, wallets, user orders
+        order: 2;
+      }
     }
+  }
 
-    button.chart-selector:hover {
-      background-color: #7777;
-      border-color: #6cac78;
-    }
+  #epochLine,
+  #durBttnBox {
+    position: absolute;
+    left: 50px;
+    top: 5px;
+    background-color: $light_body_bg;
+    z-index: 1;
+    display: none; // shown on hover
+  }
 
+  #durBttnBox {
     .candle-dur-bttn {
-      background-color: #7772;
+      background-color: $light_body_bg;
       border: 1px solid #777;
       padding: 2px 4px;
       font-size: 14px;
@@ -417,6 +416,12 @@ table.balance-table button:hover {
         border-color: #6cac78;
       }
     }
+  }
+
+  #epochLine {
+    @extend .flex-center;
+
+    display: none;
 
     .epoch-line {
       display: inline-block;
@@ -427,238 +432,252 @@ table.balance-table button:hover {
       position: relative;
       top: 1px;
     }
-
-    #candlestickBttn {
-      background-image: url("/img/candlestick_bttn.png");
-    }
-
-    #depthBttn {
-      background-image: url("/img/depth_bttn.png");
-    }
   }
-}
-
-#marketLoader {
-  z-index: 50;
-  background-color: rgba(0 0 0 / 50%);
-}
-
-#marketLoader > div {
-  width: 40px;
-  height: 40px;
-  font-size: 40px;
-}
 
-#chartResizer {
-  position: absolute;
-  bottom: 0;
-  height: 6px;
-  width: 100%;
-  z-index: 2;
-  cursor: ns-resize;
-}
+  .market-chart:hover > #durBttnBox,
+  .market-chart:hover > #epochLine {
+    display: block;
+  }
 
-.markettab {
-  background-color: transparent;
-  border-top-style: none;
-  border-bottom-style: none;
-  border-right: 1px solid black;
-  border-radius: 4px 4px 0 0;
-}
+  .chart-legend {
+    display: flex;
+    align-items: center;
+    padding: 0 5px;
+    height: 30px;
+    font-size: 14px;
+  }
 
-.markettab.selected {
-  background-color: #f9f9f9;
-}
+  #loaderMsg {
+    color: #777;
+  }
 
-.brdrleft {
-  border-left: 1px solid #6a6a6a;
-}
+  #registrationStatus {
+    .title {
+      font-weight: bold;
+      margin-bottom: 5px;
+    }
 
-.brdrright {
-  border-right: 1px solid #6a6a6a;
-}
+    &.waiting {
+      .title {
+        color: #9b8c09;
+      }
+    }
 
-.market-bal {
-  border: 1px solid #6a6a6a;
-  border-radius: 3px;
-}
+    &.completed {
+      .title {
+        color: #5cba8b;
+      }
 
-.market-bal-lbl {
-  display: block;
-  position: absolute;
-  left: 10px;
-  top: -11px;
-  padding: 0 3px;
-  font-size: 16px;
-  font-family: "demi-sans", sans-serif;
-  background-color: $light_bg_1;
-}
+      #regStatusMessage {
+        display: none;
+      }
+    }
 
-#orders {
-  .ico-unlocked {
-    color: #1e7d11;
+    &.error {
+      .title {
+        color: red;
+      }
+    }
   }
-}
 
-.orders-left {
-  min-height: 350px;
-}
+  #verifyForm {
+    .echo-data span {
+      margin: 0 5px;
+    }
 
-.order-panel {
-  min-height: 500px;
-}
+    .red {
+      color: #f55a;
+    }
 
-#loaderMsg {
-  color: #777;
-}
+    .disclaimer {
+      text-align: justify;
+    }
 
-#registrationStatus {
-  .title {
-    font-weight: bold;
-    margin-bottom: 5px;
-  }
+    .header {
+      &.buygreen-bg {
+        background-color: #207a4699;
+      }
 
-  &.waiting {
-    .title {
-      color: #9b8c09;
+      &.sellred-bg {
+        background-color: #99302b99;
+      }
     }
-  }
 
-  &.completed {
-    .title {
-      color: #5cba8b;
-    }
+    button.selected {
+      &.buygreen-bg {
+        background-color: #207a4699;
+      }
 
-    #regStatusMessage {
-      display: none;
+      &.sellred-bg {
+        background-color: #99302b99;
+      }
     }
-  }
 
-  &.error {
-    .title {
-      color: red;
+    .loader {
+      height: 40px;
     }
-  }
-}
 
-#verifyForm {
-  .echo-data span {
-    margin: 0 5px;
-  }
+    .order-opt {
+      border: 1px solid #424242;
+      border-radius: 3px;
+      padding: 4px;
+      margin-top: 8px;
+      opacity: 0.7;
 
-  .red {
-    color: #f55a;
-  }
+      div.opt-check {
+        width: 15px;
+        height: 15px;
+        border-radius: 7.5px;
+        border: 2px solid #424242;
+        margin-top: 5px;
+        cursor: pointer;
+      }
 
-  .disclaimer {
-    text-align: justify;
-  }
+      .xy-range-input {
+        width: 35px;
+        font-size: 14px;
+        height: 16px;
+      }
+
+      .slider {
+        margin: 10px 10px 5px;
+        height: 2px;
+        background-color: grey;
+        position: relative;
+
+        .slider-handle {
+          position: absolute;
+          height: 20px;
+          width: 14px;
+          top: -9px;
+          border-radius: 7px;
+          background-color: #2cce9c;
+          border: 2px solid #424242;
+          cursor: pointer;
+        }
+      }
+
+      &:not(.selected) {
+        cursor: pointer;
+      }
+
+      &.selected {
+        opacity: 1;
+        background-color: #e8ebed;
 
-  .header {
-    &.buygreen {
-      background-color: #207a4699;
+        div.opt-check {
+          background-color: #2cce9c;
+        }
+      }
     }
 
-    &.sellred {
-      background-color: #99302b99;
+    #vUnlockPreorder {
+      .ico-locked {
+        font-size: 35px;
+      }
     }
   }
 
-  button.selected {
-    &.buygreen {
-      background-color: #207a4699;
+  #vDetailPane {
+    max-width: 425px;
+
+    .indent {
+      border-left: 2px solid #777a;
     }
 
-    &.sellred {
-      background-color: #99302b99;
+    table.fee-breakout {
+      margin: 5px 0;
+
+      td {
+        border: 1px solid #777a;
+        text-align: center;
+        padding: 2px 5px;
+      }
     }
   }
+}
 
-  .loader {
-    height: 40px;
-  }
+.market-stats-v1 {
+  display: flex;
+  margin: 0 5px;
+  gap: 15px;
 
-  .order-opt {
-    border: 1px solid #424242;
-    border-radius: 3px;
-    padding: 4px;
-    margin-top: 8px;
-    opacity: 0.7;
+  .data-point {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    margin-left: 20px;
+    font-size: 18px;
+    line-height: 1.25;
 
-    div.opt-check {
-      width: 15px;
-      height: 15px;
-      border-radius: 7.5px;
-      border: 2px solid #424242;
-      margin-top: 5px;
-      cursor: pointer;
+    span.label {
+      font-family: $demi-sans;
+      font-size: 15px;
     }
+  }
 
-    .xy-range-input {
-      width: 35px;
-      font-size: 14px;
-      height: 16px;
-    }
+  .twentyfour {
+    margin-left: 0;
+    border-left: 1px solid $light_border_color;
 
-    .slider {
-      margin: 10px 10px 5px;
-      height: 2px;
-      background-color: grey;
-      position: relative;
+    .data-point {
+      margin-left: 0;
 
-      .slider-handle {
-        position: absolute;
-        height: 20px;
-        width: 14px;
-        top: -9px;
-        border-radius: 7px;
-        background-color: #2cce9c;
-        border: 2px solid #424242;
-        cursor: pointer;
+      & > * {
+        padding-right: 20px;
       }
-    }
 
-    &:not(.selected) {
-      cursor: pointer;
-    }
+      span.label {
+        width: 100%;
+        border-bottom: 1px solid $light_border_color;
+      }
 
-    &.selected {
-      opacity: 1;
-      background-color: #e8ebed;
+      &:first-child > span.label {
+        padding-right: 5px;
+        padding-left: 5px;
+      }
 
-      div.opt-check {
-        background-color: #2cce9c;
+      &:nth-child(3),
+      &:nth-child(4) {
+        align-items: flex-end;
+
+        span.label {
+          text-align: right;
+        }
+      }
+
+      &:nth-child(4) > * {
+        padding-right: 0;
       }
     }
   }
 
-  #vUnlockPreorder {
-    .ico-locked {
-      font-size: 35px;
-    }
+  img {
+    width: 30px;
+    height: 30px;
+
+    // &:nth-child(1) {
+    //   position: relative;
+    //   left: 5px;
+    // }
   }
 }
 
-div.numorders {
-  background-color: #c5c5e6;
-  border-radius: 3px;
-  line-height: 1;
-  padding: 1px;
-  font-size: 0.9em;
+#headerSpace .market-stats-v1 {
+  display: none;
 }
 
-#liveTable {
-  th,
-  td {
-    padding: 2px 10px;
-    white-space: nowrap;
+#main .market-stats-v1 {
+  border-bottom: 1px solid $light_border_color;
+}
 
-    &.last {
-      flex: 1;
-      min-width: 57px;
-    }
-  }
+#recentMatchesBox {
+  @extend .stylish-overflow;
+
+  max-height: 350px;
+}
 
+#recentMatchesTable {
   th {
     align-items: center;
 
@@ -691,67 +710,123 @@ div.numorders {
   tr {
     cursor: pointer;
   }
+}
 
-  .ico-cross {
-    font-size: 12px;
-    cursor: pointer;
+@include media-breakpoint-up(xl) {
+  #main .market-stats-v1 {
+    display: none;
+    border-top: none;
   }
 
-  .ico-rocket {
-    font-size: 12px;
-    cursor: pointer;
+  #headerSpace .market-stats-v1 {
+    display: flex;
   }
-}
 
-#recentMatchesTable {
-  th {
-    align-items: center;
+  div[data-handler=markets] #leftColumnV1 {
+    position: relative;
 
-    &:hover {
-      opacity: 0.7;
+    &.default {
+      display: flex;
     }
+  }
+}
 
-    .ico-arrowdown {
-      display: inline-block;
-      visibility: hidden;
-      vertical-align: middle;
-      font-size: 10px;
-      margin-left: 5px;
+@include media-breakpoint-up(lg) {
+  div[data-handler=markets] {
+    #mainContent {
+      overflow: hidden;
+      flex-direction: row;
+      align-items: stretch;
+      row-gap: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+
+      & > div:nth-child(n) { // need nth-child for specificity
+        min-height: auto;
+      }
+
+      & > div:first-child { // order book
+        order: 1;
+      }
+
+      & > div:nth-child(2) { // charts
+        width: auto;
+        order: 2;
+      }
+
+      & > div:last-child { // order form, wallets, user orders
+        order: 3;
+      }
     }
 
-    &.sorted-dsc {
-      .ico-arrowdown {
-        visibility: visible;
+    .ordertable-wrap {
+      height: calc(50% - 15px);
+      display: flex;
+
+      &.reversible {
+        flex-direction: column-reverse;
+      }
+
+      &:first-child {
+        border-bottom: 1px solid $light_border_color;
+      }
+
+      &:last-child {
+        border-top: 1px solid $light_border_color;
+      }
+
+      tbody {
+        display: flex;
+      }
+
+      tbody#sellRows {
+        flex-direction: column-reverse;
+        border-top: none;
+      }
+
+      tbody#buyRows {
+        flex-direction: column;
       }
     }
 
-    &.sorted-asc {
-      .ico-arrowdown {
-        visibility: visible;
-        transform: rotate(180deg);
+    .orderbook {
+      border-left: none;
+      border-top: none;
+      width: auto;
+
+      & > div:first-child { // sell orders
+        order: 1;
+      }
+
+      & > div:nth-child(2) { // header
+        order: 2;
+      }
+
+      & > div:last-child { // buy orders
+        order: 3;
       }
     }
-  }
 
-  tr {
-    cursor: pointer;
-  }
-}
+    .order-panel {
+      width: 375px;
 
-#vDetailPane {
-  max-width: 425px;
+      & > div {
+        @include fill-abs;
+        @include stylish-overflow;
 
-  .indent {
-    border-left: 2px solid #777a;
+        height: 100%;
+        overflow-x: hidden;
+        border-style: none none none solid;
+      }
+    }
   }
 
-  table.fee-breakout {
-    margin: 5px 0;
+  table.ordertable {
+    width: auto;
+  }
 
-    td {
-      border: 1px solid #777a;
-      text-align: center;
-      padding: 2px 5px;
-    }
+  #recentMatchesBox {
+    overflow: visible;
+    max-height: none;
   }
 }
diff --git a/client/webserver/site/src/css/market_dark.scss b/client/webserver/site/src/css/market_dark.scss
index 21bef59e6a..8f38b625c5 100644
--- a/client/webserver/site/src/css/market_dark.scss
+++ b/client/webserver/site/src/css/market_dark.scss
@@ -1,154 +1,208 @@
 body.dark {
-  input[type=number] {
-    border-color: #444;
-  }
+  div[data-handler=markets] {
+    input[type=number] {
+      border-color: #444;
+    }
 
-  table.ordertable {
-    color: #a1a1a1;
+    table.ordertable {
+      color: #a1a1a1;
 
-    tr {
-      border-bottom: 1px solid #222;
+      tbody > tr:hover,
+      tbody > tr.hover {
+        background-color: #1d2936;
+      }
     }
 
-    tbody > tr:hover,
-    tbody > tr.hover {
-      background-color: #1d2936;
+    .numorders {
+      background-color: #141488;
     }
-  }
 
-  div.marketorders {
-    background-color: #080808;
+    .markettab.selected {
+      background-color: #fff1;
+    }
 
-    table.ordertable tr {
-      border-bottom: 1px solid #131313;
+    .market-bal {
+      border: 1px solid $dark_border_color;
+      border-radius: 3px;
     }
-  }
 
-  div.numorders {
-    background-color: #141488;
-  }
+    .brdrleft {
+      border-left: 1px solid $dark_border_color;
+    }
 
-  div.marketlist {
-    background-color: #1c1c1f;
-    border-right-color: black;
+    .brdrright {
+      border-right: 1px solid $dark_border_color;
+    }
 
-    .grey {
-      color: #999;
+    .brdrtop {
+      border-top: 1px solid $dark_border_color;
     }
-  }
 
-  .marketrow {
-    background-color: #34383e;
+    .brdrbottom {
+      border-bottom: 1px solid $dark_border_color;
+    }
 
-    &.selected {
-      border: 1px solid #7a97;
+    .chart-legend {
+      color: #999;
     }
-  }
 
-  label.market-search {
-    background-color: black;
-  }
+    .ordertable-wrap {
+      &:first-child {
+        border-bottom: 1px solid $dark_border_color;
+      }
 
-  .markettab.selected,
-  .market-bal-lbl {
-    background-color: $dark_bg_1;
-  }
+      &:last-child {
+        border-top: 1px solid $dark_border_color;
+      }
 
-  .market-header {
-    background-color: $dark_bg_3;
-    color: inherit;
+      tbody#sellRows {
+        border-top: 1px solid $dark_border_color;
+      }
+    }
 
-    button {
-      color: #bbb;
+    .orderbook {
+      border-right: 1px solid $dark_border_color;
+      border-left: 1px solid $dark_border_color;
+      border-top: 1px solid $dark_border_color;
     }
 
-    button:hover,
-    button.selected {
-      color: #f2fffd;
+    .order-panel > div {
+      border: 1px solid $dark_border_color;
     }
-  }
 
-  .market-bal {
-    border: 1px solid #3a3a3a;
-    border-radius: 3px;
-  }
+    .user-order {
+      border: 1px solid $dark_border_color;
 
-  .brdrleft {
-    border-left: 1px solid black;
-  }
+      .order-details {
+        border-color: $dark_border_color;
+      }
 
-  .brdrright {
-    border-right: 1px solid black;
-  }
+      .user-order-header {
+        .side-indicator {
+          &.buy {
+            background-color: $buycolor_dark;
+          }
 
-  #marketChart {
-    background-color: #131313;
-    border-bottom-color: black;
+          &.sell {
+            background-color: $buycolor_dark;
+          }
+        }
 
-    .chart-legend {
-      color: #999;
+        .active-indicator.active {
+          background-color: $buycolor_dark;
+        }
+      }
     }
-  }
 
-  #orderForm {
-    color: #a1a1a1;
+    #orderForm {
+      color: #a1a1a1;
 
-    button {
-      color: #aaa;
-    }
-
-    button:hover,
-    button.selected {
-      color: #eee;
-    }
+      button {
+        color: #aaa;
+      }
 
-    button.submit {
-      background-color: #0b5831;
-      color: #eee;
-    }
+      button:hover,
+      button.selected {
+        color: #eee;
+      }
 
-    button.selected,
-    button.submit {
-      &.buygreen {
-        background-color: #05a35a99;
+      button.submit {
+        background-color: #0b5831;
+        color: #eee;
       }
 
-      &.sellred {
-        background-color: #ae333399;
+      button.selected,
+      button.submit {
+        &.buygreen-bg {
+          background-color: #29bb7799;
+        }
+
+        &.sellred-bg {
+          background-color: #e95e5e99;
+        }
       }
     }
-  }
 
-  #verifyForm {
-    .header {
-      &.buygreen {
-        background-color: #05a35a99;
+    #verifyForm {
+      .header {
+        &.buygreen-bg {
+          background-color: #29bb7799;
+        }
+
+        &.sellred-bg {
+          background-color: #e95e5e99;
+        }
       }
 
-      &.sellred {
-        background-color: #ae333399;
+      button.selected {
+        &.buygreen-bg {
+          background-color: #29bb7799;
+        }
+
+        &.sellred-bg {
+          background-color: #e95e5e99;
+        }
       }
-    }
 
-    button.selected {
-      &.buygreen {
-        background-color: #05a35a99;
+      .order-opt.selected {
+        background-color: #222e38;
       }
+    }
 
-      &.sellred {
-        background-color: #ae333399;
+    #leftColumnV1 {
+      border-color: $dark_border_color;
+      background-color: $dark_body_bg;
+
+      #searchBoxV1 {
+        border-color: $dark_border_color;
+
+        #leftHider {
+          border-color: $dark_border_color;
+        }
       }
     }
+  }
 
-    .order-opt.selected {
-      background-color: #222e38;
+  .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;
+
+    .candle-dur-bttn {
+      background-color: $dark_body_bg;
     }
   }
+}
+
+@include media-breakpoint-up(lg) {
+  body.dark div[data-handler=markets] {
+    .orderbook {
+      border-left: none;
+      border-top: none;
+    }
+
+    .ordertable-wrap {
+      &:first-child {
+        border-bottom: 1px solid $dark_border_color;
+      }
+
+      &:last-child {
+        border-top: 1px solid $dark_border_color;
+      }
 
-  #liveTable {
-    th {
-      .ico-arrowdown {
-        color: #a1a1a1;
+      tbody#sellRows {
+        border-top: none;
       }
     }
   }
diff --git a/client/webserver/site/src/css/wallets.scss b/client/webserver/site/src/css/wallets.scss
index 76a854266f..6fc0384016 100644
--- a/client/webserver/site/src/css/wallets.scss
+++ b/client/webserver/site/src/css/wallets.scss
@@ -1,8 +1,4 @@
 .walletspage {
-  .grey {
-    color: #999;
-  }
-
   .ico-unlocked {
     color: #1e7d11;
   }
@@ -23,15 +19,6 @@
     min-width: 90%;
   }
 
-  .bg1 {
-    background-color: #0e0c1b;
-  }
-
-  .border-top-lt-xxl,
-  .border-top-lt-lg {
-    border-top: 1px solid #7777;
-  }
-
   #depositAddress {
     user-select: all;
   }
@@ -52,12 +39,9 @@
     margin-right: 5px;
   }
 
-  #copyAlert {
-    margin-left: 12px;
-    position: absolute;
-  }
-
   #assetSelect {
+    border-right: 1px solid $dark-border-color;
+
     .icon-select {
       padding: 15px;
       cursor: pointer;
@@ -185,6 +169,15 @@
     width: 100px;
     height: 100px;
   }
+
+  #marketsOverviewBox {
+    border-left: 1px solid $light_border_color;
+    border-bottom: 1px solid $light_border_color;
+  }
+
+  #walletDetailsBox {
+    border-bottom: $light_border_color;
+  }
 }
 
 @include media-breakpoint-up(xxl) {
@@ -193,13 +186,13 @@
   }
 
   .walletspage {
-    .border-top-lt-xxl {
-      border-top: none;
-    }
-
     .flex-nowrap-xxl {
       flex-wrap: nowrap;
     }
+
+    div#orderActivityBox {
+      border-top: none;
+    }
   }
 }
 
@@ -213,12 +206,17 @@
   }
 
   .walletspage {
-    .bg1-lg {
-      background-color: #0e0c1b;
+    #orderActivityBox {
+      border-top: 1px solid $dark-border-color;
     }
 
-    .border-top-lt-lg {
-      border-top: none;
+    #marketsOverviewBox {
+      border-right: 1px solid $dark-border-color;
+      border-bottom: none;
+    }
+
+    #walletDetailsBox {
+      border-bottom: none;
     }
   }
 
diff --git a/client/webserver/site/src/css/wallets_dark.scss b/client/webserver/site/src/css/wallets_dark.scss
index 778d7792dc..97b6d8df8d 100644
--- a/client/webserver/site/src/css/wallets_dark.scss
+++ b/client/webserver/site/src/css/wallets_dark.scss
@@ -1,16 +1,12 @@
-body.dark .walletspage {
-  table.wallets {
-    tbody tr {
-      background-color: $dark_bg_2;
+body.dark {
+  .walletspage {
+    #marketsOverviewBox {
+      border-left: 1px solid $dark_border_color;
+      border-bottom: 1px solid $dark_border_color;
     }
 
-    button {
-      background-color: black;
-      color: $font-color-dark;
-    }
-
-    td {
-      border-color: #333;
+    #walletDetailsBox {
+      border-bottom: $dark_border_color;
     }
   }
 }
diff --git a/client/webserver/site/src/html/bodybuilder.tmpl b/client/webserver/site/src/html/bodybuilder.tmpl
index 8a9239b0fd..29d6132304 100644
--- a/client/webserver/site/src/html/bodybuilder.tmpl
+++ b/client/webserver/site/src/html/bodybuilder.tmpl
@@ -8,7 +8,7 @@
   <link rel="icon" href="/img/favicon.png?v=AK4XS4">
   <meta name="description" content="Decred DEX Client Web Portal">
   <title>{{.Title}}</title>
-  <link href="/css/style.css?v=RQIW8193" rel="stylesheet">
+  <link href="/css/style.css?v=GHTDFVH710" rel="stylesheet">
 </head>
 <body {{if .UserInfo.DarkMode}} class="dark"{{end}}>
   <div class="popup-notes" id="popupNotes">
@@ -25,24 +25,25 @@
 <header id=header class="maintop">
   {{$authed := .UserInfo.Authed}}
   {{$marketsReady := and $authed (gt (len .UserInfo.Exchanges) 0)}}
-  <a href="/" class="logo d-none d-md-block"></a>
+  <a href="/" class="logo-icon d-none d-md-block"></a>
   <a href="/" class="logo-icon d-block d-md-none"></a>
-  <div class="mainlinks fs18 offwhite">
+  <div id="headerSpace"></div>
+  <div class="mainlinks fs18 offwhite pe-3">
 
-    <a href="/markets" class="demi hoverbright{{if not $marketsReady}} d-hide{{end}}" id="marketsMenuEntry">[[[Markets]]]</a>
+    <a href="/markets" class="demi hoverbg{{if not $marketsReady}} d-hide{{end}}" id="marketsMenuEntry">[[[Markets]]]</a>
 
-    <a href="/wallets" class="demi hoverbright{{if not $authed}} d-hide{{end}}" id="walletsMenuEntry">[[[Wallets]]]</a>
+    <a href="/wallets" class="demi hoverbg{{if not $authed}} d-hide{{end}}" id="walletsMenuEntry">[[[Wallets]]]</a>
 
-    <div class="d-inline-block position-relative{{if not $authed}} d-hide{{end}}" id="noteMenuEntry">
-      <span class="ico-bell fs20 hoverbright" id="noteBell"></span>
+    <div class="d-inline-block position-relative hoverbg{{if not $authed}} d-hide{{end}}" id="noteBell">
+      <span class="ico-bell fs20  p-2"></span>
       <div id="noteIndicator" class="d-hide"></div>
     </div>
 
-    <div class="d-inline-block position-relative{{if not $authed}} d-hide{{end}}" id="profileMenuEntry">
-      <span class="ico-profile fs20 hoverbright" id="profileIcon"></span>
+    <div class="d-inline-block position-relative hoverbg{{if not $authed}} d-hide{{end}}" id="profileIcon">
+      <span class="ico-profile p-2 fs20"></span>
     </div>
 
-    <a href="/settings" class="ico-settings hoverbright fs24"></a>
+    <a href="/settings" class="ico-settings hoverbg fs24"></a>
 
   </div>
   <div id="loader" class="fill-abs flex-center d-hide">
@@ -51,7 +52,7 @@
 
   <div id="noteBox" class="d-hide">
     <div class="icon fs20 ico-bell p-1" id="innerNoteIcon"></div>
-    <div class="header d-flex align-items-center justify-content-start fs17 demi hoverbright px-3 py-2">
+    <div class="header d-flex align-items-center justify-content-start fs17 demi hoverbg px-3 py-2">
       <div id="noteCat" class="active">[[[Notifications]]]</div>
       <div id="pokeCat">[[[Recent Activity]]]</div>
     </div>
@@ -78,15 +79,15 @@
 
   <div id="profileBox" class="d-hide">
     <div class="icon fs20 ico-profile p-1" id="innerProfileIcon"></div>
-    <span class="demi hoverbright pointer" id="profileSignout">[[[Sign Out]]]</span>
-    <a href="/orders" class="demi hoverbright plainlink pt-2">[[[Order History]]]</a>
+    <span class="demi hoverbg pointer" id="profileSignout">[[[Sign Out]]]</span>
+    <a href="/orders" class="demi hoverbg plainlink pt-2">[[[Order History]]]</a>
   </div>
 
 </header>
 {{end}}
 
 {{define "bottom"}}
-<script src="/js/entry.js?v=RQIW8193"></script>
+<script src="/js/entry.js?v=GHTDFVH710"></script>
 </body>
 </html>
 {{end}}
diff --git a/client/webserver/site/src/html/forms.tmpl b/client/webserver/site/src/html/forms.tmpl
index 81be4c2160..951f773831 100644
--- a/client/webserver/site/src/html/forms.tmpl
+++ b/client/webserver/site/src/html/forms.tmpl
@@ -111,6 +111,25 @@
 <div class="fs15 pt-3 text-center d-hide errcolor text-break" id="unlockErr"></div>
 {{end}}
 
+{{define "depositAddress"}}
+<div class="form-closer hoverbg"><span class="ico-cross"></span></div>
+<div class="px-2 py-1 mb-2 text-center position-relative fs22 sans-light">
+  [[[Deposit]]]
+  <img id="depositLogo" class="micro-icon mx-1">
+  <span id="depositName"></span>
+</div>
+<img class="mb-3" id="qrcode" />
+<div class="mono bg0 p-2 fs15">
+  <span id="depositAddress"></span>
+  <span id="copyAddressBtn" class="ico-copy mt-2 ml-2 fs18"></span>
+  <span id="copyAlert" class="d-hide">[[[copied]]]</span>
+</div>
+<div class="my-3">
+  <button id="newDepAddrBttn" type="button" class=" px-2 justify-content-center fs15 bg2 selected">[[[New Deposit Address]]]</button>
+</div>
+<div class="fs15 pt-3 text-center d-hide errcolor text-break" id="depositErr"></div>
+{{end}}
+
 {{define "dexAddrForm"}}
 <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
 <div data-tmpl="addDexHdr" class="flex-center fs24 sans-light"><span class="ico-plus fs12 me-2"></span> [[[Add a DEX]]]</div>
diff --git a/client/webserver/site/src/html/markets.tmpl b/client/webserver/site/src/html/markets.tmpl
index e18e4407d6..de95f14257 100644
--- a/client/webserver/site/src/html/markets.tmpl
+++ b/client/webserver/site/src/html/markets.tmpl
@@ -10,445 +10,433 @@
 
 {{define "markets"}}
 {{template "top" .}}
-<div id="main" data-handler="markets" class="main clear m-0 flex-nowrap">
-
+<div id="main" data-handler="markets" class="main m-0 flex-nowrap v1">
   {{- /* MARKET LIST */ -}}
-  <div class="marketlist">
+  <div id="leftColumnV1" class="flex-column align-items-end v1 default">
+    <div class="h-100 d-flex flex-column align-items-stretch">
 
-    {{- /* SEARCH INPUT */ -}}
-    <label class="market-search">
-      <div><span class="ico-search px-2"></span></div>
-      <div class="flex-grow-1 position-relative">
-        <input type="text" id="marketSearch" class="px-1">
-      </div>
-    </label>
-
-    {{- /* LIST OF EXCHANGE SECTIONS WITH MARKETS */ -}}
-    <div id="marketList">
-      <div data-tmpl="xc" class="xc">
-        <div class="header d-flex justify-content-start align-items-center ps-1 fs14 grey">
-          <span class="ico-disconnected" title="disconnected" data-tmpl="disconnected"></span>
-          <span data-tmpl="header"></span>
+      <div class="d-flex align-items-stretch" id="searchBoxV1">
+        <div class="flex-grow-1 p-1 position-relative">
+          <input type="text" id="marketSearchV1" spellcheck="false">
+          <div class="ico-search fs22"></div>
         </div>
-        
-        <div data-tmpl="mkts">
-          <div class="marketrow" data-tmpl="mktrow">
-            <div>
-              <img class="micro-icon me-1" data-tmpl="baseIcon">
-              <img class="micro-icon me-1" data-tmpl="quoteIcon">
-              <div class="ps-1 pe-2 flex-grow-1">
+        <div id="leftHider" class="flex-center pointer hoverbg">
+          <span class="ico-arrowback fs24">
+        </div>
+      </div>
+
+      <div class="flex-grow-1 overflow-y-hidden">
+        <div id="marketListV1" class="stylish-overflow hoveronly overflow-x-hidden">
+          <div id="marketTmplV1" class="market-tmpl-v1 d-flex align-items-stretch p-2 my-1 pointer hoverbg">
+            <div class="flex-center">
+              <img data-tmpl="baseIcon">
+              <img data-tmpl="quoteIcon" class="ms-1">
+              <span class="disconnected ico-disconnected d-hide" id="disconnectedIcon"></span>
+            </div>
+            <div class="d-flex flex-column pe-4 ps-2 flex-grow-1">
+              <span class="fs17 demi">
                 <span data-tmpl="baseSymbol"></span>-<span data-tmpl="quoteSymbol"></span>
-              </div>
-              <span data-tmpl="pctChange" class="upgreen fs14 demi d-hide pct-change"></span>
+              </span>
+              <span class="fs15 grey" data-tmpl="baseName"></span>
             </div>
-            <div class="justify-content-between fs12 grey d-hide" data-tmpl="bottomRow">
-              <span data-tmpl="assetName">Decred</span>
-              <span data-tmpl="price">0.00296</span>
+            <div class="d-flex flex-column align-items-end ps-3">
+              <span data-tmpl="price" class="fs17">-</span>
+              <span data-tmpl="change" class="fs15">-</span>
             </div>
-            
           </div>
         </div>
       </div>
     </div>
-
   </div>
 
-  {{- /* RIGHT COLUMN */ -}}
-  <div id="rightSide" class="d-flex flex-column flex-grow-1 h-100 overflow-y-auto overflow-x-hidden">
-
-    {{- /* CHART */ -}}
+  {{- /* MAIN CONTENT */ -}}
+  <div class="flex-grow-1 position-relative v1">
+    <div class="stylish-overflow h-100 w-100 overflow-x-hidden d-flex flex-column align-items-stretch">
 
-    <div id="marketChart" class="w-100">
-      <div id="chartErrMsg" class="fs15 pt-3 text-center d-hide errcolor text-break"></div>
-      <div id="marketLoader" class="fill-abs flex-center">
-        <div class="ico-spinner spinner"></div>
-
-      </div>
-      <div class="chart-legend" id="chartLegend">
-        <button class="chart-selector" id="candlestickBttn"></button>
-        <button class="chart-selector d-hide" id="depthBttn"></button>
-        <div class="d-flex align-items-center" id="epochLine"><div class="epoch-line"></div> [[[epoch]]]</div>
-        <div class="flex-grow-1">
-          <div id="hoverData" class="d-flex align-items-center d-hide">
-            <span class="category-spacer text-center text-nowrap"></span>
-            <span class="ico-target fs11 me-1"></span>
-            <span id="depthHoverData">
-              [[[price]]]: <span id="hoverPrice"></span>,
-              [[[volume]]]: <span id="hoverVolume"></span>
-            </span>
-            <span class="d-hide" id="candleHoverData">
-              S: <span id="candleStart"></span>,
-              E: <span id="candleEnd"></span>,
-              L: <span id="candleLow"></span>,
-              H: <span id="candleHigh"></span>,
-              V: <span id="candleVol"></span>
-            </span>
+      {{- /* MARKET STATS - SMALL SCREENS */ -}}
+      <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 data-tmpl="baseIcon"><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>
+          </div>
+          <span class="ico-arrowdown fs8 grey ms-1"></span>
         </div>
-        <div id="depthSummary" class="d-flex align-items-center">
-          <span>[[[sells]]]: <span id="sellBookedBase"></span> <span data-unit="base"></span>, <span id="sellBookedQuote"></span> <span data-unit="quote"></span></span>
-          <span class="category-spacer"></span>
-          <span class="me-2">[[[buys]]]: <span id="buyBookedBase"></span> <span data-unit="base"></span>, <span id="buyBookedQuote"></span> <span data-unit="quote"></span></span>
+  
+        <div class="data-point">
+          <span class="label grey">Price</span>
+          <div class="flex-center me-2">
+            <span data-tmpl="price"></span>
+            <div data-tmpl="change" class="ms-2"></div>
+          </div>
+        </div>
+
+        <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">Volume</span>
+            <div class="flex-center 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 data-tmpl="high">-</div>
+            </div>
+          </div>
+    
+          <div class="data-point">
+            <span class="label grey">Low</span>
+            <div class="flex-center ms-2">
+              <div data-tmpl="low">-</div>
+            </div>
+          </div>
         </div>
-        <div class="d-flex flex-nowrap me-2 d-hide" id="durBttnBox"><button class="candle-dur-bttn" id="durBttnTemplate"></button></div>
       </div>
-      <div id="chartResizer"></div>
-    </div>
 
-    {{- /* ORDERS */ -}}
-    <div id="orders" class="w-100 d-flex flex-grow-1 flex-wrap bg1">
+      <div class="flex-grow-1 position-relative">
+        <div id="mainContent">
 
-      <div class="orders-left col-24 col-xxl-14 p-0">
-        <div class="row m-0 h-100">
+          {{- /* ORDER BOOK */ -}}
+          <div class="d-flex flex-column orderbook">
+            <div class="stylish-overflow hoveronly overflow-x-hidden flex-grow-1 ordertable-wrap reversible">
 
-          {{- /* BUY ORDER LIST */ -}}
-          <div class="marketorders order-lg-1 order-2 col-lg-7 p-0 bg1 d-flex flex-column">
-            <div class="market-header text-center fs14 py-1">[[[Buy Orders]]]</div>
-            <div class="brdrleft flex-grow-1 bg1 position-relative">
-              <div class="market-orders-table-container stylish-overflow">
-                <table class="ordertable">
-                  {{block "thead" .}}
-                  <thead>
-                    <tr>
-                      <th class="text-start ps-2">[[[Quantity]]]</th>
-                      <th class="text-end pe-2">[[[Rate]]]</th>
-                      <th class="text-end pe-2">[[[Epoch]]]</th>
-                    </tr>
-                  </thead>
-                  {{end}}
-                  <tbody id="buyRows">
-                    {{- /* This row is used by the app as a template. */ -}}
-                    <tr id="rowTemplate">
-                      <td class="ps-2">
-                        <div class="d-flex justify-content-start align-items-center">
-                          <div data-tmpl="qty">-</div>
-                          <div class="numorders text-center ms-2" data-tmpl="numorders">-</div>
-                        </div>
-                      </td>
-                      <td class="text-end pe-2" data-tmpl="rate">-</td>
-                      <td class="text-end pe-3" data-tmpl="epoch"></td>
-                    </tr>
-                  </tbody>
-                </table>
+              {{- /* SELL ORDER LIST */ -}}
+              <table class="ordertable">
+                <tbody id="sellRows"></tbody>
+              </table>
+            </div>
+
+            <div class="ordertable-header flex-center fs15">
+              <span class="flex-grow-1">Order Book</span>
+              <span class="flex-center">
+                <span id="obUp" class="ico-arrowup buycolor fs11"></span>
+                <span id="obPrice" class="buycolor ms-1">0.001568</span>
+              </span>
+            </div>
+
+            <div class="stylish-overflow hoveronly overflow-x-hidden flex-grow-1 ordertable-wrap">
+
+              {{- /* BUY ORDER LIST */ -}}
+              <table class="ordertable buys">
+                <tbody id="buyRows">
+                  {{- /* This row is used by the app as a template. */ -}}
+                  <tr id="rowTemplate">
+                    <td class="ps-2">
+                      <div class="d-flex justify-content-start align-items-center">
+                        <div data-tmpl="qty">-</div>
+                        <div class="numorders text-center ms-2" data-tmpl="numorders">-</div>
+                      </div>
+                    </td>
+                    <td class="text-end pe-2" data-tmpl="rate">-</td>
+                    <td class="text-end pe-3" data-tmpl="epoch"></td>
+                  </tr>
+                </tbody>
+              </table> {{- /* END BUY ORDER LIST */ -}}
+            </div>
+          </div> {{- /* END ORDER BOOK */ -}}
+
+          {{- /* CHARTS */ -}}
+          <div class="flex-grow-1 position-relative">
+            <div class="fill-abs d-flex flex-column align-items-stretch">
+              <div id="candlesChart" class="market-chart">
+                <div id="durBttnBox"><button class="candle-dur-bttn" id="durBttnTemplate"></button></div>
+              </div>
+
+              <div class="chart-legend">
+                <div id="chartErrMsg" class="p-2 flex-center errcolor w-100"></div>
+                <div class="flex-grow-1">
+                  <div id="hoverData" class="d-flex align-items-center d-hide">
+                    <span class="ico-target fs11 me-1"></span>
+                    <span id="depthHoverData">
+                      [[[price]]]: <span id="hoverPrice"></span>,
+                      [[[volume]]]: <span id="hoverVolume"></span>
+                    </span>
+                    <span class="d-hide" id="candleHoverData">
+                      S: <span id="candleStart"></span>,
+                      E: <span id="candleEnd"></span>,
+                      L: <span id="candleLow"></span>,
+                      H: <span id="candleHigh"></span>,
+                      V: <span id="candleVol"></span>
+                    </span>
+                  </div>
+                </div>
+
+                <div id="depthSummary" class="d-flex align-items-center d-hide">
+                  <span>[[[sells]]]: <span id="sellBookedBase"></span> <span data-unit="base"></span>, <span id="sellBookedQuote"></span> <span data-unit="quote"></span></span>
+                  |
+                  <span class="me-2">[[[buys]]]: <span id="buyBookedBase"></span> <span data-unit="base"></span>, <span id="buyBookedQuote"></span> <span data-unit="quote"></span></span>
+                </div>
+              </div>
+
+              <div id="depthChart" class="market-chart">
+                <div id="epochLine" class="d-hide"><div class="epoch-line"></div> [[[epoch]]]</div>
               </div>
             </div>
           </div>
 
-          {{- /* ORDER PANEL */ -}}
-          <div class="col-lg-10 order-1 order-lg-2 order-panel p-0 brdrleft brdrright d-flex flex-column">
-            <div class="market-header fs14 d-flex justify-content-start ps-4 align-items-stretch">
-              <button id="limitBttn" type="button" class="flex-center px-3 py-0 markettab brdrleft selected">[[[Limit Order]]]</button>
-              <button id="marketBttn" type="button" class="flex-center px-3 py-0 markettab brdrleft brdrright">[[[Market Order]]]</button>
-            </div>
+          {{- /* ORDER FORM */ -}}
+          <div class="order-panel pb-3 position-relative">
+            <div class="d-flex flex-column align-items-stretch">
 
-            <div class="flex-grow-1 position-relative">
-              <div class="fill-abs px-4 stylish-overflow">
+              {{- /* ORDER TYPE BUTTONS */ -}}
+              <div id="orderTypeBttns" class="fs14 d-flex justify-content-start align-items-stretch d-hide">
+                <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>
+              <div class="fs15 pt-3 text-center d-hide" id="loaderMsg"></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>
-                    </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>
                   </div>
                 </div>
+              </div>
 
-                {{- /* ORDER FORM */ -}}
-                <form id="orderForm" class="bg1">
-                  <div class="p-0 w-100">
-
-                    {{- /* BUY - SELL SELECTOR */ -}}
-                    <div class="d-flex justify-content-start pt-4 pb-2 fs14">
-                      <button id="buyBttn" type="button" class="bg2 buygreen selected">
-                        [[[Buy]]]
-                        <span data-unit="base"></span>
-                      </button>
-                      <button id="sellBttn" type="button" class="bg2 sellred ms-2">
-                        [[[Sell]]]
-                        <span data-unit="base"></span>
-                      </button>
-                      <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"></span>
+                    </button>
+                    <button id="sellBttn" type="button" class="sellred-bg ms-2">
+                      [[[Sell]]]
+                      <span data-unit="base"></span>
+                    </button>
+                    <span></span>
+                  </div>
 
-                    {{- /* MARKET CONFIG */ -}}
-                    <div class="d-flex justify-content-between my-2 fs14">
-                      <div>
-                        [[[Lot Size]]]:
-                        <span id="lotSize"></span>
-                        <span data-unit="base"></span>
-                      </div>
-                      <div>
-                        [[[Rate Step]]]:
-                        <span id="rateStep"></span>
-                        <span data-unit="quote"></span>
-                      </div>
+                  {{- /* MARKET CONFIG */ -}}
+                  <div class="d-flex justify-content-between my-2 fs14">
+                    <div>
+                      [[[Lot Size]]]:
+                      <span id="lotSize"></span>
+                      <span data-unit="base"></span>
                     </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>
+                    <div>
+                      [[[Rate Step]]]:
+                      <span id="rateStep"></span>
+                      <span data-unit="quote"></span>
+                    </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>
+                  </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">[[[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"></span>/<span class="unit" data-unit="base"></span></span>
-                      </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">[[[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"></span>/<span class="unit" data-unit="base"></span></span>
                     </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">[[[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"></span>
-                      </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">[[[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"></span>
                     </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"></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"></span>
-                        </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"></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"></span>
                       </div>
-                      <div class="p-0 fs14 flex-center mt-1">
-                        <span>
-                          ~ <span id="mktBuyScore">0</span> <span data-unit="base"></span>
-                          @ <span id="mktBuyLots">0</span> <span >[[[Lots]]]</span><br>
+                    </div>
+                    <div class="p-0 fs14 flex-center mt-1">
+                      <span>
+                        ~ <span id="mktBuyScore">0</span> <span data-unit="base"></span>
+                        @ <span id="mktBuyLots">0</span> <span >[[[Lots]]]</span><br>
 
-                        </span>
-                      </div>
+                      </span>
                     </div>
+                  </div>
 
-                    {{- /* ORDER PREVIEW */ -}}
-                    <div class="mt-2 fs14 text-end" id="orderPreview"></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>
+                  {{- /* 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"></button> {{/* textContent set by script */}}
-                    </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 class="fs15 pt-3 text-center d-hide errcolor text-break" id="orderErr"></div>
-                </form>
-
-                {{- /* BALANCES */ -}}
-                <div id="marketBalance" class="market-bal pt-2 pb-1 my-3 position-relative">
-                  <span class="market-bal-lbl">[[[Balances]]]</span>
-                  <table class="balance-table" id="balanceTable">
-                    <thead>
-                      <tr>
-                        <th></th>
-                        <th>
-                          <div class="d-flex align-items-center pb-1" id="baseWalletIcons">
-                            <img id="baseImg" class="micro-icon me-1">
-                            <span id="balBaseSymbol"></span>
-                            <div class="flex-grow-1"></div>
-                            <div id="baseWalletState" class="fs12">{{template "walletIcons"}}</div>
-                            <span class="ico-expired fs16 ps-1" id="baseExpired" data-tooltip="[[[outdated_tooltip]]]"></span>
-                          </div>
-                        </th>
-                        <th>
-                          <div class="d-flex align-items-center pb-1" id="quoteWalletIcons">
-                            <img id="quoteImg" class="micro-icon me-1">
-                            <span id="balQuoteSymbol"></span>
-                            <div class="flex-grow-1"></div>
-                            <div id="quoteWalletState" class="fs12">{{template "walletIcons"}}</div>
-                            <span class="ico-expired fs16 ps-1" id="quoteExpired" data-tooltip="[[[outdated_tooltip]]]"></span>
-                          </div>
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        <td class="fs16">[[[available]]]</td>
-                        <td id="baseUnsupported" rowspan="3">
-                          <div class="ico-cross"></div>
-                        </td>
-                        <td id="baseConnect" rowspan="3" class="pointer" data-tooltip="[[[connect_refresh_tooltip]]]">
-                          <div class="ico-sleeping"></div>
-                        </td>
-                        <td id="baseSpinner" rowspan="3">
-                          <div class="ico-spinner spinner"></div>
-                        </td>
-                        <td id="baseNewWalletRow" rowspan="3">
-                          <button id="baseNewButton" type="button" class="newwallet bg1 text-center">[[[add_a_base_wallet]]]</button>
-                        </td>
-                        <td id="baseWalletPendingRow" rowspan="3">
-                          <div class="ico-spinner spinner fs20"></div>
-                        </td>
-                        <td id="baseAvail" class="fs16"></td>
-                        <td id="quoteUnsupported" rowspan="3">
-                          <div class="ico-cross"></div>
-                        </td>
-                        <td id="quoteConnect" rowspan="3" class="pointer" data-tooltip="[[[connect_refresh_tooltip]]]">
-                          <div class="ico-sleeping"></div>
-                        </td>
-                        <td id="quoteSpinner" rowspan="3">
-                          <div class="ico-spinner spinner"></div>
-                        </td>
-                        <td id="quoteNewWalletRow" rowspan="3" class="brdr-left">
-                          <button id="quoteNewButton" type="button" class="newwallet bg1 text-center">[[[add_a_quote_wallet]]]</button>
-                        </td>
-                        <td id="quoteWalletPendingRow" rowspan="3">
-                          <div class="ico-spinner spinner fs20"></div>
-                        </td>
-                        <td id="quoteAvail" class="brdr-left fs16"></td>
-                      </tr>
-                      <tr>
-                        <td>[[[locked]]]</td>
-                        <td id="baseLocked"></td>
-                        <td id="quoteLocked" class="brdr-left"></td>
-                      </tr>
-                      <tr>
-                        <td>[[[immature]]]</td>
-                        <td id="baseImmature"></td>
-                        <td id="quoteImmature" class="brdr-left"></td>
-                      </tr>
-                      <tr class="d-hide" id="parentBalance">
-                        <td>fee balance</td>
-                        <td><span id="baseParent"></span> <img id="baseParentLogo" class="micro-icon"></td>
-                        <td><span id="quoteParent"></span> <img id="quoteParentLogo" class="micro-icon"></td>
-                      </tr>
-                    </tbody>
-                  </table>
                 </div>
-              </div>
-            </div>
-          </div>
+                <div class="fs15 pt-3 text-center d-hide errcolor text-break" id="orderErr"></div>
+              </form>
 
-          {{- /* SELL ORDER LIST */ -}}
-          <div class="marketorders col-lg-7 order-3 p-0 bg1 d-flex flex-column">
-            <div class="market-header text-center fs14 py-1">[[[Sell Orders]]]</div>
-            <div class="brdrleft flex-grow-1 bg1 position-relative">
-              <div class="market-orders-table-container stylish-overflow">
-                <table class="ordertable">
-                  {{template "thead"}}
-                  <tbody id="sellRows"></tbody>
-                </table>
+              {{- /* BALANCES */ -}}
+              <div id="noWallet" class="p-3 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">
+                <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>
+                <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"></div>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </div>
-      </div>
 
-      {{- /* USER ORDERS */ -}}
-      <div class="bg0 p-0 col-24 col-xxl-10 d-flex flex-column align-items-stretch">
-        <div class="market-header text-center fs14 py-1 brdrleft">
-          [[[Your Orders]]]
-        </div>
-        <div class="brdrleft flex-grow-1 bg1 position-relative">
+              {{- /* USER ORDERS */ -}}
+              <div id="userOrdersHeader" class="text-center fs20 sans-light my-1">[[[Your Orders]]]</div>
+              <div id="userNoOrders" class="p-3 flex-center fs16 grey">no active orders</div>
+              <div id="userOrders" class="mb-3">
+                <div id="userOrderTmpl" class="user-order">
+                  <div data-tmpl="header" class="user-order-header">
+                    <div data-tmpl="sideLight" class="side-indicator buy"></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="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 fs12 p-2">
+                      <span data-tmpl="accelerateBttn" class="ico-rocket pointer hoverbg d-hide me-3" data-tooltip="accelerate order"></span>
+                      <span data-tmpl="cancelBttn" class="ico-cross pointer hoverbg fs11 d-hide me-3" data-tooltip="[[[cancel order]]]"></span>
+                      <a data-tmpl="link" class="ico-open pointer hoverbg me-3 fs13 plainlink" 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>{{- /* END USER ORDERS */ -}}
 
-          <div class="user-orders-table-container stylish-overflow">
-            <table id="liveTable" class="ordertable">
-              <thead>
-                <tr>
-                  <th data-ordercol="type">[[[Type]]] <span class="ico-arrowdown"></span></th>
-                  <th data-ordercol="sell">[[[Side]]] <span class="ico-arrowdown"></span></th>
-                  <th data-ordercol="submitTime">[[[Age]]] <span class="ico-arrowdown"></span></th>
-                  <th data-ordercol="rate">[[[Rate]]] <span class="ico-arrowdown"></span></th>
-                  <th data-ordercol="qty">[[[Quantity]]] <span class="ico-arrowdown"></span></th>
-                  <th data-ordercol="filled">[[[Filled]]] <span class="ico-arrowdown"></span></th>
-                  <th data-ordercol="settled">[[[Settled]]] <span class="ico-arrowdown"></span></th>
-                  <th data-ordercol="status">[[[Status]]] <span class="ico-arrowdown"></span></th>
-                  <th class="last"></th>
-                </tr>
-              </thead>
-              <tbody id="liveList">
-                <tr id="liveTemplate">
-                  <td data-tmpl="type"></td>
-                  <td data-tmpl="side"></td>
-                  <td data-tmpl="age"></td>
-                  <td data-tmpl="rate"></td>
-                  <td data-tmpl="qty"></td>
-                  <td data-tmpl="filled"></td>
-                  <td data-tmpl="settled"></td>
-                  <td data-tmpl="status"></td>
-                  <td class="last text-end">
-                    <span data-tmpl="accelerateBttn" class="ico-rocket d-hide" data-tooltip="accelerate order"></span>
-                    <span data-tmpl="cancelBttn" class="ico-cross d-hide" data-tooltip="[[[cancel order]]]"></span>
-                    <a data-tmpl="link" class="ico-open fs13 pointer ms-2 plainlink" data-tooltip="[[[order details]]]"></a>
-                  </td>
-                </tr>
-              </tbody>
-              <tbody>
-                <tr>
-                  <td colspan="9" class="text-center">
-                    <a href="/orders" class="d-block fs14 px-2 plainlink">[[[view order history]]]</a>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
+              {{- /* RECENT MATCHES */ -}}
+              <div id=recentMatchesBox  class="d-flex flex-column align-items-stretch px-3 pb-4">
+                <div id="userOrdersHeader" class="text-center fs20 sans-light my-1">[[[Recent Matches]]]</div>
+                <table id="recentMatchesTable" class="ordertable">
+                  <thead>
+                    <tr>
+                      <th data-ordercol="age">[[[Age]]] <span class="ico-arrowdown"></span></th>
+                      <th data-ordercol="rate" class="text-end pe-2"><span class="ico-arrowdown"></span> [[[Rate]]]</th>
+                      <th data-ordercol="qty" class="text-end"><span class="ico-arrowdown"></span> [[[Quantity]]]</th>
+                    </tr>
+                  </thead>
+                  <tbody id="recentMatchesLiveList">
+                    <tr id="recentMatchesTemplate">
+                      <td data-tmpl="age"></td>
+                      <td data-tmpl="rate" class="text-end pe-2"></td>
+                      <td data-tmpl="qty" class="text-end"></td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>{{- /* END RECENT MATCHES */ -}}
 
-    {{- /* Recently Matched orders */ -}}
-    <div class="bg0 p-0 col-24 col-xxl-100 d-flex flex-column align-items-stretch">
-    {{/* <div class="bg0 p-0 col-24 col-xxl-10 d-flex flex-column align-items-stretch"> */}}
-        <div class="market-header text-center fs14 py-1 brdrleft">
-          [[[Recent Matches]]]
-        </div>
-        <div class=" brdrleft flex-grow-1 bg1 position-relative">
-          <div class="stylish-overflow">
-            <table id="recentMatchesTable" class="ordertable">
-              <thead>
-                <tr>
-                  <th data-ordercol="stamp">[[[Time]]] <span class="ico-arrowdown"></span></th>
-                  <th data-ordercol="rate">[[[Rate]]] <span class="ico-arrowdown"></span></th>
-                  <th data-ordercol="qty">[[[Quantity]]] <span class="ico-arrowdown"></span></th>
-                  <th class="last"></th>
-                </tr>
-              </thead>
-              <tbody id="recentMatchesLiveList">
-                <tr id="recentMatchesTemplate">
-                  <td data-tmpl="age"></td>
-                  <td data-tmpl="rate"></td>
-                  <td data-tmpl="qty"></td>
-                </tr>
-              </tbody>
-            </table>
+            </div>
           </div>
         </div>
       </div>
-  </div>
+    </div>
+  </div>{{- /* END CONTENT */ -}}
 
   {{- /* POP-UP FORMS */ -}}
   <div id="forms" class="d-hide">
@@ -458,6 +446,11 @@
       {{template "unlockWalletForm"}}
     </form>
 
+    {{- /* DEPOSIT ADDRESS */ -}}
+    <form class="position-relative flex-center flex-column fs20 d-hide" id="deposit">
+      {{template "depositAddress"}}
+    </form>
+
     {{- /* NEW WALLET */ -}}
     <form class="m-auto d-hide" id="newWalletForm" autocomplete="off">
       {{template "newWalletForm"}}
@@ -471,7 +464,7 @@
     {{- /* VERIFY FORM */ -}}
       <form class="position-relative fs16 text-center d-hide" 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" id="vHeader">
+        <div class="py-1 text-center fs18 position-relative header buygreen-bg" id="vHeader">
           <span id="vBuySell"></span> <span data-unit="base"></span>
         </div>
         <div class="d-flex justify-content-between align-items-center py-2 fs13">
@@ -556,7 +549,7 @@
               [[[Fee Projection]]]
               <span class="ico-info fs12" data-tooltip="[[[fee_projection_tooltip]]]"></span>
             </span>
-            <span class="grey fs14 underline pointer hoverbright" id="vFeeDetails">[[[details]]]</span>
+            <span class="grey fs14 underline pointer hoverbg" id="vFeeDetails">[[[details]]]</span>
           </div>
 
           <div class="py-1 d-flex align-items-center justify-content-center fs18" id="vFeeSummary">
@@ -587,7 +580,7 @@
                 <input type="password" class="form-control select w-100" id="vUnlockPass">
               </div>
               <div class="col-12 p-0 d-flex align-items-end justify-content-end">
-                <button type="button" id="vUnlockSubmit" class="selected buygreen">[[[Unlock]]]</button>
+                <button type="button" id="vUnlockSubmit" class="selected buygreen-bg">[[[Unlock]]]</button>
               </div>
             </div>
           </div>
diff --git a/client/webserver/site/src/html/wallets.tmpl b/client/webserver/site/src/html/wallets.tmpl
index 11d57a3500..d24fa0eb02 100644
--- a/client/webserver/site/src/html/wallets.tmpl
+++ b/client/webserver/site/src/html/wallets.tmpl
@@ -4,7 +4,7 @@
 <div id="main" data-handler="wallets" class="walletspage flex-grow-1 position-relative">
   <div class="fill-abs d-flex align-items-stretch">
     {{- /* ASSET SELECT */ -}}
-    <div class="d-flex flex-column align-items-stretch stylish-overflow bg1 invisible" id="assetSelect">
+    <div class="d-flex flex-column align-items-stretch stylish-overflow invisible" id="assetSelect">
       <div id="iconSelectTmpl" class="icon-select d-flex align-items-stretch">
         <img data-tmpl="img">
         <div class="d-none d-md-flex flex-column justify-content-around ps-2">
@@ -122,8 +122,8 @@
         </div>{{/* END WALLET DETAILS */}}
 
         {{- /* MARKETS OVERVIEW */ -}}
-        <div class="col-24 col-lg-12 col-xxl-8 d-flex stylish-overflow-lg bg1-lg border-top-lt-lg invisible" id="marketsOverviewBox">
-          <div class="m-auto flex-center flex-column w-100 py-3">
+        <div class="col-24 col-lg-12 col-xxl-8 d-flex stylish-overflow-lg invisible" id="marketsOverviewBox">
+          <div class="m-auto flex-center flex-column w-100 p-3">
             <div class="d-flex align-items-start flex-column mw-90p">
               <span class="fs28 sans-light mb-2">[[[asset_name Markets]]]</span>
               <table id="availableMarketsTable" class="w-100">
@@ -163,8 +163,8 @@
         </div>{{/* END MARKETS OVERVIEW */}}
 
         {{- /* RECENT ORDERS */ -}}
-        <div class="col-24 col-xxl-8 d-flex stylish-overflow-lg border-top-lt-xxl invisible" id="orderActivityBox">
-          <div class="my-auto flex-center w-100 py-3" id="orderActivity">
+        <div class="col-24 col-xxl-8 d-flex stylish-overflow-lg invisible" 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>
               <table id="ordersTable" class="my-auto" class="w-100">
@@ -332,22 +332,7 @@
 
     {{- /* DEPOSIT ADDRESS */ -}}
     <form class="position-relative flex-center flex-column fs20 d-hide" id="deposit">
-      <div class="form-closer hoverbg"><span class="ico-cross"></span></div>
-      <div class="px-2 py-1 mb-2 text-center position-relative fs22 sans-light">
-        [[[Deposit]]]
-        <img id="depositLogo" class="micro-icon mx-1">
-        <span id="depositName"></span>
-      </div>
-      <img class="mb-3" id="qrcode" />
-      <div class="mono bg0 p-2 fs15">
-        <span id="depositAddress"></span>
-        <span id="copyAddressBtn" class="ico-copy mt-2 ml-2 fs18"></span>
-        <span id="copyAlert" class="d-hide">[[[copied]]]</span>
-      </div>
-      <div class="my-3">
-        <button id="newDepAddrBttn" type="button" class=" px-2 justify-content-center fs15 bg2 selected">[[[New Deposit Address]]]</button>
-      </div>
-      <div class="fs15 pt-3 text-center d-hide errcolor text-break" id="depositErr"></div>
+      {{template "depositAddress"}}
     </form>
 
     {{- /* UNLOCK WALLET */ -}}
diff --git a/client/webserver/site/src/img/candlestick_bttn.png b/client/webserver/site/src/img/candlestick_bttn.png
deleted file mode 100644
index a434899404..0000000000
Binary files a/client/webserver/site/src/img/candlestick_bttn.png and /dev/null differ
diff --git a/client/webserver/site/src/img/depth_bttn.png b/client/webserver/site/src/img/depth_bttn.png
deleted file mode 100644
index cac873aaff..0000000000
Binary files a/client/webserver/site/src/img/depth_bttn.png and /dev/null differ
diff --git a/client/webserver/site/src/img/softened-icon-dark.png b/client/webserver/site/src/img/softened-icon-dark.png
new file mode 100644
index 0000000000..91975d7a21
Binary files /dev/null and b/client/webserver/site/src/img/softened-icon-dark.png differ
diff --git a/client/webserver/site/src/img/softened-icon-dark.xcf b/client/webserver/site/src/img/softened-icon-dark.xcf
new file mode 100644
index 0000000000..59908f2e72
Binary files /dev/null and b/client/webserver/site/src/img/softened-icon-dark.xcf differ
diff --git a/client/webserver/site/src/img/softened-icon.png b/client/webserver/site/src/img/softened-icon.png
new file mode 100644
index 0000000000..b7547bcb2e
Binary files /dev/null and b/client/webserver/site/src/img/softened-icon.png differ
diff --git a/client/webserver/site/src/js/app.ts b/client/webserver/site/src/js/app.ts
index 2030b2e4a2..681b297fe9 100644
--- a/client/webserver/site/src/js/app.ts
+++ b/client/webserver/site/src/js/app.ts
@@ -84,6 +84,7 @@ export default class Application {
   recorders: Record<string, LogMessage[]>
   main: HTMLElement
   header: HTMLElement
+  headerSpace: HTMLElement
   assets: Record<number, SupportedAsset>
   exchanges: Record<string, Exchange>
   walletMap: Record<number, WalletState>
@@ -258,6 +259,7 @@ export default class Application {
     this.main.replaceWith(main)
     this.main = main
     this.noteReceivers = []
+    Doc.empty(this.headerSpace)
     this.attach(data)
     return true
   }
@@ -303,6 +305,7 @@ export default class Application {
    */
   attachHeader () {
     this.header = idel(document.body, 'header')
+    this.headerSpace = Doc.idel(this.header, 'headerSpace')
     this.popupNotes = idel(document.body, 'popupNotes')
     this.popupTmpl = Doc.tmplElement(this.popupNotes, 'note')
     if (this.popupTmpl) this.popupTmpl.remove()
@@ -316,13 +319,13 @@ export default class Application {
     page.loader.remove()
     Doc.show(page.loader)
 
-    bind(page.noteMenuEntry, 'click', async () => {
+    bind(page.noteBell, 'click', async () => {
       Doc.hide(page.pokeList)
       Doc.show(page.noteList)
       this.ackNotes()
       page.noteCat.classList.add('active')
       page.pokeCat.classList.remove('active')
-      this.showDropdown(page.noteMenuEntry, page.noteBox)
+      this.showDropdown(page.noteBell, page.noteBox)
       Doc.hide(page.noteIndicator)
       for (const note of this.notes) {
         if (note.acked) {
@@ -334,8 +337,8 @@ export default class Application {
       this.storeNotes()
     })
 
-    bind(page.profileMenuEntry, 'click', () => {
-      this.showDropdown(page.profileMenuEntry, page.profileBox)
+    bind(page.profileIcon, 'click', () => {
+      this.showDropdown(page.profileIcon, page.profileBox)
     })
 
     bind(page.innerNoteIcon, 'click', () => { Doc.hide(page.noteBox) })
@@ -370,8 +373,8 @@ export default class Application {
     const ico = icon.getBoundingClientRect()
     Doc.hide(this.page.noteBox, this.page.profileBox)
     Doc.show(dialog)
-    dialog.style.right = `${window.innerWidth - ico.left - ico.width + 11}px`
-    dialog.style.top = `${ico.top - 9}px`
+    dialog.style.right = `${window.innerWidth - ico.left - ico.width + 5}px`
+    dialog.style.top = `${ico.top - 4}px`
 
     const hide = (e: MouseEvent) => {
       if (!Doc.mouseInElement(e, dialog)) {
@@ -459,10 +462,10 @@ export default class Application {
       return
     }
     if (!this.user.authed) {
-      Doc.hide(page.noteMenuEntry, page.walletsMenuEntry, page.marketsMenuEntry, page.profileMenuEntry)
+      Doc.hide(page.noteBell, page.walletsMenuEntry, page.marketsMenuEntry, page.profileIcon)
       return
     }
-    Doc.show(page.noteMenuEntry, page.walletsMenuEntry, page.profileMenuEntry)
+    Doc.show(page.noteBell, page.walletsMenuEntry, page.profileIcon)
     if (Object.keys(this.user.exchanges).length > 0) {
       Doc.show(page.marketsMenuEntry)
     } else {
@@ -833,8 +836,9 @@ export default class Application {
   }
 
   /* conventionalRate converts the encoded atomic rate to a conventional rate */
-  conventionalRate (baseID: number, quoteID: number, encRate: number): number {
-    const [b, q] = [this.unitInfo(baseID), this.unitInfo(quoteID)]
+  conventionalRate (baseID: number, quoteID: number, encRate: number, xc?: Exchange): number {
+    const [b, q] = [this.unitInfo(baseID, xc), this.unitInfo(quoteID, xc)]
+
     const r = b.conventional.conversionFactor / q.conventional.conversionFactor
     return encRate / RateEncodingFactor * r
   }
diff --git a/client/webserver/site/src/js/charts.ts b/client/webserver/site/src/js/charts.ts
index bf26d4f2da..6f37e2d21d 100644
--- a/client/webserver/site/src/js/charts.ts
+++ b/client/webserver/site/src/js/charts.ts
@@ -1,11 +1,10 @@
-import Doc from './doc'
+import Doc, { Animation } from './doc'
 import { RateEncodingFactor } from './orderutil'
 import OrderBook from './orderbook'
 import State from './state'
 import { UnitInfo, Market, Candle, CandlesPayload } from './registry'
 
 const bind = Doc.bind
-const unbind = Doc.unbind
 const PIPI = 2 * Math.PI
 const plusChar = String.fromCharCode(59914)
 const minusChar = String.fromCharCode(59915)
@@ -105,8 +104,8 @@ interface Theme {
 
 const darkTheme: Theme = {
   axisLabel: '#b1b1b1',
-  gridBorder: '#3a3a3a',
-  gridLines: '#2a2a2a',
+  gridBorder: '#383f4b',
+  gridLines: '#383f4b',
   gapLine: '#6b6b6b',
   value: '#9a9a9a',
   zoom: '#5b5b5b',
@@ -122,8 +121,8 @@ const darkTheme: Theme = {
 
 const lightTheme: Theme = {
   axisLabel: '#1b1b1b',
-  gridBorder: '#3a3a3a',
-  gridLines: '#dadada',
+  gridBorder: '#ddd',
+  gridLines: '#ddd',
   gapLine: '#595959',
   value: '#4d4d4d',
   zoom: '#777',
@@ -138,12 +137,13 @@ const lightTheme: Theme = {
 }
 
 // Chart is the base class for charts.
-class Chart {
+export class Chart {
   parent: HTMLElement
   report: ChartReporters
   theme: Theme
   canvas: HTMLCanvasElement
   visible: boolean
+  renderScheduled: boolean
   ctx: CanvasRenderingContext2D
   mousePos: Point | null
   rect: DOMRect
@@ -153,6 +153,7 @@ class Chart {
   xRegion: Region
   yRegion: Region
   dataExtents: Extents
+  unattachers: (() => void)[]
 
   constructor (parent: HTMLElement, reporters: ChartReporters) {
     this.parent = parent
@@ -173,6 +174,7 @@ class Chart {
     this.mousePos = null
     bind(this.canvas, 'mousemove', (e: MouseEvent) => {
       // this.rect will be set in resize().
+      if (!this.rect) return
       this.mousePos = {
         x: e.clientX - this.rect.left,
         y: e.clientY - this.rect.y
@@ -183,12 +185,24 @@ class Chart {
       this.mousePos = null
       this.draw()
     })
+
+    // Bind resize.
+    const resizeObserver = new ResizeObserver(() => this.resize())
+    resizeObserver.observe(this.parent)
+
     // Scrolling by wheel is smoother when the rate is slightly limited.
     this.wheelLimiter = null
     bind(this.canvas, 'wheel', (e: WheelEvent) => { this.wheel(e) })
-    this.boundResizer = () => { this.resize(parent.clientHeight) }
-    bind(window, 'resize', this.boundResizer)
     bind(this.canvas, 'click', (e: MouseEvent) => { this.click(e) })
+    const setVis = () => {
+      this.visible = document.visibilityState !== 'hidden'
+      if (this.visible && this.renderScheduled) {
+        this.renderScheduled = false
+        this.draw()
+      }
+    }
+    bind(document, 'visibilitychange', setVis)
+    this.unattachers = [() => { Doc.unbind(document, 'visibilitychange', setVis) }]
   }
 
   wheeled () {
@@ -221,9 +235,9 @@ class Chart {
    * updating the height programmatically after the caller sets a style.height
    * but before the clientHeight has been updated.
    */
-  resize (parentHeight: number) {
+  resize () {
     this.canvas.width = this.parent.clientWidth
-    this.canvas.height = parentHeight - 20 // magic number derived from a soup of css values.
+    this.canvas.height = this.parent.clientHeight
     const xLblHeight = 30
     const yGuess = 40 // y label width guess. Will be adjusted when drawn.
     const plotExtents = new Extents(yGuess, this.canvas.width, 10, this.canvas.height - xLblHeight)
@@ -246,22 +260,10 @@ class Chart {
     this.report.zoom(bigger)
   }
 
-  /* hide hides the canvas */
-  hide () {
-    this.visible = false
-    Doc.hide(this.canvas)
-  }
-
-  /* show shows the canvas */
-  show () {
-    this.visible = true
-    Doc.show(this.canvas)
-    this.resize(this.parent.clientHeight)
-  }
-
   /* The market handler will call unattach when the markets page is unloaded. */
   unattach () {
-    unbind(window, 'resize', this.boundResizer)
+    for (const u of this.unattachers) u()
+    this.unattachers = []
   }
 
   /* render must be implemented by the child class. */
@@ -270,10 +272,10 @@ class Chart {
   }
 
   /* applyLabelStyle applies the style used for axis tick labels. */
-  applyLabelStyle () {
+  applyLabelStyle (fontSize?: number) {
     this.ctx.textAlign = 'center'
     this.ctx.textBaseline = 'middle'
-    this.ctx.font = '12px \'sans\', sans-serif'
+    this.ctx.font = `${fontSize ?? '14'}px 'sans', sans-serif`
     this.ctx.fillStyle = this.theme.axisLabel
   }
 
@@ -343,11 +345,12 @@ class Chart {
    * provided plot region.
    */
   doYLabels (region: Region, step: number, unit: string, valFmt?: (v: number) => string) {
+    this.applyLabelStyle()
     const yLabels = makeLabels(this.ctx, region.height(), this.dataExtents.y.min,
       this.dataExtents.y.max, 50, step, unit, valFmt)
 
     // Reassign the width of the y-label column to accommodate the widest text.
-    const yAxisWidth = (yLabels.widest || 0) * 1.5
+    const yAxisWidth = (yLabels.widest || 0) + 20 /* x padding */
     this.yRegion.extents.x.max = yAxisWidth
     this.yRegion.extents.y.max = region.extents.y.max
 
@@ -404,7 +407,7 @@ export class DepthChart extends Chart {
       sells: []
     }
     this.setZoomBttns() // can't wait for requestAnimationFrame -> resized
-    this.resize(parent.clientHeight)
+    this.resize()
   }
 
   // setZoomBttns creates new regions for zoom in and zoom out buttons. It is
@@ -481,11 +484,13 @@ export class DepthChart extends Chart {
    */
   render () {
     // if connection fails it is not possible to get book.
-    if (!this.book || !this.visible) return
+    if (!this.book || !this.visible || this.canvas.width === 0) {
+      this.renderScheduled = true
+      return
+    }
 
     this.clear()
     // if (!this.book || this.book.empty()) return
-
     const ctx = this.ctx
     const mousePos = this.mousePos
     const buys = this.book.buys
@@ -841,7 +846,7 @@ export class CandleChart extends Chart {
     this.reporters = reporters
     this.zoomLevel = 1
     this.numToShow = 100
-    this.resize(parent.clientHeight)
+    this.resize()
   }
 
   /* resized is called when the window or parent element are resized. */
@@ -877,7 +882,10 @@ export class CandleChart extends Chart {
   /* render draws the chart */
   render () {
     const data = this.data
-    if (!data || !this.visible) return
+    if (!data || !this.visible || this.canvas.width === 0) {
+      this.renderScheduled = true
+      return
+    }
     const candleWidth = data.ms
     const mousePos = this.mousePos
     const allCandles = data.candles || []
@@ -1023,6 +1031,125 @@ export class CandleChart extends Chart {
   }
 }
 
+interface WaveOpts {
+  message?: string
+  backgroundColor?: string | boolean // true for <body> background color
+}
+
+/* Wave is a loading animation that displays a colorful line that oscillates */
+export class Wave extends Chart {
+  ani: Animation
+  size: [number, number]
+  region: Region
+  colorShift: number
+  opts: WaveOpts
+  msgRegion: Region
+  fontSize: number
+
+  constructor (parent: HTMLElement, opts?: WaveOpts) {
+    super(parent, {
+      resize: () => this.resized(),
+      click: (/* e: MouseEvent */) => { /* pass */ },
+      zoom: (/* bigger: boolean */) => { /* pass */ }
+    })
+    this.canvas.classList.add('fill-abs')
+    this.canvas.style.zIndex = '5'
+
+    this.opts = opts ?? {}
+
+    const period = 1500 // ms
+    const start = Math.random() * period
+    this.colorShift = Math.random() * 360
+
+    // y = A*cos(k*x + theta*t + c)
+    // combine three waves with different periods and speeds and phases.
+    const amplitudes = [1, 0.65, 0.75]
+    const ks = [3, 3, 2]
+    const speeds = [Math.PI, Math.PI * 10 / 9, Math.PI / 2.5]
+    const phases = [0, 0, Math.PI * 1.5]
+    const n = 75
+    const single = (n: number, angularX: number, angularTime: number): number => {
+      return amplitudes[n] * Math.cos(ks[n] * angularX + speeds[n] * angularTime + phases[n])
+    }
+    const value = (x: number, angularTime: number): number => {
+      const angularX = x * Math.PI * 2
+      return (single(0, angularX, angularTime) + single(1, angularX, angularTime) + single(2, angularX, angularTime)) / 3
+    }
+    this.resize()
+    this.ani = new Animation(Animation.Forever, () => {
+      const angularTime = (new Date().getTime() - start) / period * Math.PI * 2
+      const values = []
+      for (let i = 0; i < n; i++) {
+        values.push(value(i / (n - 1), angularTime))
+      }
+      this.drawValues(values)
+    })
+  }
+
+  resized () {
+    const opts = this.opts
+    const [maxW, maxH] = [150, 100]
+    const [cw, ch] = [this.canvas.width, this.canvas.height]
+    let [w, h] = [cw * 0.8, ch * 0.8]
+    if (w > maxW) w = maxW
+    if (h > maxH) h = maxH
+    let [l, t] = [(cw - w) / 2, (ch - h) / 2]
+    if (opts.message) {
+      this.fontSize = clamp(h * 0.15, 10, 14)
+      this.applyLabelStyle(this.fontSize)
+      const ypad = this.fontSize * 0.5
+      const halfH = (this.fontSize / 2) + ypad
+      t -= halfH
+      this.msgRegion = new Region(this.ctx, new Extents(0, cw, t + h, t + h + 2 * halfH))
+    }
+    this.region = new Region(this.ctx, new Extents(l, l + w, t, t + h))
+  }
+
+  drawValues (values: number[]) {
+    if (!this.region) return
+    this.clear()
+    const hsl = (h: number) => `hsl(${h}, 35%, 50%)`
+
+    const { region, msgRegion, canvas: { width: w, height: h }, opts: { backgroundColor: bg, message: msg }, colorShift, ctx } = this
+
+    if (bg) {
+      if (bg === true) ctx.fillStyle = window.getComputedStyle(document.body, null).getPropertyValue('background-color')
+      else ctx.fillStyle = bg
+      ctx.fillRect(0, 0, w, h)
+    }
+
+    region.plot(new Extents(0, 1, -1, 1), (ctx: CanvasRenderingContext2D, t: Translator) => {
+      ctx.lineWidth = 4
+      ctx.lineCap = 'round'
+
+      const shift = colorShift + (new Date().getTime() % 2000) / 2000 * 360 // colors move with frequency 1 / 2s
+      const grad = ctx.createLinearGradient(t.x(0), 0, t.x(1), 0)
+      grad.addColorStop(0, hsl(shift))
+      ctx.strokeStyle = grad
+
+      ctx.beginPath()
+      ctx.moveTo(t.x(0), t.y(values[0]))
+      for (let i = 1; i < values.length; i++) {
+        const prog = i / (values.length - 1)
+        grad.addColorStop(prog, hsl(prog * 300 + shift))
+        ctx.lineTo(t.x(prog), t.y(values[i]))
+      }
+      ctx.stroke()
+    })
+    if (!msg) return
+    msgRegion.plot(new Extents(0, 1, 0, 1), (ctx: CanvasRenderingContext2D, t: Translator) => {
+      ctx.fillText(msg, t.x(0.5), t.y(0.5), this.msgRegion.width())
+    })
+  }
+
+  render () { /* pass */ }
+
+  stop () {
+    this.ani.stop()
+    this.canvas.remove()
+  }
+}
+
 /*
  * Extents holds a min and max in both the x and y directions, and provides
  * getters for related data.
diff --git a/client/webserver/site/src/js/doc.ts b/client/webserver/site/src/js/doc.ts
index 76277b41f0..e8088d17ce 100644
--- a/client/webserver/site/src/js/doc.ts
+++ b/client/webserver/site/src/js/doc.ts
@@ -384,7 +384,7 @@ export class Animation {
   done: (() => void) | undefined
   endAnimation: boolean
   thread: Promise<void>
-  Forever: number
+  static Forever: number
 
   constructor (duration: number, f: (progress: number) => void, easingAlgo?: string, done?: () => void) {
     this.done = done
@@ -399,7 +399,7 @@ export class Animation {
     duration = duration >= 0 ? duration : 1000 * 86400 * 365 * 10 // 10 years, in ms
     const easer = easingAlgo ? Easing[easingAlgo] : Easing.linear
     const start = new Date().getTime()
-    const end = start + duration
+    const end = (duration === Animation.Forever) ? Number.MAX_SAFE_INTEGER : start + duration
     const range = end - start
     const frameDuration = 1000 / FPS
     let now = start
@@ -438,6 +438,7 @@ export class Animation {
     if (this.done) this.done()
   }
 }
+Animation.Forever = -1
 
 /* Easing algorithms for animations. */
 export const Easing: Record<string, (t: number) => number> = {
diff --git a/client/webserver/site/src/js/forms.ts b/client/webserver/site/src/js/forms.ts
index d44ae65b0f..d1e4c0f390 100644
--- a/client/webserver/site/src/js/forms.ts
+++ b/client/webserver/site/src/js/forms.ts
@@ -3,6 +3,7 @@ import { postJSON } from './http'
 import State from './state'
 import * as intl from './locales'
 import * as OrderUtil from './orderutil'
+import { Wave } from './charts'
 import {
   app,
   PasswordCache,
@@ -130,10 +131,10 @@ export class NewWalletForm {
       walletType: walletType,
       parentForm: parentForm
     }
-    const loaded = app().loading(this.page.mainForm)
 
+    const ani = new Wave(this.page.mainForm, { backgroundColor: true })
     const res = await postJSON('/api/newwallet', createForm)
-    loaded()
+    ani.stop()
     return res
   }
 
@@ -1562,6 +1563,72 @@ export class LoginForm {
   }
 }
 
+const traitNewAddresser = 1 << 1
+
+/*
+ * DepositAddress displays a deposit address, a QR code, and a button to
+ * generate a new address (if supported).
+ */
+export class DepositAddress {
+  form: PageElement
+  page: Record<string, PageElement>
+  assetID: number
+
+  constructor (form: PageElement) {
+    this.form = form
+    const page = this.page = Doc.idDescendants(form)
+    Doc.bind(page.newDepAddrBttn, 'click', async () => { this.newDepositAddress() })
+    Doc.bind(page.copyAddressBtn, 'click', () => { this.copyAddress() })
+  }
+
+  /* Display a deposit address. */
+  async setAsset (assetID: number) {
+    this.assetID = assetID
+    const page = this.page
+    Doc.hide(page.depositErr)
+    const asset = app().assets[assetID]
+    page.depositLogo.src = Doc.logoPath(asset.symbol)
+    const wallet = app().walletMap[assetID]
+    page.depositName.textContent = asset.name
+    page.depositAddress.textContent = wallet.address
+    page.qrcode.src = `/generateqrcode?address=${wallet.address}`
+    if ((wallet.traits & traitNewAddresser) !== 0) Doc.show(page.newDepAddrBttn)
+    else Doc.hide(page.newDepAddrBttn)
+  }
+
+  /* Fetch a new address from the wallet. */
+  async newDepositAddress () {
+    const page = this.page
+    Doc.hide(page.depositErr)
+    const loaded = app().loading(this.form)
+    const res = await postJSON('/api/depositaddress', {
+      assetID: this.assetID
+    })
+    loaded()
+    if (!app().checkResponse(res)) {
+      page.depositErr.textContent = res.msg
+      Doc.show(page.depositErr)
+      return
+    }
+    page.depositAddress.textContent = res.address
+    page.qrcode.src = `/generateqrcode?address=${res.address}`
+  }
+
+  async copyAddress () {
+    const page = this.page
+    navigator.clipboard.writeText(page.depositAddress.textContent || '')
+      .then(() => {
+        Doc.show(page.copyAlert)
+        setTimeout(() => {
+          Doc.hide(page.copyAlert)
+        }, 800)
+      })
+      .catch((reason) => {
+        console.error('Unable to copy: ', reason)
+      })
+  }
+}
+
 const animationLength = 300
 
 /* Swap form1 for form2 with an animation. */
diff --git a/client/webserver/site/src/js/locales.ts b/client/webserver/site/src/js/locales.ts
index ab72010a01..239db32f37 100644
--- a/client/webserver/site/src/js/locales.ts
+++ b/client/webserver/site/src/js/locales.ts
@@ -6,7 +6,6 @@ export const ID_SET_BUTTON_BUY = 'ID_SET_BUTTON_BUY'
 export const ID_SET_BUTTON_SELL = 'ID_SET_BUTTON_SELL'
 export const ID_OFF = 'ID_OFF'
 export const ID_READY = 'ID_READY'
-export const ID_LOCKED = 'ID_LOCKED'
 export const ID_NOWALLET = 'ID_NOWALLET'
 export const ID_DISABLED_MSG = 'ID_DISABLED_MSG'
 export const ID_WALLET_SYNC_PROGRESS = 'ID_WALLET_SYNC_PROGRESS'
@@ -61,6 +60,12 @@ export const ID_BUYING = 'ID_BUYING'
 export const ID_WALLET_DISABLED_MSG = 'WALLET_DISABLED'
 export const ID_WALLET_ENABLED_MSG = 'WALLET_ENABLED'
 export const ID_ACTIVE_ORDERS_ERR_MSG = 'ACTIVE_ORDERS_ERR_MSG'
+export const ID_AVAILABLE = 'AVAILABLE'
+export const ID_LOCKED = 'LOCKED'
+export const ID_IMMATURE = 'IMMATURE'
+export const ID_FEE_BALANCE = 'FEE_BALANCE'
+export const ID_CANDLES_LOADING = 'CANDLES_LOADING'
+export const ID_DEPTH_LOADING = 'DEPTH_LOADING'
 
 export const enUS: Locale = {
   [ID_NO_PASS_ERROR_MSG]: 'password cannot be empty',
@@ -123,7 +128,12 @@ export const enUS: Locale = {
   [ID_WALLET_ENABLED_MSG]: '{{ assetName }} Wallet Enabled',
   [ID_WALLET_DISABLED_MSG]: '{{ assetName }} Wallet Disabled',
   [ID_DISABLED_MSG]: 'wallet is disabled',
-  [ID_ACTIVE_ORDERS_ERR_MSG]: '{{ assetName }} wallet is actively managing orders'
+  [ID_ACTIVE_ORDERS_ERR_MSG]: '{{ assetName }} wallet is actively managing orders',
+  [ID_AVAILABLE]: 'available',
+  [ID_IMMATURE]: 'immature',
+  [ID_FEE_BALANCE]: 'fee balance',
+  [ID_CANDLES_LOADING]: 'waiting for candlesticks',
+  [ID_DEPTH_LOADING]: 'retrieving depth data'
 }
 
 export const ptBR: Locale = {
@@ -175,7 +185,9 @@ export const ptBR: Locale = {
   [ID_CHANGE_WALLET_TYPE]: 'trocar o tipo de carteira',
   [ID_KEEP_WALLET_TYPE]: 'Não trocara tipo de carteira',
   [WALLET_READY]: 'Carteira Pronta',
-  [SETUP_NEEDED]: 'Configuração Necessária'
+  [SETUP_NEEDED]: 'Configuração Necessária',
+  [ID_AVAILABLE]: 'disponível',
+  [ID_IMMATURE]: 'imaturo'
 }
 
 export const zhCN: Locale = {
@@ -213,7 +225,9 @@ export const zhCN: Locale = {
   [ID_EPOCH]: '时间',
   [ID_API_ERROR]: '接口错误',
   [ID_ADD]: '加',
-  [ID_CREATE]: '创建'
+  [ID_CREATE]: '创建',
+  [ID_AVAILABLE]: '可用',
+  [ID_IMMATURE]: '不成熟'
 }
 
 export const plPL: Locale = {
@@ -265,7 +279,9 @@ export const plPL: Locale = {
   [ID_CHANGE_WALLET_TYPE]: 'zmień typ portfela',
   [ID_KEEP_WALLET_TYPE]: 'nie zmieniaj typu portfela',
   [WALLET_READY]: 'Portfel jest gotowy',
-  [SETUP_NEEDED]: 'Potrzebna konfiguracja'
+  [SETUP_NEEDED]: 'Potrzebna konfiguracja',
+  [ID_AVAILABLE]: 'dostępne',
+  [ID_IMMATURE]: 'niedojrzałe'
 }
 
 export const deDE: Locale = {
diff --git a/client/webserver/site/src/js/markets.ts b/client/webserver/site/src/js/markets.ts
index a5b03d0a23..81ea33eade 100644
--- a/client/webserver/site/src/js/markets.ts
+++ b/client/webserver/site/src/js/markets.ts
@@ -9,10 +9,17 @@ import {
   CandleReporters,
   MouseReport,
   VolumeReport,
-  DepthMarker
+  DepthMarker,
+  Wave
 } from './charts'
 import { postJSON } from './http'
-import { NewWalletForm, UnlockWalletForm, AccelerateOrderForm, bind as bindForm } from './forms'
+import {
+  NewWalletForm,
+  UnlockWalletForm,
+  AccelerateOrderForm,
+  DepositAddress,
+  bind as bindForm
+} from './forms'
 import * as OrderUtil from './orderutil'
 import ws from './ws'
 import * as intl from './locales'
@@ -48,7 +55,6 @@ import {
   MiniOrder,
   RemainderUpdate,
   ConnEventNote,
-  Spot,
   OrderOption,
   ConnectionStatus,
   RecentMatch
@@ -67,19 +73,20 @@ const unmarketRoute = 'unmarket'
 const epochMatchSummaryRoute = 'epoch_match_summary'
 
 const lastMarketKey = 'selectedMarket'
-const chartRatioKey = 'chartRatio'
 const depthZoomKey = 'depthZoom'
 
 const animationLength = 500
 
 const anHour = 60 * 60 * 1000 // milliseconds
 
-const depthChart = 'depth_chart'
-const candleChart = 'candle_chart'
-
 const check = document.createElement('span')
 check.classList.add('ico-check')
 
+const buyBtnClass = 'buygreen-bg'
+const sellBtnClass = 'sellred-bg'
+
+const fiveMinBinKey = '5m'
+
 const percentFormatter = new Intl.NumberFormat(document.documentElement.lang, {
   minimumFractionDigits: 1,
   maximumFractionDigits: 2
@@ -88,8 +95,10 @@ const percentFormatter = new Intl.NumberFormat(document.documentElement.lang, {
 const parentIDNone = 0xFFFFFFFF
 
 interface MetaOrder {
-  row: HTMLElement
-  order: Order
+  div: HTMLElement
+  header: Record<string, PageElement>
+  details: Record<string, PageElement>
+  ord: Order
   cancelling?: boolean
   status?: number
 }
@@ -118,28 +127,6 @@ interface CurrentMarket {
   rateConversionFactor: number
 }
 
-interface BalanceWidgetElement {
-  id: number
-  parentID: number
-  cfg: Asset | null
-  logo: PageElement
-  symbol: PageElement
-  avail: PageElement
-  newWalletRow: PageElement
-  newWalletBttn: PageElement
-  walletPendingRow: PageElement
-  locked: PageElement
-  immature: PageElement
-  parentBal: PageElement
-  parentIcon: PageElement
-  unsupported: PageElement
-  expired: PageElement
-  connect: PageElement
-  spinner: PageElement
-  iconBox: PageElement
-  stateIcons: WalletIcons
-}
-
 interface LoadTracker {
   loaded: () => void
   timer: number
@@ -149,10 +136,14 @@ interface OrderRow extends HTMLElement {
   manager: OrderTableRowManager
 }
 
+interface StatsDisplay {
+  row: PageElement
+  tmpl: Record<string, PageElement>
+}
+
 export default class MarketsPage extends BasePage {
   page: Record<string, PageElement>
   main: HTMLElement
-  loaded: (() => void) | null
   maxLoaded: (() => void) | null
   maxOrderUpdateCounter: number
   market: CurrentMarket
@@ -169,12 +160,9 @@ export default class MarketsPage extends BasePage {
   depthLines: Record<string, DepthLine[]>
   activeMarkerRate: number | null
   hovers: HTMLElement[]
-  ordersSortKey: string
-  ordersSortDirection: 1 | -1
   ogTitle: string
   depthChart: DepthChart
   candleChart: CandleChart
-  currentChart: string
   candleDur: string
   balanceWgt: BalanceWidget
   marketList: MarketList
@@ -182,6 +170,7 @@ export default class MarketsPage extends BasePage {
   baseUnits: NodeListOf<HTMLElement>
   unlockForm: UnlockWalletForm
   newWalletForm: NewWalletForm
+  depositAddrForm: DepositAddress
   keyup: (e: KeyboardEvent) => void
   secondTicker: number
   candlesLoading: LoadTracker | null
@@ -189,13 +178,14 @@ export default class MarketsPage extends BasePage {
   recentMatches: RecentMatch[]
   recentMatchesSortKey: string
   recentMatchesSortDirection: 1 | -1
+  stats: [StatsDisplay, StatsDisplay]
+  loadingAnimations: { candles?: Wave, depth?: Wave }
 
   constructor (main: HTMLElement, data: any) {
     super()
     const page = this.page = Doc.idDescendants(main)
     this.main = main
     if (!this.main.parentElement) return // Not gonna happen, but TypeScript cares.
-    this.loaded = app().loading(this.main.parentElement)
     // There may be multiple pending updates to the max order. This makes sure
     // that the screen is updated with the most recent one.
     this.maxOrderUpdateCounter = 0
@@ -207,13 +197,8 @@ export default class MarketsPage extends BasePage {
       input: []
     }
     this.hovers = []
-    // 'Your Orders' list sort key and direction.
-    this.ordersSortKey = 'submitTime'
     // 'Recent Matches' list sort key and direction.
     this.recentMatchesSortKey = 'stamp'
-    // 1 if sorting ascendingly, -1 if sorting descendingly.
-    this.ordersSortDirection = 1
-    // same as this.ordersSortDirection.
     this.recentMatchesSortDirection = 1
     // store original title so we can re-append it when updating market value.
     this.ogTitle = document.title
@@ -224,39 +209,44 @@ export default class MarketsPage extends BasePage {
       mouse: (r: MouseReport) => { this.reportDepthMouse(r) },
       zoom: (z: number) => { this.reportDepthZoom(z) }
     }
-    this.depthChart = new DepthChart(page.marketChart, depthReporters, State.fetch(depthZoomKey))
+    this.depthChart = new DepthChart(page.depthChart, depthReporters, State.fetch(depthZoomKey))
 
     const candleReporters: CandleReporters = {
       mouse: c => { this.reportMouseCandle(c) }
     }
-    this.candleChart = new CandleChart(page.marketChart, candleReporters)
+    this.candleChart = new CandleChart(page.candlesChart, candleReporters)
 
     const success = () => { /* do nothing */ }
     // Do not call cleanTemplates before creating the AccelerateOrderForm
     this.accelerateOrderForm = new AccelerateOrderForm(page.accelerateForm, success)
 
     // TODO: Store user's state and reload last known configuration.
-    this.candleChart.hide()
-    this.currentChart = depthChart
-    this.candleDur = ''
+    this.candleDur = fiveMinBinKey
 
     // Set up the BalanceWidget.
     {
-      const wgt = this.balanceWgt = new BalanceWidget(page.balanceTable)
+      page.walletInfoTmpl.removeAttribute('id')
+      const bWidget = page.walletInfoTmpl
+      const qWidget = page.walletInfoTmpl.cloneNode(true) as PageElement
+      bWidget.after(qWidget)
+      const wgt = this.balanceWgt = new BalanceWidget(bWidget, qWidget)
       const baseIcons = wgt.base.stateIcons.icons
       const quoteIcons = wgt.quote.stateIcons.icons
-      bind(wgt.base.connect, 'click', () => { this.showOpen(this.market.base, this.walletUnlocked) })
-      bind(wgt.quote.connect, 'click', () => { this.showOpen(this.market.quote, this.walletUnlocked) })
-      bind(wgt.base.expired, 'click', () => { this.showOpen(this.market.base, this.walletUnlocked) })
-      bind(wgt.quote.expired, 'click', () => { this.showOpen(this.market.quote, this.walletUnlocked) })
+      bind(wgt.base.tmpl.connect, 'click', () => { this.showOpen(this.market.base, this.walletUnlocked) })
+      bind(wgt.quote.tmpl.connect, 'click', () => { this.showOpen(this.market.quote, this.walletUnlocked) })
+      bind(wgt.base.tmpl.expired, 'click', () => { this.showOpen(this.market.base, this.walletUnlocked) })
+      bind(wgt.quote.tmpl.expired, 'click', () => { this.showOpen(this.market.quote, this.walletUnlocked) })
       bind(baseIcons.sleeping, 'click', () => { this.showOpen(this.market.base, this.walletUnlocked) })
       bind(quoteIcons.sleeping, 'click', () => { this.showOpen(this.market.quote, this.walletUnlocked) })
       bind(baseIcons.locked, 'click', () => { this.showOpen(this.market.base, this.walletUnlocked) })
       bind(quoteIcons.locked, 'click', () => { this.showOpen(this.market.quote, this.walletUnlocked) })
       bind(baseIcons.disabled, 'click', () => { this.showToggleWalletStatus(this.market.base) })
       bind(quoteIcons.disabled, 'click', () => { this.showToggleWalletStatus(this.market.quote) })
-      bind(wgt.base.newWalletBttn, 'click', () => { this.showCreate(this.market.base) })
-      bind(wgt.quote.newWalletBttn, 'click', () => { this.showCreate(this.market.quote) })
+      bind(wgt.base.tmpl.newWalletBttn, 'click', () => { this.showCreate(this.market.base) })
+      bind(wgt.quote.tmpl.newWalletBttn, 'click', () => { this.showCreate(this.market.quote) })
+      Doc.bind(wgt.base.tmpl.walletAddr, 'click', () => { this.showDeposit(this.market.base.id) })
+      Doc.bind(wgt.quote.tmpl.walletAddr, 'click', () => { this.showDeposit(this.market.quote.id) })
+      this.depositAddrForm = new DepositAddress(page.deposit)
     }
 
     // Bind toggle wallet status form.
@@ -264,18 +254,7 @@ export default class MarketsPage extends BasePage {
 
     // Prepare templates for the buy and sell tables and the user's order table.
     OrderUtil.setOptionTemplates(page)
-    Doc.cleanTemplates(page.rowTemplate, page.liveTemplate, page.durBttnTemplate, page.booleanOptTmpl, page.rangeOptTmpl, page.orderOptTmpl)
-
-    // Prepare the list of markets.
-    this.marketList = new MarketList(page.marketList)
-    for (const xc of this.marketList.xcSections) {
-      if (!xc.marketRows) continue
-      for (const row of xc.marketRows) {
-        bind(row.node, 'click', () => {
-          this.setMarket(xc.host, row.mkt.baseid, row.mkt.quoteid)
-        })
-      }
-    }
+    Doc.cleanTemplates(page.rowTemplate, page.durBttnTemplate, page.booleanOptTmpl, page.rangeOptTmpl, page.orderOptTmpl, page.userOrderTmpl)
 
     // Store the elements that need their ticker changed when the market
     // changes.
@@ -285,8 +264,8 @@ export default class MarketsPage extends BasePage {
     // Buttons to set order type and side.
     bind(page.buyBttn, 'click', () => {
       swapBttns(page.sellBttn, page.buyBttn)
-      page.submitBttn.classList.remove('sellred')
-      page.submitBttn.classList.add('buygreen')
+      page.submitBttn.classList.remove(sellBtnClass)
+      page.submitBttn.classList.add(buyBtnClass)
       page.maxLbl.textContent = intl.prep(intl.ID_BUY)
       this.setOrderBttnText()
       this.setOrderVisibility()
@@ -294,8 +273,8 @@ export default class MarketsPage extends BasePage {
     })
     bind(page.sellBttn, 'click', () => {
       swapBttns(page.buyBttn, page.sellBttn)
-      page.submitBttn.classList.add('sellred')
-      page.submitBttn.classList.remove('buygreen')
+      page.submitBttn.classList.add(sellBtnClass)
+      page.submitBttn.classList.remove(buyBtnClass)
       page.maxLbl.textContent = intl.prep(intl.ID_SELL)
       this.setOrderBttnText()
       this.setOrderVisibility()
@@ -326,12 +305,6 @@ export default class MarketsPage extends BasePage {
       } else page.lotField.value = String(this.market.maxBuys[this.adjustedRate()].swap.lots)
       this.lotChanged()
     })
-    bind(page.depthBttn, 'click', () => {
-      this.depthChartSelected()
-    })
-    bind(page.candlestickBttn, 'click', () => {
-      this.candleChartSelected()
-    })
 
     Doc.disableMouseWheel(page.rateField, page.lotField, page.qtyField, page.mktBuyField)
 
@@ -367,10 +340,7 @@ export default class MarketsPage extends BasePage {
     // Order detail view
     Doc.bind(page.vFeeDetails, 'click', () => this.showForm(page.vDetailPane))
     Doc.bind(page.closeDetailPane, 'click', () => this.showVerifyForm())
-    // Bind active orders list's header sort events.
-    page.liveTable.querySelectorAll('[data-ordercol]')
-      .forEach((th: HTMLElement) => bind(th, 'click', () => setOrdersSortCol(th.dataset.ordercol || '')))
-    // Bind active orders list's header sort events.
+    // // Bind active orders list's header sort events.
     page.recentMatchesTable.querySelectorAll('[data-ordercol]')
       .forEach((th: HTMLElement) => bind(
         th, 'click', () => setRecentMatchesSortCol(th.dataset.ordercol || '')
@@ -389,44 +359,17 @@ export default class MarketsPage extends BasePage {
       setRecentMatchesSortColClasses()
     }
 
-    const setOrdersSortCol = (key: string) => {
-      // First unset header's current sorted col classes.
-      unsetOrdersSortColClasses()
-      // If already sorting by key change sort direction.
-      if (this.ordersSortKey === key) {
-        this.ordersSortDirection *= -1
-      } else {
-        // Otherwise update sort key and set default direction to ascending.
-        this.ordersSortKey = key
-        this.ordersSortDirection = 1
-      }
-      this.refreshActiveOrders()
-      // Set header's new sorted col classes.
-      setOrdersSortColClasses()
-    }
-
     // sortClassByDirection receives a sort direction and return a class based on it.
     const sortClassByDirection = (element: 1 | -1) => {
       if (element === 1) return 'sorted-asc'
       return 'sorted-dsc'
     }
 
-    const unsetOrdersSortColClasses = () => {
-      page.liveTable.querySelectorAll('[data-ordercol]')
-        .forEach(th => th.classList.remove('sorted-asc', 'sorted-dsc'))
-    }
-
     const unsetRecentMatchesSortColClasses = () => {
       page.recentMatchesTable.querySelectorAll('[data-ordercol]')
         .forEach(th => th.classList.remove('sorted-asc', 'sorted-dsc'))
     }
 
-    const setOrdersSortColClasses = () => {
-      const key = this.ordersSortKey
-      const sortCls = sortClassByDirection(this.ordersSortDirection)
-      Doc.safeSelector(page.liveTable, `[data-ordercol=${key}]`).classList.add(sortCls)
-    }
-
     const setRecentMatchesSortColClasses = () => {
       const key = this.recentMatchesSortKey
       const sortCls = sortClassByDirection(this.recentMatchesSortDirection)
@@ -434,7 +377,6 @@ export default class MarketsPage extends BasePage {
     }
 
     // Set default's sorted col header classes.
-    setOrdersSortColClasses()
     setRecentMatchesSortColClasses()
 
     const closePopups = () => {
@@ -473,8 +415,8 @@ export default class MarketsPage extends BasePage {
     bind(page.rateField, 'keyup', () => { this.previewQuoteAmt(true) })
 
     // Market search input bindings.
-    bind(page.marketSearch, 'change', () => { this.filterMarkets() })
-    bind(page.marketSearch, 'keyup', () => { this.filterMarkets() })
+    bind(page.marketSearchV1, 'change', () => { this.filterMarkets() })
+    bind(page.marketSearchV1, 'keyup', () => { this.filterMarkets() })
 
     const clearChartLines = () => {
       this.depthLines.hover = []
@@ -482,45 +424,37 @@ export default class MarketsPage extends BasePage {
     }
     bind(page.buyRows, 'mouseleave', clearChartLines)
     bind(page.sellRows, 'mouseleave', clearChartLines)
-    bind(page.liveList, 'mouseleave', () => {
+    bind(page.userOrders, 'mouseleave', () => {
       this.activeMarkerRate = null
       this.setDepthMarkers()
     })
 
-    // Load the user's layout preferences.
-    const setChartRatio = (r: number) => {
-      if (r > 0.7) r = 0.7
-      else if (r < 0.25) r = 0.25
-
-      const h = r * (this.main.clientHeight - app().header.offsetHeight)
-      page.marketChart.style.height = `${h}px`
-
-      this.depthChart.resize(h)
-      this.candleChart.resize(h)
-    }
-    const chartDivRatio = State.fetch(chartRatioKey)
-    if (chartDivRatio) {
-      setChartRatio(chartDivRatio)
-    }
-    // Bind chart resizing.
-    bind(page.chartResizer, 'mousedown', (e: MouseEvent) => {
-      if (e.button !== 0) return
-      e.preventDefault()
-      let chartRatio: number
-      const trackMouse = (ee: MouseEvent) => {
-        ee.preventDefault()
-        const box = page.rightSide.getBoundingClientRect()
-        const h = box.bottom - box.top
-        chartRatio = (ee.pageY - box.top) / h
-        setChartRatio(chartRatio)
-      }
-      bind(document, 'mousemove', trackMouse)
-      bind(document, 'mouseup', () => {
-        if (chartRatio) State.store(chartRatioKey, chartRatio)
-        Doc.unbind(document, 'mousemove', trackMouse)
-      })
+    Doc.bind(page.leftHider, 'click', () => {
+      page.leftColumnV1.classList.remove('default')
+      page.leftColumnV1.classList.add('stashed')
     })
 
+    const stats0 = page.marketStatsV1
+    const stats1 = stats0.cloneNode(true) as PageElement
+    Doc.hide(stats0, stats1)
+    stats1.removeAttribute('id')
+    app().headerSpace.appendChild(stats1)
+    this.stats = [{ row: stats0, tmpl: Doc.parseTemplate(stats0) }, { row: stats1, tmpl: Doc.parseTemplate(stats1) }]
+    for (const s of this.stats) {
+      Doc.bind(s.tmpl.marketSelect, 'click', () => {
+        page.leftColumnV1.classList.remove('stashed', 'default')
+      })
+    }
+
+    this.marketList = new MarketList(page.marketListV1)
+    // Prepare the list of markets.
+    for (const row of this.marketList.markets) {
+      bind(row.node, 'click', () => {
+        this.startLoadingAnimations()
+        this.setMarket(row.mkt.xc.host, row.mkt.baseid, row.mkt.quoteid)
+      })
+    }
+
     // Notification filters.
     app().registerNoteFeeder({
       order: (note: OrderNote) => { this.handleOrderNote(note) },
@@ -531,6 +465,23 @@ export default class MarketsPage extends BasePage {
       spots: (note: SpotPriceNote) => { this.handlePriceUpdate(note) }
     })
 
+    this.loadingAnimations = {}
+    this.startLoadingAnimations()
+
+    // Start a ticker to update time-since values.
+    this.secondTicker = window.setInterval(() => {
+      for (const mord of Object.values(this.metaOrders)) {
+        mord.details.age.textContent = Doc.timeSince(mord.ord.submitTime)
+      }
+      for (const td of Doc.applySelector(page.recentMatchesLiveList, '[data-tmpl=age]')) {
+        td.textContent = Doc.timeSince(parseFloat(td.dataset.sinceStamp ?? '0'))
+      }
+    }, 1000)
+
+    this.init(data)
+  }
+
+  async init (data: any) {
     // Fetch the first market in the list, or the users last selected market, if
     // it exists.
     let selected
@@ -540,23 +491,26 @@ export default class MarketsPage extends BasePage {
       selected = State.fetch(lastMarketKey)
     }
     if (!selected || !this.marketList.exists(selected.host, selected.base, selected.quote)) {
-      selected = this.marketList.first()
+      const first = this.marketList.first()
+      if (first) selected = { host: first.mkt.xc.host, base: first.mkt.baseid, quote: first.mkt.quoteid }
     }
-    this.setMarket(selected.host, selected.base, selected.quote)
-
-    // Start a ticker to update time-since values.
-    this.secondTicker = window.setInterval(() => {
-      for (const metaOrder of Object.values(this.metaOrders)) {
-        const td = Doc.tmplElement(metaOrder.row, 'age')
-        td.textContent = Doc.timeSince(metaOrder.order.submitTime)
-      }
-    }, 1000)
+    if (selected) this.setMarket(selected.host, selected.base, selected.quote)
 
     // set the initial state for the registration status
     this.setRegistrationStatusVisibility()
     this.setBalanceVisibility()
   }
 
+  startLoadingAnimations () {
+    const { page, loadingAnimations: anis, depthChart, candleChart } = this
+    depthChart.canvas.classList.add('invisible')
+    candleChart.canvas.classList.add('invisible')
+    if (anis.candles) anis.candles.stop()
+    anis.candles = new Wave(page.candlesChart, { message: intl.prep(intl.ID_CANDLES_LOADING) })
+    if (anis.depth) anis.depth.stop()
+    anis.depth = new Wave(page.depthChart, { message: intl.prep(intl.ID_CANDLES_LOADING) })
+  }
+
   /* isSell is true if the user has selected sell in the order options. */
   isSell () {
     return this.page.sellBttn.classList.contains('selected')
@@ -572,6 +526,50 @@ export default class MarketsPage extends BasePage {
     return !!this.market.dex.pendingFee
   }
 
+  /* setStats updates the currently displayed market and spot price. */
+  setStats (): void {
+    const selected = this.market
+    if (!selected) return
+    // Get an up-to-date Market.
+    const xc = app().exchanges[selected.dex.host]
+    const mkt = xc.markets[selected.cfg.name]
+    for (const s of this.stats) {
+      setMarketDetails(s.tmpl, mkt)
+      if (mkt.spot) {
+        const bconv = xc.assets[mkt.baseid].unitInfo.conventional.conversionFactor
+        s.tmpl.volume.textContent = fourSigFigs(mkt.spot.vol24 / bconv)
+        setPriceAndChange(s.tmpl, xc, mkt)
+      }
+    }
+  }
+
+  /* setHighLow calculates the high and low rates over the last 24 hours. */
+  setHighLow () {
+    const cache = this.market?.candleCaches[fiveMinBinKey]
+    if (!cache) {
+      for (const s of this.stats) {
+        s.tmpl.high.textContent = '-'
+        s.tmpl.low.textContent = '-'
+      }
+      return
+    }
+
+    // We'll eventually get this data in the spot, but for now, we must set it
+    // from candles.
+    let [high, low] = [0, 0]
+    for (let i = cache.candles.length - 1; i >= 0; i--) {
+      const c = cache.candles[i]
+      if (low === 0 || (c.lowRate > 0 && c.lowRate < low)) low = c.lowRate
+      if (c.highRate > high) high = c.highRate
+    }
+
+    const bconv = app().unitInfo(this.market.cfg.baseid, this.market.dex).conventional.conversionFactor
+    for (const s of this.stats) {
+      s.tmpl.high.textContent = high > 0 ? fourSigFigs(high / bconv) : '-'
+      s.tmpl.low.textContent = low > 0 ? fourSigFigs(low / bconv) : '-'
+    }
+  }
+
   /* assetsAreSupported is true if all the assets of the current market are
    * supported
    */
@@ -611,14 +609,14 @@ export default class MarketsPage extends BasePage {
     const page = this.page
     // By default the order form should be hidden, and only if market is set
     // and ready for trading the form should show up.
-    Doc.hide(page.orderForm)
+    Doc.hide(page.orderForm, page.orderTypeBttns)
     const feePaid = !this.hasFeePending()
     const assetsAreSupported = this.assetsAreSupported()
     const { base, quote } = this.market
     const hasWallets = base && app().assets[base.id].wallet && quote && app().assets[quote.id].wallet
 
     if (feePaid && assetsAreSupported && hasWallets) {
-      Doc.show(page.orderForm)
+      Doc.show(page.orderForm, page.orderTypeBttns)
     }
   }
 
@@ -636,6 +634,7 @@ export default class MarketsPage extends BasePage {
     const symbol = market.base ? market.quoteCfg.symbol : market.baseCfg.symbol
     page.loaderMsg.textContent = intl.prep(intl.ID_NOT_SUPPORTED, { asset: symbol.toUpperCase() })
     Doc.show(page.loaderMsg)
+    Doc.hide(page.noWallet)
   }
 
   /* setRegistrationStatusView sets the text content and class for the
@@ -727,18 +726,19 @@ export default class MarketsPage extends BasePage {
     page.qtyField.value = ''
     page.rateField.value = ''
 
+    Doc.hide(page.noWallet)
+
     // If we have not yet connected, there is no dex.assets or any other
     // exchange data, so just put up a message and wait for the connection to be
     // established, at which time handleConnNote will refresh and reload.
     if (!dex || !dex.markets || dex.connectionStatus !== ConnectionStatus.Connected) {
       page.chartErrMsg.textContent = intl.prep(intl.ID_CONNECTION_FAILED)
       Doc.show(page.chartErrMsg)
-      if (this.loaded) this.loaded()
-      this.main.style.opacity = '1'
-      Doc.hide(page.marketLoader)
       return
     }
 
+    for (const s of this.stats) Doc.show(s.row)
+
     const baseCfg = dex.assets[base]
     const quoteCfg = dex.assets[quote]
 
@@ -772,13 +772,19 @@ export default class MarketsPage extends BasePage {
       buyBalance: 0
     }
 
-    Doc.show(page.marketLoader)
-    if (!dex.candleDurs || dex.candleDurs.length === 0) this.currentChart = depthChart
-    if (this.currentChart === depthChart) ws.request('loadmarket', makeMarket(host, base, quote))
-    else {
-      if (dex.candleDurs.indexOf(this.candleDur) === -1) this.candleDur = dex.candleDurs[0]
-      this.loadCandles()
-    }
+    Doc.setVis(!(this.market.base.wallet && this.market.quote.wallet), page.noWallet)
+    this.setStats()
+    this.refreshRecentMatchesTable()
+
+    // if (!dex.candleDurs || dex.candleDurs.length === 0) this.currentChart = depthChart
+
+    // depth chart
+    ws.request('loadmarket', makeMarket(host, base, quote))
+
+    // candlesticks
+    this.candleDur = fiveMinBinKey
+    this.loadCandles()
+
     this.setLoaderMsgVisibility()
     this.setRegistrationStatusVisibility()
     this.resolveOrderFormVisibility()
@@ -819,25 +825,24 @@ export default class MarketsPage extends BasePage {
     while (this.hovers.length) (this.hovers.shift() as HTMLElement).classList.remove('hover')
     const page = this.page
     if (!r) {
-      Doc.hide(page.hoverData)
+      Doc.hide(page.hoverData, page.depthHoverData)
       return
     }
+    Doc.show(page.hoverData, page.depthHoverData)
 
     // If the user is hovered to within a small percent (based on chart width)
     // of a user order, highlight that order's row.
-    for (const metaOrd of Object.values(this.metaOrders)) {
-      const [row, ord] = [metaOrd.row, metaOrd.order]
+    for (const { div, ord } of Object.values(this.metaOrders)) {
       if (ord.status !== OrderUtil.StatusBooked) continue
       if (r.hoverMarkers.indexOf(ord.rate) > -1) {
-        row.classList.add('hover')
-        this.hovers.push(row)
+        div.classList.add('hover')
+        this.hovers.push(div)
       }
     }
 
     page.hoverPrice.textContent = Doc.formatCoinValue(r.rate)
     page.hoverVolume.textContent = Doc.formatCoinValue(r.depth)
     page.hoverVolume.style.color = r.dotColor
-    Doc.show(page.hoverData)
   }
 
   /*
@@ -852,16 +857,15 @@ export default class MarketsPage extends BasePage {
   reportMouseCandle (candle: Candle | null) {
     const page = this.page
     if (!candle) {
-      Doc.hide(page.hoverData)
+      Doc.hide(page.hoverData, page.candleHoverData)
       return
     }
-
+    Doc.show(page.hoverData, page.candleHoverData)
     page.candleStart.textContent = Doc.formatCoinValue(candle.startRate / this.market.rateConversionFactor)
     page.candleEnd.textContent = Doc.formatCoinValue(candle.endRate / this.market.rateConversionFactor)
     page.candleHigh.textContent = Doc.formatCoinValue(candle.highRate / this.market.rateConversionFactor)
     page.candleLow.textContent = Doc.formatCoinValue(candle.lowRate / this.market.rateConversionFactor)
     page.candleVol.textContent = Doc.formatCoinValue(candle.matchVolume, this.market.baseUnitInfo)
-    Doc.show(page.hoverData)
   }
 
   /*
@@ -1034,20 +1038,23 @@ export default class MarketsPage extends BasePage {
 
     page.maxFromLots.textContent = lots.toString()
     // XXX add plural into format details, so we don't need this
-    page.maxFromLotsLbl.textContent = lots === 1 ? 'lot' : 'lots'
+    page.maxFromLotsLbl.textContent = intl.prep(lots === 1 ? intl.ID_LOT : intl.ID_LOTS)
     if (!maxOrder) {
       Doc.hide(page.maxAboveZero)
       return
     }
     // Could add the estimatedFees here, but that might also be
     // confusing.
-    const [fromAsset, toAsset] = sell ? [this.market.base, this.market.quote] : [this.market.quote, this.market.base]
+    const fromAsset = sell ? this.market.base : this.market.quote
+    // DRAFT NOTE: Maybe just use base qty from lots.
     page.maxFromAmt.textContent = Doc.formatCoinValue(maxOrder.value || 0, fromAsset.unitInfo)
     page.maxFromTicker.textContent = fromAsset.symbol.toUpperCase()
     // Could subtract the maxOrder.redemptionFees here.
-    const toConversion = sell ? this.adjustedRate() / OrderUtil.RateEncodingFactor : OrderUtil.RateEncodingFactor / this.adjustedRate()
-    page.maxToAmt.textContent = Doc.formatCoinValue((maxOrder.value || 0) * toConversion, toAsset.unitInfo)
-    page.maxToTicker.textContent = toAsset.symbol.toUpperCase()
+    // The qty conversion doesn't fit well with the new design.
+    // TODO: Make this work somehow?
+    // const toConversion = sell ? this.adjustedRate() / OrderUtil.RateEncodingFactor : OrderUtil.RateEncodingFactor / this.adjustedRate()
+    // page.maxToAmt.textContent = Doc.formatCoinValue((maxOrder.value || 0) * toConversion, toAsset.unitInfo)
+    // page.maxToTicker.textContent = toAsset.symbol.toUpperCase()
   }
 
   /*
@@ -1084,6 +1091,9 @@ export default class MarketsPage extends BasePage {
       Doc.empty(this.page.sellRows)
       return
     }
+    Doc.show(this.page.epochLine)
+    if (this.loadingAnimations.depth) this.loadingAnimations.depth.stop()
+    this.depthChart.canvas.classList.remove('invisible')
     this.depthChart.set(this.book, cfg.lotsize, cfg.ratestep, baseUnitInfo, quoteUnitInfo)
     this.recentMatches = data.book.recentMatches ?? []
     this.refreshRecentMatchesTable()
@@ -1137,36 +1147,6 @@ export default class MarketsPage extends BasePage {
     }
   }
 
-  /*
-   * ordersSortCompare returns sort compare function according to the active
-   * sort key and direction.
-   */
-  ordersSortCompare () {
-    switch (this.ordersSortKey) {
-      case 'submitTime':
-        return (a: Order, b: Order) => this.ordersSortDirection * (b.submitTime - a.submitTime)
-      case 'rate':
-        return (a: Order, b: Order) => this.ordersSortDirection * (a.rate - b.rate)
-      case 'qty':
-        return (a: Order, b: Order) => this.ordersSortDirection * (a.qty - b.qty)
-      case 'type':
-        return (a: Order, b: Order) => this.ordersSortDirection *
-        OrderUtil.typeString(a).localeCompare(OrderUtil.typeString(b))
-      case 'sell':
-        return (a: Order, b: Order) => this.ordersSortDirection *
-          (OrderUtil.sellString(a)).localeCompare(OrderUtil.sellString(b))
-      case 'status':
-        return (a: Order, b: Order) => this.ordersSortDirection *
-          (OrderUtil.statusString(a)).localeCompare(OrderUtil.statusString(b))
-      case 'settled':
-        return (a: Order, b: Order) => this.ordersSortDirection *
-          ((OrderUtil.settled(a) * 100 / a.qty) - (OrderUtil.settled(b) * 100 / b.qty))
-      case 'filled':
-        return (a: Order, b: Order) => this.ordersSortDirection *
-          ((OrderUtil.filled(a) * 100 / a.qty) - (OrderUtil.filled(b) * 100 / b.qty))
-    }
-  }
-
   /* refreshActiveOrders refreshes the user's active order list. */
   refreshActiveOrders () {
     const page = this.page
@@ -1175,62 +1155,88 @@ export default class MarketsPage extends BasePage {
     for (const oid in metaOrders) delete metaOrders[oid]
     const orders = app().orders(market.dex.host, marketID(market.baseCfg.symbol, market.quoteCfg.symbol))
     // Sort orders by sort key.
-    const compare = this.ordersSortCompare()
-    orders.sort(compare)
+    orders.sort((a: Order, b: Order) => b.submitTime - a.submitTime)
+
+    Doc.empty(page.userOrders)
+    Doc.setVis(orders?.length, page.userOrders)
+    Doc.setVis(!orders?.length, page.userNoOrders)
 
-    Doc.empty(page.liveList)
     for (const ord of orders) {
-      const row = page.liveTemplate.cloneNode(true) as HTMLElement
-      metaOrders[ord.id] = {
-        row: row,
-        order: ord
+      const div = page.userOrderTmpl.cloneNode(true) as HTMLElement
+      page.userOrders.appendChild(div)
+
+      const header = Doc.parseTemplate(Doc.tmplElement(div, 'header'))
+      const detailsDiv = Doc.tmplElement(div, 'details')
+      const details = Doc.parseTemplate(detailsDiv)
+
+      const mord: MetaOrder = {
+        div: div,
+        header: header,
+        details: details,
+        ord: ord
       }
-      Doc.bind(row, 'mouseenter', () => {
+      metaOrders[ord.id] = mord
+
+      header.sideLight.classList.add(ord.sell ? 'sell' : 'buy')
+      details.side.textContent = header.side.textContent = OrderUtil.sellString(ord)
+      details.side.classList.add(ord.sell ? 'sellcolor' : 'buycolor')
+      header.side.classList.add(ord.sell ? 'sellcolor' : 'buycolor')
+      details.qty.textContent = header.qty.textContent = fourSigFigs(ord.qty / this.market.baseUnitInfo.conventional.conversionFactor)
+      details.rate.textContent = fourSigFigs(ord.rate / this.market.rateConversionFactor)
+      header.baseSymbol.textContent = ord.baseSymbol.toUpperCase()
+      details.type.textContent = OrderUtil.typeString(ord)
+      this.updateMetaOrder(mord)
+
+      Doc.bind(div, 'mouseenter', () => {
         this.activeMarkerRate = ord.rate
         this.setDepthMarkers()
       })
-      this.updateUserOrderRow(row, ord)
+
       if (ord.type === OrderUtil.Limit && (ord.tif === OrderUtil.StandingTiF && ord.status < OrderUtil.StatusExecuted)) {
-        const icon = Doc.tmplElement(row, 'cancelBttn')
-        Doc.show(icon)
-        bind(icon, 'click', e => {
+        Doc.show(details.cancelBttn)
+        bind(details.cancelBttn, 'click', e => {
           e.stopPropagation()
-          this.showCancel(row, ord.id)
+          this.showCancel(div, ord.id)
         })
       }
 
-      const accelerateBttn = Doc.tmplElement(row, 'accelerateBttn')
-      bind(accelerateBttn, 'click', e => {
+      bind(details.accelerateBttn, 'click', e => {
         e.stopPropagation()
         this.showAccelerate(ord)
       })
       if (app().canAccelerateOrder(ord)) {
-        Doc.show(accelerateBttn)
+        Doc.show(details.accelerateBttn)
       }
 
-      const side = Doc.tmplElement(row, 'side')
-      side.classList.add(ord.sell ? 'sellcolor' : 'buycolor')
-      const link = Doc.tmplElement(row, 'link')
-      link.href = `order/${ord.id}`
-      app().bindInternalNavigation(row)
-      page.liveList.appendChild(row)
-      app().bindTooltips(row)
+      Doc.bind(header.expander, 'click', () => {
+        if (Doc.isDisplayed(detailsDiv)) {
+          Doc.hide(detailsDiv)
+          header.expander.classList.add('ico-arrowdown')
+          header.expander.classList.remove('ico-arrowup')
+          return
+        }
+        Doc.show(detailsDiv)
+        header.expander.classList.remove('ico-arrowdown')
+        header.expander.classList.add('ico-arrowup')
+      })
+      details.link.href = `order/${ord.id}`
+      app().bindInternalNavigation(div)
+      app().bindTooltips(div)
     }
     this.setDepthMarkers()
   }
 
   /*
-  * updateUserOrderRow sets the td contents of the user's order table row.
+  * updateMetaOrder sets the td contents of the user's order table row.
   */
-  updateUserOrderRow (tr: HTMLElement, ord: Order) {
-    updateDataCol(tr, 'type', OrderUtil.typeString(ord))
-    updateDataCol(tr, 'side', OrderUtil.sellString(ord))
-    updateDataCol(tr, 'age', Doc.timeSince(ord.submitTime))
-    updateDataCol(tr, 'rate', Doc.formatCoinValue(ord.rate / this.market.rateConversionFactor))
-    updateDataCol(tr, 'qty', Doc.formatCoinValue(ord.qty, this.market.baseUnitInfo))
-    updateDataCol(tr, 'filled', `${(OrderUtil.filled(ord) / ord.qty * 100).toFixed(1)}%`)
-    updateDataCol(tr, 'settled', `${(OrderUtil.settled(ord) / ord.qty * 100).toFixed(1)}%`)
-    updateDataCol(tr, 'status', OrderUtil.statusString(ord))
+  updateMetaOrder (mord: MetaOrder) {
+    const { header, details, ord } = mord
+    if (ord.status <= OrderUtil.StatusBooked) header.activeLight.classList.add('active')
+    else header.activeLight.classList.remove('active')
+    details.status.textContent = header.status.textContent = OrderUtil.statusString(ord)
+    details.age.textContent = Doc.timeSince(ord.submitTime)
+    details.filled.textContent = `${(OrderUtil.filled(ord) / ord.qty * 100).toFixed(1)}%`
+    details.settled.textContent = `${(OrderUtil.settled(ord) / ord.qty * 100).toFixed(1)}%`
   }
 
   /* setMarkers sets the depth chart markers for booked orders. */
@@ -1240,8 +1246,7 @@ export default class MarketsPage extends BasePage {
       sells: []
     }
     const rateFactor = this.market.rateConversionFactor
-    for (const mo of Object.values(this.metaOrders)) {
-      const ord = mo.order
+    for (const { ord } of Object.values(this.metaOrders)) {
       if (ord.rate && ord.status === OrderUtil.StatusBooked) {
         if (ord.sell) {
           markers.sells.push({
@@ -1291,7 +1296,6 @@ export default class MarketsPage extends BasePage {
     this.refreshActiveOrders()
     this.handleBook(mktBook)
     this.updateTitle()
-    Doc.hide(page.marketLoader)
     this.marketList.select(host, b.id, q.id)
 
     State.store(lastMarketKey, {
@@ -1313,13 +1317,6 @@ export default class MarketsPage extends BasePage {
     this.balanceWgt.setWallets(host, b.id, q.id)
     this.setMarketBuyOrderEstimate()
     this.refreshActiveOrders()
-    if (this.loaded) {
-      this.loaded()
-      this.loaded = null
-      Doc.animate(250, progress => {
-        this.main.style.opacity = String(progress)
-      })
-    }
   }
 
   /* handleBookOrderRoute is the handler for 'book_order' notifications. */
@@ -1374,12 +1371,13 @@ export default class MarketsPage extends BasePage {
       this.candlesLoading.loaded()
       this.candlesLoading = null
     }
-    this.depthChart.hide()
-    this.candleChart.show()
-    if (data.host !== this.market.dex.host) return
+    if (data.host !== this.market.dex.host || data.marketID !== this.market.cfg.name) return
     const dur = data.payload.dur
     this.market.candleCaches[dur] = data.payload
-    if (this.currentChart !== candleChart || this.candleDur !== dur) return
+    this.setHighLow()
+    if (this.candleDur !== dur) return
+    if (this.loadingAnimations.candles) this.loadingAnimations.candles.stop()
+    this.candleChart.canvas.classList.remove('invisible')
     this.candleChart.setCandles(data.payload, this.market.cfg, this.market.baseUnitInfo, this.market.quoteUnitInfo)
   }
 
@@ -1401,7 +1399,7 @@ export default class MarketsPage extends BasePage {
       if (last.startStamp === candle.startStamp) candles[candles.length - 1] = candle
       else candles.push(candle)
     }
-    if (this.currentChart !== candleChart || this.candleDur !== dur) return
+    if (this.candleDur !== dur) return
     this.candleChart.draw()
   }
 
@@ -1409,8 +1407,7 @@ export default class MarketsPage extends BasePage {
   async showForm (form: HTMLElement) {
     this.currentForm = form
     const page = this.page
-    Doc.hide(page.unlockWalletForm, page.verifyForm, page.newWalletForm,
-      page.cancelForm, page.vDetailPane, page.accelerateForm, page.toggleWalletStatusConfirm)
+    Doc.hide(...Array.from(page.forms.children))
     form.style.right = '10000px'
     Doc.show(page.forms, form)
     const shift = (page.forms.offsetWidth + form.offsetWidth) / 2
@@ -1532,8 +1529,6 @@ export default class MarketsPage extends BasePage {
       }
     }
     // Visually differentiate between buy/sell orders.
-    const buyBtnClass = 'buygreen'
-    const sellBtnClass = 'sellred'
     if (isSell) {
       page.vHeader.classList.add(sellBtnClass)
       page.vHeader.classList.remove(buyBtnClass)
@@ -1744,10 +1739,10 @@ export default class MarketsPage extends BasePage {
 
   /* showCancel shows a form to confirm submission of a cancel order. */
   showCancel (row: HTMLElement, orderID: string) {
-    const order = this.metaOrders[orderID].order
+    const ord = this.metaOrders[orderID].ord
     const page = this.page
-    const remaining = order.qty - order.filled
-    const asset = OrderUtil.isMarketBuy(order) ? this.market.quote : this.market.base
+    const remaining = ord.qty - ord.filled
+    const asset = OrderUtil.isMarketBuy(ord) ? this.market.quote : this.market.base
     page.cancelRemain.textContent = Doc.formatCoinValue(remaining, asset.unitInfo)
     page.cancelUnit.textContent = asset.symbol.toUpperCase()
     Doc.hide(page.cancelErr)
@@ -1755,7 +1750,7 @@ export default class MarketsPage extends BasePage {
     page.cancelPass.focus()
     this.cancelData = {
       bttn: Doc.tmplElement(row, 'cancelBttn'),
-      order: order
+      order: ord
     }
   }
 
@@ -1802,16 +1797,17 @@ export default class MarketsPage extends BasePage {
     this.showVerify()
   }
 
+  /* Display a deposit address. */
+  async showDeposit (assetID: number) {
+    this.depositAddrForm.setAsset(assetID)
+    this.showForm(this.page.deposit)
+  }
+
   /*
    * handlePriceUpdate is the handler for the 'spots' notification.
    */
   handlePriceUpdate (note: SpotPriceNote) {
-    const xcSection = this.marketList.xcSection(note.host)
-    if (!xcSection || !xcSection.marketRows) return
-    for (const spot of Object.values(note.spots)) {
-      const marketRow = xcSection.marketRow(spot.baseID, spot.quoteID)
-      if (marketRow) marketRow.setSpot(spot)
-    }
+    this.marketList.updateSpots(note)
   }
 
   /*
@@ -1832,20 +1828,18 @@ export default class MarketsPage extends BasePage {
    */
   handleOrderNote (note: OrderNote) {
     const order = note.order
-    const metaOrder = this.metaOrders[order.id]
+    const mord = this.metaOrders[order.id]
     // If metaOrder doesn't exist for the given order it means it was
     // created via dexcctl and the GUI isn't aware of it.
     // Call refreshActiveOrders to grab the order.
-    if (!metaOrder) return this.refreshActiveOrders()
-    const oldStatus = metaOrder.status
-    metaOrder.order = order
-    const cancelBttn = Doc.tmplElement(metaOrder.row, 'cancelBttn')
-    if (note.topic === 'MissedCancel') Doc.show(cancelBttn)
-    if (order.filled === order.qty) Doc.hide(cancelBttn)
-    const accelerateBttn = Doc.tmplElement(metaOrder.row, 'accelerateBttn')
-    if (app().canAccelerateOrder(order)) Doc.show(accelerateBttn)
-    else Doc.hide(accelerateBttn)
-    this.updateUserOrderRow(metaOrder.row, order)
+    if (!mord) return this.refreshActiveOrders()
+    const oldStatus = mord.status
+    mord.ord = order
+    if (note.topic === 'MissedCancel') Doc.show(mord.details.cancelBttn)
+    if (order.filled === order.qty) Doc.hide(mord.details.cancelBttn)
+    if (app().canAccelerateOrder(order)) Doc.show(mord.details.accelerateBttn)
+    else Doc.hide(mord.details.accelerateBttn)
+    this.updateMetaOrder(mord)
     // Only reset markers if there is a change, since the chart is redrawn.
     if ((oldStatus === OrderUtil.StatusEpoch && order.status === OrderUtil.StatusBooked) ||
       (oldStatus === OrderUtil.StatusBooked && order.status > OrderUtil.StatusBooked)) this.setDepthMarkers()
@@ -1863,26 +1857,26 @@ export default class MarketsPage extends BasePage {
     }
 
     this.clearOrderTableEpochs()
-    for (const metaOrder of Object.values(this.metaOrders)) {
-      const order = metaOrder.order
-      const alreadyMatched = note.epoch > order.epoch
-      const statusTD = Doc.tmplElement(metaOrder.row, 'status')
+    for (const { ord, details, header } of Object.values(this.metaOrders)) {
+      const alreadyMatched = note.epoch > ord.epoch
       switch (true) {
-        case order.type === OrderUtil.Limit && order.status === OrderUtil.StatusEpoch && alreadyMatched:
-          statusTD.textContent = order.tif === OrderUtil.ImmediateTiF ? intl.prep(intl.ID_EXECUTED) : intl.prep(intl.ID_BOOKED)
-          order.status = order.tif === OrderUtil.ImmediateTiF ? OrderUtil.StatusExecuted : OrderUtil.StatusBooked
+        case ord.type === OrderUtil.Limit && ord.status === OrderUtil.StatusEpoch && alreadyMatched: {
+          const status = ord.tif === OrderUtil.ImmediateTiF ? intl.prep(intl.ID_EXECUTED) : intl.prep(intl.ID_BOOKED)
+          details.status.textContent = header.status.textContent = status
+          ord.status = ord.tif === OrderUtil.ImmediateTiF ? OrderUtil.StatusExecuted : OrderUtil.StatusBooked
           break
-        case order.type === OrderUtil.Market && order.status === OrderUtil.StatusEpoch:
+        }
+        case ord.type === OrderUtil.Market && ord.status === OrderUtil.StatusEpoch:
           // Technically don't know if this should be 'executed' or 'settling'.
-          statusTD.textContent = intl.prep(intl.ID_EXECUTED)
-          order.status = OrderUtil.StatusExecuted
+          details.status.textContent = header.status.textContent = intl.prep(intl.ID_EXECUTED)
+          ord.status = OrderUtil.StatusExecuted
           break
       }
     }
   }
 
   /*
-   * ordersSortCompare returns sort compare function according to the active
+   * recentMatchesSortCompare returns sort compare function according to the active
    * sort key and direction.
    */
   recentMatchesSortCompare () {
@@ -1905,14 +1899,13 @@ export default class MarketsPage extends BasePage {
     recentMatches.sort(compare)
     for (const match of recentMatches) {
       const row = page.recentMatchesTemplate.cloneNode(true) as HTMLElement
-
+      const tmpl = Doc.parseTemplate(row)
       app().bindTooltips(row)
-      updateDataCol(row, 'rate', Doc.formatCoinValue(match.rate / this.market.rateConversionFactor))
-      // change rate color based if is sell or not.
-      updateDataCol(row, 'qty', Doc.formatCoinValue(match.qty, this.market.baseUnitInfo))
-      updateDataCol(row, 'age', new Date(match.stamp).toLocaleTimeString())
+      tmpl.rate.textContent = Doc.formatCoinValue(match.rate / this.market.rateConversionFactor)
+      tmpl.qty.textContent = Doc.formatCoinValue(match.qty, this.market.baseUnitInfo)
+      tmpl.age.textContent = Doc.timeSince(match.stamp)
+      tmpl.age.dataset.sinceStamp = String(match.stamp)
       row.classList.add(match.sell ? 'sellcolor' : 'buycolor')
-
       page.recentMatchesLiveList.append(row)
     }
   }
@@ -1924,8 +1917,7 @@ export default class MarketsPage extends BasePage {
   setBalanceVisibility () {
     const mkt = this.market
     if (!mkt || !mkt.dex) return
-    if (mkt.dex.connectionStatus === ConnectionStatus.Connected) Doc.show(this.page.balanceTable)
-    else Doc.hide(this.page.balanceTable)
+    this.balanceWgt.setBalanceVisibility(mkt.dex.connectionStatus === ConnectionStatus.Connected)
   }
 
   /* handleBalanceNote handles notifications updating a wallet's balance. */
@@ -1996,6 +1988,7 @@ export default class MarketsPage extends BasePage {
     const asset = user.assets[this.currentCreate.id]
     Doc.hide(this.page.forms)
     this.balanceWgt.updateAsset(asset.id)
+    Doc.setVis(!(this.market.base.wallet && this.market.quote.wallet), this.page.noWallet)
     this.resolveOrderFormVisibility()
   }
 
@@ -2255,7 +2248,7 @@ export default class MarketsPage extends BasePage {
       // or this may be the first opportunity to get the server's config, so
       // fetch it all before reloading the markets page.
       await app().fetchUser()
-      await app().loadPage('markets')
+      if (!this.market) this.init({})
     }
   }
 
@@ -2264,7 +2257,7 @@ export default class MarketsPage extends BasePage {
    * value of the search input.
    */
   filterMarkets () {
-    const filterTxt = this.page.marketSearch.value
+    const filterTxt = this.page.marketSearchV1.value
     const filter = filterTxt ? (mkt: MarketRow) => mkt.name.includes(filterTxt) : () => true
     this.marketList.setFilter(filter)
   }
@@ -2275,33 +2268,6 @@ export default class MarketsPage extends BasePage {
     this.depthChart.draw()
   }
 
-  /*
-   * depthChartSelected is called when the user clicks a button to show the
-   * depth chart.
-  */
-  depthChartSelected () {
-    const page = this.page
-    Doc.hide(page.depthBttn, page.durBttnBox, page.candleHoverData)
-    Doc.show(page.candlestickBttn, page.epochLine, page.depthHoverData, page.depthSummary)
-    this.currentChart = depthChart
-    this.depthChart.show()
-    this.candleChart.hide()
-  }
-
-  /*
-   * candleChartSelected is called when the user clicks a button to show the
-   * historical market data (candlestick) chart.
-  */
-  candleChartSelected () {
-    const page = this.page
-    const dex = this.market.dex
-    this.currentChart = candleChart
-    Doc.hide(page.candlestickBttn, page.epochLine, page.depthHoverData, page.depthSummary)
-    Doc.show(page.depthBttn, page.durBttnBox, page.candleHoverData)
-    if (dex.candleDurs.indexOf(this.candleDur) === -1) this.candleDur = dex.candleDurs[0]
-    this.loadCandles()
-  }
-
   /* candleDurationSelected sets the candleDur and loads the candles. */
   candleDurationSelected (dur: string) {
     this.candleDur = dur
@@ -2320,8 +2286,8 @@ export default class MarketsPage extends BasePage {
     const { candleCaches, cfg, baseUnitInfo, quoteUnitInfo } = this.market
     const cache = candleCaches[this.candleDur]
     if (cache) {
-      this.depthChart.hide()
-      this.candleChart.show()
+      // this.depthChart.hide()
+      // this.candleChart.show()
       this.candleChart.setCandles(cache, cfg, baseUnitInfo, quoteUnitInfo)
       return
     }
@@ -2331,11 +2297,10 @@ export default class MarketsPage extends BasePage {
   /* requestCandles sends the loadcandles request. */
   requestCandles () {
     this.candlesLoading = {
-      loaded: () => { Doc.hide(this.page.marketLoader) },
+      loaded: () => { /* pass */ },
       timer: window.setTimeout(() => {
         if (this.candlesLoading) {
           this.candlesLoading = null
-          Doc.hide(this.page.marketLoader)
           console.error('candles not received')
         }
       }, 10000)
@@ -2370,69 +2335,68 @@ export default class MarketsPage extends BasePage {
  * and sort order of markets.
  */
 class MarketList {
-  xcSections: ExchangeSection[]
+  // xcSections: ExchangeSection[]
+  div: PageElement
+  rowTmpl: PageElement
+  markets: MarketRow[]
   selected: MarketRow
 
   constructor (div: HTMLElement) {
-    const xcTmpl = Doc.tmplElement(div, 'xc')
-    Doc.cleanTemplates(xcTmpl)
-    this.xcSections = []
-    for (const dex of Object.values(app().user.exchanges)) {
-      this.xcSections.push(new ExchangeSection(xcTmpl, dex))
-    }
-    // Initial sort is alphabetical.
-    for (const xc of this.sortedSections()) {
-      div.appendChild(xc.node)
+    this.div = div
+    this.rowTmpl = Doc.idel(div, 'marketTmplV1')
+    Doc.cleanTemplates(this.rowTmpl)
+    this.reloadMarketsPane()
+  }
+
+  updateSpots (note: SpotPriceNote) {
+    for (const row of this.markets) {
+      if (row.mkt.xc.host !== note.host) continue
+      const spot = note.spots[row.mkt.name]
+      if (!spot) return
+      const xc = app().exchanges[row.mkt.xc.host]
+      const mkt = xc.markets[row.mkt.name]
+      setPriceAndChange(row.tmpl, xc, mkt)
     }
   }
 
-  /*
-   * sortedSections returns a list of ExchangeSection sorted alphabetically by
-   * host.
-   */
-  sortedSections () {
-    return [...this.xcSections].sort((a, b) => a.host < b.host ? -1 : 1)
+  reloadMarketsPane (): void {
+    Doc.empty(this.div)
+    this.markets = []
+
+    const addMarket = (mkt: ExchangeMarket) => {
+      const bui = app().unitInfo(mkt.baseid, mkt.xc)
+      const qui = app().unitInfo(mkt.quoteid, mkt.xc)
+      const rateConversionFactor = OrderUtil.RateEncodingFactor / bui.conventional.conversionFactor * qui.conventional.conversionFactor
+      const row = new MarketRow(this.rowTmpl, mkt, rateConversionFactor)
+      this.div.appendChild(row.node)
+      return row
+    }
+
+    for (const mkt of sortedMarkets()) this.markets.push(addMarket(mkt))
   }
 
-  /*
-   * xcSection is a getter for the ExchangeSection for a specified host.
-   */
-  xcSection (host: string) {
-    for (const xc of this.xcSections) {
-      if (xc.host === host) return xc
+  find (host: string, baseID: number, quoteID: number): MarketRow | null {
+    for (const row of this.markets) {
+      if (row.mkt.xc.host === host && row.mkt.baseid === baseID && row.mkt.quoteid === quoteID) return row
     }
     return null
   }
 
   /* exists will be true if the specified market exists. */
-  exists (host: string, baseID: number, quoteID: number) {
-    const xc = this.xcSection(host)
-    // If connecting to an offline server the client is not able to get xc.marketRows.
-    // Therefore we must check for it.
-    if (!xc || !xc.marketRows) return false
-    for (const mkt of xc.marketRows) {
-      if (mkt.baseID === baseID && mkt.quoteID === quoteID) return true
-    }
-    return false
+  exists (host: string, baseID: number, quoteID: number): boolean {
+    return this.find(host, baseID, quoteID) !== null
   }
 
   /* first gets the first market from the first exchange, alphabetically. */
-  first () {
-    const firstXC = this.sortedSections()[0]
-    const firstMkt = firstXC.first()
-    // Cannot find markets if server connection failed.
-    if (!firstMkt) return makeMarket(firstXC.host)
-    return makeMarket(firstXC.host, firstMkt.baseID, firstMkt.quoteID)
+  first (): MarketRow {
+    return this.markets[0]
   }
 
   /* select sets the specified market as selected. */
   select (host: string, baseID: number, quoteID: number) {
-    if (this.selected) this.selected.node.classList.remove('selected')
-    const xcSection = this.xcSection(host)
-    if (!xcSection) return console.error(`select: no exchange section for ${host}`)
-    const marketRow = xcSection.marketRow(baseID, quoteID)
-    if (!marketRow) return console.error(`select: no market row for ${host}, ${baseID}-${quoteID}`)
-    this.selected = marketRow
+    const row = this.find(host, baseID, quoteID)
+    if (!row) return console.error(`select: no market row for ${host}, ${baseID}-${quoteID}`)
+    this.selected = row
     this.selected.node.classList.add('selected')
   }
 
@@ -2440,99 +2404,20 @@ class MarketList {
    * on the core.ConnEventNote.
    */
   setConnectionStatus (note: ConnEventNote) {
-    const xcSection = this.xcSection(note.host)
-    if (!xcSection) return console.error(`setConnectionStatus: no exchange section for ${note.host}`)
-    xcSection.setConnected(note.connectionStatus === ConnectionStatus.Connected)
-  }
-
-  /*
-   * setFilter sets the visibility of market rows based on the provided filter.
-   */
-  setFilter (filter: (mkt: MarketRow) => boolean) {
-    for (const xc of this.xcSections) {
-      xc.setFilter(filter)
-    }
-  }
-}
-
-/*
- * ExchangeSection is a top level section of the MarketList.
- */
-class ExchangeSection {
-  marketRows: MarketRow[]
-  host: string
-  dex: Exchange
-  node: HTMLElement
-  disconnectedIco: PageElement
-
-  constructor (template: HTMLElement, dex: Exchange) {
-    this.dex = dex
-    this.host = dex.host
-    this.node = template.cloneNode(true) as HTMLElement
-    const tmpl = Doc.parseTemplate(this.node)
-    tmpl.header.textContent = dex.host
-
-    this.disconnectedIco = tmpl.disconnected
-    if (dex.connectionStatus === ConnectionStatus.Connected) Doc.hide(tmpl.disconnected)
-
-    tmpl.mkts.removeChild(tmpl.mktrow)
-    // If disconnected is not possible to get the markets from the server.
-    if (!dex.markets) return
-
-    this.marketRows = Object.values(dex.markets).map(mkt => {
-      const bui = app().unitInfo(mkt.baseid, dex)
-      const qui = app().unitInfo(mkt.quoteid, dex)
-      const rateConversionFactor = OrderUtil.RateEncodingFactor / bui.conventional.conversionFactor * qui.conventional.conversionFactor
-      return new MarketRow(tmpl.mktrow, mkt, rateConversionFactor)
-    })
-
-    // for (const mkt of Object.values(dex.markets)) {
-    //   this.marketRows.push(new MarketRow(tmpl.mktrow, mkt))
-    // }
-    for (const market of this.sortedMarkets()) {
-      tmpl.mkts.appendChild(market.node)
-    }
-  }
-
-  /*
-   * sortedMarkets is the list of MarketRow sorted alphabetically by the base
-   * symbol first, quote symbol second.
-   */
-  sortedMarkets () {
-    if (!this.marketRows) return []
-    return [...this.marketRows].sort((a, b) => a.name < b.name ? -1 : 1)
-  }
-
-  /*
-   * first returns the first market in the alphabetically-sorted list of
-   * markets.
-   */
-  first () {
-    return this.sortedMarkets()[0]
-  }
-
-  /*
-   * marketRow gets the MarketRow for the specified market.
-   */
-  marketRow (baseID: number, quoteID: number) {
-    for (const mkt of this.marketRows) {
-      if (mkt.baseID === baseID && mkt.quoteID === quoteID) return mkt
+    for (const row of this.markets) {
+      if (row.mkt.xc.host !== note.host) continue
+      if (note.connectionStatus === ConnectionStatus.Connected) Doc.hide(row.tmpl.disconnectedIco)
+      else Doc.show(row.tmpl.disconnectedIco)
     }
   }
 
-  /* setConnected sets the visiblity of the disconnected icon. */
-  setConnected (isConnected: boolean) {
-    if (isConnected) Doc.hide(this.disconnectedIco)
-    else Doc.show(this.disconnectedIco)
-  }
-
   /*
    * setFilter sets the visibility of market rows based on the provided filter.
    */
   setFilter (filter: (mkt: MarketRow) => boolean) {
-    for (const mkt of this.marketRows) {
-      if (filter(mkt)) Doc.show(mkt.node)
-      else Doc.hide(mkt.node)
+    for (const row of this.markets) {
+      if (filter(row)) Doc.show(row.node)
+      else Doc.hide(row.node)
     }
   }
 }
@@ -2543,7 +2428,7 @@ class ExchangeSection {
  */
 class MarketRow {
   node: HTMLElement
-  mkt: Market
+  mkt: ExchangeMarket
   name: string
   baseID: number
   quoteID: number
@@ -2552,7 +2437,7 @@ class MarketRow {
   tmpl: Record<string, PageElement>
   rateConversionFactor: number
 
-  constructor (template: HTMLElement, mkt: Market, rateConversionFactor: number) {
+  constructor (template: HTMLElement, mkt: ExchangeMarket, rateConversionFactor: number) {
     this.mkt = mkt
     this.name = mkt.name
     this.baseID = mkt.baseid
@@ -2566,27 +2451,19 @@ class MarketRow {
     tmpl.quoteIcon.src = Doc.logoPath(mkt.quotesymbol)
     tmpl.baseSymbol.appendChild(Doc.symbolize(mkt.basesymbol))
     tmpl.quoteSymbol.appendChild(Doc.symbolize(mkt.quotesymbol))
-    this.setSpot(mkt.spot)
+    tmpl.baseName.textContent = mkt.baseName
+    setPriceAndChange(tmpl, mkt.xc, mkt)
   }
+}
 
-  setSpot (spot: Spot) {
-    if (!spot) return
-    const { tmpl, mkt } = this
-
-    Doc.show(tmpl.pctChange)
-    const pct = spot.change24 * 100
-    const num = percentFormatter.format(pct)
-    const sign = pct > 0 ? '+' : ''
-    tmpl.pctChange.textContent = `${sign}${num}%`
-    tmpl.pctChange.classList.remove('upgreen', 'downred', 'grey')
-    tmpl.pctChange.classList.add(pct === 0 ? 'grey' : pct > 0 ? 'upgreen' : 'downred')
-    const baseAsset = app().assets[mkt.baseid]
-    if (baseAsset) {
-      Doc.show(tmpl.bottomRow)
-      tmpl.assetName.textContent = baseAsset.name
-      tmpl.price.textContent = Doc.formatCoinValue(spot.rate / this.rateConversionFactor)
-    }
-  }
+interface BalanceWidgetElement {
+  id: number
+  parentID: number
+  cfg: Asset | null
+  node: PageElement
+  tmpl: Record<string, PageElement>
+  iconBox: PageElement
+  stateIcons: WalletIcons
 }
 
 /*
@@ -2599,54 +2476,35 @@ class MarketRow {
 class BalanceWidget {
   base: BalanceWidgetElement
   quote: BalanceWidgetElement
-  parentRow: PageElement
+  // parentRow: PageElement
   dex: Exchange
 
-  constructor (table: HTMLElement) {
-    const els = Doc.idDescendants(table)
+  constructor (base: HTMLElement, quote: HTMLElement) {
+    Doc.hide(base, quote)
+    const btmpl = Doc.parseTemplate(base)
     this.base = {
       id: 0,
       parentID: parentIDNone,
       cfg: null,
-      logo: els.baseImg,
-      symbol: els.balBaseSymbol,
-      avail: els.baseAvail,
-      newWalletRow: els.baseNewWalletRow,
-      newWalletBttn: els.baseNewButton,
-      walletPendingRow: els.baseWalletPendingRow,
-      locked: els.baseLocked,
-      immature: els.baseImmature,
-      parentBal: els.baseParent,
-      parentIcon: els.baseParentLogo,
-      unsupported: els.baseUnsupported,
-      expired: els.baseExpired,
-      connect: els.baseConnect,
-      spinner: els.baseSpinner,
-      iconBox: els.baseWalletState,
-      stateIcons: new WalletIcons(els.baseWalletState)
+      node: base,
+      tmpl: btmpl,
+      iconBox: btmpl.walletState,
+      stateIcons: new WalletIcons(btmpl.walletState)
     }
+    btmpl.balanceRowTmpl.remove()
+
+    const qtmpl = Doc.parseTemplate(quote)
     this.quote = {
       id: 0,
       parentID: parentIDNone,
       cfg: null,
-      logo: els.quoteImg,
-      symbol: els.balQuoteSymbol,
-      avail: els.quoteAvail,
-      newWalletRow: els.quoteNewWalletRow,
-      newWalletBttn: els.quoteNewButton,
-      walletPendingRow: els.quoteWalletPendingRow,
-      locked: els.quoteLocked,
-      immature: els.quoteImmature,
-      parentBal: els.quoteParent,
-      parentIcon: els.quoteParentLogo,
-      unsupported: els.quoteUnsupported,
-      expired: els.quoteExpired,
-      connect: els.quoteConnect,
-      spinner: els.quoteSpinner,
-      iconBox: els.quoteWalletState,
-      stateIcons: new WalletIcons(els.quoteWalletState)
-    }
-    this.parentRow = els.parentBalance
+      node: quote,
+      tmpl: qtmpl,
+      iconBox: qtmpl.walletState,
+      stateIcons: new WalletIcons(qtmpl.walletState)
+    }
+    qtmpl.balanceRowTmpl.remove()
+    // this.parentRow = els.parentBalance
 
     app().registerNoteFeeder({
       balance: (note: BalanceNote) => { this.updateAsset(note.assetID) },
@@ -2655,6 +2513,11 @@ class BalanceWidget {
     })
   }
 
+  setBalanceVisibility (connected: boolean) {
+    if (connected) Doc.show(this.base.node, this.quote.node)
+    else Doc.hide(this.base.node, this.quote.node)
+  }
+
   /*
    * setWallet sets the balance widget to display data for specified market.
    */
@@ -2671,7 +2534,6 @@ class BalanceWidget {
     this.quote.id = quoteID
     this.quote.parentID = parentID(quoteID)
     this.quote.cfg = this.dex.assets[quoteID]
-    Doc.hide(this.parentRow)
     this.updateWallet(this.base)
     this.updateWallet(this.quote)
   }
@@ -2681,74 +2543,88 @@ class BalanceWidget {
    * core.Wallet state.
    */
   updateWallet (side: BalanceWidgetElement) {
-    if (!side.cfg) return // no wallet set yet
-    const asset = app().assets[side.id]
+    const { cfg, tmpl, iconBox, stateIcons, id: assetID } = side
+    if (!cfg) return // no wallet set yet
+    const asset = app().assets[assetID]
     // Just hide everything to start.
     Doc.hide(
-      side.newWalletRow, side.avail, side.immature, side.locked,
-      side.expired, side.unsupported, side.connect, side.spinner, side.iconBox,
-      side.walletPendingRow, side.parentIcon
+      tmpl.newWalletRow, tmpl.expired, tmpl.unsupported, tmpl.connect, tmpl.spinner,
+      tmpl.walletState, tmpl.balanceRows, tmpl.walletAddr
     )
-    side.logo.src = Doc.logoPath(side.cfg.symbol)
-    Doc.empty(side.symbol)
-    side.symbol.appendChild(Doc.symbolize(side.cfg.symbol))
+    tmpl.logo.src = Doc.logoPath(cfg.symbol)
+    tmpl.addWalletSymbol.textContent = cfg.symbol.toUpperCase()
+    Doc.empty(tmpl.symbol)
+    tmpl.symbol.appendChild(Doc.symbolize(cfg.symbol))
     // Handle an unsupported asset.
     if (!asset) {
-      Doc.show(side.unsupported)
+      Doc.show(tmpl.unsupported)
       return
     }
-    Doc.show(side.iconBox)
+    Doc.show(iconBox)
     const wallet = asset.wallet
-    side.stateIcons.readWallet(wallet)
+    stateIcons.readWallet(wallet)
     // Handle no wallet configured.
     if (!wallet) {
       if (asset.walletCreationPending) {
-        Doc.show(side.walletPendingRow)
+        Doc.show(tmpl.spinner)
         return
       }
-      Doc.show(side.newWalletRow)
+      Doc.show(tmpl.newWalletRow)
       return
     }
+    Doc.show(tmpl.walletAddr)
     // Parent asset
-    side.parentBal.textContent = '—'
-    if (asset.token) {
-      Doc.show(this.parentRow, side.parentIcon)
-      const { wallet: { balance }, unitInfo, symbol } = app().assets[asset.token.parentID]
-      side.parentBal.textContent = Doc.formatCoinValue(balance.available, unitInfo)
-      side.parentIcon.src = Doc.logoPath(symbol)
-    }
     const bal = wallet.balance
     // Handle not connected and no balance known for the DEX.
     if (!bal && !wallet.running && !wallet.disabled) {
-      Doc.show(side.connect)
+      Doc.show(tmpl.connect)
       return
     }
     // If there is no balance, but the wallet is connected, show the loading
     // icon while we fetch an update.
     if (!bal) {
-      app().fetchBalance(side.id)
-      Doc.show(side.spinner)
+      app().fetchBalance(assetID)
+      Doc.show(tmpl.spinner)
       return
     }
+
     // We have a wallet and a DEX-specific balance. Set all of the fields.
-    Doc.show(side.avail, side.immature, side.locked)
-    side.avail.textContent = Doc.formatCoinValue(bal.available, asset.unitInfo)
-    side.locked.textContent = Doc.formatCoinValue((bal.locked + bal.contractlocked), asset.unitInfo)
-    side.immature.textContent = Doc.formatCoinValue(bal.immature, asset.unitInfo)
+    Doc.show(tmpl.balanceRows)
+    Doc.empty(tmpl.balanceRows)
+    const addRow = (title: string, bal: number, ui: UnitInfo, icon?: PageElement) => {
+      const row = tmpl.balanceRowTmpl.cloneNode(true) as PageElement
+      tmpl.balanceRows.appendChild(row)
+      const balTmpl = Doc.parseTemplate(row)
+      balTmpl.title.textContent = title
+      balTmpl.bal.textContent = Doc.formatCoinValue(bal, ui)
+      if (icon) balTmpl.bal.append(icon)
+    }
+
+    addRow(intl.prep(intl.ID_AVAILABLE), bal.available, asset.unitInfo)
+    addRow(intl.prep(intl.ID_LOCKED), bal.locked + bal.contractlocked, asset.unitInfo)
+    addRow(intl.prep(intl.ID_IMMATURE), bal.immature, asset.unitInfo)
+    if (asset.token) {
+      const { wallet: { balance }, unitInfo, symbol } = app().assets[asset.token.parentID]
+      const icon = document.createElement('img')
+      icon.src = Doc.logoPath(symbol)
+      icon.classList.add('micro-icon')
+      addRow(intl.prep(intl.ID_FEE_BALANCE), balance.available, unitInfo, icon)
+    }
+
     // If the current balance update time is older than an hour, show the
     // expiration icon. Request a balance update, if possible.
     const expired = new Date().getTime() - new Date(bal.stamp).getTime() > anHour
     if (expired && !wallet.disabled) {
-      Doc.show(side.expired)
-      if (wallet.running) app().fetchBalance(side.id)
-    } else Doc.hide(side.expired)
+      Doc.show(tmpl.expired)
+      if (wallet.running) app().fetchBalance(assetID)
+    } else Doc.hide(tmpl.expired)
   }
 
   /* updateParent updates the side's parent asset balance. */
   updateParent (side: BalanceWidgetElement) {
     const { wallet: { balance }, unitInfo, symbol } = app().assets[side.parentID]
-    side.parentBal.textContent = Doc.formatCoinValue(balance.available, unitInfo)
-    side.parentIcon.src = Doc.logoPath(symbol)
+    side.tmpl.parentBal.textContent = Doc.formatCoinValue(balance.available, unitInfo)
+    side.tmpl.parentLogo.src = Doc.logoPath(symbol)
   }
 
   /*
@@ -2788,13 +2664,6 @@ function swapBttns (before: HTMLElement, now: HTMLElement) {
   now.classList.add('selected')
 }
 
-/*
- * updateDataCol sets the textContent of descendent template element.
- */
-function updateDataCol (tr: HTMLElement, col: string, s: string) {
-  Doc.tmplElement(tr, col).textContent = s
-}
-
 /*
  * wireOrder prepares a copy of the order with the options field converted to a
  * string -> string map.
@@ -2943,3 +2812,61 @@ class OrderTableRowManager {
     }
   }
 }
+
+interface ExchangeMarket extends Market {
+  xc: Exchange
+  baseName: string
+  bui: UnitInfo
+}
+
+function sortedMarkets (): ExchangeMarket[] {
+  const mkts: ExchangeMarket[] = []
+  const assets = app().assets
+  const convertMarkets = (xc: Exchange, mkts: Market[]) => {
+    return mkts.map((mkt: Market) => {
+      const a = assets[mkt.baseid]
+      const baseName = a ? a.name : mkt.basesymbol
+      const bui = app().unitInfo(mkt.baseid, xc)
+      return Object.assign({ xc, baseName, bui }, mkt)
+    })
+  }
+  for (const xc of Object.values(app().exchanges)) mkts.push(...convertMarkets(xc, Object.values(xc.markets || {})))
+  mkts.sort((a: ExchangeMarket, b: ExchangeMarket): number => {
+    if (!a.spot) {
+      if (b.spot) return 1 // put b first, since we have the spot
+      // no spots. compare market name then host name
+      if (a.name === b.name) return a.xc.host.localeCompare(b.xc.host)
+      return a.name.localeCompare(b.name)
+    } else if (!b.spot) return -1 // put a first, since we have the spot
+    const [aLots, bLots] = [a.spot.vol24 / a.lotsize, b.spot.vol24 / b.lotsize]
+    return bLots - aLots // whoever has more volume by lot count
+  })
+  return mkts
+}
+
+const FourSigFigs = new Intl.NumberFormat((navigator.languages as string[]), {
+  minimumSignificantDigits: 4,
+  maximumSignificantDigits: 4
+})
+
+const intFormatter = new Intl.NumberFormat((navigator.languages as string[]))
+
+function fourSigFigs (v: number): string {
+  if (v < 100) return FourSigFigs.format(v)
+  return intFormatter.format(Math.round(v))
+}
+
+function setMarketDetails (tmpl: Record<string, PageElement>, mkt: Market) {
+  tmpl.baseIcon.src = Doc.logoPath(mkt.basesymbol)
+  tmpl.quoteIcon.src = Doc.logoPath(mkt.quotesymbol)
+  tmpl.baseSymbol.textContent = mkt.basesymbol.toUpperCase()
+  tmpl.quoteSymbol.textContent = mkt.quotesymbol.toUpperCase()
+}
+
+function setPriceAndChange (tmpl: Record<string, PageElement>, xc: Exchange, mkt: Market) {
+  if (!mkt.spot) return
+  tmpl.price.textContent = fourSigFigs(app().conventionalRate(mkt.baseid, mkt.quoteid, mkt.spot.rate, xc))
+  const sign = mkt.spot.change24 > 0 ? '+' : ''
+  tmpl.change.classList.add(mkt.spot.change24 >= 0 ? 'buycolor' : 'sellcolor')
+  tmpl.change.textContent = `${sign}${(mkt.spot.change24 * 100).toFixed(1)}%`
+}
diff --git a/client/webserver/site/src/js/registry.ts b/client/webserver/site/src/js/registry.ts
index ef28803440..56d35994cb 100644
--- a/client/webserver/site/src/js/registry.ts
+++ b/client/webserver/site/src/js/registry.ts
@@ -495,6 +495,7 @@ export interface Application {
   seedGenTime: number
   user: User
   header: HTMLElement
+  headerSpace: HTMLElement
   walletMap: Record<number, WalletState>
   exchanges: Record<string, Exchange>
   fiatRatesMap: Record<number, number>
@@ -529,7 +530,7 @@ export interface Application {
   order (oid: string): Order | null
   canAccelerateOrder(order: Order): boolean
   unitInfo (assetID: number, xc?: Exchange): UnitInfo
-  conventionalRate (baseID: number, quoteID: number, encRate: number): number
+  conventionalRate (baseID: number, quoteID: number, encRate: number, xc?: Exchange): number
   walletDefinition (assetID: number, walletType: string): WalletDefinition
   currentWalletDefinition (assetID: number): WalletDefinition
   fetchBalance (assetID: number): Promise<WalletBalance>
diff --git a/client/webserver/site/src/js/wallets.ts b/client/webserver/site/src/js/wallets.ts
index b3565f51dd..6317f5d598 100644
--- a/client/webserver/site/src/js/wallets.ts
+++ b/client/webserver/site/src/js/wallets.ts
@@ -1,7 +1,13 @@
 import Doc, { Animation } from './doc'
 import BasePage from './basepage'
 import { postJSON } from './http'
-import { NewWalletForm, WalletConfigForm, UnlockWalletForm, bind as bindForm } from './forms'
+import {
+  NewWalletForm,
+  WalletConfigForm,
+  UnlockWalletForm,
+  DepositAddress,
+  bind as bindForm
+} from './forms'
 import State from './state'
 import * as intl from './locales'
 import * as OrderUtil from './orderutil'
@@ -21,7 +27,6 @@ import {
 
 const animationLength = 300
 const traitRescanner = 1
-const traitNewAddresser = 1 << 1
 const traitLogFiler = 1 << 2
 const traitRecoverer = 1 << 5
 const traitWithdrawer = 1 << 6
@@ -63,6 +68,7 @@ export default class WalletsPage extends BasePage {
   newWalletForm: NewWalletForm
   reconfigForm: WalletConfigForm
   unlockForm: UnlockWalletForm
+  depositAddrForm: DepositAddress
   keyup: (e: KeyboardEvent) => void
   changeWalletPW: boolean
   displayed: HTMLElement
@@ -88,7 +94,6 @@ export default class WalletsPage extends BasePage {
       Doc.bind(el, 'click', () => { this.closePopups() })
     })
     Doc.bind(page.cancelForce, 'click', () => { this.closePopups() })
-    Doc.bind(page.copyAddressBtn, 'click', () => { this.copyAddress() })
 
     this.selectedAssetID = -1
     Doc.cleanTemplates(
@@ -152,7 +157,7 @@ export default class WalletsPage extends BasePage {
     bindForm(page.toggleWalletStatusConfirm, page.toggleWalletStatusSubmit, async () => { this.toggleWalletStatus() })
 
     // New deposit address button.
-    Doc.bind(page.newDepAddrBttn, 'click', async () => { this.newDepositAddress() })
+    this.depositAddrForm = new DepositAddress(page.deposit)
 
     // Clicking on the available amount on the Send form populates the
     // amount field.
@@ -218,20 +223,6 @@ export default class WalletsPage extends BasePage {
     if (this.animation) this.animation.stop()
   }
 
-  async copyAddress () {
-    const page = this.page
-    navigator.clipboard.writeText(page.depositAddress.textContent || '')
-      .then(() => {
-        Doc.show(page.copyAlert)
-        setTimeout(() => {
-          Doc.hide(page.copyAlert)
-        }, 800)
-      })
-      .catch((reason) => {
-        console.error('Unable to copy: ', reason)
-      })
-  }
-
   // stepSend makes a request to get an estimated fee and displays the confirm
   // send form.
   async stepSend () {
@@ -778,35 +769,8 @@ export default class WalletsPage extends BasePage {
 
   /* Display a deposit address. */
   async showDeposit (assetID: number) {
-    const page = this.page
-    Doc.hide(page.depositErr)
-    const box = page.deposit
-    const asset = app().assets[assetID]
-    page.depositLogo.src = Doc.logoPath(asset.symbol)
-    const wallet = app().walletMap[assetID]
-    page.depositName.textContent = asset.name
-    page.depositAddress.textContent = wallet.address
-    page.qrcode.src = `/generateqrcode?address=${wallet.address}`
-    if ((wallet.traits & traitNewAddresser) !== 0) Doc.show(page.newDepAddrBttn)
-    else Doc.hide(page.newDepAddrBttn)
-    this.showForm(box)
-  }
-
-  /* Fetch a new address from the wallet. */
-  async newDepositAddress () {
-    const page = this.page
-    Doc.hide(page.depositErr)
-    const loaded = app().loading(page.deposit)
-    const res = await postJSON('/api/depositaddress', {
-      assetID: this.selectedAssetID
-    })
-    loaded()
-    if (!app().checkResponse(res)) {
-      Doc.showFormError(page.depositErr, res.msg)
-      return
-    }
-    page.depositAddress.textContent = res.address
-    page.qrcode.src = `/generateqrcode?address=${res.address}`
+    this.depositAddrForm.setAsset(assetID)
+    this.showForm(this.page.deposit)
   }
 
   /* Show the form to either send or withdraw funds. */
diff --git a/client/webserver/site/template-builder/main.go b/client/webserver/site/template-builder/main.go
index 89ad2c9f50..b8db5d6691 100644
--- a/client/webserver/site/template-builder/main.go
+++ b/client/webserver/site/template-builder/main.go
@@ -81,7 +81,7 @@ func main() {
 				if !found {
 					replacement, found = enDict[key]
 					if !found {
-						return fmt.Errorf("no translation and no default replacement for %s", key)
+						return fmt.Errorf("no %s translation in %q and no default replacement for %s", lang, baseName, key)
 					}
 					fmt.Printf("Warning: no %s replacement text for key %q, using 'en' value %s \n", lang, key, replacement)
 				}
diff --git a/dex/candles/candles.go b/dex/candles/candles.go
index f80e6995e3..09bac9a2a1 100644
--- a/dex/candles/candles.go
+++ b/dex/candles/candles.go
@@ -107,11 +107,11 @@ func (c *Cache) WireCandles(count int) *msgjson.WireCandles {
 // from that candle is linearly interpreted between the endpoints. The caller is
 // responsible for making sure that dur >> binSize, otherwise the results will
 // be of little value.
-func (c *Cache) Delta(since time.Time) (changePct float64, vol uint64) {
+func (c *Cache) Delta(since time.Time) (changePct float64, vol, high, low uint64) {
 	cutoff := uint64(since.UnixMilli())
 	sz := len(c.Candles)
 	if sz == 0 {
-		return 0, 0
+		return 0, 0, 0, 0
 	}
 	var startRate, endRate uint64
 	for i := 0; i < sz; i++ {
@@ -127,6 +127,13 @@ func (c *Cache) Delta(since time.Time) (changePct float64, vol uint64) {
 			}
 		}
 
+		if low == 0 || (candle.LowRate > 0 && candle.LowRate < low) {
+			low = candle.LowRate
+		}
+		if candle.HighRate > high {
+			high = candle.HighRate
+		}
+
 		if candle.StartStamp <= cutoff && candle.StartRate != 0 {
 			// Interpret the point linearly between the start and end stamps
 			cut := float64(cutoff-candle.StartStamp) / float64(candle.EndStamp-candle.StartStamp)
@@ -147,9 +154,9 @@ func (c *Cache) Delta(since time.Time) (changePct float64, vol uint64) {
 		vol += candle.MatchVolume
 	}
 	if startRate == 0 {
-		return 0, vol
+		return 0, vol, high, low
 	}
-	return (float64(endRate) - float64(startRate)) / float64(startRate), vol
+	return (float64(endRate) - float64(startRate)) / float64(startRate), vol, high, low
 }
 
 // last gets the most recent candle in the cache.
diff --git a/dex/candles/candles_test.go b/dex/candles/candles_test.go
index effcf2cfd7..816be0bd93 100644
--- a/dex/candles/candles_test.go
+++ b/dex/candles/candles_test.go
@@ -173,7 +173,7 @@ func TestDelta(t *testing.T) {
 	check24 := func(expDelta float64, expVol uint64) {
 		t.Helper()
 		high, low := (expDelta + 0.01), (expDelta - 0.01)
-		delta24, vol24 := c.Delta(testTime.Add(-time.Hour * 24))
+		delta24, vol24, _, _ := c.Delta(testTime.Add(-time.Hour * 24))
 		if delta24 < low || delta24 > high {
 			t.Fatalf("wrong delta24. expected %.3f, got, %.3f", expDelta, delta24)
 		}
@@ -231,7 +231,7 @@ func TestDeltaPartialDays(t *testing.T) {
 		StartRate:   50,
 		EndRate:     150,
 	})
-	delta6, vol6 := c.Delta(tNow.Add(-time.Hour * 6))
+	delta6, vol6, _, _ := c.Delta(tNow.Add(-time.Hour * 6))
 	// In the last 6 hours, the rate would be interpreted as going from 125 to
 	// 150, change = 25/125 = 0.20
 	// Note that the cache would never be used with duration < binSize this way
diff --git a/dex/msgjson/types.go b/dex/msgjson/types.go
index a567ac3870..7cd9402ace 100644
--- a/dex/msgjson/types.go
+++ b/dex/msgjson/types.go
@@ -1101,6 +1101,8 @@ type Spot struct {
 	BookVolume uint64  `json:"bookVolume"`
 	Change24   float64 `json:"change24"`
 	Vol24      uint64  `json:"vol24"`
+	High24     uint64  `json:"high24"`
+	Low24      uint64  `json:"low24"`
 }
 
 // CandlesRequest is a data API request for market history.
diff --git a/server/apidata/apidata.go b/server/apidata/apidata.go
index 16ff35bed6..2efacb58d3 100644
--- a/server/apidata/apidata.go
+++ b/server/apidata/apidata.go
@@ -111,12 +111,12 @@ func (s *DataAPI) ReportEpoch(base, quote uint32, epochIdx uint64, stats *matche
 	}
 
 	// Add the candlestick.
-	addCandle := func() (change24 float64, vol24 uint64, err error) {
+	addCandle := func() (change24 float64, vol24, high24, low24 uint64, err error) {
 		s.cacheMtx.Lock()
 		defer s.cacheMtx.Unlock()
 		mktCaches := s.marketCaches[mktName]
 		if mktCaches == nil {
-			return 0, 0, fmt.Errorf("unknown market %q", mktName)
+			return 0, 0, 0, 0, fmt.Errorf("unknown market %q", mktName)
 		}
 		epochDur := s.epochDurations[mktName]
 		startStamp := epochIdx * epochDur
@@ -140,13 +140,13 @@ func (s *DataAPI) ReportEpoch(base, quote uint32, epochIdx uint64, stats *matche
 			cache.Add(candle)
 		}
 		if cache5min == nil {
-			return 0, 0, fmt.Errorf("no 5 minute cache")
+			return 0, 0, 0, 0, fmt.Errorf("no 5 minute cache")
 		}
-		change24, vol24 = cache5min.Delta(time.Now().Add(-time.Hour * 24))
+		change24, vol24, high24, low24 = cache5min.Delta(time.Now().Add(-time.Hour * 24))
 		return
 	}
 
-	change24, vol24, err := addCandle()
+	change24, vol24, high24, low24, err := addCandle()
 	if err != nil {
 		return nil, err
 	}
@@ -159,6 +159,8 @@ func (s *DataAPI) ReportEpoch(base, quote uint32, epochIdx uint64, stats *matche
 		Rate:     stats.EndRate,
 		Change24: change24,
 		Vol24:    vol24,
+		High24:   high24,
+		Low24:    low24,
 	}
 	s.spotsMtx.Lock()
 	s.spots[mktName], err = json.Marshal(spot)