diff --git a/css/main.css b/css/main.css
index ce6da9a..7e81ce5 100644
--- a/css/main.css
+++ b/css/main.css
@@ -50,7 +50,13 @@ button:focus-visible {
 
 sm-input,
 sm-textarea {
-  --border-radius: 0.5rem;
+  --border-radius: 0.3rem;
+  --background: rgba(var(--text-color), 0.1);
+}
+
+sm-button[variant=primary] {
+  --padding: 0.8rem 1.5rem;
+  margin-top: 1rem;
 }
 
 ul {
@@ -109,7 +115,7 @@ ul {
   position: absolute;
   border-radius: 50%;
   transform: scale(0);
-  background: rgba(var(--text-color), 0.2);
+  background: rgba(var(--text-color), 0.16);
   pointer-events: none;
 }
 
@@ -120,6 +126,14 @@ ul {
   -webkit-tap-highlight-color: transparent;
 }
 
+.observe-empty-state:empty {
+  display: none;
+}
+
+.observe-empty-state:not(:empty) ~ .empty-state {
+  display: none;
+}
+
 .icon {
   width: 1.5rem;
   height: 1.5rem;
@@ -164,9 +178,14 @@ ul {
   cursor: pointer;
 }
 
+.icon-only {
+  height: 2.6rem;
+  width: 2.6rem;
+  padding: 0.6rem;
+}
+
 .close-icon {
-  height: 2rem;
-  width: 2rem;
+  padding: 0.3rem;
 }
 
 .initial {
@@ -175,6 +194,8 @@ ul {
   user-select: none;
   align-items: center;
   justify-content: center;
+  font-weight: 500;
+  color: rgba(var(--foreground-color), 1);
   background-color: rgba(var(--text-color), 0.1);
 }
 
@@ -187,9 +208,9 @@ ul {
   width: 5rem;
   height: 5rem;
   padding: 1rem;
-  margin: 4rem 0 1rem 0;
+  margin: 1rem 0;
   font-size: 2rem;
-  border-radius: 1.5rem;
+  border-radius: 50%;
 }
 
 #contact_popup__name {
@@ -198,11 +219,19 @@ ul {
   font-size: 1.2rem;
 }
 
+.contact__copy-row {
+  padding: 0 1.5rem;
+  margin: 1rem 0;
+}
+
+.copy-label {
+  font-weight: 500;
+  color: rgba(var(--text-color), 0.8);
+}
+
 .flo-id-grid {
   gap: 0.5rem;
-  padding: 0 1.5rem;
   grid-template-columns: 1fr auto;
-  margin-bottom: 1rem;
 }
 
 .copy-button {
@@ -238,10 +267,16 @@ ul {
 #main_header {
   grid-area: header;
   height: max-content;
-  gap: 0.2rem 0.5rem;
-  padding: 1rem 0.7rem 1rem 1rem;
-  grid-template-columns: 1fr auto;
-  grid-template-areas: "company setting" "app setting";
+  gap: 0.2rem 1rem;
+  padding: 1rem;
+  grid-template-columns: auto 1fr;
+  grid-template-areas: "logo company" "logo app";
+}
+
+#main_header__logo {
+  width: 1.8rem;
+  height: 1.8rem;
+  grid-area: logo;
 }
 
 #page_container {
@@ -254,6 +289,8 @@ ul {
   flex-direction: column;
   height: 100%;
   width: 100%;
+  overflow-y: auto;
+  align-content: flex-start;
 }
 
 .header__company-name {
@@ -271,11 +308,6 @@ ul {
   color: rgba(var(--text-color), 0.9);
 }
 
-.header__settings-button {
-  grid-area: setting;
-  padding: 0.8rem;
-}
-
 #main_navbar {
   grid-area: nav;
 }
@@ -300,7 +332,7 @@ ul {
 }
 
 .navbar__item__title {
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   font-weight: 500;
   color: rgba(var(--text-color), 0.7);
 }
@@ -321,10 +353,6 @@ ul {
   fill: white;
 }
 
-#dashboard_page__header {
-  height: 7.5rem;
-}
-
 #base_header {
   position: relative;
   width: 100%;
@@ -336,15 +364,11 @@ ul {
   color: rgba(var(--text-color), 0.8);
 }
 
-z #search_contacts {
+#search_contacts {
   --padding: 0.5rem 0.6rem;
   --background: rgba(var(--text-color), 0.1);
 }
 
-.search__icon {
-  height: 1.2rem;
-}
-
 .expanding-search {
   width: 14rem;
 }
@@ -379,59 +403,48 @@ z #search_contacts {
 
 #contacts_container {
   display: flex;
-  flex-wrap: wrap;
-  height: 100%;
+  flex-direction: column;
+  max-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;
+  display: grid;
+  width: 100%;
+  gap: 1rem;
+  grid-template-columns: auto auto 1fr auto;
   align-items: center;
-  margin: 0 1rem 1rem 0;
-  padding: 1.5rem 1rem;
+  padding: 0.5rem 0.6rem;
   flex-shrink: 0;
   cursor: pointer;
   user-select: none;
   align-self: flex-start;
   justify-content: center;
-  border-radius: 0.5rem;
+  border-radius: 0.3rem;
   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;
 }
 
-.contact-hidden-options {
-  position: absolute;
-  width: 100%;
-  top: 0;
-  padding: 0.5rem 0.8rem;
-}
-
 .contact-card__checkbox {
-  --border-radius: 0.5rem;
+  --height: 1.5rem;
+  --width: 1.5rem;
+  --border-radius: 0.3rem;
   --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;
+  width: 2rem;
+  height: 2rem;
+  padding: 1.2rem;
+  font-size: 1.1rem;
+  border-radius: 50%;
 }
 
 .contact-card__name {
-  text-align: center;
   font-weight: 500;
   font-size: 1rem;
   color: rgba(var(--text-color), 0.8);
@@ -441,19 +454,23 @@ z #search_contacts {
   padding: 0.4rem;
 }
 
-.more-icon {
-  height: 1.2rem;
-  width: 1.2rem;
+#contacts_empty_state {
+  text-align: center;
 }
 
-#add_contact_button {
+.empty-state__title {
+  font-weight: 400;
+  color: rgba(var(--text-color), 0.8);
+}
+
+#show_contact_popup_button {
   right: 0;
   bottom: 0;
   margin: 1.5rem;
 }
 
 .page__header {
-  padding: 1rem 1rem 2rem 1rem;
+  padding: 1rem;
 }
 
 .page__title {
@@ -461,8 +478,27 @@ z #search_contacts {
 }
 
 #send_flo_form {
