diff --git a/public/css/main.css b/public/css/main.css
index 11cd811..4531784 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -41,12 +41,15 @@ body[data-theme=dark] * {
   --text-color: 230, 230, 230;
   --text-color-light: 170, 170, 170;
   --background-color: 10, 10, 10;
-  --foreground-color: rgb(20, 20, 20);
+  --foreground-color: rgb(24, 24, 24);
   --danger-color: rgb(255, 106, 106);
   --green: #00e676;
   --yellow: #ffd13a;
   --loan-color: rgb(255, 232, 170);
 }
+body[data-theme=dark] sm-popup::part(popup) {
+  background-color: var(--foreground-color);
+}
 
 p,
 strong {
@@ -132,7 +135,7 @@ a:any-link:focus-visible {
 }
 
 sm-input {
-  --border-radius: 0.5rem;
+  --border-radius: 0.3rem;
   --background: var(--accent-color--light);
 }
 
@@ -145,6 +148,9 @@ sm-button[variant=primary] .icon {
 sm-button[disabled] .icon {
   fill: rgba(var(--text-color), 0.6);
 }
+sm-button.uppercase {
+  letter-spacing: 0.05em;
+}
 
 ul {
   list-style: none;
@@ -400,6 +406,10 @@ ul {
   margin-left: auto;
 }
 
+#prompt_message {
+  margin-bottom: 1.5rem;
+}
+
 button:active,
 .button:active,
 .interact:active {
@@ -622,16 +632,18 @@ sm-option {
   min-width: 8ch;
 }
 
-#orders_section {
-  padding: 1.5rem 0;
+#my_orders_section,
+#market_orders_section {
+  padding-top: 1rem;
 }
-#orders_section .icon {
+#my_orders_section .icon,
+#market_orders_section .icon {
   height: 1.2rem;
   width: 1.2rem;
 }
 
-#orders_section__header {
-  min-height: 2.8rem;
+.orders_section__header {
+  height: 2.4rem;
   padding: 0 1.5rem;
 }
 
@@ -648,18 +660,9 @@ sm-option {
   --padding: 0.8rem 0;
 }
 
-.table {
-  display: grid;
-}
-.table__header {
-  color: rgba(var(--text-color), 0.8);
-  font-size: 0.8rem;
-}
-.table__row {
+.list__item {
   padding: 0.5rem 1.5rem;
   display: grid;
-  grid-template-columns: -webkit-min-content repeat(3, 1fr) -webkit-min-content;
-  grid-template-columns: min-content repeat(3, 1fr) min-content;
 }
 
 .order-card {
@@ -674,8 +677,10 @@ sm-option {
           align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 1.5rem 0.5rem 0.5rem;
+  grid-template-columns: -webkit-min-content repeat(3, 1fr) -webkit-min-content;
+  grid-template-columns: min-content repeat(3, 1fr) min-content;
 }
-.order-card[data-type=buy] .order-card__type, .order-card[data-type=sell] .order-card__type {
+.order-card__type {
   font-size: 0.9rem;
   font-weight: 500;
   margin-bottom: 0.3rem;
@@ -719,6 +724,86 @@ sm-option {
   margin-left: 0.3rem;
 }
 
+.transaction-card {
+  grid-template-columns: repeat(3, 1fr) 2rem;
+}
+.transaction-card__type {
+  font-size: 0.9rem;
+  font-weight: 500;
+  margin-bottom: 0.3rem;
+}
+.transaction-card[data-type=Bought] .transaction-card__type {
+  color: var(--green);
+}
+.transaction-card[data-type=Sold] .transaction-card__type {
+  color: var(--danger-color);
+}
+.transaction-card__total {
+  font-weight: 700;
+  font-size: 0.9rem;
+  color: rgba(var(--text-color), 0.8);
+}
+.transaction-card__quantity, .transaction-card__price {
+  font-size: 0.9rem;
+  color: rgba(var(--text-color), 0.9);
+}
+
+#market_orders_list .list__header {
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+#market_orders_list .list__header div {
+  padding: 0.5rem 0;
+}
+#market_orders_list.open {
+  display: grid;
+  gap: 0.5rem 0;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto 1fr;
+  padding: 0 1rem;
+}
+#market_orders_list.open .list__header {
+  grid-template-columns: repeat(4, 1fr);
+  grid-column: span 2;
+}
+#market_orders_list.open .list__header div {
+  padding: 0.5rem;
+}
+#market_orders_list.open .list__header div:nth-of-type(even) {
+  text-align: right;
+}
+#market_orders_list:not(.open) .list__header {
+  margin-bottom: 0.5rem;
+  padding: 0 1.5rem;
+  grid-template-columns: repeat(3, 1fr) 2rem;
+}
+
+.market-order-card {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+}
+.market-order-card div {
+  padding: 0.5rem;
+}
+.market-order-card--buy div {
+  color: var(--green);
+}
+.market-order-card--buy div:last-of-type {
+  text-align: right;
+}
+.market-order-card--sell div {
+  color: var(--danger-color);
+  grid-row: 1/2;
+}
+.market-order-card--sell div:first-of-type {
+  text-align: right;
+  grid-column: 2/3;
+}
+.market-order-card--sell div:last-of-type {
+  grid-column: 1/2;
+}
+
 #user_section {
   gap: 1.5rem;
   padding: 1.5rem;
@@ -790,7 +875,7 @@ sm-option {
   text-align: right;
 }
 
