diff --git a/css/main.css b/css/main.css
index 1b8de75..ce6da9a 100644
--- a/css/main.css
+++ b/css/main.css
@@ -26,16 +26,12 @@ body {
 }
 
 body[data-theme=dark] {
-  --accent-color:#d7b5ff;
+  --accent-color:#c64aff;
   --text-color: 240, 240, 240;
   --text-color-light: 170, 170, 170;
   --foreground-color: 20, 20, 20;
   --error-color: rgb(255, 106, 106);
 }
-body[data-theme=dark] .contact-card {
-  margin: 0.2rem 0;
-  box-shadow: 0 0.1rem 0.5rem rgba(var(--text-color), 0.1);
-}
 
 button {
   position: relative;
@@ -57,6 +53,10 @@ sm-textarea {
   --border-radius: 0.5rem;
 }
 
+ul {
+  list-style: none;
+}
+
 .flex {
   display: flex;
 }
@@ -98,6 +98,13 @@ sm-textarea {
   transform: none !important;
 }
 
+.overflow-ellipsis {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .ripple {
   position: absolute;
   border-radius: 50%;
@@ -162,8 +169,68 @@ sm-textarea {
   width: 2rem;
 }
 
+.initial {
+  display: flex;
+  text-align: center;
+  user-select: none;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(var(--text-color), 0.1);
+}
+
+#contact_popup {
+  --body-padding: 0;
+}
+
+#contact_popup__initial {
+  align-self: center;
+  width: 5rem;
+  height: 5rem;
+  padding: 1rem;
+  margin: 4rem 0 1rem 0;
+  font-size: 2rem;
+  border-radius: 1.5rem;
+}
+
+#contact_popup__name {
+  align-self: center;
+  font-weight: 700;
+  font-size: 1.2rem;
+}
+
+.flo-id-grid {
+  gap: 0.5rem;
+  padding: 0 1.5rem;
+  grid-template-columns: 1fr auto;
+  margin-bottom: 1rem;
+}
+
+.copy-button {
+  padding: 0.4rem;
+}
+
+#contact_popup__options {
+  padding: 1rem 0;
+}
+
+.contact__option {
+  font-size: 1rem;
+  padding: 0.8rem 1.5rem;
+  font-weight: 500;
+  color: rgba(var(--text-color), 0.8);
+}
+
+.button__icon {
+  fill: rgba(var(--text-color), 0.7);
+}
+
+.button__title {
+  margin-left: 1rem;
+}
+
 #main_card {
   height: 100%;
+  width: 100%;
   grid-row: 1/3;
   background: rgba(var(--foreground-color), 0.9);
 }
@@ -214,6 +281,7 @@ sm-textarea {
 }
 
 .navbar__item {
+  position: relative;
   display: flex;
   align-items: center;
   padding: 0.8rem;
@@ -258,6 +326,7 @@ sm-textarea {
 }
 
 #base_header {
+  position: relative;
   width: 100%;
 }
 
@@ -267,13 +336,7 @@ sm-textarea {
   color: rgba(var(--text-color), 0.8);
 }
 
-#send_flo_form {
-  padding: 0 1rem;
-  gap: 1rem;
-}
-
-#search_contacts {
-  width: 14rem;
+z #search_contacts {
   --padding: 0.5rem 0.6rem;
   --background: rgba(var(--text-color), 0.1);
 }
@@ -282,8 +345,8 @@ sm-textarea {
   height: 1.2rem;
 }
 