+  width: min(26rem, 100%);
+  height: 100%;
   padding: 0 1rem;
-  gap: 1rem;
+  gap: 0.3;
+}
+
+.label {
+  font-size: 0.9rem;
+  margin-bottom: 0.3rem;
+  color: rgba(var(--text-color), 0.9);
+}
+.label:not(:first-of-type) {
+  margin-top: 0.8rem;
+}
+
+#sent_flo_data {
+  --max-height: 12rem;
+}
+
+#send_flo_button {
+  margin-top: 1.5rem;
 }
 
 #balance_card {
@@ -493,6 +529,28 @@ z #search_contacts {
   margin: 2rem 0 1rem 0;
 }
 
+.settings__section {
+  padding: 0 1rem;
+  width: min(50ch, 100%);
+}
+.settings__section:not(:last-of-type) {
+  margin-bottom: 1rem;
+}
+
+.setting__title {
+  color: rgba(var(--text-color), 0.9);
+}
+
+.setting__description {
+  font-size: 0.9rem;
+  color: rgba(var(--text-color), 0.8);
+}
+
+.toggle-grid {
+  gap: 0.3rem;
+  margin-right: 1rem;
+}
+
 @media all and (max-width: 640px) {
   .hide-on-mobile {
     display: none;
@@ -532,10 +590,6 @@ z #search_contacts {
     z-index: 1;
     width: 100%;
   }
-
-  .back-button {
-    margin-right: 1rem;
-  }
 }
 @media all and (min-width: 640px) {
   body {
@@ -565,13 +619,13 @@ z #search_contacts {
     overflow: hidden;
     backdrop-filter: blur(1rem);
     grid-template-columns: 15rem 1fr;
-    grid-template-rows: min-content 1fr;
+    grid-template-rows: auto 1fr;
     grid-template-areas: "header page" "nav page";
     box-shadow: 0 1.5rem 1.5rem rgba(0, 0, 0, 0.16);
   }
 
   #main_header {
-    padding: 1.5rem 1.2rem 1.5rem 2rem;
+    padding: 1.5rem;
   }
 
   #main_navbar {
@@ -601,22 +655,20 @@ z #search_contacts {
   }
 
   .page__header {
+    min-height: 6.2rem;
     padding: 1.5rem;
   }
 
   #contacts_container {
-    padding: 0 1rem 8rem 2rem;
+    padding: 0 1rem 8rem 1.5rem;
   }
 
-  #add_contact_button {
-    right: 0;
-    bottom: 0;
-    margin: 2rem;
+  #send_flo_form {
+    padding: 0 1.5rem 1.5rem 1.5rem;
   }
-}
-@media all and (min-width: 1080px) {
-  .contact-card {
-    width: calc(33.33% - 1rem);
+
+  .settings__section {
+    padding: 0 1.5rem;
   }
 }
 @media all and (min-width: 1280px) {
@@ -632,8 +684,25 @@ z #search_contacts {
   }
 }
 @media (any-hover: hover) {
-  .contact-card__checkbox:not([checked]):not(:focus-within),
-.contact-card__more:not(:focus-within) {
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.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);
+  }
+
+  .contact-card__checkbox:not([checked]):not(:focus-within) {
+    opacity: 0.4;
+    transition: opacity 0.3s;
+  }
+
+  .contact-card__more:not(:focus-within) {
     opacity: 0;
     transition: opacity 0.3s;
   }
