diff --git a/index.html b/index.html
index 1a3ffc5..7d13596 100644
--- a/index.html
+++ b/index.html
@@ -4,101 +4,1460 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Local Bitcoin++</title>
-    <link rel="stylesheet" href="supernode/server/web/playground/main.css"> 
     <style>
-    /* Server logs */
-    pre {
-        max-height: 20em;
-        font-family: monospace;
-        font-size: 1em;
-        padding: 2px 5px;
-        color: #0f0;
-        background-color: #111;
-        border: 1px solid #030;
-        overflow: auto;
-        margin: 0;
-        white-space: pre-line;
-      }
-
-      .w3-sidebar {
-        height: 100%;
-        width: auto;
-        transition: width 2s ease 0s;
-        -webkit-transition: width 2s;
-        position: fixed !important;
-        z-index: 1;
-      }
-
-      .w3-bar-block .w3-bar-item {
-        display: block;
-        padding: 8px 16px;
-        text-align: left;
-        border: none;
-        white-space: normal;
-        float: none;
-        outline: 0;
-        color: #fff;
-      }
-
-      .w3-large {
-        font-size: 18px !important;
-      }
-
-      .w3-teal,
-      .w3-hover-teal:hover {
-        color: #fff !important;
-      }
-
-      .w3-xlarge {
-        font-size: 24px !important;
-      }
-
-      .sidenav {
-        position: fixed;
-        z-index: 2;
-        top: 20px;
-        left: 10px;
-        background: #eee;
-        overflow-x: hidden;
-      }
-
-      .sidebar_div {
-        z-index: 1;
-        top: 20px;
-        left: 10px;
-        background: #eee;
-        overflow-x: hidden;
-      }
-    </style>  
+        @import url("https://fonts.googleapis.com/css?family=Barlow:400,500,600,700&display=swap");
+        @import url("https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap");
+        @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap");
+        * {
+          -webkit-box-sizing: border-box;
+                  box-sizing: border-box;
+          padding: 0;
+          margin: 0;
+          font-family: 'Barlow', sans-serif;
+        }
+        
+        :root {
+          --primary-color: mediumspringgreen;
+          --text: 17, 17, 17;
+          --text-light: 85, 85, 85;
+          --foreground: 255, 255, 255;
+          --background: #eaeaea;
+        }
+        
+        body {
+          background: var(--background);
+          color: rgba(var(--text), 1);
+          font-size: 16px;
+          margin: 1rem;
+        }
+        
+        a {
+          font-weight: 600;
+          text-decoration: none;
+          color: var(--primary-color);
+        }
+        
+        .dark-text {
+          color: #111;
+        }
+        
+        h1, h2, h3, h4 {
+          font-weight: 600;
+        }
+        
+        h5 {
+          font-weight: 500;
+          letter-spacing: 0.06em;
+        }
+        
+        button {
+          position: relative;
+          display: -webkit-inline-box;
+          display: -ms-inline-flexbox;
+          display: inline-flex;
+          -webkit-box-align: center;
+              -ms-flex-align: center;
+                  align-items: center;
+          text-transform: uppercase;
+          letter-spacing: 0.1em;
+          padding: 0.4em 0.6em;
+          font-weight: 600;
+          cursor: pointer;
+          border-radius: 0.2em;
+          color: rgba(var(--text), 1);
+          -webkit-transition: -webkit-transform 0.3s, -webkit-clip-path 0.3s;
+          transition: -webkit-transform 0.3s, -webkit-clip-path 0.3s;
+          transition: transform 0.3s, clip-path 0.3s;
+          transition: transform 0.3s, clip-path 0.3s, -webkit-transform 0.3s, -webkit-clip-path 0.3s;
+          border: none;
+          -webkit-clip-path: circle(100%);
+                  clip-path: circle(100%);
+          background: rgba(var(--text-light), 0.1);
+          -webkit-tap-highlight-color: transparent;
+        }
+        
+        button::after {
+          content: '';
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          background: rgba(var(--text-light), 0.16);
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          -webkit-clip-path: circle(0%);
+                  clip-path: circle(0%);
+          -webkit-transition: 0.3s;
+          transition: 0.3s;
+        }
+        
+        button:hover::after {
+          -webkit-clip-path: circle(100%);
+                  clip-path: circle(100%);
+        }
+        
+        button:focus {
+          outline: thin solid rgba(var(--text-light), 0.4);
+        }
+        
+        button:disabled {
+          cursor: default;
+          background: rgba(var(--text-light), 0.4);
+        }
+        
+        button:disabled ~ .loader {
+          opacity: 0;
+        }
+        
+        button:disabled::after {
+          -webkit-clip-path: none;
+                  clip-path: none;
+        }
+        
+        select {
+          padding: 1em;
+          border-radius: 0.4em;
+          background: var(--background);
+          color: rgba(var(--text), 1);
+          width: 100%;
+        }
+        
+        select option {
+          font-size: 1rem;
+        }
+        
+        input[type=number]::-webkit-inner-spin-button,
+        input[type=number]::-webkit-outer-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+        
+        input[type=number] {
+          -moz-appearance: textfield;
+        }
+        
+        input:invalid {
+          outline: none;
+          -webkit-box-shadow: none;
+                  box-shadow: none;
+        }
+        
+        ::-moz-focus-inner {
+          border: none;
+        }
+        
+        .bottom-padding {
+          padding-bottom: 1em;
+        }
+        
+        .top-padding {
+          padding-top: 1em;
+        }
+        
+        .bottom-margin {
+          margin-bottom: 1rem !important;
+        }
+        
+        .top-margin {
+          margin-top: 1.5rem !important;
+        }
+        
+        .flex {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+        }
+        
+        .grid {
+          display: -ms-grid;
+          display: grid;
+        }
+        
+        .grid-2 {
+          -ms-grid-columns: auto auto;
+              grid-template-columns: auto auto;
+          gap: 1em;
+        }
+        
+        .light-text {
+          color: rgba(var(--text), 0.7);
+        }
+        
+        .hide {
+          opacity: 0;
+          pointer-events: none;
+        }
+        
+        .hide-completely {
+          display: none !important;
+        }
+        
+        .breakable {
+          word-break: break-all;
+        }
+        
+        .separator {
+          padding: .1em;
+        }
+        
+        .no-transformations {
+          -webkit-transform: none !important;
+                  transform: none !important;
+        }
+        
+        .hoverable {
+          position: relative;
+        }
+        
+        .hoverable::after {
+          content: '';
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          background: rgba(var(--text-light), 0.1);
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          z-index: 1;
+          -webkit-clip-path: circle(0%);
+                  clip-path: circle(0%);
+          -webkit-transition: 0.3s;
+          transition: 0.3s;
+        }
+        
+        .hoverable:hover::after {
+          -webkit-clip-path: circle(100%);
+                  clip-path: circle(100%);
+        }
+        
+        .loader {
+          fill: none;
+          stroke-width: 6;
+          stroke: var(--primary-color);
+          height: 2rem;
+          width: 2rem;
+          overflow: visible;
+          stroke-dashoffset: 210;
+          stroke-dasharray: 210;
+          -ms-grid-column-align: center;
+              justify-self: center;
+          margin: 0 !important;
+        }
+        
+        @-webkit-keyframes rotate {
+          100% {
+            -webkit-transform: rotate(360deg);
+                    transform: rotate(360deg);
+          }
+        }
+        
+        @keyframes rotate {
+          100% {
+            -webkit-transform: rotate(360deg);
+                    transform: rotate(360deg);
+          }
+        }
+        
+        @-webkit-keyframes load {
+          50% {
+            stroke-dashoffset: 0;
+          }
+          100% {
+            stroke-dashoffset: -210;
+          }
+        }
+        
+        @keyframes load {
+          50% {
+            stroke-dashoffset: 0;
+          }
+          100% {
+            stroke-dashoffset: -210;
+          }
+        }
+        
+        .action {
+          position: relative;
+          display: -webkit-inline-box;
+          display: -ms-inline-flexbox;
+          display: inline-flex;
+          -webkit-box-align: center;
+              -ms-flex-align: center;
+                  align-items: center;
+          -webkit-box-pack: center;
+              -ms-flex-pack: center;
+                  justify-content: center;
+          cursor: pointer;
+        }
+        
+        .action:hover button::after {
+          -webkit-clip-path: circle(100%);
+                  clip-path: circle(100%);
+        }
+        
+        .action .btn {
+          z-index: 2;
+        }
+        
+        .action .loader {
+          position: absolute;
+          z-index: 1;
+          padding: 0.4em;
+        }
+        
+        .clip {
+          -webkit-clip-path: circle(0) !important;
+                  clip-path: circle(0) !important;
+        }
+        
+        .animate-loader {
+          -webkit-animation: load 2.6s infinite, rotate 1s infinite linear;
+                  animation: load 2.6s infinite, rotate 1s infinite linear;
+        }
+        
+        .expand {
+          width: 100%;
+        }
+        
+        #textCopied {
+          padding: 1rem;
+          border-radius: 2rem;
+          background: rgba(var(--foreground), 1);
+          position: fixed;
+          bottom: 0;
+          pointer-events: none;
+          margin: 2rem 0;
+          left: 50%;
+          -webkit-transform: translateX(-50%);
+                  transform: translateX(-50%);
+          -webkit-transition: 0.3s opacity ease;
+          transition: 0.3s opacity ease;
+          z-index: 20;
+        }
+        
+        .copy-icon {
+          stroke: none;
+          height: 2.4rem;
+          width: 2.4rem;
+          fill: rgba(var(--text), 1);
+          opacity: 0.6;
+          padding: 0.6rem;
+          padding-right: 0;
+          overflow: visible;
+          cursor: pointer;
+        }
+        
+        .copy-icon:hover {
+          opacity: 1;
+        }
+        
+        .copy-row {
+          -webkit-box-align: center;
+              -ms-flex-align: center;
+                  align-items: center;
+          margin: 0 0 2rem 0;
+          color: var(--primary-color);
+        }
+        
+        .copy-row h3 {
+          font-weight: normal;
+          font-family: 'Roboto', sans-serif;
+          letter-spacing: 0.06em;
+        }
+        
+        @-webkit-keyframes fade {
+          from {
+            opacity: 0;
+            -webkit-transform: translateX(1rem);
+                    transform: translateX(1rem);
+          }
+          to {
+            opacity: 1;
+            -webkit-transform: none;
+                    transform: none;
+          }
+        }
+        
+        @keyframes fade {
+          from {
+            opacity: 0;
+            -webkit-transform: translateX(1rem);
+                    transform: translateX(1rem);
+          }
+          to {
+            opacity: 1;
+            -webkit-transform: none;
+                    transform: none;
+          }
+        }
+        
+        .input {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          width: 100%;
+          -webkit-box-align: center;
+              -ms-flex-align: center;
+                  align-items: center;
+          position: relative;
+          padding: 0.8em;
+          margin-bottom: 1.5em;
+          border-radius: 0.2em;
+          -webkit-transition: opacity 0.3s;
+          transition: opacity 0.3s;
+          background: rgba(var(--text-light), 0.1);
+          -webkit-animation: fade 0.3s;
+                  animation: fade 0.3s;
+        }
+        
+        .input:last-of-type {
+          margin-bottom: 0;
+        }
+        
+        .input input:focus {
+          caret-color: var(--primary-color);
+        }
+        
+        .input .label {
+          opacity: .7;
+          font-weight: 500;
+          font-size: 1em;
+          position: absolute;
+          -webkit-transition: -webkit-transform 0.3s ease;
+          transition: -webkit-transform 0.3s ease;
+          transition: transform 0.3s ease;
+          transition: transform 0.3s ease, -webkit-transform 0.3s ease;
+          -webkit-transform-origin: left;
+                  transform-origin: left;
+          pointer-events: none;
+          will-change: contents;
+        }
+        
+        .input input {
+          -webkit-box-flex: 1;
+              -ms-flex: 1;
+                  flex: 1;
+          font-size: 1rem;
+          border: none;
+          background: transparent;
+          outline: none;
+          color: rgba(var(--text), 1);
+        }
+        
+        .animate-label input {
+          -webkit-transform: translateY(0.5em);
+                  transform: translateY(0.5em);
+        }
+        
+        .animate-label .label {
+          -webkit-transform: translateY(-60%) scale(0.7);
+                  transform: translateY(-60%) scale(0.7);
+          opacity: 1;
+          color: var(--primary-color);
+        }
+        
+        .container-header {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-align: center;
+              -ms-flex-align: center;
+                  align-items: center;
+          -webkit-box-orient: horizontal;
+          -webkit-box-direction: normal;
+              -ms-flex-direction: row;
+                  flex-direction: row;
+          width: 100%;
+          padding: 0 1rem;
+        }
+        
+        .container-header h3 {
+          -webkit-box-flex: 1;
+              -ms-flex: 1;
+                  flex: 1;
+          font-weight: 500;
+        }
+        
+        .container-header span {
+          color: var(--accent-color);
+          border-radius: 0.2rem;
+          margin-right: 0.2rem;
+          padding: 0.5rem 1rem;
+          font-weight: 500;
+        }
+        
+        .btn {
+          background: var(--primary-color);
+          color: rgba(var(--foreground), 1);
+          padding: 0.4em 1em;
+          -webkit-box-pack: center;
+              -ms-flex-pack: center;
+                  justify-content: center;
+        }
+        
+        .back-arrow {
+          stroke: rgba(var(--text), 1);
+          stroke-width: 6;
+          fill: none;
+          height: 2rem;
+          padding: 0.5rem 1rem 0.5rem 0;
+          cursor: pointer;
+        }
+        
+        .card {
+          border-radius: 0.6rem;
+          padding: 1.5em;
+          background: rgba(var(--foreground), 1);
+        }
+        
+        .solid-background {
+          background: var(--background) !important;
+        }
+        
+        .popup-container {
+          display: -ms-grid;
+          display: grid;
+          position: fixed;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          place-items: center;
+          background: rgba(0, 0, 0, 0.6);
+          z-index: 10;
+          -webkit-transition: opacity 0.3s ease;
+          transition: opacity 0.3s ease;
+        }
+        
+        .popup-container .popup {
+          -ms-flex-item-align: end;
+              align-self: flex-end;
+          -webkit-box-align: start;
+              -ms-flex-align: start;
+                  align-items: flex-start;
+          -ms-flex-wrap: wrap;
+              flex-wrap: wrap;
+          width: 100%;
+          border-radius: 0.5rem 0.5rem 0 0;
+          padding: 1.5rem;
+          position: relative;
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          background: rgba(var(--foreground), 1);
+          -webkit-transform: translateY(1rem);
+                  transform: translateY(1rem);
+          -webkit-transition: -webkit-transform 0.3s;
+          transition: -webkit-transform 0.3s;
+          transition: transform 0.3s;
+          transition: transform 0.3s, -webkit-transform 0.3s;
+          -webkit-box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24);
+                  box-shadow: 0 2rem 2rem rgba(0, 0, 0, 0.24);
+          overflow: hidden auto;
+        }
+        
+        .popup-container .popup h5 {
+          margin: 0.5rem 0;
+          opacity: 0.9;
+          font-weight: 400;
+        }
+        
+        .popup-container .popup button:first-of-type {
+          margin-left: auto;
+        }
+        
+        .popup-container .popup .container-header {
+          -webkit-box-align: center;
+              -ms-flex-align: center;
+                  align-items: center;
+          padding: 0;
+          margin-bottom: 1.5em;
+        }
+        
+        .popup-container .popup .container-header .btn {
+          padding: 0.6em 1.2em;
+        }
+        
+        .popup-container .popup #upiToAddress {
+          padding: 1em 0;
+        }
+        
+        .crypto-selector {
+          margin: 0.4em 0 1.5em 0;
+        }
+        
+        .icon {
+          -webkit-transition: 0.3s;
+          transition: 0.3s;
+          border-radius: 4em;
+          padding: 0.4em;
+          height: 2.4em;
+          width: 2.4em;
+          overflow: visible;
+          fill: rgba(var(--text), 1);
+        }
+        
+        .btc {
+          fill: #FF9900;
+        }
+        
+        .flo {
+          fill: #2080a2;
+        }
+        
+        .inr {
+          padding: 0.45em;
+        }
+        
+        .select-crypto {
+          position: relative;
+          display: -webkit-inline-box;
+          display: -ms-inline-flexbox;
+          display: inline-flex;
+          -webkit-box-orient: vertical;
+          -webkit-box-direction: normal;
+              -ms-flex-direction: column;
+                  flex-direction: column;
+          -webkit-box-align: center;
+              -ms-flex-align: center;
+                  align-items: center;
+          margin-right: 1em;
+          cursor: pointer;
+          -webkit-user-select: none;
+             -moz-user-select: none;
+              -ms-user-select: none;
+                  user-select: none;
+          -webkit-tap-highlight-color: transparent;
+        }
+        
+        .select-crypto input {
+          display: none;
+        }
+        
+        .select-crypto input:checked ~ .icon {
+          -webkit-box-shadow: 0 0 0 2px #00C853 inset;
+                  box-shadow: 0 0 0 2px #00C853 inset;
+        }
+        
+        .select-crypto input:checked ~ .selected {
+          -webkit-transform: none;
+                  transform: none;
+        }
+        
+        .select-crypto .selected {
+          position: absolute;
+          right: 0;
+          height: 1em;
+          -webkit-transform: scale(0);
+                  transform: scale(0);
+          -webkit-transition: -webkit-transform 0.3s;
+          transition: -webkit-transform 0.3s;
+          transition: transform 0.3s;
+          transition: transform 0.3s, -webkit-transform 0.3s;
+        }
+        
+        .select-crypto .selected circle {
+          fill: #00C853;
+          stroke: none;
+        }
+        
+        .select-crypto .selected polyline {
+          fill: none;
+          stroke: rgba(var(--foreground), 1);
+          stroke-width: 6;
+        }
+        
+        #show_message {
+          -webkit-transform: translate(0, -100%);
+                  transform: translate(0, -100%);
+          -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+          transition: opacity 0.3s, -webkit-transform 0.3s;
+          transition: transform 0.3s, opacity 0.3s;
+          transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
+          -webkit-box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16);
+                  box-shadow: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.16);
+          -webkit-box-align: center;
+              -ms-flex-align: center;
+                  align-items: center;
+          -webkit-box-orient: horizontal;
+          -webkit-box-direction: normal;
+              -ms-flex-direction: row;
+                  flex-direction: row;
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          color: rgba(var(--text), 1);
+          position: fixed;
+          right: 0;
+          top: 0;
+          bottom: auto;
+          width: 100%;
+          max-width: 100%;
+          z-index: 11;
+          background: rgba(var(--foreground), 1);
+        }
+        
+        #show_message #error_icon {
+          fill: #E53935;
+        }
+        
+        #show_message #done_icon {
+          fill: #00C853;
+        }
+        
+        #show_message .notification-icon {
+          height: 2em;
+          width: 2em;
+          margin: 1em 0 1em 1em;
+          fill: rgba(var(--text), 1);
+        }
+        
+        #show_message div {
+          padding: 1em;
+          -webkit-box-flex: 1;
+              -ms-flex: 1;
+                  flex: 1;
+        }
+        
+        #show_message div h5 {
+          opacity: 0.8;
+        }
+        
+        #show_message span {
+          font-weight: 500;
+          -webkit-box-flex: 1;
+              -ms-flex: 1;
+                  flex: 1;
+        }
+        
+        #show_message button {
+          padding: 1rem;
+          margin: 0 1em 0 0;
+          border: none;
+          background: none;
+        }
+        
+        #show_message button svg {
+          height: 1em;
+          width: 1em;
+          stroke: rgba(var(--text), 1);
+          stroke-width: 6;
+        }
+        
+        #confirmation {
+          -webkit-box-orient: vertical;
+          -webkit-box-direction: normal;
+              -ms-flex-direction: column;
+                  flex-direction: column;
+          -webkit-box-pack: center;
+              -ms-flex-pack: center;
+                  justify-content: center;
+          padding: 1rem;
+        }
+        
+        #confirmation p {
+          margin: 1rem;
+          font-size: 1rem;
+          font-weight: 500;
+          color: rgba(var(--rgb-bw), 1) !important;
+        }
+        
+        #confirmation div {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          padding: 1em;
+          -webkit-box-pack: right;
+              -ms-flex-pack: right;
+                  justify-content: right;
+          width: 100%;
+        }
+        
+        #confirmation div button {
+          background: none;
+        }
+        
+        #confirmation div button:first-of-type {
+          margin-right: 0.6em;
+        }
+        
+        #background {
+          position: fixed;
+          z-index: -1;
+          left: 0;
+          top: 0;
+          width: 100vw;
+          height: 100vh;
+        }
+        
+        #main_header {
+          padding: 1em 0;
+          -webkit-box-align: center;
+              -ms-flex-align: center;
+                  align-items: center;
+        }
+        
+        #main_header .icon {
+          stroke: rgba(var(--text), 1);
+          stroke-width: 6;
+          height: 2.4rem;
+          width: 2.4rem;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          fill: none;
+          cursor: pointer;
+          padding: 0.6rem;
+        }
+        
+        #main_header .icon:last-of-type {
+          margin-left: 1rem;
+        }
+        
+        #user {
+          -ms-grid-columns: auto 1fr;
+              grid-template-columns: auto 1fr;
+        }
+        
+        #profile_pic {
+          padding: 1em;
+          overflow: visible;
+          fill: none;
+          stroke: rgba(var(--text-light), 1);
+          stroke-width: 4;
+          background: var(--background);
+          border-radius: 4em;
+          width: 4em;
+          height: 4em;
+          stroke-linecap: round;
+        }
+        
+        #switcher_header {
+          list-style: none;
+          padding: 0;
+          margin-bottom: 2em;
+          -ms-grid-columns: (max-content)[3];
+              grid-template-columns: repeat(3, -webkit-max-content);
+              grid-template-columns: repeat(3, max-content);
+          gap: 2em;
+          border-bottom: 1px solid rgba(var(--text), 0.2);
+        }
+        
+        #switcher_header li {
+          -webkit-user-select: none;
+             -moz-user-select: none;
+              -ms-user-select: none;
+                  user-select: none;
+          font-size: 1.2em;
+          font-weight: 600;
+          opacity: 0.6;
+          padding: 0.4em 0;
+          text-transform: uppercase;
+          letter-spacing: 0.1em;
+        }
+        
+        #switcher_header li:hover {
+          opacity: 1;
+          cursor: pointer;
+        }
+        
+        #switcher_header li:focus {
+          outline: none;
+        }
+        
+        #switcher_header .active {
+          opacity: 1;
+          border-bottom: 0.1em solid var(--primary-color);
+        }
+        
+        .exchange-section {
+          gap: 2em;
+          -ms-grid-columns: (max-content)[3];
+              grid-template-columns: repeat(3, -webkit-max-content);
+              grid-template-columns: repeat(3, max-content);
+        }
+        
+        .exchange-option {
+          display: -webkit-inline-box;
+          display: -ms-inline-flexbox;
+          display: inline-flex;
+          -webkit-box-orient: vertical;
+          -webkit-box-direction: normal;
+              -ms-flex-direction: column;
+                  flex-direction: column;
+          border-radius: 0.5em;
+          -webkit-box-align: center;
+              -ms-flex-align: center;
+                  align-items: center;
+          cursor: pointer;
+          -webkit-user-select: none;
+             -moz-user-select: none;
+              -ms-user-select: none;
+                  user-select: none;
+          -webkit-transition: -webkit-transform 0.3s;
+          transition: -webkit-transform 0.3s;
+          transition: transform 0.3s;
+          transition: transform 0.3s, -webkit-transform 0.3s;
+          -webkit-tap-highlight-color: transparent;
+          font-family: 'Roboto', sans-serif;
+        }
+        
+        .exchange-option:active {
+          -webkit-transform: scale(0.9);
+                  transform: scale(0.9);
+        }
+        
+        .exchange-option svg {
+          padding: 1.2em;
+          height: 4em;
+          width: 4em;
+          fill: none;
+          border-radius: 2em;
+          margin-bottom: 0.4em;
+          background: var(--background);
+          stroke: rgba(var(--text), 1);
+          stroke-width: 3;
+          overflow: visible;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+        
+        .order {
+          -ms-grid-columns: 1fr auto;
+              grid-template-columns: 1fr auto;
+          margin-bottom: 2em;
+          -webkit-box-align: start;
+              -ms-flex-align: start;
+                  align-items: flex-start;
+        }
+        
+        .order:last-of-type {
+          margin-bottom: 0;
+        }
+        
+        .order .details {
+          -webkit-box-flex: 1;
+              -ms-flex: 1;
+                  flex: 1;
+        }
+        
+        .order .details h3 {
+          margin-bottom: 0.2em;
+        }
+        
+        .order .details h5 {
+          margin-top: 0.6em;
+          color: rgba(var(--text-light), 1);
+        }
+        
+        #sign_in_popup {
+          -ms-flex-item-align: center;
+              -ms-grid-row-align: center;
+              align-self: center;
+          border-radius: 0.5em;
+          width: calc(100vw - 2em);
+          background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cdefs%3E%3Cstyle%3E.a,.b,.c%7Bfill:none;stroke:%23777;stroke-miterlimit:10;opacity:0.2;%7D.a%7Bstroke-width:0.5px;%7D.c%7Bstroke-width:0.75px;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EArtboard 3%3C/title%3E%3Cpath class='a' d='M38.59,110.6l-.82,5.71a1,1,0,0,0,1.36,1.07l5.36-2.15a1,1,0,0,0,.24-1.71L40.19,110A1,1,0,0,0,38.59,110.6Z'/%3E%3Cpath class='b' d='M79,44.57A10.45,10.45,0,0,1,71.43,29a.54.54,0,0,0-.62-.78A10.47,10.47,0,1,0,81.22,45.58a.54.54,0,0,0-.41-.91A9.81,9.81,0,0,1,79,44.57Z'/%3E%3Cpath class='a' d='M99.32,112.2l3.66-.12a.2.2,0,0,1,.1.37L99.8,114.1a.19.19,0,0,0-.11.18l.12,3.66a.2.2,0,0,1-.37.1l-1.64-3.28a.21.21,0,0,0-.19-.11l-3.66.12a.19.19,0,0,1-.09-.37l3.27-1.65a.19.19,0,0,0,.11-.18l-.12-3.66a.2.2,0,0,1,.38-.1l1.64,3.28A.19.19,0,0,0,99.32,112.2Z'/%3E%3Ccircle class='b' cx='168' cy='126' r='5.5'/%3E%3Cpath class='a' d='M131.89,20.1l-7.79,1.56a1.37,1.37,0,0,0-.76,2.25l5.24,6a1.37,1.37,0,0,0,2.34-.47l2.54-7.52A1.37,1.37,0,0,0,131.89,20.1Z'/%3E%3Cpath class='a' d='M206.63,100.4l.87,4.35a.24.24,0,0,1-.43.19l-2.61-3.58a.22.22,0,0,0-.24-.1l-4.34.87a.24.24,0,0,1-.19-.42l3.58-2.61a.24.24,0,0,0,.1-.24l-.87-4.34a.24.24,0,0,1,.42-.19l2.61,3.58a.25.25,0,0,0,.24.09l4.34-.87a.24.24,0,0,1,.19.43l-3.58,2.61A.21.21,0,0,0,206.63,100.4Z'/%3E%3Cpath class='a' d='M165,105.35l.59,1.86a.1.1,0,0,1-.17.1l-1.32-1.43a.09.09,0,0,0-.11,0l-1.86.59a.1.1,0,0,1-.1-.17L163.5,105a.09.09,0,0,0,0-.11l-.59-1.86a.11.11,0,0,1,.18-.1l1.31,1.44a.09.09,0,0,0,.11,0l1.86-.59a.1.1,0,0,1,.1.17l-1.43,1.32A.09.09,0,0,0,165,105.35Z'/%3E%3Cpath class='a' d='M65.06,91l1.42,1.34a.1.1,0,0,1-.11.17l-1.85-.62a.11.11,0,0,0-.11,0L63.08,93.3a.11.11,0,0,1-.18-.11l.62-1.85a.11.11,0,0,0,0-.11L62.07,89.9a.11.11,0,0,1,.11-.18l1.85.62a.11.11,0,0,0,.11,0l1.34-1.42a.1.1,0,0,1,.17.11L65,90.85A.11.11,0,0,0,65.06,91Z'/%3E%3Cpath class='a' d='M118.76,45.25l1.72,1.62a.13.13,0,0,1-.13.21l-2.24-.75a.12.12,0,0,0-.13,0l-1.62,1.72a.13.13,0,0,1-.21-.13l.75-2.23a.14.14,0,0,0,0-.14L115.15,44a.13.13,0,0,1,.13-.22l2.23.75a.12.12,0,0,0,.14,0l1.61-1.72a.13.13,0,0,1,.22.13l-.75,2.24A.11.11,0,0,0,118.76,45.25Z'/%3E%3Cpath class='b' d='M32.71,18H26.29a2,2,0,0,0-1.73,1l-3.2,5.55a2,2,0,0,0,0,2l3.2,5.55a2,2,0,0,0,1.73,1h6.42a2,2,0,0,0,1.73-1l3.2-5.55a2,2,0,0,0,0-2L34.44,19A2,2,0,0,0,32.71,18Z'/%3E%3Cpath class='b' d='M77.11,132.77H73.17a1.23,1.23,0,0,0-1.07.61l-2,3.42a1.23,1.23,0,0,0,0,1.23l2,3.41a1.23,1.23,0,0,0,1.07.61h3.94a1.22,1.22,0,0,0,1.06-.61l2-3.41a1.28,1.28,0,0,0,0-1.23l-2-3.42A1.22,1.22,0,0,0,77.11,132.77Z'/%3E%3Cpath class='c' d='M106.11,86l-4.29,6.63a1.36,1.36,0,0,0,1.08,2.1l7.89.4a1.37,1.37,0,0,0,1.28-2l-3.6-7A1.36,1.36,0,0,0,106.11,86Z'/%3E%3Ccircle class='b' cx='36' cy='68' r='2.5'/%3E%3Cpath class='b' d='M180.69,20.1h-2.1a.64.64,0,0,0-.57.33L177,22.25a.63.63,0,0,0,0,.65L178,24.73a.65.65,0,0,0,.57.32h2.1a.65.65,0,0,0,.57-.32l1.05-1.83a.63.63,0,0,0,0-.65l-1.05-1.82A.64.64,0,0,0,180.69,20.1Z'/%3E%3C/svg%3E"), rgba(var(--foreground), 0.6);
+        }
+        
+        #sign_in_popup h1 {
+          margin-top: 3em;
+        }
+        
+        #sign_in_popup p:first-of-type {
+          margin-bottom: 4em;
+        }
+        
+        #sign_in_popup .action {
+          margin-top: 1em;
+        }
+        
+        #sign_in_popup p:nth-of-type(2) {
+          margin-top: 2em;
+          margin-bottom: 1em;
+        }
+        
+        .primary-btn {
+          background: var(--primary-color);
+          padding: 1em 1.2em;
+          -webkit-box-pack: center;
+              -ms-flex-pack: center;
+                  justify-content: center;
+          color: black;
+        }
+        
+        .primary-btn::after {
+          background: rgba(var(--foreground), 0.1);
+        }
+        
+        .secondary-btn {
+          background: transparent;
+          padding: 1em 1.2em;
+          -webkit-box-pack: center;
+              -ms-flex-pack: center;
+                  justify-content: center;
+          color: rgba(var(--text), 1);
+          border: solid 2px var(--primary-color);
+        }
+        
+        .secondary-btn::after {
+          background: rgba(var(--foreground), 0.1);
+        }
+        
+        .crypto-price {
+          -webkit-box-align: center;
+              -ms-flex-align: center;
+                  align-items: center;
+          -ms-grid-columns: auto 1fr auto;
+              grid-template-columns: auto 1fr auto;
+        }
+        
+        .crypto-price:first-of-type {
+          margin-bottom: 1em;
+        }
+        
+        .crypto-price h3 {
+          margin-left: 1em;
+        }
+        
+        .crypto-price h5 {
+          opacity: 0.8;
+          font-weight: 500;
+        }
+        
+        #market_price_display .flex, #balance_panel .flex {
+          margin-bottom: 1.5em;
+        }
+        
+        #market_price_display .light-text, #balance_panel .light-text {
+          -webkit-box-flex: 1;
+              -ms-flex: 1;
+                  flex: 1;
+        }
+        
+        #market_price_display svg, #balance_panel svg {
+          margin-left: -0.4em;
+          margin-right: 0.5em;
+        }
+        
+        #balance_panel .grid {
+          margin-top: 1.5em;
+        }
+        
+        .empty-state {
+          padding: 2rem;
+          text-align: center;
+          display: none;
+          font-weight: 500;
+        }
+        
+        .dropdown {
+          position: relative;
+        }
+        
+        .dropdown header {
+          border-bottom: solid rgba(var(--text), 0.1) 1px;
+          padding: 1.5em;
+          display: -ms-grid;
+          display: grid;
+          -ms-grid-columns: 1fr auto;
+              grid-template-columns: 1fr auto;
+          -webkit-box-align: center;
+              -ms-flex-align: center;
+                  align-items: center;
+        }
+        
+        .dropdown header h5 {
+          cursor: pointer;
+          padding: 0.4em 0 0.4em 1em;
+          text-transform: uppercase;
+          letter-spacing: 0.1em;
+        }
+        
+        .dropdown .dropdown-content {
+          width: calc(100vw - 2rem);
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-orient: vertical;
+          -webkit-box-direction: normal;
+              -ms-flex-direction: column;
+                  flex-direction: column;
+          position: absolute;
+          right: 0;
+          top: 100%;
+          background: rgba(var(--foreground), 1);
+          -webkit-box-shadow: 0.2em 0.4em 1em rgba(0, 0, 0, 0.2);
+                  box-shadow: 0.2em 0.4em 1em rgba(0, 0, 0, 0.2);
+          border-radius: 0.4em;
+          overflow: hidden;
+          z-index: 2;
+          -webkit-transition: opacity 0.3s;
+          transition: opacity 0.3s;
+        }
+        
+        .dropdown #notification_container {
+          overscroll-behavior: contain;
+          overflow-y: auto;
+        }
+        
+        .dropdown #notification_container:empty ~ .empty-state {
+          display: block;
+        }
+        
+        .dropdown #notification_badge {
+          position: absolute;
+          top: -0.1em;
+          right: -0.1em;
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          text-align: center;
+          -webkit-box-align: center;
+              -ms-flex-align: center;
+                  align-items: center;
+          -webkit-transition: -webkit-transform 0.3s;
+          transition: -webkit-transform 0.3s;
+          transition: transform 0.3s;
+          transition: transform 0.3s, -webkit-transform 0.3s;
+        }
+        
+        .dropdown #notification_badge[data-badge]::after {
+          content: attr(data-badge);
+          height: 1.2rem;
+          width: 1.2rem;
+          font-size: 0.9rem;
+          border-radius: 50%;
+          background: #E53935;
+          font-weight: 600;
+        }
+        
+        .dropdown #notification_badge[data-badge='0'] {
+          -webkit-transform: scale(0);
+                  transform: scale(0);
+        }
+        
+        .notification {
+          padding: 1em 1.5em;
+          display: -ms-grid;
+          display: grid;
+          -ms-grid-columns: 1fr auto;
+              grid-template-columns: 1fr auto;
+          gap: 0.4em 1em;
+          margin-bottom: 0.2em;
+        }
+        
+        .notification:last-of-type {
+          border-bottom: none;
+        }
+        
+        .notification h5 {
+          opacity: 0.8;
+          font-weight: normal;
+        }
+        
+        .notification .remove-notification {
+          padding: 0.2em;
+          height: 1.2em;
+          width: 1.2em;
+          stroke: rgba(var(--text), 0.8);
+          stroke-width: 6;
+        }
+        
+        .notification .remove-notification:active {
+          -webkit-transform: scale(0.8);
+                  transform: scale(0.8);
+        }
+        
+        .notification p {
+          opacity: 0.9;
+          line-height: 1.4em;
+          font-family: 'Roboto', sans-serif;
+        }
+        
+        #event_log {
+          position: fixed;
+          top: 0;
+          bottom: 0;
+          right: 0;
+          width: 100%;
+          background: rgba(var(--foreground), 1);
+          z-index: 2;
+          -webkit-transform: translateX(1rem);
+                  transform: translateX(1rem);
+          -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+          transition: opacity 0.3s, -webkit-transform 0.3s;
+          transition: transform 0.3s, opacity 0.3s;
+          transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
+          -webkit-box-shadow: 0 -1em 2em rgba(0, 0, 0, 0.4);
+                  box-shadow: 0 -1em 2em rgba(0, 0, 0, 0.4);
+        }
+        
+        #event_log header {
+          -webkit-box-align: center;
+              -ms-flex-align: center;
+                  align-items: center;
+          padding: 1.5rem 2rem;
+        }
+        
+        #event_log header svg {
+          stroke: rgba(var(--text), 1);
+          stroke-width: 6;
+          height: 2rem;
+          width: 2rem;
+          padding: 0.6rem;
+          cursor: pointer;
+          overflow: visible;
+          margin-left: auto;
+        }
+        
+        #event_log #log {
+          position: absolute;
+          top: 5rem;
+          bottom: 0;
+          font-family: 'Source Code Pro', monospace;
+          width: 100%;
+          padding: 2rem;
+          line-height: 2em;
+          color: rgba(var(--text), 0.8);
+          overflow-y: auto;
+          white-space: pre-line;
+          overscroll-behavior: contain;
+        }
+        
+        #main_loader {
+          -webkit-box-shadow: none;
+                  box-shadow: none;
+          background: none;
+          text-align: center;
+          -webkit-box-pack: center;
+              -ms-flex-pack: center;
+                  justify-content: center;
+        }
+        
+        #main_loader svg {
+          height: 2rem;
+          width: 2rem;
+          stroke: var(--primary-color);
+          stroke-width: 6;
+          fill: none;
+          overflow: visible;
+          stroke-linecap: round;
+          stroke-dashoffset: 210;
+          stroke-dasharray: 210;
+          -ms-grid-column-align: center;
+              justify-self: center;
+          margin-bottom: 2rem;
+        }
+        
+        #main_loader h3 {
+          width: 100%;
+          text-transform: uppercase;
+          font-weight: 400;
+        }
+        
+        #deposit_crypto_popup h5:nth-of-type(2) {
+          margin: 2em 0 1em 0;
+        }
+        
+        .deposit-crypto-group {
+          -webkit-animation: fade 0.3s;
+                  animation: fade 0.3s;
+        }
+        
+        #orders_container:empty ~ .empty-state {
+          display: block;
+        }
+        
+        #main_logo {
+          height: 2rem;
+          width: 2rem;
+          fill: rgba(var(--text), 1);
+          margin-right: 1rem;
+        }
+        
+        @media only screen and (min-width: 640px) {
+          ::-webkit-scrollbar {
+            width: 0.3rem;
+          }
+          ::-webkit-scrollbar-thumb {
+            background: rgba(var(--text), 0.3);
+          }
+          ::-webkit-scrollbar-thumb:hover {
+            background: rgba(var(--text), 0.6);
+          }
+          body {
+            margin: 1rem 6vw;
+          }
+          .popup-container .popup {
+            width: auto;
+            -ms-flex-item-align: center;
+                -ms-grid-row-align: center;
+                align-self: center;
+            border-radius: 0.2rem;
+            height: auto;
+          }
+          main {
+            display: -ms-grid;
+            display: grid;
+            -ms-grid-columns: 1.5fr 1fr;
+                grid-template-columns: 1.5fr 1fr;
+            gap: 2em;
+            padding: 2em 0 0 0;
+            -webkit-box-align: start;
+                -ms-flex-align: start;
+                    align-items: flex-start;
+          }
+          #show_message {
+            -webkit-transform: translate(100%, 0);
+                    transform: translate(100%, 0);
+            margin: 1rem;
+            max-width: 60vw;
+            width: -webkit-max-content;
+            width: -moz-max-content;
+            width: max-content;
+            border-radius: 0.2rem;
+            bottom: 0;
+            top: auto;
+          }
+          #confirmation {
+            padding: 1rem;
+            width: 24rem;
+          }
+          #confirmation button {
+            margin-left: 0.5rem;
+          }
+          #confirmation button:first-of-type {
+            margin-left: auto;
+          }
+          #confirmation p {
+            margin: 1rem;
+            margin-bottom: 2rem;
+          }
+          #sign_in_popup,
+          #buy_crypto_popup, #sell_crypto_popup,
+          #send_crypto_popup, #deposit_crypto_popup, #withdraw_crypto_popup,
+          #deposit_cash_popup, #withdraw_cash_popup {
+            width: 24rem;
+          }
+          .dropdown-content {
+            max-height: 80vh;
+            width: 24rem !important;
+          }
+          #event_log {
+            width: 40vw;
+          }
+        }
+        
+        @media only screen and (min-width: 1280px) {
+          body {
+            margin: 1rem 16vw;
+          }
+          main {
+            -ms-grid-columns: 2fr 1fr;
+                grid-template-columns: 2fr 1fr;
+          }
+        }
+        
+        @media only screen and (min-width: 1920px) {
+          body {
+            font-size: 24px;
+            margin: 2rem 24vw;
+          }
+        }
+        
+        @media only screen and (min-width: 2048px) {
+          body {
+            font-size: 24px;
+            margin: 2rem 32vw;
+          }
+        }
+        
+        @media only screen and (max-width: 320px) {
+          body {
+            font-size: 14px;
+          }
+        }
+        
+        @media (prefers-color-scheme: dark) {
+          :root {
+            --text: 238, 238, 238;
+            --text-light: 170, 170, 170;
+            --foreground: 26, 26, 26;
+            --background: #111;
+          }
+        }
+        
+        @media (prefers-color-scheme: light) {
+          :root {
+            --text: 17, 17, 17;
+            --text-light: 85, 85, 85;
+            --foreground: 255, 255, 255;
+            --background: #eaeaea;
+          }
+        }
+        
+        @media (prefers-color-scheme: no-preference) {
+          :root {
+            --text: 17, 17, 17;
+            --text-light: 85, 85, 85;
+            --foreground: 255, 255, 255;
+            --background: #eaeaea;
+          }
+        }
+        
+        @media (any-hover: hover) {
+          .cancel-order {
+            opacity: 0;
+            -webkit-transition: opacity 0.3s;
+            transition: opacity 0.3s;
+          }
+          .order:hover .cancel-order {
+            opacity: 1;
+          }
+          #main_header .icon:hover {
+            background: rgba(var(--text), 0.2);
+          }
+          .notification .remove-notification {
+            opacity: 0;
+            -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+            transition: opacity 0.3s, -webkit-transform 0.3s;
+            transition: opacity 0.3s, transform 0.3s;
+            transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
+            cursor: pointer;
+          }
+          .notification:hover .remove-notification {
+            opacity: 1;
+          }
+        }
+    </style>
 </head>
 <body>
