diff --git a/css/main.css b/css/main.css
index 37785a1..eb2a6fc 100644
--- a/css/main.css
+++ b/css/main.css
@@ -365,6 +365,10 @@ ul {
   fill: var(--accent-color);
 }
 
+sm-spinner {
+  --size: 1.2rem;
+}
+
 #confirmation_popup,
 #prompt_popup {
   flex-direction: column;
@@ -534,6 +538,7 @@ details[open] > summary .icon {
 #loading sm-spinner {
   justify-self: center;
   margin-bottom: 1.5rem;
+  --size: 1.2rem;
 }
 
 #home {
@@ -778,11 +783,6 @@ sm-chip:last-of-type {
   grid-area: amount;
   text-align: end;
 }
-.activity-card--request sm-spinner,
-.activity-card--pending sm-spinner {
-  --height: 1rem;
-  --width: 1rem;
-}
 
 .activity-card--admin {
   align-items: center;
@@ -804,10 +804,6 @@ sm-chip:last-of-type {
   justify-content: flex-end;
   align-items: center;
 }
-.activity-card--admin sm-spinner {
-  --height: 1rem;
-  --width: 1rem;
-}
 
 #pending_transaction:not(:empty) {
   margin-bottom: 2rem;
@@ -920,10 +916,6 @@ sm-chip:last-of-type {
   pointer-events: none;
   background-color: transparent;
 }
-#refresh_balance_button sm-spinner {
-  --height: 1rem;
-  --width: 1rem;
-}
 
 #account_chart_container {
   display: flex;
