diff --git a/css/main.css b/css/main.css
index d03d41b..d7e9760 100644
--- a/css/main.css
+++ b/css/main.css
@@ -14,8 +14,7 @@
 }
 
 body {
-  --accent-color: #3D5AFE;
-  --secondary-color: #ffac2e;
+  --accent-color: #6300d4;
   --text-color: 17, 17, 17;
   --text-color-light: 100, 100, 100;
   --foreground-color: 255, 255, 255;
@@ -27,8 +26,7 @@ body {
 }
 
 body[data-theme=dark] {
-  --accent-color:#657cff;
-  --secondary-color: #d60739;
+  --accent-color:#d7b5ff;
   --text-color: 240, 240, 240;
   --text-color-light: 170, 170, 170;
   --foreground-color: 20, 20, 20;
@@ -155,38 +153,35 @@ sm-textarea {
   cursor: pointer;
 }
 
-.popup__header__title {
-  font-size: 1.1rem;
-  font-weight: 500;
-  color: rgba(var(--text-color), 0.8);
-}
-
 .close-icon {
   height: 2rem;
   width: 2rem;
 }
 
-.home_page__section {
-  backdrop-filter: blur(1rem);
-}
-.home_page__section--left {
-  background-color: rgba(var(--foreground-color), 0.8);
-}
-.home_page__section--right {
-  overflow: hidden;
-  background-color: rgba(var(--foreground-color), 0.9);
+#main_card {
+  height: 100%;
+  grid-row: 1/3;
 }
 
-.home_page__header {
-  gap: 0.2rem 1rem;
-}
-.home_page__header--left {
+#main_header {
+  grid-area: header;
+  height: max-content;
+  gap: 0.2rem 0.5rem;
   padding: 1.5rem 0.7rem 1.5rem 1rem;
   grid-template-columns: 1fr auto;
   grid-template-areas: "company setting" "app setting";
 }
-.home_page__header--right {
-  padding: 1.5rem 1rem;
+
+#page_container {
+  grid-area: page;
+}
+
+.page {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
 }
 
 .header__company-name {
@@ -209,36 +204,29 @@ sm-textarea {
   padding: 0.8rem;
 }
 
-.header__settings-button__icon {
-  transform: rotate(90deg);
+#main_navbar {
+  grid-area: nav;
 }
 
-.home_page__nav {
-  padding: 1.5rem 1rem;
-  gap: 1rem;
-  grid-template-columns: repeat(3, 1fr);
-  justify-items: center;
-}
-
-.nav-button {
+.navbar__item {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  text-align: center;
-  width: 4rem;
-}
-
-.nav-button__icon {
-  height: 3rem;
-  width: 3rem;
   padding: 0.8rem;
-  border-radius: 0.8rem;
-  margin-bottom: 0.8rem;
+  border-radius: 0.5rem;
+}
+.navbar__item--active .navbar__item__icon {
   fill: var(--accent-color);
-  background: rgba(var(--foreground-color), 1);
+}
+.navbar__item--active .navbar__item__title {
+  color: var(--accent-color);
 }
 
-.nav-button__name {
+.navbar__item__icon {
+  margin-right: 1rem;
+  fill: rgba(var(--text-color), 0.7);
+}
+
+.navbar__item__title {
   font-size: 0.9rem;
   font-weight: 500;
   color: rgba(var(--text-color), 0.7);
@@ -265,8 +253,14 @@ sm-textarea {
 }
 
 .header__title {
-  font-weight: 500;
-  color: rgba(var(--text-color), 0.7);
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: rgba(var(--text-color), 0.8);
+}
+
+#send_flo_form {
+  padding: 0 1.5rem;
+  gap: 1rem;
 }
 
 #search_contacts {
@@ -313,13 +307,14 @@ sm-textarea {
 }
 
 #contacts_container {
-  display: grid;
-  gap: 1rem;
+  display: flex;
+  flex-wrap: wrap;
   height: 100%;
-  align-content: flex-start;
+  min-height: 0;
   overflow-y: auto;
   list-style: none;
-  padding: 0 1rem 6rem 1rem;
+  align-content: flex-start;
+  padding: 0 0 6rem 1rem;
   grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
 }
 
@@ -327,10 +322,12 @@ sm-textarea {
   position: relative;
   overflow: hidden;
   display: flex;
-  width: 100%;
+  width: calc(50% - 1rem);
   flex-direction: column;
-  padding: 1rem;
-  min-height: 8rem;
+  align-items: center;
+  margin: 0 1rem 1rem 0;
+  padding: 1.5rem 1rem;
+  flex-shrink: 0;
   cursor: pointer;
   align-self: flex-start;
   justify-content: center;
@@ -339,13 +336,16 @@ sm-textarea {
   box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
 }
 
+.contact-hidden-options {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  padding: 0.5rem 0.8rem;
+}
+
 .contact-card__checkbox {
   --border-radius: 0.5rem;
   --border-color: rgba(var(--text-color), 0.6);
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: 1rem;
 }
 
 .contact-card__initial {
@@ -357,13 +357,14 @@ sm-textarea {
   text-align: center;
   user-select: none;
   border-radius: 1rem;
-  margin-bottom: 1.5rem;
+  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;
@@ -372,11 +373,6 @@ sm-textarea {
   color: rgba(var(--text-color), 0.8);
 }
 
-.contact__grid {
-  gap: 1rem;
-  grid-template-columns: 1fr auto;
-}
-
 .contact-card__more {
   padding: 0.4rem;
 }
@@ -392,27 +388,41 @@ sm-textarea {
   margin: 1.5rem;
 }
 
+.page__header {
+  padding: 1rem 1rem 2rem 1rem;
+}
+
+.page__title {
+  font-size: 1.1rem;
+}
+
 @media all and (max-width: 640px) {
-  #main_card {
+  body {
     min-height: 100vh;
   }
 
-  .fab {
-    position: fixed;
+  #main_card {
+    min-height: 100%;
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas: "header" "page" "nav";
+    background: rgba(var(--foreground-color), 0.9);
   }
 
-  #home_page {
-    height: 100%;
-    grid-template-rows: auto 1fr;
+  #main_navbar {
+    flex-direction: row;
   }
 
-  .home_page__section--right {
-    align-content: flex-start;
+  .navbar__item {
+    flex: 1;
+    flex-direction: column;
   }
 
-  .home_page__nav {
-    padding: 0.5rem 1rem 2rem 1rem;
-    grid-template-columns: repeat(4, 1fr);
+  .navbar__item__icon {
+    margin: 0 0 0.5rem 0;
+  }
+
+  .navbar__item__icon {
+    margin: 0 0 0.5rem 0;
   }
 }
 @media all and (min-width: 640px) {
@@ -430,40 +440,51 @@ sm-textarea {
   }
 
   #main_card {
+    position: relative;
     width: 80vw;
     height: 80vh;
     border-radius: 0.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, 0.16);
+    background: rgba(var(--foreground-color), 0.9);
   }
 
-  #home_page {
+  #main_header {
+    padding: 1.5rem 1.2rem 1.5rem 2rem;
+  }
+
+  #main_navbar {
+    flex-direction: column;
     height: 100%;
-    overflow-y: auto;
-    grid-template-columns: 20rem 1fr;
+    padding: 0 1rem;
+    align-content: flex-start;
   }
 
-  .home_page__section--left {
-    border-radius: 0.5rem 0 0 0.5rem;
+  #page_container {
+    position: relative;
+    grid-row: 1/3;
   }
-  .home_page__section--right {
-    grid-template-rows: auto 1fr;
-    border-radius: 0 0.5rem 0.5rem 0;
-    box-shadow: -0.5rem 0 1rem rgba(0, 0, 0, 0.06);
+  #page_container::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    height: 65%;
+    width: 1px;
+    background: rgba(var(--text-color), 0.2);
+    top: 50%;
+    transform: translateY(-50%);
   }
 
-  .home_page__header--left {
-    padding: 1.8rem 1.7rem 2rem 2.5rem;
-  }
-  .home_page__header--right {
-    padding: 2rem 2.5rem;
-  }
-
-  .home_page__nav {
-    padding: 0 2.5rem;
+  .page__header {
+    padding: 2rem 1.5rem;
   }
 
   #contacts_container {
-    padding: 0 2.5rem 8rem 2.5rem;
+    padding: 0 1rem 8rem 2rem;
   }
 
   #add_contact_button {
@@ -477,11 +498,15 @@ sm-textarea {
     width: 65vw;
     height: 85vh;
   }
+
+  .contact-card {
+    width: calc(33.33% - 1rem);
+  }
 }
 @media all and (min-width: 1920px) {
   #main_card {
-    width: 65vw;
-    height: 70vh;
+    width: 60vw;
+    height: 65vh;
   }
 }
 @media (any-hover: hover) {
diff --git a/css/main.min.css b/css/main.min.css
index eb24e35..6b9deba 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-.interact,button{-webkit-tap-highlight-color:transparent}*,::after,::before{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{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:#3D5AFE;--secondary-color:#ffac2e;--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);background:url(lighthouse.svg) center no-repeat;background-size:cover}body[data-theme=dark]{--accent-color:#657cff;--secondary-color:#d60739;--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;overflow:hidden;display:inline-flex;border:none;background:0 0;cursor:pointer;outline:0}.fab,.ripple{position:absolute}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}.justify-right{margin-left:auto}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.no-transformations{transform:none!important}.ripple{border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.2);pointer-events:none}.contact-card,.interact{position:relative;cursor:pointer;overflow:hidden}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.7)}#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}.popup__header__title{font-size:1.1rem;font-weight:500;color:rgba(var(--text-color),.8)}.header__company-name,.header__title,.nav-button__name{color:rgba(var(--text-color),.7);font-weight:500}.close-icon{height:2rem;width:2rem}.home_page__section{backdrop-filter:blur(1rem)}.home_page__section--left{background-color:rgba(var(--foreground-color),.8)}.home_page__section--right{overflow:hidden;background-color:rgba(var(--foreground-color),.9)}.contact-card,.nav-button__icon{background:rgba(var(--foreground-color),1)}.home_page__header{gap:.2rem 1rem}.home_page__header--left{padding:1.5rem .7rem 1.5rem 1rem;grid-template-columns:1fr auto;grid-template-areas:"company setting" "app setting"}.home_page__header--right{padding:1.5rem 1rem}.header__company-name{grid-area:company;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}.header__settings-button__icon{transform:rotate(90deg)}.home_page__nav{padding:1.5rem 1rem;gap:1rem;grid-template-columns:repeat(3,1fr);justify-items:center}.nav-button{display:flex;flex-direction:column;align-items:center;text-align:center;width:4rem}.nav-button__icon{height:3rem;width:3rem;padding:.8rem;border-radius:.8rem;margin-bottom:.8rem;fill:var(--accent-color)}.nav-button__name{font-size:.9rem}.fab{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{width:100%}#search_contacts{width:14rem;--padding:0.5rem 0.6rem;--background:rgba(var(--text-color), 0.1)}.search__icon{height:1.2rem}#selected_contact_options{margin-top:.5rem;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-weight:500;font-size:.9rem;color:rgba(var(--text-color),.8)}#contacts_container{display:grid;gap:1rem;height:100%;align-content:flex-start;overflow-y:auto;list-style:none;padding:0 1rem 6rem;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))}.contact-card{display:flex;width:100%;flex-direction:column;padding:1rem;min-height:8rem;align-self:flex-start;justify-content:center;border-radius:.5rem;box-shadow:0 .2rem .4rem rgba(0,0,0,.06)}.contact-card__checkbox{--border-radius:0.5rem;--border-color:rgba(var(--text-color), 0.6);position:absolute;top:0;right:0;margin:1rem}.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-bottom:1.5rem;align-items:center;justify-content:center;background-color:rgba(var(--text-color),.1)}.contact-card__name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:500;font-size:1rem;color:rgba(var(--text-color),.8)}.contact__grid{gap:1rem;grid-template-columns:1fr auto}.contact-card__more{padding:.4rem}.more-icon{height:1.2rem;width:1.2rem}#add_contact_button{right:0;bottom:0;margin:1.5rem}@media all and (max-width:640px){#main_card{min-height:100vh}.fab{position:fixed}#home_page{height:100%;grid-template-rows:auto 1fr}.home_page__section--right{align-content:flex-start}.home_page__nav{padding:.5rem 1rem 2rem;grid-template-columns:repeat(4,1fr)}}@media all and (min-width:640px){body{place-content:center;min-height:100vh}sm-popup{--width:24rem}.popup__header{padding:1rem 1.5rem 0 1rem}#main_card{width:80vw;height:80vh;border-radius:.5rem;box-shadow:0 1.5rem 1.5rem rgba(0,0,0,.16)}#home_page{height:100%;overflow-y:auto;grid-template-columns:20rem 1fr}.home_page__section--left{border-radius:.5rem 0 0 .5rem}.home_page__section--right{grid-template-rows:auto 1fr;border-radius:0 .5rem .5rem 0;box-shadow:-.5rem 0 1rem rgba(0,0,0,.06)}.home_page__header--left{padding:1.8rem 1.7rem 2rem 2.5rem}.home_page__header--right{padding:2rem 2.5rem}.home_page__nav{padding:0 2.5rem}#contacts_container{padding:0 2.5rem 8rem}#add_contact_button{right:0;bottom:0;margin:2rem 2.5rem}}@media all and (min-width:1280px){#main_card{width:65vw;height:85vh}}@media all and (min-width:1920px){#main_card{width:65vw;height:70vh}}@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,button{-webkit-tap-highlight-color:transparent;cursor:pointer;overflow:hidden}*,::after,::before{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{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);background:url(lighthouse.svg) center no-repeat;background-size:cover}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}.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}#main_header{grid-area:header;height:max-content;gap:.2rem .5rem;padding:1.5rem .7rem 1.5rem 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:.9rem;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{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 1.5rem;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{margin-top:.5rem;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;overflow:hidden;display:flex;width:calc(50% - 1rem);flex-direction:column;align-items:center;margin:0 1rem 1rem 0;padding:1.5rem 1rem;flex-shrink:0;cursor:pointer;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){body{min-height:100vh}#main_card{min-height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"header" "page" "nav";background:rgba(var(--foreground-color),.9)}#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{place-content:center;min-height:100vh}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);background:rgba(var(--foreground-color),.9)}#main_header{padding:1.5rem 1.2rem 1.5rem 2rem}#main_navbar{flex-direction:column;height:100%;padding:0 1rem;align-content:flex-start}#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:2rem 1.5rem}#contacts_container{padding:0 1rem 8rem 2rem}#add_contact_button{right:0;bottom:0;margin:2rem 2.5rem}}@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
diff --git a/css/main.scss b/css/main.scss
index 50e1f92..39178dc 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -12,8 +12,7 @@
     --ease-out-overshhot: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 body{
-    --accent-color: #3D5AFE;
-    --secondary-color: #ffac2e;
+    --accent-color: #6300d4;
     --text-color: 17, 17, 17;
     --text-color-light: 100, 100, 100;
     --foreground-color: 255, 255, 255;
@@ -24,8 +23,7 @@ body{
     background-size: cover;
 }
 body[data-theme='dark']{
-    --accent-color:#657cff;
-    --secondary-color: #d60739;
+    --accent-color:#d7b5ff;
     --text-color: 240, 240, 240;
     --text-color-light: 170, 170, 170;
     --foreground-color: 20, 20, 20;
@@ -129,38 +127,31 @@ sm-textarea{
     padding: 0.5rem;
     cursor: pointer;
 }
-.popup__header__title{
-    font-size: 1.1rem;
-    font-weight: 500;
-    color: rgba(var(--text-color), 0.8);
-}
 .close-icon{
     height: 2rem;
     width: 2rem;
 }
 #main_card{
-    
+    height: 100%;
+    grid-row: 1/3;
 }
-.home_page__section{
-    backdrop-filter: blur(1rem);
-    &--left{
-        background-color: rgba(var(--foreground-color), 0.8);
-    }
-    &--right{
-        overflow: hidden;
-        background-color: rgba(var(--foreground-color), 0.9);
-    }
+#main_header{
+    grid-area: header;
+    height: max-content;
+    gap: 0.2rem 0.5rem;
+    padding: 1.5rem 0.7rem 1.5rem 1rem;
+    grid-template-columns: 1fr auto;
+    grid-template-areas: 'company setting' 'app setting';
 }
-.home_page__header{
-    gap: 0.2rem 1rem;
-    &--left{
-        padding: 1.5rem 0.7rem 1.5rem 1rem;
-        grid-template-columns: 1fr auto;
-        grid-template-areas: 'company setting' 'app setting';
-    }
-    &--right{
-        padding: 1.5rem 1rem;
-    }
+#page_container{
+    grid-area: page;
+}
+.page{
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
 }
 .header__company-name{
     grid-area: company;
@@ -179,34 +170,30 @@ sm-textarea{
     grid-area: setting;
     padding: 0.8rem;
 }
-.header__settings-button__icon{
-    transform: rotate(90deg);
+#main_navbar{
+    grid-area: nav;
 }
-.home_page__nav{
-    padding: 1.5rem 1rem;
-    gap: 1rem;
-    grid-template-columns: repeat(3, 1fr);
-    justify-items: center;
-}
-
-.nav-button{
+.navbar__item{
     display: flex;
-    flex-direction: column;
     align-items: center;
-    text-align: center;
-    width: 4rem;
+    padding: 0.8rem;
+    border-radius: 0.5rem;
+    &--active{
+        
+        .navbar__item__icon{
+            fill: var(--accent-color);
+        }
+        .navbar__item__title{
+            color: var(--accent-color);
+        }
+    }
 }
 
-.nav-button__icon{
-    height: 3rem;
-    width: 3rem;
-    padding: 0.8rem;
-    border-radius: 0.8rem;
-    margin-bottom: 0.8rem;
-    fill: var(--accent-color);
-    background: rgba(var(--foreground-color), 1);
+.navbar__item__icon{
+    margin-right: 1rem;
+    fill: rgba(var(--text-color), 0.7);
 }
-.nav-button__name{
+.navbar__item__title{
     font-size: 0.9rem;
     font-weight: 500;
     color: rgba(var(--text-color), 0.7);
@@ -227,13 +214,21 @@ sm-textarea{
     fill: white;
 }
 
+
 #base_header{
     width: 100%;
 }
 .header__title{
-    font-weight: 500;
-    color: rgba(var(--text-color), 0.7);
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: rgba(var(--text-color), 0.8);
 }
+#send_flo_form{
+    padding: 0 1.5rem;
+    gap: 1rem;
+}
+
+
 #search_contacts{
     width: 14rem;
     --padding: 0.5rem 0.6rem;
@@ -274,23 +269,26 @@ sm-textarea{
 }
 
 #contacts_container{
-    display: grid;
-    gap: 1rem;
+    display: flex;
+    flex-wrap: wrap;
     height: 100%;
-    align-content: flex-start;
+    min-height: 0;
     overflow-y: auto;
     list-style: none;
-    padding: 0 1rem 6rem 1rem;
+    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: 100%;
+    width: calc(50% - 1rem);
     flex-direction: column;
-    padding: 1rem;
-    min-height: 8rem;
+    align-items: center;
+    margin: 0 1rem 1rem 0;
+    padding: 1.5rem 1rem;
+    flex-shrink: 0;
     cursor: pointer;
     align-self: flex-start;
     justify-content: center;
@@ -298,13 +296,15 @@ sm-textarea{
     background: rgba(var(--foreground-color), 1);
     box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
 }
+.contact-hidden-options{
+    position: absolute;
+    width: 100%;
+    top: 0;
+    padding: 0.5rem 0.8rem;
+}
 .contact-card__checkbox{
     --border-radius: 0.5rem;
     --border-color: rgba(var(--text-color), 0.6);
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin: 1rem;
 }
 .contact-card__initial{
     width: 3rem;
@@ -315,12 +315,13 @@ sm-textarea{
     text-align: center;
     user-select: none;
     border-radius: 1rem;
-    margin-bottom: 1.5rem;
+    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;
@@ -328,10 +329,6 @@ sm-textarea{
     font-size: 1rem;
     color: rgba(var(--text-color), 0.8);
 }
-.contact__grid{
-    gap: 1rem;
-    grid-template-columns: 1fr auto;
-}
 .contact-card__more{
     padding: 0.4rem;
 }
@@ -346,24 +343,36 @@ sm-textarea{
     margin: 1.5rem;
 }
 
+.page__header{
+    padding: 1rem 1rem 2rem 1rem;
+}
+.page__title{
+    font-size: 1.1rem;
+}
+
 // mobile only styles
 @media all and (max-width: 640px){
-    #main_card{
+    body{
         min-height: 100vh;
     }
-    .fab{
-        position: fixed;
+    #main_card{
+        min-height: 100%;
+        grid-template-rows: auto 1fr auto;
+        grid-template-areas: 'header' 'page' 'nav';
+        background: rgba(var(--foreground-color), 0.9);
     }
-    #home_page{
-        height: 100%;
-        grid-template-rows: auto 1fr;
+    #main_navbar{
+        flex-direction: row;
     }
-    .home_page__section--right{
-        align-content: flex-start;
+    .navbar__item{
+        flex: 1;
+        flex-direction: column;
     }
-    .home_page__nav{
-        padding: 0.5rem 1rem 2rem 1rem;
-        grid-template-columns: repeat(4, 1fr);
+    .navbar__item__icon{
+        margin: 0 0 0.5rem 0;
+    }
+    .navbar__item__icon{
+        margin: 0 0 0.5rem 0;
     }
 }
 
@@ -380,39 +389,46 @@ sm-textarea{
         padding: 1rem 1.5rem 0 1rem;
     }
     #main_card{
+        position: relative;
         width: 80vw;
         height: 80vh;
         border-radius: 0.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, 0.16);
+        background: rgba(var(--foreground-color), 0.9);
     }
-    #home_page{
+    #main_header{
+        padding: 1.5rem 1.2rem 1.5rem 2rem;
+    }
+    #main_navbar{
+        flex-direction: column;
         height: 100%;
-        overflow-y: auto;
-        grid-template-columns: 20rem 1fr;
+        padding: 0 1rem;
+        align-content: flex-start;
     }
-    .home_page__section{
-        &--left{
-            border-radius: 0.5rem 0 0 0.5rem;
-        }
-        &--right{
-            grid-template-rows: auto 1fr;
-            border-radius: 0 0.5rem 0.5rem 0;
-            box-shadow: -0.5rem 0 1rem rgba(0, 0, 0, 0.06);
+    #page_container{
+        position: relative;
+        grid-row: 1/3;
+        &::after{
+            content: '';
+            position: absolute;
+            left: 0;
+            height: 65%;
+            width: 1px;
+            background: rgba(var(--text-color), 0.2);
+            top: 50%;
+            transform: translateY(-50%);
         }
     }
-    .home_page__header{
-        &--left{
-            padding: 1.8rem 1.7rem 2rem 2.5rem;
-        }
-        &--right{
-            padding: 2rem 2.5rem;
-        }
-    }
-    .home_page__nav{
-        padding: 0 2.5rem;
+    .page__header{
+        padding: 2rem 1.5rem;
     }
     #contacts_container{
-        padding: 0 2.5rem 8rem 2.5rem;
+        padding: 0 1rem 8rem 2rem;
     }
     #add_contact_button{
         right: 0;
@@ -425,11 +441,14 @@ sm-textarea{
         width: 65vw;
         height: 85vh;
     }
+    .contact-card{
+        width: calc(33.33% - 1rem);
+    }
 }
 @media all and (min-width: 1920px){
     #main_card{
-        width: 65vw;
-        height: 70vh;
+        width: 60vw;
+        height: 65vh;
     }
 }
 @media (any-hover: hover){
diff --git a/new.html b/new.html
index 1844f3c..31519b6 100644
--- a/new.html
+++ b/new.html
@@ -35,14 +35,6 @@
     </sm-popup>
     <sm-notifications id="notification_drawer"></sm-notifications>
 
-    <!-- Popups -->
-
-    <sm-popup id="check_balance_popup">
-        <h2 id="current_balance">0</h2>
-        <sm-input placeholder="FLO address" floID required></sm-input>
-        <sm-button variant="primary" disable>Check</sm-button>
-    </sm-popup>
-
     <sm-popup id="contact_popup">
         <h3 id="contact_popup__initial">S</h3>
         <h4 id="contact_popup__name">Sairaj Mote</h4>
@@ -51,73 +43,41 @@
         </ul>
     </sm-popup>
 
-    <sm-popup id="send_flo_popup" open>
-        <header slot="header" class="popup__header">
-            <button class="popup__header__close">
-                <svg class="icon 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>
-            <h4 class="popup__header__title">Send FLO</h4>
-        </header>
-        <sm-input id="sender_adddress" placeholder="Sender's address" animate></sm-input>
-        <sm-input id="receiver_adddress" placeholder="Receiver's address" animate></sm-input>
-        <sm-input id="sent_amount" type="number" placeholder="Amount" animate></sm-input>
-        <sm-textarea id="sent_flo_data" rows="4" placeholder="FLO data"></sm-textarea>
-        <sm-button variant="primary" disable>Send</sm-button>
-    </sm-popup>
-
     <!--  -->
 
-    <main id="main_card">
-        <div id="home_page" class="page grid">
-            <section class="home_page__section home_page__section--left">
-                <header class="home_page__header home_page__header--left grid align-center">
-                    <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 header__settings-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                            <g>
-                                <path fill="none" d="M0 0h24v24H0z"/>
-                                <path d="M12 1l9.5 5.5v11L12 23l-9.5-5.5v-11L12 1zm0 14a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
-                            </g>
-                        </svg>
-                    </button>
-                </header>
-                <nav class="home_page__nav grid">
-                    <button id="send_flo_button" class="nav-button">
-                        <svg class="icon nav-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                            <g>
-                                <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"/>
-                            </g>
-                        </svg>
-                        <span class="nav-button__name">Send FLO</span>
-                    </button>
-                    <button id="check_balance_button" onclick="showPopup('check_balance_popup')" class="nav-button">
-                        <svg class="icon nav-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                            <g>
-                                <path fill="none" d="M0 0h24v24H0z"/>
-                                <path d="M22 6h-7a6 6 0 1 0 0 12h7v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2zm-7 2h8v8h-8a4 4 0 1 1 0-8zm0 3v2h3v-2h-3z"/>
-                            </g>
-                        </svg>                        
-                        <span class="nav-button__name">Check balance</span>
-                    </button>
-                    <button id="get_flo_button" class="nav-button">
-                        <svg class="icon nav-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0H24V24H0z"/><path d="M6 21.5c-1.933 0-3.5-1.567-3.5-3.5s1.567-3.5 3.5-3.5c1.585 0 2.924 1.054 3.355 2.5H15v-2h2V9.242L14.757 7H9V9H3V3h6v2h5.757L18 1.756 22.243 6 19 9.241V15L21 15v6h-6v-2H9.355c-.43 1.446-1.77 2.5-3.355 2.5zm0-5c-.828 0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5 1.5-.672 1.5-1.5-.672-1.5-1.5-1.5zm13 .5h-2v2h2v-2zM18 4.586L16.586 6 18 7.414 19.414 6 18 4.586zM7 5H5v2h2V5z"/></svg>
-                        <span class="nav-button__name">Get FLO address</span>
-                    </button>
-                    <button id="recover_flo_button" class="nav-button">
-                        <svg class="icon nav-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                            <g>
-                                <path fill="none" d="M0 0h24v24H0z"/>
-                                <path d="M8 7v4L2 6l6-5v4h5a8 8 0 1 1 0 16H4v-2h9a6 6 0 1 0 0-12H8z"/>
-                            </g>
-                        </svg>                                              
-                        <span class="nav-button__name">Recover FLO address</span>
-                    </button>
-                </nav>
-            </section>
-            <section class="home_page__section home_page__section--right grid">
-                <header class="home_page__header home_page__header--right flex direction-column">
+    <main id="main_card" class="grid">
+        <header id="main_header" class="grid align-center">
+            <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="home_button" class="navbar__item navbar__item--active">
+                <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="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
+                <span class="navbar__item__title">Dashboard</span>
+            </button>
+            <button id="send_flo_button" class="navbar__item">
+                <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">    
+                <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">
+                <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>
+            </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>
+        </nav>
+        <div id="page_container" class="flex">
+            <section class="page">
+                <header class="page__header flex direction-column">
                     <div id="base_header" class="flex space-between align-center">
                         <h4 class="header__title">Saved addresses</h4>
                         <sm-input id="search_contacts" placeholder="Search" type="search">
@@ -147,14 +107,14 @@
                 </header>
                 <ul id="contacts_container">
                     <li class="contact-card" data-flo-id="f1234">
-                        <sm-checkbox class="contact-card__checkbox"></sm-checkbox>
-                        <h3 class="contact-card__initial">S</h3>
-                        <div class="grid contact__grid align-center">
-                            <h4 class="contact-card__name">Sairaj</h4>
-                            <button class="contact-card__more">
+                        <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>
+                        <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">
@@ -166,6 +126,15 @@
                     </svg>                    
                 </button>
             </section>
+            <section id="send_flo_page" class="page hide-completely">
+                <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>
+                </form>
+            </section>
         </div>
     </main>
     <script src="script/components.js"></script>
diff --git a/script/components.js b/script/components.js
index 086ad03..fe1ecb9 100644
--- a/script/components.js
+++ b/script/components.js
@@ -195,6 +195,7 @@ border: none;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+    --font-size: 1rem;
     --border-radius: 0.3rem;
     --padding: 0.7rem 1rem;
     --background: rgba(var(--text-color), 0.06);
@@ -262,7 +263,7 @@ border: none;
 .label {
     opacity: .7;
     font-weight: 400;
-    font-size: 1rem;
+    font-size: var(--font-size);
     position: absolute;
     top: 0;
     -webkit-transition: -webkit-transform 0.3s;
@@ -300,7 +301,7 @@ border: none;
             flex: 1;
 }    
 input{
-    font-size: 1rem;
+    font-size: var(--font-size);
     border: none;
     background: transparent;
     outline: none;
@@ -510,13 +511,17 @@ customElements.define('sm-input',
                 this.max = parseInt(maxValue)
             }
             if (this.hasAttribute('minlength')) {
-                let minValue = this.getAttribute('minlength')
+                const minValue = this.getAttribute('minlength')
                 this.input.setAttribute('minlength', minValue)
             }
             if (this.hasAttribute('maxlength')) {
-                let maxValue = this.getAttribute('maxlength')
+                const maxValue = this.getAttribute('maxlength')
                 this.input.setAttribute('maxlength', maxValue)
             }
+            if (this.hasAttribute('step')) {
+                const steps = this.getAttribute('step')
+                this.input.setAttribute('step', steps)
+            }
             if (this.hasAttribute('pattern')) {
                 this.input.setAttribute('pattern', this.getAttribute('pattern'))
             }