-    <div class="sidenav">
-        <div class="w3-sidebar w3-bar-block" style="display:none" id="mySidebar">
-          <div
-            onclick="closeMessage()"
-            class="w3-bar-item w3-button w3-large bg-black"
-          >
-            Close
-          </div>
-          <pre id="log">
-                  Event information log
-                  =====================
-          </pre>
-        </div>
-        <div class="w3-button w3-teal w3-xlarge" onclick="displayMessages()">
-            &#8801;
-        </div>
-      </div>
+	<div id="event_log" class="hide">
+		<header class="flex">
+			<h3>Event Log</h3>
+			<svg viewBox="0 0 64 64" onclick="closeMessage()">
+				<title>Close</title>
+				<line x1="0" y1="0" x2="64" y2="64"/>
+				<line class="a" x1="64" y1="0" x2="0" y2="64"/>
+			</svg>
+		</header>
+		<div id="log"></div>
+	</div>
   <audio id="notification_sound">
-    <source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/mpeg">
-    <source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/ogg">
+    <source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg">
+    <source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg">
   </audio>
 
+<h5 id="textCopied" class="hide">
+    Copied
+</h5>
+
   <div class="popup-container hide">
     <div id="confirmation" class="popup">
         <p></p>
         <div>
-            <button class="hover" onclick="hidePopup(this)">Cancel</button>
+            <button class="hover" onclick="hidePopup()">Cancel</button>
             <button class="hover">Ok</button>
         </div>
     </div>
