diff --git a/css/main.css b/css/main.css
index d7e9760..1b8de75 100644
--- a/css/main.css
+++ b/css/main.css
@@ -8,6 +8,7 @@
 }
 
 :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);
@@ -21,8 +22,7 @@ body {
   --background-color: #efefef;
   --error-color: red;
   color: rgba(var(--text-color), 1);
-  background: url(lighthouse.svg) no-repeat center;
-  background-size: cover;
+  height: calc(100%);
 }
 
 body[data-theme=dark] {
@@ -81,6 +81,10 @@ sm-textarea {
   justify-content: space-between;
 }
 
+.full-width {
+  width: 100%;
+}
+
 .hide {
   opacity: 0;
   pointer-events: none;
@@ -161,13 +165,14 @@ sm-textarea {
 #main_card {
   height: 100%;
   grid-row: 1/3;
+  background: 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;
+  padding: 1rem 0.7rem 1rem 1rem;
   grid-template-columns: 1fr auto;
   grid-template-areas: "company setting" "app setting";
 }
@@ -227,7 +232,7 @@ sm-textarea {
 }
 
 .navbar__item__title {
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   font-weight: 500;
   color: rgba(var(--text-color), 0.7);
 }
@@ -248,6 +253,10 @@ sm-textarea {
   fill: white;
 }
 
+#dashboard_page__header {
+  height: 7.5rem;
+}
+
 #base_header {
   width: 100%;
 }
@@ -259,7 +268,7 @@ sm-textarea {
 }
 
 #send_flo_form {
-  padding: 0 1.5rem;
+  padding: 0 1rem;
   gap: 1rem;
 }
 
@@ -274,7 +283,6 @@ sm-textarea {
 }
 
 #selected_contact_options {
-  margin-top: 0.5rem;
   list-style: none;
 }
 
@@ -334,6 +342,7 @@ sm-textarea {
   border-radius: 0.5rem;
   background: rgba(var(--foreground-color), 1);
   box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
+  -webkit-tap-highlight-color: transparent;
 }
 
 .contact-hidden-options {
@@ -397,15 +406,10 @@ sm-textarea {
 }
 
 @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), 0.9);
   }
 
   #main_navbar {