-#selected_contact_options {
-  list-style: none;
+.expanding-search {
+  width: 14rem;
 }
 
 .contact-option:not(:last-of-type) {
@@ -318,9 +381,8 @@ sm-textarea {
   display: flex;
   flex-wrap: wrap;
   height: 100%;
-  min-height: 0;
   overflow-y: auto;
-  list-style: none;
+  min-height: 0;
   align-content: flex-start;
   padding: 0 0 6rem 1rem;
   grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
@@ -331,17 +393,19 @@ sm-textarea {
   overflow: hidden;
   display: flex;
   width: calc(50% - 1rem);
+  aspect-ratio: 1/1;
   flex-direction: column;
   align-items: center;
   margin: 0 1rem 1rem 0;
   padding: 1.5rem 1rem;
   flex-shrink: 0;
   cursor: pointer;
+  user-select: none;
   align-self: flex-start;
   justify-content: center;
   border-radius: 0.5rem;
-  background: rgba(var(--foreground-color), 1);
-  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
+  background: rgba(var(--foreground-color), 0.6);
+  box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -360,23 +424,14 @@ sm-textarea {
 .contact-card__initial {
   width: 3rem;
   height: 3rem;
-  display: flex;
   padding: 1.5rem;
   font-size: 1.2rem;
-  text-align: center;
-  user-select: none;
   border-radius: 1rem;
   margin: 1.5rem 0;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(var(--text-color), 0.1);
 }
 
 .contact-card__name {
   text-align: center;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   font-weight: 500;
   font-size: 1rem;
   color: rgba(var(--text-color), 0.8);
@@ -405,11 +460,49 @@ sm-textarea {
   font-size: 1.1rem;
 }
 
+#send_flo_form {
+  padding: 0 1rem;
+  gap: 1rem;
+}
+
+#balance_card {
+  width: min(22rem, calc(100% - 2rem));
+  padding: 1rem;
+  margin: 1rem;
+  border-radius: 0.3rem;
+}
+
+#balance_card__input {
+  margin-bottom: 1rem;
+}
+
+.balance_card__title {
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
+  color: rgba(var(--text-color), 0.8);
+}
+
+.balance_card__description {
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+  color: rgba(var(--text-color), 0.8);
+}
+
+#flo_balance {
+  font-size: 3rem;
+  margin: 2rem 0 1rem 0;
+}
+
 @media all and (max-width: 640px) {
+  .hide-on-mobile {
+    display: none;
+  }
+
   #main_card {
     min-height: 100%;
     grid-template-rows: auto 1fr auto;
     grid-template-areas: "header" "page" "nav";
+    background: rgba(var(--foreground-color), 1);
   }
 
   #main_navbar {
@@ -428,6 +521,21 @@ sm-textarea {
   .navbar__item__icon {
     margin: 0 0 0.5rem 0;
   }
+
+  #dashboard_page__header {
+    padding-top: 0;
+  }
+
+  .expanding-search {
+    background-color: rgba(var(--foreground-color), 1);
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+  }
+
+  .back-button {
+    margin-right: 1rem;
+  }
 }
 @media all and (min-width: 640px) {
   body {
@@ -441,6 +549,10 @@ sm-textarea {
     --width: 24rem;
   }
 
+  .hide-on-desktop {
+    display: none;
+  }
+
   .popup__header {
     padding: 1rem 1.5rem 0 1rem;
   }
@@ -502,15 +614,16 @@ sm-textarea {
     margin: 2rem;
   }
 }
+@media all and (min-width: 1080px) {
+  .contact-card {
+    width: calc(33.33% - 1rem);
+  }
+}
 @media all and (min-width: 1280px) {
   #main_card {
     width: 65vw;
     height: 85vh;
   }
-
-  .contact-card {
-    width: calc(33.33% - 1rem);
-  }
 }
 @media all and (min-width: 1920px) {
   #main_card {
diff --git a/css/main.min.css b/css/main.min.css
index 605820d..2e72ab2 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-.contact-card,.interact,button{cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:hidden}*,::after,::before{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{height:100%;font-size:clamp(1rem,1.2vmax,3rem);--ease-in-overshhot:cubic-bezier(0.6, -0.28, 0.735, 0.045);--ease-out-overshhot:cubic-bezier(0.175, 0.885, 0.32, 1.275)}body{--accent-color:#6300d4;--text-color:17,17,17;--text-color-light:100,100,100;--foreground-color:255,255,255;--background-color:#efefef;--error-color:red;color:rgba(var(--text-color),1);height:calc(100%)}body[data-theme=dark]{--accent-color:#d7b5ff;--text-color:240,240,240;--text-color-light:170,170,170;--foreground-color:20,20,20;--error-color:rgb(255, 106, 106)}body[data-theme=dark] .contact-card{margin:.2rem 0;box-shadow:0 .1rem .5rem rgba(var(--text-color),.1)}button{position:relative;display:inline-flex;border:none;background:0 0;outline:0}button:focus-visible{outline:solid rgba(var(--text-color),1)}sm-input,sm-textarea{--border-radius:0.5rem}.flex{display:flex}.grid{display:grid}.align-center{align-items:center}#confirmation_popup,#prompt_popup,.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.full-width{width:100%}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.no-transformations{transform:none!important}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.2);pointer-events:none}.interact,.page{position:relative}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.7)}#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}.popup__header{padding:.5rem 1.5rem 0 1rem;display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:center;width:100%}.popup__header__close{padding:.5rem;cursor:pointer}.close-icon{height:2rem;width:2rem}#main_card{height:100%;grid-row:1/3;background:rgba(var(--foreground-color),.9)}#main_header{grid-area:header;height:max-content;gap:.2rem .5rem;padding:1rem .7rem 1rem 1rem;grid-template-columns:1fr auto;grid-template-areas:"company setting" "app setting"}#page_container{grid-area:page}.page{display:flex;flex-direction:column;height:100%;width:100%}.header__company-name{grid-area:company;font-weight:500;color:rgba(var(--text-color),.7);align-self:flex-end}.header__app-name{align-self:flex-start;line-height:1;grid-area:app;font-weight:700;color:rgba(var(--text-color),.9)}.header__settings-button{grid-area:setting;padding:.8rem}#main_navbar{grid-area:nav}.navbar__item{display:flex;align-items:center;padding:.8rem;border-radius:.5rem}.navbar__item--active .navbar__item__icon{fill:var(--accent-color)}.navbar__item--active .navbar__item__title{color:var(--accent-color)}.navbar__item__icon{margin-right:1rem;fill:rgba(var(--text-color),.7)}.navbar__item__title{font-size:.85rem;font-weight:500;color:rgba(var(--text-color),.7)}.fab{position:absolute;display:inline-flex;border-radius:5rem;aspect-ratio:1/1;padding:.7rem;background:#FF1F1F;box-shadow:0 .5rem .5rem rgba(0,0,0,.16)}.fab__icon{height:1.8rem;width:1.8rem;fill:#fff}#dashboard_page__header{height:7.5rem}#base_header{width:100%}.header__title{font-size:1.1rem;font-weight:700;color:rgba(var(--text-color),.8)}.contact-card__name,.contact-option__name{font-weight:500;color:rgba(var(--text-color),.8)}#send_flo_form{padding:0 1rem;gap:1rem}#search_contacts{width:14rem;--padding:0.5rem 0.6rem;--background:rgba(var(--text-color), 0.1)}.search__icon{height:1.2rem}#selected_contact_options{list-style:none}.contact-option:not(:last-of-type){margin-right:.5rem}.contact-option:first-of-type{padding-right:.6rem;margin-right:auto;margin-left:-.6rem}.contact-option__button{display:inline-flex;align-items:center;border-radius:.3rem;padding:.5rem .6rem}.contact-option__icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.contact-option__name{font-size:.9rem}#contacts_container{display:flex;flex-wrap:wrap;height:100%;min-height:0;overflow-y:auto;list-style:none;align-content:flex-start;padding:0 0 6rem 1rem;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))}.contact-card{position:relative;display:flex;width:calc(50% - 1rem);flex-direction:column;align-items:center;margin:0 1rem 1rem 0;padding:1.5rem 1rem;flex-shrink:0;align-self:flex-start;justify-content:center;border-radius:.5rem;background:rgba(var(--foreground-color),1);box-shadow:0 .2rem .4rem rgba(0,0,0,.06)}.contact-hidden-options{position:absolute;width:100%;top:0;padding:.5rem .8rem}.contact-card__checkbox{--border-radius:0.5rem;--border-color:rgba(var(--text-color), 0.6)}.contact-card__initial{width:3rem;height:3rem;display:flex;padding:1.5rem;font-size:1.2rem;text-align:center;user-select:none;border-radius:1rem;margin:1.5rem 0;align-items:center;justify-content:center;background-color:rgba(var(--text-color),.1)}.contact-card__name{text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:1rem}.contact-card__more{padding:.4rem}.more-icon{height:1.2rem;width:1.2rem}#add_contact_button{right:0;bottom:0;margin:1.5rem}.page__header{padding:1rem 1rem 2rem}.page__title{font-size:1.1rem}@media all and (max-width:640px){#main_card{min-height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"header" "page" "nav"}#main_navbar{flex-direction:row}.navbar__item{flex:1;flex-direction:column}.navbar__item__icon{margin:0 0 .5rem}}@media all and (min-width:640px){body{align-items:center;justify-content:center;background:url(lighthouse.svg) center no-repeat;background-size:cover}sm-popup{--width:24rem}.popup__header{padding:1rem 1.5rem 0 1rem}#main_card{position:relative;width:80vw;height:80vh;border-radius:.5rem;overflow:hidden;backdrop-filter:blur(1rem);grid-template-columns:15rem 1fr;grid-template-rows:min-content 1fr;grid-template-areas:"header page" "nav page";box-shadow:0 1.5rem 1.5rem rgba(0,0,0,.16)}#main_header{padding:1.5rem 1.2rem 1.5rem 2rem}#main_navbar{flex-direction:column;height:100%;padding:0 1rem;align-content:flex-start}.navbar__item__title{font-size:.9rem}#page_container{position:relative;grid-row:1/3}#page_container::after{content:"";position:absolute;left:0;height:65%;width:1px;background:rgba(var(--text-color),.2);top:50%;transform:translateY(-50%)}.page__header{padding:1.5rem}#contacts_container{padding:0 1rem 8rem 2rem}#add_contact_button{right:0;bottom:0;margin:2rem}}@media all and (min-width:1280px){#main_card{width:65vw;height:85vh}.contact-card{width:calc(33.33% - 1rem)}}@media all and (min-width:1920px){#main_card{width:60vw;height:65vh}}@media (any-hover:hover){.contact-card__checkbox:not([checked]):not(:focus-within),.contact-card__more:not(:focus-within){opacity:0;transition:opacity .3s}.contact-card:hover .contact-card__checkbox,.contact-card:hover .contact-card__more{opacity:1}.contact-option__button{transition:background .3s}.contact-option__button:hover{background-color:rgba(var(--text-color),.1)}}
\ No newline at end of file
+.interact,.overflow-ellipsis,button{overflow:hidden}.contact-card,.interact,button{cursor:pointer;-webkit-tap-highlight-color:transparent}.button__icon,.icon{fill:rgba(var(--text-color),.7)}*,::after,::before{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{height:100%;font-size:clamp(1rem,1.2vmax,3rem);--ease-in-overshhot:cubic-bezier(0.6, -0.28, 0.735, 0.045);--ease-out-overshhot:cubic-bezier(0.175, 0.885, 0.32, 1.275)}body{--accent-color:#6300d4;--text-color:17,17,17;--text-color-light:100,100,100;--foreground-color:255,255,255;--background-color:#efefef;--error-color:red;color:rgba(var(--text-color),1);height:calc(100%)}body[data-theme=dark]{--accent-color:#c64aff;--text-color:240,240,240;--text-color-light:170,170,170;--foreground-color:20,20,20;--error-color:rgb(255, 106, 106)}button{position:relative;display:inline-flex;border:none;background:0 0;outline:0}button:focus-visible{outline:solid rgba(var(--text-color),1)}sm-input,sm-textarea{--border-radius:0.5rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.align-center{align-items:center}#confirmation_popup,#prompt_popup,.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.full-width{width:100%}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;white-space:nowrap;text-overflow:ellipsis}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.2);pointer-events:none}.interact,.navbar__item,.page{position:relative}.icon{width:1.5rem;height:1.5rem}#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}.popup__header{padding:.5rem 1.5rem 0 1rem;display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:center;width:100%}.popup__header__close{padding:.5rem;cursor:pointer}.close-icon{height:2rem;width:2rem}.initial{display:flex;text-align:center;user-select:none;align-items:center;justify-content:center;background-color:rgba(var(--text-color),.1)}#contact_popup{--body-padding:0}#contact_popup__initial{align-self:center;width:5rem;height:5rem;padding:1rem;margin:4rem 0 1rem;font-size:2rem;border-radius:1.5rem}#contact_popup__name{align-self:center;font-weight:700;font-size:1.2rem}.flo-id-grid{gap:.5rem;padding:0 1.5rem;grid-template-columns:1fr auto;margin-bottom:1rem}.copy-button{padding:.4rem}#contact_popup__options{padding:1rem 0}.contact__option{font-size:1rem;padding:.8rem 1.5rem;font-weight:500;color:rgba(var(--text-color),.8)}.button__title{margin-left:1rem}#main_card{height:100%;width:100%;grid-row:1/3;background:rgba(var(--foreground-color),.9)}#main_header{grid-area:header;height:max-content;gap:.2rem .5rem;padding:1rem .7rem 1rem 1rem;grid-template-columns:1fr auto;grid-template-areas:"company setting" "app setting"}#page_container{grid-area:page}.page{display:flex;flex-direction:column;height:100%;width:100%}.header__company-name{grid-area:company;font-weight:500;color:rgba(var(--text-color),.7);align-self:flex-end}.header__app-name{align-self:flex-start;line-height:1;grid-area:app;font-weight:700;color:rgba(var(--text-color),.9)}.header__settings-button{grid-area:setting;padding:.8rem}#main_navbar{grid-area:nav}.navbar__item{display:flex;align-items:center;padding:.8rem;border-radius:.5rem}.navbar__item--active .navbar__item__icon{fill:var(--accent-color)}.navbar__item--active .navbar__item__title{color:var(--accent-color)}.navbar__item__icon{margin-right:1rem;fill:rgba(var(--text-color),.7)}.navbar__item__title{font-size:.85rem;font-weight:500;color:rgba(var(--text-color),.7)}.fab{position:absolute;display:inline-flex;border-radius:5rem;aspect-ratio:1/1;padding:.7rem;background:#FF1F1F;box-shadow:0 .5rem .5rem rgba(0,0,0,.16)}.fab__icon{height:1.8rem;width:1.8rem;fill:#fff}#dashboard_page__header{height:7.5rem}#base_header{position:relative;width:100%}.header__title{font-size:1.1rem;font-weight:700;color:rgba(var(--text-color),.8)}.contact-card__name,.contact-option__name{font-weight:500;color:rgba(var(--text-color),.8)}z #search_contacts{--padding:0.5rem 0.6rem;--background:rgba(var(--text-color), 0.1)}.search__icon{height:1.2rem}.expanding-search{width:14rem}.contact-option:not(:last-of-type){margin-right:.5rem}.contact-option:first-of-type{padding-right:.6rem;margin-right:auto;margin-left:-.6rem}.contact-option__button{display:inline-flex;align-items:center;border-radius:.3rem;padding:.5rem .6rem}.contact-option__icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.contact-option__name{font-size:.9rem}#contacts_container{display:flex;flex-wrap:wrap;height:100%;overflow-y:auto;min-height:0;align-content:flex-start;padding:0 0 6rem 1rem;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))}.contact-card{position:relative;overflow:hidden;display:flex;width:calc(50% - 1rem);aspect-ratio:1/1;flex-direction:column;align-items:center;margin:0 1rem 1rem 0;padding:1.5rem 1rem;flex-shrink:0;user-select:none;align-self:flex-start;justify-content:center;border-radius:.5rem;background:rgba(var(--foreground-color),.6);box-shadow:0 0 0 1px rgba(var(--text-color),.2) inset}.contact-hidden-options{position:absolute;width:100%;top:0;padding:.5rem .8rem}.contact-card__checkbox{--border-radius:0.5rem;--border-color:rgba(var(--text-color), 0.6)}.contact-card__initial{width:3rem;height:3rem;padding:1.5rem;font-size:1.2rem;border-radius:1rem;margin:1.5rem 0}.contact-card__name{text-align:center;font-size:1rem}.balance_card__title,.page__title{font-size:1.1rem}.contact-card__more{padding:.4rem}.more-icon{height:1.2rem;width:1.2rem}#add_contact_button{right:0;bottom:0;margin:1.5rem}.page__header{padding:1rem 1rem 2rem}#send_flo_form{padding:0 1rem;gap:1rem}#balance_card{width:min(22rem,calc(100% - 2rem));padding:1rem;margin:1rem;border-radius:.3rem}#balance_card__input{margin-bottom:1rem}.balance_card__description,.balance_card__title{margin-bottom:.5rem;color:rgba(var(--text-color),.8)}.balance_card__description{font-size:.9rem}#flo_balance{font-size:3rem;margin:2rem 0 1rem}@media all and (max-width:640px){.hide-on-mobile{display:none}#main_card{min-height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"header" "page" "nav";background:rgba(var(--foreground-color),1)}#main_navbar{flex-direction:row}.navbar__item{flex:1;flex-direction:column}.navbar__item__icon{margin:0 0 .5rem}#dashboard_page__header{padding-top:0}.expanding-search{background-color:rgba(var(--foreground-color),1);position:absolute;z-index:1;width:100%}.back-button{margin-right:1rem}}@media all and (min-width:640px){body{align-items:center;justify-content:center;background:url(lighthouse.svg) center no-repeat;background-size:cover}sm-popup{--width:24rem}.hide-on-desktop{display:none}.popup__header{padding:1rem 1.5rem 0 1rem}#main_card{position:relative;width:80vw;height:80vh;border-radius:.5rem;overflow:hidden;backdrop-filter:blur(1rem);grid-template-columns:15rem 1fr;grid-template-rows:min-content 1fr;grid-template-areas:"header page" "nav page";box-shadow:0 1.5rem 1.5rem rgba(0,0,0,.16)}#main_header{padding:1.5rem 1.2rem 1.5rem 2rem}#main_navbar{flex-direction:column;height:100%;padding:0 1rem;align-content:flex-start}.navbar__item__title{font-size:.9rem}#page_container{position:relative;grid-row:1/3}#page_container::after{content:"";position:absolute;left:0;height:65%;width:1px;background:rgba(var(--text-color),.2);top:50%;transform:translateY(-50%)}.page__header{padding:1.5rem}#contacts_container{padding:0 1rem 8rem 2rem}#add_contact_button{right:0;bottom:0;margin:2rem}}@media all and (min-width:1080px){.contact-card{width:calc(33.33% - 1rem)}}@media all and (min-width:1280px){#main_card{width:65vw;height:85vh}}@media all and (min-width:1920px){#main_card{width:60vw;height:65vh}}@media (any-hover:hover){.contact-card__checkbox:not([checked]):not(:focus-within),.contact-card__more:not(:focus-within){opacity:0;transition:opacity .3s}.contact-card:hover .contact-card__checkbox,.contact-card:hover .contact-card__more{opacity:1}.contact-option__button{transition:background .3s}.contact-option__button:hover{background-color:rgba(var(--text-color),.1)}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index afd6042..2f39e1f 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -23,15 +23,11 @@ body{
     height: calc(100%);
 }
 body[data-theme='dark']{
-    --accent-color:#d7b5ff;
+    --accent-color:#c64aff;
     --text-color: 240, 240, 240;
     --text-color-light: 170, 170, 170;
     --foreground-color: 20, 20, 20;
     --error-color: rgb(255, 106, 106);
-    .contact-card{
-        margin: 0.2rem 0;
-        box-shadow: 0 0.1rem 0.5rem rgba(var(--text-color), 0.1);
-    }
 }
 button{
     position: relative;
@@ -50,6 +46,9 @@ sm-input,
 sm-textarea{
     --border-radius: 0.5rem;
 }
+ul{
+    list-style: none;
+}
 .flex{
     display: flex;
 }
@@ -81,6 +80,12 @@ sm-textarea{
 .no-transformations{
     transform: none !important;
 }
+.overflow-ellipsis{
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
 .ripple{
     position: absolute;
     border-radius: 50%;
@@ -134,8 +139,63 @@ sm-textarea{
     height: 2rem;
     width: 2rem;
 }
+.initial{
+    display: flex;
+    text-align: center;
+    user-select: none;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(var(--text-color), 0.1);
+}
+
+#contact_popup{
+    --body-padding: 0;
+}
+#contact_popup__initial{
+    align-self: center;
+    width: 5rem;
+    height: 5rem;
+    padding: 1rem;
+    margin: 4rem 0 1rem 0;
+    font-size: 2rem;
+    border-radius: 1.5rem;
+}
+#contact_popup__name{
+    align-self: center;
+    font-weight: 700;
+    font-size: 1.2rem;
+}
+.flo-id-grid{
+    gap: 0.5rem;
+    padding: 0 1.5rem;
+    grid-template-columns: 1fr auto;
+    margin-bottom: 1rem;
+}
+#contact__flo_id{
+}
+.copy-button{
+    padding: 0.4rem;
+}
+#contact_popup__options{
+    padding: 1rem 0;
+}
+.contact__option{
+    font-size: 1rem;
+    padding: 0.8rem 1.5rem;
+    font-weight: 500;
+    color: rgba(var(--text-color), 0.8);
+}
+.button__icon{
+    fill: rgba(var(--text-color), 0.7);
+}
+.button__title{
+    margin-left: 1rem;
+}
+
+
 #main_card{
     height: 100%;
+    width: 100%;
     grid-row: 1/3;
     background: rgba(var(--foreground-color), 0.9);
 }
@@ -178,6 +238,7 @@ sm-textarea{
     grid-area: nav;
 }
 .navbar__item{
+    position: relative;
     display: flex;
     align-items: center;
     padding: 0.8rem;
@@ -221,6 +282,7 @@ sm-textarea{
     height: 7.5rem;
 }
 #base_header{
+    position: relative;
     width: 100%;
 }
 .header__title{
@@ -228,22 +290,22 @@ sm-textarea{
     font-weight: 700;
     color: rgba(var(--text-color), 0.8);
 }
-#send_flo_form{
-    padding: 0 1rem;
-    gap: 1rem;
-}
+
+z
 
 
 #search_contacts{
-    width: 14rem;
     --padding: 0.5rem 0.6rem;
     --background: rgba(var(--text-color), 0.1);
 }
 .search__icon{
     height: 1.2rem;
 }
+.expanding-search{
+    width: 14rem;
+}
 #selected_contact_options{
-    list-style: none;
+
 }
 .contact-option{
     &:not(:last-of-type){
@@ -276,9 +338,8 @@ sm-textarea{
     display: flex;
     flex-wrap: wrap;
     height: 100%;
-    min-height: 0;
     overflow-y: auto;
-    list-style: none;
+    min-height: 0;
     align-content: flex-start;
     padding: 0 0 6rem 1rem;
     grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
@@ -288,17 +349,20 @@ sm-textarea{
     overflow: hidden;
     display: flex;
     width: calc(50% - 1rem);
+    aspect-ratio: 1/1;
     flex-direction: column;
     align-items: center;
     margin: 0 1rem 1rem 0;
     padding: 1.5rem 1rem;
     flex-shrink: 0;
     cursor: pointer;
+    user-select: none;
     align-self: flex-start;
     justify-content: center;
     border-radius: 0.5rem;
-    background: rgba(var(--foreground-color), 1);
-    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
+    background: rgba(var(--foreground-color), 0.6);
+    // box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
+    box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
     -webkit-tap-highlight-color: transparent;
 }
 .contact-hidden-options{
@@ -314,22 +378,13 @@ sm-textarea{
 .contact-card__initial{
     width: 3rem;
     height: 3rem;
-    display: flex;
     padding: 1.5rem;
     font-size: 1.2rem;
-    text-align: center;
-    user-select: none;
     border-radius: 1rem;
     margin: 1.5rem 0;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(var(--text-color), 0.1);
 }
 .contact-card__name{
     text-align: center;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
     font-weight: 500;
     font-size: 1rem;
     color: rgba(var(--text-color), 0.8);
@@ -355,12 +410,47 @@ sm-textarea{
     font-size: 1.1rem;
 }
 
+#send_flo_form{
+    padding: 0 1rem;
+    gap: 1rem;
+}
+
+
+
+#balance_card{
+    width: min(22rem, calc(100% - 2rem));
+    padding: 1rem;
+    margin: 1rem;
+    border-radius: 0.3rem;
+}
+#balance_card__input{
+    margin-bottom: 1rem;
+}
+.balance_card__title{
+    font-size: 1.1rem;
+    margin-bottom: 0.5rem;
+    color: rgba(var(--text-color), 0.8);
+}
+.balance_card__description{
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+    color: rgba(var(--text-color), 0.8);
+}
+#flo_balance{
+    font-size: 3rem;
+    margin: 2rem 0 1rem 0;
+}
+
 // mobile only styles
 @media all and (max-width: 640px){
+    .hide-on-mobile{
+        display: none;
+    }
     #main_card{
         min-height: 100%;
         grid-template-rows: auto 1fr auto;
         grid-template-areas: 'header' 'page' 'nav';
+        background: rgba(var(--foreground-color), 1);
     }
     #main_navbar{
         flex-direction: row;
@@ -375,6 +465,18 @@ sm-textarea{
     .navbar__item__icon{
         margin: 0 0 0.5rem 0;
     }
+    #dashboard_page__header{
+        padding-top: 0;
+    }
+    .expanding-search{
+        background-color: rgba(var(--foreground-color), 1);
+        position: absolute;
+        z-index: 1;
+        width: 100%;
+    }
+    .back-button{
+        margin-right: 1rem;
+    }
 }
 
 // desktop only styles
@@ -388,6 +490,9 @@ sm-textarea{
     sm-popup{
         --width: 24rem;
     }
+    .hide-on-desktop{
+        display: none;
+    }
     .popup__header{
         padding: 1rem 1.5rem 0 1rem;
     }
@@ -441,14 +546,16 @@ sm-textarea{
         margin: 2rem;
     }
 }
+@media all and (min-width: 1080px){
+    .contact-card{
+        width: calc(33.33% - 1rem);
+    }
+}
 @media all and (min-width: 1280px){
     #main_card{
         width: 65vw;
         height: 85vh;
     }
-    .contact-card{
-        width: calc(33.33% - 1rem);
-    }
 }
 @media all and (min-width: 1920px){
     #main_card{
diff --git a/new.html b/new.html
index e72bdde..73fd48e 100644
--- a/new.html
+++ b/new.html
@@ -36,10 +36,27 @@
     <sm-notifications id="notification_drawer"></sm-notifications>
 
     <sm-popup id="contact_popup">
-        <h3 id="contact_popup__initial">S</h3>
-        <h4 id="contact_popup__name">Sairaj Mote</h4>
+        <h3 id="contact_popup__initial" class="initial">S</h3>
+        <text-field id="contact_popup__name" value="Sairaj mote"></text-field>
+        <div class="grid flo-id-grid align-center">
+            <p id="contact__flo_id" class="overflow-ellipsis">FFS5hFXG7DBtdgzrLwixZLpenAmsCKRddm</p>
+            <button class="flex align-center copy-button" title="Copy FLO address">
+                <svg class="icon button__icon copy-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2zm-2 5v2h6v-2H7zm0 4v2h6v-2H7z"/></svg>
+            </button>
+        </div>
         <ul id="contact_popup__options">
-
+            <li>
+                <button class="contact__option flex align-center full-width">
+                    <svg class="icon button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"/></svg>
+                    <span class="button__title">Send FLO</span>
+                </button>
+            </li>
+            <li>
+                <button class="contact__option flex align-center full-width">
+                    <svg class="icon button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.67,3.25H15.26L14,2H10L8.74,3.25H3.67V4.92H5.33V20.33A1.67,1.67,0,0,0,7,22H17a1.67,1.67,0,0,0,1.67-1.67V4.92h1.66V3.25Z"/></svg>
+                    <span class="button__title">Delete</span>
+                </button>
+            </li>
         </ul>
     </sm-popup>
 
@@ -62,7 +79,7 @@
                 <svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"/></svg>
                 <span class="navbar__item__title">Send FLO</span>
             </button>
-            <button id="check_balance_button" class="navbar__item">    
+            <button id="check_balance_page_button" class="navbar__item"  data-target-page="check_balance_page">    
                 <svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2 9h19a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9zm1-6h15v4H2V4a1 1 0 0 1 1-1zm12 11v2h3v-2h-3z"/></svg>               
                 <span class="navbar__item__title">Check balance</span>
             </button>
@@ -80,14 +97,16 @@
                 <header id="dashboard_page__header" class="page__header flex align-center">
                     <div id="base_header" class="flex space-between align-center">
                         <h4 class="header__title">Saved addresses</h4>
-                        <button class="back-button">
+                        <button id="search_contacts_button" class="back-button hide-on-desktop" onclick="searchBox('search_contacts', true)">
                             <svg class="icon search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/></svg>
                         </button>                            
-                        <div class="expanding-search flex align-center hide-completely">
-                            <button class="back-button">
+                        <div id="search_contacts" class="expanding-search flex align-center hide-on-mobile" data-trigger="search_contacts_button">
+                            <button id="hide_search_contacts" class="back-button hide-on-desktop" onclick="searchBox('search_contacts', false)">
                                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg>
                             </button>                            
-                            <sm-input id="search_contacts" placeholder="Search" type="search"></sm-input>
+                            <sm-input id="search_contacts__input" placeholder="Search" type="search">                           
+                                <svg slot="icon" class="icon search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/></svg>
+                            </sm-input>
                         </div>
                     </div>
                     <ul id="selected_contact_options" class="flex align-center full-width hide-completely">
@@ -97,12 +116,6 @@
                                 <span id="selected_contacts_total" class="contact-option__name"></span>
                             </button>
                         </li>
-                        <li class="contact-option">
-                            <button class="contact-option__button">
-                                <svg class="icon contact-option__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12.9 6.858l4.242 4.243L7.242 21H3v-4.243l9.9-9.9zm1.414-1.414l2.121-2.122a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414l-2.122 2.121-4.242-4.242z"/></svg>
-                                <span class="contact-option__name">Edit</span>
-                            </button>
-                        </li>
                         <li class="contact-option">
                             <button class="contact-option__button">
                                 <svg class="icon contact-option__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.67,3.25H15.26L14,2H10L8.74,3.25H3.67V4.92H5.33V20.33A1.67,1.67,0,0,0,7,22H17a1.67,1.67,0,0,0,1.67-1.67V4.92h1.66V3.25Z"/></svg>
@@ -112,14 +125,14 @@
                     </ul>
                 </header>
                 <ul id="contacts_container">
-                    <li class="contact-card" data-flo-id="f1234">
+                    <li class="contact-card overflow-ellipsis" data-flo-id="f1234">
                         <div class="contact-hidden-options flex space-between align-center">
                             <sm-checkbox class="contact-card__checkbox"></sm-checkbox>
                             <button class="contact-card__more" aria-label="Contact details">
                                 <svg class="icon more-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-7c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
                             </button>
                         </div>
-                        <h3 class="contact-card__initial">S</h3>
+                        <h3 class="initial contact-card__initial">S</h3>
                         <h4 class="contact-card__name">Sairaj</h4>
                     </li>
                 </ul>
@@ -141,6 +154,17 @@
                     <sm-button variant="primary" disable>Send</sm-button>
                 </form>
             </section>
+            <section id="check_balance_page" class="page hide-completely">
+                <div id="balance_card" class="flex direction-column">
+                    <h4 class="balance_card__title">Balance</h4>
+                    <p class="balance_card__description">Enter FLO address and check your FLO crypto balance</p>
+                    <h2 id="flo_balance">0</h2>
+                    <form onsubmit="return false">
+                        <sm-input id="balance_card__input" placeholder="FLO address" required></sm-input>
+                        <sm-button variant="primary" disable>Check balance</sm-button>
+                    </form>
+                </div>
+            </section>
         </div>
     </main>
     <script src="script/components.js"></script>
@@ -744,6 +768,31 @@
             selectedContacts.clear()
         }
 