@@ -126,7 +1485,17 @@
             <line x1="0" y1="0" x2="50" y2="50"/>
         </svg>
         </button>
-    </div>
+	</div>
+	<!-- Loading screen-->
+	<div class="popup-container solid-background hide">
+		<div id="main_loader" class="popup">
+			<svg id="loader" viewBox="0 0 73 73">
+				<title>Loader</title>
+				<path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5"/>
+			</svg>
+			<h3 id="tip_container">Loading Local Bitcoin++</h3>
+		</div>
+	</div>
     <!--Sign in popup-->
     <div class="popup-container solid-background hide">
     <div id="sign_in_popup" class="popup">
@@ -160,10 +1529,38 @@
     </div> 
 
 <header id="main_header" class="flex">
-  <span class="expand">
-    <small>RanchiMall</small>
-    <h2>Local Bitcoin++</h2>
-  </span>
+    <svg id="main_logo" viewBox="0 0 27.25 32">
+        <title>RanchiMall</title>
+        <path d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z"/>
+    </svg>
+	<span class="expand">
+		<h5>RanchiMall</h5>
+		<h2>Local Bitcoin++</h2>
+	</span>
+	<svg class="icon" viewBox="0 0 64 64" onclick="displayMessages()">
+		<title>Console</title>
+		<rect x="0" y="0" width="64" height="64" rx="6"/>
+		<polyline points="14.6 16.3 30.3 32 14.6 47.7"/>
+		<line x1="30.73" y1="47.7" x2="49.4" y2="47.7"/>
+	</svg>
+	<div id="notifiation" class="dropdown">
+		<span>
+			<svg class="icon" viewBox="0 0 50.49 64" onclick="showNotifications()">
+				<title>Notifications</title>
+				<path d="M51.47,53.09A3.9,3.9,0,0,0,56,50l.42-2.3a2.56,2.56,0,0,0-1-2.44c-3.18-2.56-3.58-7.27-3-10.54.74-4.07,1.7-9.3,1.72-9.46,2-11.08-1.62-17.7-7.6-21.52A18.74,18.74,0,0,0,32.75,1.17C25.81,2.61,20.05,7.51,18,18.6c0,.16-1,5.38-1.74,9.45-.6,3.27-2.64,7.54-6.52,8.81A2.54,2.54,0,0,0,8,38.8l-.42,2.3a3.91,3.91,0,0,0,3.14,4.54Z" transform="translate(-6.75 0)"/>
+				<path d="M25.23,53.38c0,.18,0,.36,0,.54A9.3,9.3,0,0,0,43.39,56.7Z" transform="translate(-6.75 0)"/>
+			</svg>
+			<div id="notification_badge" data-badge='0'></div>
+		</span>
+		<div id="notification_panel" class="dropdown-content hide">
+			<header>
+				<h3>Notifications</h3>
+				<h5 id="clear_all_notifications" onclick="clearAllNotifications()">Clear all</h5>
+      		</header>
+			<div id="notification_container"></div>
+			<h4 class="empty-state">Nothing to see here</h4>
+		</div>
+	</div>
 </header>
 <main class="">
     <div id="left" class="bottom-margin grid">