diff --git a/css/main.min.css b/css/main.min.css
index 2e72ab2..b2fe365 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-.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
+.contact-card,.interact,button{overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}#contacts_empty_state,.initial{text-align:center}.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.3rem;--background:rgba(var(--text-color), 0.1)}sm-button[variant=primary]{--padding:0.8rem 1.5rem;margin-top:1rem}ul{list-style:none}.flex{display:flex}.grid{display:grid}.align-center{align-items:center}.justify-right{margin-left:auto}.direction-column{flex-direction:column}.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%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16);pointer-events:none}.interact,.navbar__item,.page{position:relative}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem}#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}.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}.icon-only{height:2.6rem;width:2.6rem;padding:.6rem}.close-icon{padding:.3rem}.initial{display:flex;user-select:none;align-items:center;justify-content:center;font-weight:500;color:rgba(var(--foreground-color),1);background-color:rgba(var(--text-color),.1)}.contact__option,.copy-label{color:rgba(var(--text-color),.8)}#contact_popup{--body-padding:0}#contact_popup__initial{align-self:center;width:5rem;height:5rem;padding:1rem;margin:1rem 0;font-size:2rem;border-radius:50%}#contact_popup__name{align-self:center;font-weight:700;font-size:1.2rem}.contact__copy-row{padding:0 1.5rem;margin:1rem 0}.copy-label{font-weight:500}.flo-id-grid{gap:.5rem;grid-template-columns:1fr auto}.copy-button{padding:.4rem}#contact_popup__options{padding:1rem 0}.contact__option{font-size:1rem;padding:.8rem 1.5rem;font-weight:500}.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 1rem;padding:1rem;grid-template-columns:auto 1fr;grid-template-areas:"logo company" "logo app"}#main_header__logo{width:1.8rem;height:1.8rem;grid-area:logo}#page_container{grid-area:page}.page{display:flex;flex-direction:column;height:100%;width:100%;overflow-y:auto;align-content:flex-start}.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)}#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:.8rem;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}#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)}#search_contacts{--padding:0.5rem 0.6rem;--background:rgba(var(--text-color), 0.1)}.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-direction:column;max-height:100%;overflow-y:auto;align-content:flex-start;padding:0 0 6rem 1rem}.contact-card{position:relative;display:grid;width:100%;gap:1rem;grid-template-columns:auto auto 1fr auto;align-items:center;padding:.5rem .6rem;flex-shrink:0;user-select:none;align-self:flex-start;justify-content:center;border-radius:.3rem;background:rgba(var(--foreground-color),.6)}.contact-card__checkbox{--height:1.5rem;--width:1.5rem;--border-radius:0.3rem;--border-color:rgba(var(--text-color), 0.6)}.contact-card__initial{width:2rem;height:2rem;padding:1.2rem;font-size:1.1rem;border-radius:50%}.contact-card__name{font-size:1rem}.contact-card__more{padding:.4rem}.empty-state__title{font-weight:400;color:rgba(var(--text-color),.8)}#show_contact_popup_button{right:0;bottom:0;margin:1.5rem}.page__header{padding:1rem}.page__title{font-size:1.1rem}#send_flo_form{width:min(26rem,100%);height:100%;padding:0 1rem;gap:.3}.label{font-size:.9rem;margin-bottom:.3rem;color:rgba(var(--text-color),.9)}.label:not(:first-of-type){margin-top:.8rem}#sent_flo_data{--max-height:12rem}#send_flo_button{margin-top:1.5rem}#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__title{font-size:1.1rem}.balance_card__description{font-size:.9rem}#flo_balance{font-size:3rem;margin:2rem 0 1rem}.settings__section{padding:0 1rem;width:min(50ch,100%)}.settings__section:not(:last-of-type){margin-bottom:1rem}.setting__title{color:rgba(var(--text-color),.9)}.setting__description{font-size:.9rem;color:rgba(var(--text-color),.8)}.toggle-grid{gap:.3rem;margin-right: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%}}@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:auto 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}#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{min-height:6.2rem;padding:1.5rem}#contacts_container{padding:0 1rem 8rem 1.5rem}#send_flo_form{padding:0 1.5rem 1.5rem}.settings__section{padding:0 1.5rem}}@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){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.contact-card__checkbox:not([checked]):not(:focus-within){opacity:.4;transition:opacity .3s}.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 2f39e1f..7cac3fb 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -44,7 +44,12 @@ button:focus-visible{
 }
 sm-input,
 sm-textarea{
-    --border-radius: 0.5rem;
+    --border-radius: 0.3rem;
+    --background: rgba(var(--text-color), 0.1);
+}
+sm-button[variant="primary"]{
+    --padding: 0.8rem 1.5rem;
+    margin-top: 1rem;
 }
 ul{
     list-style: none;
@@ -90,7 +95,7 @@ ul{
     position: absolute;
     border-radius: 50%;
     transform: scale(0);
-    background: rgba(var(--text-color), 0.2);
+    background: rgba(var(--text-color), 0.16);
     pointer-events: none;
 }
 .interact{
@@ -99,6 +104,12 @@ ul{
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
 }
+.observe-empty-state:empty{
+    display: none;
+}
+.observe-empty-state:not(:empty) ~ .empty-state{
+    display: none;
+}
 .icon{
     width: 1.5rem;
     height: 1.5rem;
@@ -135,9 +146,13 @@ ul{
     padding: 0.5rem;
     cursor: pointer;
 }
+.icon-only{
+    height: 2.6rem;
+    width: 2.6rem;
+    padding: 0.6rem;
+}
 .close-icon{
-    height: 2rem;
-    width: 2rem;
+    padding: 0.3rem;
 }
 .initial{
     display: flex;
@@ -145,6 +160,8 @@ ul{
     user-select: none;
     align-items: center;
     justify-content: center;
+    font-weight: 500;
+    color: rgba(var(--foreground-color), 1);
     background-color: rgba(var(--text-color), 0.1);
 }
 
@@ -156,20 +173,26 @@ ul{
     width: 5rem;
     height: 5rem;
     padding: 1rem;
-    margin: 4rem 0 1rem 0;
+    margin: 1rem 0;
     font-size: 2rem;
-    border-radius: 1.5rem;
+    border-radius: 50%;
 }
 #contact_popup__name{
     align-self: center;
     font-weight: 700;
     font-size: 1.2rem;
 }
+.contact__copy-row{
+    padding: 0 1.5rem;
+    margin: 1rem 0;
+}
+.copy-label{
+    font-weight: 500;
+    color: rgba(var(--text-color), 0.8);
+}
 .flo-id-grid{
     gap: 0.5rem;
-    padding: 0 1.5rem;
     grid-template-columns: 1fr auto;
-    margin-bottom: 1rem;
 }
 #contact__flo_id{
 }
@@ -202,10 +225,15 @@ ul{
 #main_header{
     grid-area: header;
     height: max-content;
-    gap: 0.2rem 0.5rem;
-    padding: 1rem 0.7rem 1rem 1rem;
-    grid-template-columns: 1fr auto;
-    grid-template-areas: 'company setting' 'app setting';
+    gap: 0.2rem 1rem;
+    padding: 1rem;
+    grid-template-columns: auto 1fr;
+    grid-template-areas: 'logo company' 'logo app';
+}
+#main_header__logo{
+    width: 1.8rem;
+    height: 1.8rem;
+    grid-area: logo;
 }
 #page_container{
     grid-area: page;
@@ -216,6 +244,8 @@ ul{
     flex-direction: column;
     height: 100%;
     width: 100%;
+    overflow-y: auto;
+    align-content: flex-start;
 }
 .header__company-name{
     grid-area: company;
@@ -230,10 +260,6 @@ ul{
     font-weight: 700;
     color: rgba(var(--text-color), 0.9);
 }
-.header__settings-button{
-    grid-area: setting;
-    padding: 0.8rem;
-}
 #main_navbar{
     grid-area: nav;
 }
@@ -258,7 +284,7 @@ ul{
     fill: rgba(var(--text-color), 0.7);
 }
 .navbar__item__title{
-    font-size: 0.85rem;
+    font-size: 0.8rem;
     font-weight: 500;
     color: rgba(var(--text-color), 0.7);
 }
@@ -279,7 +305,6 @@ ul{
 }
 
 #dashboard_page__header{
-    height: 7.5rem;
 }
 #base_header{
     position: relative;
