diff --git a/css/main.css b/css/main.css
index 8309471..c3a8a0a 100644
--- a/css/main.css
+++ b/css/main.css
@@ -31,16 +31,6 @@ body {
   display: flex;
   flex-direction: column;
 }
-body::before {
-  content: "";
-  position: absolute;
-  height: max(12rem, 16vmax);
-  background-color: #256eff;
-  width: 100%;
-  left: 0;
-  top: 0;
-  z-index: -1;
-}
 
 body[data-theme=dark] {
   --accent-color: #90b8f8;
@@ -532,6 +522,18 @@ h3 {
   cursor: pointer;
 }
 
+#secondary_pages {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+#secondary_pages header {
+  padding: 1.5rem;
+}
+#secondary_pages .inner-page {
+  height: 100%;
+}
+
 #landing > section {
   justify-content: center;
   justify-items: center;
@@ -573,16 +575,80 @@ h3 {
 }
 
 #main_header {
-  --text-color: 220, 220, 220;
-  padding: 1rem max(4vw, 1.5rem);
-}
-#main_header a {
-  color: rgba(var(--text-color), 1);
+  padding: 1.5rem;
 }
 
-#pages_container {
+#main_card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(var(--foreground-color), 1);
+  transition: background-color 0.3s;
+}
+
+#main_navbar {
+  display: flex;
+  background: rgba(var(--text-color), 0.03);
+}
+#main_navbar.hide-away {
+  position: absolute;
+}
+#main_navbar ul {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+#main_navbar ul li {
+  width: 100%;
+}
+
+.nav-item {
+  position: relative;
+  display: flex;
+  flex: 1;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0.3rem;
+  color: var(--text-color);
+  font-size: 0.7rem;
+  border-radius: 0.3rem;
+}
+.nav-item .icon {
+  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.nav-item__title {
+  margin-top: 0.3rem;
+  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.nav-item--active {
+  color: var(--accent-color);
+}
+.nav-item--active .icon {
+  fill: var(--accent-color);
+  transform: translateY(50%);
+}
+.nav-item--active .nav-item__title {
+  transform: translateY(100%);
+  opacity: 0;
+}
+.nav-item__indicator {
+  position: absolute;
+  bottom: 0;
+  width: 2rem;
+  height: 0.3rem;
+  background: var(--accent-color);
+  border-radius: 1rem 1rem 0 0;
+  z-index: 1;
+}
+
+.inner-page {
+  padding: 0 1.5rem;
   flex: 1;
   overflow-y: auto;
+  align-content: start;
 }
 
 .password-field label {
@@ -614,7 +680,6 @@ h3 {
 
 #user {
   gap: 0.5rem;
-  padding: 0 1.5rem;
 }
 
 #quick_actions_container {
@@ -633,7 +698,7 @@ h3 {
   font-size: 0.8rem;
   border-radius: 0.5rem;
   font-weight: 400;
-  background-color: transparent;
+  background-color: rgba(var(--text-color), 0.03);
   text-align: center;
 }
 .primary-action .icon {
@@ -717,6 +782,10 @@ h3 {
   justify-self: flex-start;
   border-radius: 2rem;
 }
+.saved-id__title {
+  font-size: 0.9rem;
+  font-weight: 500;
+}
 
 .card {
   background-color: rgba(var(--foreground-color), 1);
@@ -724,34 +793,57 @@ h3 {
   padding: 1rem;
 }
 
-#cashier,
-#contact,
-#history,
-#settings {
-  height: 100%;
-  align-content: flex-start;
-  background-color: rgba(var(--foreground-color), 1);
-  width: min(42rem, 100%);
-  justify-self: center;
-  margin: 0 auto;
-  padding: 1.5rem;
-  overflow-y: auto;
-  border-radius: 0.5rem;
-  grid-template-columns: minmax(0, 1fr);
-}
-
 #contact {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  height: 100%;
+}
+#contact > * {
+  padding: 1rem;
 }
 
 #contact__transactions {
+  display: grid;
+  gap: 0.5rem;
   overflow-y: auto;
+  flex: 1;
+  padding: 0 max(1rem, 8vw);
+  align-items: flex-start;
+}
+
+.transaction-message {
+  background-color: rgba(var(--text-color), 0.06);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  justify-self: flex-start;
+  border-radius: 0 1rem 1rem 1rem;
+  gap: 0.5rem;
+}
+.transaction-message.received {
+  background-color: var(--accent-color);
+  color: rgba(var(--background-color), 1);
+}
+.transaction-message.received + .transaction-message.received {
+  border-radius: 1rem;
+}
+.transaction-message.sent {
+  margin-left: auto;
+  justify-self: flex-end;
+  border-radius: 1rem 1rem 0 1rem;
+  text-align: right;
+}
+.transaction-message__amount {
+  font-size: 1.2rem;
+}
+.transaction-message__time {
+  opacity: 0.8;
+  font-size: 0.8rem;
 }
 
-#payments_history_wrapper,
 #wallet_history_wrapper {
-  padding-bottom: 4rem;
+  margin-top: 1.5rem;
+  padding-bottom: 3rem;
 }
 
 #payments_history {
@@ -961,6 +1053,13 @@ h3 {
   font-size: 0.8rem;
 }
 
+@media screen and (max-width: 40rem) {
+  #main_navbar.hide-away {
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}
 @media screen and (min-width: 40rem) {
   sm-popup {
     --width: 24rem;
@@ -975,15 +1074,60 @@ h3 {
     padding: 1rem 1.5rem 0 1.5rem;
   }
 
+  body {
+    align-items: center;
+    justify-content: center;
+  }
+
+  #main_card {
+    position: relative;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 1rem 3rem rgba(0, 0, 0, 0.2);
+  }
+  #main_card:not(.nav-hidden) {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas: "nav header" "nav .";
+  }
+
+  #main_header {
+    grid-area: header;
+  }
+
+  #main_navbar {
+    grid-area: nav;
+    border-top: none;
+    flex-direction: column;
+    height: 100%;
+  }
+  #main_navbar ul {
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.3rem;
+  }
+  #main_navbar ul li:last-of-type {
+    margin-top: auto;
+  }
+
+  .nav-item {
+    aspect-ratio: 1/1;
+  }
+  .nav-item__indicator {
+    width: 0.25rem;
+    height: 50%;
+    left: 0;
+    border-radius: 0 1rem 1rem 0;
+    bottom: auto;
+  }
+
   .card {
     padding: 1.5rem;
   }
 
   #user {
     gap: 1rem;
-    padding: 0 8vmax;
-    grid-template-columns: 1fr 22rem;
-    align-content: flex-start;
     align-items: flex-start;
   }
 
@@ -1000,9 +1144,11 @@ h3 {
     text-align: center;
     gap: 0.5rem;
   }