@@ -175,91 +1572,111 @@
             </ul>
             <div id="switcher_body">
                 <div id="asset_section" class="exchange-section grid">
-                    <span id="buy_crypto_btn" class="exchange-option">
-                      <svg viewBox="0 0 74.98 73.5">
-                        <title>Buy icon</title>
-                        <path d="M68.62,32.25H79.73a3.26,3.26,0,0,1,3.44,3v48a3.25,3.25,0,0,1-3.44,3H16.45a3.25,3.25,0,0,1-3.44-3v-48a3.26,3.26,0,0,1,3.44-3h11.1" transform="translate(-12.51 -13.25)"/>
-                        <rect x="45.48" y="37.5" width="29" height="17" rx="3.72"/>
-                        <path d="M83.27,51.25a3.22,3.22,0,0,1,3.21,3.22V64a3.21,3.21,0,0,1-3.21,3.21H61.7A3.22,3.22,0,0,1,58.48,64V54.47a3.23,3.23,0,0,1,3.22-3.22H83.27m0-1H61.7a4.22,4.22,0,0,0-4.22,4.22V64a4.21,4.21,0,0,0,4.22,4.21H83.27A4.2,4.2,0,0,0,87.48,64V54.47a4.21,4.21,0,0,0-4.21-4.22Z" transform="translate(-12.51 -13.25)"/>
-                        <circle cx="53.23" cy="46" r="4"/><path d="M65.73,55.75a3.5,3.5,0,1,1-3.5,3.5,3.51,3.51,0,0,1,3.5-3.5m0-1a4.5,4.5,0,1,0,4.5,4.5,4.51,4.51,0,0,0-4.5-4.5Z" transform="translate(-12.51 -13.25)"/>
-                        <line x1="35.49" x2="35.49" y2="37.58"/>
-                        <polyline points="23.39 25.79 35.49 37.89 47.6 25.79"/>
-                      </svg>                                               
+				<span id="buy_crypto_btn" class="exchange-option" title="Buy crypto">
+						<svg viewBox="0 0 47 64.15">
+							<title>Buy crypto</title>
+							<path d="M42.19,13.67V9.52a8.68,8.68,0,1,0-17.35,0v4.15" transform="translate(-10 0.16)"/>
+							<line x1="34.08" y1="14.63" x2="30.24" y2="14.63"/>
+							<line x1="16.79" y1="14.63" x2="12.94" y2="14.63"/>
+							<line x1="23.2" y1="29.5" x2="23.2" y2="43.37"/>
+							<line x1="30.14" y1="36.43" x2="16.27" y2="36.43"/>
+							<rect x="1" y="9.16" width="45" height="54" rx="4"/>
+							<line x1="1" y1="54.16" x2="46" y2="54.16"/>
+						</svg>
                         <h5>Buy</h5>
                     </span>
-                    <span id="sell_crypto_btn" class="exchange-option">
-                      <svg viewBox="0 0 74.98 73.5">
-                        <title>Sell icon</title>
-                        <path d="M68.62,32.25H79.73a3.26,3.26,0,0,1,3.44,3v48a3.25,3.25,0,0,1-3.44,3H16.45a3.25,3.25,0,0,1-3.44-3v-48a3.26,3.26,0,0,1,3.44-3h11.1" transform="translate(-12.51 -13.25)"/>
-                        <rect class="b" x="45.48" y="37.5" width="29" height="17" rx="3.72"/>
-                        <path d="M83.27,51.25a3.22,3.22,0,0,1,3.21,3.22V64a3.21,3.21,0,0,1-3.21,3.21H61.7A3.22,3.22,0,0,1,58.48,64V54.47a3.23,3.23,0,0,1,3.22-3.22H83.27m0-1H61.7a4.22,4.22,0,0,0-4.22,4.22V64a4.21,4.21,0,0,0,4.22,4.21H83.27A4.2,4.2,0,0,0,87.48,64V54.47a4.21,4.21,0,0,0-4.21-4.22Z" transform="translate(-12.51 -13.25)"/>
-                        <circle  cx="53.23" cy="46" r="4"/>
-                        <path d="M65.73,55.75a3.5,3.5,0,1,1-3.5,3.5,3.51,3.51,0,0,1,3.5-3.5m0-1a4.5,4.5,0,1,0,4.5,4.5,4.51,4.51,0,0,0-4.5-4.5Z" transform="translate(-12.51 -13.25)"/>
-                        <line x1="35.49" y1="38.6" x2="35.49" y2="1.02"/>
-                        <polyline points="47.6 12.81 35.49 0.71 23.39 12.81"/>
-                      </svg>                     
+                    <span id="sell_crypto_btn" class="exchange-option" title="Sell crypto">
+						<svg viewBox="0 0 47 64.15">
+							<title>Sell crypto</title>
+							<path d="M42.19,13.67V9.52a8.68,8.68,0,1,0-17.35,0v4.15" transform="translate(-10 0.16)"/>
+							<line x1="34.08" y1="14.63" x2="30.24" y2="14.63"/>
+							<line x1="16.79" y1="14.63" x2="12.94" y2="14.63"/>
+							<line x1="30.14" y1="36.43" x2="16.27" y2="36.43"/>
+							<rect x="1" y="9.16" width="45" height="54" rx="4"/>
+							<line x1="1" y1="54.16" x2="46" y2="54.16"/>
+						</svg>                 
                         <h5>Sell</h5>
                     </span>
                 </div>
                 <div id="crypto_section" class="exchange-section grid hide-completely">
                     <span id="send_crypto_btn" class="exchange-option">
-                        <svg viewBox="0 0 73 73">
-                            <line x1="22.13" y1="50.87" x2="50.48" y2="22.52"/>
-                            <polyline points="30.71,22.24 50.76,22.24 50.76,42.29 "/>
-                            <rect x="0.5" y="0.5" transform="matrix(6.123234e-17 -1 1 6.123234e-17 0 73)" class="st1" width="72" height="72"/>
-                        </svg>                                                 
+                        <svg viewBox="0 0 72 72">
+							<title>Send token icon</title>
+							<polygon points="69.65 0.8 1.33 27.53 28.06 36.45 34.01 36.45 34.01 42.39 42.92 69.12 69.65 0.8"/>
+						</svg>                                              
                         <h5>Send</h5>
                     </span>
                     <span id="deposit_crypto_btn" class="exchange-option">