@@ -964,9 +956,7 @@ sm-chip:last-of-type {
 }
 
 .balance-card {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-areas: "icon ." "icon .";
+  display: flex;
   padding: 1rem 0;
   align-items: center;
   gap: 0.3rem 1rem;
@@ -992,6 +982,7 @@ sm-chip:last-of-type {
 .balance-card__amount {
   font-size: 1rem;
   font-weight: 700;
+  margin-left: auto;
 }
 
 .page__header button {
@@ -1100,10 +1091,6 @@ sm-chip:last-of-type {
   -webkit-animation-delay: 0.3s;
           animation-delay: 0.3s;
 }
-.account-step sm-spinner {
-  --height: 1rem;
-  --width: 1rem;
-}
 .account-step:not(:last-of-type) .step__line {
   position: relative;
   height: 100%;
@@ -1282,13 +1269,9 @@ sm-chip:last-of-type {
     transform: none;
   }
 }
-#settings {
+#account_summary {
   padding: 0 1.5rem;
 }
-#settings sm-copy {
-  font-size: 0.9rem;
-  margin: 0.3rem 0 1.5rem 0;
-}
 
 #sign_out_button {
   color: rgba(var(--background-color), 1);
@@ -1363,8 +1346,8 @@ sm-chip:last-of-type {
   .activity-card--account .grid {
     text-align: right;
   }
-  .hide-on-mobile {
-    display: none;
+  .hide-on-small {
+    display: none !important;
   }
 }
 @media screen and (min-width: 640px) {
@@ -1473,24 +1456,6 @@ sm-chip:last-of-type {
     justify-content: flex-start;
   }
 }
-@media screen and (max-width: 1024px) {
-  #user_section {
-    position: fixed;
-    background-color: rgba(var(--background-color), 1);
-    transition: transform 0.3s;
-    z-index: 2;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    padding-top: 0;
-  }
-  #user_section.reveal {
-    box-shadow: -0.5rem 0 1.5rem rgba(0, 0, 0, 0.1);
-  }
-  #user_section:not(.reveal) {
-    transform: translateX(100%);
-  }
-}
 @media screen and (min-width: 1024px) {
   .page-layout {
     grid-template-columns: 1fr 80vw 1fr;
diff --git a/css/main.min.css b/css/main.min.css
index eb0ed7f..a849e76 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #2672ff;--accent-color--light: rgba(38, 114, 255, 0.06);--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);--loan-color: rgb(255, 171, 93);scrollbar-width:thin;color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body[data-theme=dark]{--accent-color: rgb(170, 190, 255);--accent-color--light: rgba(231, 239, 255, 0.06);--text-color: 200, 200, 200;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5);--loan-color: rgb(255, 232, 170)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:rgba(0,0,0,0);overflow:hidden;color:inherit;-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible,.button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled),.button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.02);border:solid thin rgba(var(--text-color), 0.06)}.button--primary{color:rgba(var(--background-color), 1);background-color:var(--accent-color)}.button--primary .icon{fill:rgba(var(--background-color), 1)}.button--colored{color:var(--accent-color)}.button--colored .icon{fill:var(--accent-color)}.button--danger{background-color:rgba(255,115,115,.062745098);color:var(--danger-color)}.button--danger .icon{fill:var(--danger-color)}.button--small{padding:.4rem .6rem}.button--outlined{border:solid rgba(var(--text-color), 0.3) .1rem;background-color:rgba(var(--foreground-color), 1)}.button--transparent{background-color:rgba(0,0,0,0)}button:disabled{opacity:.4;cursor:not-allowed;filter:saturate(0)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:.8rem 1rem}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hidden{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.stretch{justify-content:stretch;justify-items:stretch}.stretch>*{width:100%}.interact{position:relative;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-size:1.2rem;margin-bottom:1rem}#confirmation_popup .flex,#prompt_popup .flex{margin-top:1rem}.popup__header{position:relative;display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header>*{grid-row:1}.popup__header h3,.popup__header h4{grid-column:1/-1;justify-self:center;align-self:center}.popup__header__close{grid-column:1;margin-left:-1rem;justify-self:flex-start}button:active,.button:active,.interact:active,.nav-item:active{transform:scale(0.96)}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){align-content:flex-start}.logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{transform:rotate(180deg)}.card{padding:1rem;border-radius:.5rem;background-color:var(--accent-color--light)}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{align-content:flex-start;text-align:center;gap:1rem}#sign_in,#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_in section,#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_in header,#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#loading{place-content:center;text-align:center}#loading sm-spinner{justify-self:center;margin-bottom:1.5rem}#home{height:100%;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0, 1fr);grid-template-areas:"main-header" "subpages" "main-nav"}#main_nav{grid-area:main-nav;position:relative;display:flex}.nav-item{position:relative;display:flex;align-items:center;padding:.8rem;border-radius:.5rem;color:inherit;transition:transform 1s;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.nav-item--active .icon{fill:var(--accent-color)}.nav-item--active .nav-item__title{color:var(--accent-color)}.nav-item.has-notification::after{left:0;top:0;margin:.7rem .8rem;content:"";position:absolute;padding:.3rem;border-radius:50%;background-color:var(--danger-color)}#main_header{grid-area:main-header;padding:1.5rem;display:grid;gap:1rem;align-items:center;grid-template-columns:1fr auto}#user_profile_button{gap:.5rem;background-color:rgba(var(--text-color), 0.06);border-radius:2rem;font-size:.8rem;padding:.6rem .8rem}#subpage_container{grid-area:subpages;overflow-y:auto}#dashboard{display:grid;gap:1.5rem;padding:0 1.5rem}#quick_actions_container{display:flex;flex-wrap:wrap;gap:1.5rem;margin:2rem 0}.quick-action{color:inherit;display:flex;flex-direction:column;align-items:center}.quick-action.disabled{pointer-events:none;opacity:.6;filter:grayscale(100%)}.quick-action__icon{padding:1rem;border-radius:1rem;background-color:var(--accent-color--light);margin-bottom:.8rem}.quick-action__icon .icon{height:1.5rem;width:1.5rem;fill:var(--accent-color)}.quick-action__title{font-size:.8rem;font-weight:500}.empty-state{padding:0 1.5rem;margin:3rem 0;justify-items:center;text-align:center}.empty-state .empty-state__icon{filter:drop-shadow(0 0.5rem 0.3rem rgba(0, 0, 0, 0.1));height:12rem;width:12rem;padding:3rem;border-radius:50%;margin-bottom:1.5rem;background-color:rgba(var(--text-color), 0.06)}sm-chips{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem}sm-chip{text-transform:uppercase;font-weight:500;letter-spacing:.05em;font-size:.7rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}sm-chip[selected]{color:rgba(var(--background-color), 1);--background: var(--accent-color)}sm-chip:first-of-type{--border-radius: 0.3rem 0 0 0.3rem}sm-chip:last-of-type{--border-radius: 0 0.3rem 0.3rem 0}.activity-card{display:grid;padding:1rem 0;gap:.4rem 1rem;border-radius:.5rem;align-items:flex-start;color:inherit;grid-template-columns:auto minmax(0, 1fr) auto}.activity-card__icon{display:flex;align-content:center;justify-content:center;padding:.5rem;border-radius:.8rem;background-color:var(--accent-color--light)}.activity-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.activity-card__title{font-size:.95rem;font-weight:500}.activity-card__title::first-letter{text-transform:uppercase}.activity-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}#notifications,#history{padding-bottom:5rem}#notifications .activity-card,#history .activity-card{padding:1rem 1.5rem}#user_accounts:not(:empty){margin-top:1.5rem;grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr));gap:.5rem;padding-bottom:5rem}.activity-card--account{-webkit-user-select:none;-moz-user-select:none;user-select:none;gap:1.5rem;padding:1rem 1.5rem;align-items:center;border:solid thin rgba(var(--text-color), 0.2)}.activity-card--account .activity-card__icon{padding:0;background-color:rgba(0,0,0,0)}.activity-card--account .activity-card__type{text-transform:capitalize;font-size:.9rem;color:rgba(var(--text-color), 0.8);font-weight:500}.activity-card--account .activity-card__amount{margin-top:.3rem;font-size:1.1rem}.activity-card--account .activity-card__interest{font-size:.8rem}.activity-card--request,.activity-card--pending{grid-template-areas:"icon . amount" "icon time ."}.activity-card--request .activity-card__icon,.activity-card--pending .activity-card__icon{grid-area:icon}.activity-card--request .activity-card__time,.activity-card--pending .activity-card__time{grid-area:time}.activity-card--request .activity-card__amount,.activity-card--pending .activity-card__amount{grid-area:amount;text-align:end}.activity-card--request sm-spinner,.activity-card--pending sm-spinner{--height: 1rem;--width: 1rem}.activity-card--admin{align-items:center;grid-template-areas:"icon . button" "icon time button"}.activity-card--admin .activity-card__icon{grid-area:icon}.activity-card--admin .activity-card__time{grid-area:time}.activity-card--admin .activity-card__action{grid-area:button;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background-color:var(--accent-color--light);color:var(--accent-color);justify-content:flex-end;align-items:center}.activity-card--admin sm-spinner{--height: 1rem;--width: 1rem}#pending_transaction:not(:empty){margin-bottom:2rem}.activity-card--pending:not(:empty){padding:1rem;margin-top:.8rem;border:solid .1rem var(--accent-color)}.activity-card--pending:not(:empty) .activity-card__description{font-size:.8rem;color:rgba(var(--text-color), 0.8);grid-column:span 2}.status-tag:not(:empty){text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;border-radius:.2rem;padding:.3rem .4rem;font-weight:500;color:rgba(0,0,0,.7)}.status-tag:not(:empty) .icon{margin-right:.3rem}.status-tag:not(:empty).active{color:var(--green);background-color:rgba(0,230,118,.1)}.status-tag:not(:empty).closed{color:rgba(var(--text-color), 0.7);background-color:rgba(var(--text-color), 0.06)}.status-tag:not(:empty).success{color:var(--green);background-color:rgba(0,230,118,.1)}.status-tag:not(:empty).success .icon{fill:var(--green)}.status-tag:not(:empty).failed{color:var(--danger-color);background-color:rgba(255,75,75,.1)}.status-tag:not(:empty).failed .icon{fill:var(--danger-color)}.status-tag:not(:empty).pending{color:var(--yellow);background-color:rgba(255,252,75,.1)}.status-tag:not(:empty).pending .icon{fill:var(--yellow)}.activity-card--response{grid-template-areas:"icon . time" "icon description description"}.activity-card--response .activity-card__icon{grid-area:icon}.activity-card--response .activity-card__description{grid-area:description;font-size:.8rem;color:rgba(var(--text-color), 0.8)}.activity-card--response .activity-card__time{grid-area:time}.success .icon{fill:var(--green)}.failed .icon{fill:var(--danger-color)}.pending .icon{fill:var(--yellow)}#user_section{display:grid;align-content:flex-start;gap:2rem;overflow-y:auto;padding:1.5rem;grid-template-columns:minmax(0, 1fr)}#user_section h4{height:1.8rem;margin-bottom:1rem}#user_section__header{position:-webkit-sticky;position:sticky;top:0;background-color:inherit;padding-top:1.5rem;z-index:2}#refresh_balance_button.loading{padding:.5rem;pointer-events:none;background-color:rgba(0,0,0,0)}#refresh_balance_button sm-spinner{--height: 1rem;--width: 1rem}#account_chart_container{display:flex;flex-direction:column;align-items:center;height:15rem;padding-bottom:3rem;margin:1.5rem 0}#chart_legend{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-bottom:1rem}.legend{display:flex;align-items:center;font-size:.8rem;margin-right:1rem;margin-bottom:1rem}.legend::before{content:"";margin-right:.5rem;width:1rem;height:1rem;border-radius:25%}.legend:nth-of-type(1)::before{background-color:var(--green)}.legend:nth-of-type(2)::before{background-color:var(--loan-color)}.balance-card{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon ." "icon .";padding:1rem 0;align-items:center;gap:.3rem 1rem;border-radius:.5rem}.balance-card__icon{grid-area:icon;display:flex;align-content:center;justify-content:center;padding:.5rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.8rem}.balance-card__amount{font-size:1rem;font-weight:700}.page__header button{padding:.5rem 0}#transaction,#account{grid-template-rows:auto 1fr;gap:1rem 0;padding:1.5rem 0;align-content:flex-start}#transaction section,#account_details{display:grid;gap:2rem;grid-template-rows:auto 1fr}.positive{color:var(--green)}#transaction_top,#account_top{display:flex;flex-direction:column;justify-items:flex-start;position:relative}#transaction_detail__icon,#account_detail__icon{display:flex;background-color:var(--accent-color);border-radius:40%;padding:.8rem;justify-self:flex-start;align-self:flex-start}#transaction_detail__icon .icon,#account_detail__icon .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}#transaction_detail__amount,#account_detail__amount{display:flex;font-size:1.5rem;font-weight:700}#account_detail__type{color:rgba(var(--text-color), 0.8);font-weight:500}#account_detail__interest_type{font-size:.9rem}#account_detail__interest{font-size:1rem;margin-left:.4rem;font-weight:500}#transaction__cta{justify-self:flex-start;margin-top:2rem}#account_process{display:grid;align-content:flex-start;gap:2rem}#account_process__steps,#transaction__steps{display:flex;flex-direction:column;gap:1.5rem}.account-step{opacity:0;grid-template-columns:auto minmax(0, 1fr);gap:.3rem .8rem;-webkit-animation:slide-down .3s forwards;animation:slide-down .3s forwards}.account-step:nth-of-type(2){-webkit-animation-delay:.1s;animation-delay:.1s}.account-step:nth-of-type(3){-webkit-animation-delay:.2s;animation-delay:.2s}.account-step:nth-of-type(4){-webkit-animation-delay:.3s;animation-delay:.3s}.account-step sm-spinner{--height: 1rem;--width: 1rem}.account-step:not(:last-of-type) .step__line{position:relative;height:100%;width:.1rem;margin:.5rem 0 1rem 0;justify-self:center;background-color:var(--green)}.account-step .icon{height:1.5rem;width:1.5rem}.account-step:not(.loading) .step__title{font-weight:500;font-size:.9rem;padding:.2rem 0}.account-step .step__description{font-size:.8rem}.account-step.row-3:not(:last-of-type) .step__line{grid-row:span 2}.account-step.row-3 .button{grid-column:2/3}.account-step .button{justify-self:flex-start}@-webkit-keyframes slide-down{from{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:none}}@keyframes slide-down{from{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:none}}#deposit,#loan{padding:1.5rem 0;grid-template-rows:auto 1fr}#deposit sm-form,#loan sm-form{justify-self:center;margin-top:3rem;width:min(24rem,100%)}#deposit sm-form::part(form),#loan sm-form::part(form){display:flex;flex-direction:column}#deposit__icon .icon,#loan__icon .icon{height:1.8rem;width:1.8rem;fill:var(--accent-color)}.est-interest h3{margin-top:.2rem;color:rgba(var(--text-color), 0.8);font-size:1.3rem}.est-interest h3::after{font-weight:500;content:"% p.a";font-size:1rem}#get_deposit_amount,#get_loan_amount{--font-size: 1.5rem;margin-top:1rem}.loader-button-wrapper{display:flex;position:relative;justify-content:center;align-items:center}.loader-button-wrapper button[type=submit],.loader-button-wrapper slide-button{width:100%;z-index:1;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.loader-button-wrapper button[type=submit].clip,.loader-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.loader-button-wrapper sm-spinner{position:absolute}#result{place-content:center}#result section{text-align:center;align-items:center}#result__icon{position:relative;display:flex;border-radius:50%;padding:1rem;margin:-5rem 0 1.5rem 0;-webkit-animation:pop-in 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-in 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#result__icon.pending{background-color:rgba(255,252,75,.1)}#result__icon.failed{background-color:rgba(255,75,75,.1)}#result__icon .icon{height:1.8rem;width:1.8rem}#result__description{margin:.5rem 0}#result__back_button{margin-top:3rem}@-webkit-keyframes pop-in{0%{opacity:0;transform:scale(0.4) translateY(6rem)}40%{opacity:1;transform:scale(0.4) translateY(0)}100%{transform:none}}@keyframes pop-in{0%{opacity:0;transform:scale(0.4) translateY(6rem)}40%{opacity:1;transform:scale(0.4) translateY(0)}100%{transform:none}}#settings{padding:0 1.5rem}#settings sm-copy{font-size:.9rem;margin:.3rem 0 1.5rem 0}#sign_out_button{color:rgba(var(--background-color), 1);--padding: 0.8rem 1.6rem;--background: var(--danger-color)}#admin{display:grid;padding:0 1.5rem;grid-template-columns:minmax(0, 1fr)}#admin_requests_container{margin-top:1rem;padding-bottom:3rem}@media screen and (max-width: 640px){#user_profile_button{grid-area:1/1/2/2}theme-toggle{grid-area:1/2/2/3}#dashboard{padding:0 1.5rem}#main_nav{background-color:rgba(var(--foreground-color), 1);border-top:thin solid rgba(var(--text-color), 0.1)}.nav-item{flex:1;flex-direction:column}.nav-item__title{display:flex;font-size:.8rem;font-weight:500;color:rgba(var(--text-color), 0.8);margin-top:.3rem}#transaction_action_button,#account_action_button,.loader-button-wrapper{margin-top:auto}#transaction_top,#account_top{margin-top:1rem}#user_section{left:0}#admin__header{position:relative;display:grid;gap:1rem;grid-template-columns:minmax(0, 1fr);text-align:center;justify-items:center}#account_process,#transaction__steps{border-top:solid rgba(var(--text-color), 0.2) thin;padding-top:1.5rem}.account-step .button{margin-top:.5rem}.activity-card--account .grid{text-align:right}.hide-on-mobile{display:none}}@media screen and (min-width: 640px){sm-popup{--width: 26rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}#confirmation_popup{--width: 24rem}.popup__header{padding:1rem 1.5rem 0 1.5rem}.page-layout{grid-template-columns:1fr 90vw 1fr}#home{background-color:rgba(var(--foreground-color), 1);grid-template-rows:auto 1fr;grid-template-columns:auto minmax(0, 1fr);grid-template-areas:"main-header main-header user-section" "main-nav subpages user-section"}#main_nav{flex-direction:column;padding:0 1rem}#main_nav::after{position:absolute;right:0;content:"";width:1px;background-color:rgba(var(--text-color), 0.2);height:80%}.nav-item--active{background-color:var(--accent-color--light)}.nav-item:not(:last-of-type){margin-bottom:.5rem}.nav-item:last-of-type{margin-top:auto;margin-bottom:1.5rem}.nav-item__title{display:none}#main_header{grid-template-columns:1fr auto auto}#user_section{grid-area:user-section;background-color:rgba(var(--background-color), 1);width:min(24rem,100%)}#transaction_top,#account_top,#account_process,#transaction__steps{overflow:hidden;padding:1.8rem;border-radius:.5rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 0 .1rem rgba(0,0,0,.1),0 1rem 1.5rem -0.8rem rgba(0,0,0,.1);align-self:flex-start}#transaction_detail__icon{justify-self:flex-start}#admin__header{display:flex;justify-content:space-between;align-items:center}.account-step.row-3{grid-template-areas:". . b-link" ". . b-link";grid-template-columns:auto minmax(0, 1fr) auto}.account-step.row-3 .step__line{grid-column:1/2}.account-step.row-3 .button{grid-area:b-link;align-self:flex-start}#user_accounts:not(:empty){gap:1rem}.activity-card--account{grid-template-columns:minmax(0, 1fr);text-align:left;justify-content:flex-start}.activity-card--account .activity-card__icon{justify-content:flex-start}}@media screen and (max-width: 1024px){#user_section{position:fixed;background-color:rgba(var(--background-color), 1);transition:transform .3s;z-index:2;right:0;top:0;bottom:0;padding-top:0}#user_section.reveal{box-shadow:-0.5rem 0 1.5rem rgba(0,0,0,.1)}#user_section:not(.reveal){transform:translateX(100%)}}@media screen and (min-width: 1024px){.page-layout{grid-template-columns:1fr 80vw 1fr}.card{padding:1.5rem}#home{grid-template-columns:14rem minmax(0, 1fr) 24rem}.nav-item__title{display:flex;font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8);margin-left:.5rem}#transaction section,#account_details{grid-template-columns:18rem minmax(0, 1fr)}.hide-on-desktop{display:none}.activity-card--pending:not(:empty){padding:1.5rem}}@media screen and (min-width: 1920px){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.nav-item,.interact{transition:background-color .3s,transform .3s}.nav-item:hover,.interact:hover{background-color:var(--accent-color--light)}}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%;scroll-behavior:smooth}body{--accent-color: #2672ff;--accent-color--light: rgba(38, 114, 255, 0.06);--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);--loan-color: rgb(255, 171, 93);scrollbar-width:thin;color:rgba(var(--text-color), 1);background:rgba(var(--background-color), 1)}body[data-theme=dark]{--accent-color: rgb(170, 190, 255);--accent-color--light: rgba(231, 239, 255, 0.06);--text-color: 200, 200, 200;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5);--loan-color: rgb(255, 232, 170)}p,strong{font-size:.9rem;max-width:70ch;line-height:1.7;color:rgba(var(--text-color), 0.8)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a{color:var(--accent-color)}button,.button{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:rgba(0,0,0,0);overflow:hidden;color:inherit;-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible,.button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled),.button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.02);border:solid thin rgba(var(--text-color), 0.06)}.button--primary{color:rgba(var(--background-color), 1);background-color:var(--accent-color)}.button--primary .icon{fill:rgba(var(--background-color), 1)}.button--colored{color:var(--accent-color)}.button--colored .icon{fill:var(--accent-color)}.button--danger{background-color:rgba(255,115,115,.062745098);color:var(--danger-color)}.button--danger .icon{fill:var(--danger-color)}.button--small{padding:.4rem .6rem}.button--outlined{border:solid rgba(var(--text-color), 0.3) .1rem;background-color:rgba(var(--foreground-color), 1)}.button--transparent{background-color:rgba(0,0,0,0)}button:disabled{opacity:.4;cursor:not-allowed;filter:saturate(0)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:.8rem 1rem}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}ul{list-style:none}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.hidden{display:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:1.5rem}.h2{font-size:1.2rem}.h3{font-size:1rem}.h4{font-size:.9rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.stretch{justify-content:stretch;justify-items:stretch}.stretch>*{width:100%}.interact{position:relative;cursor:pointer;transition:transform .3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:var(--accent-color--light);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}sm-spinner{--size: 1.2rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-size:1.2rem;margin-bottom:1rem}#confirmation_popup .flex,#prompt_popup .flex{margin-top:1rem}.popup__header{position:relative;display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header>*{grid-row:1}.popup__header h3,.popup__header h4{grid-column:1/-1;justify-self:center;align-self:center}.popup__header__close{grid-column:1;margin-left:-1rem;justify-self:flex-start}button:active,.button:active,.interact:active,.nav-item:active{transform:scale(0.96)}#main_page{padding:1.5rem}#main_page>section:nth-of-type(1){align-content:flex-start}.logo{display:grid;align-items:center;width:100%;grid-template-columns:auto 1fr;gap:0 .3rem;margin-right:1rem}.logo h4{text-transform:capitalize;font-size:.9rem;font-weight:600}.logo .main-logo{height:1.4rem;width:1.4rem;fill:rgba(var(--text-color), 1);stroke:none}details summary{display:flex;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}details[open]>summary{margin-bottom:1rem}details[open]>summary .icon{transform:rotate(180deg)}.card{padding:1rem;border-radius:.5rem;background-color:var(--accent-color--light)}.warning{background-color:khaki;color:rgba(0,0,0,.7);padding:1rem;border-radius:.5rem;line-height:1.5}.page-layout{display:grid;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem}.page-layout>*{grid-column:2/3}.page{height:100%}#landing{grid-template-rows:auto 1fr}#landing header{padding:1.5rem 0}#landing>.grid{align-content:flex-start;text-align:center;gap:1rem}#sign_in,#sign_up{grid-template-rows:auto 1fr;align-items:center}#sign_in section,#sign_up section{margin-top:-6rem;justify-self:center;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_in header,#sign_up header{padding:1.5rem 0}#sign_up sm-copy{font-size:.9rem;--button-border-radius: 0.5rem}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#loading{place-content:center;text-align:center}#loading sm-spinner{justify-self:center;margin-bottom:1.5rem;--size: 1.2rem}#home{height:100%;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0, 1fr);grid-template-areas:"main-header" "subpages" "main-nav"}#main_nav{grid-area:main-nav;position:relative;display:flex}.nav-item{position:relative;display:flex;align-items:center;padding:.8rem;border-radius:.5rem;color:inherit;transition:transform 1s;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.nav-item--active .icon{fill:var(--accent-color)}.nav-item--active .nav-item__title{color:var(--accent-color)}.nav-item.has-notification::after{left:0;top:0;margin:.7rem .8rem;content:"";position:absolute;padding:.3rem;border-radius:50%;background-color:var(--danger-color)}#main_header{grid-area:main-header;padding:1.5rem;display:grid;gap:1rem;align-items:center;grid-template-columns:1fr auto}#user_profile_button{gap:.5rem;background-color:rgba(var(--text-color), 0.06);border-radius:2rem;font-size:.8rem;padding:.6rem .8rem}#subpage_container{grid-area:subpages;overflow-y:auto}#dashboard{display:grid;gap:1.5rem;padding:0 1.5rem}#quick_actions_container{display:flex;flex-wrap:wrap;gap:1.5rem;margin:2rem 0}.quick-action{color:inherit;display:flex;flex-direction:column;align-items:center}.quick-action.disabled{pointer-events:none;opacity:.6;filter:grayscale(100%)}.quick-action__icon{padding:1rem;border-radius:1rem;background-color:var(--accent-color--light);margin-bottom:.8rem}.quick-action__icon .icon{height:1.5rem;width:1.5rem;fill:var(--accent-color)}.quick-action__title{font-size:.8rem;font-weight:500}.empty-state{padding:0 1.5rem;margin:3rem 0;justify-items:center;text-align:center}.empty-state .empty-state__icon{filter:drop-shadow(0 0.5rem 0.3rem rgba(0, 0, 0, 0.1));height:12rem;width:12rem;padding:3rem;border-radius:50%;margin-bottom:1.5rem;background-color:rgba(var(--text-color), 0.06)}sm-chips{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem}sm-chip{text-transform:uppercase;font-weight:500;letter-spacing:.05em;font-size:.7rem;--border-radius: 0;--active-option-color: rgba(var(--background-color), 1);--active-option-background-color: var(--accent-color)}sm-chip[selected]{color:rgba(var(--background-color), 1);--background: var(--accent-color)}sm-chip:first-of-type{--border-radius: 0.3rem 0 0 0.3rem}sm-chip:last-of-type{--border-radius: 0 0.3rem 0.3rem 0}.activity-card{display:grid;padding:1rem 0;gap:.4rem 1rem;border-radius:.5rem;align-items:flex-start;color:inherit;grid-template-columns:auto minmax(0, 1fr) auto}.activity-card__icon{display:flex;align-content:center;justify-content:center;padding:.5rem;border-radius:.8rem;background-color:var(--accent-color--light)}.activity-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.activity-card__title{font-size:.95rem;font-weight:500}.activity-card__title::first-letter{text-transform:uppercase}.activity-card__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}#notifications,#history{padding-bottom:5rem}#notifications .activity-card,#history .activity-card{padding:1rem 1.5rem}#user_accounts:not(:empty){margin-top:1.5rem;grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr));gap:.5rem;padding-bottom:5rem}.activity-card--account{-webkit-user-select:none;-moz-user-select:none;user-select:none;gap:1.5rem;padding:1rem 1.5rem;align-items:center;border:solid thin rgba(var(--text-color), 0.2)}.activity-card--account .activity-card__icon{padding:0;background-color:rgba(0,0,0,0)}.activity-card--account .activity-card__type{text-transform:capitalize;font-size:.9rem;color:rgba(var(--text-color), 0.8);font-weight:500}.activity-card--account .activity-card__amount{margin-top:.3rem;font-size:1.1rem}.activity-card--account .activity-card__interest{font-size:.8rem}.activity-card--request,.activity-card--pending{grid-template-areas:"icon . amount" "icon time ."}.activity-card--request .activity-card__icon,.activity-card--pending .activity-card__icon{grid-area:icon}.activity-card--request .activity-card__time,.activity-card--pending .activity-card__time{grid-area:time}.activity-card--request .activity-card__amount,.activity-card--pending .activity-card__amount{grid-area:amount;text-align:end}.activity-card--admin{align-items:center;grid-template-areas:"icon . button" "icon time button"}.activity-card--admin .activity-card__icon{grid-area:icon}.activity-card--admin .activity-card__time{grid-area:time}.activity-card--admin .activity-card__action{grid-area:button;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background-color:var(--accent-color--light);color:var(--accent-color);justify-content:flex-end;align-items:center}#pending_transaction:not(:empty){margin-bottom:2rem}.activity-card--pending:not(:empty){padding:1rem;margin-top:.8rem;border:solid .1rem var(--accent-color)}.activity-card--pending:not(:empty) .activity-card__description{font-size:.8rem;color:rgba(var(--text-color), 0.8);grid-column:span 2}.status-tag:not(:empty){text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;border-radius:.2rem;padding:.3rem .4rem;font-weight:500;color:rgba(0,0,0,.7)}.status-tag:not(:empty) .icon{margin-right:.3rem}.status-tag:not(:empty).active{color:var(--green);background-color:rgba(0,230,118,.1)}.status-tag:not(:empty).closed{color:rgba(var(--text-color), 0.7);background-color:rgba(var(--text-color), 0.06)}.status-tag:not(:empty).success{color:var(--green);background-color:rgba(0,230,118,.1)}.status-tag:not(:empty).success .icon{fill:var(--green)}.status-tag:not(:empty).failed{color:var(--danger-color);background-color:rgba(255,75,75,.1)}.status-tag:not(:empty).failed .icon{fill:var(--danger-color)}.status-tag:not(:empty).pending{color:var(--yellow);background-color:rgba(255,252,75,.1)}.status-tag:not(:empty).pending .icon{fill:var(--yellow)}.activity-card--response{grid-template-areas:"icon . time" "icon description description"}.activity-card--response .activity-card__icon{grid-area:icon}.activity-card--response .activity-card__description{grid-area:description;font-size:.8rem;color:rgba(var(--text-color), 0.8)}.activity-card--response .activity-card__time{grid-area:time}.success .icon{fill:var(--green)}.failed .icon{fill:var(--danger-color)}.pending .icon{fill:var(--yellow)}#user_section{display:grid;align-content:flex-start;gap:2rem;overflow-y:auto;padding:1.5rem;grid-template-columns:minmax(0, 1fr)}#user_section h4{height:1.8rem;margin-bottom:1rem}#user_section__header{position:-webkit-sticky;position:sticky;top:0;background-color:inherit;padding-top:1.5rem;z-index:2}#refresh_balance_button.loading{padding:.5rem;pointer-events:none;background-color:rgba(0,0,0,0)}#account_chart_container{display:flex;flex-direction:column;align-items:center;height:15rem;padding-bottom:3rem;margin:1.5rem 0}#chart_legend{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-bottom:1rem}.legend{display:flex;align-items:center;font-size:.8rem;margin-right:1rem;margin-bottom:1rem}.legend::before{content:"";margin-right:.5rem;width:1rem;height:1rem;border-radius:25%}.legend:nth-of-type(1)::before{background-color:var(--green)}.legend:nth-of-type(2)::before{background-color:var(--loan-color)}.balance-card{display:flex;padding:1rem 0;align-items:center;gap:.3rem 1rem;border-radius:.5rem}.balance-card__icon{grid-area:icon;display:flex;align-content:center;justify-content:center;padding:.5rem;border-radius:.8rem;background-color:var(--accent-color--light)}.balance-card__icon .icon{height:1.3rem;width:1.3rem;fill:var(--accent-color)}.balance-card__token{font-size:.8rem}.balance-card__amount{font-size:1rem;font-weight:700;margin-left:auto}.page__header button{padding:.5rem 0}#transaction,#account{grid-template-rows:auto 1fr;gap:1rem 0;padding:1.5rem 0;align-content:flex-start}#transaction section,#account_details{display:grid;gap:2rem;grid-template-rows:auto 1fr}.positive{color:var(--green)}#transaction_top,#account_top{display:flex;flex-direction:column;justify-items:flex-start;position:relative}#transaction_detail__icon,#account_detail__icon{display:flex;background-color:var(--accent-color);border-radius:40%;padding:.8rem;justify-self:flex-start;align-self:flex-start}#transaction_detail__icon .icon,#account_detail__icon .icon{height:1.5rem;width:1.5rem;fill:rgba(var(--background-color), 1)}#transaction_detail__amount,#account_detail__amount{display:flex;font-size:1.5rem;font-weight:700}#account_detail__type{color:rgba(var(--text-color), 0.8);font-weight:500}#account_detail__interest_type{font-size:.9rem}#account_detail__interest{font-size:1rem;margin-left:.4rem;font-weight:500}#transaction__cta{justify-self:flex-start;margin-top:2rem}#account_process{display:grid;align-content:flex-start;gap:2rem}#account_process__steps,#transaction__steps{display:flex;flex-direction:column;gap:1.5rem}.account-step{opacity:0;grid-template-columns:auto minmax(0, 1fr);gap:.3rem .8rem;-webkit-animation:slide-down .3s forwards;animation:slide-down .3s forwards}.account-step:nth-of-type(2){-webkit-animation-delay:.1s;animation-delay:.1s}.account-step:nth-of-type(3){-webkit-animation-delay:.2s;animation-delay:.2s}.account-step:nth-of-type(4){-webkit-animation-delay:.3s;animation-delay:.3s}.account-step:not(:last-of-type) .step__line{position:relative;height:100%;width:.1rem;margin:.5rem 0 1rem 0;justify-self:center;background-color:var(--green)}.account-step .icon{height:1.5rem;width:1.5rem}.account-step:not(.loading) .step__title{font-weight:500;font-size:.9rem;padding:.2rem 0}.account-step .step__description{font-size:.8rem}.account-step.row-3:not(:last-of-type) .step__line{grid-row:span 2}.account-step.row-3 .button{grid-column:2/3}.account-step .button{justify-self:flex-start}@-webkit-keyframes slide-down{from{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:none}}@keyframes slide-down{from{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:none}}#deposit,#loan{padding:1.5rem 0;grid-template-rows:auto 1fr}#deposit sm-form,#loan sm-form{justify-self:center;margin-top:3rem;width:min(24rem,100%)}#deposit sm-form::part(form),#loan sm-form::part(form){display:flex;flex-direction:column}#deposit__icon .icon,#loan__icon .icon{height:1.8rem;width:1.8rem;fill:var(--accent-color)}.est-interest h3{margin-top:.2rem;color:rgba(var(--text-color), 0.8);font-size:1.3rem}.est-interest h3::after{font-weight:500;content:"% p.a";font-size:1rem}#get_deposit_amount,#get_loan_amount{--font-size: 1.5rem;margin-top:1rem}.loader-button-wrapper{display:flex;position:relative;justify-content:center;align-items:center}.loader-button-wrapper button[type=submit],.loader-button-wrapper slide-button{width:100%;z-index:1;transition:-webkit-clip-path .3s;transition:clip-path .3s;transition:clip-path .3s, -webkit-clip-path .3s;-webkit-clip-path:circle(100%);clip-path:circle(100%)}.loader-button-wrapper button[type=submit].clip,.loader-button-wrapper slide-button.clip{pointer-events:none;-webkit-clip-path:circle(0);clip-path:circle(0)}.loader-button-wrapper sm-spinner{position:absolute}#result{place-content:center}#result section{text-align:center;align-items:center}#result__icon{position:relative;display:flex;border-radius:50%;padding:1rem;margin:-5rem 0 1.5rem 0;-webkit-animation:pop-in 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop-in 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}#result__icon.pending{background-color:rgba(255,252,75,.1)}#result__icon.failed{background-color:rgba(255,75,75,.1)}#result__icon .icon{height:1.8rem;width:1.8rem}#result__description{margin:.5rem 0}#result__back_button{margin-top:3rem}@-webkit-keyframes pop-in{0%{opacity:0;transform:scale(0.4) translateY(6rem)}40%{opacity:1;transform:scale(0.4) translateY(0)}100%{transform:none}}@keyframes pop-in{0%{opacity:0;transform:scale(0.4) translateY(6rem)}40%{opacity:1;transform:scale(0.4) translateY(0)}100%{transform:none}}#account_summary{padding:0 1.5rem}#sign_out_button{color:rgba(var(--background-color), 1);--padding: 0.8rem 1.6rem;--background: var(--danger-color)}#admin{display:grid;padding:0 1.5rem;grid-template-columns:minmax(0, 1fr)}#admin_requests_container{margin-top:1rem;padding-bottom:3rem}@media screen and (max-width: 640px){#user_profile_button{grid-area:1/1/2/2}theme-toggle{grid-area:1/2/2/3}#dashboard{padding:0 1.5rem}#main_nav{background-color:rgba(var(--foreground-color), 1);border-top:thin solid rgba(var(--text-color), 0.1)}.nav-item{flex:1;flex-direction:column}.nav-item__title{display:flex;font-size:.8rem;font-weight:500;color:rgba(var(--text-color), 0.8);margin-top:.3rem}#transaction_action_button,#account_action_button,.loader-button-wrapper{margin-top:auto}#transaction_top,#account_top{margin-top:1rem}#user_section{left:0}#admin__header{position:relative;display:grid;gap:1rem;grid-template-columns:minmax(0, 1fr);text-align:center;justify-items:center}#account_process,#transaction__steps{border-top:solid rgba(var(--text-color), 0.2) thin;padding-top:1.5rem}.account-step .button{margin-top:.5rem}.activity-card--account .grid{text-align:right}.hide-on-small{display:none !important}}@media screen and (min-width: 640px){sm-popup{--width: 26rem}.h1{font-size:2rem}.h2{font-size:1.8rem}.h3{font-size:1.3rem}.h4{font-size:1rem}#confirmation_popup{--width: 24rem}.popup__header{padding:1rem 1.5rem 0 1.5rem}.page-layout{grid-template-columns:1fr 90vw 1fr}#home{background-color:rgba(var(--foreground-color), 1);grid-template-rows:auto 1fr;grid-template-columns:auto minmax(0, 1fr);grid-template-areas:"main-header main-header user-section" "main-nav subpages user-section"}#main_nav{flex-direction:column;padding:0 1rem}#main_nav::after{position:absolute;right:0;content:"";width:1px;background-color:rgba(var(--text-color), 0.2);height:80%}.nav-item--active{background-color:var(--accent-color--light)}.nav-item:not(:last-of-type){margin-bottom:.5rem}.nav-item:last-of-type{margin-top:auto;margin-bottom:1.5rem}.nav-item__title{display:none}#main_header{grid-template-columns:1fr auto auto}#user_section{grid-area:user-section;background-color:rgba(var(--background-color), 1);width:min(24rem,100%)}#transaction_top,#account_top,#account_process,#transaction__steps{overflow:hidden;padding:1.8rem;border-radius:.5rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 0 .1rem rgba(0,0,0,.1),0 1rem 1.5rem -0.8rem rgba(0,0,0,.1);align-self:flex-start}#transaction_detail__icon{justify-self:flex-start}#admin__header{display:flex;justify-content:space-between;align-items:center}.account-step.row-3{grid-template-areas:". . b-link" ". . b-link";grid-template-columns:auto minmax(0, 1fr) auto}.account-step.row-3 .step__line{grid-column:1/2}.account-step.row-3 .button{grid-area:b-link;align-self:flex-start}#user_accounts:not(:empty){gap:1rem}.activity-card--account{grid-template-columns:minmax(0, 1fr);text-align:left;justify-content:flex-start}.activity-card--account .activity-card__icon{justify-content:flex-start}}@media screen and (min-width: 1024px){.page-layout{grid-template-columns:1fr 80vw 1fr}.card{padding:1.5rem}#home{grid-template-columns:14rem minmax(0, 1fr) 24rem}.nav-item__title{display:flex;font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8);margin-left:.5rem}#transaction section,#account_details{grid-template-columns:18rem minmax(0, 1fr)}.hide-on-desktop{display:none}.activity-card--pending:not(:empty){padding:1.5rem}}@media screen and (min-width: 1920px){.page-layout{grid-template-columns:1fr 70vw 1fr}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.nav-item,.interact{transition:background-color .3s,transform .3s}.nav-item:hover,.interact:hover{background-color:var(--accent-color--light)}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 332782d..fc4e5cd 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -360,6 +360,10 @@ ul {
     fill: var(--accent-color);
   }
 }