@@ -427,8 +431,10 @@ sm-textarea {
 }
 @media all and (min-width: 640px) {
   body {
-    place-content: center;
-    min-height: 100vh;
+    align-items: center;
+    justify-content: center;
+    background: url(lighthouse.svg) no-repeat center;
+    background-size: cover;
   }
 
   sm-popup {
@@ -450,7 +456,6 @@ sm-textarea {
     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);
   }
 
   #main_header {
@@ -464,6 +469,10 @@ sm-textarea {
     align-content: flex-start;
   }
 
+  .navbar__item__title {
+    font-size: 0.9rem;
+  }
+
   #page_container {
     position: relative;
     grid-row: 1/3;
@@ -480,7 +489,7 @@ sm-textarea {
   }
 
   .page__header {
-    padding: 2rem 1.5rem;
+    padding: 1.5rem;
   }
 
   #contacts_container {
@@ -490,7 +499,7 @@ sm-textarea {
   #add_contact_button {
     right: 0;
     bottom: 0;
-    margin: 2rem 2.5rem;
+    margin: 2rem;
   }
 }
 @media all and (min-width: 1280px) {
diff --git a/css/main.min.css b/css/main.min.css
index 6b9deba..605820d 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-.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
+.contact-card,.interact,button{cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:hidden}*,::after,::before{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{height:100%;font-size:clamp(1rem,1.2vmax,3rem);--ease-in-overshhot:cubic-bezier(0.6, -0.28, 0.735, 0.045);--ease-out-overshhot:cubic-bezier(0.175, 0.885, 0.32, 1.275)}body{--accent-color:#6300d4;--text-color:17,17,17;--text-color-light:100,100,100;--foreground-color:255,255,255;--background-color:#efefef;--error-color:red;color:rgba(var(--text-color),1);height:calc(100%)}body[data-theme=dark]{--accent-color:#d7b5ff;--text-color:240,240,240;--text-color-light:170,170,170;--foreground-color:20,20,20;--error-color:rgb(255, 106, 106)}body[data-theme=dark] .contact-card{margin:.2rem 0;box-shadow:0 .1rem .5rem rgba(var(--text-color),.1)}button{position:relative;display:inline-flex;border:none;background:0 0;outline:0}button:focus-visible{outline:solid rgba(var(--text-color),1)}sm-input,sm-textarea{--border-radius:0.5rem}.flex{display:flex}.grid{display:grid}.align-center{align-items:center}#confirmation_popup,#prompt_popup,.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.full-width{width:100%}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.no-transformations{transform:none!important}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.2);pointer-events:none}.interact,.page{position:relative}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.7)}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{padding:.5rem 1.5rem 0 1rem;display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:center;width:100%}.popup__header__close{padding:.5rem;cursor:pointer}.close-icon{height:2rem;width:2rem}#main_card{height:100%;grid-row:1/3;background:rgba(var(--foreground-color),.9)}#main_header{grid-area:header;height:max-content;gap:.2rem .5rem;padding:1rem .7rem 1rem 1rem;grid-template-columns:1fr auto;grid-template-areas:"company setting" "app setting"}#page_container{grid-area:page}.page{display:flex;flex-direction:column;height:100%;width:100%}.header__company-name{grid-area:company;font-weight:500;color:rgba(var(--text-color),.7);align-self:flex-end}.header__app-name{align-self:flex-start;line-height:1;grid-area:app;font-weight:700;color:rgba(var(--text-color),.9)}.header__settings-button{grid-area:setting;padding:.8rem}#main_navbar{grid-area:nav}.navbar__item{display:flex;align-items:center;padding:.8rem;border-radius:.5rem}.navbar__item--active .navbar__item__icon{fill:var(--accent-color)}.navbar__item--active .navbar__item__title{color:var(--accent-color)}.navbar__item__icon{margin-right:1rem;fill:rgba(var(--text-color),.7)}.navbar__item__title{font-size:.85rem;font-weight:500;color:rgba(var(--text-color),.7)}.fab{position:absolute;display:inline-flex;border-radius:5rem;aspect-ratio:1/1;padding:.7rem;background:#FF1F1F;box-shadow:0 .5rem .5rem rgba(0,0,0,.16)}.fab__icon{height:1.8rem;width:1.8rem;fill:#fff}#dashboard_page__header{height:7.5rem}#base_header{width:100%}.header__title{font-size:1.1rem;font-weight:700;color:rgba(var(--text-color),.8)}.contact-card__name,.contact-option__name{font-weight:500;color:rgba(var(--text-color),.8)}#send_flo_form{padding:0 1rem;gap:1rem}#search_contacts{width:14rem;--padding:0.5rem 0.6rem;--background:rgba(var(--text-color), 0.1)}.search__icon{height:1.2rem}#selected_contact_options{list-style:none}.contact-option:not(:last-of-type){margin-right:.5rem}.contact-option:first-of-type{padding-right:.6rem;margin-right:auto;margin-left:-.6rem}.contact-option__button{display:inline-flex;align-items:center;border-radius:.3rem;padding:.5rem .6rem}.contact-option__icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.contact-option__name{font-size:.9rem}#contacts_container{display:flex;flex-wrap:wrap;height:100%;min-height:0;overflow-y:auto;list-style:none;align-content:flex-start;padding:0 0 6rem 1rem;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))}.contact-card{position:relative;display:flex;width:calc(50% - 1rem);flex-direction:column;align-items:center;margin:0 1rem 1rem 0;padding:1.5rem 1rem;flex-shrink:0;align-self:flex-start;justify-content:center;border-radius:.5rem;background:rgba(var(--foreground-color),1);box-shadow:0 .2rem .4rem rgba(0,0,0,.06)}.contact-hidden-options{position:absolute;width:100%;top:0;padding:.5rem .8rem}.contact-card__checkbox{--border-radius:0.5rem;--border-color:rgba(var(--text-color), 0.6)}.contact-card__initial{width:3rem;height:3rem;display:flex;padding:1.5rem;font-size:1.2rem;text-align:center;user-select:none;border-radius:1rem;margin:1.5rem 0;align-items:center;justify-content:center;background-color:rgba(var(--text-color),.1)}.contact-card__name{text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:1rem}.contact-card__more{padding:.4rem}.more-icon{height:1.2rem;width:1.2rem}#add_contact_button{right:0;bottom:0;margin:1.5rem}.page__header{padding:1rem 1rem 2rem}.page__title{font-size:1.1rem}@media all and (max-width:640px){#main_card{min-height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"header" "page" "nav"}#main_navbar{flex-direction:row}.navbar__item{flex:1;flex-direction:column}.navbar__item__icon{margin:0 0 .5rem}}@media all and (min-width:640px){body{align-items:center;justify-content:center;background:url(lighthouse.svg) center no-repeat;background-size:cover}sm-popup{--width:24rem}.popup__header{padding:1rem 1.5rem 0 1rem}#main_card{position:relative;width:80vw;height:80vh;border-radius:.5rem;overflow:hidden;backdrop-filter:blur(1rem);grid-template-columns:15rem 1fr;grid-template-rows:min-content 1fr;grid-template-areas:"header page" "nav page";box-shadow:0 1.5rem 1.5rem rgba(0,0,0,.16)}#main_header{padding:1.5rem 1.2rem 1.5rem 2rem}#main_navbar{flex-direction:column;height:100%;padding:0 1rem;align-content:flex-start}.navbar__item__title{font-size:.9rem}#page_container{position:relative;grid-row:1/3}#page_container::after{content:"";position:absolute;left:0;height:65%;width:1px;background:rgba(var(--text-color),.2);top:50%;transform:translateY(-50%)}.page__header{padding:1.5rem}#contacts_container{padding:0 1rem 8rem 2rem}#add_contact_button{right:0;bottom:0;margin:2rem}}@media all and (min-width:1280px){#main_card{width:65vw;height:85vh}.contact-card{width:calc(33.33% - 1rem)}}@media all and (min-width:1920px){#main_card{width:60vw;height:65vh}}@media (any-hover:hover){.contact-card__checkbox:not([checked]):not(:focus-within),.contact-card__more:not(:focus-within){opacity:0;transition:opacity .3s}.contact-card:hover .contact-card__checkbox,.contact-card:hover .contact-card__more{opacity:1}.contact-option__button{transition:background .3s}.contact-option__button:hover{background-color:rgba(var(--text-color),.1)}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 39178dc..afd6042 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -7,6 +7,7 @@
     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);
@@ -19,8 +20,7 @@ body{
     --background-color: #efefef;
     --error-color: red;
     color: rgba(var(--text-color), 1);
-    background: url(lighthouse.svg) no-repeat center;
-    background-size: cover;
+    height: calc(100%);
 }
 body[data-theme='dark']{
     --accent-color:#d7b5ff;
@@ -68,6 +68,9 @@ sm-textarea{
 .space-between{
     justify-content: space-between;
 }
+.full-width{
+    width: 100%;
+}
 .hide{
     opacity: 0;
     pointer-events: none;
@@ -134,12 +137,13 @@ sm-textarea{
 #main_card{
     height: 100%;
     grid-row: 1/3;
+    background: 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;
+    padding: 1rem 0.7rem 1rem 1rem;
     grid-template-columns: 1fr auto;
     grid-template-areas: 'company setting' 'app setting';
 }
@@ -179,7 +183,6 @@ sm-textarea{
     padding: 0.8rem;
     border-radius: 0.5rem;
     &--active{
-        
         .navbar__item__icon{
             fill: var(--accent-color);
         }
@@ -194,7 +197,7 @@ sm-textarea{
     fill: rgba(var(--text-color), 0.7);
 }
 .navbar__item__title{
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     font-weight: 500;
     color: rgba(var(--text-color), 0.7);
 }
@@ -214,7 +217,9 @@ sm-textarea{
     fill: white;
 }
 
-
+#dashboard_page__header{
+    height: 7.5rem;
+}
 #base_header{
     width: 100%;
 }
@@ -224,7 +229,7 @@ sm-textarea{
     color: rgba(var(--text-color), 0.8);
 }
 #send_flo_form{
-    padding: 0 1.5rem;
+    padding: 0 1rem;
     gap: 1rem;
 }
 
@@ -238,7 +243,6 @@ sm-textarea{
     height: 1.2rem;
 }
 #selected_contact_options{
-    margin-top: 0.5rem;
     list-style: none;
 }
 .contact-option{
@@ -295,6 +299,7 @@ sm-textarea{
     border-radius: 0.5rem;
     background: rgba(var(--foreground-color), 1);
     box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
+    -webkit-tap-highlight-color: transparent;
 }
 .contact-hidden-options{
     position: absolute;
@@ -352,14 +357,10 @@ sm-textarea{
 
 // mobile only styles
 @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), 0.9);
     }
     #main_navbar{
         flex-direction: row;
@@ -379,8 +380,10 @@ sm-textarea{
 // desktop only styles
 @media all and (min-width: 640px){
     body{
-        place-content: center;
-        min-height: 100vh;
+        align-items: center;
+        justify-content: center;
+        background: url(lighthouse.svg) no-repeat center;
+        background-size: cover;
     }
     sm-popup{
         --width: 24rem;
@@ -399,7 +402,6 @@ sm-textarea{
         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);
     }
     #main_header{
         padding: 1.5rem 1.2rem 1.5rem 2rem;
@@ -410,6 +412,9 @@ sm-textarea{
         padding: 0 1rem;
         align-content: flex-start;
     }
+    .navbar__item__title{
+        font-size: 0.9rem;
+    }
     #page_container{
         position: relative;
         grid-row: 1/3;
@@ -425,7 +430,7 @@ sm-textarea{
         }
     }
     .page__header{
-        padding: 2rem 1.5rem;
+        padding: 1.5rem;
     }
     #contacts_container{
         padding: 0 1rem 8rem 2rem;
@@ -433,7 +438,7 @@ sm-textarea{
     #add_contact_button{
         right: 0;
         bottom: 0;
-        margin: 2rem 2.5rem;
+        margin: 2rem;
     }
 }
 @media all and (min-width: 1280px){
diff --git a/new.html b/new.html
index 31519b6..e72bdde 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="grid" data-theme="light">
+<body class="flex" data-theme="light">
     <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">
@@ -54,11 +54,11 @@
             </button>
         </header>
         <nav id="main_navbar" class="flex">
-            <button id="home_button" class="navbar__item navbar__item--active">
+            <button id="dashboard_page_button" class="navbar__item" data-target-page="dashboard_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="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">
+            <button id="send_flo_page_button" class="navbar__item" data-target-page="send_flo_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="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>
@@ -66,7 +66,7 @@
                 <svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="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">
+            <button id="get_flo_button" class="navbar__item" data-target-page="get_flo_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>
             </button>
@@ -76,15 +76,21 @@
             </button>
         </nav>
         <div id="page_container" class="flex">
-            <section class="page">
-                <header class="page__header flex direction-column">
+            <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>
-                        <sm-input id="search_contacts" placeholder="Search" type="search">
-                            <svg slot="icon" class="icon search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/></svg>
-                        </sm-input>
+                        <button class="back-button">
+                            <svg class="icon search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/></svg>
+                        </button>                            
+                        <div class="expanding-search flex align-center hide-completely">
+                            <button class="back-button">
+                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg>
+                            </button>                            
+                            <sm-input id="search_contacts" placeholder="Search" type="search"></sm-input>
+                        </div>
                     </div>
-                    <ul id="selected_contact_options" class="flex align-center hide-completely">
+                    <ul id="selected_contact_options" class="flex align-center full-width hide-completely">
                         <li class="contact-option">
                             <button class="contact-option__button" onclick="clearSelection()">
                                 <svg class="icon contact-option__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
@@ -538,6 +544,12 @@
         };
     </script>
     <script>
+        const activePage = {}
+
+        window.addEventListener('load', e => {
+            console.log('loaded')
+            showPage('dashboard_page')
+        })
 
         // Animations
         //Fly animation
@@ -657,7 +669,23 @@
                 const card = e.target.closest('.contact-card')
                 createRipple(e, card)
             }
+            else if(e.target.closest('.navbar__item')){
+                showPage(e.target.closest('.navbar__item').dataset.targetPage)
+            }
         })
