diff --git a/css/main.css b/css/main.css
index 802b93e..1e59475 100644
--- a/css/main.css
+++ b/css/main.css
@@ -247,27 +247,6 @@ ul {
   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: 0.9rem;
-}
-
-.h5 {
-  font-size: 0.75rem;
-}
-
 .uppercase {
   text-transform: uppercase;
 }
@@ -346,7 +325,7 @@ h3 {
 }
 
 .justify-start {
-  justify-content: start;
+  justify-items: start;
 }
 
 .justify-center {
@@ -630,7 +609,7 @@ h3 {
   padding: 0.5rem 0.3rem;
   color: var(--text-color);
   font-size: 0.7rem;
-  border-radius: 0.7rem;
+  border-radius: 0.3rem;
 }
 .nav-item .icon {
   transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
@@ -699,13 +678,15 @@ h3 {
   position: relative;
 }
 
-#user {
+#user,
+#cashier {
   position: relative;
   gap: 2rem;
   height: 100%;
   padding: 0 1.5rem;
   overflow-y: auto;
   padding-bottom: 5rem;
+  align-content: flex-start;
 }
 
 #quick_actions_container {
@@ -732,10 +713,10 @@ h3 {
 }
 
 #rupee_balance span:first-of-type {
-  font-size: 1.5rem;
+  font-size: 2rem;
 }
 #rupee_balance span:last-of-type {