+
+sm-spinner {
+  --size: 1.2rem;
+}
 #confirmation_popup,
 #prompt_popup {
   flex-direction: column;
@@ -521,6 +525,7 @@ details {
   sm-spinner {
     justify-self: center;
     margin-bottom: 1.5rem;
+    --size: 1.2rem;
   }
 }
 #home {
@@ -745,10 +750,6 @@ sm-chip {
     grid-area: amount;
     text-align: end;
   }
-  sm-spinner {
-    --height: 1rem;
-    --width: 1rem;
-  }
 }
 .activity-card--admin {
   align-items: center;
@@ -769,10 +770,6 @@ sm-chip {
     justify-content: flex-end;
     align-items: center;
   }
-  sm-spinner {
-    --height: 1rem;
-    --width: 1rem;
-  }
 }
 #pending_transaction:not(:empty) {
   margin-bottom: 2rem;
@@ -882,10 +879,6 @@ sm-chip {
     pointer-events: none;
     background-color: transparent;
   }
-  sm-spinner {
-    --height: 1rem;
-    --width: 1rem;
-  }
 }
 
 #account_chart_container {
@@ -929,9 +922,7 @@ sm-chip {
   }
 }
 .balance-card {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-areas: "icon ." "icon .";
+  display: flex;
   padding: 1rem 0;
   align-items: center;
   gap: 0.3rem 1rem;
@@ -956,6 +947,7 @@ sm-chip {
   &__amount {
     font-size: 1rem;
     font-weight: 700;
+    margin-left: auto;
   }
 }
 
@@ -1050,10 +1042,6 @@ sm-chip {
   &:nth-of-type(4) {
     animation-delay: 0.3s;
   }
-  sm-spinner {
-    --height: 1rem;
-    --width: 1rem;
-  }
   &:not(:last-of-type) .step__line {
     position: relative;
     height: 100%;
@@ -1202,12 +1190,8 @@ sm-chip {
     transform: none;
   }
 }
-#settings {
+#account_summary {
   padding: 0 1.5rem;
-  sm-copy {
-    font-size: 0.9rem;
-    margin: 0.3rem 0 1.5rem 0;
-  }
 }
 #sign_out_button {
   color: rgba(var(--background-color), 1);
@@ -1283,8 +1267,8 @@ sm-chip {
       text-align: right;
     }
   }