-
-  #wallet_section {
-    grid-area: 1/2/3/3;
+}
+@media screen and (min-width: 56rem) {
+  #main_card {
+    height: 80vh;
+    width: 56rem;
   }
 }
 @media (any-hover: hover) {
diff --git a/css/main.min.css b/css/main.min.css
index a464dd9..c2899dc 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%}body{--accent-color: #256eff;--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);scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;position:relative;display:flex;flex-direction:column}body::before{content:"";position:absolute;height:max(12rem,16vmax);background-color:#256eff;width:100%;left:0;top:0;z-index:-1}body[data-theme=dark]{--accent-color: #90b8f8;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1)}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:1rem}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.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-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.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}.w-100{width:100%}.h-100{height:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.page{height:100%}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem;cursor:pointer}#landing>section{justify-content:center;justify-items:center;align-items:center;text-align:center;padding:8vw 0}#landing h1{font-size:clamp(2rem,5vw,5rem)}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#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}#main_header{--text-color: 220, 220, 220;padding:1rem max(4vw,1.5rem)}#main_header a{color:rgba(var(--text-color), 1)}#pages_container{flex:1;overflow-y:auto}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.clip{-webkit-clip-path:circle(0);clip-path:circle(0)}#user{gap:.5rem;padding:0 1.5rem}#quick_actions_container{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill, minmax(4rem, 1fr))}.primary-action{display:flex;flex-direction:column;align-items:center;padding:.8rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.5rem;font-weight:400;background-color:transparent;text-align:center}.primary-action .icon{fill:var(--accent-color)}#rupee_balance span:first-of-type{font-size:1.5rem}#rupee_balance span:last-of-type{font-size:.8rem}.wallet-action{display:flex;white-space:normal;font-size:.85rem;padding:.8rem .6rem !important;color:rgba(var(--text-color), 1);text-align:center;align-items:center;justify-content:flex-start;background-color:rgba(var(--text-color), 0.03);flex:1}.wallet-action:nth-of-type(2){margin-left:.5rem}.wallet-action .icon{margin-right:.5rem;fill:var(--accent-color)}#saved_ids_list{display:grid;grid-template-columns:minmax(0, 1fr);gap:1rem;margin-top:1.5rem}.saved-id{grid-template-columns:auto 1fr;gap:0 .8rem;border-radius:.3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center}.saved-id.highlight{box-shadow:0 0 .1rem .1rem var(--accent-color) inset}.saved-id .edit-saved{padding:.3rem;position:relative;justify-self:center}.saved-id .edit-saved .icon{position:absolute;height:1.2rem;width:1.2rem;right:0;bottom:0;border-radius:.5rem;padding:.2rem;background-color:rgba(var(--background-color), 1)}.saved-id__initials{display:flex;align-items:center;justify-content:center;height:2.4rem;width:2.4rem;font-size:1.2rem;text-transform:uppercase;color:rgba(var(--background-color), 1);font-weight:700;line-height:1;background-color:var(--accent-color);justify-self:flex-start;border-radius:2rem}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1rem}#cashier,#contact,#history,#settings{height:100%;align-content:flex-start;background-color:rgba(var(--foreground-color), 1);width:min(42rem,100%);justify-self:center;margin:0 auto;padding:1.5rem;overflow-y:auto;border-radius:.5rem;grid-template-columns:minmax(0, 1fr)}#contact{display:grid;grid-template-rows:auto 1fr auto}#contact__transactions{overflow-y:auto}#payments_history_wrapper,#wallet_history_wrapper{padding-bottom:4rem}#payments_history{display:grid;gap:2rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;align-items:center;border-radius:.3rem}.transaction.sent .icon{fill:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount{color:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount::before{content:"- "}.transaction.received .icon{fill:var(--green)}.transaction.received .transaction__amount{color:var(--green)}.transaction.received .transaction__amount::before{content:"+ "}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:2rem}.transaction__receiver{font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8)}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#transaction_result{display:grid;gap:.5rem;height:max(40vh,24rem);align-items:center;justify-content:center;text-align:center;align-content:center}#transaction_result.success .icon--failed{display:none}#transaction_result.failed .icon--success{display:none}#transaction_result h3{text-align:center;width:100%}#transaction_result .icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:1rem;-webkit-animation:popup 1s;animation:popup 1s}#transaction_result .icon--success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}#transaction_result .icon--failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}#transaction_result sm-copy{font-size:.8rem}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.wallet-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06)}.cashier-request:not(:last-of-type),.wallet-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:1rem}.cashier-request__time,.wallet-request__time,.payment-request__time{font-size:.8rem}.payment-request{display:grid;grid-template-columns:1fr auto}.payment-request__amount{font-weight:700;text-align:right}.wallet-request{align-items:initial;flex-direction:column}.wallet-request__details{font-weight:700}.wallet-request__status{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;font-weight:500}.wallet-request__status .icon{margin-right:.3rem}.wallet-request__status.pending .icon{fill:var(--yellow)}.wallet-request__status.completed .icon{fill:var(--green)}.wallet-request__status.rejected .icon{fill:var(--danger-color)}.wallet-request__note{font-size:.8rem}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}.card{padding:1.5rem}#user{gap:1rem;padding:0 8vmax;grid-template-columns:1fr 22rem;align-content:flex-start;align-items:flex-start}#saved_ids_list{grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}.saved-id{padding:1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.03);grid-template-columns:minmax(0, 1fr);justify-content:center;text-align:center;gap:.5rem}#wallet_section{grid-area:1/2/3/3}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}button,.button:not([disabled]){transition:background-color .3s,filter .3s}button:hover,.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ 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%}body{--accent-color: #256eff;--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);scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;position:relative;display:flex;flex-direction:column}body[data-theme=dark]{--accent-color: #90b8f8;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1)}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:1rem}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.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-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.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}.w-100{width:100%}.h-100{height:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.page{height:100%}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem;cursor:pointer}#secondary_pages{display:flex;flex-direction:column;width:100%}#secondary_pages header{padding:1.5rem}#secondary_pages .inner-page{height:100%}#landing>section{justify-content:center;justify-items:center;align-items:center;text-align:center;padding:8vw 0}#landing h1{font-size:clamp(2rem,5vw,5rem)}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#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}#main_header{padding:1.5rem}#main_card{display:flex;flex-direction:column;height:100%;width:100%;background-color:rgba(var(--foreground-color), 1);transition:background-color .3s}#main_navbar{display:flex;background:rgba(var(--text-color), 0.03)}#main_navbar.hide-away{position:absolute}#main_navbar ul{display:flex;height:100%;width:100%}#main_navbar ul li{width:100%}.nav-item{position:relative;display:flex;flex:1;width:100%;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .3rem;color:var(--text-color);font-size:.7rem;border-radius:.3rem}.nav-item .icon{transition:transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item__title{margin-top:.3rem;transition:opacity .2s,transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item--active{color:var(--accent-color)}.nav-item--active .icon{fill:var(--accent-color);transform:translateY(50%)}.nav-item--active .nav-item__title{transform:translateY(100%);opacity:0}.nav-item__indicator{position:absolute;bottom:0;width:2rem;height:.3rem;background:var(--accent-color);border-radius:1rem 1rem 0 0;z-index:1}.inner-page{padding:0 1.5rem;flex:1;overflow-y:auto;align-content:start}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.clip{-webkit-clip-path:circle(0);clip-path:circle(0)}#user{gap:.5rem}#quick_actions_container{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill, minmax(4rem, 1fr))}.primary-action{display:flex;flex-direction:column;align-items:center;padding:.8rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.5rem;font-weight:400;background-color:rgba(var(--text-color), 0.03);text-align:center}.primary-action .icon{fill:var(--accent-color)}#rupee_balance span:first-of-type{font-size:1.5rem}#rupee_balance span:last-of-type{font-size:.8rem}.wallet-action{display:flex;white-space:normal;font-size:.85rem;padding:.8rem .6rem !important;color:rgba(var(--text-color), 1);text-align:center;align-items:center;justify-content:flex-start;background-color:rgba(var(--text-color), 0.03);flex:1}.wallet-action:nth-of-type(2){margin-left:.5rem}.wallet-action .icon{margin-right:.5rem;fill:var(--accent-color)}#saved_ids_list{display:grid;grid-template-columns:minmax(0, 1fr);gap:1rem;margin-top:1.5rem}.saved-id{grid-template-columns:auto 1fr;gap:0 .8rem;border-radius:.3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;align-items:center}.saved-id.highlight{box-shadow:0 0 .1rem .1rem var(--accent-color) inset}.saved-id .edit-saved{padding:.3rem;position:relative;justify-self:center}.saved-id .edit-saved .icon{position:absolute;height:1.2rem;width:1.2rem;right:0;bottom:0;border-radius:.5rem;padding:.2rem;background-color:rgba(var(--background-color), 1)}.saved-id__initials{display:flex;align-items:center;justify-content:center;height:2.4rem;width:2.4rem;font-size:1.2rem;text-transform:uppercase;color:rgba(var(--background-color), 1);font-weight:700;line-height:1;background-color:var(--accent-color);justify-self:flex-start;border-radius:2rem}.saved-id__title{font-size:.9rem;font-weight:500}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1rem}#contact{display:flex;flex-direction:column;padding:0;height:100%}#contact>*{padding:1rem}#contact__transactions{display:grid;gap:.5rem;overflow-y:auto;flex:1;padding:0 max(1rem,8vw);align-items:flex-start}.transaction-message{background-color:rgba(var(--text-color), 0.06);padding:1rem;border-radius:.5rem;justify-self:flex-start;border-radius:0 1rem 1rem 1rem;gap:.5rem}.transaction-message.received{background-color:var(--accent-color);color:rgba(var(--background-color), 1)}.transaction-message.received+.transaction-message.received{border-radius:1rem}.transaction-message.sent{margin-left:auto;justify-self:flex-end;border-radius:1rem 1rem 0 1rem;text-align:right}.transaction-message__amount{font-size:1.2rem}.transaction-message__time{opacity:.8;font-size:.8rem}#wallet_history_wrapper{margin-top:1.5rem;padding-bottom:3rem}#payments_history{display:grid;gap:2rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;align-items:center;border-radius:.3rem}.transaction.sent .icon{fill:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount{color:rgba(var(--text-color), 0.8)}.transaction.sent .transaction__amount::before{content:"- "}.transaction.received .icon{fill:var(--green)}.transaction.received .transaction__amount{color:var(--green)}.transaction.received .transaction__amount::before{content:"+ "}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:2rem}.transaction__receiver{font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8)}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#transaction_result{display:grid;gap:.5rem;height:max(40vh,24rem);align-items:center;justify-content:center;text-align:center;align-content:center}#transaction_result.success .icon--failed{display:none}#transaction_result.failed .icon--success{display:none}#transaction_result h3{text-align:center;width:100%}#transaction_result .icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:1rem;-webkit-animation:popup 1s;animation:popup 1s}#transaction_result .icon--success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}#transaction_result .icon--failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}#transaction_result sm-copy{font-size:.8rem}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.wallet-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06)}.cashier-request:not(:last-of-type),.wallet-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:1rem}.cashier-request__time,.wallet-request__time,.payment-request__time{font-size:.8rem}.payment-request{display:grid;grid-template-columns:1fr auto}.payment-request__amount{font-weight:700;text-align:right}.wallet-request{align-items:initial;flex-direction:column}.wallet-request__details{font-weight:700}.wallet-request__status{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;font-weight:500}.wallet-request__status .icon{margin-right:.3rem}.wallet-request__status.pending .icon{fill:var(--yellow)}.wallet-request__status.completed .icon{fill:var(--green)}.wallet-request__status.rejected .icon{fill:var(--danger-color)}.wallet-request__note{font-size:.8rem}@media screen and (max-width: 40rem){#main_navbar.hide-away{bottom:0;left:0;right:0}}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}body{align-items:center;justify-content:center}#main_card{position:relative;border-radius:.5rem;overflow:hidden;box-shadow:0 .1rem .2rem rgba(0,0,0,.05),0 1rem 3rem rgba(0,0,0,.2)}#main_card:not(.nav-hidden){display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"nav header" "nav ."}#main_header{grid-area:header}#main_navbar{grid-area:nav;border-top:none;flex-direction:column;height:100%}#main_navbar ul{flex-direction:column;gap:.5rem;padding:.3rem}#main_navbar ul li:last-of-type{margin-top:auto}.nav-item{aspect-ratio:1/1}.nav-item__indicator{width:.25rem;height:50%;left:0;border-radius:0 1rem 1rem 0;bottom:auto}.card{padding:1.5rem}#user{gap:1rem;align-items:flex-start}#saved_ids_list{grid-template-columns:repeat(auto-fill, minmax(8rem, 1fr))}.saved-id{padding:1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.03);grid-template-columns:minmax(0, 1fr);justify-content:center;text-align:center;gap:.5rem}}@media screen and (min-width: 56rem){#main_card{height:80vh;width:56rem}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}button,.button:not([disabled]){transition:background-color .3s,filter .3s}button:hover,.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index d946c79..22bba46 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -30,16 +30,6 @@ body {
   position: relative;
   display: flex;
   flex-direction: column;
-  &::before {
-    content: "";
-    position: absolute;
-    height: max(12rem, 16vmax);
-    background-color: #256eff;
-    width: 100%;
-    left: 0;
-    top: 0;
-    z-index: -1;
-  }
 }
 
 body[data-theme="dark"] {
@@ -491,6 +481,18 @@ h3 {
   margin-left: -0.5rem;
   cursor: pointer;
 }
+
+#secondary_pages {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  header {
+    padding: 1.5rem;
+  }
+  .inner-page {
+    height: 100%;
+  }
+}
 #landing {
   & > section {
     justify-content: center;
@@ -532,15 +534,78 @@ h3 {
   }
 }
 #main_header {