-                        <svg viewBox="0 0 73 73">
-                            <line x1="33.78" y1="22.72" x2="33.78" y2="62.81"/>
-                            <polyline class="st0" points="47.96,49.03 33.78,63.2 19.61,49.03 "/>
-                            <line x1="47.15" y1="23.09" x2="47.15" y2="9.73"/>
-                            <line x1="40.47" y1="16.41" x2="53.83" y2="16.41"/>
-                            <rect x="0.5" y="0.5" transform="matrix(6.123234e-17 -1 1 6.123234e-17 0 73)" class="st1" width="72" height="72"/>
-                        </svg>                       
+						<svg viewBox="0 0 52 51.5">
+							<title>deposit icon</title>
+							<line x1="4" y1="28" x2="4" y2="19.5"/>
+							<polyline points="4 6 4 1 51 1 51 48 4 48 4 41.5"/>
+							<line x1="9" y1="50" x2="18" y2="50"/>
+							<line x1="36" y1="50" x2="45" y2="50"/>
+							<circle cx="27.5" cy="30" r="9.5"/>
+							<circle cx="27.5" cy="30" r="3.5"/>
+							<rect x="1" y="6" width="6" height="13.5" rx="2.76"/>
+							<rect x="1" y="28" width="6" height="13.5" rx="2.76"/>
+						</svg>                     
                         <h5>Deposit</h5>
                     </span>
                     <span id="withdraw_crypto_btn" class="exchange-option">
-                        <svg viewBox="0 0 73 73">
-                            <line x1="33.78" y1="63.73" x2="33.78" y2="23.63"/>
-                            <polyline points="19.61,37.42 33.78,23.24 47.96,37.42 "/>
-                            <line x1="40.47" y1="16.41" x2="53.83" y2="16.41"/>
-                            <rect x="0.5" y="0.5" transform="matrix(6.123234e-17 -1 1 6.123234e-17 0 73)" class="st1" width="72" height="72"/>
-                        </svg>
+						<svg class="icon banking" viewBox="0 0 52 60">
+							<title>withdraw icon</title>
+							<line x1="4" y1="33.5" x2="4" y2="25"/>
+							<polyline points="41.52 6.5 51 6.5 51 53.5 41.69 53.5"/>
+							<line x1="9" y1="55.5" x2="14" y2="55.5"/>
+							<line x1="43" y1="55.5" x2="45" y2="55.5"/>
+							<rect x="1" y="11.5" width="6" height="13.5" rx="2.76"/>
+							<rect x="1" y="33.5" width="6" height="13.5" rx="2.76"/>
+							<polyline points="3.81 11.5 3.81 6.5 41.5 1 41.69 59 3.81 53.5 3.81 47"/>
+							<path d="M35.64,39.19c0,6.31-3.25,11.45-7.22,11.48s-7-4.92-7-11.07,3.13-11.29,7.05-11.48S35.64,32.88,35.64,39.19Z" transform="translate(-6 -2)"/>
+							<path d="M31.06,39.32c0,2.31-1.19,4.2-2.64,4.23s-2.62-1.79-2.62-4.08S27,35.3,28.42,35.24,31.06,37,31.06,39.32Z" transform="translate(-6 -2)"/>
+						</svg>
                         <h5>Withdraw</h5>
                     </span>
                 </div>
                 <div id="cash_section" class="exchange-section grid hide-completely">
                     <span id="deposit_cash_btn" class="exchange-option">
-                        <svg viewBox="0 0 73 73">
-                            <line x1="33.78" y1="22.72" x2="33.78" y2="62.81"/>
-                            <polyline class="st0" points="47.96,49.03 33.78,63.2 19.61,49.03 "/>
-                            <line x1="47.15" y1="23.09" x2="47.15" y2="9.73"/>
-                            <line x1="40.47" y1="16.41" x2="53.83" y2="16.41"/>
-                            <rect x="0.5" y="0.5" transform="matrix(6.123234e-17 -1 1 6.123234e-17 0 73)" class="st1" width="72" height="72"/>
-                        </svg>                               
+                        <svg viewBox="0 0 52 51.5">
+							<title>deposit icon</title>
+							<line x1="4" y1="28" x2="4" y2="19.5"/>
+							<polyline points="4 6 4 1 51 1 51 48 4 48 4 41.5"/>
+							<line x1="9" y1="50" x2="18" y2="50"/>
+							<line x1="36" y1="50" x2="45" y2="50"/>
+							<circle cx="27.5" cy="30" r="9.5"/>
+							<circle cx="27.5" cy="30" r="3.5"/>
+							<rect x="1" y="6" width="6" height="13.5" rx="2.76"/>
+							<rect x="1" y="28" width="6" height="13.5" rx="2.76"/>
+						</svg>                             
                         <h5>Deposit</h5>
                     </span>
                     <span id="withdraw_cash_btn" class="exchange-option">
-                        <svg viewBox="0 0 73 73">
-                            <line x1="33.78" y1="63.73" x2="33.78" y2="23.63"/>
-                            <polyline points="19.61,37.42 33.78,23.24 47.96,37.42 "/>
-                            <line x1="40.47" y1="16.41" x2="53.83" y2="16.41"/>
-                            <rect x="0.5" y="0.5" transform="matrix(6.123234e-17 -1 1 6.123234e-17 0 73)" class="st1" width="72" height="72"/>
-                        </svg>
+						<svg class="icon banking" viewBox="0 0 52 60">
+							<title>withdraw icon</title>
+							<line x1="4" y1="33.5" x2="4" y2="25"/>
+							<polyline points="41.52 6.5 51 6.5 51 53.5 41.69 53.5"/>
+							<line x1="9" y1="55.5" x2="14" y2="55.5"/>
+							<line x1="43" y1="55.5" x2="45" y2="55.5"/>
+							<rect x="1" y="11.5" width="6" height="13.5" rx="2.76"/>
+							<rect x="1" y="33.5" width="6" height="13.5" rx="2.76"/>
+							<polyline points="3.81 11.5 3.81 6.5 41.5 1 41.69 59 3.81 53.5 3.81 47"/>
+							<path d="M35.64,39.19c0,6.31-3.25,11.45-7.22,11.48s-7-4.92-7-11.07,3.13-11.29,7.05-11.48S35.64,32.88,35.64,39.19Z" transform="translate(-6 -2)"/>
+							<path d="M31.06,39.32c0,2.31-1.19,4.2-2.64,4.23s-2.62-1.79-2.62-4.08S27,35.3,28.42,35.24,31.06,37,31.06,39.32Z" transform="translate(-6 -2)"/>
+						</svg>
                         <h5>Withdraw</h5>
                     </span>
                 </div>
             </div>
         </div>
         <div id="orders_panel" class="top-padding top-margin card">
-            <h3 class="light-text bottom-padding bottom-margin">
+            <h3 class="light-text bottom-padding bottom-margin" onclick="showPopup('main_loader', 'no')">
                 My Orders
+			</h3>
+            <div id="orders_container"></div>
+            <h3 class="empty-state">
+                No trade orders yet.
             </h3>
-            <div id="orders_container">
-                <!-- Container for trade orders-->
-            </div>
         </div>
     </div>
     <div id="right">
@@ -328,45 +1745,31 @@
               </span>
             </div>
             <div id="balance_panel" class="top-padding card">
-                <h3 class="light-text bottom-padding">
-                    Balance
-                </h3>
+				<div class="flex">
+					<h3 class="light-text">
+						Balance
+					</h3>
+					<div id="refresh_bal" class="action refresh">
+						<button type="submit">
+							refresh
+						</button>
+						<svg viewBox="0 0 73 73" class="loader">
+							<path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5"/>
+						</svg>
+					</div>
+				  </div>
                 <div class="balance-display">
                     <h5 class="light-text">Cash</h5>
-                    <h2 id="user_cash_bal"> </h2>
-                    <div id="refresh_cash_bal" class="action refresh">
-                      <button type="submit">
-                          refresh
-                      </button>
-                      <svg viewBox="0 0 73 73" class="loader">
-                          <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5"/>
-                      </svg>
-                    </div>
+                    <h2 id="user_cash_bal">0</h2>
                 </div>
-                <div class="grid grid-2 top-margin">
+                <div class="grid grid-2">
                     <div class="balance-display">
                         <h5 class="light-text">Bitcoin</h5>
-                        <h2 id="user_btc_bal"> </h2>
-                        <div id="refresh_btc_bal" class="action refresh">
-                          <button type="submit">
-                              refresh
-                          </button>
-                          <svg viewBox="0 0 73 73" class="loader">
-                              <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5"/>
-                          </svg>
-                        </div>
+                        <h2 id="user_btc_bal">0</h2>
                     </div>
                     <div class="balance-display">
                         <h5 class="light-text">FLO</h5>
-                        <h2 id="user_flo_bal"> </h2>
-                        <div id="refresh_flo_bal" class="action refresh">
-                          <button type="submit">
-                              refresh
-                          </button>
-                          <svg viewBox="0 0 73 73" class="loader">
-                              <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5"/>
-                          </svg>
-                        </div>
+                        <h2 id="user_flo_bal">0</h2>
                     </div>
                 </div>
             </div>
@@ -376,13 +1779,13 @@
       <div class="popup-container hide">
         <div id="buy_crypto_popup" class="popup">
             <div class="container-header bottom-margin">
-                <svg class="back-arrow" onclick="hidePopup(this)" viewBox="0 0 31.24 56.83">
+                <svg class="back-arrow" onclick="hidePopup()" viewBox="0 0 31.24 56.83">
                     <title>Close this popup</title>
                     <polyline points="29.83,1.41 2.83,28.41 29.83,55.41 "/>
                 </svg>
                 <h3>Buy Crypto</h3>
                 <div class="action" id="trade_buy_button">
-                    <button class="btn" type="submit">
+                    <button class="btn" type="submit" disabled>
                         Buy
                     </button>
                     <svg viewBox="0 0 73 73" class="loader">
@@ -401,13 +1804,13 @@
       <div class="popup-container hide">
           <div id="sell_crypto_popup" class="popup">
               <div class="container-header bottom-margin">
-                  <svg class="back-arrow" onclick="hidePopup(this)" viewBox="0 0 31.24 56.83">
+                  <svg class="back-arrow" onclick="hidePopup()" viewBox="0 0 31.24 56.83">
                       <title>Close this popup</title>
                       <polyline points="29.83,1.41 2.83,28.41 29.83,55.41 "/>
                   </svg>
                   <h3>Sell Crypto</h3>
                   <div class="action" id="trade_sell_button">
-                      <button class="btn" type="submit">
+                      <button class="btn" type="submit" disabled>
                           Sell
                       </button>
                       <svg viewBox="0 0 73 73" class="loader">
@@ -427,7 +1830,7 @@
       <div class="popup-container hide">
           <div id="send_crypto_popup" class="popup">
               <div class="container-header bottom-margin">
-                  <svg class="back-arrow" onclick="hidePopup(this)" viewBox="0 0 31.24 56.83">
+                  <svg class="back-arrow" onclick="hidePopup()" viewBox="0 0 31.24 56.83">
                       <title>Close this popup</title>
                       <polyline points="29.83,1.41 2.83,28.41 29.83,55.41 "/>
                   </svg>
@@ -456,7 +1859,7 @@
                   <div class="label">Reciever's Address</div>
               </label>
               <label class="input">
-                  <input name="amount" type="number" inputmode="numeric" required>
+                  <input name="amount" type="number" step="0.00000001" inputmode="numeric" required>
                   <div class="label">Amount</div>
               </label>
           </div>
@@ -464,45 +1867,69 @@
       <div class="popup-container hide">
           <div id="deposit_crypto_popup" class="popup">
               <div class="container-header bottom-margin">
-                  <svg class="back-arrow" onclick="hidePopup(this)" viewBox="0 0 31.24 56.83">
+                  <svg class="back-arrow" onclick="hidePopup()" viewBox="0 0 31.24 56.83">
                       <title>Close this popup</title>
                       <polyline points="29.83,1.41 2.83,28.41 29.83,55.41 "/>
                   </svg>
                   <h3>Deposit Crypto</h3>
                   <div class="action" id="depositCryptoButton">
                       <button class="btn" type="submit" disabled>
-                          Deposit
+                          Proceed
                       </button>
                       <svg viewBox="0 0 73 73" class="loader">
                           <path d="M72.5,36.5c0,19.88-16.12,36-36,36s-36-16.12-36-36s16.12-36,36-36S72.5,16.62,72.5,36.5"/>
                       </svg>
                   </div>
               </div>
-              <h5>Select Crypto</h5>
-              <div class="crypto-selector flex expand" id="deposit_crypto_div"></div>
-              <label class="input">
-                  <input id="trade_amount_select" type="number" inputmode="numeric" required>
-                  <div class="label">Amount</div>
-              </label>
-              <h5>Click After Sending Crypto To Exchange</h5>
-              <div class="flex expand" id="cnf_crypto_deposit">
-                <div class="action">
-                    <button class="btn">
-                    <div class="label">Confirm Deposit</div>
-                </div>
+              <div id="select_deposit_crypto_section" class="expand deposit-crypto-group">
+                <h5>Select Crypto</h5>
+                <div class="crypto-selector flex expand" id="deposit_crypto_div"></div>
+                <label class="input">
+                    <input id="trade_amount_select" type="number" step="0.00000001" inputmode="numeric" required>
+                    <div class="label">Amount</div>
+                </label>
               </div>