-  .hide-on-mobile {
-    display: none;
+  .hide-on-small {
+    display: none !important;
   }
 }
 @media screen and (min-width: 640px) {
@@ -1401,24 +1385,6 @@ sm-chip {
     }
   }
 }
-@media screen and (max-width: 1024px) {
-  #user_section {
-    position: fixed;
-    background-color: rgba(var(--background-color), 1);
-    transition: transform 0.3s;
-    z-index: 2;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    padding-top: 0;
-    &.reveal {
-      box-shadow: -0.5rem 0 1.5rem rgba(0, 0, 0, 0.1);
-    }
-    &:not(.reveal) {
-      transform: translateX(100%);
-    }
-  }
-}
 @media screen and (min-width: 1024px) {
   .page-layout {
     grid-template-columns: 1fr 80vw 1fr;
diff --git a/index.html b/index.html
index f22ccba..c4dc482 100644
--- a/index.html
+++ b/index.html
@@ -143,7 +143,7 @@
     </article>
     <article id="home" class="page hidden">
         <header id="main_header">
-            <div class="logo hide-on-mobile">
+            <div class="logo hide-on-small">
                 <svg class="main-logo" viewBox="0 0 27.25 32">
                     <title>RanchiMall</title>
                     <path
@@ -215,7 +215,7 @@
                     History
                 </span>
             </a>
-            <a href="#/home/settings" class="nav-item hide-on-desktop">
+            <a href="#/home/account_summary" class="nav-item hide-on-desktop">
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
                     viewBox="0 0 24 24" width="24px" fill="#000000">
                     <g>
@@ -418,6 +418,7 @@
                     <p>You transaction activities will appear here.</h4>
                 </div>
             </div>
+            <div id="account_summary" class="sub-page hidden"></div>
             <div id="admin" class="sub-page hidden">
                 <div id="admin__header">
                     <h3 class="h3">Requests</h3>
@@ -475,104 +476,7 @@
                 </div>
             </div>
         </section>
-        <section id="user_section">
-            <div id="user_section__header" class=" hide-on-desktop">
-                <button class="icon-button justify-self-start" onclick="toggleUserSection()">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
-                        <path fill-rule="evenodd"
-                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                            clip-rule="evenodd" />
-                    </svg>
-                </button>
-            </div>
-            <div class="user-option">
-                <h4 class="flex align-center">
-                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg"
-                        enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
-                        <g>
-                            <rect fill="none" height="24" width="24" />
-                        </g>
-                        <g>
-                            <g>
-                                <g>
-                                    <path
-                                        d="M11,5.08V2C6,2.5,2,6.81,2,12s4,9.5,9,10v-3.08c-3-0.48-6-3.4-6-6.92S8,5.56,11,5.08z M18.97,11H22c-0.47-5-4-8.53-9-9 v3.08C16,5.51,18.54,8,18.97,11z M13,18.92V22c5-0.47,8.53-4,9-9h-3.03C18.54,16,16,18.49,13,18.92z" />
-                                </g>
-                            </g>
-                        </g>
-                    </svg>
-                    Account summary
-                </h4>
-                <div id="account_chart_container">
-                    <div id="chart_legend">
-                        <div class="legend">Deposit</div>
-                        <div class="legend">Loan</div>
-                    </div>
-                    <canvas id="account_summary_chart"></canvas>
-                </div>
-                <div class="balance-card">
-                    <div class="balance-card__icon">
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-                            height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
-                            <rect fill="none" height="24" width="24" />
-                            <g>
-                                <path
-                                    d="M19.83,7.5l-2.27-2.27c0.07-0.42,0.18-0.81,0.32-1.15C17.96,3.9,18,3.71,18,3.5C18,2.67,17.33,2,16.5,2 c-1.64,0-3.09,0.79-4,2l-5,0C4.46,4,2,6.46,2,9.5S4.5,21,4.5,21l5.5,0v-2h2v2l5.5,0l1.68-5.59L22,14.47V7.5H19.83z M13,9H8V7h5V9z M16,11c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C17,10.55,16.55,11,16,11z" />
-                            </g>
-                        </svg>
-                    </div>
-                    <div class="balance-card__token">Total deposit</div>
-                    <div id="total_deposit" class="balance-card__amount"></div>
-                </div>
-                <div class="balance-card">
-                    <div class="balance-card__icon">
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                            <path
-                                d="M12.65,8.5H10.42a5.18,5.18,0,0,0-4,1.95L3.75,13.74a5,5,0,0,0-.68,5.31l0,0h0a5.07,5.07,0,0,0,4.5,2.73h7.88A5.08,5.08,0,0,0,20,19.05h0a5.39,5.39,0,0,0,.43-1.2,4.91,4.91,0,0,0-1-4.06l-2.66-3.34A5.17,5.17,0,0,0,12.65,8.5Z" />
-                            <path
-                                d="M9.71,6.59h3.94A2.94,2.94,0,0,0,16,5.39h0a1.13,1.13,0,0,0-.23-1.57,1.11,1.11,0,0,0-.95-.18h0a1.2,1.2,0,0,1-.92-.18l-.28-.21a3.64,3.64,0,0,0-4.22,0h0a1.18,1.18,0,0,1-1,.16L8.2,3.35a1.13,1.13,0,0,0-1.36.84A1.17,1.17,0,0,0,7,5H7A3.18,3.18,0,0,0,9.71,6.59Z" />
-                        </svg>
-                    </div>
-                    <div class="balance-card__token">Total loan</div>
-                    <div id="total_loan" class="balance-card__amount"></div>
-                </div>
-            </div>
-            <div>
-                <h4 class="flex align-center space-between">
-                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px"
-                        viewBox="0 0 24 24" width="24px" fill="#000000">
-                        <path d="M0 0h24v24H0z" fill="none" />
-                        <path
-                            d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
-                    </svg>
-                    My balance
-                    <button id="refresh_balance_button" class="button justify-right" onclick="refreshBalance(this)">
-                        Refresh
-                    </button>
-                </h4>
-                <div class="balance-card">
-                    <div class="balance-card__icon">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
-                            <path fill-rule="evenodd"
-                                d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 5a1 1 0 100 2h1a2 2 0 011.732 1H7a1 1 0 100 2h2.732A2 2 0 018 11H7a1 1 0 00-.707 1.707l3 3a1 1 0 001.414-1.414l-1.483-1.484A4.008 4.008 0 0011.874 10H13a1 1 0 100-2h-1.126a3.976 3.976 0 00-.41-1H13a1 1 0 100-2H7z"
-                                clip-rule="evenodd" />
-                        </svg>
-                    </div>
-                    <div class="balance-card__token">Rupee</div>
-                    <div id="rupee_balance" class="balance-card__amount"></div>
-                </div>
-                <div class="balance-card">
-                    <div class="balance-card__icon">
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                            <path
-                                d="M16.36,15.39c1.83,0,4.26-2.49,4.36-4.74-5.65-.19-4.91.47-7.28,2.39,2.19-2.4,1.42-7.79-1.43-10V6.17c2.33,1.49,2.21,5.14,0,7.15-2.23-2-2.27-5.69,0-7.15V3c-2.83,2.26-3.62,7.66-1.44,10-2.36-1.93-1.63-2.58-7.28-2.39.1,2.26,2.55,4.73,4.36,4.74,0,0-1.93.22-2.74-2.62,2.38-.37,4.29-.14,6.28,2-.79-.11-4.89,1.13-4.38,3.26.53.06,3,.3,3.58-.83-.17.18-1.25.5-1.53.05.38-1.39,2.32-2,2.32-2-1,1.82-.48,4.63.82,5.72,1.31-1.08,1.8-3.95.82-5.72,0,0,1.95.6,2.32,2-.29.46-1.36.12-1.53-.05.58,1.14,3.06.88,3.58.83.49-2.17-3.58-3.36-4.38-3.26,2-2.17,3.92-2.39,6.28-2C18.3,15.62,16.36,15.39,16.36,15.39ZM12,19.46c-.91-.79-.5-3,0-3.59C12.5,16.45,12.91,18.66,12,19.46Z" />
-                        </svg>
-                    </div>
-                    <div class="balance-card__token">FLO</div>
-                    <div id="flo_balance" class="balance-card__amount"></div>
-                </div>
-            </div>
-        </section>
+        <section id="user_section" class="hide-on-small"></section>
     </article>
     <article id="deposit" class="page hidden page-layout">
         <a class="button icon-button justify-self-start" href="#/home/dashboard">
@@ -799,28 +703,13 @@
             floGlobals.connectionErrorNotification = notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error')
         })
         window.addEventListener('online', () => {
-            getRef('notification_drawer').remove(floGlobals.connectionErrorNotification)
+            getById('notification_drawer').remove(floGlobals.connectionErrorNotification)
             notify('We are back online.', 'success')
         })
 
         // Use instead of document.getElementById