-  --text-color: 220, 220, 220;
-  padding: 1rem max(4vw, 1.5rem);
-  a {
-    color: rgba(var(--text-color), 1);
+  padding: 1.5rem;
+}
+#main_card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(var(--foreground-color), 1);
+  transition: background-color 0.3s;
+}
+
+#main_navbar {
+  display: flex;
+  background: rgba(var(--text-color), 0.03);
+  &.hide-away {
+    position: absolute;
+  }
+  ul {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    li {
+      width: 100%;
+    }
   }
 }
-#pages_container {
+.nav-item {
+  position: relative;
+  display: flex;
+  flex: 1;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0.3rem;
+  color: var(--text-color);
+  font-size: 0.7rem;
+  border-radius: 0.3rem;
+  .icon {
+    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+  &__title {
+    margin-top: 0.3rem;
+    transition: opacity 0.2s,
+      transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+  &--active {
+    color: var(--accent-color);
+    .icon {
+      fill: var(--accent-color);
+      transform: translateY(50%);
+    }
+    .nav-item__title {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+  }
+  &__indicator {
+    position: absolute;
+    bottom: 0;
+    width: 2rem;
+    height: 0.3rem;
+    background: var(--accent-color);
+    border-radius: 1rem 1rem 0 0;
+    z-index: 1;
+  }
+}
+.inner-page {
+  padding: 0 1.5rem;
   flex: 1;
   overflow-y: auto;
+  align-content: start;
 }
 
 .password-field {
@@ -570,7 +635,6 @@ h3 {
 }
 #user {
   gap: 0.5rem;
-  padding: 0 1.5rem;
 }
 #quick_actions_container {
   display: grid;
@@ -587,8 +651,7 @@ h3 {
   font-size: 0.8rem;
   border-radius: 0.5rem;
   font-weight: 400;
-  // background-color: rgba(var(--text-color), 0.06);
-  background-color: transparent;
+  background-color: rgba(var(--text-color), 0.03);
   text-align: center;
   .icon {
     fill: var(--accent-color);
@@ -667,6 +730,10 @@ h3 {
     justify-self: flex-start;
     border-radius: 2rem;
   }
+  &__title {
+    font-size: 0.9rem;
+    font-weight: 500;
+  }
 }
 
 .card {
@@ -674,31 +741,56 @@ h3 {
   border-radius: 0.5rem;
   padding: 1rem;
 }
-#cashier,
-#contact,
-#history,
-#settings {
-  height: 100%;
-  align-content: flex-start;
-  background-color: rgba(var(--foreground-color), 1);
-  width: min(42rem, 100%);
-  justify-self: center;
-  margin: 0 auto;
-  padding: 1.5rem;
-  overflow-y: auto;
-  border-radius: 0.5rem;
-  grid-template-columns: minmax(0, 1fr);
-}
 #contact {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  height: 100%;
+  & > * {
+    padding: 1rem;
+  }
 }
 #contact__transactions {
+  display: grid;
+  gap: 0.5rem;
   overflow-y: auto;
+  flex: 1;
+  padding: 0 max(1rem, 8vw);
+  align-items: flex-start;
 }
-#payments_history_wrapper,
+.transaction-message {
+  background-color: rgba(var(--text-color), 0.06);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  justify-self: flex-start;
+  border-radius: 0 1rem 1rem 1rem;
+  gap: 0.5rem;
+  &.received {
+    background-color: var(--accent-color);
+    color: rgba(var(--background-color), 1);
+    & + & {
+      border-radius: 1rem;
+    }
+  }
+  &.sent {
+    margin-left: auto;
+    justify-self: flex-end;
+    border-radius: 1rem 1rem 0 1rem;
+    text-align: right;
+  }
+
+  &__amount {
+    font-size: 1.2rem;
+  }
+  &__time {
+    opacity: 0.8;
+    font-size: 0.8rem;
+  }
+}
+
 #wallet_history_wrapper {
-  padding-bottom: 4rem;
+  margin-top: 1.5rem;
+  padding-bottom: 3rem;
 }
 #payments_history {
   display: grid;
@@ -890,6 +982,15 @@ h3 {
     font-size: 0.8rem;
   }
 }
+@media screen and (max-width: 40rem) {
+  #main_navbar {
+    &.hide-away {
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+}
 @media screen and (min-width: 40rem) {
   sm-popup {
     --width: 24rem;
@@ -901,14 +1002,58 @@ h3 {
     grid-column: 1/-1;
     padding: 1rem 1.5rem 0 1.5rem;
   }
+  body {
+    align-items: center;
+    justify-content: center;
+  }
+
+  #main_card {
+    &:not(.nav-hidden) {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      grid-template-rows: auto 1fr;
+      grid-template-areas: "nav header" "nav .";
+    }
+    position: relative;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05),
+      0 1rem 3rem rgba(0, 0, 0, 0.2);
+  }
+  #main_header {
+    grid-area: header;
+  }
+
+  #main_navbar {
+    grid-area: nav;
+    border-top: none;
+    flex-direction: column;
+    height: 100%;
+    ul {
+      flex-direction: column;
+      gap: 0.5rem;
+      padding: 0.3rem;
+
+      li:last-of-type {
+        margin-top: auto;
+      }
+    }
+  }
+  .nav-item {
+    aspect-ratio: 1/1;
+    &__indicator {
+      width: 0.25rem;
+      height: 50%;
+      left: 0;
+      border-radius: 0 1rem 1rem 0;
+      bottom: auto;
+    }
+  }
   .card {
     padding: 1.5rem;
   }
   #user {
     gap: 1rem;
-    padding: 0 8vmax;
-    grid-template-columns: 1fr 22rem;
-    align-content: flex-start;
     align-items: flex-start;
   }
   #saved_ids_list {
@@ -923,11 +1068,13 @@ h3 {
     text-align: center;
     gap: 0.5rem;
   }
-  #wallet_section {
-    grid-area: 1/2/3/3;
+}
+@media screen and (min-width: 56rem) {
+  #main_card {
+    height: 80vh;
+    width: 56rem;
   }
 }