-            </div>
+                <div id="send_crypto_hidden_section" class="expand hide-completely deposit-crypto-group">
+                    <label class="input">
+                        <input name="senderFloId" type="text" required disabled>
+                        <div class="label">Sender's FLO ID</div>
+                    </label>
+                    <label class="input">
+                        <input name="senderPrivateKey" type="password" required disabled>
+                        <div class="label">Sender's Private Key</div>
+                    </label>
+                </div>
+              <div id="confirm_deposit_btn_section" class="expand deposit-crypto-group  hide-completely">
+                    <h5> Send crypto to this address:</h5>
+                    <div class="grid grid-2 copy-row">
+                        <h3 class="breakable" id="server_deposit_crypto_addr">Waiting for Server's response...</h3>
+                        <svg class="copy-icon" onclick="copyToClipboard(this.parentNode, '0')" viewBox="0 0 54 64">
+                            <title>Copy</title>
+                            <path d="M53,0H22.14a6,6,0,0,0-6,6v5H11a6,6,0,0,0-6,6V58a6,6,0,0,0,6,6H41.86a6,6,0,0,0,6-6V53H53a6,6,0,0,0,6-6V6A6,6,0,0,0,53,0ZM43.89,58a2,2,0,0,1-2,2H11a2,2,0,0,1-2-2V17.06a2,2,0,0,1,2-2H41.86a2,2,0,0,1,2,2ZM55,46.94a2,2,0,0,1-2,2H47.89V17.06a6,6,0,0,0-6-6H20.11V6a2,2,0,0,1,2-2H53a2,2,0,0,1,2,2Z" transform="translate(-5)"/>
+                        </svg>
+                    </div>
+                    <h5 class="bottom-margin">You can send crypto from your preferred app or </h5>
+                    <div class="grid grid-2">
+                        <button class="btn expand secondary-btn" id="cnf_crypto_deposit">
+                            Confirm deposit
+                        </button>
+                        <button id="send_natively" class="btn expand primary-btn">Send from here</button>
+                    </div>
+                    <h5 class="top-margin">*Click confirm After Sending Crypto To Exchange</h5>
+
+              </div>    
+          </div>
       </div>
       <div class="popup-container hide">
           <div id="withdraw_crypto_popup" class="popup">
               <div class="container-header bottom-margin">
-                  <svg class="back-arrow" onclick="hidePopup(this)" viewBox="0 0 31.24 56.83">
+                  <svg class="back-arrow" onclick="hidePopup()" viewBox="0 0 31.24 56.83">
                       <title>Close this popup</title>
                       <polyline points="29.83,1.41 2.83,28.41 29.83,55.41 "/>
                   </svg>
                   <h3>Withdraw Crypto</h3>
                   <div class="action" id="withdrawCryptoButton">
-                      <button class="btn" type="submit">
+                      <button class="btn" type="submit" disabled>
                           withdraw
                       </button>
                       <svg viewBox="0 0 73 73" class="loader">
@@ -517,7 +1944,7 @@
                   <div class="label">Recieving crypto Address</div>
               </label>
               <label class="input">
-                  <input id="crypto_withdraw_amount" inputmode="numeric" type="number" required>
+                  <input id="crypto_withdraw_amount" inputmode="numeric" type="number" step="0.00000001" required>
                   <div class="label">Amount</div>
               </label>
           </div>
@@ -526,7 +1953,7 @@
       <div class="popup-container hide">
           <div id="deposit_cash_popup" class="popup">
               <div class="container-header bottom-margin">
-                  <svg class="back-arrow" onclick="hidePopup(this)" viewBox="0 0 31.24 56.83">
+                  <svg class="back-arrow" onclick="hidePopup()" viewBox="0 0 31.24 56.83">
                       <title>Close this popup</title>
                       <polyline points="29.83,1.41 2.83,28.41 29.83,55.41 "/>
                   </svg>
@@ -545,7 +1972,7 @@
                   <div class="label">Depositer's UPI address</div>
               </label>
               <label class="input">
-                  <input name="amount" type="number" inputmode="numeric" required>
+                  <input name="amount" type="number" step="0.01" inputmode="numeric" required>
                   <div class="label">Amount</div>
               </label>
               <h3 id="upiToAddress" class="hide-completely"></h3>
@@ -554,7 +1981,7 @@
       <div class="popup-container hide">
           <div id="withdraw_cash_popup" class="popup">
               <div class="container-header bottom-margin">
-                  <svg class="back-arrow" onclick="hidePopup(this)" viewBox="0 0 31.24 56.83">
+                  <svg class="back-arrow" onclick="hidePopup()" viewBox="0 0 31.24 56.83">
                       <title>Close this popup</title>
                       <polyline points="29.83,1.41 2.83,28.41 29.83,55.41 "/>
                   </svg>
@@ -573,7 +2000,7 @@
                   <div class="label">Recieving UPI address</div>
               </label>
               <label class="input">
-                  <input name="amount" type="number" name="hi" inputmode="numeric" required>
+                  <input name="amount" type="number" step="0.01" inputmode="numeric" required>
                   <div class="label">Amount</div>
               </label>
           </div>