+        function searchBox(inputId, expand){
+            const options = {
+                duration: 150,
+                fill: 'forwards',
+                easing: 'ease'
+            }
+            const triggerButtonID = getRef(inputId).dataset.trigger
+            if(expand){
+                getRef(triggerButtonID).animate(slideOutLeft, options)
+                .onfinish = () => {
+                    getRef(triggerButtonID).classList.add('hide-completely')
+                    getRef(inputId).classList.remove('hide-on-mobile')
+                    getRef(inputId).animate(slideInLeft, options)
+                }
+            }
+            else{
+                getRef(inputId).animate(slideOutRight, options)
+                .onfinish = () => {
+                    getRef(inputId).classList.add('hide-on-mobile')
+                    getRef(triggerButtonID).classList.remove('hide-completely')
+                    getRef(triggerButtonID).animate(slideInRight, options)
+                }
+            }
+        }
+
     </script>
     <script>
         //UI for webWallet
diff --git a/script/components.js b/script/components.js
index f316f44..e9483a2 100644
--- a/script/components.js
+++ b/script/components.js
@@ -208,19 +208,14 @@ border: none;
     display: none;
 }
 .icon {
-    fill: none;
-    height: 1.6rem;
-    width: 1.6rem;
-    padding: 0.5rem;
-    stroke: rgba(var(--text-color), 0.7);
-    stroke-width: 10;
-    overflow: visible;
-    stroke-linecap: round;
+    fill: rgba(var(--text-color), 0.6);
+    height: 1.4rem;
+    width: 1.4rem;
     border-radius: 1rem;
-    stroke-linejoin: round;
     cursor: pointer;
     min-width: 0;
 }