@@ -291,16 +316,16 @@ ul{
     color: rgba(var(--text-color), 0.8);
 }
 
-z
 
 
 #search_contacts{
     --padding: 0.5rem 0.6rem;
     --background: rgba(var(--text-color), 0.1);
 }
-.search__icon{
-    height: 1.2rem;
+#search_contacts_button{
+    
 }
+
 .expanding-search{
     width: 14rem;
 }
@@ -336,55 +361,44 @@ z
 
 #contacts_container{
     display: flex;
-    flex-wrap: wrap;
-    height: 100%;
+    flex-direction: column;
+    max-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;
+    display: grid;
+    width: 100%;
+    gap: 1rem;
+    grid-template-columns: auto auto 1fr auto;
     align-items: center;
-    margin: 0 1rem 1rem 0;
-    padding: 1.5rem 1rem;
+    padding:  0.5rem 0.6rem;
     flex-shrink: 0;
     cursor: pointer;
     user-select: none;
     align-self: flex-start;
     justify-content: center;
-    border-radius: 0.5rem;
+    border-radius: 0.3rem;
     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{
-    position: absolute;
-    width: 100%;
-    top: 0;
-    padding: 0.5rem 0.8rem;
-}
 .contact-card__checkbox{
-    --border-radius: 0.5rem;
+    --height: 1.5rem;
+    --width: 1.5rem;
+    --border-radius: 0.3rem;
     --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;
+    width: 2rem;
+    height: 2rem;
+    padding: 1.2rem;
+    font-size: 1.1rem;
+    border-radius: 50%;
 }
 .contact-card__name{
-    text-align: center;
     font-weight: 500;
     font-size: 1rem;
     color: rgba(var(--text-color), 0.8);
@@ -392,27 +406,47 @@ z
 .contact-card__more{
     padding: 0.4rem;
 }
-.more-icon{
-    height: 1.2rem;
-    width: 1.2rem;
+#contacts_empty_state{
+    text-align: center;
+}
+.empty-state__title{
+    font-weight: 400;
+    color: rgba(var(--text-color), 0.8);
 }
 
-#add_contact_button{
+#show_contact_popup_button{
     right: 0;
     bottom: 0;
     margin: 1.5rem;
 }
 
 .page__header{
-    padding: 1rem 1rem 2rem 1rem;
+    padding: 1rem;
 }
 .page__title{
     font-size: 1.1rem;
 }
 
 #send_flo_form{
+    width: min(26rem, 100%);
+    height: 100%;
     padding: 0 1rem;
-    gap: 1rem;
+    gap: 0.3;
+}
+
+.label{
+    font-size: 0.9rem;
+    margin-bottom: 0.3rem;
+    color: rgba(var(--text-color), 0.9);
+    &:not(:first-of-type){
+        margin-top: 0.8rem;
+    }
+}
+#sent_flo_data{
+    --max-height: 12rem;
+}
+#send_flo_button{
+    margin-top: 1.5rem;
 }
 
 
@@ -441,6 +475,28 @@ z
     margin: 2rem 0 1rem 0;
 }
 
+
+
+.settings__section{
+    padding: 0 1rem;
+    width: min(50ch, 100%);
+    &:not(:last-of-type){
+        margin-bottom: 1rem;
+    }
+}
+.setting__title{
+    color: rgba(var(--text-color), 0.9);
+}
+.setting__description{
+    font-size: 0.9rem;
+    color: rgba(var(--text-color), 0.8);
+}
+.toggle-grid{
+    gap: 0.3rem;
+    margin-right: 1rem;
+}
+
+
 // mobile only styles
 @media all and (max-width: 640px){
     .hide-on-mobile{
@@ -475,7 +531,7 @@ z
         width: 100%;
     }
     .back-button{
-        margin-right: 1rem;
+
     }
 }
 