@@ -600,132 +2027,219 @@
                         <button id="${tradeId}-${localbitcoinplusplus.wallets.my_local_flo_address}-${type}" 
                             class="cancel-order">Cancel</button>`;
                 return card;
+            },
+            notification: function(message){
+                let card = document.createElement('div');
+				  card.classList.add('notification');
+				  card.innerHTML = `
+					<svg class="remove-notification" viewBox="0 0 50 50">
+						<title>Close this notification</title>
+						<line x1="50" y1="0" x2="0" y2="50"/>
+						<line x1="0" y1="0" x2="50" y2="50"/>
+					</svg>
+					<p>${message}</p>`
+                  return card;
             }
         }
 
         //Checks for internet connection status
-            if(!navigator.onLine) 
-                notify('There seems to be a problem connecting to the internet.','error', 'fixed')
-            window.addEventListener('offline', () =>{
-                notify('There seems to be a problem connecting to the internet.','error', 'fixed')
-            })
-            window.addEventListener('online', () =>{
-                notify('We are back online.')
-            }) 
-            // function required for popups or modals to appear
-            function showPopup(popup, permission){ 
-                let thisPopup = document.getElementById(popup);
-                thisPopup.parentNode.classList.remove('hide');    
-                thisPopup.classList.add('no-transformations');    
-                window.onmousedown = function(event) {
-                    if (event.target == thisPopup.parentNode && permission !== 'no')
-                        hidePopup(popup, permission);
-                }
-            }
+		if(!navigator.onLine) 
+			notify('There seems to be a problem connecting to the internet.','error', true)
+		window.addEventListener('offline', () =>{
+			notify('There seems to be a problem connecting to the internet.','error', true)
+		})
+		window.addEventListener('online', () =>{
+			notify('We are back online.')
+		}) 
+		
+		// function required for popups or modals to appear
+		class Stack { 
+			constructor(){ 
+				this.items = []; 
+			} 
+			push(element){ 
+				this.items.push(element); 
+			} 
+			pop(){ 
+				if (this.items.length == 0) 
+					return "Underflow"; 
+				return this.items.pop(); 
+			}
+			peek(){ 
+				return this.items[this.items.length - 1]; 
+			} 
+		} 
+		let popupStack = new Stack(),
+			loader = document.getElementById('loader'),
+			zIndex = 10; 
 
-            // hides the popup or modal 
-            function hidePopup(pop, permission){
-                let popup;
-                typeof pop === 'string' ? popup = document.getElementById(pop) : popup = pop.closest('.popup');
-                if(permission === 'no') return;
-                popup.closest('.popup-container').classList.add('hide');    
-                popup.closest('.popup').classList.remove('no-transformations'); 
+		function showPopup(popup, permission){ 
+			let thisPopup = document.getElementById(popup);
+			thisPopup.parentNode.classList.remove('hide');    
+			thisPopup.classList.add('no-transformations');    
+			popupStack.push({popup, permission})
+			zIndex++;
+			thisPopup.parentNode.setAttribute('style', `z-index: ${zIndex}`)
+			if(popup === 'main_loader'){
+                loader.classList.add('animate-loader')
+                const tipsInterval = setInterval(changeTips, 2000)
+                document.querySelector('main').classList.add('hide-completely')
+            }
+		}
+
+		// hides the popup or modal 
+		function hidePopup(){
+			let {popup, permission} = popupStack.pop();
+			thisPopup = document.getElementById(popup);
+			thisPopup.closest('.popup-container').classList.add('hide');    
+			thisPopup.closest('.popup').classList.remove('no-transformations'); 
+			setTimeout(() => {
+				clearAllInputs(thisPopup) 
+				zIndex--;
+				thisPopup.parentNode.setAttribute('style', `z-index: ${zIndex}`)
+				if(thisPopup.querySelector('.btn')){
+					btnLoading(thisPopup.querySelector('.action'), 'stop')
+					thisPopup.querySelector("button[type='submit']").disabled = true;
+				}
+			}, 400)
+			if(popup === 'deposit_cash_popup'){
+				thisPopup.querySelector('#upiToAddress').classList.add('hide-completely')
+				thisPopup.querySelectorAll('.input').forEach((input) => {
+				    input.classList.remove('hide-completely')
+				})
+            }
+            if(popup === 'deposit_crypto_popup'){
                 setTimeout(() => {
-                    clearAllInputs(popup) 
-                    if(popup.querySelector('.btn')){
-                        popup.querySelector('.btn').classList.remove('clip')
-                        popup.querySelector('.loader').classList.remove('animate-loader')
-                        popup.querySelector("button[type='submit']").disabled = true;
-                    }
+                    depositCryptoButton.classList.remove('hide-completely');
+                    showElement(selectDepositCryptoSection, 'deposit-crypto-group');
+                    depositCryptoButton.firstElementChild.textContent = 'proceed'
                 }, 400)
-            if(popup.id === 'deposit_cash_popup'){
-                popup.querySelector('#upiToAddress').classList.add('hide-completely')
-                popup.querySelectorAll('.input').forEach((input) => {
-                input.classList.remove('hide-completely')
+                document.getElementById('send_crypto_hidden_section').querySelectorAll('input').forEach(input => {
+                    input.disabled = true;
                 })
+                depositCryptoButtonClicked = 0;
             }
+			if(popup === 'main_loader'){
+                loader.classList.remove('animate-loader')
+                clearInterval(tipsInterval)
+                document.querySelector('main').classList.remove('hide-completely')
             }
+		}
 
-            function setAttributes(el, attrs) {
-                for(var key in attrs) {
-                    el.setAttribute(key, attrs[key]);
-                }
-            }
+		function setAttributes(el, attrs) {
+			for(var key in attrs) {
+				el.setAttribute(key, attrs[key]);
+			}
+		}
 
-            function clearAllInputs(parent){
-                parent.querySelectorAll("input").forEach((field) => {
-                if(field.getAttribute('type') !== 'radio'){
-                    field.value = '';
-                    if(field.closest('.input'))
-                    {
-                        field.closest('.input').classList.remove('animate-label')
-                    }
-                }
-                else
-                    field.checked = false
-                })
-            }
+		function clearAllInputs(parent){
+			parent.querySelectorAll("input").forEach((field) => {
+			if(field.getAttribute('type') !== 'radio'){
+				field.value = '';
+				if(field.closest('.input'))
+				{
+					field.closest('.input').classList.remove('animate-label')
+				}
+			}
+			else
+				field.checked = false
+			})
+		}
 
-            //Function for displaying toast notifications. pass in error for mode param if you want to show an error.
-            function notify(message, mode, behavior){
-                let banner = document.getElementById('show_message'),
-                    back;
-                if(mode === 'error'){
-                banner.querySelector('#error_icon').classList.remove('hide-completely')
-                banner.querySelector('#done_icon').classList.add('hide-completely')
-                } 
-                else{
-                banner.querySelector('#error_icon').classList.add('hide-completely')
-                banner.querySelector('#done_icon').classList.remove('hide-completely')
-                }
-                    
-                banner.style.background = back;
-                banner.classList.add('no-transformations')
-                banner.classList.remove('hide')
-                banner.querySelector('#notification_text').textContent = message.charAt(0).toUpperCase() + message.slice(1);
-                if(navigator.onLine)
-                notificationSound.play();
-                banner.querySelector('#hide_banner_btn').onclick = function() {
-                    banner.classList.add('hide')
-                    banner.classList.remove('no-transformations')
-                }
-                clearTimeout(currentTimeout)
-                if(behavior === 'fixed') return;
-                currentTimeout = setTimeout(()=>{
-                    banner.classList.add('hide')
-                    banner.classList.remove('no-transformations')
-                }, 10000)
-            }
-            // displays a popup for asking permission. Use this instead of JS confirm
-            let askConfirmation = function(message){
-                return new Promise((resolve, reject) => {
-                    let popup = document.getElementById('confirmation');
-                    showPopup('confirmation')
-                    popup.children[0].textContent = message;
-                    popup.children[1].firstElementChild.onclick = function() {
-                        hidePopup('confirmation')
-                        resolve(false)
-                    }
-                    popup.children[1].children[1].onclick = function() {
-                        hidePopup('confirmation')
-                        resolve(true);
-                    }
-                })
-            }
-            function enableBtn(btn){
-                if(typeof btn === 'string')
-                    btn = document.getElementById(btn);
-                if(btn.disabled)
-                    btn.disabled = false;
-            }
+		//Function for displaying toast notifications.
+		/*options
+		message - notifiation body text.
+		mode - error or normal notification. only error has to be specified.
+		fixed - if set true notification will not fade after 4s;
+		sound - set true to enable notification sound. ! should only be used for important tasks.
+		setAside - set true to add notification inside notification panel
+		*/
+		let currentCount = 0;
+		function notify(message, mode, fixed, sound, setAside){
+			let banner = document.getElementById('show_message'),
+				notificationContainer = document.getElementById('notification_container'),
+				notifiationCounter = document.querySelector("#notification_badge");
+				currentCount = parseInt(notifiationCounter.getAttribute('data-badge'));
+			
+			if(mode === 'error'){
+				banner.querySelector('#error_icon').classList.remove('hide-completely')
+				banner.querySelector('#done_icon').classList.add('hide-completely')
+			} 
+			else{
+				banner.querySelector('#error_icon').classList.add('hide-completely')
+				banner.querySelector('#done_icon').classList.remove('hide-completely')
+			}
+			if(setAside){
+				notificationContainer.prepend(render.notification(message));
+				console.log(currentCount)
+				currentCount++;
+				notifiationCounter.setAttribute('data-badge', currentCount);
+			}
+				
+			banner.classList.add('no-transformations')
+			banner.classList.remove('hide')
+			banner.querySelector('#notification_text').textContent = message.charAt(0).toUpperCase() + message.slice(1);
+			if(navigator.onLine && sound){
+				notificationSound.currentTime = 0;
+				notificationSound.play();
+			}
+			banner.querySelector('#hide_banner_btn').onclick = function() {
+				banner.classList.add('hide')
+				banner.classList.remove('no-transformations')
+			}
+			clearTimeout(currentTimeout)
+			if(fixed) return;
+			currentTimeout = setTimeout(()=>{
+				banner.classList.add('hide')
+				banner.classList.remove('no-transformations')
+			}, 4000)
+		}
 
-            function disableBtn(btn){
-                if(typeof btn === 'string')
-                    btn = document.getElementById(btn);
-                if(!btn.disabled)
-                    btn.disabled = true;
-            }
-            function btnLoading(btn, option){
+		function showNotifications(){
+			let notificationPanel = document.getElementById('notification_panel');
+			currentCount = 0;
+			document.querySelector("#notification_badge").setAttribute('data-badge', currentCount);
+			notificationPanel.classList.toggle('hide')
+			window.onmousedown = e => {	
+				if(!e.target.closest('.dropdown'))
+				notificationPanel.classList.add('hide')
+			}
+		}
+
+		function clearAllNotifications(){
+			document.getElementById('notification_container').innerHTML = '';
+		}
+
+		// displays a popup for asking permission. Use this instead of JS confirm
+		let askConfirmation = function(message){
+			return new Promise((resolve, reject) => {
+				let popup = document.getElementById('confirmation');
+				showPopup('confirmation')
+				popup.children[0].textContent = message;
+				popup.children[1].firstElementChild.onclick = function() {
+					hidePopup()
+					resolve(false)
+				}
+				popup.children[1].children[1].onclick = function() {
+					hidePopup()
+					resolve(true);
+				}
+			})
+		}
+		function enableBtn(btn){
+			if(typeof btn === 'string')
+				btn = document.getElementById(btn);
+			if(btn.disabled)
+				btn.disabled = false;
+		}
+
+		function disableBtn(btn){
+			if(typeof btn === 'string')
+				btn = document.getElementById(btn);
+			if(!btn.disabled)
+				btn.disabled = true;
+		}
+        function btnLoading(btn, option){
             if(typeof btn === 'string')
                 btn = document.getElementById(btn);
             if(option === 'start'){
@@ -738,42 +2252,61 @@
             }
         }
 
+        function copyToClipboard(parent, childIndex) {
+            let input = document.createElement('textarea'),
+                toast = document.getElementById('textCopied');
+            input.setAttribute('readonly', '');
+            input.setAttribute('style', 'position: absolute; left: -9999px');
+            document.body.appendChild(input);
+            input.value = parent.children[childIndex].textContent;
+            input.select();
+            document.execCommand('copy');
+            document.body.removeChild(input);
+            toast.classList.remove('hide');
+            setTimeout(() => {
+                toast.classList.add('hide');
+            }, 2000)
+        }
+
         // prevents non numerical input on firefox 
         function preventNonNumericalInput(e) {
             e = e || window.event;
             let charCode = (typeof e.which == "undefined") ? e.keyCode : e.which,
                 charStr = String.fromCharCode(charCode);
 
-            if (!charStr.match(/^\d+$/))
+            if (!charStr.match(/[+-]?([0-9]*[.])?[0-9]+/))
                 e.preventDefault();
         }
 
         function areInputsEmpty(parent){
-        let allInputs = parent.querySelectorAll(".input input"),
-            allRadios = parent.querySelectorAll("input[type='radio']"),
-            radioStatus, inputStatus, counter = 0;
-        inputStatus = [...allInputs].every(input => input.checkValidity())
-        
-        allRadios.forEach(radio => {
-            if(radio.checked)
-            counter++;
-        })
-        if(counter === 1)
-            radioStatus = true;
-        if(inputStatus && radioStatus)
-            return true
-        else false
+			let allInputs = parent.querySelectorAll(".input input:not([disabled])"),
+				allRadios = parent.querySelectorAll("input[type='radio']"),
+				radioStatus, inputStatus, counter = 0;
+			inputStatus = [...allInputs].every(input => input.checkValidity())
+			
+			allRadios.forEach(radio => {
+				if(radio.checked)
+				counter++;
+			})
+			if(counter == allRadios.length/2)
+				radioStatus = true;
+			if(inputStatus && radioStatus)
+				return true
+			else 
+				return false
         }
 
         function formValidation(formElement, e){ 
-        if(formElement.getAttribute('type') === 'number')
-            preventNonNumericalInput(e);
-        let parent = formElement.closest('.popup'), 
-        submitBtn = parent.querySelector("button[type = 'submit']");
-        if(areInputsEmpty(parent))
-            submitBtn.disabled = false;
-        else
-            submitBtn.disabled = true;
+			if(formElement.getAttribute('type') === 'number')
+				preventNonNumericalInput(e);
+			let parent = formElement.closest('.popup'), 
+				submitBtn = parent.querySelector("button[type = 'submit']");
+			if(areInputsEmpty(parent))
+				submitBtn.disabled = false;
+			else{
+				submitBtn.disabled = true;
+				btnLoading(submitBtn.parentNode, 'stop')
+			}
         }
 
         let allExchangeSections = document.querySelectorAll('.exchange-section'),
@@ -788,7 +2321,8 @@
             })
             element.classList.remove('hide-completely')
             thisBtn.classList.add('active')
-        }
+		}
+		
         // Event delegation when clicked on exchage options
         window.addEventListener('load', ()=> {
             document.getElementById('switcher_body').addEventListener('click', (e) => {
@@ -797,67 +2331,87 @@
                 if(e.target.closest('#sell_crypto_btn'))
                     showPopup('sell_crypto_popup')
                 if(e.target.closest('#send_crypto_btn'))
-                    showPopup('send_crypto_popup')
+                    showPopup('send_crypto_popup', 'no')
                 if(e.target.closest('#deposit_crypto_btn'))
-                    showPopup('deposit_crypto_popup')
+                    showPopup('deposit_crypto_popup', 'no')
                 if(e.target.closest('#withdraw_crypto_btn'))
                     showPopup('withdraw_crypto_popup')
                 if(e.target.closest('#deposit_cash_btn'))
                     showPopup('deposit_cash_popup')
                 if(e.target.closest('#withdraw_cash_btn'))
                     showPopup('withdraw_cash_popup')
+			})
+
+			window.addEventListener('mousedown', e => {
+				if(e.target.classList.contains('popup-container') && popupStack.peek().permission !== 'no'){
+					hidePopup()
+				}
+			})
+
+			function checkInput(e){
+				if(e.target.closest('.input')){
+					let parent = e.target.closest('.input');
+					if(parent.firstElementChild.value !== '')
+					parent.classList.add('animate-label')
+					else 
+					parent.classList.remove('animate-label')
+					formValidation(parent.firstElementChild, e)
+                    if(e.key === 'Enter')
+						parent.closest('.popup').querySelector("button[type='submit']").click();
+				}
+			}
+            document.getElementById('popup-parent').addEventListener('input', (e) => {
+				checkInput(e);
             })
             document.getElementById('popup-parent').addEventListener('keyup', (e) => {
-            if(e.target.closest('.input')){
-                let parent = e.target.closest('.input');
-                if(parent.firstElementChild.value !== '')
-                parent.classList.add('animate-label')
-                else 
-                parent.classList.remove('animate-label')
-                formValidation(parent.firstElementChild, e)
-                if(e.key === 'Enter')
-                parent.closest('.popup').querySelector("button[type='submit']").click();
-            }
+				checkInput(e);
             })
 
             //Sign in behaviour
+            document.getElementById('sign_in_popup').addEventListener('input', (e) => {
+				checkInput(e);
+            })
             document.getElementById('sign_in_popup').addEventListener('keyup', (e) => {
-            if(e.target.closest('.input')){
-                let parent = e.target.closest('.input');
-                if(parent.firstElementChild.value !== '')
-                parent.classList.add('animate-label')
-                else 
-                parent.classList.remove('animate-label')
-                formValidation(parent.firstElementChild, e)
-                if(e.key === 'Enter')
-                parent.closest('.popup').querySelector("button[type='submit']").click();
-            }
+				checkInput(e);
             })
 
             document.getElementById('refresh_market_price').addEventListener('click', () => {
-            //Fetch new prices
-            let newBtcPrice, newFloPrice;
-            btnLoading(document.getElementById('refresh_market_price'), 'start')
-            setTimeout(() => {
-                btnLoading(document.getElementById('refresh_market_price'), 'stop')
-                document.getElementById('btc_market_price').textContent = '₹'+ newBtcPrice;
-                document.getElementById('flo_market_price').textContent = '₹'+ newFloPrice;
-            }, 1000)
+				btnLoading('refresh_market_price', 'start')
+				setTimeout(() => {
+					updateMarketPrice(800000, 1.30)
+				}, 1000)
             })
 
-            document.getElementById('balance_panel').addEventListener('click', (e) => {
-            if(e.target.closest('#refresh_cash_bal')){
-                refreshBalance('cashInr', e.target.closest('#refresh_cash_bal'))
-            }
-            if(e.target.closest('#refresh_btc_bal')){
-                refreshBalance('cryptoBtc', e.target.closest('#refresh_btc_bal'))
-            }
-            if(e.target.closest('#refresh_flo_bal')){
-                refreshBalance('cryptoFlo', e.target.closest('#refresh_flo_bal'))
-            }
-            })
-            
-        })
+            document.getElementById('refresh_bal').addEventListener('click', (e) => {
+				btnLoading('refresh_bal', 'start')
+				setTimeout(() => {
+					updateBalance(40000, 50, 600)
+				}, 1000)
+			})
+			
+			let notificationsContainer = document.getElementById('notification_container');
+            notificationsContainer.addEventListener('click', (e) => {
+				if(e.target.closest('.remove-notification'))
+				{
+					e.target.closest('.notification').remove()
+				}
+			})
+		})
+		
+		//call these functions inside your already created functions and provide new value as parameters
+		function updateMarketPrice(btcPrice, floPrice){
+			btnLoading('refresh_market_price', 'stop')
+			document.getElementById('btc_market_price').textContent = '₹'+ btcPrice;
+			document.getElementById('flo_market_price').textContent = '₹'+ floPrice;
+		}
+
+		function updateBalance(inrBal, btcBal, floBal){
+			btnLoading('refresh_bal', 'stop')
+			document.getElementById('user_cash_bal').textContent = '₹'+inrBal;
+			document.getElementById('user_btc_bal').textContent = btcBal;
+			document.getElementById('user_flo_bal').textContent = floBal;
+			notify('balance updated')
+		}
         
         function sendCrypto(btn){
         let parentPopup = btn.closest('.popup'),
@@ -868,27 +2422,6 @@
             receiving_crypto_amount_input = parentPopup.querySelector("input[name='amount']").value;
         
         btnLoading(btn, 'start')  
-        
-        if (utxo_addr_input.length < 1) {
-            err_msg = "Empty UTXO Address.";
-            notify(err_msg);
-            throw new Error(err_msg);
-        }
-        if (utxo_addr_wif_input.length < 1) {
-            err_msg = "Empty Private Key.";
-            notify(err_msg);
-            throw new Error(err_msg);
-        }
-        if (receiver_address_input.length < 1) {
-            err_msg = "Empty Receiving Address.";
-            notify(err_msg);
-            throw new Error(err_msg);
-        }
-        if (receiving_crypto_amount_input <= 0) {
-            err_msg = "Empty Sending Amount.";
-            notify(err_msg);
-            throw new Error(err_msg);
-        }
 
         const RM_TRADE = new localbitcoinplusplus.trade();
         RM_TRADE.sendTransaction(
@@ -907,6 +2440,8 @@
                     let msg = `Transaction Id for your deposited crypto asset: ${resp_txid}`;
                     showMessage(msg);
                     notify(msg);
+                    btnLoading(btn, 'stop')
+                    hidePopup()
                     return true;
                 } catch (error) {
                     console.warn(error);
@@ -915,60 +2450,65 @@
                 }
             }
         });
-
-        setTimeout(() => {
-            btnLoading(btn, 'stop')
-            hidePopup(parentPopup)
-            notify('Crypto sent')
-        }, 1000)
         }
 
+        //show or hide element group from a group
 
-        function refreshBalance(type, btn){ 
-        let newBalance ;
-        switch (type){
-            case 'cashInr':
-            //retrive new balance
-            btnLoading(btn, 'start')
-            setTimeout(()=> {
-            btnLoading(btn, 'stop')
-            newBalance = 600000;
-            document.getElementById('user_cash_bal').textContent = '₹'+newBalance;
-            notify('Cash balance updated')
-            },1000)
-            break;
-            case 'cryptoBtc':
-            //retrive new balance
-            btnLoading(btn, 'start')
-            setTimeout(()=> {
-            btnLoading(btn, 'stop')
-            newBalance = 700;
-            document.getElementById('user_btc_bal').textContent = newBalance;
-            notify('Bitcoin balance updated')
-            },1000)
-            break;
-            case 'cryptoFlo':
-            //retrive new balance
-            btnLoading(btn, 'start')
-            setTimeout(()=> {
-            btnLoading(btn, 'stop')
-            newBalance = 1500;
-            document.getElementById('user_flo_bal').textContent = newBalance;
-            notify('FLO balance updated')
-            },1000)
-            break;
-        }
+        function showElement(elem, classGroup){
+            let allGroups = document.querySelectorAll(`.${classGroup}`),
+                thisElement = elem;
+            if(typeof elem === 'string')
+                thisElement = document.getElementById(elem);
+            allGroups.forEach(group => {
+                group.classList.add('hide-completely')
+            })
+            thisElement.classList.remove('hide-completely')
         }
 
         function signOut(){
             askConfirmation('Do you want to sign out?').then((result) => {
                 if(result){
-                    notify('Signed out')
                     document.querySelector('main').classList.add('hide-completely')
-                    showPopup('sign_in_popup')
+                    showPopup('sign_in_popup', 'no')
                 }
             })
+		}
+
+		// new displayMeesage and closeMessage functions. please remove old functions from script 
+		
+		let eventLog = document.getElementById("event_log");
+		function displayMessages() {
+			eventLog.classList.remove('hide')
+			eventLog.classList.add('no-transformations')
+			window.onmousedown = e => {
+				if(!e.target.closest('#event_log'))
+					closeMessage()
+			}
+		}
+
+		function closeMessage() {
+			eventLog.classList.add('hide')
+			eventLog.classList.remove('no-transformations')
         }
+
+        //Show tips when loading screen is shown
+        
+        let tips = [
+            'Loading Local Bitcoin++',
+            'wash your hands often',
+            `Don't shake hands with others`,
+            'Stay inside'
+        ],currentIndex = 0, tipsLength = tips.length,
+        tipContainer = document.getElementById('tip_container');
+
+        function changeTips(){  
+            if(tipsLength > currentIndex)
+                currentIndex++
+            if(tipsLength === currentIndex)
+                currentIndex = 0
+            tipContainer.textContent = tips[currentIndex]
+        }
+
     </script>
 
     <script type="text/javascript">