-  font-size: 0.8rem;
+  font-size: 1rem;
 }
 
 .wallet-action {
@@ -761,19 +742,20 @@ h3 {
   grid-template-columns: auto 1fr;
   gap: 0 0.8rem;
   border-radius: 0.3rem;
+  padding: 0.5rem 0;
+  background-color: rgba(var(--text-color), 0.03);
   -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 0.1rem 0.1rem var(--accent-color) inset;
 }
 .saved-id .edit-saved {
+  grid-area: 1/1/3/2;
   padding: 0.3rem;
   position: relative;
-  justify-self: center;
 }
 .saved-id .edit-saved .icon {
   position: absolute;
@@ -801,8 +783,13 @@ h3 {
   border-radius: 2rem;
 }
 .saved-id__title {
-  font-size: 0.9rem;
-  font-weight: 500;
+  align-self: flex-end;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.saved-id__flo-id {
+  font-size: 0.8rem;
 }
 
 .card {
@@ -827,7 +814,7 @@ h3 {
   overflow-y: auto;
   flex: 1;
   padding: 0 max(1rem, 8vw);
-  align-items: flex-start;
+  align-content: flex-start;
 }
 
 .transaction-message {
@@ -859,6 +846,10 @@ h3 {
   font-size: 0.8rem;
 }
 
+#transaction {
+  padding: 1.5rem;
+}
+
 #wallet_history_wrapper {
   margin-top: 1.5rem;
   padding-bottom: 3rem;
@@ -904,9 +895,7 @@ h3 {
   border-radius: 2rem;
 }
 .transaction__receiver {
-  font-size: 0.9rem;
   font-weight: 500;
-  color: rgba(var(--text-color), 0.8);
 }
 .transaction__time {
   font-size: 0.8rem;
@@ -1028,7 +1017,7 @@ h3 {
   align-items: center;
   padding: 0.8rem;
   border-radius: 0.3rem;
-  background-color: rgba(var(--text-color), 0.06);
+  background-color: rgba(var(--text-color), 0.03);
 }
 .cashier-request:not(:last-of-type),
 .payment-request:not(:last-of-type) {
@@ -1039,14 +1028,44 @@ h3 {
   font-size: 0.8rem;
 }
 
+#payment_request_history {
+  padding-bottom: 3rem;
+}
+
 .payment-request {
   display: grid;
+  gap: 0.5rem 1rem;
   grid-template-columns: 1fr auto;
+  color: rgba(var(--text-color), 1);
 }
 .payment-request__amount {
   font-weight: 700;
   text-align: right;
 }
+.payment-request__status {
+  display: flex;
+  align-items: center;
+  font-size: 0.8rem;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+}
+.payment-request__status .icon {
+  height: 1rem;
+  width: 1rem;
+  margin-left: 0.3rem;
+}
+.payment-request .icon.paid {
+  fill: var(--green);
+}
+.payment-request .icon.declined {
+  fill: var(--danger-color);
+}
+.payment-request .button {
+  background-color: transparent;
+  padding: 0.6rem 0.8rem;
+  color: var(--accent-color);
+  background-color: rgba(var(--foreground-color), 1);
+}
 
 .wallet-request {
   display: grid;
@@ -1121,7 +1140,7 @@ h3 {
     height: calc(100vh - 3rem);
     width: calc(100vw - 3rem);
     position: relative;
-    border-radius: 1rem;
+    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);
   }
@@ -1166,13 +1185,8 @@ h3 {
     padding: 1.5rem;
   }
 
-  #user {
-    gap: 1rem;
-    align-items: flex-start;
-  }
-
   #saved_ids_list {
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
   }
 }
 @media screen and (min-width: 56rem) {
diff --git a/css/main.min.css b/css/main.min.css
index 7b97fa2..867ff03 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[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__header{display:flex;justify-content:space-between;margin-bottom:1.5rem}.page__header .grid{margin-top:auto}.page__header h1{margin-top:auto;font-size:2rem}.page__header .illustration{height:8rem;width:auto}.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:.7rem}.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)}#home{padding:0;position:relative}#user{position:relative;gap:2rem;height:100%;padding:0 1.5rem;overflow-y:auto;padding-bottom: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{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;padding-bottom:4rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;align-items:center}.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)}#add_address_button{border-radius:.5rem;color:rgba(var(--background-color), 1);background-color:var(--accent-color)}#add_address_button .icon{fill:rgba(var(--background-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,.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),.payment-request:not(:last-of-type){margin-bottom:.5rem}.cashier-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{display:grid;gap:.5rem 1rem;padding:.5rem 0;border-radius:.5rem;grid-template-columns:auto 1fr}.wallet-request .icon.pending{fill:var(--yellow)}.wallet-request .icon.failed{fill:var(--danger-color)}.wallet-request__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;border-radius:2rem;background-color:rgba(var(--text-color), 0.06)}.wallet-request__icon .icon{fill:var(--accent-color)}.wallet-request__details{font-weight:700;color:rgba(var(--text-color), 1)}.wallet-request__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.wallet-request__status{font-size:.8rem;color:rgba(var(--text-color), 0.8);text-transform:capitalize}.wallet-request__status .icon{margin-left:.3rem}@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{height:calc(100vh - 3rem);width:calc(100vw - 3rem);position:relative;border-radius:1rem;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(10rem, 1fr))}}@media screen and (min-width: 56rem){#main_card{width:56rem;height:min(80vh,48rem)}}@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}.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-items: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__header{display:flex;justify-content:space-between;margin-bottom:1.5rem}.page__header .grid{margin-top:auto}.page__header h1{margin-top:auto;font-size:2rem}.page__header .illustration{height:8rem;width:auto}.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)}#home{padding:0;position:relative}#user,#cashier{position:relative;gap:2rem;height:100%;padding:0 1.5rem;overflow-y:auto;padding-bottom:5rem;align-content:flex-start}#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:2rem}#rupee_balance span:last-of-type{font-size:1rem}.wallet-action{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;padding:.5rem 0;background-color:rgba(var(--text-color), 0.03);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.saved-id.highlight{box-shadow:0 0 .1rem .1rem var(--accent-color) inset}.saved-id .edit-saved{grid-area:1/1/3/2;padding:.3rem;position:relative}.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{align-self:flex-end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.saved-id__flo-id{font-size:.8rem}.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-content: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}#transaction{padding:1.5rem}#wallet_history_wrapper{margin-top:1.5rem;padding-bottom:3rem}#payments_history{display:grid;gap:2rem;padding-bottom:4rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;align-items:center}.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-weight:500}.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)}#add_address_button{border-radius:.5rem;color:rgba(var(--background-color), 1);background-color:var(--accent-color)}#add_address_button .icon{fill:rgba(var(--background-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,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.03)}.cashier-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:.5rem}.cashier-request__time,.payment-request__time{font-size:.8rem}#payment_request_history{padding-bottom:3rem}.payment-request{display:grid;gap:.5rem 1rem;grid-template-columns:1fr auto;color:rgba(var(--text-color), 1)}.payment-request__amount{font-weight:700;text-align:right}.payment-request__status{display:flex;align-items:center;font-size:.8rem;font-weight:500;letter-spacing:.05em}.payment-request__status .icon{height:1rem;width:1rem;margin-left:.3rem}.payment-request .icon.paid{fill:var(--green)}.payment-request .icon.declined{fill:var(--danger-color)}.payment-request .button{background-color:transparent;padding:.6rem .8rem;color:var(--accent-color);background-color:rgba(var(--foreground-color), 1)}.wallet-request{display:grid;gap:.5rem 1rem;padding:.5rem 0;border-radius:.5rem;grid-template-columns:auto 1fr}.wallet-request .icon.pending{fill:var(--yellow)}.wallet-request .icon.failed{fill:var(--danger-color)}.wallet-request__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;border-radius:2rem;background-color:rgba(var(--text-color), 0.06)}.wallet-request__icon .icon{fill:var(--accent-color)}.wallet-request__details{font-weight:700;color:rgba(var(--text-color), 1)}.wallet-request__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.wallet-request__status{font-size:.8rem;color:rgba(var(--text-color), 0.8);text-transform:capitalize}.wallet-request__status .icon{margin-left:.3rem}@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{height:calc(100vh - 3rem);width:calc(100vw - 3rem);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}#saved_ids_list{grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr))}}@media screen and (min-width: 56rem){#main_card{width:56rem;height:min(80vh,48rem)}}@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 9004c91..a1f6358 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -219,27 +219,6 @@ ul {
 .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: 0.9rem;
-}
-
-.h5 {
-  font-size: 0.75rem;
-}
 .uppercase {
   text-transform: uppercase;
 }