@@ -504,12 +560,12 @@ z
         overflow: hidden;
         backdrop-filter: blur(1rem);
         grid-template-columns: 15rem 1fr;
-        grid-template-rows: min-content 1fr;
+        grid-template-rows: auto 1fr;
         grid-template-areas: 'header page' 'nav page';
         box-shadow: 0 1.5rem 1.5rem rgba(0, 0, 0, 0.16);
     }
     #main_header{
-        padding: 1.5rem 1.2rem 1.5rem 2rem;
+        padding: 1.5rem;
     }
     #main_navbar{
         flex-direction: column;
@@ -535,21 +591,21 @@ z
         }
     }
     .page__header{
+        min-height: 6.2rem;
         padding: 1.5rem;
     }
     #contacts_container{
-        padding: 0 1rem 8rem 2rem;
+        padding: 0 1rem 8rem 1.5rem;
     }
-    #add_contact_button{
-        right: 0;
-        bottom: 0;
-        margin: 2rem;
+    #send_flo_form{
+        padding: 0 1.5rem 1.5rem 1.5rem;
+    }
+    .settings__section{
+        padding: 0 1.5rem;
     }
 }
 @media all and (min-width: 1080px){
-    .contact-card{
-        width: calc(33.33% - 1rem);
-    }
+
 }
 @media all and (min-width: 1280px){
     #main_card{
@@ -564,7 +620,22 @@ z
     }
 }
 @media (any-hover: hover){
-    .contact-card__checkbox:not([checked]):not(:focus-within),
+    ::-webkit-scrollbar{
+        width: 0.5rem;
+        height: 0.5rem;
+    }
+    
+    ::-webkit-scrollbar-thumb{
+        background: rgba(var(--text-color), 0.3);
+        border-radius: 1rem;
+        &:hover{
+            background: rgba(var(--text-color), 0.5);
+        }
+    }
+    .contact-card__checkbox:not([checked]):not(:focus-within){
+        opacity: 0.4;
+        transition: opacity 0.3s;
+    }
     .contact-card__more:not(:focus-within){
         opacity: 0;
         transition: opacity 0.3s;
diff --git a/new.html b/new.html
index 73fd48e..3fafeb6 100644
--- a/new.html
+++ b/new.html
@@ -11,7 +11,7 @@
         <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="css/main.min.css">
     </head>
-<body class="flex" data-theme="light">
+<body class="flex" data-theme="light" onload="onLoadStartUp()">
     <audio id="notification_sound">
         <source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg">
         <source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg">
@@ -36,13 +36,22 @@
     <sm-notifications id="notification_drawer"></sm-notifications>
 
     <sm-popup id="contact_popup">
+        <header class="popup__header" slot="header">
+            <button class="close-button" onclick="hidePopup()">
+                <svg class="icon icon-only close-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="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
+            </button>
+        </header>
         <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 class="flex direction-column copy-row contact__copy-row">
+            <h5 class="copy-label">FLO ID</h5>
+            <div class="grid flo-id-grid align-center">
+                <p id="contact__flo_id" class="overflow-ellipsis"></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>
         </div>
         <ul id="contact_popup__options">
             <li>
@@ -60,15 +69,26 @@
         </ul>
     </sm-popup>
 
+    <sm-popup id="add_contact_popup">
+        <header class="popup__header" slot="header">
+            <button class="close-button" onclick="hidePopup()">
+                <svg class="icon icon-only close-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="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
+            </button>
+        </header>
+        <label for="address_to_add" class="label">FLO address</label>
+        <sm-input id="address_to_add" floID required></sm-input>
+        <label for="name_to_add" class="label">Name</label>
+        <sm-input id="name_to_add"></sm-input>
+        <sm-button id="add_contact_button" class="full-width" variant="primary" disable>Add address</sm-button>
+    </sm-popup>
+
     <!--  -->
 
     <main id="main_card" class="grid">
         <header id="main_header" class="grid align-center">
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
             <h5 class="header__company-name">RanhiMall</h5>
             <h4 class="header__app-name">FLO Web Wallet</h4>
-            <button class="header__settings-button" title="settings">
-                <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="M5.334 4.545a9.99 9.99 0 0 1 3.542-2.048A3.993 3.993 0 0 0 12 3.999a3.993 3.993 0 0 0 3.124-1.502 9.99 9.99 0 0 1 3.542 2.048 3.993 3.993 0 0 0 .262 3.454 3.993 3.993 0 0 0 2.863 1.955 10.043 10.043 0 0 1 0 4.09c-1.16.178-2.23.86-2.863 1.955a3.993 3.993 0 0 0-.262 3.455 9.99 9.99 0 0 1-3.542 2.047A3.993 3.993 0 0 0 12 20a3.993 3.993 0 0 0-3.124 1.502 9.99 9.99 0 0 1-3.542-2.047 3.993 3.993 0 0 0-.262-3.455 3.993 3.993 0 0 0-2.863-1.954 10.043 10.043 0 0 1 0-4.091 3.993 3.993 0 0 0 2.863-1.955 3.993 3.993 0 0 0 .262-3.454zM13.5 14.597a3 3 0 1 0-3-5.196 3 3 0 0 0 3 5.196z"/></svg>
-            </button>
         </header>
         <nav id="main_navbar" class="flex">
             <button id="dashboard_page_button" class="navbar__item" data-target-page="dashboard_page">
@@ -79,30 +99,34 @@
                 <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_page_button" class="navbar__item"  data-target-page="check_balance_page">    
+            <button id="check_balance_page_button" class="navbar__item hide-completely"  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>
-            <button id="get_flo_button" class="navbar__item" data-target-page="get_flo_page">
+            <button id="generate_address_page_button" class="navbar__item" data-target-page="generate_address_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="M10.313 11.566l7.94-7.94 2.121 2.121-1.414 1.414 2.121 2.121-3.535 3.536-2.121-2.121-2.99 2.99a5.002 5.002 0 0 1-7.97 5.849 5 5 0 0 1 5.848-7.97zm-.899 5.848a2 2 0 1 0-2.828-2.828 2 2 0 0 0 2.828 2.828z"/></svg>                                            
-                <span class="navbar__item__title">Get FLO address</span>
+                <span class="navbar__item__title">Generate address</span>
             </button>
             <button id="recover_flo_button" class="navbar__item hide-completely">
                 <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="M10.313 11.566l7.94-7.94 2.121 2.121-1.414 1.414 2.121 2.121-3.535 3.536-2.121-2.121-2.99 2.99a5.002 5.002 0 0 1-7.97 5.849 5 5 0 0 1 5.848-7.97zm-.899 5.848a2 2 0 1 0-2.828-2.828 2 2 0 0 0 2.828 2.828z"/></svg>                                            
                 <span class="navbar__item__title">Recover FLO address</span>
             </button>
+            <button id="settings_page_button" class="navbar__item" data-target-page="settings_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="M5.334 4.545a9.99 9.99 0 0 1 3.542-2.048A3.993 3.993 0 0 0 12 3.999a3.993 3.993 0 0 0 3.124-1.502 9.99 9.99 0 0 1 3.542 2.048 3.993 3.993 0 0 0 .262 3.454 3.993 3.993 0 0 0 2.863 1.955 10.043 10.043 0 0 1 0 4.09c-1.16.178-2.23.86-2.863 1.955a3.993 3.993 0 0 0-.262 3.455 9.99 9.99 0 0 1-3.542 2.047A3.993 3.993 0 0 0 12 20a3.993 3.993 0 0 0-3.124 1.502 9.99 9.99 0 0 1-3.542-2.047 3.993 3.993 0 0 0-.262-3.455 3.993 3.993 0 0 0-2.863-1.954 10.043 10.043 0 0 1 0-4.091 3.993 3.993 0 0 0 2.863-1.955 3.993 3.993 0 0 0 .262-3.454zM13.5 14.597a3 3 0 1 0-3-5.196 3 3 0 0 0 3 5.196z"/></svg>
+                <span class="navbar__item__title">Settings</span>
+            </button>
         </nav>
         <div id="page_container" class="flex">
             <section id="dashboard_page" class="page hide-completely">
                 <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 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 id="search_contacts_button" class="hide-on-desktop" onclick="searchBox('search_contacts', true)">
+                            <svg class="icon icon-only 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 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>
+                                <svg class="icon icon-only" 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__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>
@@ -117,26 +141,18 @@
                             </button>
                         </li>
                         <li class="contact-option">
-                            <button class="contact-option__button">
+                            <button class="contact-option__button" onclick="deleteSelected()">
                                 <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>
                                 <span class="contact-option__name">Delete</span>
                             </button>
                         </li>
                     </ul>
                 </header>
-                <ul id="contacts_container">
-                    <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="initial contact-card__initial">S</h3>
-                        <h4 class="contact-card__name">Sairaj</h4>
-                    </li>
-                </ul>
-                <button id="add_contact_button" class="fab" title="Add FLO address as a contact to monitor">
+                <ul id="contacts_container" class="observe-empty-state"></ul>
+                <div id="contacts_empty_state" class="empty-state">
+                    <h4 class="empty-state__title">No saved FLO addresses</h4>
+                </div>
+                <button id="show_contact_popup_button" class="fab" title="Add FLO address as a contact to monitor" onclick="showPopup('add_contact_popup')">
                     <svg class="icon fab__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                         <g>
                             <path fill="none" d="M0 0h24v24H0z"/>
@@ -146,18 +162,30 @@
                 </button>
             </section>
             <section id="send_flo_page" class="page hide-completely">
+                <header id="send_flo_page__header" class="page__header flex align-center">
+                    <h4 class="header__title">Send FLO</h4>
+                </header>
                 <form id="send_flo_form" class="grid" onsubmit="return false">
-                    <sm-input id="sender_adddress" placeholder="Sender's address" required></sm-input>
-                    <sm-input id="receiver_adddress" placeholder="Receiver's address" required></sm-input>
-                    <sm-input id="sent_amount" class="amount-input" type="number" step="0.0000001" placeholder="Amount" required></sm-input>
-                    <sm-textarea id="sent_flo_data" placeholder="FLO data" rows="4" required></sm-textarea>
-                    <sm-button variant="primary" disable>Send</sm-button>
+                    <label class="label" for="sender_address">Sender's address</label>
+                    <sm-input id="receiver_adddress" floID required></sm-input>
+
+                    <label class="label" for="sender_address">Receiver's address</label>
+                    <sm-input id="receiver_adddress" floID required></sm-input>
+
+                    <label class="label" for="sent_amount">Amount</label>
+                    <sm-input id="sent_amount" class="amount-input" type="number" min="0.0000001" step="0.0000001" required></sm-input>
+
+                    <label class="label" for="sent_flo_data">FLO data</label>
+                    <sm-textarea id="sent_flo_data" rows="4" required></sm-textarea>
+
+                    <sm-button id="send_flo_button" variant="primary" disable>Send</sm-button>
                 </form>
             </section>
             <section id="check_balance_page" class="page hide-completely">
+                <header id="check_balance_page__header" class="page__header flex align-center">
+                    <h4 class="header__title">Balance</h4>
+                </header>
                 <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>
@@ -165,6 +193,24 @@
                     </form>
                 </div>
             </section>
+            <section id="generate_address_page" class="page hide-completely">
+                <header id="check_balance_page__header" class="page__header flex align-center">
+                    <h4 class="header__title">Create new FLO address</h4>
+                </header>
+                <p>Use 'Generate pair' to get a new pair of FLO public and private key.</p>
+                <sm-button variant="primary">Generate pair</sm-button>
+            </section>
+            <section id="settings_page" class="grid page hide-completely">
+                <header id="check_balance_page__header" class="page__header flex align-center">
+                    <h4 class="header__title">Settings</h4>
+                </header>
+                <sm-switch id="theme_switcher" class="grid settings__section">
+                    <div slot="left" class="grid toggle-grid">
+                        <h4 class="settings__title">Theme</h4>
+                        <p class="setting__description">Turn dark theme on/off.</p>
+                    </div> 
+                </sm-switch>
+            </section>
         </div>
     </main>
     <script src="script/components.js"></script>
@@ -569,9 +615,10 @@
     </script>
     <script>
         const activePage = {}
+        const clickedContact = {}
+        const allContacts = new Map()
 
         window.addEventListener('load', e => {
-            console.log('loaded')
             showPage('dashboard_page')
         })
 
@@ -684,14 +731,45 @@
         const easeInOvershoot = `cubic-bezier(0.6, -0.28, 0.735, 0.045)`;
         const easeOutOvershoot = `cubic-bezier(0.175, 0.885, 0.32, 1.275)`;
         
+        // UI elements rendering 
 
-        document.addEventListener('click', e => {
+        const render = {
+            contactCard(address, name){
+                const card = document.createElement('li')
+                card.classList.add('contact-card')
+                card.setAttribute('data-flo-id', address)
+                const color = contactColor(address)
+                card.innerHTML = `
+                    <sm-checkbox class="contact-card__checkbox"></sm-checkbox>
+                    <h3 class="initial contact-card__initial overflow-ellipsis" style="background-color: ${color}">${name.charAt(0)}</h3>
+                    <h4 class="contact-card__name overflow-ellipsis">${name}</h4>
+                    <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>
+                `
+                return card
+            }
+        }
+
+        //
+
+        document.addEventListener('click', async e => {
             if(e.target.closest('.contact-card__more')){
+                const contact = e.target.closest('.contact-card')
+                const floID = contact.dataset.floId
+                const name = allContacts.get(floID)
+                clickedContact.floID = floID
+                clickedContact.card = contact
+                getRef('contact_popup__initial').textContent = name.charAt(0)
+                getRef('contact_popup__initial').style.backgroundColor = contactColor(floID)
+                getRef('contact_popup__name').value = name
+                getRef('contact__flo_id').textContent = clickedContact.floID
                 showPopup('contact_popup')
             }
             else if(e.target.closest('.contact-card') && !e.target.closest('.contact-card__checkbox')){
-                const card = e.target.closest('.contact-card')
-                createRipple(e, card)
+                const contact = e.target.closest('.contact-card')
+                clickedContact.floID = contact.dataset.floId
+                createRipple(e, contact)
             }
             else if(e.target.closest('.navbar__item')){
                 showPage(e.target.closest('.navbar__item').dataset.targetPage)
@@ -768,6 +846,14 @@
             selectedContacts.clear()
         }
 
+        async function deleteSelected(){
+            if(await confirmation('Delete selected?', 'Are you sure to delete all selected FLO addresses?', 'No', 'Yes')){
+                selectedContacts.forEach(contact => deleteContact(contact))
+                selectedContacts.clear()
+                notify('Deleted selected addresses', 'success')
+            }
+        }
+
         function searchBox(inputId, expand){
             const options = {
                 duration: 150,
@@ -793,8 +879,60 @@
             }
         }
 
-    </script>
-    <script>
+        document.getElementById('search_contacts__input').addEventListener('input', function(e) {
+            const filteredContacts = {}
+            allContacts.forEach((name, address) => {
+                if(name.toLowerCase().includes(this.value.toLowerCase()) || address.toLowerCase().includes(this.value.toLowerCase())){
+                    filteredContacts[address] = name
+                }
+            })
+            renderAllContacts(filteredContacts)
+        })
+
+        document.getElementById('add_contact_button').addEventListener('clicked', addContact)
+
+        function addContact(){
+            const address = getRef('address_to_add').value.trim()
+            let name = getRef('name_to_add').value.trim()
+            if(name === ''){
+                name = 'Unknown'
+            }
+            floWebWallet.addAddress(address, name)
+            .then(res => {
+                allContacts.set(address, name)
+                getRef('contacts_container').prepend(render.contactCard(address, name))
+                notify('Address saved', 'success')
+                hidePopup()
+            })
+            .catch(err => {
+                notify('Address already saved', 'error')
+            })
+        }
+
+        function deleteContact(address){
+            floWebWallet.deleteAddress(address)
+            .then(res => {  
+                allContacts.delete(address)
+                document.querySelector(`[data-flo-id="${address}"]`).remove()
+            })
+        }
+
+        document.getElementById('contact_popup__name').addEventListener('contentchanged', function(e){
+            let newName = e.detail.value.trim()
+            if(newName === ''){
+                newName = 'Unknown'
+                this.value = newName
+            }
+            getRef('contact_popup__initial').textContent = newName.charAt(0)
+            clickedContact.card.querySelector('.contact-card__initial').textContent = newName.charAt(0)
+            clickedContact.card.querySelector('.contact-card__name').textContent = newName
+            floWebWallet.changeLabel(clickedContact.floID, newName)
+            .then(res => {
+                notify('Name changed', 'success')
+            })
+            .catch(err => console.error(err))
+        })
+
         //UI for webWallet
         function clickedAddress(thisCard) {
             monitorData(address, label);
@@ -913,33 +1051,18 @@
                 .textContent);
         }
 
-        function createAddressCards(address, label) {
-        }
-
-        function createAllCards() {
-            floWebWallet.getLabels().then((labelAddr) => {
-                if (Object.entries(labelAddr).length === 0)
-                    document.getElementById('monitor-list').innerHTML =
-                        `<h3 style="text-align: center;width: 100%;">Add a FLO address to start monitoring</h3>`;
-                else
-                    Object.keys(labelAddr).forEach((address) => {
-                        createAddressCards(address, labelAddr[address]);
-                        floWebWallet.syncTransactions(address).then((array) => {
-                            if (array.length > 0) {
-                                let badge = document.createElement('badge'),
-                                    notifications = array.length
-                                if (notifications > 99)
-                                    notifications = '99+'
-                                badge.textContent = notifications
-                                document.getElementById(address).appendChild(badge)
-                            }
-                        }).catch((error) => {
-                            console.log(error)
-                        })
-                    })
-            }).catch((error) => {
-                console.log(error);
-            })
+        async function renderAllContacts(contacts) {
+            try{
+                const frag = document.createDocumentFragment()
+                for(address in contacts){
+                    frag.append(render.contactCard(address, contacts[address]))
+                }
+                getRef('contacts_container').innerHTML = ''
+                getRef('contacts_container').append(frag)
+            }
+            catch(err){
+                console.error(err)
+            }
         }
 
         function deleteDB() {
@@ -7125,7 +7248,7 @@
                         .catch(error => reject(error))
                 })
             },
-            
+
             // Add address to monitoring list
             addAddress(address, label){
                 return new Promise((resolve, reject) => {                
@@ -7154,7 +7277,7 @@
             },
         }
 
-        function onLoadStartUp() {
+        async function onLoadStartUp() {
             let IDBObjects = {
                 lastSync: {},
                 labels: {},
@@ -7164,7 +7287,12 @@
                 .then(result => console.log(result))
                 .catch(error => console.log(error))
 
-            createAllCards();
+            const contacts = await floWebWallet.getLabels()
+            renderAllContacts(contacts)
+            for(address in contacts){
+                allContacts.set(address, contacts[address])
+            }
+            document.getElementById('main_card').animate(flyInZoom, {duration: 600, easing: easeOutOvershoot})
         }
     </script>
 </body>
diff --git a/script/components.js b/script/components.js
index e9483a2..bc00ec3 100644
--- a/script/components.js
+++ b/script/components.js
@@ -339,7 +339,6 @@ input{
     font-size: 0.9rem;
     width: 100%;
     color: var(--error-color);
-    background: rgba(var(--foreground-color), 1);
     padding: 0.6rem 1rem;
     text-align: left;
 }
@@ -366,12 +365,16 @@ input{
 `;
 customElements.define('sm-input',
     class extends HTMLElement {
+
+        static formAssociated = true;
+        
         constructor() {
             super()
             this.attachShadow({
                 mode: 'open'
             }).append(smInput.content.cloneNode(true))
         }
+
         static get observedAttributes() {
             return ['placeholder']
         }
@@ -452,21 +455,24 @@ customElements.define('sm-input',
         }
 
         checkInput = (e) => {
+            if (!this.readonly) {                
+                if (this.input.value !== '') {
+                    this.clearBtn.classList.remove('hide')
+                } else {
+                    this.clearBtn.classList.add('hide')
+                }
+            }
             if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') return;
             if (this.input.value !== '') {
                 if (this.animate)
                     this.inputParent.classList.add('animate-label')
                 else
                     this.label.classList.add('hide')
-                if (!this.readonly)
-                    this.clearBtn.classList.remove('hide')
             } else {
                 if (this.animate)
                     this.inputParent.classList.remove('animate-label')
                 else
                     this.label.classList.remove('hide')
-                if (!this.readonly)
-                    this.clearBtn.classList.add('hide')
             }
         }
 
@@ -577,6 +583,7 @@ smTextarea.innerHTML = `
     --background: rgba(var(--text-color), 0.06);
     --padding-right: initial;
     --padding-left: initial;
+    --max-height: 8rem;
 }
 :host(.outlined) .textarea {
     box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
@@ -591,7 +598,7 @@ smTextarea.innerHTML = `
     overflow: hidden auto;
     grid-template-columns: 1fr;
     align-items: stretch;
-    max-height: 8rem;
+    max-height: var(--max-height);
     background: var(--background);
     border-radius: var(--border-radius);
     padding-left: var(--padding-left);