@@ -15165,15 +16705,6 @@
         }, t);
       }
 
-      function displayMessages() {
-        document.getElementById("mySidebar").style.width = "98%";
-        document.getElementById("mySidebar").style.display = "block";
-      }
-
-      function closeMessage() {
-        document.getElementById("mySidebar").style.display = "none";
-      }
-
       function rand(a, b, multiple) {
         return Math.floor(Math.random(a, b) * multiple);
       }
@@ -22742,6 +24273,8 @@
                           typeof user == "object" &&
                           user.myLocalFLOAddress == resp.data.trader_flo_address
                         ) {
+                          document.getElementById("server_deposit_crypto_addr")
+                            .innerText = resp.data.btc_address;  
                           let counterTraderAccountAddress = resp.msg;
                           showMessage(counterTraderAccountAddress);
                           notify(counterTraderAccountAddress);                   
@@ -24451,9 +25984,11 @@
                           typeof user == "object" &&
                           user.myLocalFLOAddress == resp.data.trader_flo_address
                         ) {
+                            document.getElementById("server_deposit_crypto_addr")
+                            .innerText = resp.data.btc_address;
                             let counterTraderAccountAddress = resp.msg;
-                          showMessage(counterTraderAccountAddress);
-                          notify(counterTraderAccountAddress);
+                            showMessage(counterTraderAccountAddress);
+                            notify(counterTraderAccountAddress);
                         }
                       });
                     }
@@ -29699,8 +31234,8 @@
             /* Give user the facillity to trade */
             buildTradeUI(idbData);
 
-            // Deposit / Withdraw asset
-            depositWithdrawAsset(idbData.myLocalFLOAddress);
+            // Deposit Cryptos
+            depositCrypto(idbData.myLocalFLOAddress);
 
             // Deposit / Withdraw Fiat
             depositWithdrawFiat(idbData.myLocalFLOAddress);
@@ -29949,104 +31484,16 @@
 
     <!-- Deposit/Withdraw Crypto -->
     <script>
-      const depositWithdrawAsset = function(userFLOaddress="") {
+      const depositCrypto = function(userFLOaddress="") {
 
         const RM_TRADE = new localbitcoinplusplus.trade();
         const RM_RPC = new localbitcoinplusplus.rpc();
-
         let deposit_crypto_div = document.getElementById("deposit_crypto_div");
-        let withdraw_crypto_div = document.getElementById("withdraw_crypto_div");
-        let depositCryptoButton = document.getElementById("depositCryptoButton");
-        let withdrawCryptoButton = document.getElementById("withdrawCryptoButton");
-        let err_msg = "";
+        get_crypto_svg_selection_html('deposit_assets_type', deposit_crypto_div);
 
-        get_crypto_svg_selection_html('deposit_assets_type', deposit_crypto_div);        
-        get_crypto_svg_selection_html('withdraw_assets_type', withdraw_crypto_div);        
-
-        depositCryptoButton.addEventListener("click", function() {
-          let parentPopup = this.closest('.popup')  
-          let asset_type = document.querySelector("input[name='crypto']:checked").value;
-          tradeAmountSelect = document.getElementById('trade_amount_select');
-          let tradeAmount = helper_functions.truncateDecimals(tradeAmountSelect.value);
-       
-          let fiatCurrency = "INR";
-          if (
-            typeof userFLOaddress == undefined ||
-            userFLOaddress.trim().length < 1
-          ) {
-            err_msg = "Invalid or empty user FLO address.";
-            showMessage(err_msg);
-            throw new Error(err_msg);
-          }
-          if (
-            (typeof localbitcoinplusplus.master_configurations
-              .tradableAsset1 !== "undefined" &&
-              localbitcoinplusplus.master_configurations.tradableAsset1.includes(
-                asset_type
-              ))
-          ) {
-            RM_TRADE.depositAsset(
-              asset_type,
-              tradeAmount,
-              fiatCurrency,
-              userFLOaddress
-            );
-          
-          } else {
-            err_msg = "Error while depositing your address.";
-            showMessage(err_msg);
-            throw new Error(err_msg);
-          }
-        });
-
-        withdrawCryptoButton.addEventListener("click", function(params) {
-          let parentPopup = this.closest('.popup');  
-          let asset_type = document.querySelector("input[name='crypto']:checked").value;
-          let receivinAddress = document.getElementById('withdraw_recving_addr').value
-          let withdraw_amount= document.getElementById('crypto_withdraw_amount')
-          if (receivinAddress == null || receivinAddress.trim() == "") {
-            err_msg =`You must specify a valid ${asset_type} address to continue.`;
-            showMessage(err_msg);
-            throw new Error(err_msg);
-          }
-
-          let tradeAmount = helper_functions.truncateDecimals(withdraw_amount.value);
-          let fiatCurrency = "INR";
-
-          if (
-            typeof userFLOaddress == undefined ||
-            userFLOaddress.trim().length < 1
-          ) {
-            err_msg = "Invalid or empty user FLO address.";
-            showMessage(err_msg);
-            throw new Error(err_msg);
-          }
-
-          if (
-            typeof localbitcoinplusplus.master_configurations.tradableAsset1 !==
-              "undefined" &&
-            localbitcoinplusplus.master_configurations.tradableAsset1
-              .includes(asset_type)
-          ) {
-            RM_TRADE.withdrawAsset(
-              asset_type,
-              tradeAmount,
-              receivinAddress,
-              userFLOaddress,
-              fiatCurrency
-            );
-          } else {
-            err_msg = `Error: Withdraw of Crypto failed. Invalid asset type ${asset_type} provided.`;
-            showMessage(err_msg);
-            throw new Error(err_msg);
-          }
-        });
-
-        // NOTIFY DEPOSITED CRYPTO CONFIRMATION
-        const refresh_crypto_status_btn = document.getElementById("cnf_crypto_deposit");
-        refresh_crypto_status_btn.addEventListener("click", function() {
-          let deposited = confirm('Have you sent cryptos to Exchange? Continue only after you have sent required cryptos to exchange.');
-          if(deposited!==true) return;  
+        function cnf_crypto_deposit() {
+          //let deposited = askConfirmation('Have you sent cryptos to Exchange? Continue only after you have sent required cryptos to exchange.');
+          //if(deposited!==true) return;  
           RM_RPC.send_rpc
             .call(this, "refresh_deposit_status_request", {
               receiver_flo_address:
@@ -30055,7 +31502,101 @@
                 localbitcoinplusplus.wallets.my_local_flo_address
             })
             .then(refresh_deposit_status => doSend(refresh_deposit_status));
+        }
+
+        let depositCryptoButtonClicked = 0,
+            depositCryptoButton = document.getElementById('depositCryptoButton');
+        
+        depositCryptoButton.addEventListener('click', function() {
+            depositCryptoButtonClicked++;
+            let parentPopup = depositCryptoButton.closest('.popup')
+                depositCryptoButton.firstElementChild.textContent = 'deposit',
+                sendCryptoHiddenSection = document.getElementById('send_crypto_hidden_section'),
+                selectDepositCryptoSection = document.getElementById('select_deposit_crypto_section'),
+                sendNatively = document.getElementById('send_natively'),
+                sendersFloId = parentPopup.querySelector("input[name='senderFloId']").value,
+                sendersPrivKey = parentPopup.querySelector("input[name='senderPrivateKey']").value;
+                asset_type = document.querySelector("input[name='crypto']:checked").value;
+            if(depositCryptoButtonClicked === 1) {
+                showElement(selectDepositCryptoSection, 'deposit-crypto-group');
+                depositCryptoButton.classList.remove('hide-completely');
+                hidePopup()
+                depositCryptoButtonClicked = 0;
+                sendCryptoHiddenSection.querySelectorAll('input').forEach(input => {
+                    input.disabled = true;
+                })
+                setTimeout(() => {
+                    depositCryptoButton.firstElementChild.textContent = 'proceed'
+                }, 400)
+                //deposit crypto code from here
+                let parentPopup = this.closest('.popup')  
+                tradeAmountSelect = document.getElementById('trade_amount_select');
+                let tradeAmount = helper_functions.truncateDecimals(tradeAmountSelect.value);
+            
+                let fiatCurrency = "INR";
+                if (
+                    typeof userFLOaddress == "undefined" ||
+                    userFLOaddress.trim().length < 1
+                ) {
+                    err_msg = "Invalid or empty user FLO address.";
+                    showMessage(err_msg);
+                    throw new Error(err_msg);
+                }
+                if (
+                    (typeof localbitcoinplusplus.master_configurations
+                    .tradableAsset1 !== "undefined" &&
+                    localbitcoinplusplus.master_configurations.tradableAsset1.includes(
+                        asset_type
+                    ))
+                ) {
+                        
+                    RM_TRADE.depositAsset(
+                        asset_type,
+                        tradeAmount,
+                        fiatCurrency,
+                        userFLOaddress
+                    );
+                
+                } else {
+                    err_msg = "Error while depositing your address.";
+                    notify(err_msg);
+                    throw new Error(err_msg);
+                }
+
+                sendNatively.onclick = () => {
+                    sendCryptoHiddenSection.querySelectorAll('input').forEach(input => {
+                        input.disabled = false;
+                    })
+                    depositCryptoButton.firstElementChild.disabled = true;
+                    depositCryptoButton.classList.remove('hide-completely');
+                    showElement(sendCryptoHiddenSection, 'deposit-crypto-group');
+                }
+
+            } else if(depositCryptoButtonClicked === 2) {
+                const receiver_address = document.getElementById('server_deposit_crypto_addr').innerText;
+                if(typeof receiver_address!=="string" || receiver_address.length<1) {
+                    notify('No receiver address found.')
+                    return false;
+                }
+                depositCryptoButton.classList.add('hide-completely');
+                showElement('confirm_deposit_btn_section', 'deposit-crypto-group');
+                //first time clicked
+                RM_TRADE.sendTransaction(
+                    asset_type,
+                    sendersFloId,
+                    sendersPrivKey,
+                    receiver_address,
+                    function(crypto_sent_resp) {
+                        console.log(crypto_sent_resp);
+                        cnf_crypto_deposit();
+                    }
+                );
+            }
         });
+
+        // NOTIFY DEPOSITED CRYPTO CONFIRMATION
+        const refresh_crypto_status_btn = document.getElementById("cnf_crypto_deposit");
+        refresh_crypto_status_btn.addEventListener("click", cnf_crypto_deposit);
       };
     </script>