@@ -312,7 +291,7 @@ h3 {
 }
 
 .justify-start {
-  justify-content: start;
+  justify-items: start;
 }
 
 .justify-center {
@@ -587,7 +566,7 @@ h3 {
   padding: 0.5rem 0.3rem;
   color: var(--text-color);
   font-size: 0.7rem;
-  border-radius: 0.7rem;
+  border-radius: 0.3rem;
   .icon {
     transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }
@@ -653,13 +632,15 @@ h3 {
   padding: 0;
   position: relative;
 }
-#user {
+#user,
+#cashier {
   position: relative;
   gap: 2rem;
   height: 100%;
   padding: 0 1.5rem;
   overflow-y: auto;
   padding-bottom: 5rem;
+  align-content: flex-start;
 }
 #quick_actions_container {
   display: grid;
@@ -684,10 +665,10 @@ h3 {
 }
 #rupee_balance {
   span:first-of-type {
-    font-size: 1.5rem;
+    font-size: 2rem;
   }
   span:last-of-type {
-    font-size: 0.8rem;
+    font-size: 1rem;
   }
 }
 .wallet-action {
@@ -712,15 +693,16 @@ h3 {
   grid-template-columns: auto 1fr;
   gap: 0 0.8rem;
   border-radius: 0.3rem;
+  padding: 0.5rem 0;
+  background-color: rgba(var(--text-color), 0.03);
   user-select: none;
-  align-items: center;
   &.highlight {
     box-shadow: 0 0 0.1rem 0.1rem var(--accent-color) inset;
   }
   .edit-saved {
+    grid-area: 1/1/3/2;
     padding: 0.3rem;
     position: relative;
-    justify-self: center;
     .icon {
       position: absolute;
       height: 1.2rem;
@@ -748,8 +730,13 @@ h3 {
     border-radius: 2rem;
   }
   &__title {
-    font-size: 0.9rem;
-    font-weight: 500;
+    align-self: flex-end;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &__flo-id {
+    font-size: 0.8rem;
   }
 }
 
@@ -773,7 +760,7 @@ h3 {
   overflow-y: auto;
   flex: 1;
   padding: 0 max(1rem, 8vw);
-  align-items: flex-start;
+  align-content: flex-start;
 }
 .transaction-message {
   background-color: rgba(var(--text-color), 0.06);
@@ -805,6 +792,10 @@ h3 {
   }
 }
 
+#transaction {
+  padding: 1.5rem;
+}
+
 #wallet_history_wrapper {
   margin-top: 1.5rem;
   padding-bottom: 3rem;
@@ -851,9 +842,7 @@ h3 {
     border-radius: 2rem;
   }
   &__receiver {
-    font-size: 0.9rem;
     font-weight: 500;
-    color: rgba(var(--text-color), 0.8);
   }
   &__time {
     font-size: 0.8rem;
@@ -956,7 +945,7 @@ h3 {
   align-items: center;
   padding: 0.8rem;
   border-radius: 0.3rem;
-  background-color: rgba(var(--text-color), 0.06);
+  background-color: rgba(var(--text-color), 0.03);
   &:not(:last-of-type) {
     margin-bottom: 0.5rem;
   }
@@ -964,13 +953,42 @@ h3 {
     font-size: 0.8rem;
   }
 }
+#payment_request_history {
+  padding-bottom: 3rem;
+}
 .payment-request {
   display: grid;
+  gap: 0.5rem 1rem;
   grid-template-columns: 1fr auto;
+  color: rgba(var(--text-color), 1);
   &__amount {
     font-weight: 700;
     text-align: right;
   }
+  &__status {
+    display: flex;
+    align-items: center;
+    font-size: 0.8rem;
+    font-weight: 500;
+    letter-spacing: 0.05em;
+    .icon {
+      height: 1rem;
+      width: 1rem;
+      margin-left: 0.3rem;
+    }
+  }
+  .icon.paid {
+    fill: var(--green);
+  }
+  .icon.declined {
+    fill: var(--danger-color);
+  }
+  .button {
+    background-color: transparent;
+    padding: 0.6rem 0.8rem;
+    color: var(--accent-color);
+    background-color: rgba(var(--foreground-color), 1);
+  }
 }
 .wallet-request {
   display: grid;
@@ -1049,7 +1067,7 @@ h3 {
       grid-template-areas: "nav header" "nav .";
     }
     position: relative;
-    border-radius: 1rem;
+    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);
@@ -1086,12 +1104,8 @@ h3 {
   .card {
     padding: 1.5rem;
   }
-  #user {
-    gap: 1rem;
-    align-items: flex-start;
-  }
   #saved_ids_list {
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
   }
 }
 @media screen and (min-width: 56rem) {
diff --git a/index.html b/index.html
index 6e0602b..2b7473c 100644
--- a/index.html
+++ b/index.html
@@ -548,9 +548,18 @@
                     <circle cx="497.22047" cy="216.17011" r="6.46689" fill="#f2f2f2" />
                 </svg>
             </div>
-            <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 id="requests_history_wrapper" class="grid gap-1-5">
+                <div class="hide grid gap-1">
+                    <h4>Pending requests</h4>
+                    <ul id="pending_payment_requests" class="grid gap-0-5"></ul>
+                </div>
+                <div class="grid gap-1">
+                    <h4>History</h4>
+                    <ul id="payment_request_history" class="observe-empty-state grid gap-0-5"></ul>
+                    <div class=" empty-state gap-1 justify-center text-center">
+                        <h4>No requests</h4>
+                    </div>
+                </div>
             </div>
         </section>
         <section id="wallet" class="inner-page hide">
@@ -627,7 +636,7 @@
                         transform="translate(-229.66231 -151.4124)" fill="#3f3d56" />
                 </svg>
             </div>
-            <div class="grid">
+            <div class="grid gap-1" style="width: min(24rem, 100%);">
                 <div class="grid gap-0-5">
                     <h5>Balance</h5>
                     <h1 class="h1" id="rupee_balance"></h1>
@@ -677,7 +686,7 @@
             </div>
         </section>
         <div id="transaction" class="inner-page hide">
-            <div class="flex align-center">
+            <div class="grid gap-0-5 justify-start">
                 <button class="button icon-only margin-right-0-5" onclick="history.back()">
                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
                         fill="#000000">
@@ -685,7 +694,13 @@
                         <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
                     </svg>
                 </button>
-                <h4 id="contact__title"></h4>
+                <h4 id="transaction__type"></h4>
+            </div>
+            <h1 id="transaction__amount"></h1>
+            <div class="flex align-center">
+                <time id="transaction__time"></time>
+                <div class="bullet-point"></div>
+                <span id="transaction__status"></span>
             </div>
         </div>
         <section id="settings" class="inner-page hide">
@@ -816,7 +831,7 @@
                         <span class="nav-item__title">History</span>
                     </a>
                 </li>
-                <li>
+                <li class="user-element hide">
                     <a href="#/requests" 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">
@@ -900,7 +915,7 @@
                 <sm-copy id="edit_saved_id"></sm-copy>
             </div>
             <sm-form>
-                <sm-input id="newAddrLabel" placeholder="Name" autofocus animate required></sm-input>
+                <sm-input id="get_new_title" placeholder="Name" autofocus animate required></sm-input>
                 <div class="flex align-center space-between">
                     <button class="button icon-only" title="Delete this FLO ID?" onclick="deleteSaved()">
                         <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
@@ -973,7 +988,7 @@
     <!-- templates -->
     <template id="saved_id_template">
         <li class="saved-id grid interact" tabindex="0">
-            <button class="interact edit-saved" title="Edit saved ID">
+            <button class="interact edit-saved icon-only" title="Edit name">
                 <div class="saved-id__initials"></div>
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
                     fill="#000000">
@@ -983,6 +998,17 @@
                 </svg>
             </button>
             <h4 class="saved-id__title"></h4>
+            <div class="grid align-center" style="grid-template-columns: 1fr auto;">
+                <div class="saved-id__flo-id overflow-ellipsis"></div>
+                <button class="copy-saved-id icon-only margin-left-0-5" title="Copy FLO ID">
+                    <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="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
+                    </svg>
+                </button>
+            </div>
         </li>
     </template>
     <template id="transaction_template">
@@ -1015,8 +1041,8 @@
             </a>
         </li>
     </template>
-    <template id="payment_request_template">
-        <li class="payment-request">
+    <template id="pending_payment_request_template">
+        <li class="payment-request payment-request--pending">
             <div class="grid gap-0-5 flex-1">
                 <div class="payment-request__requestor breakable"></div>
                 <div class="payment-request__remark"></div>
@@ -1024,10 +1050,28 @@
             <div class="payment-request__amount"></div>
             <div class="flex space-between full-bleed align-center">
                 <time class="payment-request__time"></time>
-                <div class="payment-request__actions"></div>
+                <div class="payment-request__actions">
+                    <button class="button decline-payment">Decline</button>
+                    <button class="button pay-requested">Pay</button>
+                </div>
             </div>
         </li>
     </template>
+    <template id="processed_payment_request_template">
+        <li>
+            <a href="" class="payment-request payment-request--processed interact">
+                <div class="grid gap-0-5 flex-1">
+                    <div class="payment-request__requestor breakable"></div>
+                    <div class="payment-request__remark"></div>
+                </div>
+                <div class="payment-request__amount"></div>
+                <div class="flex space-between full-bleed align-center">
+                    <time class="payment-request__time"></time>
+                    <div class="payment-request__status"></div>
+                </div>
+            </a>
+        </li>
+    </template>
     <template id="transaction_message_template">
         <li class="transaction-message grid">
             <h3 class="transaction-message__amount"></h3>
diff --git a/scripts/fn_ui.js b/scripts/fn_ui.js
index 490fbc3..746fec4 100644
--- a/scripts/fn_ui.js
+++ b/scripts/fn_ui.js
@@ -97,7 +97,7 @@ userUI.renderMoneyRequests = function (requests, error = null) {
         return;
     if (pagesData.lastPage === 'requests') {
         for (let r in requests) {
-            let oldCard = getRef('user-money-requests').querySelector(`[data-vc-${r}]`);
+            let oldCard = getRef('payment_request_history').querySelector(`[data-vc-${r}]`);
             if (oldCard)
                 oldCard.replaceWith(render.paymentRequestCard(requests[r]));
         }
@@ -105,12 +105,12 @@ userUI.renderMoneyRequests = function (requests, error = null) {
 };
 
 userUI.payRequest = function (reqID) {
-    let request = User.moneyRequests[reqID];
+    let { message: { amount, remark }, senderID } = User.moneyRequests[reqID];
     getConfirmation('Pay?', { message: `Do you want to pay ${request.message.amount} to ${request.senderID}?`, confirmText: 'Pay' }).then(confirmation => {
         if (confirmation) {
-            User.sendToken(request.senderID, request.message.amount, "|" + request.message.remark).then(txid => {
-                console.warn(`Sent ${request.message.amount} to ${request.senderID}`, txid);
-                notify(`Sent ${request.message.amount} to ${request.senderID}. It may take a few mins to reflect in their wallet`, 'success');
+            User.sendToken(senderID, amount, "|" + remark).then(txid => {
+                console.warn(`Sent ${amount} to ${senderID}`, txid);
+                notify(`Sent ${formatAmount(amount)} to ${getFloIdTitle(senderID)}. It may take a few mins to reflect in their wallet`, 'success');
                 User.decideRequest(request, 'PAID: ' + txid)
                     .then(result => console.log(result))
                     .catch(error => console.error(error))
@@ -131,11 +131,11 @@ userUI.declineRequest = function (reqID) {
     })
 }
 
-delegate(getRef('user-money-requests'), 'click', '.pay-requested', e => {
+delegate(getRef('pending_payment_requests'), 'click', '.pay-requested', e => {
     const vectorClock = e.target.closest('.payment-request').dataset.vc;
     userUI.payRequest(vectorClock);
 })
-delegate(getRef('user-money-requests'), 'click', '.decline-payment', e => {
+delegate(getRef('pending_payment_requests'), 'click', '.decline-payment', e => {
     const vectorClock = e.target.closest('.payment-request').dataset.vc;
     userUI.declineRequest(vectorClock);
 })
@@ -152,9 +152,9 @@ cashierUI.renderRequests = function (requests, error = null) {
     for (let r in requests) {
         const oldCard = document.getElementById(r);
         if (oldCard) oldCard.remove();
-        frag.append(render.cashierRequestCard(requests[r]));
+        frag.prepend(render.cashierRequestCard(requests[r]));
     }
-    getRef('cashier_request_list').append(frag)
+    getRef('cashier_request_list').prepend(frag)
 }
 
 cashierUI.completeRequest = function (reqID) {
@@ -233,11 +233,12 @@ function getStatusIcon(status) {
 
 const render = {
     savedId(floID, details) {
-        const { title } = details.hasOwnProperty('title') ? details : { title: details };
+        const { title } = details;
         const clone = getRef('saved_id_template').content.cloneNode(true).firstElementChild;
         clone.dataset.floId = floID;
         clone.querySelector('.saved-id__initials').textContent = title.charAt(0);
         clone.querySelector('.saved-id__title').textContent = title;
+        clone.querySelector('.saved-id__flo-id').textContent = floID;
         return clone;
     },
     transactionCard(transactionDetails) {
@@ -281,7 +282,7 @@ const render = {
         let status = tag ? tag : (note ? 'REJECTED' : "PENDING");
         clone.classList.add(status.toLowerCase());
         clone.dataset.vc = vectorClock;
-        clone.href = `#/transaction?transactionId=${vectorClock}`;
+        clone.href = `#/transaction?transactionId=${vectorClock}&type=wallet`;
         clone.querySelector('.wallet-request__icon').innerHTML = type === '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>`
             :
@@ -297,21 +298,22 @@ const render = {
     },
     paymentRequestCard(details) {
         const { time, senderID, message: { amount, remark }, note, vectorClock } = details;
-        const clone = getRef('payment_request_template').content.cloneNode(true).firstElementChild;
+        const clone = getRef(`${note ? 'processed' : 'pending'}_payment_request_template`).content.cloneNode(true).firstElementChild;
         clone.dataset.vc = vectorClock;
         clone.querySelector('.payment-request__requestor').textContent = getFloIdTitle(senderID);
         clone.querySelector('.payment-request__time').textContent = getFormattedTime(time);
         clone.querySelector('.payment-request__amount').textContent = amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' });
         clone.querySelector('.payment-request__remark').textContent = remark;
-
-        let status = note;
-        if (status)
-            clone.querySelector('.payment-request__actions').textContent = note;
-        else
-            clone.querySelector('.payment-request__actions').innerHTML =
-                `<button class="button pay-requested">Pay</button>
-                <button class="button decline-payment">Decline</button>`;
-
+        const status = note ? note.split(':')[0] : 'PENDING';
+        if (note) {
+            clone.firstElementChild.href = `#/transaction?transactionId=${vectorClock}&type=request`;
+            let icon
+            if (status === 'PAID')
+                icon = `<svg class="icon paid" 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="M23,12l-2.44-2.79l0.34-3.69l-3.61-0.82L15.4,1.5L12,2.96L8.6,1.5L6.71,4.69L3.1,5.5L3.44,9.2L1,12l2.44,2.79l-0.34,3.7 l3.61,0.82L8.6,22.5l3.4-1.47l3.4,1.46l1.89-3.19l3.61-0.82l-0.34-3.69L23,12z M10.09,16.72l-3.8-3.81l1.48-1.48l2.32,2.33 l5.85-5.87l1.48,1.48L10.09,16.72z"/></g></svg>`
+            else
+                icon = `<svg class="icon declined" 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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"/></svg>`
+            clone.querySelector('.payment-request__status').innerHTML = `${status} ${icon}`;
+        }
         return clone;
     },
     transactionMessage(details) {
@@ -336,6 +338,17 @@ function showTokenTransfer(type) {
     }
     showPopup('token_transfer_popup');
 }
+
+function getArrayOfSavedIds() {
+    const arr = []
+    for (const key in floGlobals.savedIds) {
+        arr.push({
+            floID: key,
+            details: floGlobals.savedIds[key]
+        })
+    }
+    return arr.sort((a, b) => a.details.title.localeCompare(b.details.title))
+}
 userUI.renderSavedIds = async function () {
     floGlobals.savedIds = {}
     const frag = document.createDocumentFragment()
@@ -356,17 +369,17 @@ userUI.renderSavedIds = async function () {
                 floGlobals.savedIds[key] = idsToRender[key];
         }
     }
-    for (const key in floGlobals.savedIds) {
-        frag.append(render.savedId(key, floGlobals.savedIds[key]));
-    }
+    getArrayOfSavedIds().forEach(({ floID, details }) => {
+        frag.append(render.savedId(floID, details));
+    })
     getRef('saved_ids_list').append(frag);
 }
 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 }
-    getRef('saved_ids_list').append(render.savedId(floID, { title }));
     syncSavedIds().then(() => {
+        insertElementAlphabetically(title, render.savedIdCard(floID, { title }))
         notify(`Saved ${floID}`, 'success');
         hidePopup();
     }).catch(error => {
@@ -381,13 +394,43 @@ delegate(getRef('saved_ids_list'), 'click', '.saved-id', e => {
     if (e.target.closest('.edit-saved')) {
         const target = e.target.closest('.saved-id');
         getRef('edit_saved_id').setAttribute('value', target.dataset.floId);
-        getRef('newAddrLabel').value = getFloIdTitle(target.dataset.floId);
+        getRef('get_new_title').value = getFloIdTitle(target.dataset.floId);
         showPopup('edit_saved_popup');
+    } else if (e.target.closest('.copy-saved-id')) {
+        const target = e.target.closest('.saved-id');
+        navigator.clipboard.writeText(target.dataset.floId)
+        target.dispatchEvent(
+            new CustomEvent('copy', {
+                bubbles: true,
+                cancelable: true,
+            })
+        );
     } else {
         const target = e.target.closest('.saved-id');
         window.location.hash = `#/contact?floId=${target.dataset.floId}`;
     }
 });
+function saveChanges() {
+    const floID = getRef('edit_saved_id').value;
+    let title = getRef('get_new_title').value.trim();
+    if (title == '')
+        title = 'Unknown';
+    floGlobals.savedIds[floID] = { title }
+    syncSavedIds().then(() => {
+        const potentialTarget = getRef('saved_ids_list').querySelector(`.saved-id[data-flo-id="${floID}"]`)
+        if (potentialTarget) {
+            potentialTarget.querySelector('.saved-id__title').textContent = title;
+            potentialTarget.querySelector('.saved-id__initials').textContent = title.charAt(0).toUpperCase();
+            // place the renamed card in alphabetically correct position
+            const clone = potentialTarget.cloneNode(true);
+            potentialTarget.remove();
+            insertElementAlphabetically(title, clone)
+        }
+        hidePopup();
+    }).catch(error => {
+        notify(error, 'error');
+    })
+}
 function deleteSaved() {
     getConfirmation('Do you want delete this FLO ID?', {
         confirmText: 'Delete',
@@ -406,6 +449,27 @@ function deleteSaved() {
         }
     });
 }
+const savedIdsObserver = new MutationObserver((mutationList) => {
+    mutationList.forEach(mutation => {
+        getRef('saved_ids_tip').textContent = mutation.target.children.length === 0 ? `Click 'Add FLO ID' to add a new FLO ID.` : `Tap on saved IDs to see transaction history.`
+    })
+})
+
+savedIdsObserver.observe(getRef('saved_ids_list'), {
+    childList: true,
+})
+function insertElementAlphabetically(name, elementToInsert) {
+    const elementInserted = [...getRef('saved_ids_list').children].some(child => {
+        const floID = child.dataset.floId;
+        if (floGlobals.savedIds[floID].title.localeCompare(name) > 0) {
+            child.before(elementToInsert)
+            return true
+        }
+    })
+    if (!elementInserted) {
+        getRef('saved_ids_list').append(elementToInsert)
+    }
+}
 
 function executeUserAction() {
     const floID = getRef('tt_flo_id').value.trim(),
diff --git a/scripts/std_ui.js b/scripts/std_ui.js
index c06a348..c129e7a 100644
--- a/scripts/std_ui.js
+++ b/scripts/std_ui.js
@@ -5,6 +5,7 @@ const currentYear = new Date().getFullYear();
 let paymentsHistoryLoader = null;
 let walletHistoryLoader = null;
 let contactHistoryLoader = null;
+let paymentRequestsLoader = null;
 
 //Checks for internet connection status
 if (!navigator.onLine)
@@ -350,12 +351,33 @@ async function showPage(targetPage, options = {}) {
             })
             break;
         case 'requests':
-            const frag = document.createDocumentFragment();
-            for (let transactionID in User.moneyRequests) {
-                frag.prepend(render.paymentRequestCard(User.moneyRequests[transactionID]));
+            const paymentRequests = []
+            if (paymentRequestsLoader)
+                paymentRequestsLoader.clear()
+
+            const pendingPaymentRequests = document.createDocumentFragment()
+            let arePaymentsPending = false
+            for (const transactionId in User.moneyRequests) {
+                if (!User.moneyRequests[transactionId].note) {
+                    arePaymentsPending = true
+                    pendingPaymentRequests.prepend(render.paymentRequestCard(User.moneyRequests[transactionId]))
+                } else {
+                    paymentRequests.unshift(User.moneyRequests[transactionId])
+                }
             }
-            getRef('user-money-requests').innerHTML = '';
-            getRef('user-money-requests').prepend(frag);
+            if (arePaymentsPending) {
+                getRef('pending_payment_requests').innerHTML = ''
+                getRef('pending_payment_requests').append(pendingPaymentRequests)
+                getRef('pending_payment_requests').parentNode.classList.remove('hide')
+            } else {
+                getRef('pending_payment_requests').parentNode.classList.add('hide')
+            }
+            if (paymentRequestsLoader) {
+                paymentRequestsLoader.update(paymentRequests)
+            } else {
+                paymentRequestsLoader = new LazyLoader('#payment_request_history', paymentRequests, render.paymentRequestCard);
+            }
+            paymentRequestsLoader.init()
             break;
         case 'wallet':
             const walletTransactions = []
@@ -386,6 +408,29 @@ async function showPage(targetPage, options = {}) {
             }
             walletHistoryLoader.init()
             break;
+        case 'transaction':
+            let transactionDetails
+            let status
+            switch (params.type) {
+                case 'request':
+                    transactionDetails = User.moneyRequests[params.transactionId]
+                    status = transactionDetails.note ? transactionDetails.note.split(':')[0] : 'PENDING';
+                    getRef('transaction__type').textContent = 'Payment request'
+                    break;
+                case 'wallet':
+                    transactionDetails = User.cashierRequests[params.transactionId]
+                    const { message: { mode }, note, tag } = transactionDetails
+                    status = tag ? tag : (note ? 'REJECTED' : "PENDING");
+                    getRef('transaction__type').textContent = mode === 'cash-to-token' ? 'Deposit' : 'Withdraw';
+
+                    break;
+            }
+            const { message: { amount, remark }, note, senderID, receiverID, time } = transactionDetails
+            console.log(transactionDetails)
+            getRef('transaction__time').textContent = getFormattedTime(time)
+            getRef('transaction__amount').textContent = formatAmount(amount)
+            getRef('transaction__status').textContent = status
+            break;
         default:
             break;
     }