-.loader-button-wrapper {
+.stateful-button-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -802,8 +887,8 @@ sm-option {
       -ms-flex-align: center;
           align-items: center;
 }
-.loader-button-wrapper sm-button,
-.loader-button-wrapper slide-button {
+.stateful-button-wrapper sm-button,
+.stateful-button-wrapper slide-button {
   width: 100%;
   z-index: 1;
   -webkit-transition: -webkit-clip-path 0.3s;
@@ -813,16 +898,104 @@ sm-option {
   -webkit-clip-path: circle(100%);
           clip-path: circle(100%);
 }
-.loader-button-wrapper sm-button.clip,
-.loader-button-wrapper slide-button.clip {
+.stateful-button-wrapper sm-button.clip,
+.stateful-button-wrapper slide-button.clip {
   pointer-events: none;
   -webkit-clip-path: circle(0);
           clip-path: circle(0);
 }
-.loader-button-wrapper sm-spinner {
+.stateful-button-wrapper sm-spinner {
   position: absolute;
 }
 
+.stateful-result {
+  overflow: hidden;
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 100%;
+  width: 100%;
+  left: 0;
+}
+.stateful-result > * {
+  position: absolute;
+}
+.stateful-result--success .result__background {
+  background-color: var(--green);
+}
+.stateful-result--failure .result__background {
+  background-color: var(--danger-color);
+}
+.stateful-result .icon-wrapper {
+  -webkit-animation: pop 0.4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+          animation: pop 0.4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.stateful-result .icon {
+  height: 1.5rem;
+  width: 1.5rem;
+  fill: rgba(var(--background-color), 1);
+}
+.stateful-result span {
+  font-weight: 500;
+  color: rgba(var(--background-color), 1);
+}
+.stateful-result .result__background {
+  -webkit-animation: ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+          animation: ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.result__background {
+  border-radius: 0.3rem;
+  height: 100%;
+  width: 100%;
+  -webkit-clip-path: circle(10%);
+          clip-path: circle(10%);
+}
+
+@-webkit-keyframes pop {
+  from {
+    opacity: 0;
+    -webkit-transform: translateY(2rem);
+            transform: translateY(2rem);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+}
+
+@keyframes pop {
+  from {
+    opacity: 0;
+    -webkit-transform: translateY(2rem);
+            transform: translateY(2rem);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+}
+@-webkit-keyframes ripple-reveal {
+  to {
+    -webkit-clip-path: circle(100%);
+            clip-path: circle(100%);
+  }
+}
+@keyframes ripple-reveal {
+  to {
+    -webkit-clip-path: circle(100%);
+            clip-path: circle(100%);
+  }
+}
 @media screen and (max-width: 40rem) {
   sm-button {
     --padding: 0.9rem 1.6rem;
@@ -868,15 +1041,16 @@ sm-option {
     padding: 1.5vmax;
     gap: 1rem;
   }
-  #home > * {
-    border-radius: 0.5rem;
-    background-color: var(--foreground-color);
-    border: solid thin rgba(var(--text-color), 0.1);
-  }
 
   .hide-on-desktop {
     display: none;
   }
+
+  .card {
+    border-radius: 0.5rem;
+    background-color: var(--foreground-color);
+    border: solid thin rgba(var(--text-color), 0.1);
+  }
 }
 @media screen and (min-width: 48rem) {
   #home {
@@ -888,6 +1062,12 @@ sm-option {
   #orders_section {
     grid-row: span 2;
   }
+
+  #orders_list,
+#market_orders_list {
+    height: 36vmin;
+    overflow-y: auto;
+  }
 }
 @media screen and (min-width: 72rem) {
   .page-layout {
@@ -957,4 +1137,13 @@ sm-option {
     -webkit-transform: translateX(0);
             transform: translateX(0);
   }
+
+  .transaction-card button {
+    opacity: 0;
+    -webkit-transition: opacity 0.3s;
+    transition: opacity 0.3s;
+  }
+  .transaction-card:hover button {
+    opacity: 1;
+  }
 }
\ No newline at end of file
diff --git a/public/css/main.min.css b/public/css/main.min.css
index 376bef6..6645dd4 100644
--- a/public/css/main.min.css
+++ b/public/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem, 1.2vmax, 1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body,body *{--accent-color: #504dff;--accent-color--light: #eeeeff;--text-color: 36, 36, 36;--background-color: 255, 255, 255;--foreground-color: rgb(250, 252, 255);--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: #f3a600;--loan-color: rgb(255, 171, 93);scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color: #a3a1ff;--accent-color--light: rgba(142, 140, 255, 0.06);--text-color: 230, 230, 230;--text-color-light: 170, 170, 170;--background-color: 10, 10, 10;--foreground-color: rgb(20, 20, 20);--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: #ffd13a;--loan-color: rgb(255, 232, 170)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{-webkit-box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset;box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:.9rem;font-weight:500}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{--border-radius: 0.5rem;--background: var(--accent-color--light)}sm-button{--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.align-self-center{-ms-flex-item-align:center;align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.w-100{width:100%}.interact{position:relative;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.8)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}button:active,.button:active,.interact:active{-webkit-transform:scale(0.96);transform:scale(0.96)}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){-ms-flex-line-pack:start;align-content:flex-start}.logo{display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}strip-select{--gap: 0;background-color:var(--accent-color--light);border-radius:.3rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.3rem 0 0 0.3rem}strip-option:last-of-type{--border-radius: 0 0.3rem 0.3rem 0}sm-select,sm-option{font-size:.9rem}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{-ms-flex-line-pack:start;align-content:flex-start;text-align:center;gap:1rem}#sign_in,#sign_up{grid-template-rows:auto 1fr;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#sign_in section,#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem, 100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_in header,#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#loading{place-content:center;text-align:center}#loading sm-spinner{margin-bottom:1.5rem}#home{height:100%;display:grid;grid-template-columns:minmax(0, 1fr)}#main_header{padding:1.8rem 1.5rem;display:grid;gap:1rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:1fr auto}#trade_form{--width: min(24rem, 100%);-ms-flex-item-align:start;align-self:flex-start;padding:1rem 1.5rem}#quantity_selector .button{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#orders_section{padding:1.5rem 0}#orders_section .icon{height:1.2rem;width:1.2rem}#orders_section__header{min-height:2.8rem;padding:0 1.5rem}#orders_section__header--primary{-ms-flex-wrap:wrap;flex-wrap:wrap;z-index:1}#orders_section__header--primary sm-tab-header{--gap: 1.5rem}#orders_section__header--primary sm-tab{font-size:.9rem;--padding: 0.8rem 0}.table{display:grid}.table__header{color:rgba(var(--text-color), 0.8);font-size:.8rem}.table__row{padding:.5rem 1.5rem;display:grid;grid-template-columns:-webkit-min-content repeat(3, 1fr) -webkit-min-content;grid-template-columns:min-content repeat(3, 1fr) min-content}.order-card{position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.5rem;padding:.5rem 1.5rem .5rem .5rem}.order-card[data-type=buy] .order-card__type,.order-card[data-type=sell] .order-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.order-card[data-type=buy] .order-card__type{color:var(--green)}.order-card[data-type=sell] .order-card__type{color:var(--danger-color)}.order-card--selected{background-color:rgba(var(--text-color), 0.08)}.order-card--selected .cancel-order{visibility:hidden;pointer-events:none}.order-card sm-checkbox{--height: 1rem;--width: 1rem;padding:1rem;cursor:pointer;-webkit-tap-highlight-color:transparent}.order-card__quantity,.order-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.order-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.cancel-order{-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.4rem .6rem}.cancel-order span{margin-left:.3rem}#user_section{gap:1.5rem;padding:1.5rem;-ms-flex-line-pack:start;align-content:flex-start}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{-webkit-box-flex:1;-ms-flex:1;flex:1}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.balance-card{display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.3rem 1rem;padding:.5rem 0;border-radius:.5rem}.balance-card.is-locked{grid-template-columns:auto 1fr;gap:1rem}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto}.balance-card__icon{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:span 2;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}.loader-button-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.loader-button-wrapper sm-button,.loader-button-wrapper slide-button{width:100%;z-index:1;-webkit-transition:-webkit-clip-path .3s;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.loader-button-wrapper sm-button.clip,.loader-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.loader-button-wrapper sm-spinner{position:absolute}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}#home{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:1.5vmax;gap:1rem}#home>*{border-radius:.5rem;background-color:var(--foreground-color);border:solid thin rgba(var(--text-color), 0.1)}.hide-on-desktop{display:none}}@media screen and (min-width: 48rem){#home{grid-template-rows:-webkit-min-content 1fr;grid-template-rows:min-content 1fr;grid-template-columns:24rem minmax(0, 1fr)}#orders_section{grid-row:span 2}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 80vw 1fr}#home{grid-template-columns:24rem minmax(0, 1fr) 20rem}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact{-webkit-transition:background-color .3s,-webkit-transform .3s;transition:background-color .3s,-webkit-transform .3s;transition:background-color .3s,transform .3s;transition:background-color .3s,transform .3s,-webkit-transform .3s}.interact:hover{background-color:var(--accent-color--light)}.order-card .cancel-order{justify-self:flex-end;overflow:hidden}.order-card .cancel-order .icon,.order-card .cancel-order span{-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s;transition:opacity .3s,transform .3s,-webkit-transform .3s}.order-card .cancel-order .icon{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.order-card .cancel-order span{-webkit-transform:translateX(100%);transform:translateX(100%);opacity:0}.order-card:hover .cancel-order .icon,.order-card:focus-within .cancel-order .icon{opacity:1}.order-card .cancel-order:hover .icon,.order-card .cancel-order:hover span{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}
\ No newline at end of file
+*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem, 1.2vmax, 1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body,body *{--accent-color: #504dff;--accent-color--light: #eeeeff;--text-color: 36, 36, 36;--background-color: 255, 255, 255;--foreground-color: rgb(250, 252, 255);--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: #f3a600;--loan-color: rgb(255, 171, 93);scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color: #a3a1ff;--accent-color--light: rgba(142, 140, 255, 0.06);--text-color: 230, 230, 230;--text-color-light: 170, 170, 170;--background-color: 10, 10, 10;--foreground-color: rgb(24, 24, 24);--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: #ffd13a;--loan-color: rgb(255, 232, 170)}body[data-theme=dark] sm-popup::part(popup){background-color:var(--foreground-color)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{-webkit-box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset;box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:.9rem;font-weight:500}.button{white-space:nowrap;padding:.6rem 1rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06);color:rgba(var(--text-color), 0.8);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.button--primary{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input{--border-radius: 0.3rem;--background: var(--accent-color--light)}sm-button{--padding: 0.7rem 1rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.uppercase{letter-spacing:.05em}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.align-self-center{-ms-flex-item-align:center;align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.w-100{width:100%}.interact{position:relative;cursor:pointer;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.8)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}button:active,.button:active,.interact:active{-webkit-transform:scale(0.96);transform:scale(0.96)}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){-ms-flex-line-pack:start;align-content:flex-start}.logo{display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}strip-select{--gap: 0;background-color:var(--accent-color--light);border-radius:.3rem}strip-option{font-weight:500;font-size:.8rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}strip-option:first-of-type{--border-radius: 0.3rem 0 0 0.3rem}strip-option:last-of-type{--border-radius: 0 0.3rem 0.3rem 0}sm-select,sm-option{font-size:.9rem}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{-ms-flex-line-pack:start;align-content:flex-start;text-align:center;gap:1rem}#sign_in,#sign_up{grid-template-rows:auto 1fr;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#sign_in section,#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem, 100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_in header,#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#loading{place-content:center;text-align:center}#loading sm-spinner{margin-bottom:1.5rem}#home{height:100%;display:grid;grid-template-columns:minmax(0, 1fr)}#main_header{padding:1.8rem 1.5rem;display:grid;gap:1rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:1fr auto}#trade_form{--width: min(24rem, 100%);-ms-flex-item-align:start;align-self:flex-start;padding:1rem 1.5rem}#quantity_selector .button{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:.5rem .6rem;margin-left:.5rem}#quantity_type{font-size:.8rem;padding-right:.5rem;border-right:thin solid rgba(var(--text-color), 0.3);margin-right:auto;color:rgba(var(--text-color), 0.8);line-height:1.5;font-weight:500;min-width:8ch}#my_orders_section,#market_orders_section{padding-top:1rem}#my_orders_section .icon,#market_orders_section .icon{height:1.2rem;width:1.2rem}.orders_section__header{height:2.4rem;padding:0 1.5rem}#orders_section__header--primary{-ms-flex-wrap:wrap;flex-wrap:wrap;z-index:1}#orders_section__header--primary sm-tab-header{--gap: 1.5rem}#orders_section__header--primary sm-tab{font-size:.9rem;--padding: 0.8rem 0}.list__item{padding:.5rem 1.5rem;display:grid}.order-card{position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.5rem;padding:.5rem 1.5rem .5rem .5rem;grid-template-columns:-webkit-min-content repeat(3, 1fr) -webkit-min-content;grid-template-columns:min-content repeat(3, 1fr) min-content}.order-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.order-card[data-type=buy] .order-card__type{color:var(--green)}.order-card[data-type=sell] .order-card__type{color:var(--danger-color)}.order-card--selected{background-color:rgba(var(--text-color), 0.08)}.order-card--selected .cancel-order{visibility:hidden;pointer-events:none}.order-card sm-checkbox{--height: 1rem;--width: 1rem;padding:1rem;cursor:pointer;-webkit-tap-highlight-color:transparent}.order-card__quantity,.order-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.order-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.cancel-order{-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:.4rem .6rem}.cancel-order span{margin-left:.3rem}.transaction-card{grid-template-columns:repeat(3, 1fr) 2rem}.transaction-card__type{font-size:.9rem;font-weight:500;margin-bottom:.3rem}.transaction-card[data-type=Bought] .transaction-card__type{color:var(--green)}.transaction-card[data-type=Sold] .transaction-card__type{color:var(--danger-color)}.transaction-card__total{font-weight:700;font-size:.9rem;color:rgba(var(--text-color), 0.8)}.transaction-card__quantity,.transaction-card__price{font-size:.9rem;color:rgba(var(--text-color), 0.9)}#market_orders_list .list__header{font-size:.8rem;font-weight:500}#market_orders_list .list__header div{padding:.5rem 0}#market_orders_list.open{display:grid;gap:.5rem 0;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;padding:0 1rem}#market_orders_list.open .list__header{grid-template-columns:repeat(4, 1fr);grid-column:span 2}#market_orders_list.open .list__header div{padding:.5rem}#market_orders_list.open .list__header div:nth-of-type(even){text-align:right}#market_orders_list:not(.open) .list__header{margin-bottom:.5rem;padding:0 1.5rem;grid-template-columns:repeat(3, 1fr) 2rem}.market-order-card{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.market-order-card div{padding:.5rem}.market-order-card--buy div{color:var(--green)}.market-order-card--buy div:last-of-type{text-align:right}.market-order-card--sell div{color:var(--danger-color);grid-row:1/2}.market-order-card--sell div:first-of-type{text-align:right;grid-column:2/3}.market-order-card--sell div:last-of-type{grid-column:1/2}#user_section{gap:1.5rem;padding:1.5rem;-ms-flex-line-pack:start;align-content:flex-start}.wallet_actions__wrapper{grid-column:span 3;gap:.5rem;margin-top:.5rem}.wallet_actions__wrapper .button{-webkit-box-flex:1;-ms-flex:1;flex:1}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);margin-bottom:.2rem}.balance-card{display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.3rem 1rem;padding:.5rem 0;border-radius:.5rem}.balance-card.is-locked{grid-template-columns:auto 1fr;gap:1rem}.balance-card:not(.is-locked){grid-template-columns:auto 1fr auto}.balance-card__icon{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.9rem;font-weight:500}.balance-card__amount-wrapper{grid-column:span 2;gap:.3rem 1rem;grid-template-columns:1fr 1fr}.balance-card__amount-wrapper>:nth-child(even){text-align:right}.stateful-button-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.stateful-button-wrapper sm-button,.stateful-button-wrapper slide-button{width:100%;z-index:1;-webkit-transition:-webkit-clip-path .3s;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.stateful-button-wrapper sm-button.clip,.stateful-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.stateful-button-wrapper sm-spinner{position:absolute}.stateful-result{overflow:hidden;position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;width:100%;left:0}.stateful-result>*{position:absolute}.stateful-result--success .result__background{background-color:var(--green)}.stateful-result--failure .result__background{background-color:var(--danger-color)}.stateful-result .icon-wrapper{-webkit-animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.stateful-result .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}.stateful-result span{font-weight:500;color:rgba(var(--background-color), 1)}.stateful-result .result__background{-webkit-animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}.result__background{border-radius:.3rem;height:100%;width:100%;-webkit-clip-path:circle(10%);clip-path:circle(10%)}@-webkit-keyframes pop{from{opacity:0;-webkit-transform:translateY(2rem);transform:translateY(2rem)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes pop{from{opacity:0;-webkit-transform:translateY(2rem);transform:translateY(2rem)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@keyframes ripple-reveal{to{-webkit-clip-path:circle(100%);clip-path:circle(100%)}}@media screen and (max-width: 40rem){sm-button{--padding: 0.9rem 1.6rem}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}.popup__header{padding:1rem 1.5rem 0 .5rem}#confirmation_popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}#home{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:1.5vmax;gap:1rem}.hide-on-desktop{display:none}.card{border-radius:.5rem;background-color:var(--foreground-color);border:solid thin rgba(var(--text-color), 0.1)}}@media screen and (min-width: 48rem){#home{grid-template-rows:-webkit-min-content 1fr;grid-template-rows:min-content 1fr;grid-template-columns:24rem minmax(0, 1fr)}#orders_section{grid-row:span 2}#orders_list,#market_orders_list{height:36vmin;overflow-y:auto}}@media screen and (min-width: 72rem){.page-layout{grid-template-columns:1fr 80vw 1fr}#home{grid-template-columns:24rem minmax(0, 1fr) 20rem}}@media screen and (min-width: 120rem){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact{-webkit-transition:background-color .3s,-webkit-transform .3s;transition:background-color .3s,-webkit-transform .3s;transition:background-color .3s,transform .3s;transition:background-color .3s,transform .3s,-webkit-transform .3s}.interact:hover{background-color:var(--accent-color--light)}.order-card .cancel-order{justify-self:flex-end;overflow:hidden}.order-card .cancel-order .icon,.order-card .cancel-order span{-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s;transition:opacity .3s,transform .3s,-webkit-transform .3s}.order-card .cancel-order .icon{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.order-card .cancel-order span{-webkit-transform:translateX(100%);transform:translateX(100%);opacity:0}.order-card:hover .cancel-order .icon,.order-card:focus-within .cancel-order .icon{opacity:1}.order-card .cancel-order:hover .icon,.order-card .cancel-order:hover span{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}.transaction-card button{opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}.transaction-card:hover button{opacity:1}}
\ No newline at end of file
diff --git a/public/css/main.scss b/public/css/main.scss
index 422f81f..8f03536 100644
--- a/public/css/main.scss
+++ b/public/css/main.scss
@@ -42,12 +42,15 @@ body[data-theme="dark"] {
     --text-color: 230, 230, 230;
     --text-color-light: 170, 170, 170;
     --background-color: 10, 10, 10;
-    --foreground-color: rgb(20, 20, 20);
+    --foreground-color: rgb(24, 24, 24);
     --danger-color: rgb(255, 106, 106);
     --green: #00e676;
     --yellow: #ffd13a;
     --loan-color: rgb(255, 232, 170);
   }
+  sm-popup::part(popup) {
+    background-color: var(--foreground-color);
+  }
 }
 
 p,
@@ -113,7 +116,7 @@ a:any-link:focus-visible {
 }
 
 sm-input {
-  --border-radius: 0.5rem;
+  --border-radius: 0.3rem;
   --background: var(--accent-color--light);
 }
 sm-button {
@@ -129,6 +132,9 @@ sm-button {
       fill: rgba(var(--text-color), 0.6);
     }
   }
+  &.uppercase {
+    letter-spacing: 0.05em;
+  }
 }
 ul {
   list-style: none;
@@ -355,6 +361,9 @@ ul {
     }
   }
 }
+#prompt_message {
+  margin-bottom: 1.5rem;
+}
 
 button:active,
 .button:active,
@@ -548,15 +557,16 @@ sm-option {
   font-weight: 500;
   min-width: 8ch;
 }
-#orders_section {
-  padding: 1.5rem 0;
+#my_orders_section,
+#market_orders_section {
+  padding-top: 1rem;
   .icon {
     height: 1.2rem;
     width: 1.2rem;
   }
 }
-#orders_section__header {
-  min-height: 2.8rem;
+.orders_section__header {
+  height: 2.4rem;
   padding: 0 1.5rem;
 }
 #orders_section__header--primary {
@@ -571,17 +581,9 @@ sm-option {
   }
 }
 
-.table {
+.list__item {
+  padding: 0.5rem 1.5rem;
   display: grid;
-  &__header {
-    color: rgba(var(--text-color), 0.8);
-    font-size: 0.8rem;
-  }
-  &__row {
-    padding: 0.5rem 1.5rem;
-    display: grid;
-    grid-template-columns: min-content repeat(3, 1fr) min-content;
-  }
 }
 .order-card {
   position: relative;
@@ -590,8 +592,8 @@ sm-option {
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 1.5rem 0.5rem 0.5rem;
-  &[data-type="buy"] &__type,
-  &[data-type="sell"] &__type {
+  grid-template-columns: min-content repeat(3, 1fr) min-content;
+  &__type {
     font-size: 0.9rem;
     font-weight: 500;
     margin-bottom: 0.3rem;
@@ -637,6 +639,94 @@ sm-option {
   }
 }
 
+.transaction-card {
+  grid-template-columns: repeat(3, 1fr) 2rem;
+  &__type {
+    font-size: 0.9rem;
+    font-weight: 500;
+    margin-bottom: 0.3rem;
+  }
+  &[data-type="Bought"] &__type {
+    color: var(--green);
+  }
+  &[data-type="Sold"] &__type {
+    color: var(--danger-color);
+  }
+  &__total {
+    font-weight: 700;
+    font-size: 0.9rem;
+    color: rgba(var(--text-color), 0.8);
+  }
+  &__quantity,
+  &__price {
+    font-size: 0.9rem;
+    color: rgba(var(--text-color), 0.9);
+  }
+}
+
+#market_orders_list {
+  .list__header {
+    font-size: 0.8rem;
+    font-weight: 500;
+    div {
+      padding: 0.5rem 0;
+    }
+  }
+  &.open {
+    display: grid;
+    gap: 0.5rem 0;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto 1fr;
+    padding: 0 1rem;
+    .list__header {
+      grid-template-columns: repeat(4, 1fr);
+      grid-column: span 2;
+      div {
+        &:nth-of-type(even) {
+          text-align: right;
+        }
+        padding: 0.5rem;
+      }
+    }
+  }
+  &:not(.open) {
+    .list__header {
+      margin-bottom: 0.5rem;
+      padding: 0 1.5rem;
+      grid-template-columns: repeat(3, 1fr) 2rem;
+    }
+  }
+}
+.market-order-card {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+  div {
+    padding: 0.5rem;
+  }
+  &--buy {
+    div {
+      color: var(--green);
+      &:last-of-type {
+        text-align: right;
+      }
+    }
+  }
+  &--sell {
+    div {
+      color: var(--danger-color);
+      grid-row: 1/2;
+      &:first-of-type {
+        text-align: right;
+        grid-column: 2/3;
+      }
+      &:last-of-type {
+        grid-column: 1/2;
+      }
+    }
+  }
+}
+
 #user_section {
   gap: 1.5rem;
   padding: 1.5rem;
@@ -696,7 +786,7 @@ sm-option {
     }
   }
 }
-.loader-button-wrapper {
+.stateful-button-wrapper {
   display: flex;
   position: relative;
   justify-content: center;
@@ -716,6 +806,65 @@ sm-option {
     position: absolute;
   }
 }
+.stateful-result {
+  overflow: hidden;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  & > * {
+    position: absolute;
+  }
+  &--success {
+    .result__background {
+      background-color: var(--green);
+    }
+  }
+  &--failure {
+    .result__background {
+      background-color: var(--danger-color);
+    }
+  }
+  .icon-wrapper {
+    animation: pop 0.4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+  .icon {
+    height: 1.5rem;
+    width: 1.5rem;
+    fill: rgba(var(--background-color), 1);
+  }
+  span {
+    font-weight: 500;
+    color: rgba(var(--background-color), 1);
+  }
+  .result__background {
+    animation: ripple-reveal 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+}
+.result__background {
+  border-radius: 0.3rem;
+  height: 100%;
+  width: 100%;
+  clip-path: circle(10%);
+}
+@keyframes pop {
+  from {
+    opacity: 0;
+    transform: translateY(2rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes ripple-reveal {
+  to {
+    clip-path: circle(100%);
+  }
+}
 @media screen and (max-width: 40rem) {
   sm-button {
     --padding: 0.9rem 1.6rem;
@@ -753,15 +902,15 @@ sm-option {
     align-items: flex-start;
     padding: 1.5vmax;
     gap: 1rem;
-    & > * {
-      border-radius: 0.5rem;
-      background-color: var(--foreground-color);
-      border: solid thin rgba(var(--text-color), 0.1);
-    }
   }
   .hide-on-desktop {
     display: none;
   }
+  .card {
+    border-radius: 0.5rem;
+    background-color: var(--foreground-color);
+    border: solid thin rgba(var(--text-color), 0.1);
+  }
 }
 @media screen and (min-width: 48rem) {
   #home {
@@ -771,6 +920,11 @@ sm-option {
   #orders_section {
     grid-row: span 2;
   }
+  #orders_list,
+  #market_orders_list {
+    height: 36vmin;
+    overflow-y: auto;
+  }
 }
 @media screen and (max-width: 64rem) {
 }
@@ -840,4 +994,13 @@ sm-option {
       }
     }
   }
+  .transaction-card {
+    button {
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    &:hover button {
+      opacity: 1;
+    }
+  }
 }
diff --git a/public/index.html b/public/index.html
index f0eab01..35a0c85 100644
--- a/public/index.html
+++ b/public/index.html
@@ -148,7 +148,7 @@
         <h4>Loading RanchiMall Market</h4>
     </article>
     <article id="home" class="page">
-        <section>
+        <section class="card">
             <header id="main_header">
                 <div class="logo">
                     <svg class="main-logo" viewBox="0 0 27.25 32">
@@ -170,10 +170,12 @@
                         <strip-option value="sell">Sell</strip-option>
                     </strip-select>
                 </div>
-                <sm-input id="get_price" variant="outlined" placeholder="Max price" type="number" step="0.00000001"
+                <sm-input id="get_price" variant="outlined" placeholder="Max price (₹)" type="number" step="0.00001"
                     required hiderequired animate>
                 </sm-input>
-                <sm-input id="get_quantity" variant="outlined" placeholder="Quantity" type="number" step="0.00000001"
+                <sm-input id="get_quantity" variant="outlined" placeholder="Quantity (FLO)" type="number"
+                    step="0.00000001" required hiderequired animate></sm-input>
+                <sm-input id="get_total" variant="outlined" placeholder="Total (₹)" type="number" min="1" step="0.01"
                     required hiderequired animate>
                 </sm-input>
                 <div id="quantity_selector" class="flex align-center">
@@ -183,62 +185,58 @@
                     <button class="button" value="75">75%</button>
                     <button class="button" value="100">100%</button>
                 </div>
-                <sm-button id="trade_button" class="uppercase" variant="primary" onclick="tradeFlo()">BUY</sm-button>
+                <div id="trade_button_wrapper" class="stateful-button-wrapper flex align-center justify-center">
+                    <sm-button id="trade_button" class="uppercase w-100" variant="primary" onclick="tradeFlo()">BUY FLO
+                    </sm-button>
+                </div>
             </sm-form>
         </section>
-        <section id="orders_section" class="grid gap-1-5">
-            <div id="orders_section__header" class="flex">
-                <div id="orders_section__header--primary" class="flex w-100 align-center space-between">
-                    <sm-tab-header target="orders_tab">
-                        <sm-tab>My orders</sm-tab>
-                        <sm-tab>Market orders</sm-tab>
-                    </sm-tab-header>
-                    <sm-select id="orders_scope_selector" class="tab" align-select="right">
-                        <sm-option value="active" selected>Open</sm-option>
-                        <sm-option value="completed">Completed</sm-option>
-                    </sm-select>
-                </div>
-                <div id="orders_section__header--secondary"
-                    class="flex w-100 align-center space-between hide-completely">
-                    <button class="" onclick="clearSelection()" title="Clear all selection">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" height="24px"
-                            viewBox="0 0 24 24" width="24px">
-                            <path d="M0 0h24v24H0V0z" fill="none" />
-                            <path
-                                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
-                        </svg>
-                        <span id="selected_orders"></span>
-                    </button>
-                    <div class="options">
-                        <button class="button" title="Cancel selected orders" onclick="cancelAll()">
-                            Cancel selected
+        <section id="orders_section" class="grid gap-1">
+            <section id="my_orders_section" class="grid gap-1 card">
+                <div id="my_orders_section__header" class="orders_section__header flex">
+                    <div id="orders_section__header--primary" class="flex w-100 align-center space-between">
+                        <h4>
+                            My orders
+                        </h4>
+                        <strip-select id="my_orders_category_selector" class="tab">
+                            <strip-option value="open" selected>Open</strip-option>
+                            <strip-option value="completed">History</strip-option>
+                        </strip-select>
+                    </div>
+                    <div id="orders_section__header--secondary"
+                        class="flex w-100 align-center space-between hide-completely">
+                        <button class="" onclick="clearSelection()" title="Clear all selection">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" height="24px"
+                                viewBox="0 0 24 24" width="24px">
+                                <path d="M0 0h24v24H0V0z" fill="none" />
+                                <path
+                                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                            </svg>
+                            <span id="selected_orders"></span>
                         </button>
+                        <div class="options">
+                            <button class="button" title="Cancel selected orders" onclick="cancelAll()">
+                                Cancel selected
+                            </button>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <sm-tab-panels id="orders_tab">
-                <div class="table">
-                    <ul id="my_order_list"></ul>
+                <ul id="orders_list"></ul>
+            </section>
+            <section id="market_orders_section" class="grid gap-1 card">
+                <div class="orders_section__header flex space-between align-center">
+                    <h4>
+                        Market orders
+                    </h4>
+                    <strip-select id="market_orders_category_selector" class="tab">
+                        <strip-option value="open" selected>Open</strip-option>
+                        <strip-option value="completed">History</strip-option>
+                    </strip-select>
                 </div>
-                <div class="table">
-                    <ul id="market_order_list">
-                        sdgkmsdg <br>
-                        sdgkmsdg <br>
-                        sdgkmsdg <br>
-                        sdgkmsdg <br>
-                        sdgkmsdg <br>
-                        sdgkmsdg <br>
-                        sdgkmsdg <br>
-                        sdgkmsdg <br>
-                        sdgkmsdg <br>
-                        sdgkmsdg <br>
-                        sdgkmsdg <br>
-                        sdgkmsdg <br>
-                    </ul>
-                </div>
-            </sm-tab-panels>
+                <ul id="market_orders_list"></ul>
+            </section>
         </section>
-        <section id="user_section" class="grid">
+        <section id="user_section" class="grid card">
             <h4 class="flex align-center user_section__header">
                 <svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" height="24px"
                     viewBox="0 0 24 24" width="24px">
@@ -307,11 +305,37 @@
             <sm-input id="get_private_key" variant="outlined" placeholder="FLO private key" type="password" required
                 error-text="Invalid private key" hiderequired animate>
             </sm-input>
-            <div id="wallet_popup__cta_wrapper" class="loader-button-wrapper">
-                <sm-button id="wallet_popup__cta" variant="primary"></sm-button>
+            <div id="wallet_popup__cta_wrapper" class="stateful-button-wrapper">
+                <sm-button id="wallet_popup__cta" class="uppercase" variant="primary"></sm-button>
             </div>
         </sm-form>
     </sm-popup>
+    <sm-popup id="transaction_info_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close" onclick="hidePopup()">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path
+                        d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
+                </svg>
+            </button>
+            <h4>Transaction details</h4>
+        </header>
+        <div class="grid gap-1-5">
+            <div class="grid">
+                <h5 class="label capitalize">Buyer</h5>
+                <sm-copy id="transaction__buyer"></sm-copy>
+            </div>
+            <div class="grid">
+                <h5 class="label capitalize">Seller</h5>
+                <sm-copy id="transaction__seller"></sm-copy>
+            </div>
+            <div class="grid">
+                <h5 class="label">Completed</h5>
+                <h4 id="transaction_time"></h4>
+            </div>
+        </div>
+    </sm-popup>
     <form id="login-form">
         <fieldset>
             <legend>Login</legend>
@@ -328,115 +352,9 @@
             <span id="user_id"></span><br />
             <button onclick="proxy.lock();">Add password lock</button><br />
             <button onclick="UI_evt.logout();">logout</button>
-            <button onclick="toggle_view('my-profile');">Toggle</button>
-            <div id="my-profile">
-                <div id="my-orders">
-                    <fieldset>
-                        <legend>My Orders</legend>
-                        <fieldset id="my-buy-orders">
-                            <legend>Buying</legend>
-                            <table>
-                                <thead>
-                                    <tr>
-                                        <th>Select</th>
-                                        <th>Quantity</th>
-                                        <th>Max Price</th>
-                                        <th>Order Placed</th>
-                                    </tr>
-                                </thead>
-                                <tbody data-type="buy"></tbody>
-                            </table>
-                        </fieldset>
-                        <fieldset id="my-sell-orders">
-                            <legend>Selling</legend>
-                            <table>
-                                <thead>
-                                    <tr>
-                                        <th>Select</th>
-                                        <th>Quantity</th>
-                                        <th>Min Price</th>
-                                        <th>Order placed</th>
-                                    </tr>
-                                </thead>
-                                <tbody data-type="sell"></tbody>
-                            </table>
-                        </fieldset>
-                        <button name="cancel-orders" onclick="UI_evt.cancelOrders();">Cancel Orders</button>
-                    </fieldset>
-                </div>
-                <div id="my-transactions">
-                    <fieldset>
-                        <legend>My Transactions</legend>
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th>Sold/Brought</th>
-                                    <th>To/From</th>
-                                    <th>Quantity</th>
-                                    <th>Unit Value</th>
-                                    <th>Time</th>
-                                </tr>
-                            </thead>
-                            <tbody></tbody>
-                        </table>
-                    </fieldset>
-                </div>
-            </div>
         </fieldset>
     </div>
-    <button onclick="toggle_view('all-container');">Toggle All</button>
     <button onclick="refresh();">Refresh</button>
-    <div id="all-container">
-        <div id="buy-orders">
-            <fieldset>
-                <legend>BuyOrders</legend>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Buyer</th>
-                            <th>Quantity</th>
-                            <th>Max Price</th>
-                            <th>Order Placed</th>
-                        </tr>
-                    </thead>
-                    <tbody></tbody>
-                </table>
-            </fieldset>
-        </div>
-        <div id="sell-orders">
-            <fieldset>
-                <legend>SellOrders</legend>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Seller</th>
-                            <th>Quantity</th>
-                            <th>Min Price</th>
-                            <th>Order Placed</th>
-                        </tr>
-                    </thead>
-                    <tbody></tbody>
-                </table>
-            </fieldset>
-        </div>
-        <div id="transactions">
-            <fieldset>
-                <legend>Transactions</legend>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Seller</th>
-                            <th>Buyer</th>
-                            <th>Quantity</th>
-                            <th>Unit Value</th>
-                            <th>Time</th>
-                        </tr>
-                    </thead>
-                    <tbody></tbody>
-                </table>
-            </fieldset>
-        </div>
-    </div>
     <template id="net_balance_template">
         <span class="available-balance"></span>
     </template>
@@ -451,7 +369,7 @@
         </div>
     </template>
     <template id="order_template">
-        <li class="table__row order-card">
+        <li class="list__item order-card">
             <sm-checkbox></sm-checkbox>
             <div class="grid">
                 <div class="order-card__type capitalize"></div>
@@ -472,6 +390,93 @@
             </button>
         </li>
     </template>
+    <template id="market_order_template">
+        <div class="market-order-card">
+            <div class="order-card__quantity"></div>
+            <div class="order-card__price"></div>
+        </div>
+    </template>
+    <template id="transaction_template">
+        <li class="list__item transaction-card align-center">
+            <div class="grid">
+                <div class="transaction-card__type capitalize"></div>
+                <div class="transaction-card__quantity"></div>
+            </div>
+            <div class="grid">
+                <span class="label transaction-card__price-type">Unit price</span>
+                <div class="transaction-card__price"></div>
+            </div>
+            <div class="grid">
+                <span class="label transaction-card__price-type">Total</span>
+                <div class="transaction-card__total"></div>
+            </div>
+            <button class="more-info" title="View transaction details">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                        d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
+                </svg>
+            </button>
+        </li>
+    </template>
+    <template id="market_transaction_template">
+        <li class="list__item transaction-card align-center">
+            <div class="transaction-card__quantity"></div>
+            <div class="transaction-card__price"></div>
+            <div class="transaction-card__total"></div>
+            <button class="more-info" title="View transaction details">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                        d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
+                </svg>
+            </button>
+        </li>
+    </template>
+    <template id="market_order_list_template">
+        <h4 class="grid list__header">
+            <div>Quantity</div>
+            <div>Buy price</div>
+            <div>Sell price</div>
+            <div>Quantity</div>
+        </h4>
+        <section id="buyers_list"></section>
+        <section id="sellers_list"></section>
+    </template>
+    <template id="market_transaction_list_template">
+        <h4 class="grid list__header">
+            <div>Quantity</div>
+            <div>Unit price</div>
+            <div>Total</div>
+            <div></div>
+        </h4>
+    </template>
+    <template id="success_template">
+        <div class="stateful-result stateful-result--success">
+            <div class="result__background result__background--success"></div>
+            <div class="icon-wrapper flex align-center">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" height="24px"
+                    viewBox="0 0 24 24" width="24px" fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
+                </svg>
+                <span>Success</span>
+            </div>
+        </div>
+    </template>
+    <template id="failure_template">
+        <div class="stateful-result stateful-result--failure">
+            <div class="result__background"></div>
+            <div class="icon-wrapper flex align-center">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" height="24px"
+                    viewBox="0 0 24 24" width="24px" fill="#000000">
+                    <path
+                        d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
+                </svg>
+                <span>Failed</span>
+            </div>
+        </div>
+    </template>
     <script id="ui_utils">
         // Global variables
         const domRefs = {};
@@ -518,7 +523,7 @@
         }
 
         // returns dom with specified element
-        function createElement(tagName, options) {
+        function createElement(tagName, options = {}) {
             const { className, textContent, innerHTML, attributes = {} } = options
             const elem = document.createElement(tagName)
             for (let attribute in attributes) {
@@ -620,14 +625,11 @@
             const { isPassword = true, cancelText = 'Cancel', confirmText = 'OK' } = options
             showPopup('prompt_popup', true)
             getRef('prompt_title').textContent = title;
-            let input = getRef('prompt_input');
-            input.setAttribute("placeholder", message)
+            getRef('prompt_message').textContent = message;
             let buttons = getRef('prompt_popup').querySelectorAll("sm-button");
             if (isPassword)
-                input.setAttribute("type", "text")
-            else
-                input.setAttribute("type", "password")
-            input.focusIn()
+                getRef('prompt_input').setAttribute("type", "password")
+            getRef('prompt_input').focusIn()
             buttons[0].textContent = cancelText;
             buttons[1].textContent = confirmText;
             return new Promise((resolve, reject) => {
@@ -636,7 +638,7 @@
                     return;
                 }
                 buttons[1].onclick = () => {
-                    let value = input.value;
+                    const value = getRef('prompt_input').value;
                     hidePopup()
                     resolve(value)
                 }
@@ -941,69 +943,12 @@
             }
         }
 
-        function toggle_view(id) {
-            let element = document.getElementById(id);
-            if (element.style.display === "none")
-                element.style.display = "block";
-            else
-                element.style.display = "none";
-        }
-
-        function list_buy() {
-            getBuyList().then(list => {
-                let container = document.getElementById("buy-orders").getElementsByTagName("tbody")[0];
-                container.innerHTML = '';
-                list.forEach(o => {
-                    let row = container.insertRow();
-                    row.insertCell().textContent = o.floID;
-                    row.insertCell().textContent = o.quantity;
-                    row.insertCell().textContent = o.maxPrice;
-                    row.insertCell().textContent = new Date(o.time_placed);
-                    row.dataset["id"] = o.id;
-                });
-            }).catch(error => console.error(error))
-        }
-
-        function list_sell() {
-            getSellList().then(list => {
-                let container = document.getElementById("sell-orders").getElementsByTagName("tbody")[0];
-                container.innerHTML = '';
-                list.forEach(o => {
-                    let row = container.insertRow();
-                    row.insertCell().textContent = o.floID;
-                    row.insertCell().textContent = o.quantity;
-                    row.insertCell().textContent = o.minPrice;
-                    row.insertCell().textContent = new Date(o.time_placed);
-                    row.dataset["id"] = o.id;
-                });
-            }).catch(error => console.error(error))
-        }
-
-        function list_txns() {
-            getTransactionList().then(list => {
-                let container = document.getElementById("transactions").getElementsByTagName("tbody")[0];
-                container.innerHTML = '';
-                list.forEach(o => {
-                    let row = container.insertRow();
-                    row.insertCell().textContent = o.seller;
-                    row.insertCell().textContent = o.buyer;
-                    row.insertCell().textContent = o.quantity;
-                    row.insertCell().textContent = o.unitValue;
-                    row.insertCell().textContent = new Date(o.tx_time);
-                });
-            }).catch(error => console.error(error))
-        }
-
         function refresh(init = false) {
             if (init)
                 console.info("init");
             else
                 console.info("refresh");
-            list_buy();
-            list_sell();
-            list_txns();
-            if (init || document.getElementById('user-container').style.display === "block")
-                account();
+            account();
         }
 
         function showBalance(containerId, availableBalance = 0, lockedBalance = 0) {
@@ -1060,12 +1005,81 @@
             },
         ]
 
+        const myTransactions = [
+            {
+                id: 'sd8g45g419s6',
+                tx_time: generateRandomDate(),
+                quantity: 15,
+                unitValue: 1.16,
+                buyer: 'w8eg4w8eg4w98werg9'
+            },
+            {
+                id: 's59d1g9ws18d',
+                tx_time: generateRandomDate(),
+                quantity: 8.3,
+                unitValue: 1.86,
+                buyer: 'w8eg4w8eg4w98werg9'
+            },
+            {
+                id: 'w899e1g4d1g98',
+                tx_time: generateRandomDate(),
+                quantity: 18.5,
+                unitValue: 1.64,
+                buyer: 'w8eg4w8eg4w98werg9'
+            },
+        ]
+
+        const market = {
+            buyOrders: [
+                {
+                    id: 'dfs5g16sdg1',
+                    time_placed: generateRandomDate(),
+                    quantity: 14.5,
+                    maxPrice: 1.36,
+                },
+                {
+                    id: 'f4gd1d56fg1',
+                    time_placed: generateRandomDate(),
+                    quantity: 78.3,
+                    maxPrice: 1.26,
+                },
+                {
+                    id: 's4dg5s4d1g98',
+                    time_placed: generateRandomDate(),
+                    quantity: 14.5,
+                    maxPrice: 1.28,
+                },
+            ],
+            sellOrders: [
+                {
+                    id: 'sd8g45g419s6',
+                    time_placed: generateRandomDate(),
+                    quantity: 15,
+                    minPrice: 1.16,
+                },
+                {
+                    id: 's59d1g9ws18d',
+                    time_placed: generateRandomDate(),
+                    quantity: 8.3,
+                    minPrice: 1.86,
+                },
+                {
+                    id: 'w899e1g4d1g98',
+                    time_placed: generateRandomDate(),
+                    quantity: 18.5,
+                    minPrice: 1.64,
+                },
+            ]
+        }
+
         function generateRandomDate() {
             return new Date() - Math.floor(Math.random() * 10000000000);
         }
 
+        let accountDetails = {}
         function account() {
             getAccount().then(acc => {
+                accountDetails = acc
                 console.debug(acc);
                 //Element display
                 document.getElementById("login-form").style.display = "none";
@@ -1086,28 +1100,7 @@
                 console.debug("RUPEE", rupee_total, rupee_locked, rupee_net);
                 showBalance("rupee_balance", rupee_net, rupee_locked)
                 //My orders
-                renderOpenOrders(acc.buyOrders, acc.sellOrders)
-
-                //My Transactions
-                container = document.getElementById("my-transactions").getElementsByTagName("tbody")[0];
-                container.innerHTML = '';
-                acc.transactions.forEach(o => {
-                    let type, other;
-                    if (o.seller === acc.floID) {
-                        type = 'Sold To';
-                        other = o.buyer === acc.floID ? 'MySelf' : o.buyer;
-                    } else if (o.buyer === acc.floID) {
-                        type = 'Brought From';
-                        other = o.seller;
-                    } else
-                        return;
-                    let row = container.insertRow();
-                    row.insertCell().textContent = type;
-                    row.insertCell().textContent = other;
-                    row.insertCell().textContent = o.quantity;
-                    row.insertCell().textContent = o.unitValue;
-                    row.insertCell().textContent = new Date(o.tx_time);
-                });
+                renderUserOrders()
                 try {
                     proxy.secret;
                 } catch (error) {
@@ -1181,6 +1174,9 @@
         refresh(true);
     </script>
     <script>
+        function formatAmount(amount) {
+            return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
+        }
         const render = {
             orderCard(orderDetails = {}) {
                 const { id, quantity, price, time, type } = orderDetails
@@ -1190,10 +1186,45 @@
                 card.querySelector('.order-card__type').textContent = type
                 card.querySelector('.order-card__quantity').textContent = `${quantity} FLO`
                 card.querySelector('.order-card__price-type').textContent = type === 'buy' ? 'Max price' : 'Min price'
-                card.querySelector('.order-card__price').textContent = `₹${price}`
+                card.querySelector('.order-card__price').textContent = formatAmount(price)
                 card.querySelector('.order-card__time').textContent = getFormattedTime(time, true)
                 return card
-            }
+            },
+            transactionCard(transactionDetails = {}) {
+                const { buyer, seller, type, other, quantity, unitValue, time } = transactionDetails
+                const card = getRef('transaction_template').content.cloneNode(true).firstElementChild
+                card.dataset.type = type
+                card.querySelector('.transaction-card__type').textContent = type
+                card.querySelector('.transaction-card__quantity').textContent = `${quantity} FLO`
+                card.querySelector('.transaction-card__price').textContent = `₹${unitValue}`
+                card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat((unitValue * quantity).toFixed(2)))
+                card.querySelector('.more-info').dataset.buyer = buyer
+                card.querySelector('.more-info').dataset.seller = seller
+                card.querySelector('.more-info').dataset.other = other
+                card.querySelector('.more-info').dataset.time = time
+                return card
+            },
+            marketOrderCard(orderDetails = {}) {
+                const { id, quantity, price, time, type } = orderDetails
+                const card = getRef('market_order_template').content.cloneNode(true).firstElementChild
+                card.dataset.id = id
+                card.dataset.type = type
+                card.classList.add(`market-order-card--${type}`)
+                card.querySelector('.order-card__quantity').textContent = `${quantity} FLO`
+                card.querySelector('.order-card__price').textContent = formatAmount(price)
+                return card
+            },
+            marketTransactionCard(transactionDetails = {}) {
+                const { buyer, seller, quantity, unitValue, time } = transactionDetails
+                const card = getRef('market_transaction_template').content.cloneNode(true).firstElementChild
+                card.querySelector('.transaction-card__quantity').textContent = `${quantity} FLO`
+                card.querySelector('.transaction-card__price').textContent = `₹${unitValue}`
+                card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat((unitValue * quantity).toFixed(2)))
+                card.querySelector('.more-info').dataset.time = time
+                card.querySelector('.more-info').dataset.buyer = buyer
+                card.querySelector('.more-info').dataset.seller = seller
+                return card
+            },
         }
 
         function showProcess(id) {
@@ -1208,25 +1239,32 @@
         getRef('trade_type_selector').addEventListener('change', e => {
             tradeType = e.detail.value
             getRef('get_price').setAttribute('placeholder', tradeType === 'buy' ? 'Max price' : 'Min price')
-            getRef('trade_button').textContent = tradeType
+            getRef('trade_button').textContent = `${tradeType} FLO`
             getRef('quantity_type').textContent = tradeType === 'buy' ? `Rupee` : `FLO`
         })
         async function tradeFlo() {
             const quantity = parseFloat(getRef('get_quantity').value)
             const price = parseFloat(getRef('get_price').value)
+            showProcess('trade_button_wrapper')
             try {
                 if (tradeType === 'buy') {
                     await buy(quantity, price, proxy.secret)
                 } else {
                     await sell(quantity, price, proxy.secret)
                 }
+                getRef('trade_button_wrapper').append(getRef('success_template').content.cloneNode(true))
                 notify(`Placed ${tradeType} order`, 'success')
             }
             catch (err) {
+                getRef('trade_button_wrapper').append(getRef('failure_template').content.cloneNode(true))
                 notify(err, 'error')
             }
             finally {
                 getRef('trade_form').reset()
+                hideProcess('trade_button_wrapper')
+                setTimeout(() => {
+                    getRef('trade_button_wrapper').querySelector('.stateful-result').remove()
+                }, 100);
             }
         }
         const balance = {
@@ -1240,21 +1278,37 @@
             // Get latest balance and exchange rate
             if (e.target.closest('button')) {
                 const target = e.target.closest('button')
+                const unitPrice = parseFloat(getRef('get_price').value)
                 const fraction = parseInt(target.value) / 100
                 if (tradeType === 'buy') {
-                    getRef('get_quantity').value = parseFloat(((balance.rupee * fraction) / rate.flo).toFixed(8))
+                    getRef('get_total').value = parseFloat((fraction * balance.rupee).toFixed(2))
+                    getRef('get_quantity').value = parseFloat(((balance.rupee * fraction) / unitPrice).toFixed(5))
                 } else {
-                    getRef('get_quantity').value = parseFloat((balance.flo * fraction).toFixed(8))
+                    getRef('get_total').value = parseFloat(((fraction * balance.flo) * rate.flo).toFixed(2))
+                    getRef('get_quantity').value = parseFloat((balance.flo * fraction).toFixed(5))
                 }
             }
         })
+        getRef('get_price').addEventListener('keyup', e => {
+            const unitPrice = parseFloat(getRef('get_price').value) || 0
+            const quantity = parseFloat(getRef('get_quantity').value) || 0
+            getRef('get_total').value = parseFloat((quantity * unitPrice).toFixed(2)) || 0
+        })
+        getRef('get_quantity').addEventListener('keyup', e => {
+            const unitPrice = parseFloat(getRef('get_price').value)
+            getRef('get_total').value = parseFloat((parseFloat(e.target.value) * unitPrice).toFixed(2)) || 0
+        })
+        getRef('get_total').addEventListener('keyup', e => {
+            const unitPrice = parseFloat(getRef('get_price').value)
+            getRef('get_quantity').value = parseFloat((parseFloat(e.target.value) / unitPrice).toFixed(5)) || 0
+        })
         getRef('wallet_actions').addEventListener('click', e => {
             if (e.target.closest('.button')) {
                 const target = e.target.closest('.button')
                 showPopup('wallet_popup')
                 const type = target.value
                 const asset = getRef('wallet_asset_selector').value
-                getRef('wallet_popup__cta').textContent = `${type}`
+                getRef('wallet_popup__cta').textContent = `${type} ${asset}`
                 getRef('wallet_popup__cta').setAttribute('value', type)
                 getRef('wallet_popup__title').textContent = `${type} ${asset}`
                 if (type === 'withdraw') {
@@ -1273,7 +1327,6 @@
             const asset = getRef('wallet_asset_selector').value
             const type = e.target.getAttribute('value')
             const quantity = parseFloat(getRef('get_quantity').value)
-            console.log(type, asset)
             try {
                 showProcess('wallet_popup__cta_wrapper')
                 if (type === 'deposit') {
@@ -1341,7 +1394,7 @@
                 transform: 'translateX(1.5rem)'
             },
         ]
-        getRef('my_order_list').addEventListener('change', e => {
+        getRef('orders_list').addEventListener('change', e => {
             const animOptions = {
                 duration: 150,
                 easing: 'ease',
@@ -1355,26 +1408,26 @@
                 selectedOrders.delete(target.dataset.id)
             }
             getRef('selected_orders').textContent = `${selectedOrders.size} selected`
-            if (selectedOrders.size === 1 && !getRef('orders_section__header').children[0].classList.contains('hide-completely')) {
-                getRef('orders_section__header').children[0].animate(slideOutLeft, animOptions)
+            if (selectedOrders.size === 1 && !getRef('my_orders_section__header').children[0].classList.contains('hide-completely')) {
+                getRef('my_orders_section__header').children[0].animate(slideOutLeft, animOptions)
                     .onfinish = () => {
-                        getRef('orders_section__header').children[0].classList.add('hide-completely')
-                        getRef('orders_section__header').children[1].classList.remove('hide-completely')
-                        getRef('orders_section__header').children[1].animate(slideInLeft, animOptions)
+                        getRef('my_orders_section__header').children[0].classList.add('hide-completely')
+                        getRef('my_orders_section__header').children[1].classList.remove('hide-completely')
+                        getRef('my_orders_section__header').children[1].animate(slideInLeft, animOptions)
                     }
-            } else if (selectedOrders.size === 0 && getRef('orders_section__header').children[0].classList.contains('hide-completely')) {
-                getRef('orders_section__header').children[1].animate(slideOutRight, animOptions)
+            } else if (selectedOrders.size === 0 && getRef('my_orders_section__header').children[0].classList.contains('hide-completely')) {
+                getRef('my_orders_section__header').children[1].animate(slideOutRight, animOptions)
                     .onfinish = () => {
-                        getRef('orders_section__header').children[1].classList.add('hide-completely')
-                        getRef('orders_section__header').children[0].classList.remove('hide-completely')
-                        getRef('orders_section__header').children[0].animate(slideInRight, animOptions)
+                        getRef('my_orders_section__header').children[1].classList.add('hide-completely')
+                        getRef('my_orders_section__header').children[0].classList.remove('hide-completely')
+                        getRef('my_orders_section__header').children[0].animate(slideInRight, animOptions)
                     }
             }
         })
         function clearSelection() {
-            getRef('my_order_list').querySelectorAll('sm-checkbox[checked]').forEach(elem => elem.checked = false)
+            getRef('orders_list').querySelectorAll('sm-checkbox[checked]').forEach(elem => elem.checked = false)
         }
-        getRef('my_order_list').addEventListener('click', e => {
+        getRef('orders_list').addEventListener('click', e => {
             if (e.target.closest('.cancel-order')) {
                 getConfirmation('Cancel this order?').then(res => {
                     if (res) {
@@ -1389,18 +1442,26 @@
                             .catch(err => notify(err, 'error'))
                     }
                 })
+            } else if (e.target.closest('.more-info')) {
+                const target = e.target.closest('.more-info')
+                showPopup('transaction_info_popup')
+                getRef('transaction__buyer').value = target.dataset.buyer
+                getRef('transaction__seller').value = target.dataset.seller
+                getRef('transaction_time').textContent = getFormattedTime(target.dataset.time)
             }
         })
         function cancelAll() {
-            getConfirmation('Cancel all selected orders?').then(res => {
+            getConfirmation('Cancel all selected orders?').then(async res => {
                 if (res) {
                     try {
-                        selectedOrders.forEach(async (type, id) => {
-                            await cancelOrder(type, id, proxy.secret)
-                                .then(() => {
-                                    getRef('my_order_list').querySelector(`data-id="${id}"`).remove()
-                                })
-                        })
+                        await Promise.all(
+                            selectedOrders.map((type, id) => {
+                                cancelOrder(type, id, proxy.secret)
+                                    .then(() => {
+                                        getRef('orders_list').querySelector(`data-id="${id}"`).remove()
+                                    })
+                            })
+                        )
                         notify('All selected orders cancelled', 'success')
                     }
                     catch (err) {
@@ -1410,47 +1471,128 @@
             })
         }
 
-        function renderAllOrders(buyOrders, sellOrders) {
-            getRef('my_order_list').innerHTML = '';
+        function renderUserOrders() {
+            const { buyOrders, sellOrders, transactions } = accountDetails
+            getRef('orders_list').innerHTML = '';
             const frag = document.createDocumentFragment()
-            const allOpenOrders = [...(buyOrders || myBuyOrders), ...(sellOrders || mySellOrders)].sort((a, b) => b.time_placed - a.time_placed)
-            console.log(allOpenOrders)
-            allOpenOrders.forEach(order => {
-                const { id, quantity, minPrice = undefined, maxPrice = undefined, time_placed } = order
-                const orderDetails = {
-                    id,
-                    quantity,
-                    type: minPrice ? 'sell' : 'buy',
-                    price: minPrice || maxPrice,
-                    time: time_placed
-                }
-                frag.append(render.orderCard(orderDetails))
-            })
-            getRef('my_order_list').append(frag)
-        }
-        function renderOpenOrders(buyOrders, sellOrders) {
-            getRef('my_order_list').innerHTML = '';
-            const frag = document.createDocumentFragment()
-            const allOpenOrders = [...(buyOrders || myBuyOrders), ...(sellOrders || mySellOrders)].sort((a, b) => b.time_placed - a.time_placed)
-            allOpenOrders.forEach(order => {
-                const { id, quantity, minPrice = undefined, maxPrice = undefined, time_placed } = order
-                const orderDetails = {
-                    id,
-                    quantity,
-                    type: minPrice ? 'sell' : 'buy',
-                    price: minPrice || maxPrice,
-                    time: time_placed
-                }
-                frag.append(render.orderCard(orderDetails))
-            })
-            getRef('my_order_list').append(frag)
-        }
-        renderOpenOrders()
-        getRef('orders_scope_selector').addEventListener('change', e => {
-            if (e.target.value === 'open') {
-                renderOpenOrders()
+            const ordersType = getRef('my_orders_category_selector').value
+            if (ordersType === 'open') {
+                const allOpenOrders = [...(buyOrders || myBuyOrders), ...(sellOrders || mySellOrders)].sort((a, b) => b.time_placed - a.time_placed)
+                allOpenOrders.forEach(order => {
+                    const { id, quantity, minPrice = undefined, maxPrice = undefined, time_placed } = order
+                    const orderDetails = {
+                        id,
+                        quantity,
+                        type: minPrice ? 'sell' : 'buy',
+                        price: minPrice || maxPrice,
+                        time: time_placed
+                    }
+                    frag.append(render.orderCard(orderDetails))
+                })
             } else {
-                renderCompletedOrders()
+                (transactions || myTransactions).forEach(transaction => {
+                    const { floID, quantity, unitValue, tx_time, buyer, seller } = transaction
+                    let type, other;
+                    if (seller === floID) {
+                        type = 'Sold';
+                        other = buyer === floID ? 'MySelf' : buyer;
+                    } else if (buyer === floID) {
+                        type = 'Bought';
+                        other = seller;
+                    } else
+                        return;
+                    const transactionDetails = {
+                        buyer,
+                        seller,
+                        type,
+                        other,
+                        quantity,
+                        unitValue,
+                        time: tx_time
+                    }
+                    frag.append(render.transactionCard(transactionDetails))
+                });
+            }
+            getRef('orders_list').append(frag)
+        }
+        window.addEventListener('load', () => {
+            renderUserOrders()
+            renderMarketOrders()
+        })
+        getRef('my_orders_category_selector').addEventListener('change', renderUserOrders)
+
+        getRef('market_orders_category_selector').addEventListener('change', renderMarketOrders)
+        async function renderMarketOrders() {
+            getRef('market_orders_list').innerHTML = '';
+            const ordersType = getRef('market_orders_category_selector').value
+            getRef('market_orders_list').className = ordersType
+            if (ordersType === 'open') {
+                try {
+                    const buyersFrag = document.createDocumentFragment()
+                    const sellersFrag = document.createDocumentFragment()
+                    // const [buyOrders, sellOrders] = await Promise.all([getBuyList(), getSellList()])
+                    const { buyOrders, sellOrders } = market
+                    buyOrders.forEach(order => {
+                        const { id, quantity, maxPrice, time_placed } = order
+                        const orderDetails = {
+                            id,
+                            quantity,
+                            price: maxPrice,
+                            time: time_placed,
+                            type: 'buy'
+                        }
+                        buyersFrag.append(render.marketOrderCard(orderDetails))
+                    });
+                    sellOrders.forEach(order => {
+                        const { id, quantity, minPrice, time_placed } = order
+                        const orderDetails = {
+                            id,
+                            quantity,
+                            price: minPrice,
+                            time: time_placed,
+                            type: 'sell'
+                        }
+                        sellersFrag.append(render.marketOrderCard(orderDetails))
+                    });
+                    const marketOrders = getRef('market_order_list_template').content.cloneNode(true)
+                    marketOrders.querySelector('#buyers_list').append(buyersFrag)
+                    marketOrders.querySelector('#sellers_list').append(sellersFrag)
+                    getRef('market_orders_list').append(marketOrders)
+                }
+                catch (err) {
+                    notify(err, 'error')
+                }
+            } else {
+                const frag = document.createDocumentFragment()
+                try {
+                    // const marketTransactions = await getTransactionList()
+                    const marketTransactions = myTransactions
+                    marketTransactions.forEach(transaction => {
+                        const { seller, buyer, quantity, unitValue, tx_time } = transaction
+                        const transactionDetails = {
+                            buyer,
+                            seller,
+                            quantity,
+                            unitValue,
+                            time: tx_time
+                        }
+                        frag.append(render.marketTransactionCard(transactionDetails))
+                    })
+                    const marketTransactionList = getRef('market_transaction_list_template').content.cloneNode(true)
+                    getRef('market_orders_list').append(marketTransactionList, frag)
+                }
+                catch (err) {
+                    notify(err, 'error')
+                }
+            }
+        }
+        getRef('market_orders_list').addEventListener('click', e => {
+            if (e.target.closest('.more-info')) {
+                const target = e.target.closest('.more-info')
+                showPopup('transaction_info_popup')
+                getRef('transaction__buyer').value = target.dataset.buyer
+                getRef('transaction__seller').value = target.dataset.seller
+                getRef('transaction_time').textContent = getFormattedTime(target.dataset.time)
             }
         })