-
 @media (any-hover: hover) {
   ::-webkit-scrollbar {
     width: 0.5rem;
diff --git a/index.html b/index.html
index 5c412bb..d0ef436 100644
--- a/index.html
+++ b/index.html
@@ -55,47 +55,39 @@
             <sm-button variant="no-outline" class="submit-btn">OK</sm-button>
         </div>
     </sm-popup>
-    <header id="main_header" class="flex align-center gap-1">
-        <a href="#/home" class="flex align-center flex-1">
-            <svg class="icon" style="margin-right:0.3rem" viewBox="0 0 96 108"
-                style="enable-background:new 0 0 90.5 106.3;" xml:space="preserve">
-                <path d="M90.2,102.5c-2.4-8.2-9.9-14.5-27.4-23.1c-7.1-3.5-11.8-6.2-14-8.3c-1.7-1.6-3.5-4-4.2-5.5c-0.7-1.7-0.7-5.5,0-7.5
-                            c1.3-3.6,2.6-5.2,12.9-15.1c6.2-5.9,9.3-10.3,11.1-15.5c0.7-2.1,0.8-7.6,0.2-9.4C66.5,12,61.7,6.7,53.7,1.6c-3-1.9-4.3-2.1-4.3-0.8
-                            c0,0.3-0.5,1.4-1,2.4l-1,1.8l-2.8-1.9c-1.5-1.1-3.4-2.2-4.1-2.6c-1.3-0.7-2.4-0.6-2.4,0.2c0,0.3-1.4,3.4-2,4.4
-                            c0,0.1-0.4-0.1-0.9-0.4c-6.1-4.4-8.7-5.5-8.7-3.9c0,0.7-1.8,4.2-4,7.9C16,19.5,9.4,24.9,2.6,24.9c-3,0-2.9-0.1-2,3.4
-                            c0.7,2.8,1.1,3.1,3.6,2.3c2.3-0.7,3.9-1.5,5.8-2.9c0.8-0.6,1.5-0.9,1.6-0.9c0.1,0.1,0.5,1,0.7,2.1s0.7,2,0.9,2.1
-                            c0.8,0.3,5.1-1.3,7.5-2.9l2.3-1.5l0.5,1.8c0.6,2.4,1,2.7,3.3,2.1c3.9-1,7.7-3.7,11.5-8.2l2-2.4l-0.2,2.1c-0.6,5.4-4.3,11.4-11.3,18
-                            c-1.8,1.7-4.7,4.5-6.5,6.2c-10.7,10.2-10,18.6,2,26.5c2.7,1.8,10.3,5.8,15.3,8c0.9,0.4,3.3,1.7,5.3,2.9c11,6.5,16.4,13.1,16.4,19.7
-                            c0,1.3,0.1,2.4,0.2,2.6l0,0c0.3,0.3,0.1,0.3,3-0.5c1.4-0.4,2.6-0.9,2.8-1.1c0.4-0.6-0.6-3.7-1.8-6.1c-1.3-2.5-5.6-7-8.9-9.4
-                            c-3.8-2.8-9.3-5.9-17-9.7c-8.5-4.2-11.8-6.2-14.7-9.1c-2.6-2.6-3.9-5.3-3.9-8.2c0-4.6,2.3-8.6,8.3-14.1c9.4-8.7,13-13,15.5-18.8
-                            c1.3-3,1.4-3.4,1.4-6.7c0-3.1-0.1-3.8-1.1-6l-1.1-2.4l1-1.6c0.5-0.9,1.2-2.1,1.5-2.6l0.5-1l1.5,2.1c1.8,2.6,3.2,6.8,3.2,9.3
-                            c0,1.7-0.6,4.7-1.4,6.4c-0.2,0.4-0.4,1-0.5,1.3c-0.1,0.3-1.1,2-2.2,3.7c-2,3-5.2,6.4-13.4,14.2c-5.7,5.4-7.6,8.6-7.8,13.1
-                            c-0.2,3.7,0.7,5.9,3.7,9.2c3.2,3.4,6.9,5.8,17.4,11c12.1,6,17.3,9.6,21.3,14.5c2.5,3.2,3.7,5.8,3.9,9.3c0.1,1.6,0.3,3,0.5,3
-                            c0.1,0.1,0.8,0,1.4-0.2s1.9-0.5,2.7-0.7l1.5-0.4l-0.2-1.5c-0.7-5.1-5.4-10.8-13.1-16c-4.4-2.9-5.8-3.7-17.3-9.4
-                            c-5.7-2.8-9.2-5.1-11.8-7.6c-4.3-4.2-5.1-8.8-2.7-13.9c1.4-2.8,2.7-4.4,12.5-13.8c8-7.7,11.4-13.7,11.4-20.1c0-5.1-2.3-9.9-6.9-14.3
-                            c-1.1-1-2-2-2.1-2.2c-0.2-0.4,1.5-3.9,1.9-3.9c1.2,0,7.8,6.3,9.7,9.2c2,3.3,2.5,5,2.5,8.9c0,3.9-0.6,5.9-2.9,9.8
-                            c-2.4,4.1-4.2,6-14.2,15.5c-3.4,3.2-5.7,6.1-6.9,8.7c-0.9,2-1.1,2.7-1.1,5.1c0,2.3,0.2,3.2,1,4.9c1.9,4,7.4,8.5,15.4,12.4
-                            c12.5,6.1,15.1,7.6,19.4,10.7c7.2,5.3,10.6,10.5,10.6,16c0,1.3,0.1,2.4,0.3,2.5c0.4,0.3,4.8-0.8,5.5-1.3
-                            C90.7,104.4,90.7,104.3,90.2,102.5z M20.3,23.3L20.3,23.3c-2,1-3.3,1.4-4.8,1.5L13.3,25l2.3-2.8c3.7-4.5,6.4-8.9,10-16
-                            c0.9-1.8,1.8-3.5,2-3.6c0.4-0.4,2.6,1.1,5.1,3.4l2.1,1.9l-1.9,2.8C28.2,17.5,24.5,21.2,20.3,23.3z M39.3,17.4
-                            c-1.2,1.7-6.5,5.7-8.6,6.5v0c-1.1,0.4-2.8,0.8-3.9,0.9L24.9,25l2.1-2.6c2.5-3.1,5.1-7,7-10.4c0.7-1.4,1.4-2.5,1.5-2.6
-                            c0.3-0.4,1.7,1.4,3,4.1l1.5,3L39.3,17.4z M44.6,10c-0.7,1.2-1.4,2.1-1.5,2.1c-0.1,0-1.5-1.4-3-3l-2.8-3l0.6-1.5
-                            c1.1-2.6,1.3-2.7,3.4-1c1.9,1.5,4.5,3.8,4.5,4.1C45.8,7.8,45.3,8.9,44.6,10z" />
-            </svg>
-            <h4>RanchiMall Pay</h4>
-        </a>
-        <theme-toggle></theme-toggle>
-        <a href="#/settings" class="icon-only">
-            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
-                fill="#000000">
-                <path d="M0 0h24v24H0V0z" fill="none" />
-                <path
-                    d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
-            </svg>
-        </a>
-    </header>
-    <section id="pages_container">
-        <article id="landing" class="page page-layout hide">
+    <div id="secondary_pages" class="page hide">
+        <header class="flex align-center gap-1">
+            <a href="#/home" class="flex align-center flex-1">
+                <svg class="icon" style="margin-right:0.3rem" viewBox="0 0 96 108"
+                    style="enable-background:new 0 0 90.5 106.3;" xml:space="preserve">
+                    <path d="M90.2,102.5c-2.4-8.2-9.9-14.5-27.4-23.1c-7.1-3.5-11.8-6.2-14-8.3c-1.7-1.6-3.5-4-4.2-5.5c-0.7-1.7-0.7-5.5,0-7.5
+                                c1.3-3.6,2.6-5.2,12.9-15.1c6.2-5.9,9.3-10.3,11.1-15.5c0.7-2.1,0.8-7.6,0.2-9.4C66.5,12,61.7,6.7,53.7,1.6c-3-1.9-4.3-2.1-4.3-0.8
+                                c0,0.3-0.5,1.4-1,2.4l-1,1.8l-2.8-1.9c-1.5-1.1-3.4-2.2-4.1-2.6c-1.3-0.7-2.4-0.6-2.4,0.2c0,0.3-1.4,3.4-2,4.4
+                                c0,0.1-0.4-0.1-0.9-0.4c-6.1-4.4-8.7-5.5-8.7-3.9c0,0.7-1.8,4.2-4,7.9C16,19.5,9.4,24.9,2.6,24.9c-3,0-2.9-0.1-2,3.4
+                                c0.7,2.8,1.1,3.1,3.6,2.3c2.3-0.7,3.9-1.5,5.8-2.9c0.8-0.6,1.5-0.9,1.6-0.9c0.1,0.1,0.5,1,0.7,2.1s0.7,2,0.9,2.1
+                                c0.8,0.3,5.1-1.3,7.5-2.9l2.3-1.5l0.5,1.8c0.6,2.4,1,2.7,3.3,2.1c3.9-1,7.7-3.7,11.5-8.2l2-2.4l-0.2,2.1c-0.6,5.4-4.3,11.4-11.3,18
+                                c-1.8,1.7-4.7,4.5-6.5,6.2c-10.7,10.2-10,18.6,2,26.5c2.7,1.8,10.3,5.8,15.3,8c0.9,0.4,3.3,1.7,5.3,2.9c11,6.5,16.4,13.1,16.4,19.7
+                                c0,1.3,0.1,2.4,0.2,2.6l0,0c0.3,0.3,0.1,0.3,3-0.5c1.4-0.4,2.6-0.9,2.8-1.1c0.4-0.6-0.6-3.7-1.8-6.1c-1.3-2.5-5.6-7-8.9-9.4
+                                c-3.8-2.8-9.3-5.9-17-9.7c-8.5-4.2-11.8-6.2-14.7-9.1c-2.6-2.6-3.9-5.3-3.9-8.2c0-4.6,2.3-8.6,8.3-14.1c9.4-8.7,13-13,15.5-18.8
+                                c1.3-3,1.4-3.4,1.4-6.7c0-3.1-0.1-3.8-1.1-6l-1.1-2.4l1-1.6c0.5-0.9,1.2-2.1,1.5-2.6l0.5-1l1.5,2.1c1.8,2.6,3.2,6.8,3.2,9.3
+                                c0,1.7-0.6,4.7-1.4,6.4c-0.2,0.4-0.4,1-0.5,1.3c-0.1,0.3-1.1,2-2.2,3.7c-2,3-5.2,6.4-13.4,14.2c-5.7,5.4-7.6,8.6-7.8,13.1
+                                c-0.2,3.7,0.7,5.9,3.7,9.2c3.2,3.4,6.9,5.8,17.4,11c12.1,6,17.3,9.6,21.3,14.5c2.5,3.2,3.7,5.8,3.9,9.3c0.1,1.6,0.3,3,0.5,3
+                                c0.1,0.1,0.8,0,1.4-0.2s1.9-0.5,2.7-0.7l1.5-0.4l-0.2-1.5c-0.7-5.1-5.4-10.8-13.1-16c-4.4-2.9-5.8-3.7-17.3-9.4
+                                c-5.7-2.8-9.2-5.1-11.8-7.6c-4.3-4.2-5.1-8.8-2.7-13.9c1.4-2.8,2.7-4.4,12.5-13.8c8-7.7,11.4-13.7,11.4-20.1c0-5.1-2.3-9.9-6.9-14.3
+                                c-1.1-1-2-2-2.1-2.2c-0.2-0.4,1.5-3.9,1.9-3.9c1.2,0,7.8,6.3,9.7,9.2c2,3.3,2.5,5,2.5,8.9c0,3.9-0.6,5.9-2.9,9.8
+                                c-2.4,4.1-4.2,6-14.2,15.5c-3.4,3.2-5.7,6.1-6.9,8.7c-0.9,2-1.1,2.7-1.1,5.1c0,2.3,0.2,3.2,1,4.9c1.9,4,7.4,8.5,15.4,12.4
+                                c12.5,6.1,15.1,7.6,19.4,10.7c7.2,5.3,10.6,10.5,10.6,16c0,1.3,0.1,2.4,0.3,2.5c0.4,0.3,4.8-0.8,5.5-1.3
+                                C90.7,104.4,90.7,104.3,90.2,102.5z M20.3,23.3L20.3,23.3c-2,1-3.3,1.4-4.8,1.5L13.3,25l2.3-2.8c3.7-4.5,6.4-8.9,10-16
+                                c0.9-1.8,1.8-3.5,2-3.6c0.4-0.4,2.6,1.1,5.1,3.4l2.1,1.9l-1.9,2.8C28.2,17.5,24.5,21.2,20.3,23.3z M39.3,17.4
+                                c-1.2,1.7-6.5,5.7-8.6,6.5v0c-1.1,0.4-2.8,0.8-3.9,0.9L24.9,25l2.1-2.6c2.5-3.1,5.1-7,7-10.4c0.7-1.4,1.4-2.5,1.5-2.6
+                                c0.3-0.4,1.7,1.4,3,4.1l1.5,3L39.3,17.4z M44.6,10c-0.7,1.2-1.4,2.1-1.5,2.1c-0.1,0-1.5-1.4-3-3l-2.8-3l0.6-1.5
+                                c1.1-2.6,1.3-2.7,3.4-1c1.9,1.5,4.5,3.8,4.5,4.1C45.8,7.8,45.3,8.9,44.6,10z" />
+                </svg>
+                <h4>RanchiMall Pay</h4>
+            </a>
+            <theme-toggle></theme-toggle>
+        </header>
+        <article id="landing" class="inner-page page-layout hide">
             <section class="grid justify-center gap-1">
                 <h1 class="h1">Send.request</h1>
                 <div class="flex gap-0-5">
@@ -104,7 +96,7 @@
                 </div>
             </section>
         </article>
-        <article id="sign_in" class="page page-layout hide">
+        <article id="sign_in" class="inner-page page-layout hide">
             <section>
                 <h1 class="h2">Sign In</h1>
                 <p>Welcome back, glad to see you again</p>
@@ -118,7 +110,7 @@
                 </p>
             </section>
         </article>
-        <article id="sign_up" class="page page-layout hide">
+        <article id="sign_up" class="inner-page page-layout hide">
             <section class="grid">
                 <h1 class="h2">FLO credentials</h1>
                 <p>Get your FLO credentials to use RanchiMall Pay and all RanchiMall FLO apps. </p>
@@ -139,15 +131,48 @@
                 </strong>
             </section>
         </article>
-        <div id="loading" class="page flex align-center justify-center">
+        <div id="loading" class="inner-page flex align-center justify-center">
             <div class="grid gap-1 text-center">
                 <sm-spinner></sm-spinner>
                 <h4>Loading RanchiMall Pay</h4>
             </div>
         </div>
-        <section id="home" class="page hide">
+    </div>
+    <div id="main_card" class="page hide">
+        <header id="main_header" class="flex align-center space-between">
+            <a href="#/home" class="flex align-center flex-1">
+                <svg class="icon" style="margin-right:0.3rem" viewBox="0 0 96 108"
+                    style="enable-background:new 0 0 90.5 106.3;" xml:space="preserve">
+                    <path d="M90.2,102.5c-2.4-8.2-9.9-14.5-27.4-23.1c-7.1-3.5-11.8-6.2-14-8.3c-1.7-1.6-3.5-4-4.2-5.5c-0.7-1.7-0.7-5.5,0-7.5
+                                c1.3-3.6,2.6-5.2,12.9-15.1c6.2-5.9,9.3-10.3,11.1-15.5c0.7-2.1,0.8-7.6,0.2-9.4C66.5,12,61.7,6.7,53.7,1.6c-3-1.9-4.3-2.1-4.3-0.8
+                                c0,0.3-0.5,1.4-1,2.4l-1,1.8l-2.8-1.9c-1.5-1.1-3.4-2.2-4.1-2.6c-1.3-0.7-2.4-0.6-2.4,0.2c0,0.3-1.4,3.4-2,4.4
+                                c0,0.1-0.4-0.1-0.9-0.4c-6.1-4.4-8.7-5.5-8.7-3.9c0,0.7-1.8,4.2-4,7.9C16,19.5,9.4,24.9,2.6,24.9c-3,0-2.9-0.1-2,3.4
+                                c0.7,2.8,1.1,3.1,3.6,2.3c2.3-0.7,3.9-1.5,5.8-2.9c0.8-0.6,1.5-0.9,1.6-0.9c0.1,0.1,0.5,1,0.7,2.1s0.7,2,0.9,2.1
+                                c0.8,0.3,5.1-1.3,7.5-2.9l2.3-1.5l0.5,1.8c0.6,2.4,1,2.7,3.3,2.1c3.9-1,7.7-3.7,11.5-8.2l2-2.4l-0.2,2.1c-0.6,5.4-4.3,11.4-11.3,18
+                                c-1.8,1.7-4.7,4.5-6.5,6.2c-10.7,10.2-10,18.6,2,26.5c2.7,1.8,10.3,5.8,15.3,8c0.9,0.4,3.3,1.7,5.3,2.9c11,6.5,16.4,13.1,16.4,19.7
+                                c0,1.3,0.1,2.4,0.2,2.6l0,0c0.3,0.3,0.1,0.3,3-0.5c1.4-0.4,2.6-0.9,2.8-1.1c0.4-0.6-0.6-3.7-1.8-6.1c-1.3-2.5-5.6-7-8.9-9.4
+                                c-3.8-2.8-9.3-5.9-17-9.7c-8.5-4.2-11.8-6.2-14.7-9.1c-2.6-2.6-3.9-5.3-3.9-8.2c0-4.6,2.3-8.6,8.3-14.1c9.4-8.7,13-13,15.5-18.8
+                                c1.3-3,1.4-3.4,1.4-6.7c0-3.1-0.1-3.8-1.1-6l-1.1-2.4l1-1.6c0.5-0.9,1.2-2.1,1.5-2.6l0.5-1l1.5,2.1c1.8,2.6,3.2,6.8,3.2,9.3
+                                c0,1.7-0.6,4.7-1.4,6.4c-0.2,0.4-0.4,1-0.5,1.3c-0.1,0.3-1.1,2-2.2,3.7c-2,3-5.2,6.4-13.4,14.2c-5.7,5.4-7.6,8.6-7.8,13.1
+                                c-0.2,3.7,0.7,5.9,3.7,9.2c3.2,3.4,6.9,5.8,17.4,11c12.1,6,17.3,9.6,21.3,14.5c2.5,3.2,3.7,5.8,3.9,9.3c0.1,1.6,0.3,3,0.5,3
+                                c0.1,0.1,0.8,0,1.4-0.2s1.9-0.5,2.7-0.7l1.5-0.4l-0.2-1.5c-0.7-5.1-5.4-10.8-13.1-16c-4.4-2.9-5.8-3.7-17.3-9.4
+                                c-5.7-2.8-9.2-5.1-11.8-7.6c-4.3-4.2-5.1-8.8-2.7-13.9c1.4-2.8,2.7-4.4,12.5-13.8c8-7.7,11.4-13.7,11.4-20.1c0-5.1-2.3-9.9-6.9-14.3
+                                c-1.1-1-2-2-2.1-2.2c-0.2-0.4,1.5-3.9,1.9-3.9c1.2,0,7.8,6.3,9.7,9.2c2,3.3,2.5,5,2.5,8.9c0,3.9-0.6,5.9-2.9,9.8
+                                c-2.4,4.1-4.2,6-14.2,15.5c-3.4,3.2-5.7,6.1-6.9,8.7c-0.9,2-1.1,2.7-1.1,5.1c0,2.3,0.2,3.2,1,4.9c1.9,4,7.4,8.5,15.4,12.4
+                                c12.5,6.1,15.1,7.6,19.4,10.7c7.2,5.3,10.6,10.5,10.6,16c0,1.3,0.1,2.4,0.3,2.5c0.4,0.3,4.8-0.8,5.5-1.3
+                                C90.7,104.4,90.7,104.3,90.2,102.5z M20.3,23.3L20.3,23.3c-2,1-3.3,1.4-4.8,1.5L13.3,25l2.3-2.8c3.7-4.5,6.4-8.9,10-16
+                                c0.9-1.8,1.8-3.5,2-3.6c0.4-0.4,2.6,1.1,5.1,3.4l2.1,1.9l-1.9,2.8C28.2,17.5,24.5,21.2,20.3,23.3z M39.3,17.4
+                                c-1.2,1.7-6.5,5.7-8.6,6.5v0c-1.1,0.4-2.8,0.8-3.9,0.9L24.9,25l2.1-2.6c2.5-3.1,5.1-7,7-10.4c0.7-1.4,1.4-2.5,1.5-2.6
+                                c0.3-0.4,1.7,1.4,3,4.1l1.5,3L39.3,17.4z M44.6,10c-0.7,1.2-1.4,2.1-1.5,2.1c-0.1,0-1.5-1.4-3-3l-2.8-3l0.6-1.5
+                                c1.1-2.6,1.3-2.7,3.4-1c1.9,1.5,4.5,3.8,4.5,4.1C45.8,7.8,45.3,8.9,44.6,10z" />
+                </svg>
+                <h4>RanchiMall Pay</h4>
+            </a>
+            <theme-toggle></theme-toggle>
+        </header>
+        <section id="home" class="inner-page hide">
             <div id="user" class="hide grid user-element">
-                <div id="quick_actions_container" class="card">
+                <div id="quick_actions_container">
                     <button class="primary-action" onclick="showTokenTransfer('send')">
                         <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
                             width="24px" fill="#000000">
@@ -194,80 +219,7 @@
                         Scan FLO QR
                     </button>
                 </div>
-                <section id="wallet_section" class="card grid gap-1-5">
-                    <div class="flex align-center space-between">
-                        <h4 class="flex align-center">
-                            <svg class="icon margin-right-0-5" 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>
-                                    <path
-                                        d="M18,4H6C3.79,4,2,5.79,2,8v8c0,2.21,1.79,4,4,4h12c2.21,0,4-1.79,4-4V8C22,5.79,20.21,4,18,4z M16.14,13.77 c-0.24,0.2-0.57,0.28-0.88,0.2L4.15,11.25C4.45,10.52,5.16,10,6,10h12c0.67,0,1.26,0.34,1.63,0.84L16.14,13.77z M6,6h12 c1.1,0,2,0.9,2,2v0.55C19.41,8.21,18.73,8,18,8H6C5.27,8,4.59,8.21,4,8.55V8C4,6.9,4.9,6,6,6z" />
-                                </g>
-                            </svg>
-                            Wallet
-                        </h4>
-                    </div>
-                    <div class="grid gap-0-5">
-                        <h5>Balance</h5>
-                        <h1 class="h1" id="rupee_balance"></h1>
-                    </div>
-                    <!-- <div class="grid gap-1">
-                        <sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount" animate>
-                        </sm-input>
-                    </div> -->
-                    <div class="grid gap-0-5">
-                        <div class="flex">
-                            <button class="wallet-action" onclick="userUI.requestTokenFromCashier()">
-                                <svg class="icon" 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>
-                                Top-up wallet
-                            </button>
-                            <button class="wallet-action" onclick="userUI.withdrawCashFromCashier()">
-                                <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>
-                                        <rect fill="none" height="24" width="24" />
-                                    </g>
-                                    <g>
-                                        <g>
-                                            <rect height="7" width="3" x="4" y="10" />
-                                            <rect height="7" width="3" x="10.5" y="10" />
-                                            <rect height="3" width="20" x="2" y="19" />
-                                            <rect height="7" width="3" x="17" y="10" />
-                                            <polygon points="12,1 2,6 2,8 22,8 22,6" />
-                                        </g>
-                                    </g>
-                                </svg>
-                                Transfer to bank
-                            </button>
-                        </div>
-                        <a href="#/history" class="button interact wallet-action">
-                            <svg class="icon margin-right-0-5" 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">
-                                <path d="M0,0h24v24H0V0z" fill="none" />
-                                <g>
-                                    <path
-                                        d="M19.5,3.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2v14H3v3c0,1.66,1.34,3,3,3h12c1.66,0,3-1.34,3-3V2 L19.5,3.5z M19,19c0,0.55-0.45,1-1,1s-1-0.45-1-1v-3H8V5h11V19z" />
-                                    <rect height="2" width="6" x="9" y="7" />
-                                    <rect height="2" width="2" x="16" y="7" />
-                                    <rect height="2" width="6" x="9" y="10" />
-                                    <rect height="2" width="2" x="16" y="10" />
-                                </g>
-                            </svg>
-                            See transactions history
-                        </a>
-                    </div>
-                </section>
-                <div class="card">
+                <div class="">
                     <div class="flex align-center space-between">
                         <h4>Saved IDs</h4>
                         <button class="button" onclick="showPopup('save_id_popup')">Save FLO ID</button>
@@ -286,36 +238,14 @@
                 </div>
             </section>
         </section>
-        <section id="history" class="page hide grid gap-1">
-            <div class="grid gap-1">
-                <a href="#/home" class="button icon-only justify-self-start">
-                    <svg class="icon" 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="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
-                    </svg>
-                </a>
-                <div class="flex align-center space-between">
-                    <h4>Transactions history</h4>
-                    <strip-select id="history_type_selector">
-                        <strip-option value="payments" selected>Payments</strip-option>
-                        <strip-option value="wallet">Wallet</strip-option>
-                    </strip-select>
-                </div>
+        <section id="history" class="inner-page hide grid gap-1">
+            <h4>Payments history</h4>
+            <ul id="payments_history" class="observe-empty-state"></ul>
+            <div class=" empty-state gap-1 justify-center text-center">
+                <h4>No transactions</h4>
             </div>
-            <div id="payments_history_wrapper">
-                <ul id="payments_history" class="observe-empty-state"></ul>
-                <div class=" empty-state gap-1 justify-center text-center">
-                    <h4>No transactions</h4>
-                </div>
-            </div>
-            <div id="wallet_history_wrapper" class="hide">
-                <ul id="wallet_history" class="observe-empty-state"></ul>
-                <div class=" empty-state gap-1 justify-center text-center">
-                    <h4>No transactions</h4>
-                </div>
         </section>
-        <section id="contact" class="page hide">
+        <section id="contact" class="inner-page hide">
             <div class="flex align-center">
                 <a href="#/home" class="button icon-only margin-right-0-5">
                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
@@ -326,20 +256,77 @@
                 </a>
                 <h4 id="contact__title"></h4>
             </div>
-            <div id="contact__transactions"></div>
+            <ul id="contact__transactions"></ul>
             <div class="flex">
                 <button class="button flex-1">Pay</button>
                 <button class="button flex-1">Request</button>
             </div>
         </section>
-        <section id="activity" class="page page-layout hide">
-            <h4>Activity</h4>
+        <section id="requests" class="inner-page hide">
+            <h4>Payment requests</h4>
             <ul id="user-money-requests" class="observe-empty-state"></ul>
             <div class=" empty-state gap-1 justify-center text-center">
                 <h4>No requests</h4>
             </div>
         </section>
-        <section id="settings" class="page hide">
+        <section id="wallet" class="inner-page hide">
+            <div class="flex align-center space-between">
+                <h4 class="flex align-center">
+                    <svg class="icon margin-right-0-5" 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>
+                            <path
+                                d="M18,4H6C3.79,4,2,5.79,2,8v8c0,2.21,1.79,4,4,4h12c2.21,0,4-1.79,4-4V8C22,5.79,20.21,4,18,4z M16.14,13.77 c-0.24,0.2-0.57,0.28-0.88,0.2L4.15,11.25C4.45,10.52,5.16,10,6,10h12c0.67,0,1.26,0.34,1.63,0.84L16.14,13.77z M6,6h12 c1.1,0,2,0.9,2,2v0.55C19.41,8.21,18.73,8,18,8H6C5.27,8,4.59,8.21,4,8.55V8C4,6.9,4.9,6,6,6z" />
+                        </g>
+                    </svg>
+                    Wallet
+                </h4>
+            </div>
+            <div class="grid gap-0-5">
+                <h5>Balance</h5>
+                <h1 class="h1" id="rupee_balance"></h1>
+            </div>
+            <div class="flex">
+                <button class="wallet-action" onclick="walletAction('deposit')">
+                    <svg class="icon" 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>
+                    Top-up wallet
+                </button>
+                <button class="wallet-action" onclick="walletAction('deposit')">
+                    <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>
+                            <rect fill="none" height="24" width="24" />
+                        </g>
+                        <g>
+                            <g>
+                                <rect height="7" width="3" x="4" y="10" />
+                                <rect height="7" width="3" x="10.5" y="10" />
+                                <rect height="3" width="20" x="2" y="19" />
+                                <rect height="7" width="3" x="17" y="10" />
+                                <polygon points="12,1 2,6 2,8 22,8 22,6" />
+                            </g>
+                        </g>
+                    </svg>
+                    Transfer to bank
+                </button>
+            </div>
+            <div id="wallet_history_wrapper" class="grid gap-0-5">
+                <h4>Wallet history</h4>
+                <ul id="wallet_history" class="observe-empty-state"></ul>
+                <div class=" empty-state gap-1 justify-center text-center">
+                    <h4>No transactions</h4>
+                </div>
+            </div>
+        </section>
+        <section id="settings" class="inner-page hide">
             <h4>Settings</h4>
             <section class="grid gap-1">
                 <div class="grid">
@@ -359,7 +346,73 @@
                 </sm-form>
             </section>
         </section>
-    </section>
+        <nav id="main_navbar">
+            <ul>
+                <li>
+                    <a href="#/home" class="nav-item interact">
+                        <svg class="icon" 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="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+                        </svg>
+                        <span class="nav-item__title">Home</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#/history" class="nav-item interact" title='View payment requests'>
+                        <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">
+                            <path d="M0,0h24v24H0V0z" fill="none" />
+                            <g>
+                                <path
+                                    d="M19.5,3.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2v14H3v3c0,1.66,1.34,3,3,3h12c1.66,0,3-1.34,3-3V2 L19.5,3.5z M19,19c0,0.55-0.45,1-1,1s-1-0.45-1-1v-3H8V5h11V19z" />
+                                <rect height="2" width="6" x="9" y="7" />
+                                <rect height="2" width="2" x="16" y="7" />
+                                <rect height="2" width="6" x="9" y="10" />
+                                <rect height="2" width="2" x="16" y="10" />
+                            </g>
+                        </svg>
+                        <span class="nav-item__title">History</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#/requests" class="nav-item interact" title='View payment requests'>
+                        <svg class="icon" 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="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+                        </svg>
+                        <span class="nav-item__title">Requests</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#/wallet" class="nav-item interact" title='View payment requests'>
+                        <svg class="icon" 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>
+                        <span class="nav-item__title">Wallet</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#/settings" class="nav-item interact">
+                        <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>
+                                <path d="M0,0h24v24H0V0z" fill="none" />
+                                <path
+                                    d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
+                            </g>
+                        </svg>
+                        <span class="nav-item__title">Settings</span>
+                        </button>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    </div>
     <!-- Popups -->
     <sm-popup id="save_id_popup">
         <header slot="header" class="popup__header">
@@ -452,6 +505,24 @@
             </sm-form>
         </section>
     </sm-popup>
+    <sm-popup id="wallet_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close justify-self-start" onclick="hidePopup()">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                </svg>
+            </button>
+            <h4 id="wallet_popup__title"></h4>
+        </header>
+        <sm-form>
+            <sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount" animate>
+            </sm-input>
+            <button id="wallet_popup__cta" class="button button--primary cta" type="submit">Save</button>
+        </sm-form>
+    </sm-popup>
 
     <!-- templates -->
     <template id="saved_id_template">
@@ -510,6 +581,12 @@
             </div>
         </li>
     </template>
+    <template id="transaction_message_template">
+        <li class="transaction-message grid">
+            <h3 class="transaction-message__amount"></h3>
+            <time class="transaction-message__time"></time>
+        </li>
+    </template>
     <script src="scripts/components.js"></script>
     <script src="scripts/std_ui.js"></script>
     <script src="scripts/std_op.js"></script>
@@ -517,6 +594,7 @@
     <script src="scripts/fn_ui.js"></script>
     <script id="onLoadStartUp">
         function onLoadStartUp() {
+            showPage('loading')
             console.log("Starting the app! Please Wait!")
             floDapps.setCustomPrivKeyInput(getSignedIn)
             floDapps.setAppObjectStores({ savedIds: {} })
diff --git a/scripts/components.js b/scripts/components.js
index 9476c28..122b6f3 100644
--- a/scripts/components.js
+++ b/scripts/components.js
@@ -940,7 +940,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
                 opacity: '1'
             },
             {
-                transform: `translateX(calc(${sign}${this.currentX}px ${sign} 1rem))`,
+                transform: `translateX(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`,
                 opacity: '0'
             }
         ], this.animationOptions).onfinish = () => {
diff --git a/scripts/fn_ui.js b/scripts/fn_ui.js
index 32bb412..e4f2a15 100644
--- a/scripts/fn_ui.js
+++ b/scripts/fn_ui.js
@@ -1,39 +1,46 @@
 /*jshint esversion: 8 */
+/**
+  * @yaireo/relative-time - javascript function to transform timestamp or date to local relative-time
+  *
+  * @version v1.0.0
+  * @homepage https://github.com/yairEO/relative-time
+  */
+
+!function (e, t) { var o = o || {}; "function" == typeof o && o.amd ? o([], t) : "object" == typeof exports && "object" == typeof module ? module.exports = t() : "object" == typeof exports ? exports.RelativeTime = t() : e.RelativeTime = t() }(this, (function () { const e = { year: 31536e6, month: 2628e6, day: 864e5, hour: 36e5, minute: 6e4, second: 1e3 }, t = "en", o = { numeric: "auto" }; function n(e) { e = { locale: (e = e || {}).locale || t, options: { ...o, ...e.options } }, this.rtf = new Intl.RelativeTimeFormat(e.locale, e.options) } return n.prototype = { from(t, o) { const n = t - (o || new Date); for (let t in e) if (Math.abs(n) > e[t] || "second" == t) return this.rtf.format(Math.round(n / e[t]), t) } }, n }));
+
+const relativeTime = new RelativeTime({ style: 'narrow' });
 const userUI = {};
-let paymentsHistoryLoader
-let walletHistoryLoader
 
-userUI.requestTokenFromCashier = function () {
-    let cashier = User.findCashier();
-    if (!cashier)
-        return notify("No cashier online", 'error');
+getRef('wallet_popup__cta').addEventListener('click', function () {
     let amount = parseFloat(getRef('request_cashier_amount').value.trim());
-    //get UPI txid from user
-    let upiTxID = prompt(`Send Rs. ${amount} to ${cashierUPI[cashier]} and enter UPI txid`);
-    if (!upiTxID)
-        return alert("Cancelled");
-    User.cashToToken(cashier, amount, upiTxID).then(result => {
-        console.log(result);
-        alert("Requested cashier. please wait!");
-    }).catch(error => console.error(error))
-}
-
-userUI.withdrawCashFromCashier = function () {
-    let cashier = User.findCashier();
-    if (!cashier)
-        return notify("No cashier online", 'error');
-    let amount = parseFloat(getRef('request_cashier_amount').value.trim());
-    //get confirmation from user
-    let upiID = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`);
-    if (!upiID)
-        return alert("Cancelled");
-    User.sendToken(cashier, amount, 'for token-to-cash').then(txid => {
-        console.warn(`Withdraw ${amount} from cashier ${cashier}`, txid);
-        User.tokenToCash(cashier, amount, txid, upiID).then(result => {
+    if (walletAction === 'deposit') {
+        //get UPI txid from user
+        let upiTxID = prompt(`Send Rs. ${amount} to ${cashierUPI[cashier]} and enter UPI txid`);
+        if (!upiTxID)
+            return alert("Cancelled");
+        User.cashToToken(cashier, amount, upiTxID).then(result => {
             console.log(result);
             alert("Requested cashier. please wait!");
         }).catch(error => console.error(error))
-    }).catch(error => console.error(error))
+    } else {
+        //get confirmation from user
+        let upiID = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`);
+        if (!upiID)
+            return alert("Cancelled");
+        User.sendToken(cashier, amount, 'for token-to-cash').then(txid => {
+            console.warn(`Withdraw ${amount} from cashier ${cashier}`, txid);
+            User.tokenToCash(cashier, amount, txid, upiID).then(result => {
+                console.log(result);
+                alert("Requested cashier. please wait!");
+            }).catch(error => console.error(error))
+        }).catch(error => console.error(error))
+    }
+})
+function walletAction(type) {
+    let cashier = User.findCashier();
+    if (!cashier)
+        return notify("No cashier online. Please try again in a while.", 'error');
+    showPopup('wallet_popup')
 }
 
 userUI.sendMoneyToUser = function (floID, amount, remark) {
@@ -333,13 +340,18 @@ const render = {
                 <button class="button" onclick="userUI.declineRequest('${vectorClock}')">Decline</button>`;
 
         return clone;
+    },
+    transactionMessage(details) {
+        const { tokenAmount, time, sender, receiver } = tokenAPI.util.parseTxData(details)
+        let messageType = sender === receiver ? 'self' : sender === myFloID ? 'sent' : 'received';
+        const clone = getRef('transaction_message_template').content.cloneNode(true).firstElementChild;
+        clone.classList.add(messageType);
+        clone.querySelector('.transaction-message__amount').textContent = formatAmount(tokenAmount);
+        clone.querySelector('.transaction-message__time').textContent = getFormattedTime(time * 1000);
+        return clone;
     }
 };
 
-getRef('history_type_selector').addEventListener('change', (e) => {
-    location.hash = `#/history?type=${e.target.value}`;
-})
-
 let currentUserAction;
 function showTokenTransfer(type) {
     getRef('tt_button').textContent = type;
@@ -352,7 +364,7 @@ function showTokenTransfer(type) {
     showPopup('token_transfer_popup');
 }
 
-saveId = async function () {
+async function saveId() {
     const floID = getRef('flo_id_to_save').value.trim();
     const title = getRef('flo_id_title_to_save').value.trim();
     floGlobals.savedIds[floID] = { title }
diff --git a/scripts/std_ui.js b/scripts/std_ui.js
index 96afcc7..926ba1c 100644
--- a/scripts/std_ui.js
+++ b/scripts/std_ui.js
@@ -2,6 +2,9 @@
 // Global variables
 const domRefs = {};
 const currentYear = new Date().getFullYear();
+let paymentsHistoryLoader = null;
+let walletHistoryLoader = null;
+let contactHistoryLoader = null;
 
 //Checks for internet connection status
 if (!navigator.onLine)
@@ -309,67 +312,169 @@ async function showPage(targetPage, options = {}) {
             break;
         case 'contact':
             getRef('contact__title').textContent = getFloIdTitle(params.floId)
+            Promise.all([
+                tokenAPI.fetch_api(`api/v1.0/getTokenTransactions?token=rupee&senderFloAddress=${myFloID}&destFloAddress=${params.floId}`),
+                tokenAPI.fetch_api(`api/v1.0/getTokenTransactions?token=rupee&senderFloAddress=${params.floId}&destFloAddress=${myFloID}`)])
+                .then(([sentTransactions, receivedTransactions]) => {
+                    const allTransactions = Object.values({ ...sentTransactions.transactions, ...receivedTransactions.transactions }).sort((a, b) => b.transactionDetails.time - a.transactionDetails.time)
+                    if (contactHistoryLoader) {
+                        contactHistoryLoader.update(allTransactions)
+                    } else {
+                        contactHistoryLoader = new LazyLoader('#contact__transactions', allTransactions, render.transactionMessage, { bottomFirst: true });
+                    }
+                    contactHistoryLoader.init()
+                }).catch(err => {
+                    console.error(err)
+                })
             break;
         case 'history':
-            let transactionsList = []
-            if (!params.hasOwnProperty('type')) {
-                history.replaceState(null, null, '#/history?type=payments');
-                params.type = 'payments'
-            }
-            switch (params.type) {
-                case 'payments':
-                    if (paymentsHistoryLoader)
-                        paymentsHistoryLoader.clear()
-                    getRef('payments_history').innerHTML = '<sm-spinner></sm-spinner>'
-                    getRef('payments_history_wrapper').classList.remove('hide')
-                    getRef('wallet_history_wrapper').classList.add('hide')
-                    tokenAPI.getAllTxs(myFloID).then(({ transactions }) => {
-                        for (const transactionId in transactions) {
-                            transactionsList.push({
-                                ...tokenAPI.util.parseTxData(transactions[transactionId]),
-                                txid: transactionId
-                            })
-                        }
-                        if (paymentsHistoryLoader) {
-                            paymentsHistoryLoader.update(transactionsList)
-                        } else {
-                            paymentsHistoryLoader = new LazyLoader('#payments_history', transactionsList, render.transactionCard);
-                        }
-                        paymentsHistoryLoader.init()
-                    }).catch(e => {
-                        console.error(e)
+            const paymentTransactions = []
+            if (paymentsHistoryLoader)
+                paymentsHistoryLoader.clear()
+            getRef('payments_history').innerHTML = '<sm-spinner></sm-spinner>'
+            tokenAPI.getAllTxs(myFloID).then(({ transactions }) => {
+                for (const transactionId in transactions) {
+                    paymentTransactions.push({
+                        ...tokenAPI.util.parseTxData(transactions[transactionId]),
+                        txid: transactionId
                     })
-                    break;
-                case 'wallet':
-                    if (walletHistoryLoader)
-                        walletHistoryLoader.clear()
-                    getRef('wallet_history').innerHTML = '<sm-spinner></sm-spinner>'
-                    getRef('payments_history_wrapper').classList.add('hide')
-                    getRef('wallet_history_wrapper').classList.remove('hide')
-                    const requests = User.cashierRequests;
-                    for (const transactionId in requests) {
-                        transactionsList.push(User.cashierRequests[transactionId])
-                    }
-                    if (walletHistoryLoader) {
-                        walletHistoryLoader.update(transactionsList)
-                    } else {
-                        walletHistoryLoader = new LazyLoader('#wallet_history', transactionsList, render.walletRequestCard);
-                    }
-                    walletHistoryLoader.init()
-                    break;
-                default:
-                    break;
+                }
+                if (paymentsHistoryLoader) {
+                    paymentsHistoryLoader.update(paymentTransactions)
+                } else {
+                    paymentsHistoryLoader = new LazyLoader('#payments_history', paymentTransactions, render.transactionCard);
+                }
+                paymentsHistoryLoader.init()
+            }).catch(e => {
+                console.error(e)
+            })
+            break;
+        case 'wallet':
+            const walletTransactions = []
+            if (walletHistoryLoader)
+                walletHistoryLoader.clear()
+            getRef('wallet_history').innerHTML = '<sm-spinner></sm-spinner>'
+            const requests = User.cashierRequests;
+            for (const transactionId in requests) {
+                walletTransactions.push(User.cashierRequests[transactionId])
             }
-            getRef('history_type_selector').value = params.type
+            if (walletHistoryLoader) {
+                walletHistoryLoader.update(walletTransactions)
+            } else {
+                walletHistoryLoader = new LazyLoader('#wallet_history', walletTransactions, render.walletRequestCard);
+            }
+            walletHistoryLoader.init()
             break;
         default:
             break;
     }
+    if (pageId !== 'history') {
+        if (paymentsHistoryLoader)
+            paymentsHistoryLoader.clear()
+    }
+    if (pageId !== 'contact') {
+        if (contactHistoryLoader)
+            contactHistoryLoader.clear()
+    }
+    if (pageId !== 'wallet') {
+        if (walletHistoryLoader)
+            walletHistoryLoader.clear()
+    }
 
     if (pagesData.lastPage !== pageId) {
+        const animOptions = {
+            duration: 100,
+            fill: 'forwards',
+            easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+        }
+        let previousActiveElement = getRef('main_navbar').querySelector('.nav-item--active')
+        const currentActiveElement = document.querySelector(`.nav-item[href="#/${pageId}"]`)
+        if (currentActiveElement) {
+            if (getRef('main_navbar').classList.contains('hide')) {
+                getRef('main_card').classList.remove('nav-hidden')
+                getRef('main_navbar').classList.remove('hide-away')
+                getRef('main_navbar').classList.remove('hide')
+                getRef('main_navbar').animate([
+                    {
+                        transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
+                        opacity: 0,
+                    },
+                    {
+                        transform: `none`,
+                        opacity: 1,
+                    },
+                ], { ...animOptions, easing: 'ease-in' })
+            }
+            getRef('main_header').classList.remove('hide')
+            const previousActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(previousActiveElement)
+            const currentActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(currentActiveElement)
+            const isOnTop = previousActiveElementIndex < currentActiveElementIndex
+            const currentIndicator = createElement('div', { className: 'nav-item__indicator' });
+            let previousIndicator = getRef('main_navbar').querySelector('.nav-item__indicator')
+            if (!previousIndicator) {
+                previousIndicator = currentIndicator.cloneNode(true)
+                previousActiveElement = currentActiveElement
+                previousActiveElement.append(previousIndicator)
+            } else if (currentActiveElementIndex !== previousActiveElementIndex) {
+                const indicatorDimensions = previousIndicator.getBoundingClientRect()
+                const currentActiveElementDimensions = currentActiveElement.getBoundingClientRect()
+                let moveBy
+                if (isMobileView) {
+                    moveBy = ((currentActiveElementDimensions.width - indicatorDimensions.width) / 2) + indicatorDimensions.width
+                } else {
+                    moveBy = ((currentActiveElementDimensions.height - indicatorDimensions.height) / 2) + indicatorDimensions.height
+                }
+                indicatorObserver.observe(previousIndicator)
+                previousIndicator.animate([
+                    {
+                        transform: 'none',
+                        opacity: 1,
+                    },
+                    {
+                        transform: `translate${isMobileView ? 'X' : 'Y'}(${isOnTop ? `${moveBy}px` : `-${moveBy}px`})`,
+                        opacity: 0,
+                    },
+                ], { ...animOptions, easing: 'ease-in' }).onfinish = () => {
+                    previousIndicator.remove()
+                }
+                tempData = {
+                    currentActiveElement,
+                    currentIndicator,
+                    isOnTop,
+                    animOptions,
+                    moveBy
+                }
+            }
+            previousActiveElement.classList.remove('nav-item--active');
+            currentActiveElement.classList.add('nav-item--active')
+        } else {
+            if (!getRef('main_navbar').classList.contains('hide')) {
+                getRef('main_card').classList.add('nav-hidden')
+                getRef('main_navbar').classList.add('hide-away')
+                getRef('main_navbar').animate([
+                    {
+                        transform: `none`,
+                        opacity: 1,
+                    },
+                    {
+                        transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
+                        opacity: 0,
+                    },
+                ], {
+                    duration: 200,
+                    fill: 'forwards',
+                    easing: 'ease'
+                }).onfinish = () => {
+                    getRef('main_navbar').classList.add('hide')
+                }
+                getRef('main_header').classList.add('hide')
+            }
+        }
         document.querySelectorAll('.page').forEach(page => page.classList.add('hide'))
+        getRef(pageId).closest('.page').classList.remove('hide')
+        document.querySelectorAll('.inner-page').forEach(page => page.classList.add('hide'))
         getRef(pageId).classList.remove('hide')
-        getRef('pages_container').style.overflowY = "hidden";
+        getRef('main_card').style.overflowY = "hidden";
         getRef(pageId).animate([
             {
                 opacity: 0,
@@ -384,7 +489,7 @@ async function showPage(targetPage, options = {}) {
                 duration: 300,
                 easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
             }).onfinish = () => {
-                getRef('pages_container').style.overflowY = "";
+                getRef('main_card').style.overflowY = "";
             }
         pagesData.lastPage = pageId
     }
@@ -393,11 +498,31 @@ async function showPage(targetPage, options = {}) {
     pagesData.openedPages.add(pageId)
 
 }
+const indicatorObserver = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+        if (!entry.isIntersecting) {
+            const { currentActiveElement, currentIndicator, isOnTop, animOptions, moveBy } = tempData
+            currentActiveElement.append(currentIndicator)
+            currentIndicator.animate([
+                {
+                    transform: `translate${isMobileView ? 'X' : 'Y'}(${isOnTop ? `-${moveBy}px` : `${moveBy}px`})`,
+                    opacity: 0,
+                },
+                {
+                    transform: 'none',
+                    opacity: 1
+                },
+            ], { ...animOptions, easing: 'ease-out' })
+        }
+    })
+}, {
+    threshold: 1
+})
 
 // class based lazy loading
 class LazyLoader {
     constructor(container, elementsToRender, renderFn, options = {}) {
-        const { batchSize = 10, freshRender } = options
+        const { batchSize = 10, freshRender, bottomFirst = false } = options
 
         this.elementsToRender = elementsToRender
         this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
@@ -406,6 +531,7 @@ class LazyLoader {
 
         this.batchSize = batchSize
         this.freshRender = freshRender
+        this.bottomFirst = bottomFirst
 
         this.lazyContainer = document.querySelector(container)
 
@@ -429,7 +555,11 @@ class LazyLoader {
             mutationList.forEach(mutation => {
                 if (mutation.type === 'childList') {
                     if (mutation.addedNodes.length) {
-                        this.intersectionObserver.observe(this.lazyContainer.lastElementChild)
+                        if (this.bottomFirst)
+                            this.intersectionObserver.observe(this.lazyContainer.firstElementChild)
+                        else
+                            this.intersectionObserver.observe(this.lazyContainer.lastElementChild)
+
                     }
                 }
             })
@@ -454,10 +584,21 @@ class LazyLoader {
             this.updateStartIndex = 0
             this.updateEndIndex = this.arrayOfElements.length > this.batchSize ? this.batchSize : this.arrayOfElements.length
         }
-        for (let index = this.updateStartIndex; index < this.updateEndIndex; index++) {
-            frag.append(this.renderFn(this.arrayOfElements[index]))
+        if (this.bottomFirst) {
+            for (let index = this.updateStartIndex; index < this.updateEndIndex; index++) {
+                frag.prepend(this.renderFn(this.arrayOfElements[index]))
+            }
+            this.lazyContainer.prepend(frag)
+        } else {
+            for (let index = this.updateStartIndex; index < this.updateEndIndex; index++) {
+                frag.append(this.renderFn(this.arrayOfElements[index]))
+            }
+            this.lazyContainer.append(frag)
         }
-        this.lazyContainer.append(frag)
+        if (!lazyLoad && this.bottomFirst)
+            this.lazyContainer.scrollTo({
+                top: this.lazyContainer.scrollHeight,
+            })
         // Callback to be called if elements are updated or rendered for first time
         if (!lazyLoad && this.freshRender)
             this.freshRender()