-        function getRef(elementId) {
-            if (!domRefs.hasOwnProperty(elementId)) {
-                domRefs[elementId] = {
-                    count: 1,
-                    ref: null,
-                };
-                return document.getElementById(elementId);
-            } else {
-                if (domRefs[elementId].count < 3) {
-                    domRefs[elementId].count = domRefs[elementId].count + 1;
-                    return document.getElementById(elementId);
-                } else {
-                    if (!domRefs[elementId].ref)
-                        domRefs[elementId].ref = document.getElementById(elementId);
-                    return domRefs[elementId].ref;
-                }
-            }
+        function getById(elementId) {
+            return document.getElementById(elementId)
         }
 
         // returns dom with specified element
@@ -843,8 +732,8 @@
         // function required for popups or modals to appear
         function openPopup(popupId, pinned) {
             zIndex++
-            getRef(popupId).setAttribute('style', `z-index: ${zIndex}`)
-            return getRef(popupId).show({ pinned })
+            getById(popupId).setAttribute('style', `z-index: ${zIndex}`)
+            return getById(popupId).show({ pinned })
         }
 
         // hides the popup or modal
@@ -856,14 +745,14 @@
         document.addEventListener('popupopened', e => {
             switch (e.target.id) {
                 case 'profile_popup':
-                    renderElem(getRef('profile_popup__content'), render.profile())
+                    renderElem(getById('profile_popup__content'), render.profile())
                     break;
             }
         })
         document.addEventListener('popupclosed', e => {
             switch (e.target.id) {
                 case 'profile_popup':
-                    renderElem(getRef('profile_popup__content'), html``)
+                    renderElem(getById('profile_popup__content'), html``)
                     break;
             }
             zIndex--;
@@ -872,10 +761,10 @@
         const getConfirmation = (title, options = {}) => {
             return new Promise(resolve => {
                 const { message = '', cancelText = 'Cancel', confirmText = 'OK', danger = false } = options
-                getRef('confirm_title').innerText = title;
-                getRef('confirm_message').innerText = message;
-                const cancelButton = getRef('confirmation_popup').querySelector('.cancel-button');
-                const confirmButton = getRef('confirmation_popup').querySelector('.confirm-button')
+                getById('confirm_title').innerText = title;
+                getById('confirm_message').innerText = message;
+                const cancelButton = getById('confirmation_popup').querySelector('.cancel-button');
+                const confirmButton = getById('confirmation_popup').querySelector('.confirm-button')
                 confirmButton.textContent = confirmText
                 cancelButton.textContent = cancelText
                 if (danger)
@@ -915,7 +804,7 @@
             if (mode === 'error') {
                 console.error(message)
             }
-            return getRef("notification_drawer").push(message, { icon, ...options });
+            return getById("notification_drawer").push(message, { icon, ...options });
         }
 
         function getFormattedTime(timestamp, format) {
@@ -955,7 +844,7 @@
             }
         }
 
-        window.addEventListener('hashchange', e => showPage(window.location.hash))
+        window.addEventListener('hashchange', e => routeTo(window.location.hash))
         window.addEventListener("load", () => {
             document.body.classList.remove('hidden')
             document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = floCrypto.getPubKeyHex)
@@ -980,7 +869,7 @@
         let accountLoader
         let accountChart
         let adminRequestsLoader
-        async function showPage(targetPage, options = {}) {
+        async function routeTo(targetPage, options = {}) {
             const { firstLoad, hashChange } = options
             let pageId
             let subPageId
@@ -1020,24 +909,24 @@
                 switch (pageId) {
                     case 'sign_in':
                         setTimeout(() => {
-                            getRef('private_key_field').focusIn()
+                            getById('private_key_field').focusIn()
                         }, 0);
                         break;
                     case 'sign_up':
                         const { floID, privKey } = floCrypto.generateNewID()
-                        getRef('generated_flo_id').value = floID
-                        getRef('generated_private_key').value = privKey
+                        getById('generated_flo_id').value = floID
+                        getById('generated_private_key').value = privKey
                         break;
                     case 'deposit':
                         const { I_s } = bank_app.getRates()
-                        getRef('deposit_interest_rate').textContent = (I_s * 100).toFixed(2)
+                        getById('deposit_interest_rate').textContent = (I_s * 100).toFixed(2)
                         // checks if there is transaction pending, if so then shows warning
                         checkIfAllowed('deposit')
                         checkTouchSupport(window.matchMedia("(any-hover: hover)"))
                         break;
                     case 'loan':
                         const { I_b } = bank_app.getRates()
-                        getRef('loan_interest_rate').textContent = (I_b * 100).toFixed(2)
+                        getById('loan_interest_rate').textContent = (I_b * 100).toFixed(2)
                         checkIfAllowed('loan')
                         checkTouchSupport(window.matchMedia("(any-hover: hover)"))
                         break;
@@ -1052,8 +941,8 @@
                         break;
                 }
                 document.querySelector('.page:not(.hidden)')?.classList.add('hidden')
-                getRef(pageId)?.classList.remove('hidden')
-                getRef(pageId)?.animate([
+                getById(pageId)?.classList.remove('hidden')
+                getById(pageId)?.animate([
                     {
                         opacity: 0,
                     },
@@ -1067,9 +956,19 @@
                     })
             }
             if (subPageId) {
-                getRef('all_responses_list').innerHTML = ''
-                getRef('all_requests_list').innerHTML = ''
-                getRef('user_accounts').innerHTML = ''
+                getById('all_responses_list').innerHTML = ''
+                getById('all_requests_list').innerHTML = ''
+                getById('user_accounts').innerHTML = ''
+                if (floGlobals.isMobileView) {
+                    if (accountChart)
+                        accountChart.destroy()
+                    renderElem(getById('user_section'), html``)
+                } else {
+                    renderElem(getById('user_section'), render.accountSummary())
+                    chartObserver.disconnect()
+                    chartObserver.observe(getById('account_chart_container'))
+                    refreshBalance()
+                }
                 switch (subPageId) {
                     case 'dashboard':
                         if (pagesData.openedSubPages.includes(subPageId)) {
@@ -1081,8 +980,8 @@
                         checkPendingTransaction()
                         hideProcess('deposit')
                         hideProcess('loan')
-                        getRef('get_deposit_amount').value = ''
-                        getRef('get_loan_amount').value = ''
+                        getById('get_deposit_amount').value = ''
+                        getById('get_loan_amount').value = ''
                         break;
                     case 'admin':
                         if (pagesData.openedSubPages.includes(subPageId)) {
@@ -1099,7 +998,7 @@
                             responseLoader = new LazyLoader('#all_responses_list', getResponses, render.responseCard, { batchSize: 10 })
                             responseLoader.init()
                         }
-                        getRef('notifications_page_button').classList.remove('has-notification')
+                        getById('notifications_page_button').classList.remove('has-notification')
                         break;
                     case 'history':
                         if (pagesData.openedSubPages.includes(subPageId)) {
@@ -1109,12 +1008,18 @@
                             requestLoader.init()
                         }
                         break;
+                    case 'account_summary':
+                        renderElem(getById('account_summary'), render.accountSummary())
+                        refreshBalance()
+                        chartObserver.disconnect()
+                        chartObserver.observe(getById('account_chart_container'))
+                        break;
                 }
                 document.querySelector('.sub-page:not(.hidden)')?.classList.add('hidden')
-                getRef(subPageId)?.classList.remove('hidden')
-                getRef('main_nav').querySelectorAll('.nav-item--active').forEach(item => item.classList.remove('nav-item--active'))
-                getRef('main_nav').querySelector(`.nav-item[href="#/${pageId}/${subPageId ? subPageId : ''}"]`).classList.add('nav-item--active')
-                getRef(subPageId)?.animate([
+                getById(subPageId)?.classList.remove('hidden')
+                getById('main_nav').querySelectorAll('.nav-item--active').forEach(item => item.classList.remove('nav-item--active'))
+                getById('main_nav').querySelector(`.nav-item[href="#/${pageId}/${subPageId ? subPageId : ''}"]`).classList.add('nav-item--active')
+                getById(subPageId)?.animate([
                     {
                         opacity: 0,
                         transform: 'translateY(1rem)'
@@ -1212,6 +1117,21 @@
                 this.render()
             }
         }
+        const mobileQuery = window.matchMedia('(max-width: 40rem)')
+        function handleMobileChange(e) {
+            floGlobals.isMobileView = e.matches
+            routeTo(window.location.hash)
+            if (floGlobals.isMobileView) {
+            } else {
+            }
+        }
+        mobileQuery.addEventListener('change', handleMobileChange)
+        handleMobileChange(mobileQuery)
+        const reduceMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        reduceMotionQuery.addEventListener('change', () => {
+            floGlobals.prefersReducedMotion = reduceMotionQuery.matches
+        });
+        floGlobals.prefersReducedMotion = reduceMotionQuery.matches  
     </script>
     <script id="ui_functions">
         const utils = {
@@ -1291,9 +1211,9 @@
         const render = {
             adminRequestCard(activityDetails = {}) {
                 const { rtype, id, status } = activityDetails
-                const card = getRef('admin_request_template').content.cloneNode(true).firstElementChild
+                const card = getById('admin_request_template').content.cloneNode(true).firstElementChild
                 const icon = utils.getRelatedIcon(rtype)
-                const selectedStatus = getRef('admin_request_selector').value
+                const selectedStatus = getById('admin_request_selector').value
                 let action = ''
                 switch (rtype) {
                     case 'openDeposit':
@@ -1320,7 +1240,7 @@
             },
             requestCard(activityDetails = {}) {
                 const { requestID, amount, rtype, timestamp, status } = activityDetails
-                const card = getRef('request_template').content.cloneNode(true).firstElementChild
+                const card = getById('request_template').content.cloneNode(true).firstElementChild
                 const icon = utils.getRelatedIcon(rtype)
                 let action = ''
                 switch (rtype) {
@@ -1353,7 +1273,7 @@
                     amount = bank_app.getUserDetails(myFloID).accounts[index].amount
                 }
                 const timestamp = id.split('_')[0]
-                const card = getRef('response_template').content.cloneNode(true).firstElementChild
+                const card = getById('response_template').content.cloneNode(true).firstElementChild
                 const icon = utils.getRelatedIcon(status)
                 let action = ''
                 switch (rtype) {
@@ -1384,7 +1304,7 @@
             accountCard(accountDetails = {}) {
                 const { type, status, openTime, closeTime = 0, amount, netAmt } = accountDetails
                 let index = bank_app.getUserDetails(myFloID).accounts.findIndex(({ openTime: ot }) => ot == openTime)
-                const card = getRef('account_template').content.cloneNode(true).firstElementChild
+                const card = getById('account_template').content.cloneNode(true).firstElementChild
                 const icon = utils.getRelatedIcon(type)
                 card.setAttribute('href', `#/account?index=${index}`)
                 card.querySelector('.activity-card__icon').innerHTML = icon
@@ -1395,7 +1315,7 @@
             },
             accountProgressStep(type, title, description = '', options = {}) {
                 const { openTx, closeTx } = options
-                const elem = getRef('account_step_template').content.cloneNode(true).firstElementChild
+                const elem = getById('account_step_template').content.cloneNode(true).firstElementChild
                 elem.classList.add(type)
                 elem.querySelector('.step__icon').innerHTML = type === 'loading' ? '<sm-spinner></sm-spinner>' : utils.getRelatedIcon(type)
                 elem.querySelector('.step__title').textContent = title
@@ -1410,6 +1330,60 @@
                 }
                 return elem
             },
+            accountSummary() {
+                return html`
+                    <div class="user-option">
+                        <h4 class="flex align-center">
+                            <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24" /> </g> <g> <g> <g> <path d="M11,5.08V2C6,2.5,2,6.81,2,12s4,9.5,9,10v-3.08c-3-0.48-6-3.4-6-6.92S8,5.56,11,5.08z M18.97,11H22c-0.47-5-4-8.53-9-9 v3.08C16,5.51,18.54,8,18.97,11z M13,18.92V22c5-0.47,8.53-4,9-9h-3.03C18.54,16,16,18.49,13,18.92z" /> </g> </g> </g> </svg>
+                            Account summary
+                        </h4>
+                        <div id="account_chart_container">
+                            <div id="chart_legend">
+                                <div class="legend">Deposit</div>
+                                <div class="legend">Loan</div>
+                            </div>
+                            <canvas id="account_summary_chart"></canvas>
+                        </div>
+                        <div class="balance-card">
+                            <div class="balance-card__icon">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <rect fill="none" height="24" width="24" /> <g> <path d="M19.83,7.5l-2.27-2.27c0.07-0.42,0.18-0.81,0.32-1.15C17.96,3.9,18,3.71,18,3.5C18,2.67,17.33,2,16.5,2 c-1.64,0-3.09,0.79-4,2l-5,0C4.46,4,2,6.46,2,9.5S4.5,21,4.5,21l5.5,0v-2h2v2l5.5,0l1.68-5.59L22,14.47V7.5H19.83z M13,9H8V7h5V9z M16,11c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C17,10.55,16.55,11,16,11z" /> </g> </svg>
+                            </div>
+                            <div class="balance-card__token">Total deposit</div>
+                            <div id="total_deposit" class="balance-card__amount"></div>
+                        </div>
+                        <div class="balance-card">
+                            <div class="balance-card__icon">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12.65,8.5H10.42a5.18,5.18,0,0,0-4,1.95L3.75,13.74a5,5,0,0,0-.68,5.31l0,0h0a5.07,5.07,0,0,0,4.5,2.73h7.88A5.08,5.08,0,0,0,20,19.05h0a5.39,5.39,0,0,0,.43-1.2,4.91,4.91,0,0,0-1-4.06l-2.66-3.34A5.17,5.17,0,0,0,12.65,8.5Z" /> <path d="M9.71,6.59h3.94A2.94,2.94,0,0,0,16,5.39h0a1.13,1.13,0,0,0-.23-1.57,1.11,1.11,0,0,0-.95-.18h0a1.2,1.2,0,0,1-.92-.18l-.28-.21a3.64,3.64,0,0,0-4.22,0h0a1.18,1.18,0,0,1-1,.16L8.2,3.35a1.13,1.13,0,0,0-1.36.84A1.17,1.17,0,0,0,7,5H7A3.18,3.18,0,0,0,9.71,6.59Z" /> </svg>
+                            </div>
+                            <div class="balance-card__token">Total loan</div>
+                            <div id="total_loan" class="balance-card__amount"></div>
+                        </div>
+                    </div>
+                    <div>
+                        <h4 class="flex align-center space-between">
+                            <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" /> </svg>
+                            My balance
+                            <button id="refresh_balance_button" class="button justify-right" onclick="refreshBalance(this)">
+                                Refresh
+                            </button>
+                        </h4>
+                        <div class="balance-card">
+                            <div class="balance-card__icon">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 5a1 1 0 100 2h1a2 2 0 011.732 1H7a1 1 0 100 2h2.732A2 2 0 018 11H7a1 1 0 00-.707 1.707l3 3a1 1 0 001.414-1.414l-1.483-1.484A4.008 4.008 0 0011.874 10H13a1 1 0 100-2h-1.126a3.976 3.976 0 00-.41-1H13a1 1 0 100-2H7z" clip-rule="evenodd" /> </svg>
+                            </div>
+                            <div class="balance-card__token">Rupee</div>
+                            <div id="rupee_balance" class="balance-card__amount"></div>
+                        </div>
+                        <div class="balance-card">
+                            <div class="balance-card__icon">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M16.36,15.39c1.83,0,4.26-2.49,4.36-4.74-5.65-.19-4.91.47-7.28,2.39,2.19-2.4,1.42-7.79-1.43-10V6.17c2.33,1.49,2.21,5.14,0,7.15-2.23-2-2.27-5.69,0-7.15V3c-2.83,2.26-3.62,7.66-1.44,10-2.36-1.93-1.63-2.58-7.28-2.39.1,2.26,2.55,4.73,4.36,4.74,0,0-1.93.22-2.74-2.62,2.38-.37,4.29-.14,6.28,2-.79-.11-4.89,1.13-4.38,3.26.53.06,3,.3,3.58-.83-.17.18-1.25.5-1.53.05.38-1.39,2.32-2,2.32-2-1,1.82-.48,4.63.82,5.72,1.31-1.08,1.8-3.95.82-5.72,0,0,1.95.6,2.32,2-.29.46-1.36.12-1.53-.05.58,1.14,3.06.88,3.58.83.49-2.17-3.58-3.36-4.38-3.26,2-2.17,3.92-2.39,6.28-2C18.3,15.62,16.36,15.39,16.36,15.39ZM12,19.46c-.91-.79-.5-3,0-3.59C12.5,16.45,12.91,18.66,12,19.46Z" /> </svg>
+                            </div>
+                            <div class="balance-card__token">FLO</div>
+                            <div id="flo_balance" class="balance-card__amount"></div>
+                        </div>
+                    </div>
+                `
+            },
             profile() {
                 return html`
                     <div class="grid gap-1-5">
@@ -1425,19 +1399,19 @@
         function getSignedIn() {
             return new Promise((resolve, reject) => {
                 if (window.location.hash.includes('sign_in') || window.location.hash.includes('sign_up')) {
-                    showPage(window.location.hash)
+                    routeTo(window.location.hash)
                 } else {
-                    showPage('landing')
+                    routeTo('landing')
                 }
-                getRef('sign_in_button').onclick = () => {
-                    resolve(getRef('private_key_field').value.trim())
-                    getRef('private_key_field').value = ''
-                    showPage('loading')
+                getById('sign_in_button').onclick = () => {
+                    resolve(getById('private_key_field').value.trim())
+                    getById('private_key_field').value = ''
+                    routeTo('loading')
                 }
-                getRef('sign_up_button').onclick = () => {
-                    resolve(getRef('generated_private_key').value.trim())
-                    getRef('generated_private_key').value = ''
-                    showPage('loading')
+                getById('sign_up_button').onclick = () => {
+                    resolve(getById('generated_private_key').value.trim())
+                    getById('generated_private_key').value = ''
+                    routeTo('loading')
                 }
             })
         }
@@ -1459,10 +1433,12 @@
                 button.classList.add('loading')
                 button.innerHTML = `<sm-spinner></sm-spinner>`
             }
+            getById('rupee_balance').innerHTML = `<sm-spinner></sm-spinner>`
+            getById('flo_balance').innerHTML = `<sm-spinner></sm-spinner>`
             Promise.all([bank_app.tokenAPI.getBalance(myFloID), floBlockchainAPI.getBalance(myFloID)])
                 .then(([rupeeBalance, floBalance]) => {
-                    getRef('rupee_balance').textContent = utils.formatAmount(rupeeBalance)
-                    getRef('flo_balance').textContent = floBalance
+                    getById('rupee_balance').textContent = utils.formatAmount(rupeeBalance)
+                    getById('flo_balance').textContent = floBalance
                     if (button) {
                         button.classList.remove('loading')
                         button.textContent = `Refresh`
@@ -1536,12 +1512,12 @@
             }
             const icon = utils.getRelatedIcon(rtype)
             const statusIcon = utils.getRelatedIcon(status)
-            getRef('transaction_detail__icon').innerHTML = icon
-            getRef('transaction_detail__type').textContent = type
-            getRef('transaction_detail__amount').textContent = utils.formatAmount(amount)
+            getById('transaction_detail__icon').innerHTML = icon
+            getById('transaction_detail__type').textContent = type
+            getById('transaction_detail__amount').textContent = utils.formatAmount(amount)
 
-            getRef('transaction__steps').innerHTML = ''
-            getRef('transaction__steps').append(render.accountProgressStep('success', `Sent ${type} request`, getFormattedTime(timestamp)))
+            getById('transaction__steps').innerHTML = ''
+            getById('transaction__steps').append(render.accountProgressStep('success', `Sent ${type} request`, getFormattedTime(timestamp)))
 
             if (requestResponsePairs.hasOwnProperty(requestID)) {
                 const { status, reason } = bank_app.viewAllResponses()[requestResponsePairs[requestID]]
@@ -1562,8 +1538,8 @@
                             type = 'loan repayment complete'
                             break;
                     }
-                    getRef('transaction__steps').append(render.accountProgressStep(status, action, getFormattedTime(timestamp)))
-                    getRef('transaction__steps').append(createElement('a', {
+                    getById('transaction__steps').append(render.accountProgressStep(status, action, getFormattedTime(timestamp)))
+                    getById('transaction__steps').append(createElement('a', {
                         textContent: `View ${type} account`,
                         attributes: { id: 'transaction__cta', href: `#/account?index=${index}` },
                         className: 'button'
@@ -1584,10 +1560,10 @@
                             type = 'repay loan'
                             break;
                     }
-                    getRef('transaction__steps').append(render.accountProgressStep(status, `Failed to ${action}`, reason))
+                    getById('transaction__steps').append(render.accountProgressStep(status, `Failed to ${action}`, reason))
                 }
             } else {
-                getRef('transaction__steps').append(render.accountProgressStep('pending', `Waiting for ${type} request confirmation`, `You can continue using the app, you will get in-app notification once your request is processed.`))
+                getById('transaction__steps').append(render.accountProgressStep('pending', `Waiting for ${type} request confirmation`, `You can continue using the app, you will get in-app notification once your request is processed.`))
             }
         }
 
@@ -1624,33 +1600,33 @@
 
         function renderAccountProgress(index) {
             const { type, status, openTime, closeTime = undefined, amount, netAmt, openTx = undefined, closeTx = undefined } = bank_app.getUserDetails(myFloID).accounts[index]
-            getRef('account_process__steps').innerHTML = ''
-            getRef('account_process__steps').append(render.accountProgressStep('success', type === "deposit" ? 'Deposited' : 'Got loan', getFormattedTime(openTime), { openTx }))
+            getById('account_process__steps').innerHTML = ''
+            getById('account_process__steps').append(render.accountProgressStep('success', type === "deposit" ? 'Deposited' : 'Got loan', getFormattedTime(openTime), { openTx }))
             const { isPending, pendingRequest } = getAccountStatus(index)
             if (type === 'deposit') {
                 if (isPending) {
-                    getRef('account_process__steps').append(render.accountProgressStep('success', 'Sent withdrawal request', getFormattedTime(pendingRequest.split('_')[0])))
-                    getRef('account_process__steps').append(render.accountProgressStep('pending', 'Waiting for withdrawal confirmation', `This may take upto 4hrs to be processed. Once your request is processed, your withdrawn amount will reflect in your balance.<br>meanwhile you can go back and continue using the app.`))
+                    getById('account_process__steps').append(render.accountProgressStep('success', 'Sent withdrawal request', getFormattedTime(pendingRequest.split('_')[0])))
+                    getById('account_process__steps').append(render.accountProgressStep('pending', 'Waiting for withdrawal confirmation', `This may take upto 4hrs to be processed. Once your request is processed, your withdrawn amount will reflect in your balance.<br>meanwhile you can go back and continue using the app.`))
                 } else if (closeTime) {
-                    getRef('account_process__steps').append(render.accountProgressStep('success', 'Withdrawal complete', getFormattedTime(closeTime), { closeTx }))
+                    getById('account_process__steps').append(render.accountProgressStep('success', 'Withdrawal complete', getFormattedTime(closeTime), { closeTx }))
                 }
             } else {
                 if (isPending) {
-                    getRef('account_process__steps').append(render.accountProgressStep('success', 'Sent repay request', getFormattedTime(pendingRequest.split('_')[0])))
-                    getRef('account_process__steps').append(render.accountProgressStep('pending', 'Waiting for repayment confirmation', `This may take upto 4hrs to be processed. Once your request is processed, your loan will be closed,`))
+                    getById('account_process__steps').append(render.accountProgressStep('success', 'Sent repay request', getFormattedTime(pendingRequest.split('_')[0])))
+                    getById('account_process__steps').append(render.accountProgressStep('pending', 'Waiting for repayment confirmation', `This may take upto 4hrs to be processed. Once your request is processed, your loan will be closed,`))
                 } else if (closeTime) {
-                    getRef('account_process__steps').append(render.accountProgressStep('success', 'Repayment complete', getFormattedTime(closeTime), { closeTx }))
+                    getById('account_process__steps').append(render.accountProgressStep('success', 'Repayment complete', getFormattedTime(closeTime), { closeTx }))
                 }
             }
         }
 
-        getRef('accounts_status_selector').addEventListener('change', e => {
+        getById('accounts_status_selector').addEventListener('change', e => {
             accountLoader.update(getAccounts())
         })
 
         function getAccounts() {
             bank_app.refreshData()
-            const statusFilter = getRef('accounts_status_selector').value
+            const statusFilter = getById('accounts_status_selector').value
             return bank_app.getUserDetails(myFloID).accounts.filter(({ status }) => status === statusFilter).reverse()
         }
 
@@ -1659,22 +1635,22 @@
             const { type, status, openTime, closeTime = 0, amount, netAmt } = bank_app.getUserDetails(myFloID).accounts[index]
             const icon = utils.getRelatedIcon(type)
             const interest = netAmt - amount
-            getRef('account_detail__icon').innerHTML = icon
-            getRef('account_detail__status').textContent = status
-            getRef('account_detail__status').className = `status-tag flex align-center ${status}`
-            getRef('account_detail__type').textContent = type
-            getRef('account_detail__amount').textContent = utils.formatAmount(amount)
-            getRef('account_detail__interest_type').textContent = `Interest ${type === 'deposit' ? 'earned' : 'accrued'}`
-            getRef('account_detail__interest').textContent = utils.formatAmount(interest)
-            getRef('account_detail__interest').className = type === 'deposit' ? 'positive' : 'negative'
+            getById('account_detail__icon').innerHTML = icon
+            getById('account_detail__status').textContent = status
+            getById('account_detail__status').className = `status-tag flex align-center ${status}`
+            getById('account_detail__type').textContent = type
+            getById('account_detail__amount').textContent = utils.formatAmount(amount)
+            getById('account_detail__interest_type').textContent = `Interest ${type === 'deposit' ? 'earned' : 'accrued'}`
+            getById('account_detail__interest').textContent = utils.formatAmount(interest)
+            getById('account_detail__interest').className = type === 'deposit' ? 'positive' : 'negative'
             renderAccountProgress(index)
 
             if (status === 'active' && !getAccountStatus(index).isPending) {
-                getRef('account_action_button').classList.remove('hidden')
+                getById('account_action_button').classList.remove('hidden')
             } else {
-                getRef('account_action_button').classList.add('hidden')
+                getById('account_action_button').classList.add('hidden')
             }
-            getRef('account_action_button').textContent = (type === 'deposit') ? 'Withdraw' : 'Repay'
+            getById('account_action_button').textContent = (type === 'deposit') ? 'Withdraw' : 'Repay'
         }
 
         async function processAccount() {
@@ -1687,17 +1663,17 @@
                 ans = await getConfirmation('Repay loan?', { message: 'Make sure you have required amount to repay the loan!', cancelText: 'No', confirmText: 'Yes' })
             }
             if (ans) {
-                getRef('account_action_button').classList.add('hidden')
+                getById('account_action_button').classList.add('hidden')
                 const actionToDo = type === 'deposit' ? 'withdraw' : 'Repay'
-                getRef('account_process__steps').append(render.accountProgressStep('loading', `Sending ${actionToDo} request`))
+                getById('account_process__steps').append(render.accountProgressStep('loading', `Sending ${actionToDo} request`))
                 if (type === 'deposit') {
                     bank_app.withdrawDeposit(parseInt(index))
                         .then(res => {
                             renderAccountProgress(index)
                         })
                         .catch(err => {
-                            getRef('account_process__steps').lastElementChild.remove()
-                            getRef('account_process__steps')
+                            getById('account_process__steps').lastElementChild.remove()
+                            getById('account_process__steps')
                                 .append(
                                     render.accountProgressStep('failed', 'Failed withdrawal', `Can't withdraw deposit as loan amount exceeds total deposit amount.`)
                                 )
@@ -1708,8 +1684,8 @@
                             renderAccountProgress(index)
                         })
                         .catch(err => {
-                            getRef('account_process__steps').lastElementChild.remove()
-                            getRef('account_process__steps')
+                            getById('account_process__steps').lastElementChild.remove()
+                            getById('account_process__steps')
                                 .append(
                                     render.accountProgressStep('failed', 'Failed repayment', err)
                                 )
@@ -1728,16 +1704,16 @@
         function updateChart() {
             const { depositTotal, loanTotal } = bank_app.getUserDetails(myFloID)
             if (!depositTotal && !loanTotal) {
-                getRef('account_chart_container').classList.add('hidden')
+                getById('account_chart_container').classList.add('hidden')
             } else {
-                getRef('account_chart_container').classList.remove('hidden')
+                getById('account_chart_container').classList.remove('hidden')
             }
             if (accountChart && isChartVisible) {
                 accountChart.data.datasets[0].data = [depositTotal, loanTotal]
                 accountChart.update()
             }
-            getRef('total_deposit').textContent = utils.formatAmount(depositTotal)
-            getRef('total_loan').textContent = utils.formatAmount(loanTotal)
+            getById('total_deposit').textContent = utils.formatAmount(depositTotal)
+            getById('total_loan').textContent = utils.formatAmount(loanTotal)
         }
 
         document.querySelector('theme-toggle').addEventListener('themechange', e => {
@@ -1748,7 +1724,7 @@
         })
 
         function renderChart(params) {
-            const ctx = getRef('account_summary_chart').getContext('2d');
+            const ctx = getById('account_summary_chart').getContext('2d');
             const { depositTotal, loanTotal } = bank_app.getUserDetails(myFloID)
             return new Chart(ctx, {
                 type: 'doughnut',
@@ -1788,112 +1764,106 @@
                 if (entry.isIntersecting) {
                     const { depositTotal, loanTotal } = bank_app.getUserDetails(myFloID)
                     if (!depositTotal && !loanTotal) {
-                        getRef('account_chart_container').classList.add('hidden')
+                        getById('account_chart_container').classList.add('hidden')
                     } else {
                         accountChart = renderChart()
                         isChartVisible = true
-                        getRef('account_chart_container').classList.remove('hidden')
+                        getById('account_chart_container').classList.remove('hidden')
                     }
                 } else if (!entry.isIntersecting && accountChart) {
                     accountChart.destroy()
                     isChartVisible = false
-                }
-            })
-        })
-        const userSectionObserver = new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    refreshBalance()
+                    getById('account_chart_container').classList.add('hidden')
                 }
             })
         })
 
-        getRef('get_deposit_amount').addEventListener('input', handleDepositAmountInput)
+        getById('get_deposit_amount').addEventListener('input', handleDepositAmountInput)
         function handleDepositAmountInput(e) {
             let message = ''
-            if (getRef(`deposit_button_wrapper`).children[0]?.tagName === 'SM-BUTTON') {
+            if (getById(`deposit_button_wrapper`).children[0]?.tagName === 'SM-BUTTON') {
                 message = `Deposit`
             } else {
                 message = `Slide to deposit`
             }
             if (e.target.value.trim() !== '') {
-                getRef(`deposit_button_wrapper`).children[0].textContent = `${message} ${utils.formatAmount(parseFloat(e.target.value))}`
+                getById(`deposit_button_wrapper`).children[0].textContent = `${message} ${utils.formatAmount(parseFloat(e.target.value))}`
             } else {
-                if (getRef(`deposit_button_wrapper`).firstElementChild)
-                    getRef(`deposit_button_wrapper`).firstElementChild.textContent = message
+                if (getById(`deposit_button_wrapper`).firstElementChild)
+                    getById(`deposit_button_wrapper`).firstElementChild.textContent = message
             }
         }
-        getRef('get_loan_amount').addEventListener('input', handleDepositAmountInput)
+        getById('get_loan_amount').addEventListener('input', handleDepositAmountInput)
         function handleLoanAmountInput(e) {
             let message = ''
             if (e.target.value.trim() !== '') {
-                if (getRef(`loan_button_wrapper`).children[0].tagName === 'SM-BUTTON') {
+                if (getById(`loan_button_wrapper`).children[0].tagName === 'SM-BUTTON') {
                     message = `Request loan of`
                 } else {
                     message = `Slide to request loan of`
                 }
-                getRef(`loan_button_wrapper`).children[0].textContent = `${message} ${utils.formatAmount(parseFloat(e.target.value))}`
+                getById(`loan_button_wrapper`).children[0].textContent = `${message} ${utils.formatAmount(parseFloat(e.target.value))}`
             } else {
-                if (getRef(`loan_button_wrapper`).children[0]?.tagName === 'SM-BUTTON') {
+                if (getById(`loan_button_wrapper`).children[0]?.tagName === 'SM-BUTTON') {
                     message = `Request loan`
                 } else {
                     message = `Slide to request loan`
                 }
-                getRef(`loan_button_wrapper`).children[0].textContent = message
+                getById(`loan_button_wrapper`).children[0].textContent = message
             }
         }
 
         function showActionResult(details = {}) {
             const { type, amount, status, reason = '' } = details
-            getRef('result__icon').innerHTML = utils.getRelatedIcon(status)
-            getRef('result__icon').className = status
+            getById('result__icon').innerHTML = utils.getRelatedIcon(status)
+            getById('result__icon').className = status
             switch (status) {
                 case 'pending':
-                    getRef('result__title').textContent = `Sent ${type} request`
-                    getRef('result__description').textContent = `Waiting for ${type} confirmation. This may take upto 4hrs to be processed, Meanwhile you can go back and continue using app.`
+                    getById('result__title').textContent = `Sent ${type} request`
+                    getById('result__description').textContent = `Waiting for ${type} confirmation. This may take upto 4hrs to be processed, Meanwhile you can go back and continue using app.`
                     break
                 case 'failed':
-                    getRef('result__title').textContent = `Failed to send ${type} request`
-                    getRef('result__description').textContent = reason
+                    getById('result__title').textContent = `Failed to send ${type} request`
+                    getById('result__description').textContent = reason
                     break
                 case 'loading':
-                    getRef('result__icon').innerHTML = '<sm-spinner></sm-spinner>'
-                    getRef('result__title').textContent = `Sending ${type} request`
-                    getRef('result__description').textContent = ''
+                    getById('result__icon').innerHTML = '<sm-spinner></sm-spinner>'
+                    getById('result__title').textContent = `Sending ${type} request`
+                    getById('result__description').textContent = ''
                     break
             }
-            getRef(`get_${type}_amount`).value = ''
+            getById(`get_${type}_amount`).value = ''
         }
 
         // Sets UX according to supported pointing device
         const checkTouchSupport = (mql) => {
             if (mql.matches) {
-                getRef('deposit_button_wrapper').innerHTML = `<button id="deposit_button" class="button button--primary" onclick="confirmDeposit()" disabled>Deposit</button>`
-                getRef('loan_button_wrapper').innerHTML = `<button id="loan_button" class="button button--primary" onclick="confirmLoan()" disabled>Request loan</button>`
+                getById('deposit_button_wrapper').innerHTML = `<button id="deposit_button" class="button button--primary" onclick="confirmDeposit()" disabled>Deposit</button>`
+                getById('loan_button_wrapper').innerHTML = `<button id="loan_button" class="button button--primary" onclick="confirmLoan()" disabled>Request loan</button>`
 
-                getRef('deposit_form').addEventListener('submit', confirmDeposit)
-                getRef('loan_form').addEventListener('submit', confirmLoan)
+                getById('deposit_form').addEventListener('submit', confirmDeposit)
+                getById('loan_form').addEventListener('submit', confirmLoan)
 
-                getRef('deposit_button_wrapper').removeEventListener('confirmed', initDeposit)
-                getRef('loan_button_wrapper').removeEventListener('confirmed', initLoan)
+                getById('deposit_button_wrapper').removeEventListener('confirmed', initDeposit)
+                getById('loan_button_wrapper').removeEventListener('confirmed', initLoan)
             } else {
                 // touch supported
-                getRef('deposit_button_wrapper').innerHTML = `<slide-button id="deposit_slide" type="submit" disabled>Slide to deposit</slide-button>`
-                getRef('loan_button_wrapper').innerHTML = `<slide-button id="loan_slide" type="submit" disabled>Slide to request loan</slide-button>`
+                getById('deposit_button_wrapper').innerHTML = `<slide-button id="deposit_slide" type="submit" disabled>Slide to deposit</slide-button>`
+                getById('loan_button_wrapper').innerHTML = `<slide-button id="loan_slide" type="submit" disabled>Slide to request loan</slide-button>`
 
-                getRef('deposit_button_wrapper').addEventListener('confirmed', initDeposit)
-                getRef('loan_button_wrapper').addEventListener('confirmed', initLoan)
+                getById('deposit_button_wrapper').addEventListener('confirmed', initDeposit)
+                getById('loan_button_wrapper').addEventListener('confirmed', initLoan)
 
-                getRef('deposit_form').removeEventListener('submit', confirmDeposit)
-                getRef('loan_form').removeEventListener('submit', confirmLoan)
+                getById('deposit_form').removeEventListener('submit', confirmDeposit)
+                getById('loan_form').removeEventListener('submit', confirmLoan)
             }
-            getRef('deposit_form')?.elementsChanged()
-            getRef('loan_form')?.elementsChanged()
+            getById('deposit_form')?.elementsChanged()
+            getById('loan_form')?.elementsChanged()
         }
         window.matchMedia("(any-hover: hover)").addEventListener('change', checkTouchSupport);
 
         async function confirmDeposit() {
-            const amount = parseFloat(getRef('get_deposit_amount').value)
+            const amount = parseFloat(getById('get_deposit_amount').value)
             const confirm = await getConfirmation('Continue?', { message: `Confirm deposit of ${utils.formatAmount(amount)}?`, cancelText: 'Cancel', confirmText: 'Confirm' })
             if (confirm) {
                 initDeposit()
@@ -1901,7 +1871,7 @@
         }
 
         function initDeposit() {
-            const amount = parseFloat(getRef('get_deposit_amount').value)
+            const amount = parseFloat(getById('get_deposit_amount').value)
             showProcess('deposit')
             bank_app.makeDeposit(amount)
                 .then(() => {
@@ -1916,14 +1886,14 @@
         }
 
         async function confirmLoan(params) {
-            const amount = parseFloat(getRef('get_loan_amount').value)
+            const amount = parseFloat(getById('get_loan_amount').value)
             const confirm = await getConfirmation('Continue?', { message: `Confirm loan of ${utils.formatAmount(amount)}?`, cancelText: 'Cancel', confirmText: 'Confirm' })
             if (confirm) {
                 initLoan()
             }
         }
         function initLoan() {
-            const amount = parseFloat(getRef('get_loan_amount').value)
+            const amount = parseFloat(getById('get_loan_amount').value)
             showProcess('loan')
             bank_app.requestLoan(amount)
                 .then(() => {
@@ -1938,32 +1908,28 @@
         }
 
         function showProcess(type) {
-            getRef(`${type}_button_wrapper`).children[0].classList.add('clip')
-            getRef(`${type}_button_wrapper`).append(document.createElement('sm-spinner'))
+            getById(`${type}_button_wrapper`).children[0].classList.add('clip')
+            getById(`${type}_button_wrapper`).append(document.createElement('sm-spinner'))
         }
         function hideProcess(type) {
-            getRef(`${type}_button_wrapper`).children[0]?.classList.remove('clip')
-            getRef(`${type}_button_wrapper`).querySelector('sm-spinner')?.remove()
-        }
-
-        function toggleUserSection() {
-            getRef('user_section').classList.toggle('reveal')
+            getById(`${type}_button_wrapper`).children[0]?.classList.remove('clip')
+            getById(`${type}_button_wrapper`).querySelector('sm-spinner')?.remove()
         }
 
         function getAdminRequests() {
             const allRequests = utils.getArrayOfObj(bank_app.viewAllRequests()).reverse()
-            const selectedStatus = getRef('admin_request_selector').value
+            const selectedStatus = getById('admin_request_selector').value
             if (selectedStatus === 'failed') {
                 return allRequests.filter(({ status }) => status.includes(' '))
             } else {
                 return allRequests.filter(({ status }) => status === selectedStatus)
             }
         }
-        getRef('admin_request_selector').addEventListener('change', e => {
+        getById('admin_request_selector').addEventListener('change', e => {
             adminRequestsLoader.update(getAdminRequests)
         })
 
-        getRef('admin_requests_container').addEventListener('click', async e => {
+        getById('admin_requests_container').addEventListener('click', async e => {
             if (e.target.closest('button')) {
                 const target = e.target.closest('button')
                 const request = e.target.closest('.activity-card')
@@ -2002,20 +1968,20 @@
             const { isPending, uid } = utils.getLastTransaction()
             if (uid) {
                 const { amount, rtype } = getRequestDetails(uid)
-                getRef('pending_transaction').innerHTML = ''
+                getById('pending_transaction').innerHTML = ''
                 if (isPending && (rtype === 'openDeposit' || rtype === 'openLoan')) {
-                    const card = getRef('pending_transaction_template').content.cloneNode(true)
+                    const card = getById('pending_transaction_template').content.cloneNode(true)
                     const action = rtype === 'openDeposit' ? 'Deposit' : 'Loan'
                     card.querySelector('.activity-card').setAttribute('href', `#/transaction?requestID=${uid}`)
                     card.querySelector('.activity-card__icon').innerHTML = utils.getRelatedIcon('pending')
                     card.querySelector('.activity-card__title').textContent = `${action} in process`
                     card.querySelector('.activity-card__amount').textContent = utils.formatAmount(amount)
-                    getRef('pending_transaction').append(card)
-                    getRef('quick_actions_container').querySelectorAll('a').forEach(elem => {
+                    getById('pending_transaction').append(card)
+                    getById('quick_actions_container').querySelectorAll('a').forEach(elem => {
                         elem.classList.add('disabled')
                     })
                 } else {
-                    getRef('quick_actions_container').querySelectorAll('a').forEach(elem => {
+                    getById('quick_actions_container').querySelectorAll('a').forEach(elem => {
                         elem.classList.remove('disabled')
                     })
                 }
@@ -2024,20 +1990,20 @@
 
         function checkIfAllowed(type) {
             const { isPending, uid } = utils.getLastTransaction()
-            getRef(`${type}_button_wrapper`).querySelector('strong')?.remove()
+            getById(`${type}_button_wrapper`).querySelector('strong')?.remove()
             // check if there is a last transaction
             if (uid) {
                 const { amount, rtype } = getRequestDetails(uid)
                 if (isPending && (rtype === 'openDeposit' || rtype === 'openLoan')) {
                     const action = rtype === 'openDeposit' ? 'Deposit' : 'Loan'
-                    getRef(`${type}_button_wrapper`).firstElementChild.classList.add('hidden')
-                    getRef(`${type}_button`).after(createElement('strong', {
+                    getById(`${type}_button_wrapper`).firstElementChild.classList.add('hidden')
+                    getById(`${type}_button`).after(createElement('strong', {
                         className: 'warning',
                         textContent: `${action} in process. You can't ${type === 'deposit' ? 'deposit' : 'request loan'} until that's completed.`,
                     }))
                 }
             } else {
-                getRef(`${type}_button_wrapper`).firstElementChild?.classList.remove('hidden')
+                getById(`${type}_button_wrapper`).firstElementChild?.classList.remove('hidden')
             }
         }
         let requestResponsePairs
@@ -2077,7 +2043,7 @@
             floDapps.launchStartUp().then(result => {
                 console.log(result);
                 // alert(`Welcome FLO_ID: ${myFloID}`);
-                getRef('user_profile_id').textContent = myFloID
+                getById('user_profile_id').textContent = myFloID
                 //App functions....
                 bank_app.launchApp(reqCallback, responseCallback)
                     .then(result => {
@@ -2091,16 +2057,14 @@
                             document.querySelectorAll('.admin-option').forEach(option => option.classList.remove('hidden'))
                             document.querySelectorAll('.user-option').forEach(option => option.classList.add('hidden'))
                         } else {
-                            chartObserver.observe(getRef('account_chart_container'))
                             document.querySelectorAll('.admin-option').forEach(option => option.classList.add('hidden'))
                             document.querySelectorAll('.user-option').forEach(option => option.classList.remove('hidden'))
                         }
                         if (window.location.hash.includes('sign_in') || window.location.hash.includes('sign_up')) {
                             window.location.hash = ''
                         } else {
-                            showPage(window.location.hash)
+                            routeTo(window.location.hash)
                         }
-                        userSectionObserver.observe(getRef('user_section'))
                     })
                     .catch(error => console.error(error))
             }).catch(error => console.error(error));
@@ -2136,9 +2100,9 @@
                     await bank_app.refreshData()
                     checkPendingTransaction()
                     if (pagesData.lastSubPage !== 'notifications') {
-                        getRef('notifications_page_button').classList.add('has-notification')
+                        getById('notifications_page_button').classList.add('has-notification')
                     } else {
-                        getRef('notifications_page_button').classList.remove('has-notification')
+                        getById('notifications_page_button').classList.remove('has-notification')
                     }
                     refreshBalance()
                 }