+
 :host(.round) .input{
     border-radius: 10rem;
 }
@@ -364,11 +359,7 @@ input{
             <input/>
             <div part="placeholder" class="label"></div>
         </div>
-        <svg class="icon clear hide" viewBox="0 0 64 64">
-            <title>clear</title>
-            <line x1="64" y1="0" x2="0" y2="64"/>
-            <line x1="64" y1="64" x2="0" y2="0"/>
-        </svg>
+        <svg class="icon clear hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
     </label>
     <div class="feedback-text"></div>
 </div>
@@ -3631,22 +3622,20 @@ textField.innerHTML = `
     }
     .icon-container{
         position: relative;
-        margin-left: 0.5rem;
+        margin-left: 0.8rem;
         height: 1.8rem;
         width: 1.8rem;
     }
     .icon{
         position: absolute;
         cursor: pointer;
-        fill: none;
-        stroke-width: 8;
-        stroke: rgba(var(--text-color), 1);
+        fill: rgba(var(--text-color), 0.7);
         height: 1.8rem;
         width: 1.8rem;
-        padding: 0.4rem;
-        overflow: visible;
-        stroke-linecap: round;
-        stroke-linejoin: round;
+        padding: 0.2rem;
+    }
+    .save-button{
+        padding: 0;
     }
     .hide{
         display: none;
@@ -3655,13 +3644,13 @@ textField.innerHTML = `
 <div class="text-field">
     <div class="text" part="text"></div>
     <div class="icon-container">
-        <svg class="edit-button icon" viewBox="0 0 64 64">
+        <svg class="edit-button icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
             <title>Edit</title>
-            <path d="M46.73,14.81l7,7,7.65-7.6A7.15,7.15,0,0,0,61.39,4L60.11,2.77a7.23,7.23,0,0,0-10.19,0L3.87,48.57a5,5,0,0,0-1.39,2.6L.53,61.27a1.74,1.74,0,0,0,2,2l10.15-1.94A5.06,5.06,0,0,0,15.34,60L49.6,25.9"/>
+            <path fill="none" d="M0 0h24v24H0z"/><path d="M12.9 6.858l4.242 4.243L7.242 21H3v-4.243l9.9-9.9zm1.414-1.414l2.121-2.122a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414l-2.122 2.121-4.242-4.242z"/>
         </svg>
-        <svg class="save-button icon hide" viewBox="0 0 64 64">
+        <svg class="save-button icon hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
             <title>Save</title>
-            <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
+            <path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/>
         </svg>
     </div>
 </div>