+
+        function showPage(pageId){
+            if(activePage.pageId === pageId) return
+            if(activePage.pageId){
+                getRef(activePage.pageId).classList.add('hide-completely')
+                activePage.button.classList.remove('navbar__item--active')
+            }
+            getRef(pageId).classList.remove('hide-completely')
+            const activeButton = getRef(`${pageId}_button`)
+            activeButton.classList.add('navbar__item--active')
+            activePage.pageId = pageId
+            activePage.button = activeButton
+        }
         
         const selectedContacts = new Set()
         document.addEventListener('change', e => {
@@ -689,13 +717,22 @@
             }
             if(show){
                 if(!getRef('selected_contact_options').classList.contains('hide-completely')) return
-                getRef('selected_contact_options').classList.remove('hide-completely')
-                getRef('selected_contact_options').animate(slideInDown, options)
+                
+                getRef('base_header').animate(slideOutLeft, options)
+                .onfinish = () => {
+                    getRef('base_header').classList.add('hide-completely')
+                    getRef('selected_contact_options').classList.remove('hide-completely')
+                    getRef('selected_contact_options').animate(slideInLeft, options)
+                }
             }
             else{
                 if(getRef('selected_contact_options').classList.contains('hide-completely')) return
-                getRef('selected_contact_options').animate(slideOutUp, options).onfinish = () => {
+
+                getRef('selected_contact_options').animate(slideOutRight, options)
+                .onfinish = () => {
                     getRef('selected_contact_options').classList.add('hide-completely')
+                    getRef('base_header').classList.remove('hide-completely')
+                    getRef('base_header').animate(slideInRight, options)
                 }
             }
         }
@@ -706,6 +743,7 @@
             })
             selectedContacts.clear()
         }
+
     </script>
     <script>
         //UI for webWallet
diff --git a/script/components.js b/script/components.js
index fe1ecb9..f316f44 100644
--- a/script/components.js
+++ b/script/components.js
@@ -2562,6 +2562,9 @@ smNotifications.innerHTML = `
                 transform: none;
         opacity: 1;
     }
+    .notification-panel:empty{
+        display:none;
+    }
     .notification{
         display: -webkit-box;
         display: -ms-flexbox;
@@ -2678,8 +2681,7 @@ smNotifications.innerHTML = `
         }
     }
 </style>
-<div class="notification-panel">
-</div>
+<div class="notification-panel"></div>
 `
 
 customElements.define('sm-notifications', class extends HTMLElement {