diff --git a/css/main.css b/css/main.css
index 82e3f74..8a4e13f 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,6 +1,4 @@
-*,
-::before,
-::after {
+* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
@@ -8,22 +6,23 @@
 }
 
 :root {
-  scroll-behavior: smooth;
-  font-size: clamp(1rem, 1.2vmax, 3rem);
+  font-size: clamp(1rem, 1.2vmax, 1.2rem);
 }
 
-html, body {
+html,
+body {
   height: 100%;
 }
 
 body {
-  --accent-color: #3D5AFE;
+  --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;
+  --text-color: 20, 20, 20;
+  --foreground-color: 252, 253, 255;
+  --background-color: 241, 243, 248;
+  --danger-color: rgb(255, 75, 75);
+  --green: #1cad59;
+  --yellow: rgb(220, 165, 0);
   color: rgba(var(--text-color), 1);
   background: rgba(var(--foreground-color), 1);
 }
@@ -33,12 +32,14 @@ body #scroll_to_bottom {
 }
 
 body[data-theme=dark] {
-  --accent-color:#3D5AFE;
+  --accent-color: #6d83ff;
   --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);
+  --text-color: 220, 220, 220;
+  --foreground-color: 27, 28, 29;
+  --background-color: 21, 22, 22;
+  --danger-color: rgb(255, 106, 106);
+  --green: #00e676;
+  --yellow: rgb(255, 213, 5);
 }
 body[data-theme=dark] .initial {
   color: rgba(var(--text-color), 1) !important;
@@ -52,190 +53,415 @@ body[data-theme=dark] #scroll_to_bottom {
   box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.3);
 }
 
-p {
-  line-height: 1.6;
-}
-
-h1 {
-  font-size: 3rem;
-}
-
-h2 {
-  font-size: 2rem;
-}
-
-h3 {
-  font-size: 1.5rem;
-}
-
-h4 {
-  font-size: 1.1rem;
-}
-
-h5 {
-  font-size: 0.8rem;
-}
-
-h1, h2, h3, h4, h5 {
-  color: rgba(var(--text-color), 1);
-  font-weight: 600;
-}
-
-textarea {
-  background: rgba(var(--text-color), 0.06);
-  border: none;
-  border-radius: 0.3rem;
-  width: 100%;
-  padding: 1rem;
-  font-size: 1rem;
-  color: rgba(var(--text-color), 1);
-  resize: none;
-  line-height: 1.6;
-}
-textarea:focus {
-  outline: none;
-  box-shadow: 0 0 0 0.1rem var(--accent-color);
-}
-
+p,
 strong {
+  font-size: 0.9rem;
+  max-width: 65ch;
+  line-height: 1.7;
+  color: rgba(var(--text-color), 0.9);
+}
+
+.warning {
+  line-height: normal;
+  padding: 1rem;
+  background-color: khaki;
+  border-radius: 0.5rem;
   font-weight: 500;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+a {
+  text-decoration: none;
+  color: var(--accent-color);
+}
+a:focus-visible {
+  box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+}
+
+a.button {
+  padding: 0.4rem 0.6rem;
+  border-radius: 0.3rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: inherit;
+}
+
+button,
+.button {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  position: relative;
+  display: inline-flex;
+  border: none;
+  background-color: transparent;
+  overflow: hidden;
+  color: inherit;
+  -webkit-tap-highlight-color: transparent;
+  align-items: center;
+  font-size: 0.9rem;
+  font-weight: 500;
+  white-space: nowrap;
+  padding: 0.8rem;
+  border-radius: 0.3rem;
+  justify-content: center;
+}
+button:focus-visible,
+.button:focus-visible {
+  outline: var(--accent-color) solid medium;
+}
+button:not(:disabled),
+.button:not(:disabled) {
+  cursor: pointer;
+}
+
+.button {
+  background-color: rgba(var(--text-color), 0.06);
+}
+.button--primary, .button--danger {
+  color: rgba(var(--background-color), 1) !important;
+}
+.button--primary .icon, .button--danger .icon {
+  fill: rgba(var(--background-color), 1);
+}
+.button--primary {
+  background-color: var(--accent-color);
+}
+.button--danger {
+  background-color: var(--danger-color);
+}
+.button--small {
+  padding: 0.4rem 0.6rem;
+}
+
+.cta {
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  padding: 0.8rem 1rem;
+}
+
+.icon {
+  width: 1.2rem;
+  height: 1.2rem;
+  fill: rgba(var(--text-color), 0.8);
+  flex-shrink: 0;
+}
+
+.icon-only {
+  padding: 0.5rem;
+  border-radius: 0.3rem;
+}
+
+button:disabled {
+  opacity: 0.5;
+}
+
+a:-webkit-any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:-moz-any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+details summary {
+  display: flex;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--accent-color);
+}
+
+details[open] summary {
+  margin-bottom: 1rem;
+}
+details[open] > summary .down-arrow {
+  transform: rotate(180deg);
+}
+
+sm-input,
+sm-textarea {
+  font-size: 0.9rem;
+  --border-radius: 0.3rem;
+  --background-color: rgba(var(--foreground-color), 1);
+}
+sm-input button .icon,
+sm-textarea button .icon {
+  fill: var(--accent-color);
+}
+
+sm-button {
+  --padding: 0.8rem;
+}
+sm-button[variant=primary] .icon {
+  fill: rgba(var(--background-color), 1);
+}
+sm-button[disabled] .icon {
+  fill: rgba(var(--text-color), 0.6);
+}
+sm-button.danger {
+  --background: var(--danger-color);
+  color: rgba(var(--background-color), 1);
+}
+
+sm-spinner {
+  --size: 1rem;
+  --stroke-width: 0.1rem;
+}
+
+sm-form {
+  --gap: 1rem;
+}
+
+sm-select {
+  --padding: 0.8rem;
+  font-size: 0.9rem;
+}
+
+sm-option {
+  font-size: 0.9rem;
+}
+
+strip-select {
+  --gap: 0;
+  background-color: rgba(var(--text-color), 0.06);
+  border-radius: 0.3rem;
+  padding: 0.3rem;
+}
+
+strip-option {
+  font-size: 0.8rem;
+  --border-radius: 0.2rem;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+ol {
+  counter-reset: item;
+}
+ol li {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  counter-increment: item;
+}
+ol li:not(:last-of-type) {
+  padding-bottom: 1.5rem;
+}
+ol li:not(:last-of-type)::after {
+  content: "";
+  position: absolute;
+  width: 0.1rem;
+  height: calc(100% - 2.2rem);
+  background: var(--accent-color);
+  margin-left: 0.7rem;
+  margin-top: 2rem;
+}
+ol li::before {
+  content: counter(item);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 0.8rem;
+  font-weight: 500;
+  margin-top: 0.15rem;
+  margin-right: 1rem;
+  line-height: 1;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 100%;
+  flex-shrink: 0;
+  color: rgba(var(--text-color), 0.8);
+  background: rgba(var(--text-color), 0.1);
+}
+
+.overflow-ellipsis {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.breakable {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  -webkit-hyphens: auto;
+      -ms-hyphens: auto;
+          hyphens: auto;
+}
+
+.full-bleed {
+  grid-column: 1/-1;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+}
+
+.top-0 {
+  top: 0;
 }
 
 .flex {
   display: flex;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
 .grid {
   display: grid;
 }
 
-.grid-2 {
-  grid-template-columns: auto auto;
-  gap: 1em;
+.flow-column {
+  grid-auto-flow: column;
+}
+
+.gap-0-3 {
+  gap: 0.3rem;
+}
+
+.gap-0-5 {
+  gap: 0.5rem;
+}
+
+.gap-1 {
+  gap: 1rem;
+}
+
+.gap-1-5 {
+  gap: 1.5rem;
+}
+
+.gap-2 {
+  gap: 2rem;
+}
+
+.gap-3 {
+  gap: 3rem;
+}
+
+.text-align-right {
+  text-align: right;
+}
+
+.align-start {
+  align-content: flex-start;
 }
 
 .align-center {
   align-items: center;
 }
 
+.align-end {
+  align-items: flex-end;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.justify-start {
+  justify-items: start;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
 .justify-right {
   margin-left: auto;
 }
 
-.direction-column {
+.align-self-center {
+  align-self: center;
+}
+
+.align-self-end {
+  align-self: end;
+}
+
+.justify-self-center {
+  justify-self: center;
+}
+
+.justify-self-start {
+  justify-self: start;
+}
+
+.justify-self-end {
+  justify-self: end;
+}
+
+.flex-direction-column {
   flex-direction: column;
 }
 
-.rest {
-  flex: 1;
+.space-between {
+  justify-content: space-between;
 }
 
-.hide {
-  opacity: 0;
-  pointer-events: none;
+.w-100 {
+  width: 100%;
 }
 
-.hide-completely {
-  display: none !important;
+.h-100 {
+  height: 100%;
 }
 
-.no-transformations {
-  transform: none !important;
-}
-
-.breakable {
-  overflow-wrap: break-word;
-}
-
-.text-overflow {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.sticky {
-  position: sticky;
-  top: 1rem;
-}
-
-.light-text {
-  color: rgba(var(--text-color-light), 1);
-}
-
-.accent-color {
-  color: var(--accent-color);
-}
-
-.secondary-color {
-  color: var(--secondary-color);
-}
-
-.fab {
-  filter: drop-shadow(0 0.4rem 0.3rem rgba(0, 0, 0, 0.2));
-  margin: 1.5rem;
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  --padding: 0.9rem 1.6rem;
-}
-.fab .icon {
-  margin-left: 0 !important;
-  margin-right: 0.5rem;
-  height: 1.2rem;
-  width: 1.2rem;
-  stroke-width: 8;
-  stroke: white;
-}
-
-a:-webkit-any-link {
-  word-wrap: break-word;
-  color: var(--accent-color);
+.label {
+  font-size: 0.8rem;
+  color: rgba(var(--text-color), 0.8);
   font-weight: 500;
+  margin-bottom: 0.2rem;
 }
 
-a:-moz-any-link {
-  word-wrap: break-word;
-  color: var(--accent-color);
-  font-weight: 500;
-}
-
-a:any-link {
-  word-wrap: break-word;
-  color: var(--accent-color);
-  font-weight: 500;
-}
-
-.solid-background {
-  background: var(--background-color) !important;
-}
-
-.normal-weight {
-  font-weight: normal;
-}
-
-.warning {
-  display: flex;
-  background: wheat;
-  color: #111;
-}
-
-.icon {
-  fill: none;
-  stroke-width: 6;
-  stroke: rgba(var(--text-color), 1);
-  height: 1.2rem;
-  width: 1.2rem;
-  overflow: visible;
-  stroke-linecap: round;
-  stroke-linejoin: round;
+.button--primary .ripple,
+.button--danger .ripple {
+  background: radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);
 }
 
 .ripple {
+  height: 8rem;
+  width: 8rem;
   position: absolute;
   border-radius: 50%;
   transform: scale(0);
-  background: rgba(var(--text-color), 0.2);
+  background: radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);
   pointer-events: none;
 }
 
@@ -246,58 +472,88 @@ a:any-link {
   -webkit-tap-highlight-color: transparent;
 }
 
-sm-input {
-  --border-radius: 0.5rem;
+.empty-state {
+  display: grid;
+  width: 100%;
+  padding: 1.5rem 0;
 }
 
-sm-popup sm-input + sm-input {
-  margin-top: 1rem;
+.observe-empty-state:empty {
+  display: none !important;
 }
 
-.popup-header {
-  padding: 0.5rem 1.5rem 0 1.5rem;
+.observe-empty-state:not(:empty) + .empty-state {
+  display: none !important;
+}
+
+.bullet-point {
   display: flex;
   align-items: center;
-  width: 100%;
+  justify-content: center;
+  margin: 0 0.8ch;
 }
-.popup-header .icon {
-  padding: 0.7rem;
-  height: 2.4rem;
-  width: 2.4rem;
-  stroke-width: 8;
-  transform: translateX(-0.5rem);
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
-.popup-header .back {
-  transform: none;
-}
-.popup-header button,
-.popup-header sm-button {
-  width: auto;
-  margin-left: auto;
+.bullet-point::after {
+  content: "";
+  height: 0.4ch;
+  width: 0.4ch;
+  border-radius: 0.5em;
+  background-color: var(--accent-color);
 }
 
-.copy-row {
+.margin-right-0-5 {
+  margin-right: 0.5rem;
+}
+
+.margin-left-0-5 {
+  margin-left: 0.5rem;
+}
+
+.icon-button {
+  padding: 0.6rem;
+  border-radius: 0.8rem;
+  background-color: rgba(var(--text-color), 0.1);
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
+}
+.icon-button .icon {
+  fill: var(--accent-color);
+}
+
+.fab {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  margin: 1.5rem;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
+  z-index: 2;
+}
+
+.page {
+  height: 100%;
+}
+.page__header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+  min-height: 8rem;
+}
+.page__header .grid {
+  margin-top: auto;
+}
+.page__header h1 {
+  margin-top: auto;
+  font-size: 2rem;
+}
+
+.page-layout {
   display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: center;
-  gap: 0.5rem;
-  width: auto;
+  gap: 1.5rem 0;
+  grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
+  align-content: flex-start;
 }
-.copy-row .icon {
-  cursor: pointer;
-  padding: 0.4rem;
-  height: 1.8rem;
-  width: 1.8rem;
-}
-.copy-row .copy {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.copy-row h4 {
-  margin-bottom: 0 !important;
+.page-layout > * {
+  grid-column: 2/3;
 }
 
 #confirmation_popup,
@@ -306,7 +562,6 @@ sm-popup sm-input + sm-input {
 }
 #confirmation_popup h4,
 #prompt_popup h4 {
-  font-weight: 500;
   margin-bottom: 0.5rem;
 }
 #confirmation_popup sm-button,
@@ -324,12 +579,66 @@ sm-popup sm-input + sm-input {
   margin-left: auto;
 }
 
-.page {
-  align-items: flex-start;
+#prompt_message {
+  margin-bottom: 1.5rem;
+}
+
+.popup__header {
+  display: grid;
+  gap: 0.5rem;
   width: 100%;
+  padding: 0 1.5rem;
+  align-items: center;
+}
+
+.popup__header__close {
+  padding: 0.5rem;
+  margin-left: -0.5rem;
+}
+
+.flo-icon {
+  margin-right: 0.3rem;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+#secondary_pages {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+#secondary_pages header {
+  padding: 1.5rem;
+}
+#secondary_pages .inner-page {
   height: 100%;
 }
 
+#sign_in,
+#sign_up {
+  justify-items: center;
+  align-content: center;
+}
+#sign_in section,
+#sign_up section {
+  margin-top: -8rem;
+  width: min(24rem, 100%);
+}
+#sign_in sm-form,
+#sign_up sm-form {
+  margin: 2rem 0;
+}
+
+#sign_up .h2 {
+  margin-bottom: 0.5rem;
+}
+#sign_up .card {
+  margin: 1.5rem 0;
+}
+#sign_up h5 {
+  color: rgba(var(--text-color), 0.8);
+}
+
 .card {
   display: flex;
   flex-direction: column;
@@ -439,87 +748,6 @@ sm-button[variant=primary] {
   width: 100%;
 }
 
-#sign_in {
-  padding: 1.5rem;
-  width: 100%;
-  height: 100%;
-  align-items: flex-start;
-}
-#sign_in .flex {
-  width: 100%;
-  flex: 1;
-}
-#sign_in sm-input {
-  margin: 1.5rem 0;
-}
-#sign_in h2 {
-  margin-top: 2rem;
-  font-weight: 500;
-}
-#sign_in h4 {
-  font-weight: 500;
-  margin-bottom: 1.5rem;
-}
-#sign_in h5 {
-  opacity: 0.8;
-  font-weight: 500;
-}
-#sign_in pin-input {
-  margin: 1rem 0 2rem 0;
-}
-#sign_in sm-button {
-  width: 100%;
-  --padding: 0.8rem 1.6rem;
-}
-#sign_in #remove_account {
-  margin-top: 1rem;
-}
-#sign_in p {
-  margin-bottom: 0.5rem;
-  max-width: 35ch;
-  margin-top: 0.5rem;
-}
-
-.frame {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  width: min(24rem, 100%);
-  justify-self: center;
-  padding: 1.5rem;
-}
-.frame .h2 {
-  margin-bottom: 1rem;
-  font-weight: 500;
-}
-.frame sm-button[variant=primary] {
-  margin-top: 1.5rem;
-}
-
-#frame_1 .warning {
-  margin: 1rem 0;
-  padding: 1rem;
-  border-radius: 0.5rem;
-}
-#frame_1 #generate_flo_id {
-  width: 100%;
-}
-#frame_1 #credentials_section {
-  -webkit-animation: slide-down 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-          animation: slide-down 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  margin: 2rem 0;
-}
-#frame_1 h4, #frame_1 h5 {
-  font-weight: 500;
-}
-#frame_1 .copy-row:not(:last-of-type) {
-  margin-bottom: 1.5rem;
-}
-
-#frame_2 pin-input {
-  margin: 1rem 0;
-}
-
 @-webkit-keyframes slide-down {
   from {
     transform: translateY(-1rem);
@@ -614,8 +842,13 @@ sm-button[variant=primary] {
   }
 }
 #main_page {
-  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto 1fr;
   height: 100%;
+  width: 100%;
+  transition: background-color 0.3s;
+  background-color: rgba(var(--foreground-color), 1);
 }
 
 .initial {
@@ -678,22 +911,21 @@ sm-button[variant=primary] {
 .contact .initial {
   grid-area: dp;
 }
+.contact .name,
+.contact .last-message {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  color: rgba(var(--text-color), 0.8);
+}
 .contact .name {
   width: 100%;
   font-size: 1em;
   font-weight: 500;
-  color: rgba(var(--text-color), 0.8);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
 }
 .contact .last-message {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   font-weight: 400;
   font-size: 0.9em;
-  color: rgba(var(--text-color), 0.8);
 }
 .contact .menu {
   grid-area: menu;
@@ -730,24 +962,6 @@ sm-button[variant=primary] {
   stroke: rgba(var(--foreground-color), 0.8);
 }
 
-#selected_contacts {
-  padding: 1rem 1.5rem;
-}
-#selected_contacts h4 {
-  font-weight: 500;
-  font-size: 1rem;
-}
-#selected_contacts .warning {
-  font-size: 0.9rem;
-  padding: 0.5rem 0.8rem;
-  border-radius: 0.5rem;
-  margin: 1rem 0;
-  line-height: 1.5;
-}
-#selected_contacts sm-button {
-  margin-bottom: 0;
-}
-
 #selected_contacts_container {
   display: flex;
   overflow: auto hidden;
@@ -821,11 +1035,14 @@ sm-button[variant=primary] {
   background: none;
 }
 
-#warn_no_encryption, .date-card, .group-event-card {
-  padding: 0.4rem 0.8rem;
+#warn_no_encryption,
+.date-card,
+.group-event-card {
+  padding: 0.4rem 0.6rem;
   font-weight: 500;
+  font-size: 0.8rem;
   background-color: rgba(var(--text-color), 0.04);
-  border-radius: 0.5rem;
+  border-radius: 0.3rem;
   color: rgba(var(--text-color), 0.8);
   margin: 1rem 0;
   justify-self: center;
@@ -863,7 +1080,8 @@ sm-button[variant=primary] {
   transform: scale(1);
 }
 
-.mail-card.unread .time, .mail-card.unread .date,
+.mail-card.unread .time,
+.mail-card.unread .date,
 .contact.unread .time,
 .contact.unread .date {
   color: var(--accent-color);
@@ -872,7 +1090,9 @@ sm-button[variant=primary] {
 .contact.unread h4 {
   color: rgba(var(--text-color), 1);
 }
-.mail-card.unread h4, .mail-card.unread h5, .mail-card.unread p,
+.mail-card.unread h4,
+.mail-card.unread h5,
+.mail-card.unread p,
 .contact.unread h4,
 .contact.unread h5,
 .contact.unread p {
@@ -1032,51 +1252,66 @@ sm-button[variant=primary] {
 }
 
 #main_navbar {
-  position: fixed;
-  flex-direction: column;
+  display: flex;
+  background: rgba(var(--text-color), 0.03);
+}
+#main_navbar.hide-away {
+  position: absolute;
+}
+#main_navbar ul {
+  display: flex;
   height: 100%;
-  bottom: 0;
-  top: 0;
-  padding: 0;
-  width: max(16rem, 60vw);
-  background: rgba(var(--foreground-color), 1);
+  width: 100%;
 }
-#main_navbar .logo-section {
-  padding: 0 1rem;
+#main_navbar ul li {
+  width: 100%;
 }
-#main_navbar .active {
-  background: var(--accent-color);
-}
-#main_navbar .active .icon {
-  stroke: white;
-}
-#main_navbar .active .label {
-  color: white;
-}
-#main_navbar .label {
+
+.nav-item {
+  position: relative;
+  display: flex;
+  flex: 1;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0.3rem;
+  color: var(--text-color);
+  font-size: 0.8rem;
+  border-radius: 0.3rem;
   font-weight: 500;
-  font-size: 0.9rem;
 }
-#main_navbar .navbar-item {
-  height: auto;
-  justify-content: flex-start;
-  flex-direction: row;
-  flex: none;
-  padding: 1rem;
+.nav-item .icon {
+  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
-#main_navbar .navbar-item .icon {
-  height: 1.2rem;
-  width: 2.4rem;
-  margin-right: 0.8rem;
+.nav-item__title {
+  margin-top: 0.3rem;
+  transition: opacity 0.2s, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
-#main_navbar .navbar-item:last-of-type {
+.nav-item--active {
+  color: var(--accent-color);
+}
+.nav-item--active .icon {
+  fill: var(--accent-color);
+  transform: translateY(50%);
+}
+.nav-item--active .nav-item__title {
+  transform: translateY(100%);
+  opacity: 0;
+}
+.nav-item__indicator {
+  position: absolute;
+  bottom: 0;
+  width: 2rem;
+  height: 0.3rem;
+  background: var(--accent-color);
+  border-radius: 1rem 1rem 0 0;
+  z-index: 1;
+}
+.nav-item:last-of-type {
   margin-top: auto;
 }
-#main_navbar .navbar-item .icon {
-  height: 1.2rem;
-  width: 1.2rem;
-}
-#main_navbar .navbar-item.badge::after {
+.nav-item.badge::after {
   right: 0;
   top: 0;
   position: absolute;
@@ -1087,12 +1322,12 @@ sm-button[variant=primary] {
   padding: 0.4rem;
   line-height: 0;
   height: calc(1em + 0.4rem);
-  background: #00C853;
+  background: #00c853;
   color: rgba(var(--foreground-color), 1);
   border-radius: 2rem;
   transition: transform 0.3s;
 }
-#main_navbar .navbar-item.badge.active::after, #main_navbar .navbar-item.badge[data-notifications="0"]::after, #main_navbar .navbar-item.badge[data-notifications=""]::after {
+.nav-item.badge.active::after, .nav-item.badge[data-notifications="0"]::after, .nav-item.badge[data-notifications=""]::after {
   transform: scale(0);
 }
 
@@ -1125,20 +1360,6 @@ sm-button[variant=primary] {
   position: relative;
   overflow-x: hidden;
 }
-#contacts #all_contacts,
-#contacts #group_creation_panel {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-  background: rgba(var(--foreground-color), 1);
-}
-#contacts #all_contacts .header,
-#contacts #group_creation_panel .header {
-  padding-top: 0.7rem;
-}
 #contacts .scrolling-wrapper {
   height: 100%;
   flex: 1;
@@ -1159,10 +1380,6 @@ sm-button[variant=primary] {
   padding: 1rem 1.5rem;
 }
 
-#group_creation_panel .grid {
-  padding: 1.5rem;
-  gap: 1rem;
-}
 #group_creation_panel .group-icon {
   background: var(--accent-color);
   justify-self: center;
@@ -1174,23 +1391,30 @@ sm-button[variant=primary] {
   font-size: 4rem;
 }
 
-#contacts, #mails {
+#contacts,
+#mails {
   position: relative;
   grid-template-rows: -webkit-max-content 1fr;
   grid-template-rows: max-content 1fr;
 }
 
-#contacts, #mails, #settings_page {
+#contacts,
+#mails,
+#settings_page {
   height: 100vh;
   overflow-y: hidden;
 }
-#contacts .header, #mails .header, #settings_page .header {
+#contacts .header,
+#mails .header,
+#settings_page .header {
   padding: 1rem 1.5rem 1rem 1.5rem;
   position: relative;
   gap: 0.5rem;
   min-height: 4rem;
 }
-#contacts .header .expanding-search, #mails .header .expanding-search, #settings_page .header .expanding-search {
+#contacts .header .expanding-search,
+#mails .header .expanding-search,
+#settings_page .header .expanding-search {
   position: absolute;
   width: 100%;
   padding: 0.7rem 1.5rem;
@@ -1200,45 +1424,59 @@ sm-button[variant=primary] {
   pointer-events: none;
   transition: opacity 0.3s, transform 0.3s;
 }
-#contacts .header .expanding-search.expand, #mails .header .expanding-search.expand, #settings_page .header .expanding-search.expand {
+#contacts .header .expanding-search.expand,
+#mails .header .expanding-search.expand,
+#settings_page .header .expanding-search.expand {
   transform: none;
   opacity: 1;
   pointer-events: all;
 }
-#contacts .header sm-input, #mails .header sm-input, #settings_page .header sm-input {
+#contacts .header sm-input,
+#mails .header sm-input,
+#settings_page .header sm-input {
   margin: 0;
   width: 100%;
   --padding: 0.5rem 1rem;
 }
-#contacts .header h4, #mails .header h4, #settings_page .header h4 {
+#contacts .header h4,
+#mails .header h4,
+#settings_page .header h4 {
   text-transform: capitalize;
   font-weight: 500;
 }
-#contacts .header .icon, #mails .header .icon, #settings_page .header .icon {
+#contacts .header .icon,
+#mails .header .icon,
+#settings_page .header .icon {
   -webkit-tap-highlight-color: transparent;
   margin-right: 1rem;
 }
-#contacts .header .flex .hamburger-menu-button, #mails .header .flex .hamburger-menu-button, #settings_page .header .flex .hamburger-menu-button {
-  -webkit-tap-highlight-color: transparent;
-  margin-right: 1rem;
-}
-#contacts .header .flex h4, #mails .header .flex h4, #settings_page .header .flex h4 {
+#contacts .header .flex h4,
+#mails .header .flex h4,
+#settings_page .header .flex h4 {
   flex: 1;
 }
-#contacts .header .flex .icon, #mails .header .flex .icon, #settings_page .header .flex .icon {
+#contacts .header .flex .icon,
+#mails .header .flex .icon,
+#settings_page .header .flex .icon {
   height: 2.2rem;
   width: 2.2rem;
   padding: 0.6rem;
   margin-left: -0.4rem;
   cursor: pointer;
 }
-#contacts .header .flex sm-menu, #mails .header .flex sm-menu, #settings_page .header .flex sm-menu {
+#contacts .header .flex sm-menu,
+#mails .header .flex sm-menu,
+#settings_page .header .flex sm-menu {
   margin-right: -0.7rem;
 }
-#contacts .header sm-button, #mails .header sm-button, #settings_page .header sm-button {
+#contacts .header sm-button,
+#mails .header sm-button,
+#settings_page .header sm-button {
   margin: 0;
 }
-#contacts .header sm-button .icon, #mails .header sm-button .icon, #settings_page .header sm-button .icon {
+#contacts .header sm-button .icon,
+#mails .header sm-button .icon,
+#settings_page .header sm-button .icon {
   height: 0.9rem;
   width: 0.9rem;
   align-self: center;
@@ -1300,6 +1538,7 @@ sm-button[variant=primary] {
   margin-bottom: 1rem;
 }
 #chat_details_panel header {
+  position: -webkit-sticky;
   position: sticky;
   top: 0;
   padding: 1rem;
@@ -1552,7 +1791,7 @@ sm-button[variant=primary] {
   z-index: 2;
   padding: 0.5rem;
   border-radius: 50%;
-  background: #00E676;
+  background: #00e676;
 }
 #scroll_to_bottom .icon {
   width: 2.6rem;
@@ -1636,7 +1875,7 @@ sm-button[variant=primary] {
   --input-border-color: none;
   --input-padding: 0.4rem 1rem;
   --outline-color: var(--accent-color);
-  --input-font-color: var(--text-color);
+  --input-font-color: rgba(var(--text-color), 1);
   --input-placeholder-color: rgba(var(--text-color), 0.6);
   --indicator-color: var(--accent-color);
   --button-hover-background: rgba(var(--text-color), 0.2);
@@ -1660,13 +1899,15 @@ sm-button[variant=primary] {
   text-align: center;
 }
 
-#new_conversation, #no_mails {
+#new_conversation,
+#no_mails {
   height: 100%;
   justify-content: center;
   text-align: center;
   padding: 1.5rem;
 }
-#new_conversation p, #no_mails p {
+#new_conversation p,
+#no_mails p {
   margin-top: 0.8rem;
 }
 
@@ -1684,7 +1925,7 @@ sm-button[variant=primary] {
 }
 
 #chat_middle,
-#chat_container,
+#chats_list,
 #inbox_mail_container,
 #sent_mail_container,
 #mail {
@@ -1702,19 +1943,13 @@ sm-button[variant=primary] {
   display: none;
 }
 
-#chat_container {
+#chats_list {
   padding-bottom: 6rem;
 }
 
 #contacts_popup {
   --body-padding: 0;
 }
-#contacts_popup .popup-header {
-  padding: 1.5rem;
-}
-#contacts_popup .warning {
-  padding: 0.5rem 1.5rem;
-}
 
 .mail-container {
   height: 100%;
@@ -1879,52 +2114,6 @@ sm-button[variant=primary] {
   width: 100%;
 }
 
-#video_call_page {
-  position: relative;
-  display: grid;
-}
-#video_call_page video {
-  position: fixed;
-  -o-object-fit: cover;
-     object-fit: cover;
-  -o-object-position: center;
-     object-position: center;
-}
-
-#their_video {
-  height: 100%;
-}
-
-#my_video {
-  width: max(20vh, 12rem);
-  bottom: 0;
-  right: 0;
-  border-radius: 1rem;
-  border: solid;
-  margin: 1.5rem;
-}
-
-#call_controls {
-  padding: 1.5rem;
-  margin-top: auto;
-  justify-self: center;
-}
-
-#pick_up_call {
-  color: #00C853;
-}
-
-.circular-button {
-  align-items: center;
-  --padding: 0;
-  --border-radius: 50%;
-}
-.circular-button .filled {
-  height: 3rem;
-  width: 3rem;
-  padding: 1rem;
-}
-
 @media screen and (max-width: 640px) {
   sm-popup {
     --border-radius: 1rem 1rem 0 0;
@@ -1968,28 +2157,13 @@ sm-button[variant=primary] {
     margin-top: auto;
   }
 
-  #main_navbar {
-    transform: translateX(-110%);
-    transition: transform 0.3s;
-    z-index: 4;
-    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
-  }
-  #main_navbar .logo-section {
-    padding: 1rem;
-  }
-
-  #navbar_backdrop {
-    position: fixed;
+  #main_navbar.hide-away {
+    bottom: 0;
     left: 0;
     right: 0;
-    top: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.3);
-    z-index: 2;
-    transition: transform 0.3s, opacity 0.3s;
   }
 
-  #chat_container,
+  #chats_list,
 #contact_container {
     gap: 0.2rem;
   }
@@ -2007,6 +2181,7 @@ sm-button[variant=primary] {
     overflow-x: hidden;
   }
   #settings_page #settings_header {
+    position: -webkit-sticky;
     position: sticky;
     top: 0;
     z-index: 1;
@@ -2015,7 +2190,7 @@ sm-button[variant=primary] {
     background: rgba(var(--foreground-color), 1);
   }
 }
-@media only screen and (min-width: 640px) {
+@media screen and (min-width: 40rem) {
   .hide-on-desktop {
     display: none !important;
   }
@@ -2024,8 +2199,9 @@ sm-button[variant=primary] {
     padding-bottom: 0;
   }
 
-  .popup-header {
-    padding-top: 1.5rem;
+  .popup__header {
+    grid-column: 1/-1;
+    padding: 1rem 1.5rem 0 1.5rem;
   }
 
   .fab {
@@ -2050,41 +2226,47 @@ sm-button[variant=primary] {
     padding: 0 4vw;
   }
 
-  #sign_in_page {
-    place-content: center;
-  }
-
   #sign_in {
     width: 24rem;
   }
 
-  .frame {
-    justify-content: center;
+  #main_page {
+    grid-template-columns: -webkit-min-content 1fr;
+    grid-template-columns: min-content 1fr;
+    grid-template-rows: 1fr;
+    grid-template-areas: "nav .";
+    border-radius: 0.8rem;
+    overflow: hidden;
+    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 1rem 3rem rgba(0, 0, 0, 0.2);
   }
 
   #main_navbar {
-    position: relative;
-    width: auto;
-    padding-bottom: 0.5rem;
-    background: rgba(var(--text-color), 0.06);
+    grid-area: nav;
+    border-top: none;
+    flex-direction: column;
+    height: calc(100% - 1rem);
+    margin: 0.5rem;
+    border-radius: 0.5rem;
+    background-color: rgba(37, 110, 255, 0.03);
   }
-  #main_navbar .logo-section {
-    display: flex;
-    justify-content: center;
-    margin: 1.5rem 0 2rem 0;
+  #main_navbar ul {
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.3rem;
   }
-  #main_navbar .logo-section .main-logo {
-    margin: 0;
+  #main_navbar ul li:last-of-type {
+    margin-top: auto;
   }
-  #main_navbar .navbar-item {
-    margin: 0 0.5rem;
-    border-radius: 0.8rem;
+
+  .nav-item {
+    aspect-ratio: 1/1;
   }
-  #main_navbar .navbar-item .icon {
-    margin-right: 0;
-  }
-  #main_navbar .label {
-    display: none;
+  .nav-item__indicator {
+    width: 0.25rem;
+    height: 50%;
+    left: 0;
+    border-radius: 0 1rem 1rem 0;
+    bottom: auto;
   }
 
   #add_contact_popup {
@@ -2096,10 +2278,6 @@ sm-button[variant=primary] {
     --min-width: 36rem;
   }
 
-  #main_page {
-    grid-template-columns: auto 1fr;
-  }
-
   #emoji_picker {
     max-height: 18rem;
   }
@@ -2110,7 +2288,8 @@ sm-button[variant=primary] {
     max-width: 55ch;
   }
 
-  #chat_page, #mail_page {
+  #chat_page,
+#mail_page {
     grid-template-columns: 20rem 1fr;
   }
 
@@ -2160,7 +2339,8 @@ sm-button[variant=primary] {
     font-size: 3rem;
   }
 
-  #chat_page, #mail_page {
+  #chat_page,
+#mail_page {
     grid-template-columns: 23rem 1fr;
   }
 
@@ -2203,8 +2383,7 @@ sm-button[variant=primary] {
     background: rgba(var(--text-color), 0.5);
   }
 
-  .navbar-item:hover,
-.contact:hover,
+  .contact:hover,
 .emoji:hover,
 .option:hover {
     cursor: pointer;
@@ -2231,4 +2410,12 @@ sm-button[variant=primary] {
   .contact .menu {
     display: none;
   }
-}/*# sourceMappingURL=main.css.map */
\ No newline at end of file
+}
+@supports (overflow: overlay) {
+  body {
+    overflow: overlay;
+  }
+}
+.hide {
+  display: none !important;
+}
\ No newline at end of file
diff --git a/css/main.css.map b/css/main.css.map
deleted file mode 100644
index ff31db5..0000000
--- a/css/main.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["main.scss"],"names":[],"mappings":"AAAA;;;EAGI,UAAA;EACA,SAAA;EACA,sBAAA;EACA,iCAAA;AACJ;;AACA;EACI,uBAAA;EACA,qCAAA;AAEJ;;AAAA;EACI,YAAA;AAGJ;;AADA;EACI,uBAAA;EACA,0BAAA;EACA,wBAAA;EACA,iCAAA;EACA,iCAAA;EACA,2BAAA;EACA,kBAAA;EACA,iCAAA;EACA,4CAAA;AAIJ;AAHI;EACI,4CAAA;EACA,8CAAA;AAKR;;AAFA;EACI,sBAAA;EACA,0BAAA;EACA,2BAAA;EACA,iCAAA;EACA,8BAAA;EACA,iCAAA;AAKJ;AAJI;EACI,4CAAA;EACA,+CAAA;AAMR;AAJI;EACI,iCAAA;AAMR;AAJI;EACI,yHAAA;EACA,8CAAA;AAMR;;AAHA;EACI,gBAAA;AAMJ;;AAJA;EACI,eAAA;AAOJ;;AALA;EACI,eAAA;AAQJ;;AANA;EACI,iBAAA;AASJ;;AAPA;EACI,iBAAA;AAUJ;;AARA;EACI,iBAAA;AAWJ;;AATA;EACI,iCAAA;EACA,gBAAA;AAYJ;;AAVA;EACI,yCAAA;EACA,YAAA;EACA,qBAAA;EACA,WAAA;EACA,aAAA;EACA,eAAA;EACA,iCAAA;EACA,YAAA;EACA,gBAAA;AAaJ;AAZI;EACI,aAAA;EACA,4CAAA;AAcR;;AAXA;EACI,gBAAA;AAcJ;;AAZA;EACI,aAAA;AAeJ;;AAbA;EACI,aAAA;AAgBJ;;AAdA;EACI,gCAAA;EACA,QAAA;AAiBJ;;AAfA;EACI,mBAAA;AAkBJ;;AAhBA;EACI,iBAAA;AAmBJ;;AAjBA;EACI,sBAAA;AAoBJ;;AAlBA;EACI,OAAA;AAqBJ;;AAnBA;EACI,UAAA;EACA,oBAAA;AAsBJ;;AApBA;EACI,wBAAA;AAuBJ;;AArBA;EACI,0BAAA;AAwBJ;;AAtBA;EACI,yBAAA;AAyBJ;;AAvBA;EACI,mBAAA;EACA,gBAAA;EACA,uBAAA;AA0BJ;;AAxBA;EACI,gBAAA;EACA,SAAA;AA2BJ;;AAzBA;EACI,uCAAA;AA4BJ;;AA1BA;EACI,0BAAA;AA6BJ;;AA3BA;EACI,6BAAA;AA8BJ;;AA5BA;EACI,uDAAA;EACA,cAAA;EACA,eAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,wBAAA;AA+BJ;AA9BI;EACI,yBAAA;EACA,oBAAA;EACA,cAAA;EACA,aAAA;EACA,eAAA;EACA,aAAA;AAgCR;;AA7BA;EACI,qBAAA;EACA,0BAAA;EACA,gBAAA;AAgCJ;;AAnCA;EACI,qBAAA;EACA,0BAAA;EACA,gBAAA;AAgCJ;;AAnCA;EACI,qBAAA;EACA,0BAAA;EACA,gBAAA;AAgCJ;;AA9BA;EACI,8CAAA;AAiCJ;;AA/BA;EACI,mBAAA;AAkCJ;;AAhCA;EACI,aAAA;EACA,iBAAA;EACA,WAAA;AAmCJ;;AAjCA;EACI,UAAA;EACA,eAAA;EACA,kCAAA;EACA,cAAA;EACA,aAAA;EACA,iBAAA;EACA,qBAAA;EACA,sBAAA;AAoCJ;;AAlCA;EACI,kBAAA;EACA,kBAAA;EACA,mBAAA;EACA,wCAAA;EACA,oBAAA;AAqCJ;;AAnCA;EACI,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,wCAAA;AAsCJ;;AApCA;EACI,uBAAA;AAuCJ;;AApCI;EACI,gBAAA;AAuCR;;AApCA;EACI,+BAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;AAuCJ;AAtCI;EACI,eAAA;EACA,cAAA;EACA,aAAA;EACA,eAAA;EACA,8BAAA;EACA,eAAA;EACA,wCAAA;AAwCR;AAtCI;EACI,eAAA;AAwCR;AAtCI;;EAEI,WAAA;EACA,iBAAA;AAwCR;;AArCA;EACI,aAAA;EACA,+BAAA;EACA,mBAAA;EACA,WAAA;EACA,WAAA;AAwCJ;AAvCI;EACI,eAAA;EACA,eAAA;EACA,cAAA;EACA,aAAA;AAyCR;AAvCI;EACI,mBAAA;EACA,gBAAA;EACA,uBAAA;AAyCR;AAvCI;EACI,2BAAA;AAyCR;;AAtCA;;EAEI,sBAAA;AAyCJ;AAxCI;;EACI,gBAAA;EACA,qBAAA;AA2CR;AAzCI;;EACI,SAAA;AA4CR;AA1CI;;EACI,UAAA;EACA,gBAAA;AA6CR;AA5CQ;;EACI,oBAAA;EACA,iBAAA;AA+CZ;;AA3CA;EACI,uBAAA;EACA,WAAA;EACA,YAAA;AA8CJ;;AA5CA;EACI,aAAA;EACA,sBAAA;EACA,cAAA;AA+CJ;;AA7CA;EACI,iBAAA;EACA,mCAAA;AAgDJ;;AA9CA;EACI,iCAAA;AAiDJ;;AA/CA;EACI,yBAAA;AAkDJ;;AAhDA;EACI,aAAA;EACA,kBAAA;EACA,mBAAA;EACA,2BAAA;EAAA,wBAAA;EAAA,mBAAA;EACA,gBAAA;AAmDJ;AAlDI;EACI,4BAAA;EACA,gBAAA;AAoDR;AAlDI;EACI,cAAA;EACA,oBAAA;EACA,gCAAA;EACA,YAAA;AAoDR;AAlDI;EACI,WAAA;EACA,oBAAA;AAoDR;;AAhDI;EACI,aAAA;AAmDR;;AAhDA;EACI,aAAA;EACA,qBAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,mBAAA;AAmDJ;AAlDI;EACI,eAAA;EACA,aAAA;AAoDR;AAlDI;EACI,gBAAA;EACA,gBAAA;EACA,iBAAA;AAoDR;AAlDI;EACI,aAAA;EACA,sBAAA;EACA,sBAAA;EACA,UAAA;AAoDR;AAnDQ;EACI,0BAAA;EACA,qBAAA;EACA,gBAAA;AAqDZ;AAnDQ;EACI,uBAAA;EACA,0BAAA;EAAA,uBAAA;EAAA,kBAAA;AAqDZ;AAnDQ;EACI,mBAAA;EACA,gBAAA;AAqDZ;AAnDQ;EACI,gBAAA;EACA,iBAAA;EACA,mCAAA;AAqDZ;AAlDY;EACI,kBAAA;AAoDhB;;AA/CA;EACI,4BAAA;EACA,gBAAA;EACA,4CAAA;AAkDJ;;AAhDA;EACI,eAAA;AAmDJ;;AAjDA;EACI,kBAAA;EACA,WAAA;AAoDJ;;AAlDA;EACI,eAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;AAqDJ;AApDI;EACI,WAAA;EACA,OAAA;AAsDR;AApDI;EACI,gBAAA;AAsDR;AApDI;EACI,gBAAA;EACA,gBAAA;AAsDR;AApDI;EACI,gBAAA;EACA,qBAAA;AAsDR;AApDI;EACI,YAAA;EACA,gBAAA;AAsDR;AApDI;EACI,qBAAA;AAsDR;AApDI;EACI,WAAA;EACA,wBAAA;AAsDR;AApDI;EACI,gBAAA;AAsDR;AApDI;EACI,qBAAA;EACA,eAAA;EACA,kBAAA;AAsDR;;AAjDA;EACI,YAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,oBAAA;EACA,eAAA;AAoDJ;AAnDI;EACI,mBAAA;EACA,gBAAA;AAqDR;AAnDI;EACI,kBAAA;AAqDR;;AAjDI;EACI,cAAA;EACA,aAAA;EACA,qBAAA;AAoDR;AAlDI;EACI,WAAA;AAoDR;AAlDI;EACI,0EAAA;UAAA,kEAAA;EACA,cAAA;AAoDR;AAlDI;EACI,gBAAA;AAoDR;AAlDI;EACI,qBAAA;AAoDR;;AAhDI;EACI,cAAA;AAmDR;;AAhDA;EACI;IACI,4BAAA;EAmDN;EAjDE;IACI,eAAA;EAmDN;AACF;;AAzDA;EACI;IACI,4BAAA;EAmDN;EAjDE;IACI,eAAA;EAmDN;AACF;AAjDA;EACI,YAAA;EACA,aAAA;EACA,qBAAA;EACA,qBAAA;AAmDJ;;AAjDA;EACI,UAAA;EACA,wBAAA;EACA,YAAA;EACA,WAAA;EACA,yDAAA;UAAA,iDAAA;AAoDJ;;AAlDA;EACI,iBAAA;EACA,WAAA;EACA,YAAA;EACA,wCAAA;EACA,kBAAA;EACA,wDAAA;UAAA,gDAAA;EACA,iBAAA;AAqDJ;;AAnDA;EACI,gBAAA;AAsDJ;;AApDA;EACI;IACI,sCAAA;EAuDN;EArDE;IACI,kCAAA;EAuDN;EArDE;IACI,sBAAA;EAuDN;AACF;;AAhEA;EACI;IACI,sCAAA;EAuDN;EArDE;IACI,kCAAA;EAuDN;EArDE;IACI,sBAAA;EAuDN;AACF;AArDA;EACI;IACI,qBAAA;EAuDN;EArDE;IACI,sBAAA;EAuDN;EArDE;IACI,mBAAA;EAuDN;AACF;AAhEA;EACI;IACI,qBAAA;EAuDN;EArDE;IACI,sBAAA;EAuDN;EArDE;IACI,mBAAA;EAuDN;AACF;AArDA;EACI,WAAA;EACA,YAAA;AAuDJ;;AArDA;EACI,kBAAA;EACA,uBAAA;EACA,iBAAA;EACA,gBAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;EACA,YAAA;EACA,+CAAA;EACA,mBAAA;EACA,yBAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;AAwDJ;;AAtDA;EACI,kCAAA;EACA,uBAAA;AAyDJ;;AAvDA;EACI,cAAA;EACA,aAAA;EACA,WAAA;EACA,YAAA;AA0DJ;;AAxDA;EACI,kBAAA;EACA,aAAA;EACA,WAAA;EACA,sBAAA;EACA,mBAAA;EACA,cAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,gBAAA;AA2DJ;AA1DI;EACI,+BAAA;EACA,2BAAA;AA4DR;AA1DI;EAEI,oCAAA;EACA,4CAAA;AA2DR;AAxDI;EACI,oCAAA;AA0DR;AAxDI;EACI,+CAAA;AA0DR;AAxDI;EACI,aAAA;AA0DR;AAxDI;EACI,WAAA;EACA,cAAA;EACA,gBAAA;EACA,mCAAA;EACA,uBAAA;EACA,mBAAA;EACA,gBAAA;AA0DR;AAxDI;EACI,gBAAA;EACA,mBAAA;EACA,uBAAA;EACA,gBAAA;EACA,gBAAA;EACA,mCAAA;AA0DR;AAxDI;EACI,eAAA;EACA,sBAAA;EACA,eAAA;EACA,gCAAA;AA0DR;AAxDI;EACI,gBAAA;EACA,mCAAA;EACA,eAAA;AA0DR;AAxDI;EACI,sBAAA;EACA,iBAAA;EACA,sCAAA;EACA,mBAAA;AA0DR;;AAvDA;EACI,kBAAA;EACA,eAAA;EACA,cAAA;EACA,cAAA;EACA,aAAA;AA0DJ;AAzDI;EACI,YAAA;EACA,WAAA;EACA,eAAA;EACA,gBAAA;EACA,mBAAA;EACA,sCAAA;EACA,0CAAA;AA2DR;;AAxDA;EACI,oBAAA;AA2DJ;AA1DI;EACI,gBAAA;EACA,eAAA;AA4DR;AA1DI;EACI,iBAAA;EACA,sBAAA;EACA,qBAAA;EACA,cAAA;EACA,gBAAA;AA4DR;AA1DI;EACI,gBAAA;AA4DR;;AAzDA;EACI,aAAA;EACA,qBAAA;AA4DJ;AA3DI;EACI,kBAAA;AA6DR;AA3DI;EACI,aAAA;EACA,cAAA;EACA,mBAAA;EACA,eAAA;EACA,oBAAA;EACA,wCAAA;EACA,sBAAA;EACA,mBAAA;AA6DR;AA5DQ;EACI,aAAA;EACA,cAAA;EACA,iBAAA;AA8DZ;AA5DQ;EACI,iBAAA;EACA,mCAAA;EACA,mBAAA;AA8DZ;AA5DQ;EACI,kBAAA;EACA,YAAA;EACA,WAAA;EACA,mBAAA;AA8DZ;;AA1DA;EACI,4BAAA;AA6DJ;AA5DI;EACI,cAAA;AA8DR;AA5DI;EACI,gBAAA;EACA,YAAA;AA8DR;AA3DQ;EACI,gBAAA;AA6DZ;AA1DI;EACI,0BAAA;EACA,YAAA;EACA,WAAA;AA4DR;AA1DI;EACI,cAAA;EACA,aAAA;EACA,iBAAA;EACA,mBAAA;EACA,gBAAA;EACA,qBAAA;AA4DR;AA1DI;EACI,qBAAA;AA4DR;AA3DQ;EACI,iBAAA;EACA,gBAAA;AA6DZ;AAzDQ;EACI,UAAA;EACA,aAAA;EACA,gBAAA;AA2DZ;;AAvDA;EACI,sBAAA;EACA,gBAAA;EACA,+CAAA;EACA,qBAAA;EACA,mCAAA;EACA,cAAA;EACA,oBAAA;EACA,kBAAA;EACA,kBAAA;AA0DJ;;AAxDA;EACI,iBAAA;EACA,gBAAA;AA2DJ;;AAzDA;EACI,mBAAA;EACA,WAAA;AA4DJ;;AA1DA;;EAEI,WAAA;EACA,kBAAA;EACA,eAAA;EACA,cAAA;EACA,YAAA;EACA,WAAA;EACA,+BAAA;EACA,mBAAA;EACA,kDAAA;EACA,mBAAA;EACA,0BAAA;AA6DJ;;AA3DA;;EAEI,mBAAA;AA8DJ;;AA1DI;;;EACI,0BAAA;AA+DR;AA7DI;;EACI,iCAAA;AAgER;AA9DI;;;;EACI,gBAAA;AAmER;;AAhEA;EACI,kBAAA;EACA,aAAA;EACA,WAAA;EACA,sBAAA;EACA,mBAAA;EACA,cAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,oCAAA;EACA,yEAAA;AAmEJ;AAhEI;EACI,aAAA;EACA,sBAAA;EACA,YAAA;EACA,WAAA;EACA,eAAA;AAkER;AAhEI;EACI,WAAA;EACA,iBAAA;EACA,gBAAA;EACA,mCAAA;EACA,uBAAA;EACA,mBAAA;EACA,gBAAA;AAkER;AAhEI;EACI,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;AAkER;AAhEI;EACI,kBAAA;EACA,cAAA;EACA,kBAAA;EACA,gBAAA;AAkER;AAhEI;EACI,eAAA;EACA,oBAAA;EACA,qBAAA;EACA,4BAAA;EACA,gBAAA;EACA,gBAAA;EACA,kBAAA;EACA,mCAAA;AAkER;;AA/DA;EACI;IACI,UAAA;IACA,4BAAA;EAkEN;EAhEE;IACI,UAAA;IACA,eAAA;EAkEN;AACF;;AA1EA;EACI;IACI,UAAA;IACA,4BAAA;EAkEN;EAhEE;IACI,UAAA;IACA,eAAA;EAkEN;AACF;AAhEA;EACI,WAAA;AAkEJ;;AAhEA;EACI,kBAAA;AAmEJ;AAlEI;EACI,gBAAA;EACA,2BAAA;UAAA,0BAAA;AAoER;AAlEI;EACI,WAAA;EACA,kBAAA;EACA,OAAA;EACA,MAAA;EACA,aAAA;EACA,YAAA;EACA,wCAAA;AAoER;AAlEI;EACI,iBAAA;EACA,mBAAA;EACA,eAAA;AAoER;AAlEI;EACI,gBAAA;EACA,qBAAA;AAoER;AAlEI;EACI,gBAAA;EACA,cAAA;AAoER;AAlEI;EACI,mBAAA;AAoER;AAlEI;EACI,qBAAA;AAoER;AAlEI;;EAEI,iBAAA;EACA,yBAAA;EACA,qBAAA;AAoER;AAlEI;EACI,oBAAA;AAoER;AAlEI;EACI,2BAAA;EAAA,wBAAA;EAAA,mBAAA;EACA,eAAA;EACA,qBAAA;AAoER;;AAjEA;EACI,aAAA;EACA,+BAAA;AAoEJ;;AAlEA;EACI,aAAA;EACA,mBAAA;EACA,sBAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;AAqEJ;AApEI;EACI,cAAA;EACA,aAAA;EACA,kBAAA;EACA,gCAAA;AAsER;;AAnEA;EACI,eAAA;EACA,sBAAA;EACA,YAAA;EACA,SAAA;EACA,MAAA;EACA,UAAA;EACA,uBAAA;EACA,4CAAA;AAsEJ;AArEI;EACI,eAAA;AAuER;AArEI;EACI,+BAAA;AAuER;AAtEQ;EACI,aAAA;AAwEZ;AAtEQ;EACI,YAAA;AAwEZ;AArEI;EACI,gBAAA;EACA,iBAAA;AAuER;AArEI;EACI,YAAA;EACA,2BAAA;EACA,mBAAA;EACA,UAAA;EACA,aAAA;AAuER;AAtEQ;EACI,cAAA;EACA,aAAA;EACA,oBAAA;AAwEZ;AAtEQ;EACI,gBAAA;AAwEZ;AAtEQ;EACI,cAAA;EACA,aAAA;AAwEZ;AAtEQ;EACI,QAAA;EACA,MAAA;EACA,kBAAA;EACA,iCAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,cAAA;EACA,0BAAA;EACA,mBAAA;EACA,uCAAA;EACA,mBAAA;EACA,0BAAA;AAwEZ;AAtEQ;EAGI,mBAAA;AAsEZ;;AAlEA;EACI,kBAAA;EACA,2BAAA;EACA,iBAAA;AAqEJ;;AAnEA;EACI,gBAAA;EACA,gBAAA;EACA,kBAAA;EACA,SAAA;EACA,4CAAA;EACA,UAAA;EACA,qBAAA;EACA,mFAAA;EACA,WAAA;AAsEJ;AArEI;EACI,+BAAA;EACA,kCAAA;AAuER;AArEI;EACI,aAAA;AAuER;;AApEA;EACI,kBAAA;EACA,kBAAA;AAuEJ;AAtEI;;EAEI,kBAAA;EACA,MAAA;EACA,SAAA;EACA,OAAA;EACA,QAAA;EACA,UAAA;EACA,4CAAA;AAwER;AAvEQ;;EACI,mBAAA;AA0EZ;AAvEI;EACI,YAAA;EACA,OAAA;EACA,gBAAA;AAyER;AAxEQ;EACI,eAAA;EACA,kBAAA;AA0EZ;AAvEI;EACI,sBAAA;AAyER;AAxEQ;EACI,aAAA;EACA,mBAAA;EACA,gBAAA;EACA,mCAAA;EACA,oBAAA;AA0EZ;;AArEI;EACI,eAAA;EACA,SAAA;AAwER;AAtEI;EACI,+BAAA;EACA,oBAAA;EACA,YAAA;EACA,WAAA;EACA,mBAAA;EACA,aAAA;EACA,kBAAA;EACA,eAAA;AAwER;;AArEA;EACI,kBAAA;EACA,2CAAA;EAAA,mCAAA;AAwEJ;;AAtEA;EACI,aAAA;EACA,kBAAA;AAyEJ;AAxEI;EACI,gCAAA;EACA,kBAAA;EACA,WAAA;EACA,gBAAA;AA0ER;AAzEQ;EACI,kBAAA;EACA,WAAA;EACA,sBAAA;EACA,4CAAA;EACA,qBAAA;EACA,UAAA;EACA,oBAAA;EACA,wCAAA;AA2EZ;AA1EY;EACI,eAAA;EACA,UAAA;EACA,mBAAA;AA4EhB;AAzEQ;EACI,SAAA;EACA,WAAA;EACA,sBAAA;AA2EZ;AAzEQ;EACI,0BAAA;EACA,gBAAA;AA2EZ;AAzEQ;EACI,wCAAA;EACA,kBAAA;AA2EZ;AAxEY;EACI,wCAAA;EACA,kBAAA;AA0EhB;AAxEY;EACI,OAAA;AA0EhB;AAxEY;EACI,cAAA;EACA,aAAA;EACA,eAAA;EACA,oBAAA;EACA,eAAA;AA0EhB;AAxEY;EACI,qBAAA;AA0EhB;AAvEQ;EACI,SAAA;AAyEZ;AAxEY;EACI,cAAA;EACA,aAAA;EACA,kBAAA;EACA,eAAA;EACA,cAAA;EACA,oBAAA;AA0EhB;;AArEA;;;EAGI,uBAAA;EACA,WAAA;EACA,YAAA;AAwEJ;;AAtEA;EACI,gBAAA;AAyEJ;;AAvEA;;EAEI,kBAAA;EACA,aAAA;EACA,sBAAA;EACA,YAAA;EACA,gBAAA;AA0EJ;;AAxEA;EACI,yCAAA;EACA,sBAAA;AA2EJ;AA1EI;EACI,cAAA;EACA,oBAAA;EACA,qBAAA;EACA,yCAAA;AA4ER;AA3EQ;EACI,mBAAA;AA6EZ;AA3EQ;EACI,gBAAA;EACA,iBAAA;EACA,mCAAA;EACA,qBAAA;AA6EZ;AA3EQ;EACI,mBAAA;AA6EZ;AA5EY;EACI,gBAAA;AA8EhB;AA3EQ;EACI,qBAAA;AA6EZ;AA3EQ;EACI,mBAAA;AA6EZ;AA1EI;EACI,gBAAA;EACA,MAAA;EACA,aAAA;EACA,gBAAA;EACA,oDAAA;EACA,UAAA;AA4ER;AA3EQ;EACI,cAAA;EACA,aAAA;EACA,eAAA;EACA,eAAA;AA6EZ;AA1EI;EACI,iBAAA;AA4ER;AA1EI;EACI,aAAA;EACA,mBAAA;EACA,kBAAA;EACA,sBAAA;AA4ER;AA3EQ;EACI,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,eAAA;AA6EZ;AA5EY;EACI,YAAA;EACA,WAAA;AA8EhB;AA3EQ;EACI,gBAAA;EACA,iBAAA;AA6EZ;AA3EQ;EACI,mCAAA;EACA,iBAAA;EACA,kBAAA;AA6EZ;AA1EI;EACI,gBAAA;AA4ER;;AAzEA;EACI,gBAAA;EACA,gBAAA;AA4EJ;;AA1EA;EACI,kBAAA;EACA,0BAAA;AA6EJ;;AA3EA;EACI,kBAAA;EACA,aAAA;EACA,eAAA;EACA,WAAA;EACA,kBAAA;EACA,8BAAA;EAAA,2BAAA;EAAA,sBAAA;EACA,qBAAA;EACA,kBAAA;EACA,kBAAA;EACA,gFAAA;AA8EJ;AA7EI;EACI,kBAAA;EACA,gBAAA;EACA,qBAAA;AA+ER;AA7EI;EACI,aAAA;EACA,mBAAA;EACA,eAAA;EACA,yBAAA;EACA,qBAAA;EACA,qBAAA;EACA,sBAAA;EAEA,qBAAA;EACA,iBAAA;MAAA,aAAA;EACA,qBAAA;EACA,gBAAA;AA+ER;AA9EQ;EACI,cAAA;AAgFZ;AA9EQ;EACI,kBAAA;EACA,gBAAA;EACA,iBAAA;AAgFZ;AA7EI;EACI,mBAAA;EACA,gBAAA;EACA,YAAA;EACA,sBAAA;EACA,kBAAA;EACA,oBAAA;EACA,kBAAA;EACA,iBAAA;AA+ER;;AA5EA;EACI,iBAAA;EACA,cAAA;EACA,+BAAA;EACA,qCAAA;AA+EJ;AA9EI;EACI,WAAA;EACA,kBAAA;EACA,UAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,6BAAA;EACA,qEAAA;AAgFR;;AA7EA;EACI,kBAAA;EACA,wCAAA;EACA,qCAAA;AAgFJ;AA/EI;EACI,WAAA;EACA,kBAAA;EACA,YAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,6BAAA;EACA,8EAAA;AAiFR;;AA9EA;;EAEI,aAAA;AAiFJ;;AA/EA;;EAEI,aAAA;AAkFJ;;AAhFA;;EAEI,qBAAA;AAmFJ;;AAjFA;EACI,aAAA;EACA,gDAAA;EACA,6BAAA;AAoFJ;AAnFI;EACI,wBAAA;EACA,WAAA;EACA,kBAAA;EACA,YAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,6BAAA;EACA,8EAAA;AAqFR;;AAlFA;EACI,YAAA;EACA,sBAAA;EACA,4EAAA;UAAA,oEAAA;AAqFJ;;AAnFA;EACI;IACI,gDAAA;EAsFN;EApFE;IACI,oCAAA;EAsFN;AACF;;AA5FA;EACI;IACI,gDAAA;EAsFN;EApFE;IACI,oCAAA;EAsFN;AACF;AApFA;EACI,eAAA;EACA,gBAAA;EACA,+BAAA;AAsFJ;AArFI;EACI,YAAA;AAuFR;AArFI;EACI,YAAA;EACA,WAAA;EACA,eAAA;EACA,eAAA;EACA,oBAAA;EACA,oCAAA;AAuFR;AArFI;EACI,eAAA;EACA,kBAAA;EACA,cAAA;EACA,aAAA;EACA,cAAA;AAuFR;AArFI;EACI,gBAAA;EACA,gBAAA;EACA,uBAAA;EACA,mBAAA;AAuFR;;AApFA;EACI,kBAAA;EACA,aAAA;EACA,QAAA;EACA,YAAA;EACA,mBAAA;EACA,UAAA;EACA,iBAAA;EACA,cAAA;EACA,eAAA;EACA,mBAAA;EACA,0BAAA;AAuFJ;AAtFI;EACI,kBAAA;EACA,WAAA;EACA,MAAA;EACA,QAAA;EACA,UAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;AAwFR;AAtFI;EACI,aAAA;EACA,cAAA;EACA,eAAA;EACA,eAAA;AAwFR;;AApFI;EACI,qBAAA;EACA,kCAAA;AAuFR;AArFI;EACI,qBAAA;EACA,uBAAA;AAuFR;;AApFA;EACI,kBAAA;EACA,eAAA;EACA,oBAAA;EACA,aAAA;EACA,cAAA;EACA,mBAAA;EACA,eAAA;AAuFJ;AAtFI;EACI,kCAAA;AAwFR;AAtFI;EACI,yBAAA;AAwFR;;AArFA;EACI,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,UAAA;EACA,oBAAA;EACA,UAAA;EACA,kBAAA;EACA,cAAA;EACA,aAAA;EACA,eAAA;EACA,eAAA;EACA,YAAA;EACA,kCAAA;EACA,iBAAA;EACA,gBAAA;AAwFJ;AAvFI;EACI,UAAA;EACA,yBAAA;EACA,eAAA;EACA,mBAAA;AAyFR;;AAtFA;EACI,SAAA;AAyFJ;;AAvFA;EACI,sBAAA;AA0FJ;AAzFI;EACI,uBAAA;EACA,iBAAA;AA2FR;AAzFI;EACI,4BAAA;AA2FR;;AAxFA;EACI,OAAA;EACA,eAAA;AA2FJ;;AAzFA;EACI,2CAAA;EACA,gBAAA;EACA,0BAAA;EACA,4BAAA;EACA,oCAAA;EACA,qCAAA;EACA,uDAAA;EACA,sCAAA;EACA,uDAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,WAAA;EACA,gBAAA;AA4FJ;;AA1FA;EACI,iBAAA;EACA,eAAA;EACA,eAAA;EACA,qBAAA;EACA,yBAAA;KAAA,sBAAA;MAAA,qBAAA;UAAA,iBAAA;EACA,kBAAA;AA6FJ;;AA3FA;EACI,YAAA;EACA,uBAAA;EACA,kBAAA;EACA,eAAA;AA8FJ;AA7FI;EACI,kBAAA;AA+FR;;AA3FI;EACI,YAAA;EACA,mBAAA;AA8FR;;AA3FA;EACI,YAAA;EACA,WAAA;EACA,kBAAA;EACA,gBAAA;EACA,oCAAA;AA8FJ;;AA5FA;;;;;EAKI,WAAA;EACA,sBAAA;EACA,YAAA;EACA,gBAAA;AA+FJ;;AA7FA;EACI,aAAA;AAgGJ;;AA9FA;EACI,aAAA;AAiGJ;;AA/FA;EACI,oBAAA;AAkGJ;;AAhGA;EACI,iBAAA;AAmGJ;AAlGI;EACI,eAAA;AAoGR;AAlGI;EACI,sBAAA;AAoGR;;AAjGA;EACI,YAAA;EACA,sBAAA;EACA,gBAAA;AAoGJ;;AAjGA;;EAGI,WAAA;EACA,oBAAA;AAmGJ;;AAhGI;;;EAGI,8CAAA;AAmGR;AAjGI;EACI,oFAAA;AAmGR;AAjGI;EACI,gDAAA;AAmGR;AAhGQ;EACI,kCAAA;AAkGZ;AA/FI;EACI,gDAAA;AAiGR;AA/FI;EACI,8CAAA;AAiGR;;AA9FA;EACI,aAAA;EACA,uBAAA;AAiGJ;AAhGI;EACI,iBAAA;EACA,gBAAA;AAkGR;AAjGQ;EACI,oBAAA;AAmGZ;;AA9FI;EACI,mBAAA;AAiGR;;AA9FA;EACI,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,0BAAA;EACA,gBAAA;EACA,YAAA;AAiGJ;AAhGI;EACI,iBAAA;EACA,UAAA;AAkGR;;AA/FA;EACI,eAAA;EACA,cAAA;EACA,aAAA;EACA,oBAAA;EACA,eAAA;EACA,eAAA;EACA,YAAA;EACA,wCAAA;AAkGJ;AAjGI;EACI,UAAA;AAmGR;;AA/FI;EACI,oBAAA;AAkGR;AAhGI;EACI,SAAA;EACA,iBAAA;AAkGR;AAhGI;EACI,oBAAA;EACA,aAAA;EACA,mBAAA;EACA,sBAAA;AAkGR;AAjGQ;EACI,kBAAA;AAmGZ;AAjGQ;EACI,qBAAA;AAmGZ;AAhGI;EACI,WAAA;AAkGR;AAhGI;EACI,0BAAA;AAkGR;AAhGI;EACI,YAAA;AAkGR;AAhGI;EACI,gBAAA;EACA,YAAA;AAkGR;AAhGI;EACI,oBAAA;EACA,sBAAA;EACA,aAAA;EACA,WAAA;AAkGR;AAjGQ;EACI,kBAAA;EACA,gBAAA;AAmGZ;AAjGQ;EACI,mBAAA;AAmGZ;AAhGI;EACI,yBAAA;AAkGR;AAhGI;EACI,yBAAA;EACA,sBAAA;AAkGR;AAhGI;EACI,gBAAA;EACA,aAAA;EACA,qBAAA;AAkGR;AAhGI;EACI,eAAA;EACA,WAAA;EACA,eAAA;AAkGR;AAhGI;EACI,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,eAAA;EACA,mBAAA;EACA,gBAAA;EACA,wCAAA;AAkGR;AAjGQ;EACI,WAAA;EACA,kBAAA;EACA,YAAA;EACA,WAAA;EACA,2DAAA;AAmGZ;AAhGI;EACI,oBAAA;KAAA,iBAAA;EACA,YAAA;EACA,WAAA;AAkGR;;AA/FA;EACI,kBAAA;EACA,aAAA;AAkGJ;AAjGI;EACI,eAAA;EACA,oBAAA;KAAA,iBAAA;EACA,0BAAA;KAAA,uBAAA;AAmGR;;AAhGA;EACI,YAAA;AAmGJ;;AAjGA;EACI,uBAAA;EACA,SAAA;EACA,QAAA;EACA,mBAAA;EACA,aAAA;EACA,cAAA;AAoGJ;;AAlGA;EACI,eAAA;EACA,gBAAA;EACA,oBAAA;AAqGJ;;AAnGA;EACI,cAAA;AAsGJ;;AApGA;EACI,mBAAA;EAMA,YAAA;EACA,oBAAA;AAkGJ;AAxGI;EACI,YAAA;EACA,WAAA;EACA,aAAA;AA0GR;;AArGA;EACI;IACI,8BAAA;EAwGN;;EAtGE;IACI,eAAA;IACA,aAAA;IACA,UAAA;IACA,oBAAA;EAyGN;;EAvGE;IACI,uCAAA;IACA,uBAAA;EA0GN;EAzGM;IACI,eAAA;IACA,gBAAA;EA2GV;EAzGM;IACI,WAAA;IACA,aAAA;IACA,sBAAA;EA2GV;;EAxGE;IACI,uBAAA;EA2GN;;EAvGM;;IACI,YAAA;EA2GV;EAzGM;;IACI,gBAAA;EA4GV;EA1GM;;IACI,gBAAA;EA6GV;;EA1GE;IACI,4BAAA;IACA,0BAAA;IACA,UAAA;IACA,uCAAA;EA6GN;EA5GM;IACI,aAAA;EA8GV;;EA3GE;IACI,eAAA;IACA,OAAA;IACA,QAAA;IACA,MAAA;IACA,SAAA;IACA,8BAAA;IACA,UAAA;IACA,wCAAA;EA8GN;;EA5GE;;IAEI,WAAA;EA+GN;;EA5GM;IACI,WAAA;IACA,cAAA;EA+GV;;EA5GE;IACI,oCAAA;EA+GN;;EA7GE;IACI,kBAAA;EAgHN;EA/GM;IACI,gBAAA;IACA,MAAA;IACA,UAAA;IACA,oBAAA;IACA,qBAAA;IACA,4CAAA;EAiHV;AACF;AA9GA;EACI;IACI,wBAAA;EAgHN;;EA9GE;IACI,iBAAA;EAiHN;;EA/GE;IACI,mBAAA;EAkHN;;EAhHE;IACI,kBAAA;EAmHN;;EAjHE;IACI,yBAAA;IACA,gBAAA;EAoHN;;EAlHE;IACI,cAAA;IACA,kBAAA;IACA,uBAAA;EAqHN;;EAnHE;IACI,mBAAA;IACA,QAAA;IACA,8BAAA;IACA,cAAA;EAsHN;;EApHE;IACI,qBAAA;EAuHN;;EArHE;IACI,YAAA;EAwHN;;EAtHE;IACI,uBAAA;EAyHN;;EAvHE;IACI,kBAAA;IACA,WAAA;IACA,sBAAA;IACA,yCAAA;EA0HN;EAzHM;IACI,aAAA;IACA,uBAAA;IACA,uBAAA;EA2HV;EA1HU;IACI,SAAA;EA4Hd;EAzHM;IACI,gBAAA;IACA,qBAAA;EA2HV;EA1HU;IACI,eAAA;EA4Hd;EAzHM;IACI,aAAA;EA2HV;;EAxHE;IACI,kBAAA;EA2HN;;EAzHE;;IAEI,kBAAA;EA4HN;;EA1HE;IACI,+BAAA;EA6HN;;EA3HE;IACI,iBAAA;EA8HN;;EA3HM;IACI,WAAA;IACA,sBAAA;IACA,eAAA;EA8HV;;EA3HE;IACI,gCAAA;EA8HN;;EA5HE;IACI,aAAA;IACA,aAAA;IACA,gCAAA;EA+HN;EA9HM;IACI,0BAAA;IAAA,uBAAA;IAAA,kBAAA;EAgIV;EA9HM;IACI,wCAAA;EAgIV;EA9HM;IACI,kBAAA;EAgIV;;EA7HE;;IAEI,yCAAA;EAgIN;;EA9HE;IACI,oBAAA;IACA,WAAA;EAiIN;AACF;AA/HA;EACI;IACI,wBAAA;EAiIN;AACF;AA/HA;EAEQ;IACI,kBAAA;EAgIV;AACF;AA7HA;EACI;IACI,QAAA;IACA,cAAA;EA+HN;EA9HM;IACI,eAAA;EAgIV;;EA7HE;IACI,gCAAA;EAgIN;;EA9HE;IACI,kBAAA;EAiIN;;EA9HM;IACI,gCAAA;EAiIV;EAhIU;IACI,aAAA;EAkId;;EA9HE;IACI,iBAAA;EAiIN;;EA/HE;;IAEI,yCAAA;EAkIN;;EAhIE;IACI,oBAAA;IACA,WAAA;EAmIN;AACF;AAjIA;EACI;IACI,aAAA;IACA,cAAA;EAmIN;;EAhIE;IACI,wCAAA;IACA,mBAAA;EAmIN;EAlIM;IACI,wCAAA;EAoIV;;EAjIE;;;;IAII,eAAA;IACA,yCAAA;EAoIN;;EAjIM;IACI,UAAA;IACA,wBAAA;EAoIV;;EAhIM;IACI,UAAA;EAmIV;AACF;AAhIA;EACI;;;;IAII,wCAAA;EAkIN;;EAhIE;IACI,aAAA;EAmIN;AACF","file":"main.css"}
\ No newline at end of file
diff --git a/css/main.min.css b/css/main.min.css
index 8390924..e78652b 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-#landing_page,body,body #scroll_to_bottom{background:rgba(var(--foreground-color),1)}p,textarea{line-height:1.6}.contact .last-message,.contact .name,.copy-row .copy,.mail-card .sender,.text-overflow{white-space:nowrap;text-overflow:ellipsis}*,::after,::before{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{scroll-behavior:smooth;font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%}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)}body #scroll_to_bottom{box-shadow:0 .3rem .4rem rgba(0,0,0,.2)}body[data-theme=dark]{--accent-color:#3D5AFE;--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] .initial{color:rgba(var(--text-color),1)!important;box-shadow:0 .1rem .1rem rgba(0,0,0,.16)}body[data-theme=dark] .message,h1,h2,h3,h4,h5,textarea{color:rgba(var(--text-color),1)}body[data-theme=dark] #scroll_to_bottom{background:linear-gradient(rgba(var(--text-color),.1),rgba(var(--text-color),.1)),rgba(var(--foreground-color),1);box-shadow:0 .4rem .4rem rgba(0,0,0,.3)}h1{font-size:3rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.1rem}h5{font-size:.8rem}h1,h2,h3,h4,h5{font-weight:600}textarea{background:rgba(var(--text-color),.06);border:none;border-radius:.3rem;width:100%;padding:1rem;font-size:1rem;resize:none}.ripple,.shadow{border-radius:50%}.fab .icon,.icon,.tick{width:1.2rem}textarea:focus{outline:0;box-shadow:0 0 0 .1rem var(--accent-color)}strong{font-weight:500}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.align-center{align-items:center}.justify-right{margin-left:auto}.direction-column{flex-direction:column}.rest{flex:1}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.no-transformations{transform:none!important}.breakable{overflow-wrap:break-word}.text-overflow{overflow:hidden}.sticky{position:sticky;top:1rem}.light-text{color:rgba(var(--text-color-light),1)}.accent-color{color:var(--accent-color)}.secondary-color{color:var(--secondary-color)}.fab{filter:drop-shadow(0 .4rem .3rem rgba(0, 0, 0, .2));margin:1.5rem;position:fixed;right:0;bottom:0;z-index:1;--padding:0.9rem 1.6rem}.fab .icon{margin-left:0!important;margin-right:.5rem;height:1.2rem;stroke-width:8;stroke:#fff}a:any-link{word-wrap:break-word;color:var(--accent-color);font-weight:500}.solid-background{background:var(--background-color)!important}.normal-weight{font-weight:400}.warning{display:flex;background:wheat;color:#111}.icon{fill:none;stroke-width:6;stroke:rgba(var(--text-color),1);height:1.2rem;overflow:visible;stroke-linecap:round;stroke-linejoin:round}.ripple{position:absolute;transform:scale(0);background:rgba(var(--text-color),.2);pointer-events:none}#landing_illustration,.contact,.initial,.interact,.logo-section{position:relative}.interact{overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}sm-input{--border-radius:0.5rem}sm-popup sm-input+sm-input{margin-top:1rem}.popup-header{padding:.5rem 1.5rem 0;display:flex;align-items:center;width:100%}.popup-header .icon{padding:.7rem;height:2.4rem;width:2.4rem;stroke-width:8;transform:translateX(-.5rem);cursor:pointer;-webkit-tap-highlight-color:transparent}.popup-header .back{transform:none}.popup-header button,.popup-header sm-button{width:auto;margin-left:auto}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{overflow:hidden}.copy-row h4{margin-bottom:0!important}#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}.page{align-items:flex-start;width:100%;height:100%}.card{display:flex;flex-direction:column;margin:1rem 0}.tip{font-size:.9rem;color:rgba(var(--text-color),.8)}#settings_page #sign_out::part(button),.danger{color:var(--error-color)}sm-button[variant=primary]{--foreground-color:255,255,255}.logo-section{align-items:center;height:max-content;margin:.5rem 0}.logo-section h5{font-size:1.1rem!important;font-weight:500}.logo-section .main-logo{height:1.4rem;margin-right:.4rem;fill:rgba(var(--text-color),1);stroke:none}.logo-section img{width:2rem;margin-right:.5rem}.select-file input[type=file]{display:none}#landing{display:grid;border-radius:.6rem;width:100%;height:100%;padding:0 1.5rem;align-items:center}#landing .logo-section,#sign_in,.frame,.logo-section{padding:1.5rem}#landing .logo-section{display:flex}#landing .title-font{line-height:1.2;font-weight:700;font-size:2.5rem}#frame_1 h4,#frame_1 h5,#landing .left h3,#landing .left h4,#sign_in h2,#sign_in h4,#sign_in h5,.contact .name,.frame .h2,.initial{font-weight:500}#landing .left{display:grid;flex-direction:column;padding-bottom:1.5rem;z-index:1}#landing .left h4{color:var(--accent-color);margin-bottom:.5rem}#landing .left p,.contact .last-message,.contact .name{color:rgba(var(--text-color),.8)}#landing .left sm-button{margin:1.5rem 0 2rem;width:max-content}#landing .left h3{margin-bottom:1rem}#landing .left p{margin-top:1rem;font-size:1.1rem}#main_navbar .active .label,.initial{color:#fff}#landing .left .flex sm-button:first-of-type{margin-right:1rem}#landing_page{grid-template-rows:auto 1fr;overflow-y:auto}#landing_illustration{width:100%}#sign_in{width:100%;height:100%;align-items:flex-start}#sign_in .flex{width:100%;flex:1}#sign_in sm-input{margin:1.5rem 0}#sign_in h2{margin-top:2rem}#sign_in h4{margin-bottom:1.5rem}#sign_in h5{opacity:.8}#sign_in pin-input{margin:1rem 0 2rem}#sign_in sm-button{width:100%;--padding:0.8rem 1.6rem}#sign_in #remove_account{margin-top:1rem}#sign_in p{margin-bottom:.5rem;max-width:35ch;margin-top:.5rem}.frame{height:100%;display:flex;flex-direction:column;width:min(24rem,100%);justify-self:center}.frame .h2{margin-bottom:1rem}.frame sm-button[variant=primary]{margin-top:1.5rem}#frame_1 .warning{margin:1rem 0;padding:1rem;border-radius:.5rem}#frame_1 #generate_flo_id{width:100%}#frame_1 #credentials_section{animation:slide-down .3s cubic-bezier(.175,.885,.32,1.275);margin:2rem 0}#frame_1 .copy-row:not(:last-of-type){margin-bottom:1.5rem}#frame_2 pin-input{margin:1rem 0}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}#loading_page{height:100%;display:grid;place-content:center;justify-items:center}.page__loader{z-index:1;transform-origin:bottom;height:6rem;width:6rem;animation:bounce .5s infinite alternate ease-in}.shadow{margin-top:-1rem;width:5rem;height:2rem;background:rgba(var(--text-color),.1);animation:scale .5s infinite alternate ease-in;margin-left:1rem}.page__tag-line{margin-top:2rem}@keyframes bounce{0%{transform:scaleY(1) translateY(-4rem)}90%{transform:scaleY(1) translateY(0)}100%{transform:scaleY(.8)}}@keyframes scale{0%{transform:scale(.5)}90%{transform:scale(1.05)}100%{transform:scale(1)}}#main_page{width:100%;height:100%}.initial{justify-content:center;font-size:1.2rem;width:2.8rem;height:2.8rem;aspect-ratio:1/1;box-shadow:0 .1rem .1rem rgba(0,0,0,.06);border-radius:2rem;text-transform:uppercase;user-select:none}.filled{fill:rgba(var(--text-color),.7);stroke:none!important}.group-icon{height:1.6rem;width:1.6rem;fill:#fff;stroke:none}.contact{display:grid;gap:0 1rem;padding:.8rem 1.5rem;align-items:center;flex-shrink:0;user-select:none;overflow:hidden}.contact:not(.chat){grid-template-columns:auto 1fr;grid-template-areas:"dp ."}.contact.admin,.contact.chat,.contact.group,.mail-card{grid-template-columns:auto 1fr auto}.contact.chat,.contact.group{grid-template-areas:"dp . time" "dp . menu"}.contact.selected{background-color:rgba(var(--text-color),.06)}.contact .initial{grid-area:dp}.contact .name{width:100%;font-size:1em;overflow:hidden}.contact .last-message{overflow:hidden;font-weight:400;font-size:.9em}.contact .menu{grid-area:menu;justify-self:flex-end;padding:.2rem;fill:rgba(var(--text-color),1)}.contact .time{font-weight:500;color:rgba(var(--text-color),.7);grid-area:time}.contact .admin-tag{padding:.1rem .6rem;font-size:.8rem;border:var(--accent-color) solid thin;border-radius:3rem}.tick{position:absolute;bottom:-.2rem;right:-.2rem;height:1.2rem}.tick .icon{height:100%;width:100%;padding:.4rem;stroke-width:16;border-radius:1rem;background:rgba(var(--text-color),1);stroke:rgba(var(--foreground-color),.8)}#selected_contacts{padding:1rem 1.5rem}#selected_contacts h4{font-weight:500;font-size:1rem}#selected_contacts .warning{font-size:.9rem;padding:.5rem .8rem;border-radius:.5rem;margin:1rem 0;line-height:1.5}#selected_contacts sm-button{margin-bottom:0}#selected_contacts_container{display:flex;overflow:auto hidden}#selected_contacts_container:not(:empty){margin-top:1.5rem}#selected_contacts_container .contact-preview{display:flex;flex-shrink:0;align-items:center;cursor:pointer;margin-right:.5rem;background:rgba(var(--text-color),.1);padding:.4rem .5rem;border-radius:2rem}#selected_contacts_container .contact-preview .initial{width:1.6rem;height:1.6rem;font-size:.9rem}#selected_contacts_container .contact-preview .name{font-size:.9rem;color:rgba(var(--text-color),.8);margin-left:.5rem}#selected_contacts_container .contact-preview .tick{position:relative;bottom:auto;right:auto;margin-left:.5rem}#contact_details_popup{--body-padding:0 0 1.5rem 0}#contact_details_popup .popup-section{margin:1.5rem}#contact_details_popup h5{font-weight:500;opacity:.8}#contact_details_popup .copy-row h4{font-weight:400}#contact_details_popup .group-icon{padding:.2rem!important;height:3rem;width:3rem}#contact_details_popup #contact_initial{height:4.6rem;width:4.6rem;font-size:2.4rem;border-radius:4rem;margin-top:3rem;margin-bottom:.5rem}#contact_details_popup #contact_name{margin:.6rem 1.5rem}#contact_details_popup #contact_name::part(text){font-size:1.2rem;font-weight:500}#contact_details_popup .option .icon{padding:0;width:1.2rem;background:0 0}#warn_no_encryption,.date-card,.group-event-card{padding:.4rem .8rem;font-weight:500;background-color:rgba(var(--text-color),.04);border-radius:.5rem;color:rgba(var(--text-color),.8);margin:1rem 0;justify-self:center;align-self:center;text-align:center}.mail-card,.option{align-items:center;user-select:none}.group-event-card{font-size:.8rem;font-weight:400}#warn_no_encryption{background:#fffd8d;color:#111}.contact .initial::after,.mail-card .initial::after{content:"";position:absolute;bottom:-.1rem;right:-.1rem;height:1rem;width:1rem;background:var(--accent-color);border-radius:100%;border:rgba(var(--foreground-color),1) solid;transform:scale(0);transition:transform .3s}.mail,.mail-card{position:relative}.contact.unread .initial::after,.mail-card.unread .initial::after{transform:scale(1)}.contact.unread .date,.contact.unread .time,.mail-card.unread .date,.mail-card.unread .time{color:var(--accent-color)}.contact.unread h4,.mail-card.unread h4{color:rgba(var(--text-color),1)}.mail-card .description,.mail-card .sender{color:rgba(var(--text-color),.8);overflow:hidden}.contact.unread h4,.contact.unread h5,.contact.unread p,.mail-card.unread h4,.mail-card.unread h5,.mail-card.unread p{font-weight:700}.mail-card{display:grid;gap:0 1rem;padding:.8rem 1.5rem;flex-shrink:0;grid-template-areas:"dp sender date" "dp subject subject" "dp desc desc"}.mail-card .initial{grid-area:dp;align-self:flex-start;height:2rem;width:2rem;font-size:1rem}.mail-card .sender{width:100%;font-size:.8rem;font-weight:500}.mail-card .date{grid-area:date;margin-left:auto;font-weight:500;white-space:nowrap}.mail-card .subject{grid-area:subject;font-size:1em;margin-top:.3rem;font-weight:500}.mail-card .description{grid-area:desc;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.9em;margin-top:.2rem}@keyframes slide{from{opacity:0;transform:translateX(-1rem)}to{opacity:1;transform:none}}#mail_container{width:100%}.mail:not(:first-of-type){margin-top:2rem;padding-inline-start:1rem}.mail:not(:first-of-type)::before{content:"";position:absolute;left:0;top:0;width:.2rem;height:100%;background:rgba(var(--text-color),.2)}.mail .mail-header{align-self:start;margin-bottom:1rem;padding:1.5rem}.mail .sender-name{font-weight:500;margin-bottom:.5rem}.mail .flo-id{font-weight:400;max-width:90%}.mail .flex:first-of-type{margin-bottom:1rem}.mail .back{margin:0 0 0 -.5rem}.mail .mail-content,.mail .mail-subject{padding:0 1.5rem;overflow-wrap:break-word;word-wrap:break-word}.mail .mail-subject{margin-bottom:.4em}.mail .mail-content{height:max-content;max-width:60ch;white-space:pre-wrap}.logo-section{display:grid;grid-template-columns:auto 1fr}.option{display:flex;padding:.8rem 1.5rem}.option .icon{height:1.4rem;width:1.4rem;margin-right:1rem;stroke:rgba(255,255,255,.8)}#main_navbar{position:fixed;flex-direction:column;height:100%;bottom:0;top:0;padding:0;width:max(16rem,60vw);background:rgba(var(--foreground-color),1)}#main_navbar .logo-section{padding:0 1rem}#main_navbar .active{background:var(--accent-color)}#main_navbar .active .icon{stroke:#fff}#main_navbar .label{font-weight:500;font-size:.9rem}#main_navbar .navbar-item{height:auto;justify-content:flex-start;flex-direction:row;flex:none;padding:1rem}#main_navbar .navbar-item .icon{margin-right:.8rem;height:1.2rem;width:1.2rem}#main_navbar .navbar-item:last-of-type{margin-top:auto}#main_navbar .navbar-item.badge::after{right:0;top:0;position:absolute;content:attr(data-notifications);display:flex;justify-content:center;align-items:center;padding:.4rem;line-height:0;height:calc(1em + .4rem);background:#00C853;color:rgba(var(--foreground-color),1);border-radius:2rem;transition:transform .3s}#chat_details_panel,#contacts #contacts_container{padding-bottom:1.5rem}#main_navbar .navbar-item.badge.active::after,#main_navbar .navbar-item.badge[data-notifications=""]::after,#main_navbar .navbar-item.badge[data-notifications="0"]::after{transform:scale(0)}#auto_complete_contact{position:relative;justify-content:flex-start;padding-bottom:0}#mail_contact_list{max-height:40vh;overflow-y:auto;position:absolute;top:100%;background:rgba(var(--foreground-color),1);z-index:1;border-radius:.4rem;box-shadow:0 .1rem .1rem rgba(0,0,0,.1),0 .2rem .5rem rgba(0,0,0,.16);width:100%}#mail_contact_list .contact{grid-template-columns:auto 1fr;grid-template-areas:"dp ." "dp ."}#mail_contact_list sm-menu{display:none}#contacts{overflow-x:hidden}#contacts #all_contacts,#contacts #group_creation_panel{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;background:rgba(var(--foreground-color),1)}#contacts #all_contacts .header,#contacts #group_creation_panel .header{padding-top:.7rem}#contacts .scrolling-wrapper{height:100%;flex:1;overflow-y:auto}#contacts .scrolling-wrapper .empty-state{padding:1.5rem;text-align:center}#contacts #contacts_container::before{display:flex;content:"Contacts";font-size:.9em;color:rgba(var(--text-color),.9);padding:1rem 1.5rem}#group_creation_panel .grid{padding:1.5rem;gap:1rem}#group_creation_panel .group-icon{background:var(--accent-color);justify-self:center;height:8rem;width:8rem;margin-bottom:1rem;padding:2rem;border-radius:50%;font-size:4rem}#contacts,#mails{position:relative;grid-template-rows:max-content 1fr}#contacts,#mails,#settings_page{height:100vh;overflow-y:hidden}#contacts .header,#mails .header,#settings_page .header{padding:1rem 1.5rem;position:relative;gap:.5rem;min-height:4rem}#contacts .header .expanding-search,#mails .header .expanding-search,#settings_page .header .expanding-search{position:absolute;width:100%;padding:.7rem 1.5rem;background:rgba(var(--foreground-color),1);transform:scale(.9);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}#contacts .header .expanding-search.expand,#mails .header .expanding-search.expand,#settings_page .header .expanding-search.expand{transform:none;opacity:1;pointer-events:all}#contacts .header sm-input,#mails .header sm-input,#settings_page .header sm-input{margin:0;width:100%;--padding:0.5rem 1rem}#contacts .header h4,#mails .header h4,#settings_page .header h4{text-transform:capitalize;font-weight:500}#contacts .header .flex .hamburger-menu-button,#contacts .header .icon,#mails .header .flex .hamburger-menu-button,#mails .header .icon,#settings_page .header .flex .hamburger-menu-button,#settings_page .header .icon{-webkit-tap-highlight-color:transparent;margin-right:1rem}#contacts .header .flex h4,#mails .header .flex h4,#settings_page .header .flex h4{flex:1}#contacts .header .flex .icon,#mails .header .flex .icon,#settings_page .header .flex .icon{height:2.2rem;width:2.2rem;padding:.6rem;margin-left:-.4rem;cursor:pointer}#contacts .header .flex sm-menu,#mails .header .flex sm-menu,#settings_page .header .flex sm-menu{margin-right:-.7rem}#contacts .header sm-button,#mails .header sm-button,#settings_page .header sm-button,#type_message{margin:0}#contacts .header sm-button .icon,#mails .header sm-button .icon,#settings_page .header sm-button .icon{height:.9rem;width:.9rem;align-self:center;stroke-width:8;margin-left:0;margin-right:.5rem}#chat_page,#mail_page,#settings_page{align-items:flex-start;width:100%;height:100%}#chat_page{overflow:hidden}#chat_details_panel,#chat_left{position:relative;display:flex;flex-direction:column;height:100%;overflow-y:auto}#chat_details_panel{background:rgba(var(--text-color),.04)}#chat_details_panel .card{margin:0 1rem;padding:1.5rem 1rem;border-radius:.8rem;background:rgba(var(--text-color),.04)}#chat_details_panel .card:not(:last-of-type){margin-bottom:1rem}#chat_details_panel .card .h4{font-weight:400;font-size:.9rem;color:rgba(var(--text-color),.8);margin-bottom:.5rem}#chat_details_panel .card>.flex{margin-bottom:1rem}#chat_details_panel .card>.flex .h4{margin-bottom:0}#chat_details_panel .card .tip{margin-bottom:.5rem}#chat_details_panel .card .danger:not(:last-of-type){margin-bottom:1rem}#chat_details_panel header{position:sticky;top:0;padding:1rem;min-height:4rem;background-color:rgba(var(--foreground-color),.8);z-index:1}#chat_details_panel header .icon{height:2.3rem;width:2.3rem;padding:.7rem;cursor:pointer}#chat_details_panel .contact{padding:.5rem 0}#chat_details_panel #chat_profile{display:grid;place-items:center;margin-top:5.5rem;padding-bottom:1.5rem}#chat_details_panel #chat_profile .initial{margin-top:-5.5rem;margin-bottom:1rem;height:8rem;width:8rem;border-radius:50%;font-size:4rem}#chat_details_panel #chat_profile .initial .icon{height:4rem;width:4rem}#chat_details_panel #chat_profile #chat_name{font-weight:500;font-size:1.2rem}#chat_details_panel #chat_profile #last_interaction_time{color:rgba(var(--text-color),.7);font-size:.9rem;margin-top:.5rem}#new_conversation p,#no_mails p,.message{margin-top:.8rem}#chat_details_panel .copy{font-weight:400}#group_members_list{max-height:50vh;overflow-y:auto}#chat{position:relative;grid-template-columns:1fr}.message{position:relative;display:flex;flex-wrap:wrap;width:auto;font-size:.92rem;max-width:max-content;margin-bottom:.2rem;padding:.6em 1em;transition:opacity .3s,transform .3s cubic-bezier(.175,.885,.32,1.275)}.message .sender-name{font-size:.85rem;font-weight:500;margin-bottom:.3rem}.message .message-body{display:flex;align-items:center;flex-wrap:wrap;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;word-break:break-word;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;white-space:pre-wrap;line-height:1.5}.message .message-body a{color:inherit}.message .message-body .text-emoji{align-self:center;font-size:1.4em;letter-spacing:0}.message .time{white-space:nowrap;font-size:.8em;opacity:.8;justify-self:flex-end;padding-left:1rem;align-self:flex-end;margin-top:.2rem;margin-left:auto}.sent{margin-left:auto;color:#efefef;background:var(--accent-color);border-radius:.8rem 0 .8rem .8rem}#settings_page .bg-preview,.received{background:rgba(var(--text-color),.1)}.sent::after{content:"";position:absolute;left:100%;top:0;width:0;height:0;border-style:solid;border-width:.5em .3em 0 0;border-color:var(--accent-color) transparent transparent}.received{margin-right:auto;border-radius:0 .8rem .8rem}.received::after{content:"";position:absolute;left:-.5em;top:0;width:0;height:0;border-style:solid;border-width:0 .5em .5em 0;border-color:transparent rgba(var(--text-color),.1) transparent transparent}.received+.received,.sent+.sent{margin-top:0;border-radius:.8rem}.received+.received::after,.sent+.sent::after{display:none}.distinct-sender{display:grid;border-radius:0 .8rem .8rem!important;margin-top:.8rem!important}.distinct-sender::after{display:flex!important;content:"";position:absolute;left:-.5em;top:0;width:0;height:0;border-style:solid;border-width:0 .5em .5em 0;border-color:transparent rgba(var(--text-color),.1) transparent transparent}.unconfirmed{opacity:.7;transform-origin:left;animation:pop .3s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes pop{0%{transform:rotate(5deg) translate(-.5rem,1rem)}100%{transform:rotate(0) translate(0,0)}}#chat_header{padding:0 1rem;min-height:4rem;grid-template-columns:1fr auto}#chat_header .flex{height:100%}#chat_header .back-button{height:2rem;width:2rem;padding:.5rem;stroke-width:8;margin-right:.5rem;stroke:rgba(var(--text-color),.8)}#chat_header .initial{cursor:pointer;margin-right:1rem;height:2.2rem;width:2.2rem;flex-shrink:0}#chat_header #receiver_name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#scroll_to_bottom{position:absolute;display:flex;right:0;bottom:4rem;border-radius:4rem;z-index:1;aspect-ratio:1/1;margin:1.5rem;cursor:pointer;transform:scale(0);transition:transform .3s}#scroll_to_bottom.new-message::after{position:absolute;content:"";top:0;right:0;z-index:2;padding:.5rem;border-radius:50%;background:#00E676}.has-bg-image #chat_details_panel,.has-bg-image .date-card,.has-bg-image .group-event-card,.has-bg-image .received{background:rgba(var(--foreground-color),.8)}#scroll_to_bottom .icon{width:2.6rem;height:2.6rem;padding:.9rem;stroke-width:8}#chat_footer .flex{align-items:flex-end;padding:.5rem 1rem .5rem .5rem}#chat_footer sm-textarea{--padding-right:3rem;--border-radius:0.5rem}#emoji_toggle{align-self:center;padding:.6rem;margin-right:.5rem;width:2.6rem;height:2.6rem;border-radius:2rem;cursor:pointer}#emoji_toggle path{fill:rgba(var(--text-color),.5)}#emoji_toggle.active path{fill:var(--accent-color)}#send_message_button{position:absolute;right:1.5rem;transform:scale(0);opacity:0;pointer-events:none;z-index:1;align-self:center;height:2.4rem;width:2.4rem;padding:.5rem;cursor:pointer;stroke:none;fill:rgba(var(--text-color),.4);margin-left:1rem;transition:.3s}#send_message_button.active{opacity:1;fill:var(--accent-color);transform:none;pointer-events:all}.big-emoji{flex-direction:column}.big-emoji .message-body{justify-content:center;font-size:2.6rem}.big-emoji .text-emoji{font-size:2.6rem!important}#chat_middle{flex:1;padding:0 1rem}#emoji_picker{--background:rgba(var(--text-color), 0.06);--border-size:0;--input-border-color:none;--input-padding:0.4rem 1rem;--outline-color:var(--accent-color);--input-font-color:var(--text-color);--input-placeholder-color:rgba(var(--text-color), 0.6);--indicator-color:var(--accent-color);--button-hover-background:rgba(var(--text-color), 0.2);user-select:none;width:100%;max-height:40vh}.emoji{font-size:1.6rem;cursor:pointer;padding:.4rem;border-radius:.6rem;user-select:none;text-align:center}#new_conversation,#no_mails{height:100%;justify-content:center;text-align:center;padding:1.5rem}#no_mails .new-conversation{height:7rem;margin-bottom:1rem}.new-conversation{height:8rem;width:8rem;align-self:center;stroke-width:16;stroke:rgba(var(--text-color),.4)}#chat_container,#chat_middle,#inbox_mail_container,#mail,#sent_mail_container{width:100%;flex-direction:column;height:100%;overflow-y:auto}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}#chat_container{padding-bottom:6rem}#call_controls,#contacts_popup .popup-header{padding:1.5rem}#contacts_popup{--body-padding:0}#contacts_popup .warning{padding:.5rem 1.5rem}.mail-container{height:100%;flex-direction:column;overflow-y:auto}#inbox_mail_container,#sent_mail_container{gap:.2rem;padding-bottom:6rem}.has-bg-image .received::after{border-color:transparent rgba(var(--foreground-color),.6) transparent transparent}.has-bg-image #emoji_picker{--background:rgba(var(--foreground-color), 0.6)}.has-bg-image #emoji_toggle path{fill:rgba(var(--text-color),.8)}.has-bg-image sm-textarea{--background:rgba(var(--foreground-color), 0.6)}#mail{height:100vh;align-items:flex-start}#mail>.flex{padding:0 1.5rem;margin-top:2rem}#mail>.flex sm-button:first-of-type{margin-right:.5rem}#compose_mail_popup sm-input{margin-bottom:1rem}.sidebar-item{display:flex;align-items:center;padding:1rem 1.5rem;text-transform:capitalize;font-weight:500;opacity:.9}.sidebar-item .icon{margin-right:1em;width:1em}.back{padding:.7rem;height:2.4rem;width:2.4rem;margin-left:-.5rem;cursor:pointer;stroke-width:8;opacity:.8;-webkit-tap-highlight-color:transparent}.back:hover{opacity:1}#settings_page #settings_sidebar header{padding:1rem 1.5rem}#settings_page .flex sm-button{margin:0;margin-left:1rem}#settings_page sm-switch{padding:1rem 1.5rem;display:flex;margin-bottom:1rem;width:min(60ch,100%)}#settings_page sm-switch .flex{margin-right:1rem}#settings_page sm-switch h4{margin-bottom:.5rem}#settings_page sm-button{width:100%}#settings_page #settings_title{text-transform:capitalize}#settings_page #settings_sidebar{height:100%}#settings_page #settings_panel{overflow-y:auto;height:100%}#settings_page section{padding:1rem 1.5rem;width:min(60ch,100%);display:grid;gap:.3rem}#settings_page section sm-button{margin-top:.5rem;margin-bottom:0}#settings_page section:not(:last-of-type){margin-bottom:1rem}#settings_page color-grid{margin:.5rem 0 1.5rem;width:min(60ch,100%)}#settings_page #chat_preview{margin-top:1rem;padding:1rem;border-radius:.5rem}#settings_page #bg_preview_container{padding:1rem 0;gap:.5rem;flex-wrap:wrap}#settings_page .bg-preview{position:relative;display:grid;place-items:center;height:8rem;width:8rem;cursor:pointer;border-radius:1rem;overflow:hidden}#settings_page .bg-preview--selected::after{content:"";position:absolute;height:100%;width:100%;box-shadow:0 0 0 .5rem rgba(var(--text-color),.8) inset}#settings_page .bg-preview__image{object-fit:cover;height:100%;width:100%}#video_call_page{position:relative;display:grid}#video_call_page video{position:fixed;object-fit:cover;object-position:center}#their_video{height:100%}#my_video{width:max(20vh,12rem);bottom:0;right:0;border-radius:1rem;border:solid;margin:1.5rem}#call_controls{margin-top:auto;justify-self:center}#pick_up_call{color:#00C853}.circular-button{align-items:center;--padding:0;--border-radius:50%}.circular-button .filled{height:3rem;width:3rem;padding:1rem}@media screen and (max-width:640px){sm-popup{--border-radius:1rem 1rem 0 0}.hide-on-mobile{position:fixed;max-height:0;opacity:0;pointer-events:none}#landing{grid-template-areas:"illustration" ".";align-items:flex-start}#landing .title-font{font-size:2rem;font-weight:500}#landing sm-button{display:flex;width:100%!important}#landing_illustration{grid-area:illustration}#sign_in form,.frame form{height:100%}#sign_in .h2,.frame .h2{margin-top:3rem}#sign_in sm-button[variant=primary],.frame sm-button[variant=primary]{margin-top:auto}#main_navbar{transform:translateX(-110%);transition:transform .3s;z-index:4;box-shadow:0 0 1rem rgba(0,0,0,.3)}#main_navbar .logo-section{padding:1rem}#navbar_backdrop{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.3);z-index:2;transition:transform .3s,opacity .3s}#chat_container,#contact_container{gap:.2rem}#chat .message{width:auto;max-width:90%}#chat_header{grid-template-columns:auto 1fr auto}#settings_page{overflow-x:hidden}#settings_page #settings_header{position:sticky;top:0;z-index:1;padding:1rem 1.5rem;margin-bottom:.5rem;background:rgba(var(--foreground-color),1)}}@media only screen and (min-width:640px){.hide-on-desktop{display:none!important}.page{padding-bottom:0}.popup-header{padding-top:1.5rem}.fab{position:absolute}.logo-section{padding:2rem 3rem 0;margin:.5rem 0}sm-popup{--width:24rem;--min-width:24rem;--border-radius:0.5rem}#landing{align-items:center;gap:4vw;grid-template-columns:1fr 1fr;padding:0 4vw}#sign_in_page{place-content:center}#sign_in{width:24rem}.frame{justify-content:center}#main_navbar{position:relative;width:auto;padding-bottom:.5rem;background:rgba(var(--text-color),.06)}#main_navbar .logo-section{display:flex;justify-content:center;margin:1.5rem 0 2rem}#main_navbar .logo-section .main-logo{margin:0}#main_navbar .navbar-item{margin:0 .5rem;border-radius:.8rem}#main_navbar .navbar-item .icon{margin-right:0}#main_navbar .label{display:none}#add_contact_popup{--min-width:24rem}#compose_mail_popup,#reply_mail_popup{--min-width:36rem}#main_page{grid-template-columns:auto 1fr}#emoji_picker{max-height:18rem}#chat .message{width:auto;align-self:flex-start;max-width:55ch}#chat_page,#mail_page{grid-template-columns:20rem 1fr}#settings_page{display:grid;height:100vh;grid-template-columns:14rem 1fr}#settings_page sm-button{width:max-content}#settings_page .active{background:rgba(var(--text-color),.1)}#settings_page .panel>:first-of-type{margin-top:.5rem}.contact.active,.mail-card.active{background:rgba(var(--text-color),.06)}.card{display:inline-flex;width:auto}}@media only screen and (max-width:1280px){.hide-on-medium{display:none!important}}@media only screen and (min-width:1080px){#chat #messages_container{padding:1rem 4rem}}@media only screen and (min-width:1280px){#landing{gap:4vw;padding:0 8vw}#landing .title-font{font-size:3rem}#chat_page,#mail_page{grid-template-columns:23rem 1fr}#chat_details_panel{position:relative}#chat.expand-side-panel{grid-template-columns:1fr 24rem}#chat.expand-side-panel #messages_container{padding:1rem}#emoji_picker{--num-columns:16}.contact.active,.mail-card.active{background:rgba(var(--text-color),.06)}.card{display:inline-flex;width:auto}}@media (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:hover,.emoji:hover,.navbar-item:hover,.option:hover{cursor:pointer;background:rgba(var(--text-color),.06)}.contact .menu{opacity:0;transition:opacity .3s}.contact:hover .menu{opacity:1}}@media (hover:none){.contact,.contact-preview,.icon,.option{-webkit-tap-highlight-color:transparent}.contact .menu{display:none}}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #3d5afe;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);color:rgba(var(--text-color), 1);background:rgba(var(--foreground-color), 1)}body #scroll_to_bottom{background:rgba(var(--foreground-color), 1);box-shadow:0 .3rem .4rem rgba(0,0,0,.2)}body[data-theme=dark]{--accent-color: #6d83ff;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] .initial{color:rgba(var(--text-color), 1) !important;box-shadow:0 .1rem .1rem rgba(0,0,0,.16)}body[data-theme=dark] .message{color:rgba(var(--text-color), 1)}body[data-theme=dark] #scroll_to_bottom{background:linear-gradient(rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.1)),rgba(var(--foreground-color), 1);box-shadow:0 .4rem .4rem rgba(0,0,0,.3)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}.warning{line-height:normal;padding:1rem;background-color:khaki;border-radius:.5rem;font-weight:500;color:rgba(0,0,0,.7)}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button,.button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible,.button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled),.button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1) !important}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.button--small{padding:.4rem .6rem}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:.8rem 1rem}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}sm-select{--padding: 0.8rem;font-size:.9rem}sm-option{font-size:.9rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul,ol{list-style:none}ol{counter-reset:item}ol li{position:relative;display:flex;align-items:flex-start;counter-increment:item}ol li:not(:last-of-type){padding-bottom:1.5rem}ol li:not(:last-of-type)::after{content:"";position:absolute;width:.1rem;height:calc(100% - 2.2rem);background:var(--accent-color);margin-left:.7rem;margin-top:2rem}ol li::before{content:counter(item);display:flex;align-items:center;justify-content:center;text-align:center;font-size:.8rem;font-weight:500;margin-top:.15rem;margin-right:1rem;line-height:1;width:1.5rem;height:1.5rem;border-radius:100%;flex-shrink:0;color:rgba(var(--text-color), 0.8);background:rgba(var(--text-color), 0.1)}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-3{gap:.3rem}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-items:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.align-self-end{align-self:end}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.flex-direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.label{font-size:.8rem;color:rgba(var(--text-color), 0.8);font-weight:500;margin-bottom:.2rem}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none !important}.observe-empty-state:not(:empty)+.empty-state{display:none !important}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}.page{height:100%}.page__header{display:flex;justify-content:space-between;margin-bottom:1.5rem;min-height:8rem}.page__header .grid{margin-top:auto}.page__header h1{margin-top:auto;font-size:2rem}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem}.flo-icon{margin-right:.3rem;height:1.5rem;width:1.5rem}#secondary_pages{display:flex;flex-direction:column;width:100%}#secondary_pages header{padding:1.5rem}#secondary_pages .inner-page{height:100%}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{color:rgba(var(--text-color), 0.8)}.card{display:flex;flex-direction:column;margin:1rem 0}.tip{font-size:.9rem;color:rgba(var(--text-color), 0.8)}sm-button[variant=primary]{--foreground-color: 255, 255, 255}.danger{color:var(--error-color)}.logo-section{display:flex;position:relative;align-items:center;height:-webkit-max-content;height:-moz-max-content;height:max-content;margin:.5rem 0}.logo-section h5{font-size:1.1rem !important;font-weight:500}.logo-section .main-logo{height:1.4rem;margin-right:.4rem;fill:rgba(var(--text-color), 1);stroke:none}.logo-section img{width:2rem;margin-right:.5rem}.select-file input[type=file]{display:none}#landing{display:grid;border-radius:.6rem;width:100%;height:100%;padding:0 1.5rem;align-items:center}#landing .logo-section{padding:1.5rem;display:flex}#landing .title-font{line-height:1.2;font-weight:700;font-size:2.5rem}#landing .left{display:grid;flex-direction:column;padding-bottom:1.5rem;z-index:1}#landing .left h4{color:var(--accent-color);margin-bottom:.5rem;font-weight:500}#landing .left sm-button{margin:1.5rem 0 2rem 0;width:-webkit-max-content;width:-moz-max-content;width:max-content}#landing .left h3{margin-bottom:1rem;font-weight:500}#landing .left p{margin-top:1rem;font-size:1.1rem;color:rgba(var(--text-color), 0.8)}#landing .left .flex sm-button:first-of-type{margin-right:1rem}#landing_page{grid-template-rows:auto 1fr;overflow-y:auto;background:rgba(var(--foreground-color), 1)}.logo-section{padding:1.5rem}#landing_illustration{position:relative;width:100%}@-webkit-keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}#loading_page{height:100%;display:grid;place-content:center;justify-items:center}.page__loader{z-index:1;transform-origin:bottom;height:6rem;width:6rem;-webkit-animation:bounce .5s infinite alternate ease-in;animation:bounce .5s infinite alternate ease-in}.shadow{margin-top:-1rem;width:5rem;height:2rem;background:rgba(var(--text-color), 0.1);border-radius:50%;-webkit-animation:scale .5s infinite alternate ease-in;animation:scale .5s infinite alternate ease-in;margin-left:1rem}.page__tag-line{margin-top:2rem}@-webkit-keyframes bounce{0%{transform:scaleY(1) translateY(-4rem)}90%{transform:scaleY(1) translateY(0)}100%{transform:scaleY(0.8)}}@keyframes bounce{0%{transform:scaleY(1) translateY(-4rem)}90%{transform:scaleY(1) translateY(0)}100%{transform:scaleY(0.8)}}@-webkit-keyframes scale{0%{transform:scale(0.5)}90%{transform:scale(1.05)}100%{transform:scale(1)}}@keyframes scale{0%{transform:scale(0.5)}90%{transform:scale(1.05)}100%{transform:scale(1)}}#main_page{display:grid;grid-template-columns:minmax(0, 1fr);grid-template-rows:auto 1fr;height:100%;width:100%;transition:background-color .3s;background-color:rgba(var(--foreground-color), 1)}.initial{position:relative;justify-content:center;font-size:1.2rem;font-weight:500;width:2.8rem;height:2.8rem;aspect-ratio:1/1;color:#fff;box-shadow:0 .1rem .1rem rgba(0,0,0,.06);border-radius:2rem;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.filled{fill:rgba(var(--text-color), 0.7);stroke:none !important}.group-icon{height:1.6rem;width:1.6rem;fill:#fff;stroke:none}.contact{position:relative;display:grid;gap:0 1rem;padding:.8rem 1.5rem;align-items:center;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden}.contact:not(.chat){grid-template-columns:auto 1fr;grid-template-areas:"dp ."}.contact.chat,.contact.group{grid-template-columns:auto 1fr auto;grid-template-areas:"dp . time" "dp . menu"}.contact.admin{grid-template-columns:auto 1fr auto}.contact.selected{background-color:rgba(var(--text-color), 0.06)}.contact .initial{grid-area:dp}.contact .name,.contact .last-message{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:rgba(var(--text-color), 0.8)}.contact .name{width:100%;font-size:1em;font-weight:500}.contact .last-message{font-weight:400;font-size:.9em}.contact .menu{grid-area:menu;justify-self:flex-end;padding:.2rem;fill:rgba(var(--text-color), 1)}.contact .time{font-weight:500;color:rgba(var(--text-color), 0.7);grid-area:time}.contact .admin-tag{padding:.1rem .6rem;font-size:.8rem;border:var(--accent-color) thin solid;border-radius:3rem}.tick{position:absolute;bottom:-0.2rem;right:-0.2rem;height:1.2rem;width:1.2rem}.tick .icon{height:100%;width:100%;padding:.4rem;stroke-width:16;border-radius:1rem;background:rgba(var(--text-color), 1);stroke:rgba(var(--foreground-color), 0.8)}#selected_contacts_container{display:flex;overflow:auto hidden}#selected_contacts_container:not(:empty){margin-top:1.5rem}#selected_contacts_container .contact-preview{display:flex;flex-shrink:0;align-items:center;cursor:pointer;margin-right:.5rem;background:rgba(var(--text-color), 0.1);padding:.4rem .5rem;border-radius:2rem}#selected_contacts_container .contact-preview .initial{width:1.6rem;height:1.6rem;font-size:.9rem}#selected_contacts_container .contact-preview .name{font-size:.9rem;color:rgba(var(--text-color), 0.8);margin-left:.5rem}#selected_contacts_container .contact-preview .tick{position:relative;bottom:auto;right:auto;margin-left:.5rem}#contact_details_popup{--body-padding: 0 0 1.5rem 0}#contact_details_popup .popup-section{margin:1.5rem}#contact_details_popup h5{font-weight:500;opacity:.8}#contact_details_popup .copy-row h4{font-weight:400}#contact_details_popup .group-icon{padding:.2rem !important;height:3rem;width:3rem}#contact_details_popup #contact_initial{height:4.6rem;width:4.6rem;font-size:2.4rem;border-radius:4rem;margin-top:3rem;margin-bottom:.5rem}#contact_details_popup #contact_name{margin:.6rem 1.5rem}#contact_details_popup #contact_name::part(text){font-size:1.2rem;font-weight:500}#contact_details_popup .option .icon{padding:0;width:1.2rem;background:none}#warn_no_encryption,.date-card,.group-event-card{padding:.4rem .6rem;font-weight:500;font-size:.8rem;background-color:rgba(var(--text-color), 0.04);border-radius:.3rem;color:rgba(var(--text-color), 0.8);margin:1rem 0;justify-self:center;align-self:center;text-align:center}.group-event-card{font-size:.8rem;font-weight:400}#warn_no_encryption{background:#fffd8d;color:#111}.contact .initial::after,.mail-card .initial::after{content:"";position:absolute;bottom:-0.1rem;right:-0.1rem;height:1rem;width:1rem;background:var(--accent-color);border-radius:100%;border:solid rgba(var(--foreground-color), 1) 1px;transform:scale(0);transition:transform .3s}.contact.unread .initial::after,.mail-card.unread .initial::after{transform:scale(1)}.mail-card.unread .time,.mail-card.unread .date,.contact.unread .time,.contact.unread .date{color:var(--accent-color)}.mail-card.unread h4,.contact.unread h4{color:rgba(var(--text-color), 1)}.mail-card.unread h4,.mail-card.unread h5,.mail-card.unread p,.contact.unread h4,.contact.unread h5,.contact.unread p{font-weight:700}.mail-card{position:relative;display:grid;gap:0 1rem;padding:.8rem 1.5rem;align-items:center;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;grid-template-columns:auto 1fr auto;grid-template-areas:"dp sender date" "dp subject subject" "dp desc desc"}.mail-card .initial{grid-area:dp;align-self:flex-start;height:2rem;width:2rem;font-size:1rem}.mail-card .sender{width:100%;font-size:.8rem;font-weight:500;color:rgba(var(--text-color), 0.8);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mail-card .date{grid-area:date;margin-left:auto;font-weight:500;white-space:nowrap}.mail-card .subject{grid-area:subject;font-size:1em;margin-top:.3rem;font-weight:500}.mail-card .description{grid-area:desc;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9em;margin-top:.2rem;color:rgba(var(--text-color), 0.8)}@-webkit-keyframes slide{from{opacity:0;transform:translateX(-1rem)}to{opacity:1;transform:none}}@keyframes slide{from{opacity:0;transform:translateX(-1rem)}to{opacity:1;transform:none}}#mail_container{width:100%}.mail{position:relative}.mail:not(:first-of-type){margin-top:2rem;-webkit-padding-start:1rem;padding-inline-start:1rem}.mail:not(:first-of-type)::before{content:"";position:absolute;left:0;top:0;width:.2rem;height:100%;background:rgba(var(--text-color), 0.2)}.mail .mail-header{align-self:start;margin-bottom:1rem;padding:1.5rem}.mail .sender-name{font-weight:500;margin-bottom:.5rem}.mail .flo-id{font-weight:400;max-width:90%}.mail .flex:first-of-type{margin-bottom:1rem}.mail .back{margin:0 0 0 -0.5rem}.mail .mail-subject,.mail .mail-content{padding:0 1.5rem;overflow-wrap:break-word;word-wrap:break-word}.mail .mail-subject{margin-bottom:.4em}.mail .mail-content{height:-webkit-max-content;height:-moz-max-content;height:max-content;max-width:60ch;white-space:pre-wrap}.logo-section{display:grid;grid-template-columns:auto 1fr}.option{display:flex;align-items:center;padding:.8rem 1.5rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.option .icon{height:1.4rem;width:1.4rem;margin-right:1rem;stroke:rgba(255,255,255,.8)}#main_navbar{display:flex;background:rgba(var(--text-color), 0.03)}#main_navbar.hide-away{position:absolute}#main_navbar ul{display:flex;height:100%;width:100%}#main_navbar ul li{width:100%}.nav-item{position:relative;display:flex;flex:1;width:100%;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .3rem;color:var(--text-color);font-size:.8rem;border-radius:.3rem;font-weight:500}.nav-item .icon{transition:transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item__title{margin-top:.3rem;transition:opacity .2s,transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.nav-item--active{color:var(--accent-color)}.nav-item--active .icon{fill:var(--accent-color);transform:translateY(50%)}.nav-item--active .nav-item__title{transform:translateY(100%);opacity:0}.nav-item__indicator{position:absolute;bottom:0;width:2rem;height:.3rem;background:var(--accent-color);border-radius:1rem 1rem 0 0;z-index:1}.nav-item:last-of-type{margin-top:auto}.nav-item.badge::after{right:0;top:0;position:absolute;content:attr(data-notifications);display:flex;justify-content:center;align-items:center;padding:.4rem;line-height:0;height:calc(1em + .4rem);background:#00c853;color:rgba(var(--foreground-color), 1);border-radius:2rem;transition:transform .3s}.nav-item.badge.active::after,.nav-item.badge[data-notifications="0"]::after,.nav-item.badge[data-notifications=""]::after{transform:scale(0)}#auto_complete_contact{position:relative;justify-content:flex-start;padding-bottom:0}#mail_contact_list{max-height:40vh;overflow-y:auto;position:absolute;top:100%;background:rgba(var(--foreground-color), 1);z-index:1;border-radius:.4rem;box-shadow:0 .1rem .1rem rgba(0,0,0,.1),0 .2rem .5rem rgba(0,0,0,.16);width:100%}#mail_contact_list .contact{grid-template-columns:auto 1fr;grid-template-areas:"dp ." "dp ."}#mail_contact_list sm-menu{display:none}#contacts{position:relative;overflow-x:hidden}#contacts .scrolling-wrapper{height:100%;flex:1;overflow-y:auto}#contacts .scrolling-wrapper .empty-state{padding:1.5rem;text-align:center}#contacts #contacts_container{padding-bottom:1.5rem}#contacts #contacts_container::before{display:flex;content:"Contacts";font-size:.9em;color:rgba(var(--text-color), 0.9);padding:1rem 1.5rem}#group_creation_panel .group-icon{background:var(--accent-color);justify-self:center;height:8rem;width:8rem;margin-bottom:1rem;padding:2rem;border-radius:50%;font-size:4rem}#contacts,#mails{position:relative;grid-template-rows:-webkit-max-content 1fr;grid-template-rows:max-content 1fr}#contacts,#mails,#settings_page{height:100vh;overflow-y:hidden}#contacts .header,#mails .header,#settings_page .header{padding:1rem 1.5rem 1rem 1.5rem;position:relative;gap:.5rem;min-height:4rem}#contacts .header .expanding-search,#mails .header .expanding-search,#settings_page .header .expanding-search{position:absolute;width:100%;padding:.7rem 1.5rem;background:rgba(var(--foreground-color), 1);transform:scale(0.9);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}#contacts .header .expanding-search.expand,#mails .header .expanding-search.expand,#settings_page .header .expanding-search.expand{transform:none;opacity:1;pointer-events:all}#contacts .header sm-input,#mails .header sm-input,#settings_page .header sm-input{margin:0;width:100%;--padding: 0.5rem 1rem}#contacts .header h4,#mails .header h4,#settings_page .header h4{text-transform:capitalize;font-weight:500}#contacts .header .icon,#mails .header .icon,#settings_page .header .icon{-webkit-tap-highlight-color:transparent;margin-right:1rem}#contacts .header .flex h4,#mails .header .flex h4,#settings_page .header .flex h4{flex:1}#contacts .header .flex .icon,#mails .header .flex .icon,#settings_page .header .flex .icon{height:2.2rem;width:2.2rem;padding:.6rem;margin-left:-0.4rem;cursor:pointer}#contacts .header .flex sm-menu,#mails .header .flex sm-menu,#settings_page .header .flex sm-menu{margin-right:-0.7rem}#contacts .header sm-button,#mails .header sm-button,#settings_page .header sm-button{margin:0}#contacts .header sm-button .icon,#mails .header sm-button .icon,#settings_page .header sm-button .icon{height:.9rem;width:.9rem;align-self:center;stroke-width:8;margin-left:0;margin-right:.5rem}#chat_page,#mail_page,#settings_page{align-items:flex-start;width:100%;height:100%}#chat_page{overflow:hidden}#chat_left,#chat_details_panel{position:relative;display:flex;flex-direction:column;height:100%;overflow-y:auto}#chat_details_panel{background:rgba(var(--text-color), 0.04);padding-bottom:1.5rem}#chat_details_panel .card{margin:0 1rem;padding:1.5rem 1rem;border-radius:.8rem;background:rgba(var(--text-color), 0.04)}#chat_details_panel .card:not(:last-of-type){margin-bottom:1rem}#chat_details_panel .card .h4{font-weight:400;font-size:.9rem;color:rgba(var(--text-color), 0.8);margin-bottom:.5rem}#chat_details_panel .card>.flex{margin-bottom:1rem}#chat_details_panel .card>.flex .h4{margin-bottom:0}#chat_details_panel .card .tip{margin-bottom:.5rem}#chat_details_panel .card .danger:not(:last-of-type){margin-bottom:1rem}#chat_details_panel header{position:-webkit-sticky;position:sticky;top:0;padding:1rem;min-height:4rem;background-color:rgba(var(--foreground-color), 0.8);z-index:1}#chat_details_panel header .icon{height:2.3rem;width:2.3rem;padding:.7rem;cursor:pointer}#chat_details_panel .contact{padding:.5rem 0}#chat_details_panel #chat_profile{display:grid;place-items:center;margin-top:5.5rem;padding-bottom:1.5rem}#chat_details_panel #chat_profile .initial{margin-top:-5.5rem;margin-bottom:1rem;height:8rem;width:8rem;border-radius:50%;font-size:4rem}#chat_details_panel #chat_profile .initial .icon{height:4rem;width:4rem}#chat_details_panel #chat_profile #chat_name{font-weight:500;font-size:1.2rem}#chat_details_panel #chat_profile #last_interaction_time{color:rgba(var(--text-color), 0.7);font-size:.9rem;margin-top:.5rem}#chat_details_panel .copy{font-weight:400}#group_members_list{max-height:50vh;overflow-y:auto}#chat{position:relative;grid-template-columns:1fr}.message{position:relative;display:flex;flex-wrap:wrap;width:auto;font-size:.92rem;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content;margin-bottom:.2rem;margin-top:.8rem;padding:.6em 1em;transition:opacity .3s,transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275)}.message .sender-name{font-size:.85rem;font-weight:500;margin-bottom:.3rem}.message .message-body{display:flex;align-items:center;flex-wrap:wrap;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:pre-wrap;line-height:1.5}.message .message-body a{color:inherit}.message .message-body .text-emoji{align-self:center;font-size:1.4em;letter-spacing:0}.message .time{white-space:nowrap;font-size:.8em;opacity:.8;justify-self:flex-end;padding-left:1rem;align-self:flex-end;margin-top:.2rem;margin-left:auto}.sent{margin-left:auto;color:#efefef;background:var(--accent-color);border-radius:.8rem 0 .8rem .8rem}.sent::after{content:"";position:absolute;left:100%;top:0;width:0;height:0;border-style:solid;border-width:.5em .3em 0 0;border-color:var(--accent-color) transparent transparent transparent}.received{margin-right:auto;background:rgba(var(--text-color), 0.1);border-radius:0 .8rem .8rem .8rem}.received::after{content:"";position:absolute;left:-0.5em;top:0;width:0;height:0;border-style:solid;border-width:0 .5em .5em 0;border-color:transparent rgba(var(--text-color), 0.1) transparent transparent}.sent+.sent,.received+.received{margin-top:0}.sent+.sent::after,.received+.received::after{display:none}.sent+.sent,.received+.received{border-radius:.8rem}.distinct-sender{display:grid;border-radius:0 .8rem .8rem .8rem !important;margin-top:.8rem !important}.distinct-sender::after{display:flex !important;content:"";position:absolute;left:-0.5em;top:0;width:0;height:0;border-style:solid;border-width:0 .5em .5em 0;border-color:transparent rgba(var(--text-color), 0.1) transparent transparent}.unconfirmed{opacity:.7;transform-origin:left;-webkit-animation:pop .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);animation:pop .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275)}@-webkit-keyframes pop{0%{transform:rotate(5deg) translate(-0.5rem, 1rem)}100%{transform:rotate(0) translate(0, 0)}}@keyframes pop{0%{transform:rotate(5deg) translate(-0.5rem, 1rem)}100%{transform:rotate(0) translate(0, 0)}}#chat_header{padding:0 1rem;min-height:4rem;grid-template-columns:1fr auto}#chat_header .flex{height:100%}#chat_header .back-button{height:2rem;width:2rem;padding:.5rem;stroke-width:8;margin-right:.5rem;stroke:rgba(var(--text-color), 0.8)}#chat_header .initial{cursor:pointer;margin-right:1rem;height:2.2rem;width:2.2rem;flex-shrink:0}#chat_header #receiver_name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#scroll_to_bottom{position:absolute;display:flex;right:0;bottom:4rem;border-radius:4rem;z-index:1;aspect-ratio:1/1;margin:1.5rem;cursor:pointer;transform:scale(0);transition:transform .3s}#scroll_to_bottom.new-message::after{position:absolute;content:"";top:0;right:0;z-index:2;padding:.5rem;border-radius:50%;background:#00e676}#scroll_to_bottom .icon{width:2.6rem;height:2.6rem;padding:.9rem;stroke-width:8}#chat_footer .flex{align-items:flex-end;padding:.5rem 1rem .5rem .5rem}#chat_footer sm-textarea{--padding-right: 3rem;--border-radius: 0.5rem}#emoji_toggle{align-self:center;padding:.6rem;margin-right:.5rem;width:2.6rem;height:2.6rem;border-radius:2rem;cursor:pointer}#emoji_toggle path{fill:rgba(var(--text-color), 0.5)}#emoji_toggle.active path{fill:var(--accent-color)}#send_message_button{position:absolute;right:1.5rem;transform:scale(0);opacity:0;pointer-events:none;z-index:1;align-self:center;height:2.4rem;width:2.4rem;padding:.5rem;cursor:pointer;stroke:none;fill:rgba(var(--text-color), 0.4);margin-left:1rem;transition:.3s}#send_message_button.active{opacity:1;fill:var(--accent-color);transform:none;pointer-events:all}#type_message{margin:0}.big-emoji{flex-direction:column}.big-emoji .message-body{justify-content:center;font-size:2.6rem}.big-emoji .text-emoji{font-size:2.6rem !important}#chat_middle{flex:1;padding:0 1rem}#emoji_picker{--background: rgba(var(--text-color), 0.06);--border-size: 0;--input-border-color: none;--input-padding: 0.4rem 1rem;--outline-color: var(--accent-color);--input-font-color: rgba(var(--text-color), 1);--input-placeholder-color: rgba(var(--text-color), 0.6);--indicator-color: var(--accent-color);--button-hover-background: rgba(var(--text-color), 0.2);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;max-height:40vh}.emoji{font-size:1.6rem;cursor:pointer;padding:.4rem;border-radius:.6rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center}#new_conversation,#no_mails{height:100%;justify-content:center;text-align:center;padding:1.5rem}#new_conversation p,#no_mails p{margin-top:.8rem}#no_mails .new-conversation{height:7rem;margin-bottom:1rem}.new-conversation{height:8rem;width:8rem;align-self:center;stroke-width:16;stroke:rgba(var(--text-color), 0.4)}#chat_middle,#chats_list,#inbox_mail_container,#sent_mail_container,#mail{width:100%;flex-direction:column;height:100%;overflow-y:auto}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}#chats_list{padding-bottom:6rem}#contacts_popup{--body-padding: 0}.mail-container{height:100%;flex-direction:column;overflow-y:auto}#inbox_mail_container,#sent_mail_container{gap:.2rem;padding-bottom:6rem}.has-bg-image .received,.has-bg-image .group-event-card,.has-bg-image .date-card{background:rgba(var(--foreground-color), 0.8)}.has-bg-image .received::after{border-color:transparent rgba(var(--foreground-color), 0.6) transparent transparent}.has-bg-image #emoji_picker{--background: rgba(var(--foreground-color), 0.6)}.has-bg-image #emoji_toggle path{fill:rgba(var(--text-color), 0.8)}.has-bg-image sm-textarea{--background: rgba(var(--foreground-color), 0.6)}.has-bg-image #chat_details_panel{background:rgba(var(--foreground-color), 0.8)}#mail{height:100vh;align-items:flex-start}#mail>.flex{padding:0 1.5rem;margin-top:2rem}#mail>.flex sm-button:first-of-type{margin-right:.5rem}#compose_mail_popup sm-input{margin-bottom:1rem}.sidebar-item{display:flex;align-items:center;padding:1rem 1.5rem;text-transform:capitalize;font-weight:500;opacity:.9}.sidebar-item .icon{margin-right:1em;width:1em}.back{padding:.7rem;height:2.4rem;width:2.4rem;margin-left:-0.5rem;cursor:pointer;stroke-width:8;opacity:.8;-webkit-tap-highlight-color:transparent}.back:hover{opacity:1}#settings_page #settings_sidebar header{padding:1rem 1.5rem}#settings_page .flex sm-button{margin:0;margin-left:1rem}#settings_page sm-switch{padding:1rem 1.5rem;display:flex;margin-bottom:1rem;width:min(60ch,100%)}#settings_page sm-switch .flex{margin-right:1rem}#settings_page sm-switch h4{margin-bottom:.5rem}#settings_page sm-button{width:100%}#settings_page #settings_title{text-transform:capitalize}#settings_page #settings_sidebar{height:100%}#settings_page #settings_panel{overflow-y:auto;height:100%}#settings_page section{padding:1rem 1.5rem;width:min(60ch,100%);display:grid;gap:.3rem}#settings_page section sm-button{margin-top:.5rem;margin-bottom:0}#settings_page section:not(:last-of-type){margin-bottom:1rem}#settings_page #sign_out::part(button){color:var(--error-color)}#settings_page color-grid{margin:.5rem 0 1.5rem 0;width:min(60ch,100%)}#settings_page #chat_preview{margin-top:1rem;padding:1rem;border-radius:.5rem}#settings_page #bg_preview_container{padding:1rem 0;gap:.5rem;flex-wrap:wrap}#settings_page .bg-preview{position:relative;display:grid;place-items:center;height:8rem;width:8rem;cursor:pointer;border-radius:1rem;overflow:hidden;background:rgba(var(--text-color), 0.1)}#settings_page .bg-preview--selected::after{content:"";position:absolute;height:100%;width:100%;box-shadow:0 0 0 .5rem rgba(var(--text-color), 0.8) inset}#settings_page .bg-preview__image{-o-object-fit:cover;object-fit:cover;height:100%;width:100%}@media screen and (max-width: 640px){sm-popup{--border-radius: 1rem 1rem 0 0}.hide-on-mobile{position:fixed;max-height:0;opacity:0;pointer-events:none}#landing{grid-template-areas:"illustration" ".";align-items:flex-start}#landing .title-font{font-size:2rem;font-weight:500}#landing sm-button{width:100%;display:flex;width:100% !important}#landing_illustration{grid-area:illustration}.frame form,#sign_in form{height:100%}.frame .h2,#sign_in .h2{margin-top:3rem}.frame sm-button[variant=primary],#sign_in sm-button[variant=primary]{margin-top:auto}#main_navbar.hide-away{bottom:0;left:0;right:0}#chats_list,#contact_container{gap:.2rem}#chat .message{width:auto;max-width:90%}#chat_header{grid-template-columns:auto 1fr auto}#settings_page{overflow-x:hidden}#settings_page #settings_header{position:-webkit-sticky;position:sticky;top:0;z-index:1;padding:1rem 1.5rem;margin-bottom:.5rem;background:rgba(var(--foreground-color), 1)}}@media screen and (min-width: 40rem){.hide-on-desktop{display:none !important}.page{padding-bottom:0}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}.fab{position:absolute}.logo-section{padding:2rem 3rem 0 3rem;margin:.5rem 0}sm-popup{--width: 24rem;--min-width: 24rem;--border-radius: 0.5rem}#landing{align-items:center;gap:4vw;grid-template-columns:1fr 1fr;padding:0 4vw}#sign_in{width:24rem}#main_page{grid-template-columns:-webkit-min-content 1fr;grid-template-columns:min-content 1fr;grid-template-rows:1fr;grid-template-areas:"nav .";border-radius:.8rem;overflow:hidden;box-shadow:0 .1rem .2rem rgba(0,0,0,.05),0 1rem 3rem rgba(0,0,0,.2)}#main_navbar{grid-area:nav;border-top:none;flex-direction:column;height:calc(100% - 1rem);margin:.5rem;border-radius:.5rem;background-color:rgba(37,110,255,.03)}#main_navbar ul{flex-direction:column;gap:.5rem;padding:.3rem}#main_navbar ul li:last-of-type{margin-top:auto}.nav-item{aspect-ratio:1/1}.nav-item__indicator{width:.25rem;height:50%;left:0;border-radius:0 1rem 1rem 0;bottom:auto}#add_contact_popup{--min-width: 24rem}#compose_mail_popup,#reply_mail_popup{--min-width: 36rem}#emoji_picker{max-height:18rem}#chat .message{width:auto;align-self:flex-start;max-width:55ch}#chat_page,#mail_page{grid-template-columns:20rem 1fr}#settings_page{display:grid;height:100vh;grid-template-columns:14rem 1fr}#settings_page sm-button{width:-webkit-max-content;width:-moz-max-content;width:max-content}#settings_page .active{background:rgba(var(--text-color), 0.1)}#settings_page .panel>*:first-of-type{margin-top:.5rem}.contact.active,.mail-card.active{background:rgba(var(--text-color), 0.06)}.card{display:inline-flex;width:auto}}@media only screen and (max-width: 1280px){.hide-on-medium{display:none !important}}@media only screen and (min-width: 1080px){#chat #messages_container{padding:1rem 4rem}}@media only screen and (min-width: 1280px){#landing{gap:4vw;padding:0 8vw}#landing .title-font{font-size:3rem}#chat_page,#mail_page{grid-template-columns:23rem 1fr}#chat_details_panel{position:relative}#chat.expand-side-panel{grid-template-columns:1fr 24rem}#chat.expand-side-panel #messages_container{padding:1rem}#emoji_picker{--num-columns: 16}.contact.active,.mail-card.active{background:rgba(var(--text-color), 0.06)}.card{display:inline-flex;width:auto}}@media(hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.contact:hover,.emoji:hover,.option:hover{cursor:pointer;background:rgba(var(--text-color), 0.06)}.contact .menu{opacity:0;transition:opacity .3s}.contact:hover .menu{opacity:1}}@media(hover: none){.contact-preview,.contact,.icon,.option{-webkit-tap-highlight-color:transparent}.contact .menu{display:none}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index eeca14b..8f45278 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,2003 +1,2194 @@
-*,
-::before,
-::after{
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-    font-family: 'Roboto', sans-serif;
-} 
-:root{
-    scroll-behavior: smooth;
-    font-size: clamp(1rem, 1.2vmax, 3rem);
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Roboto", sans-serif;
 }
-html, body{
-    height: 100%;
+:root {
+  font-size: clamp(1rem, 1.2vmax, 1.2rem);
 }
-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);
+html,
+body {
+  height: 100%;
+}
+body {
+  --accent-color: #3d5afe;
+  --secondary-color: #ffac2e;
+  --text-color: 20, 20, 20;
+  --foreground-color: 252, 253, 255;
+  --background-color: 241, 243, 248;
+  --danger-color: rgb(255, 75, 75);
+  --green: #1cad59;
+  --yellow: rgb(220, 165, 0);
+  color: rgba(var(--text-color), 1);
+  background: rgba(var(--foreground-color), 1);
+  #scroll_to_bottom {
     background: rgba(var(--foreground-color), 1);
-    #scroll_to_bottom{
-        background: rgba(var(--foreground-color), 1);
-        box-shadow: 0 0.3rem 0.4rem rgba(0, 0, 0, 0.2);
-    }
+    box-shadow: 0 0.3rem 0.4rem rgba(0, 0, 0, 0.2);
+  }
 }
-body[data-theme='dark']{
-    --accent-color:#3D5AFE;
-    --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);
-    .initial{
-        color: rgba(var(--text-color), 1) !important;
-        box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.16);
-    }
-    .message{
-        color: rgba(var(--text-color), 1);
-    }
-    #scroll_to_bottom{
-        background: linear-gradient(rgba(var(--text-color), 0.1), rgba(var(--text-color), 0.1)), rgba(var(--foreground-color), 1);
-        box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.3);
-    }
-}
-p{
-    line-height: 1.6;
-}
-h1{
-    font-size: 3rem;
-}
-h2{
-    font-size: 2rem;
-}
-h3{
-    font-size: 1.5rem;
-}
-h4{
-    font-size: 1.1rem;
-}
-h5{
-    font-size: 0.8rem;
-}
-h1, h2, h3, h4, h5{
+body[data-theme="dark"] {
+  --accent-color: #6d83ff;
+  --secondary-color: #d60739;
+  --text-color: 220, 220, 220;
+  --foreground-color: 27, 28, 29;
+  --background-color: 21, 22, 22;
+  --danger-color: rgb(255, 106, 106);
+  --green: #00e676;
+  --yellow: rgb(255, 213, 5);
+  .initial {
+    color: rgba(var(--text-color), 1) !important;
+    box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.16);
+  }
+  .message {
     color: rgba(var(--text-color), 1);
-    font-weight: 600;
+  }
+  #scroll_to_bottom {
+    background: linear-gradient(
+        rgba(var(--text-color), 0.1),
+        rgba(var(--text-color), 0.1)
+      ),
+      rgba(var(--foreground-color), 1);
+    box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.3);
+  }
 }
-textarea{
-    background: rgba(var(--text-color), 0.06);
-    border: none;
-    border-radius: 0.3rem;
-    width: 100%;
-    padding: 1rem;
-    font-size: 1rem;
-    color: rgba(var(--text-color), 1);
-    resize: none;
-    line-height: 1.6;
-    &:focus{
-        outline: none;
-        box-shadow: 0 0 0 0.1rem var(--accent-color);
-    }
+p,
+strong {
+  font-size: 0.9rem;
+  max-width: 65ch;
+  line-height: 1.7;
+  color: rgba(var(--text-color), 0.9);
 }
-strong{
-    font-weight: 500;
+.warning {
+  line-height: normal;
+  padding: 1rem;
+  background-color: khaki;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.7);
 }
-.flex{
-    display: flex;
+a {
+  text-decoration: none;
+  color: var(--accent-color);
+  &:focus-visible {
+    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+  }
 }
-.grid{
-    display: grid;
+a.button {
+  padding: 0.4rem 0.6rem;
+  border-radius: 0.3rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: inherit;
 }
-.grid-2{
-    grid-template-columns: auto auto;
-    gap: 1em;
-}
-.align-center{
-    align-items: center;
-}
-.justify-right{
-    margin-left: auto;
-}
-.direction-column{
-    flex-direction: column;
-}
-.rest{
-    flex: 1;
-}
-.hide{
-    opacity: 0;
-    pointer-events: none;
-}
-.hide-completely{
-    display: none !important;
-}
-.no-transformations{
-    transform: none !important;
-}
-.breakable{
-    overflow-wrap: break-word;
-}
-.text-overflow{
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-.sticky{
-    position: sticky;
-    top: 1rem;
-}
-.light-text{
-    color: rgba(var(--text-color-light), 1);
-}
-.accent-color{
-    color: var(--accent-color);
-}
-.secondary-color{
-    color: var(--secondary-color)
-}
-.fab{
-    filter: drop-shadow(0 0.4rem 0.3rem rgba(0, 0, 0, 0.2));
-    margin: 1.5rem;
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    z-index: 1;
-    --padding: 0.9rem 1.6rem;
-    .icon{
-        margin-left: 0 !important;
-        margin-right: 0.5rem;
-        height: 1.2rem;
-        width: 1.2rem;
-        stroke-width: 8;
-        stroke: white;
-    }
-}
-a:any-link{
-    word-wrap: break-word;
-    color: var(--accent-color);
-    font-weight: 500;
-}
-.solid-background{
-    background: var(--background-color) !important;
-}
-.normal-weight{
-    font-weight: normal;
-}
-.warning{
-    display: flex;
-    background: wheat;
-    color: #111;
-}
-.icon{
-    fill: none;
-    stroke-width: 6;
-    stroke: rgba(var(--text-color), 1);
-    height: 1.2rem;
-    width: 1.2rem;
-    overflow: visible;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}
-.ripple{
-    position: absolute;
-    border-radius: 50%;
-    transform: scale(0);
-    background: rgba(var(--text-color), 0.2);
-    pointer-events: none;
-}
-.interact{
-    position: relative;
-    overflow: hidden;
+
+button,
+.button {
+  user-select: none;
+  position: relative;
+  display: inline-flex;
+  border: none;
+  background-color: transparent;
+  overflow: hidden;
+  color: inherit;
+  -webkit-tap-highlight-color: transparent;
+  align-items: center;
+  font-size: 0.9rem;
+  font-weight: 500;
+  white-space: nowrap;
+  padding: 0.8rem;
+  border-radius: 0.3rem;
+  justify-content: center;
+  &:focus-visible {
+    outline: var(--accent-color) solid medium;
+  }
+  &:not(:disabled) {
     cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
+  }
 }
-sm-input{
-    --border-radius: 0.5rem;
-}
-sm-popup{
-    sm-input + sm-input{
-        margin-top: 1rem;
+.button {
+  background-color: rgba(var(--text-color), 0.06);
+  &--primary,
+  &--danger {
+    color: rgba(var(--background-color), 1) !important;
+    .icon {
+      fill: rgba(var(--background-color), 1);
     }
+  }
+  &--primary {
+    background-color: var(--accent-color);
+  }
+  &--danger {
+    background-color: var(--danger-color);
+  }
+  &--small {
+    padding: 0.4rem 0.6rem;
+  }
 }
-.popup-header{
-    padding: 0.5rem 1.5rem 0 1.5rem;
+.cta {
+  text-transform: uppercase;
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  padding: 0.8rem 1rem;
+}
+.icon {
+  width: 1.2rem;
+  height: 1.2rem;
+  fill: rgba(var(--text-color), 0.8);
+  flex-shrink: 0;
+}
+.icon-only {
+  padding: 0.5rem;
+  border-radius: 0.3rem;
+}
+
+button:disabled {
+  opacity: 0.5;
+}
+
+a:any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+details summary {
+  display: flex;
+  user-select: none;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--accent-color);
+}
+
+details[open] {
+  & summary {
+    margin-bottom: 1rem;
+  }
+  & > summary .down-arrow {
+    transform: rotate(180deg);
+  }
+}
+
+sm-input,
+sm-textarea {
+  font-size: 0.9rem;
+  --border-radius: 0.3rem;
+  --background-color: rgba(var(--foreground-color), 1);
+  button {
+    .icon {
+      fill: var(--accent-color);
+    }
+  }
+}
+sm-button {
+  --padding: 0.8rem;
+  &[variant="primary"] {
+    .icon {
+      fill: rgba(var(--background-color), 1);
+    }
+  }
+
+  &[disabled] {
+    .icon {
+      fill: rgba(var(--text-color), 0.6);
+    }
+  }
+  &.danger {
+    --background: var(--danger-color);
+    color: rgba(var(--background-color), 1);
+  }
+}
+sm-spinner {
+  --size: 1rem;
+  --stroke-width: 0.1rem;
+}
+sm-form {
+  --gap: 1rem;
+}
+sm-select {
+  --padding: 0.8rem;
+  font-size: 0.9rem;
+}
+sm-option {
+  font-size: 0.9rem;
+}
+strip-select {
+  --gap: 0;
+  background-color: rgba(var(--text-color), 0.06);
+  border-radius: 0.3rem;
+  padding: 0.3rem;
+}
+strip-option {
+  font-size: 0.8rem;
+  --border-radius: 0.2rem;
+  user-select: none;
+}
+ul,
+ol {
+  list-style: none;
+}
+ol {
+  counter-reset: item;
+  li {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    counter-increment: item;
+    &:not(:last-of-type) {
+      padding-bottom: 1.5rem;
+      &::after {
+        content: "";
+        position: absolute;
+        width: 0.1rem;
+        height: calc(100% - 2.2rem);
+        background: var(--accent-color);
+        margin-left: 0.7rem;
+        margin-top: 2rem;
+      }
+    }
+  }
+  li::before {
+    content: counter(item);
     display: flex;
     align-items: center;
-    width: 100%;
-    .icon{
-        padding: 0.7rem;
-        height: 2.4rem;
-        width: 2.4rem;
-        stroke-width: 8;
-        transform: translateX(-0.5rem);
-        cursor: pointer;
-        -webkit-tap-highlight-color: transparent;
-    }
-    .back{
-        transform: none;
-    }
-    button,
-    sm-button{
-        width: auto;
-        margin-left: auto;
-    }
+    justify-content: center;
+    text-align: center;
+    font-size: 0.8rem;
+    font-weight: 500;
+    margin-top: 0.15rem;
+    margin-right: 1rem;
+    line-height: 1;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 100%;
+    flex-shrink: 0;
+    color: rgba(var(--text-color), 0.8);
+    background: rgba(var(--text-color), 0.1);
+  }
 }
-.copy-row {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    align-items: center;
-    gap: 0.5rem;
-    width: auto;
-    .icon {
-        cursor: pointer;
-        padding: 0.4rem;
-        height: 1.8rem;
-        width: 1.8rem;
+
+.overflow-ellipsis {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.breakable {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
+}
+
+.full-bleed {
+  grid-column: 1/-1;
+}
+.uppercase {
+  text-transform: uppercase;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.sticky {
+  position: sticky;
+}
+.top-0 {
+  top: 0;
+}
+
+.flex {
+  display: flex;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-1 {
+  flex: 1;
+}
+
+.grid {
+  display: grid;
+}
+.flow-column {
+  grid-auto-flow: column;
+}
+
+.gap-0-3 {
+  gap: 0.3rem;
+}
+.gap-0-5 {
+  gap: 0.5rem;
+}
+
+.gap-1 {
+  gap: 1rem;
+}
+
+.gap-1-5 {
+  gap: 1.5rem;
+}
+
+.gap-2 {
+  gap: 2rem;
+}
+
+.gap-3 {
+  gap: 3rem;
+}
+
+.text-align-right {
+  text-align: right;
+}
+
+.align-start {
+  align-content: flex-start;
+}
+
+.align-center {
+  align-items: center;
+}
+.align-end {
+  align-items: flex-end;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.justify-start {
+  justify-items: start;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-right {
+  margin-left: auto;
+}
+
+.align-self-center {
+  align-self: center;
+}
+.align-self-end {
+  align-self: end;
+}
+
+.justify-self-center {
+  justify-self: center;
+}
+
+.justify-self-start {
+  justify-self: start;
+}
+
+.justify-self-end {
+  justify-self: end;
+}
+
+.flex-direction-column {
+  flex-direction: column;
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.w-100 {
+  width: 100%;
+}
+.h-100 {
+  height: 100%;
+}
+.label {
+  font-size: 0.8rem;
+  color: rgba(var(--text-color), 0.8);
+  font-weight: 500;
+  margin-bottom: 0.2rem;
+}
+
+.button--primary,
+.button--danger {
+  .ripple {
+    background: radial-gradient(
+      circle,
+      rgba(var(--background-color), 0.3) 0%,
+      rgba(0, 0, 0, 0) 50%
+    );
+  }
+}
+.ripple {
+  height: 8rem;
+  width: 8rem;
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  background: radial-gradient(
+    circle,
+    rgba(var(--text-color), 0.3) 0%,
+    rgba(0, 0, 0, 0) 50%
+  );
+  pointer-events: none;
+}
+.interact {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.empty-state {
+  display: grid;
+  width: 100%;
+  padding: 1.5rem 0;
+}
+
+.observe-empty-state:empty {
+  display: none !important;
+}
+
+.observe-empty-state:not(:empty) + .empty-state {
+  display: none !important;
+}
+
+.bullet-point {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 0.8ch;
+  &::after {
+    content: "";
+    height: 0.4ch;
+    width: 0.4ch;
+    border-radius: 0.5em;
+    background-color: var(--accent-color);
+  }
+}
+.margin-right-0-5 {
+  margin-right: 0.5rem;
+}
+
+.margin-left-0-5 {
+  margin-left: 0.5rem;
+}
+
+.icon-button {
+  padding: 0.6rem;
+  border-radius: 0.8rem;
+  background-color: rgba(var(--text-color), 0.1);
+  height: max-content;
+  .icon {
+    fill: var(--accent-color);
+  }
+}
+.fab {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  margin: 1.5rem;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
+  z-index: 2;
+}
+.page {
+  height: 100%;
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+    min-height: 8rem;
+    .grid {
+      margin-top: auto;
     }
-    .copy {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    h4{
-        margin-bottom: 0 !important;
+    h1 {
+      margin-top: auto;
+      font-size: 2rem;
     }
+  }
+}
+.page-layout {
+  display: grid;
+  gap: 1.5rem 0;
+  grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
+  align-content: flex-start;
+  & > * {
+    grid-column: 2/3;
+  }
 }
 #confirmation_popup,
 #prompt_popup {
-    flex-direction: column;
-    h4 {
-        font-weight: 500;
-        margin-bottom: 0.5rem;
-    }
-    sm-button{
-        margin: 0;
-    }
-    .flex {
-        padding: 0;
-        margin-top: 1rem;
-        sm-button:first-of-type {
-            margin-right: 0.6rem;
-            margin-left: auto;
-        }
+  flex-direction: column;
+  h4 {
+    margin-bottom: 0.5rem;
+  }
+  sm-button {
+    margin: 0;
+  }
+  .flex {
+    padding: 0;
+    margin-top: 1rem;
+    sm-button:first-of-type {
+      margin-right: 0.6rem;
+      margin-left: auto;
     }
+  }
 }
-.page{
-    align-items: flex-start;
-    width: 100%;
+#prompt_message {
+  margin-bottom: 1.5rem;
+}
+
+.popup__header {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0 1.5rem;
+  align-items: center;
+}
+
+.popup__header__close {
+  padding: 0.5rem;
+  margin-left: -0.5rem;
+}
+.flo-icon {
+  margin-right: 0.3rem;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+#secondary_pages {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  header {
+    padding: 1.5rem;
+  }
+  .inner-page {
     height: 100%;
+  }
 }
-.card{
-    display: flex;
-    flex-direction: column;
-    margin: 1rem 0;
+
+#sign_in,
+#sign_up {
+  justify-items: center;
+  align-content: center;
+  section {
+    margin-top: -8rem;
+    width: min(24rem, 100%);
+  }
+  sm-form {
+    margin: 2rem 0;
+  }
 }
-.tip{
-    font-size: 0.9rem;
+#sign_up {
+  .h2 {
+    margin-bottom: 0.5rem;
+  }
+  .card {
+    margin: 1.5rem 0;
+  }
+  h5 {
     color: rgba(var(--text-color), 0.8);
+  }
 }
-sm-button[variant="primary"]{
-    --foreground-color: 255, 255, 255;
+.card {
+  display: flex;
+  flex-direction: column;
+  margin: 1rem 0;
 }
-.danger{
-    color: var(--error-color);
+.tip {
+  font-size: 0.9rem;
+  color: rgba(var(--text-color), 0.8);
 }
-.logo-section{
+sm-button[variant="primary"] {
+  --foreground-color: 255, 255, 255;
+}
+.danger {
+  color: var(--error-color);
+}
+.logo-section {
+  display: flex;
+  position: relative;
+  align-items: center;
+  height: max-content;
+  margin: 0.5rem 0;
+  h5 {
+    font-size: 1.1rem !important;
+    font-weight: 500;
+  }
+  .main-logo {
+    height: 1.4rem;
+    margin-right: 0.4rem;
+    fill: rgba(var(--text-color), 1);
+    stroke: none;
+  }
+  img {
+    width: 2rem;
+    margin-right: 0.5rem;
+  }
+}
+.select-file {
+  input[type="file"] {
+    display: none;
+  }
+}
+#landing {
+  display: grid;
+  border-radius: 0.6rem;
+  width: 100%;
+  height: 100%;
+  padding: 0 1.5rem;
+  align-items: center;
+  .logo-section {
+    padding: 1.5rem;
     display: flex;
-    position: relative;
-    align-items: center;
-    height: max-content;
-    margin: 0.5rem 0;
-    h5{
-        font-size: 1.1rem !important;
-        font-weight: 500;
-    }
-    .main-logo{
-        height: 1.4rem;
-        margin-right: 0.4rem;
-        fill: rgba(var(--text-color), 1);
-        stroke: none;
-    }
-    img{
-        width: 2rem;
-        margin-right: 0.5rem;
-    }
-}
-.select-file{
-    input[type="file"]{
-        display: none;
-    }
-}
-#landing{
+  }
+  .title-font {
+    line-height: 1.2;
+    font-weight: 700;
+    font-size: 2.5rem;
+  }
+  .left {
     display: grid;
-    border-radius: 0.6rem;
-    width: 100%;
-    height: 100%;
-    padding: 0 1.5rem;  
-    align-items: center;
-    .logo-section{
-        padding: 1.5rem;
-        display: flex;
-    }
-    .title-font{
-        line-height: 1.2;
-        font-weight: 700;
-        font-size: 2.5rem;
-    }
-    .left{
-        display: grid;
-        flex-direction: column;
-        padding-bottom: 1.5rem;
-        z-index: 1;
-        h4{
-            color: var(--accent-color);
-            margin-bottom: 0.5rem;
-            font-weight: 500;
-        }
-        sm-button{
-            margin: 1.5rem 0 2rem 0;
-            width: max-content;
-        }
-        h3{
-            margin-bottom: 1rem;
-            font-weight: 500;
-        }
-        p{
-            margin-top: 1rem;
-            font-size: 1.1rem;
-            color: rgba(var(--text-color), 0.8);
-        }
-        .flex{
-            sm-button:first-of-type{
-                margin-right: 1rem;
-            }
-        }
-    }
-}
-#landing_page{
-    grid-template-rows: auto 1fr;
-    overflow-y: auto;
-    background: rgba(var(--foreground-color), 1);
-}
-.logo-section{
-    padding: 1.5rem;
-}
-#landing_illustration{
-    position: relative;
-    width: 100%;
-}
-#sign_in{
-    padding: 1.5rem;
-    width: 100%;
-    height: 100%;
-    align-items: flex-start;
-    .flex{
-        width: 100%;
-        flex: 1;
-    }
-    sm-input{
-        margin: 1.5rem 0;
-    }
-    h2{
-        margin-top: 2rem;
-        font-weight: 500;
-    }
+    flex-direction: column;
+    padding-bottom: 1.5rem;
+    z-index: 1;
     h4 {
-        font-weight: 500;
-        margin-bottom: 1.5rem;
+      color: var(--accent-color);
+      margin-bottom: 0.5rem;
+      font-weight: 500;
     }
-    h5{
-        opacity: 0.8;
-        font-weight: 500;
+    sm-button {
+      margin: 1.5rem 0 2rem 0;
+      width: max-content;
     }
-    pin-input{
-        margin: 1rem 0 2rem 0;
-    }
-    sm-button{
-        width: 100%;
-        --padding: 0.8rem 1.6rem;
-    }
-    #remove_account{
-        margin-top: 1rem;
+    h3 {
+      margin-bottom: 1rem;
+      font-weight: 500;
     }
     p {
-        margin-bottom: 0.5rem;
-        max-width: 35ch;
-        margin-top: 0.5rem;
+      margin-top: 1rem;
+      font-size: 1.1rem;
+      color: rgba(var(--text-color), 0.8);
     }
+    .flex {
+      sm-button:first-of-type {
+        margin-right: 1rem;
+      }
+    }
+  }
 }
-#on_boarding_page{
+#landing_page {
+  grid-template-rows: auto 1fr;
+  overflow-y: auto;
+  background: rgba(var(--foreground-color), 1);
 }
-.frame{
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    width: min(24rem, 100%);
-    justify-self: center;
-    padding: 1.5rem;
-    .h2{
-        margin-bottom: 1rem;
-        font-weight: 500;
-    }
-    sm-button[variant="primary"]{
-        margin-top: 1.5rem;
-    }
+.logo-section {
+  padding: 1.5rem;
 }
-#frame_1{
-    .warning{
-        margin: 1rem 0;
-        padding: 1rem;
-        border-radius: 0.5rem;
-    }
-    #generate_flo_id{
-        width: 100%;
-    }
-    #credentials_section{
-        animation: slide-down 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-        margin: 2rem 0;
-    }
-    h4, h5{
-        font-weight: 500;
-    }
-    .copy-row:not(:last-of-type){
-        margin-bottom: 1.5rem;
-    }
+#landing_illustration {
+  position: relative;
+  width: 100%;
 }
-#frame_2{
-    pin-input{
-        margin: 1rem 0;
-    }
+@keyframes slide-down {
+  from {
+    transform: translateY(-1rem);
+  }
+  to {
+    transform: none;
+  }
 }
-@keyframes slide-down{
-    from{
-        transform: translateY(-1rem);
-    }
-    to{
-        transform: none;
-    }
+#loading_page {
+  height: 100%;
+  display: grid;
+  place-content: center;
+  justify-items: center;
 }
-#loading_page{
-    height: 100%;
-    display: grid;
-    place-content: center;
-    justify-items: center;
+.page__loader {
+  z-index: 1;
+  transform-origin: bottom;
+  height: 6rem;
+  width: 6rem;
+  animation: bounce 0.5s infinite alternate ease-in;
 }
-.page__loader{
-    z-index: 1;
-    transform-origin: bottom;
-    height: 6rem;
-    width: 6rem;
-    animation: bounce 0.5s infinite alternate ease-in;
+.shadow {
+  margin-top: -1rem;
+  width: 5rem;
+  height: 2rem;
+  background: rgba(var(--text-color), 0.1);
+  border-radius: 50%;
+  animation: scale 0.5s infinite alternate ease-in;
+  margin-left: 1rem;
 }
-.shadow{
-    margin-top: -1rem;
-    width: 5rem;
-    height: 2rem;
-    background: rgba(var(--text-color), 0.1);
-    border-radius: 50%;
-    animation:  scale 0.5s infinite alternate ease-in;
-    margin-left: 1rem;
+.page__tag-line {
+  margin-top: 2rem;
 }
-.page__tag-line{
-    margin-top: 2rem;
+@keyframes bounce {
+  0% {
+    transform: scaleY(1) translateY(-4rem);
+  }
+  90% {
+    transform: scaleY(1) translateY(0);
+  }
+  100% {
+    transform: scaleY(0.8);
+  }
 }
-@keyframes bounce{
-    0%{
-        transform: scaleY(1) translateY(-4rem);
-    }
-    90%{
-        transform: scaleY(1) translateY(0);
-    }
-    100%{
-        transform: scaleY(0.8) ; 
-    }
+@keyframes scale {
+  0% {
+    transform: scale(0.5);
+  }
+  90% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
-@keyframes scale{
-    0%{
-        transform: scale(0.5);
-    }
-    90%{
-        transform: scale(1.05);
-    }
-    100%{
-        transform: scale(1);
-    }
+#main_page {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto 1fr;
+  height: 100%;
+  width: 100%;
+  transition: background-color 0.3s;
+  background-color: rgba(var(--foreground-color), 1);
 }
-#main_page{
-    width: 100%;
-    height: 100%;
+.initial {
+  position: relative;
+  justify-content: center;
+  font-size: 1.2rem;
+  font-weight: 500;
+  width: 2.8rem;
+  height: 2.8rem;
+  aspect-ratio: 1/1;
+  color: white;
+  box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.06);
+  border-radius: 2rem;
+  text-transform: uppercase;
+  user-select: none;
 }
-.initial{
-    position: relative;
-    justify-content: center;
-    font-size: 1.2rem;
-    font-weight: 500;
-    width: 2.8rem;
-    height: 2.8rem;
-    aspect-ratio: 1/1;
-    color: white;
-    box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.06);
-    border-radius: 2rem;
-    text-transform: uppercase;
-    user-select: none;
+.filled {
+  fill: rgba(var(--text-color), 0.7);
+  stroke: none !important;
 }
-.filled{
-    fill: rgba(var(--text-color), 0.7);
-    stroke: none !important;
+.group-icon {
+  height: 1.6rem;
+  width: 1.6rem;
+  fill: white;
+  stroke: none;
 }
-.group-icon{
-    height: 1.6rem;
-    width: 1.6rem;
-    fill: white;
-    stroke: none;
-}
-.contact{
-    position: relative;
-    display: grid;
-    gap: 0 1rem;
-    padding: 0.8rem 1.5rem;
-    align-items: center;
-    flex-shrink: 0;
-    user-select: none;
+.contact {
+  position: relative;
+  display: grid;
+  gap: 0 1rem;
+  padding: 0.8rem 1.5rem;
+  align-items: center;
+  flex-shrink: 0;
+  user-select: none;
+  overflow: hidden;
+  &:not(.chat) {
+    grid-template-columns: auto 1fr;
+    grid-template-areas: "dp .";
+  }
+  &.chat,
+  &.group {
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas:
+      "dp . time"
+      "dp . menu";
+  }
+  &.admin {
+    grid-template-columns: auto 1fr auto;
+  }
+  &.selected {
+    background-color: rgba(var(--text-color), 0.06);
+  }
+  .initial {
+    grid-area: dp;
+  }
+  .name,
+  .last-message {
+    text-overflow: ellipsis;
+    white-space: nowrap;
     overflow: hidden;
-    &:not(.chat){
-        grid-template-columns: auto 1fr;
-        grid-template-areas: 'dp .';
-    }
-    &.chat,
-    &.group{
-        grid-template-columns: auto 1fr auto;
-        grid-template-areas: 'dp . time'
-                            'dp . menu';
-    }
-    &.admin{
-        grid-template-columns: auto 1fr auto;
-    }
-    &.selected{
-        background-color: rgba(var(--text-color), 0.06);
-    }
-    .initial{
-        grid-area: dp;
-    }
-    .name{
-        width: 100%;
-        font-size: 1em;
-        font-weight: 500;
-        color: rgba(var(--text-color), 0.8);
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-    }
-    .last-message{
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-weight: 400;
-        font-size: 0.9em;
-        color: rgba(var(--text-color), 0.8);
-    }
-    .menu{
-        grid-area: menu;
-        justify-self: flex-end;
-        padding: 0.2rem;
-        fill: rgba(var(--text-color), 1);
-    }
-    .time{
-        font-weight: 500;
-        color: rgba(var(--text-color), 0.7);
-        grid-area: time;
-    }
-    .admin-tag{
-        padding: 0.1rem 0.6rem;
-        font-size: 0.8rem;
-        border: var(--accent-color) thin solid;
-        border-radius: 3rem;
-    }
-}
-.tick{
-    position: absolute;
-    bottom: -0.2rem;
-    right: -0.2rem;
-    height: 1.2rem;
-    width: 1.2rem;
-    .icon{
-        height: 100%;
-        width: 100%;
-        padding: 0.4rem;
-        stroke-width: 16;
-        border-radius: 1rem;
-        background: rgba(var(--text-color), 1);
-        stroke: rgba(var(--foreground-color), 0.8);
-    }
-}
-#selected_contacts{
-    padding: 1rem 1.5rem;
-    h4{
-        font-weight: 500;
-        font-size: 1rem;
-    }
-    .warning{
-        font-size: 0.9rem;
-        padding: 0.5rem 0.8rem;
-        border-radius: 0.5rem;
-        margin: 1rem 0;
-        line-height: 1.5;
-    }
-    sm-button{
-        margin-bottom: 0;
-    }
-}
-#selected_contacts_container{
-    display: flex;
-    overflow: auto hidden;
-    &:not(:empty){
-        margin-top: 1.5rem;
-    }
-    .contact-preview{
-        display: flex;
-        flex-shrink: 0;
-        align-items: center;
-        cursor: pointer;
-        margin-right: 0.5rem;
-        background: rgba(var(--text-color), 0.1);
-        padding: 0.4rem 0.5rem;
-        border-radius: 2rem;
-        .initial{
-            width: 1.6rem;
-            height: 1.6rem;
-            font-size: 0.9rem;
-        }
-        .name{
-            font-size: 0.9rem;
-            color: rgba(var(--text-color), 0.8);
-            margin-left: 0.5rem;
-        }
-        .tick{
-            position: relative;
-            bottom: auto;
-            right: auto;
-            margin-left: 0.5rem;
-        }
-    }
-}
-#contact_details_popup{
-    --body-padding: 0 0 1.5rem 0;
-    .popup-section{
-        margin: 1.5rem;
-    }
-    h5{
-        font-weight: 500;
-        opacity: 0.8;
-    }
-    .copy-row{
-        h4{
-            font-weight: 400;
-        }
-    }
-    .group-icon{
-        padding: 0.2rem !important;
-        height: 3rem;
-        width: 3rem;
-    }
-    #contact_initial{
-        height: 4.6rem;
-        width: 4.6rem;
-        font-size: 2.4rem;
-        border-radius: 4rem;
-        margin-top: 3rem;
-        margin-bottom: 0.5rem;
-    }
-    #contact_name{
-        margin: 0.6rem 1.5rem;
-        &::part(text){
-            font-size: 1.2rem;
-            font-weight: 500;
-        }
-    }
-    .option{
-        .icon{
-            padding: 0;
-            width: 1.2rem;
-            background: none;
-        }
-    }
-}
-#warn_no_encryption, .date-card, .group-event-card{
-    padding: 0.4rem 0.8rem;
-    font-weight: 500;
-    background-color: rgba(var(--text-color), 0.04);
-    border-radius: 0.5rem;
     color: rgba(var(--text-color), 0.8);
-    margin: 1rem 0;
-    justify-self: center;
-    align-self: center;
-    text-align: center;
-}
-.group-event-card{
-    font-size: 0.8rem;
+  }
+  .name {
+    width: 100%;
+    font-size: 1em;
+    font-weight: 500;
+  }
+  .last-message {
     font-weight: 400;
+    font-size: 0.9em;
+  }
+  .menu {
+    grid-area: menu;
+    justify-self: flex-end;
+    padding: 0.2rem;
+    fill: rgba(var(--text-color), 1);
+  }
+  .time {
+    font-weight: 500;
+    color: rgba(var(--text-color), 0.7);
+    grid-area: time;
+  }
+  .admin-tag {
+    padding: 0.1rem 0.6rem;
+    font-size: 0.8rem;
+    border: var(--accent-color) thin solid;
+    border-radius: 3rem;
+  }
 }
-#warn_no_encryption{
-    background: rgb(255, 253, 141);
-    color: #111;
+.tick {
+  position: absolute;
+  bottom: -0.2rem;
+  right: -0.2rem;
+  height: 1.2rem;
+  width: 1.2rem;
+  .icon {
+    height: 100%;
+    width: 100%;
+    padding: 0.4rem;
+    stroke-width: 16;
+    border-radius: 1rem;
+    background: rgba(var(--text-color), 1);
+    stroke: rgba(var(--foreground-color), 0.8);
+  }
+}
+#selected_contacts_container {
+  display: flex;
+  overflow: auto hidden;
+  &:not(:empty) {
+    margin-top: 1.5rem;
+  }
+  .contact-preview {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    cursor: pointer;
+    margin-right: 0.5rem;
+    background: rgba(var(--text-color), 0.1);
+    padding: 0.4rem 0.5rem;
+    border-radius: 2rem;
+    .initial {
+      width: 1.6rem;
+      height: 1.6rem;
+      font-size: 0.9rem;
+    }
+    .name {
+      font-size: 0.9rem;
+      color: rgba(var(--text-color), 0.8);
+      margin-left: 0.5rem;
+    }
+    .tick {
+      position: relative;
+      bottom: auto;
+      right: auto;
+      margin-left: 0.5rem;
+    }
+  }
+}
+#contact_details_popup {
+  --body-padding: 0 0 1.5rem 0;
+  .popup-section {
+    margin: 1.5rem;
+  }
+  h5 {
+    font-weight: 500;
+    opacity: 0.8;
+  }
+  .copy-row {
+    h4 {
+      font-weight: 400;
+    }
+  }
+  .group-icon {
+    padding: 0.2rem !important;
+    height: 3rem;
+    width: 3rem;
+  }
+  #contact_initial {
+    height: 4.6rem;
+    width: 4.6rem;
+    font-size: 2.4rem;
+    border-radius: 4rem;
+    margin-top: 3rem;
+    margin-bottom: 0.5rem;
+  }
+  #contact_name {
+    margin: 0.6rem 1.5rem;
+    &::part(text) {
+      font-size: 1.2rem;
+      font-weight: 500;
+    }
+  }
+  .option {
+    .icon {
+      padding: 0;
+      width: 1.2rem;
+      background: none;
+    }
+  }
+}
+#warn_no_encryption,
+.date-card,
+.group-event-card {
+  padding: 0.4rem 0.6rem;
+  font-weight: 500;
+  font-size: 0.8rem;
+  background-color: rgba(var(--text-color), 0.04);
+  border-radius: 0.3rem;
+  color: rgba(var(--text-color), 0.8);
+  margin: 1rem 0;
+  justify-self: center;
+  align-self: center;
+  text-align: center;
+}
+.group-event-card {
+  font-size: 0.8rem;
+  font-weight: 400;
+}
+#warn_no_encryption {
+  background: rgb(255, 253, 141);
+  color: #111;
 }
 .contact .initial::after,
-.mail-card .initial::after{
-    content: '';
-    position: absolute;
-    bottom: -0.1rem;
-    right: -0.1rem;
-    height: 1rem;
-    width: 1rem;
-    background: var(--accent-color);
-    border-radius: 100%;
-    border: solid rgba(var(--foreground-color), 1) 1px;
-    transform: scale(0);
-    transition: transform 0.3s;
+.mail-card .initial::after {
+  content: "";
+  position: absolute;
+  bottom: -0.1rem;
+  right: -0.1rem;
+  height: 1rem;
+  width: 1rem;
+  background: var(--accent-color);
+  border-radius: 100%;
+  border: solid rgba(var(--foreground-color), 1) 1px;
+  transform: scale(0);
+  transition: transform 0.3s;
 }
 .contact.unread .initial::after,
-.mail-card.unread .initial::after{
-    transform: scale(1);
+.mail-card.unread .initial::after {
+  transform: scale(1);
 }
 .mail-card.unread,
-.contact.unread{
-    .time, .date{
-        color: var(--accent-color);
-    }
-    h4{
-        color: rgba(var(--text-color), 1);
-    }
-    h4, h5 ,p{
-        font-weight: 700;
-    }
+.contact.unread {
+  .time,
+  .date {
+    color: var(--accent-color);
+  }
+  h4 {
+    color: rgba(var(--text-color), 1);
+  }
+  h4,
+  h5,
+  p {
+    font-weight: 700;
+  }
 }
-.mail-card{
-    position: relative;
-    display: grid;
-    gap: 0 1rem;
-    padding: 0.8rem 1.5rem;
-    align-items: center;
-    flex-shrink: 0;
-    user-select: none;
-    grid-template-columns: auto 1fr auto;
-    grid-template-areas: 'dp sender date'
-                         'dp subject subject'
-                         'dp desc desc' ;
-    .initial{
-        grid-area: dp;
-        align-self: flex-start;
-        height: 2rem;
-        width: 2rem;
-        font-size: 1rem;
-    }
-    .sender{
-        width: 100%;
-        font-size: 0.8rem;
-        font-weight: 500;
-        color: rgba(var(--text-color), 0.8);
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-    }
-    .date{
-        grid-area: date;
-        margin-left: auto;
-        font-weight: 500;
-        white-space: nowrap;
-    }
-    .subject{
-        grid-area: subject;
-        font-size: 1em;
-        margin-top: 0.3rem;
-        font-weight: 500;
-    }
-    .description{
-        grid-area: desc;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;  
-        overflow: hidden;
-        font-size: 0.9em;
-        margin-top: 0.2rem;
-        color: rgba(var(--text-color), 0.8);
-    }
-}
-@keyframes slide{
-    from{
-        opacity: 0;
-        transform: translateX(-1rem);
-    }
-    to{
-        opacity: 1;
-        transform: none;
-    }
-}
-#mail_container{
+.mail-card {
+  position: relative;
+  display: grid;
+  gap: 0 1rem;
+  padding: 0.8rem 1.5rem;
+  align-items: center;
+  flex-shrink: 0;
+  user-select: none;
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas:
+    "dp sender date"
+    "dp subject subject"
+    "dp desc desc";
+  .initial {
+    grid-area: dp;
+    align-self: flex-start;
+    height: 2rem;
+    width: 2rem;
+    font-size: 1rem;
+  }
+  .sender {
     width: 100%;
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: rgba(var(--text-color), 0.8);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .date {
+    grid-area: date;
+    margin-left: auto;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+  .subject {
+    grid-area: subject;
+    font-size: 1em;
+    margin-top: 0.3rem;
+    font-weight: 500;
+  }
+  .description {
+    grid-area: desc;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    font-size: 0.9em;
+    margin-top: 0.2rem;
+    color: rgba(var(--text-color), 0.8);
+  }
 }
-.mail{
-    position: relative;
-    &:not(:first-of-type){
-        margin-top: 2rem;
-        padding-inline-start: 1rem;
-    }
-    &:not(:first-of-type)::before{
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 0.2rem;
-        height: 100%;
-        background: rgba(var(--text-color), 0.2);
-    }
-    .mail-header{
-        align-self: start;
-        margin-bottom: 1rem;
-        padding: 1.5rem;
-    }
-    .sender-name{
-        font-weight: 500;
-        margin-bottom: 0.5rem;
-    }
-    .flo-id{
-        font-weight: 400;
-        max-width: 90%;
-    }
-    .flex:first-of-type{
-        margin-bottom: 1rem;
-    }
-    .back{
-        margin: 0 0 0 -0.5rem;
-    }
-    .mail-subject,
-    .mail-content{
-        padding: 0 1.5rem;
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-    }
-    .mail-subject{
-        margin-bottom: 0.4em;
-    }
-    .mail-content{
-        height: max-content;
-        max-width: 60ch;
-        white-space: pre-wrap;
-    }
+@keyframes slide {
+  from {
+    opacity: 0;
+    transform: translateX(-1rem);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
 }
-.logo-section{
-    display: grid;
-    grid-template-columns: auto 1fr;
+#mail_container {
+  width: 100%;
 }
-.option{
-    display: flex;
-    align-items: center;
-    padding: 0.8rem 1.5rem;
-    user-select: none;
-    .icon{
-        height: 1.4rem;
-        width: 1.4rem;
-        margin-right: 1rem;
-        stroke: rgba(255, 255, 255, 0.8);
-    }
-}
-#main_navbar{
-    position: fixed;
-    flex-direction: column;
-    height: 100%;
-    bottom: 0;
-    top: 0;
-    padding: 0;
-    width: max(16rem, 60vw);
-    background: rgba(var(--foreground-color), 1);
-    .logo-section{
-        padding: 0 1rem;
-    }
-    .active{
-        background: var(--accent-color);
-        .icon{
-            stroke: white;
-        }
-        .label{
-            color: white;
-        }
-    }
-    .label{
-        font-weight: 500;
-        font-size: 0.9rem;
-    }
-    .navbar-item{
-        height: auto;
-        justify-content: flex-start;
-        flex-direction: row;
-        flex: none;
-        padding: 1rem;
-        .icon{
-            height: 1.2rem;
-            width: 2.4rem;
-            margin-right: 0.8rem;
-        }
-        &:last-of-type{
-            margin-top: auto;
-        }
-        .icon{
-            height: 1.2rem;
-            width: 1.2rem;
-        }
-        &.badge::after{
-            right: 0;
-            top: 0;
-            position: absolute;
-            content: attr(data-notifications);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 0.4rem;
-            line-height: 0;
-            height: calc(1em + 0.4rem);
-            background: #00C853;
-            color: rgba(var(--foreground-color), 1);
-            border-radius: 2rem;
-            transition: transform 0.3s;
-        }
-        &.badge.active::after,
-        &.badge[data-notifications="0"]::after,
-        &.badge[data-notifications=""]::after{
-            transform: scale(0);
-        }
-    }
-}
-#auto_complete_contact{
-    position: relative;
-    justify-content: flex-start;
-    padding-bottom: 0;
-}
-#mail_contact_list{
-    max-height: 40vh;
-    overflow-y: auto;
+.mail {
+  position: relative;
+  &:not(:first-of-type) {
+    margin-top: 2rem;
+    padding-inline-start: 1rem;
+  }
+  &:not(:first-of-type)::before {
+    content: "";
     position: absolute;
-    top: 100%;
-    background: rgba(var(--foreground-color), 1);
-    z-index: 1;
-    border-radius: 0.4rem;
-    box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.5rem rgba(0, 0, 0, 0.16);
+    left: 0;
+    top: 0;
+    width: 0.2rem;
+    height: 100%;
+    background: rgba(var(--text-color), 0.2);
+  }
+  .mail-header {
+    align-self: start;
+    margin-bottom: 1rem;
+    padding: 1.5rem;
+  }
+  .sender-name {
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+  }
+  .flo-id {
+    font-weight: 400;
+    max-width: 90%;
+  }
+  .flex:first-of-type {
+    margin-bottom: 1rem;
+  }
+  .back {
+    margin: 0 0 0 -0.5rem;
+  }
+  .mail-subject,
+  .mail-content {
+    padding: 0 1.5rem;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+  }
+  .mail-subject {
+    margin-bottom: 0.4em;
+  }
+  .mail-content {
+    height: max-content;
+    max-width: 60ch;
+    white-space: pre-wrap;
+  }
+}
+.logo-section {
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+.option {
+  display: flex;
+  align-items: center;
+  padding: 0.8rem 1.5rem;
+  user-select: none;
+  .icon {
+    height: 1.4rem;
+    width: 1.4rem;
+    margin-right: 1rem;
+    stroke: rgba(255, 255, 255, 0.8);
+  }
+}
+#main_navbar {
+  display: flex;
+  background: rgba(var(--text-color), 0.03);
+  &.hide-away {
+    position: absolute;
+  }
+  ul {
+    display: flex;
+    height: 100%;
     width: 100%;
-    .contact{
-        grid-template-columns: auto 1fr;
-        grid-template-areas: 'dp .' 'dp .';
-    }
-    sm-menu{
-        display: none;
+    li {
+      width: 100%;
     }
+  }
 }
-#contacts{
-    position: relative;
-    overflow-x: hidden;
-    #all_contacts,
-    #group_creation_panel{
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 1;
-        background: rgba(var(--foreground-color), 1);
-        .header{
-            padding-top: 0.7rem;
-        }
+.nav-item {
+  position: relative;
+  display: flex;
+  flex: 1;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0.3rem;
+  color: var(--text-color);
+  font-size: 0.8rem;
+  border-radius: 0.3rem;
+  font-weight: 500;
+  .icon {
+    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+  &__title {
+    margin-top: 0.3rem;
+    transition: opacity 0.2s,
+      transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+  &--active {
+    color: var(--accent-color);
+    .icon {
+      fill: var(--accent-color);
+      transform: translateY(50%);
     }
-    .scrolling-wrapper{
-        height: 100%;
+    .nav-item__title {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+  }
+  &__indicator {
+    position: absolute;
+    bottom: 0;
+    width: 2rem;
+    height: 0.3rem;
+    background: var(--accent-color);
+    border-radius: 1rem 1rem 0 0;
+    z-index: 1;
+  }
+  &:last-of-type {
+    margin-top: auto;
+  }
+  &.badge::after {
+    right: 0;
+    top: 0;
+    position: absolute;
+    content: attr(data-notifications);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.4rem;
+    line-height: 0;
+    height: calc(1em + 0.4rem);
+    background: #00c853;
+    color: rgba(var(--foreground-color), 1);
+    border-radius: 2rem;
+    transition: transform 0.3s;
+  }
+  &.badge.active::after,
+  &.badge[data-notifications="0"]::after,
+  &.badge[data-notifications=""]::after {
+    transform: scale(0);
+  }
+}
+#auto_complete_contact {
+  position: relative;
+  justify-content: flex-start;
+  padding-bottom: 0;
+}
+#mail_contact_list {
+  max-height: 40vh;
+  overflow-y: auto;
+  position: absolute;
+  top: 100%;
+  background: rgba(var(--foreground-color), 1);
+  z-index: 1;
+  border-radius: 0.4rem;
+  box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1),
+    0 0.2rem 0.5rem rgba(0, 0, 0, 0.16);
+  width: 100%;
+  .contact {
+    grid-template-columns: auto 1fr;
+    grid-template-areas: "dp ." "dp .";
+  }
+  sm-menu {
+    display: none;
+  }
+}
+#contacts {
+  position: relative;
+  overflow-x: hidden;
+  .scrolling-wrapper {
+    height: 100%;
+    flex: 1;
+    overflow-y: auto;
+    .empty-state {
+      padding: 1.5rem;
+      text-align: center;
+    }
+  }
+  #contacts_container {
+    padding-bottom: 1.5rem;
+    &::before {
+      display: flex;
+      content: "Contacts";
+      font-size: 0.9em;
+      color: rgba(var(--text-color), 0.9);
+      padding: 1rem 1.5rem;
+    }
+  }
+}
+#group_creation_panel {
+  .group-icon {
+    background: var(--accent-color);
+    justify-self: center;
+    height: 8rem;
+    width: 8rem;
+    margin-bottom: 1rem;
+    padding: 2rem;
+    border-radius: 50%;
+    font-size: 4rem;
+  }
+}
+#contacts,
+#mails {
+  position: relative;
+  grid-template-rows: max-content 1fr;
+}
+#contacts,
+#mails,
+#settings_page {
+  height: 100vh;
+  overflow-y: hidden;
+  .header {
+    padding: 1rem 1.5rem 1rem 1.5rem;
+    position: relative;
+    gap: 0.5rem;
+    min-height: 4rem;
+    .expanding-search {
+      position: absolute;
+      width: 100%;
+      padding: 0.7rem 1.5rem;
+      background: rgba(var(--foreground-color), 1);
+      transform: scale(0.9);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.3s, transform 0.3s;
+      &.expand {
+        transform: none;
+        opacity: 1;
+        pointer-events: all;
+      }
+    }
+    sm-input {
+      margin: 0;
+      width: 100%;
+      --padding: 0.5rem 1rem;
+    }
+    h4 {
+      text-transform: capitalize;
+      font-weight: 500;
+    }
+    .icon {
+      -webkit-tap-highlight-color: transparent;
+      margin-right: 1rem;
+    }
+    .flex {
+      h4 {
         flex: 1;
-        overflow-y: auto;
-        .empty-state{
-            padding: 1.5rem;
-            text-align: center;
-        }
+      }
+      .icon {
+        height: 2.2rem;
+        width: 2.2rem;
+        padding: 0.6rem;
+        margin-left: -0.4rem;
+        cursor: pointer;
+      }
+      sm-menu {
+        margin-right: -0.7rem;
+      }
     }
-    #contacts_container{
-        padding-bottom: 1.5rem;
-        &::before{
-            display: flex;
-            content: 'Contacts';
-            font-size: 0.9em;
-            color: rgba(var(--text-color), 0.9);
-            padding: 1rem 1.5rem;
-        }
-    }
-}
-#group_creation_panel{
-    .grid{
-        padding: 1.5rem;
-        gap: 1rem;
-    }
-    .group-icon{
-        background: var(--accent-color);
-        justify-self: center;
-        height: 8rem;
-        width: 8rem;
-        margin-bottom: 1rem;
-        padding: 2rem;
-        border-radius: 50%;
-        font-size: 4rem;
-    }
-}
-#contacts, #mails{
-    position: relative;
-    grid-template-rows: max-content 1fr;
-}
-#contacts, #mails, #settings_page{
-    height: 100vh;
-    overflow-y: hidden;
-    .header{
-        padding: 1rem 1.5rem 1rem 1.5rem;
-        position: relative;
-        gap: 0.5rem;
-        min-height: 4rem;
-        .expanding-search{
-            position: absolute;
-            width: 100%;
-            padding: 0.7rem 1.5rem;
-            background: rgba(var(--foreground-color), 1);
-            transform: scale(0.9);
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.3s, transform 0.3s;
-            &.expand{
-                transform: none;
-                opacity: 1;
-                pointer-events: all;
-            }
-        }
-        sm-input{
-            margin: 0;
-            width: 100%;
-            --padding: 0.5rem 1rem;
-        }
-        h4{
-            text-transform: capitalize;
-            font-weight: 500;
-        }
-        .icon{
-            -webkit-tap-highlight-color: transparent;
-            margin-right: 1rem;
-        }
-        .flex{
-            .hamburger-menu-button{
-                -webkit-tap-highlight-color: transparent;
-                margin-right: 1rem;
-            }
-            h4{
-                flex: 1;
-            }
-            .icon{
-                height: 2.2rem;
-                width: 2.2rem;
-                padding: 0.6rem;
-                margin-left: -0.4rem;
-                cursor: pointer;
-            }
-            sm-menu{
-                margin-right: -0.7rem;
-            }
-        }
-        sm-button{
-            margin: 0;
-            .icon{
-                height: 0.9rem;
-                width: 0.9rem;
-                align-self: center;
-                stroke-width: 8;
-                margin-left: 0;
-                margin-right: 0.5rem;
-            }
-        }
+    sm-button {
+      margin: 0;
+      .icon {
+        height: 0.9rem;
+        width: 0.9rem;
+        align-self: center;
+        stroke-width: 8;
+        margin-left: 0;
+        margin-right: 0.5rem;
+      }
     }
+  }
 }
 #chat_page,
 #mail_page,
-#settings_page{
-    align-items: flex-start;
-    width: 100%;
-    height: 100%;
+#settings_page {
+  align-items: flex-start;
+  width: 100%;
+  height: 100%;
 }
-#chat_page{
-    overflow: hidden;
+#chat_page {
+  overflow: hidden;
 }
 #chat_left,
-#chat_details_panel{
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow-y: auto;
+#chat_details_panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
 }
-#chat_details_panel{
+#chat_details_panel {
+  background: rgba(var(--text-color), 0.04);
+  padding-bottom: 1.5rem;
+  .card {
+    margin: 0 1rem;
+    padding: 1.5rem 1rem;
+    border-radius: 0.8rem;
     background: rgba(var(--text-color), 0.04);
+    &:not(:last-of-type) {
+      margin-bottom: 1rem;
+    }
+    .h4 {
+      font-weight: 400;
+      font-size: 0.9rem;
+      color: rgba(var(--text-color), 0.8);
+      margin-bottom: 0.5rem;
+    }
+    & > .flex {
+      margin-bottom: 1rem;
+      .h4 {
+        margin-bottom: 0;
+      }
+    }
+    .tip {
+      margin-bottom: 0.5rem;
+    }
+    .danger:not(:last-of-type) {
+      margin-bottom: 1rem;
+    }
+  }
+  header {
+    position: sticky;
+    top: 0;
+    padding: 1rem;
+    min-height: 4rem;
+    background-color: rgba(var(--foreground-color), 0.8);
+    z-index: 1;
+    .icon {
+      height: 2.3rem;
+      width: 2.3rem;
+      padding: 0.7rem;
+      cursor: pointer;
+    }
+  }
+  .contact {
+    padding: 0.5rem 0;
+  }
+  #chat_profile {
+    display: grid;
+    place-items: center;
+    margin-top: 5.5rem;
     padding-bottom: 1.5rem;
-    .card{
-        margin: 0 1rem;
-        padding: 1.5rem 1rem;
-        border-radius: 0.8rem;
-        background: rgba(var(--text-color), 0.04);
-        &:not(:last-of-type){
-            margin-bottom: 1rem;
-        }
-        .h4{
-            font-weight: 400;
-            font-size: 0.9rem;
-            color: rgba(var(--text-color), 0.8);
-            margin-bottom: 0.5rem;
-        }
-        & > .flex{
-            margin-bottom: 1rem;
-            .h4{
-                margin-bottom: 0;
-            }
-        }
-        .tip{
-            margin-bottom: 0.5rem;
-        }
-        .danger:not(:last-of-type){
-            margin-bottom: 1rem;
-        }
+    .initial {
+      margin-top: -5.5rem;
+      margin-bottom: 1rem;
+      height: 8rem;
+      width: 8rem;
+      border-radius: 50%;
+      font-size: 4rem;
+      .icon {
+        height: 4rem;
+        width: 4rem;
+      }
     }
-    header{
-        position: sticky;
-        top: 0;
-        padding: 1rem;
-        min-height: 4rem;
-        background-color: rgba(var(--foreground-color), 0.8);
-        z-index: 1;
-        .icon{
-            height: 2.3rem;
-            width: 2.3rem;
-            padding: 0.7rem;
-            cursor: pointer;
-        }
+    #chat_name {
+      font-weight: 500;
+      font-size: 1.2rem;
     }
-    .contact{
-        padding: 0.5rem 0;
-    }
-    #chat_profile{
-        display: grid;
-        place-items: center;
-        margin-top: 5.5rem;
-        padding-bottom: 1.5rem;
-        .initial{
-            margin-top: -5.5rem;
-            margin-bottom: 1rem;
-            height: 8rem;
-            width: 8rem;
-            border-radius: 50%;
-            font-size: 4rem;
-            .icon{
-                height: 4rem;
-                width: 4rem;
-            }
-        }
-        #chat_name{
-            font-weight: 500;
-            font-size: 1.2rem;
-        }
-        #last_interaction_time{
-            color: rgba(var(--text-color), 0.7);
-            font-size: 0.9rem;
-            margin-top: 0.5rem;
-        }
-    }
-    .copy{
-        font-weight: 400;
+    #last_interaction_time {
+      color: rgba(var(--text-color), 0.7);
+      font-size: 0.9rem;
+      margin-top: 0.5rem;
     }
+  }
+  .copy {
+    font-weight: 400;
+  }
 }
-#group_members_list{
-    max-height: 50vh;
-    overflow-y: auto;
+#group_members_list {
+  max-height: 50vh;
+  overflow-y: auto;
 }
-#chat{
-    position: relative;
-    grid-template-columns: 1fr;
+#chat {
+  position: relative;
+  grid-template-columns: 1fr;
 }
-.message{
-    position: relative;
+.message {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  width: auto;
+  font-size: 0.92rem;
+  max-width: max-content;
+  margin-bottom: 0.2rem;
+  margin-top: 0.8rem;
+  padding: 0.6em 1em;
+  transition: opacity 0.3s,
+    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  .sender-name {
+    font-size: 0.85rem;
+    font-weight: 500;
+    margin-bottom: 0.3rem;
+  }
+  .message-body {
     display: flex;
+    align-items: center;
     flex-wrap: wrap;
-    width: auto;
-    font-size: 0.92rem;
-    max-width: max-content;
-    margin-bottom: 0.2rem;
-    margin-top: 0.8rem;
-    padding: 0.6em 1em;
-    transition: opacity 0.3s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    .sender-name{
-        font-size: 0.85rem;
-        font-weight: 500;
-        margin-bottom: 0.3rem;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-all;
+    word-break: break-word;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+    white-space: pre-wrap;
+    line-height: 1.5;
+    a {
+      color: inherit;
     }
-    .message-body{
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        word-break: break-all;
-        word-break: break-word;
-        -moz-hyphens: auto;
-        -webkit-hyphens: auto;
-        hyphens: auto;
-        white-space: pre-wrap;
-        line-height: 1.5;
-        a{
-            color: inherit;
-        }
-        .text-emoji{
-            align-self: center;
-            font-size: 1.4em;
-            letter-spacing: 0;
-        }
+    .text-emoji {
+      align-self: center;
+      font-size: 1.4em;
+      letter-spacing: 0;
     }
-    .time{
-        white-space: nowrap;
-        font-size: 0.8em;
-        opacity: 0.8;   
-        justify-self: flex-end;
-        padding-left: 1rem;
-        align-self: flex-end;
-        margin-top: 0.2rem;
-        margin-left: auto;
-    }
-}
-.sent{
+  }
+  .time {
+    white-space: nowrap;
+    font-size: 0.8em;
+    opacity: 0.8;
+    justify-self: flex-end;
+    padding-left: 1rem;
+    align-self: flex-end;
+    margin-top: 0.2rem;
     margin-left: auto;
-    color: #efefef;
-    background: var(--accent-color);
-    border-radius: 0.8rem 0 0.8rem 0.8rem;
-    &::after{
-        content: '';
-        position: absolute;
-        left: 100%;
-        top: 0;
-        width: 0;
-        height: 0;
-        border-style: solid;
-        border-width: 0.5em 0.3em 0 0;
-        border-color: var(--accent-color) transparent transparent transparent;
-    }
+  }
 }
-.received{
-    margin-right: auto;
-    background: rgba(var(--text-color), 0.1);
-    border-radius: 0 0.8rem 0.8rem 0.8rem;
-    &::after{
-        content: '';
-        position: absolute;
-        left: -0.5em;
-        top: 0;
-        width: 0;
-        height: 0;
-        border-style: solid;
-        border-width: 0 0.5em 0.5em 0;
-        border-color: transparent rgba(var(--text-color), 0.1) transparent transparent;
-    }
+.sent {
+  margin-left: auto;
+  color: #efefef;
+  background: var(--accent-color);
+  border-radius: 0.8rem 0 0.8rem 0.8rem;
+  &::after {
+    content: "";
+    position: absolute;
+    left: 100%;
+    top: 0;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0.5em 0.3em 0 0;
+    border-color: var(--accent-color) transparent transparent transparent;
+  }
+}
+.received {
+  margin-right: auto;
+  background: rgba(var(--text-color), 0.1);
+  border-radius: 0 0.8rem 0.8rem 0.8rem;
+  &::after {
+    content: "";
+    position: absolute;
+    left: -0.5em;
+    top: 0;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 0.5em 0.5em 0;
+    border-color: transparent rgba(var(--text-color), 0.1) transparent
+      transparent;
+  }
 }
 .sent + .sent,
-.received + .received{
-    margin-top: 0;
+.received + .received {
+  margin-top: 0;
 }
 .sent + .sent::after,
-.received + .received::after{
-    display: none;
+.received + .received::after {
+  display: none;
 }
 .sent + .sent,
-.received + .received{
-    border-radius: 0.8rem;
+.received + .received {
+  border-radius: 0.8rem;
 }
-.distinct-sender{
-    display: grid;
-    border-radius: 0 0.8rem 0.8rem 0.8rem !important;
-    margin-top: 0.8rem !important;
-    &::after{
-        display: flex !important;
-        content: '';
-        position: absolute;
-        left: -0.5em;
-        top: 0;
-        width: 0;
-        height: 0;
-        border-style: solid;
-        border-width: 0 0.5em 0.5em 0;
-        border-color: transparent rgba(var(--text-color), 0.1) transparent transparent;
-    }
-}
-.unconfirmed{
-    opacity: 0.7;
-    transform-origin: left;
-    animation: pop .3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-@keyframes pop{
-    0%{
-        transform: rotate(5deg) translate(-0.5rem, 1rem)
-    }
-    100%{
-        transform: rotate(0) translate(0, 0)
-    }
-}
-#chat_header{
-    padding: 0 1rem;
-    min-height: 4rem;
-    grid-template-columns: 1fr auto;
-    .flex{
-        height: 100%;
-    }
-    .back-button{
-        height: 2rem;
-        width: 2rem;
-        padding: 0.5rem;
-        stroke-width: 8;
-        margin-right: 0.5rem;
-        stroke: rgba(var(--text-color), 0.8);
-    }
-    .initial{
-        cursor: pointer;
-        margin-right: 1rem;
-        height: 2.2rem;
-        width: 2.2rem;
-        flex-shrink: 0;
-    }
-    #receiver_name{
-        font-weight: 500;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-}
-#scroll_to_bottom{
+.distinct-sender {
+  display: grid;
+  border-radius: 0 0.8rem 0.8rem 0.8rem !important;
+  margin-top: 0.8rem !important;
+  &::after {
+    display: flex !important;
+    content: "";
     position: absolute;
-    display: flex;
-    right: 0;
-    bottom: 4rem;
-    border-radius: 4rem;
-    z-index: 1;
-    aspect-ratio: 1/1;
-    margin: 1.5rem;
-    cursor: pointer;
-    transform: scale(0);
-    transition: transform 0.3s;
-    &.new-message::after{
-        position: absolute;
-        content: '';
-        top: 0;
-        right: 0;
-        z-index: 2;
-        padding: 0.5rem;
-        border-radius: 50%;
-        background: #00E676;
-    }
-    .icon{
-        width: 2.6rem;
-        height: 2.6rem;
-        padding: 0.9rem;
-        stroke-width: 8;
-    }
+    left: -0.5em;
+    top: 0;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 0.5em 0.5em 0;
+    border-color: transparent rgba(var(--text-color), 0.1) transparent
+      transparent;
+  }
 }
-#chat_footer{
-    .flex{
-        align-items: flex-end;
-        padding: 0.5rem 1rem 0.5rem 0.5rem;
-    }
-    sm-textarea{
-        --padding-right: 3rem;
-        --border-radius: 0.5rem;
-    }
+.unconfirmed {
+  opacity: 0.7;
+  transform-origin: left;
+  animation: pop 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
-#emoji_toggle{
-    align-self: center;
-    padding: 0.6rem;
+@keyframes pop {
+  0% {
+    transform: rotate(5deg) translate(-0.5rem, 1rem);
+  }
+  100% {
+    transform: rotate(0) translate(0, 0);
+  }
+}
+#chat_header {
+  padding: 0 1rem;
+  min-height: 4rem;
+  grid-template-columns: 1fr auto;
+  .flex {
+    height: 100%;
+  }
+  .back-button {
+    height: 2rem;
+    width: 2rem;
+    padding: 0.5rem;
+    stroke-width: 8;
     margin-right: 0.5rem;
+    stroke: rgba(var(--text-color), 0.8);
+  }
+  .initial {
+    cursor: pointer;
+    margin-right: 1rem;
+    height: 2.2rem;
+    width: 2.2rem;
+    flex-shrink: 0;
+  }
+  #receiver_name {
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+#scroll_to_bottom {
+  position: absolute;
+  display: flex;
+  right: 0;
+  bottom: 4rem;
+  border-radius: 4rem;
+  z-index: 1;
+  aspect-ratio: 1/1;
+  margin: 1.5rem;
+  cursor: pointer;
+  transform: scale(0);
+  transition: transform 0.3s;
+  &.new-message::after {
+    position: absolute;
+    content: "";
+    top: 0;
+    right: 0;
+    z-index: 2;
+    padding: 0.5rem;
+    border-radius: 50%;
+    background: #00e676;
+  }
+  .icon {
     width: 2.6rem;
     height: 2.6rem;
-    border-radius: 2rem;
-    cursor: pointer;
-    path{
-        fill: rgba(var(--text-color), 0.5);
-    }
-    &.active path{
-        fill: var(--accent-color);
-    }
+    padding: 0.9rem;
+    stroke-width: 8;
+  }
 }
-#send_message_button{
-    position: absolute;
-    right: 1.5rem;
-    transform: scale(0);
-    opacity: 0;
-    pointer-events: none;
-    z-index: 1;
-    align-self: center;
-    height: 2.4rem;
-    width: 2.4rem;
-    padding: 0.5rem;
-    cursor: pointer;
-    stroke: none;
-    fill: rgba(var(--text-color), 0.4);
-    margin-left: 1rem;
-    transition: 0.3s;
-    &.active{
-        opacity: 1;
-        fill: var(--accent-color);
-        transform: none;
-        pointer-events: all;
-    }
+#chat_footer {
+  .flex {
+    align-items: flex-end;
+    padding: 0.5rem 1rem 0.5rem 0.5rem;
+  }
+  sm-textarea {
+    --padding-right: 3rem;
+    --border-radius: 0.5rem;
+  }
 }
-#type_message{
-    margin: 0;
+#emoji_toggle {
+  align-self: center;
+  padding: 0.6rem;
+  margin-right: 0.5rem;
+  width: 2.6rem;
+  height: 2.6rem;
+  border-radius: 2rem;
+  cursor: pointer;
+  path {
+    fill: rgba(var(--text-color), 0.5);
+  }
+  &.active path {
+    fill: var(--accent-color);
+  }
 }
-.big-emoji{
-    flex-direction: column;
-    .message-body{
-        justify-content: center;
-        font-size: 2.6rem;
-    }
-    .text-emoji{
-        font-size: 2.6rem !important;
-    }
+#send_message_button {
+  position: absolute;
+  right: 1.5rem;
+  transform: scale(0);
+  opacity: 0;
+  pointer-events: none;
+  z-index: 1;
+  align-self: center;
+  height: 2.4rem;
+  width: 2.4rem;
+  padding: 0.5rem;
+  cursor: pointer;
+  stroke: none;
+  fill: rgba(var(--text-color), 0.4);
+  margin-left: 1rem;
+  transition: 0.3s;
+  &.active {
+    opacity: 1;
+    fill: var(--accent-color);
+    transform: none;
+    pointer-events: all;
+  }
 }
-#chat_middle{
-    flex: 1;
-    padding: 0 1rem;
+#type_message {
+  margin: 0;
 }
-#emoji_picker{   
-    --background: rgba(var(--text-color), 0.06);
-    --border-size: 0;
-    --input-border-color: none;
-    --input-padding: 0.4rem 1rem;
-    --outline-color: var(--accent-color);
-    --input-font-color: var(--text-color);
-    --input-placeholder-color: rgba(var(--text-color), 0.6);
-    --indicator-color: var(--accent-color);
-    --button-hover-background: rgba(var(--text-color), 0.2);
-    user-select: none;
-    width: 100%;
-    max-height: 40vh;
-}
-.emoji{
-    font-size: 1.6rem;
-    cursor: pointer;
-    padding: 0.4rem;
-    border-radius: 0.6rem;
-    user-select: none;
-    text-align: center;
-}
-#new_conversation, #no_mails{
-    height: 100%;
+.big-emoji {
+  flex-direction: column;
+  .message-body {
     justify-content: center;
-    text-align: center;
-    padding: 1.5rem;
-    p{
-        margin-top: 0.8rem;
-    }
+    font-size: 2.6rem;
+  }
+  .text-emoji {
+    font-size: 2.6rem !important;
+  }
 }
-#no_mails{
-    .new-conversation{
-        height: 7rem;
-        margin-bottom: 1rem;
-    }
+#chat_middle {
+  flex: 1;
+  padding: 0 1rem;
 }
-.new-conversation{
-    height: 8rem;
-    width: 8rem;
-    align-self: center;
-    stroke-width: 16;
-    stroke: rgba(var(--text-color), 0.4);
+#emoji_picker {
+  --background: rgba(var(--text-color), 0.06);
+  --border-size: 0;
+  --input-border-color: none;
+  --input-padding: 0.4rem 1rem;
+  --outline-color: var(--accent-color);
+  --input-font-color: rgba(var(--text-color), 1);
+  --input-placeholder-color: rgba(var(--text-color), 0.6);
+  --indicator-color: var(--accent-color);
+  --button-hover-background: rgba(var(--text-color), 0.2);
+  user-select: none;
+  width: 100%;
+  max-height: 40vh;
+}
+.emoji {
+  font-size: 1.6rem;
+  cursor: pointer;
+  padding: 0.4rem;
+  border-radius: 0.6rem;
+  user-select: none;
+  text-align: center;
+}
+#new_conversation,
+#no_mails {
+  height: 100%;
+  justify-content: center;
+  text-align: center;
+  padding: 1.5rem;
+  p {
+    margin-top: 0.8rem;
+  }
+}
+#no_mails {
+  .new-conversation {
+    height: 7rem;
+    margin-bottom: 1rem;
+  }
+}
+.new-conversation {
+  height: 8rem;
+  width: 8rem;
+  align-self: center;
+  stroke-width: 16;
+  stroke: rgba(var(--text-color), 0.4);
 }
 #chat_middle,
-#chat_container,
+#chats_list,
 #inbox_mail_container,
 #sent_mail_container,
-#mail{
-    width: 100%;
-    flex-direction: column;
-    height: 100%;
-    overflow-y: auto;
+#mail {
+  width: 100%;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
 }
-.observe-empty-state:empty{
-    display: none;
+.observe-empty-state:empty {
+  display: none;
 }
-.observe-empty-state:not(:empty) ~ .empty-state{
-    display: none;
+.observe-empty-state:not(:empty) ~ .empty-state {
+  display: none;
 }
-#chat_container{
-    padding-bottom: 6rem;
+#chats_list {
+  padding-bottom: 6rem;
 }
-#contacts_popup{
-    --body-padding: 0;
-    .popup-header{
-        padding: 1.5rem;
-    }
-    .warning{
-        padding: 0.5rem 1.5rem;
-    }
+#contacts_popup {
+  --body-padding: 0;
 }
-.mail-container{
-    height: 100%;
-    flex-direction: column;
-    overflow-y: auto;
+.mail-container {
+  height: 100%;
+  flex-direction: column;
+  overflow-y: auto;
 }
 
 #inbox_mail_container,
-#sent_mail_container
-{
-    gap: 0.2rem;
-    padding-bottom: 6rem;
+#sent_mail_container {
+  gap: 0.2rem;
+  padding-bottom: 6rem;
 }
-.has-bg-image{
-    .received, 
-    .group-event-card,
-    .date-card{
-        background: rgba(var(--foreground-color), 0.8);
-    }
-    .received::after{
-        border-color: transparent rgba(var(--foreground-color), 0.6) transparent transparent;
-    } 
-    #emoji_picker{
-        --background: rgba(var(--foreground-color), 0.6);
-    }
-    #emoji_toggle{
-        path{
-            fill: rgba(var(--text-color), 0.8);
-        }
-    }
-    sm-textarea{
-        --background: rgba(var(--foreground-color), 0.6);
-    }
-    #chat_details_panel{
-        background: rgba(var(--foreground-color), 0.8);
+.has-bg-image {
+  .received,
+  .group-event-card,
+  .date-card {
+    background: rgba(var(--foreground-color), 0.8);
+  }
+  .received::after {
+    border-color: transparent rgba(var(--foreground-color), 0.6) transparent
+      transparent;
+  }
+  #emoji_picker {
+    --background: rgba(var(--foreground-color), 0.6);
+  }
+  #emoji_toggle {
+    path {
+      fill: rgba(var(--text-color), 0.8);
     }
+  }
+  sm-textarea {
+    --background: rgba(var(--foreground-color), 0.6);
+  }
+  #chat_details_panel {
+    background: rgba(var(--foreground-color), 0.8);
+  }
 }
-#mail{
-    height: 100vh;
-    align-items: flex-start;
-    & > .flex{
-        padding: 0 1.5rem;
-        margin-top: 2rem;
-        sm-button:first-of-type{
-            margin-right: 0.5rem;
-        }
+#mail {
+  height: 100vh;
+  align-items: flex-start;
+  & > .flex {
+    padding: 0 1.5rem;
+    margin-top: 2rem;
+    sm-button:first-of-type {
+      margin-right: 0.5rem;
     }
+  }
 }
-#compose_mail_popup{
-    sm-input{
-        margin-bottom: 1rem;
-    }
+#compose_mail_popup {
+  sm-input {
+    margin-bottom: 1rem;
+  }
 }
-.sidebar-item{
-    display: flex;
-    align-items: center;
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  text-transform: capitalize;
+  font-weight: 500;
+  opacity: 0.9;
+  .icon {
+    margin-right: 1em;
+    width: 1em;
+  }
+}
+.back {
+  padding: 0.7rem;
+  height: 2.4rem;
+  width: 2.4rem;
+  margin-left: -0.5rem;
+  cursor: pointer;
+  stroke-width: 8;
+  opacity: 0.8;
+  -webkit-tap-highlight-color: transparent;
+  &:hover {
+    opacity: 1;
+  }
+}
+#settings_page {
+  #settings_sidebar header {
     padding: 1rem 1.5rem;
+  }
+  .flex sm-button {
+    margin: 0;
+    margin-left: 1rem;
+  }
+  sm-switch {
+    padding: 1rem 1.5rem;
+    display: flex;
+    margin-bottom: 1rem;
+    width: min(60ch, 100%);
+    .flex {
+      margin-right: 1rem;
+    }
+    h4 {
+      margin-bottom: 0.5rem;
+    }
+  }
+  sm-button {
+    width: 100%;
+  }
+  #settings_title {
     text-transform: capitalize;
-    font-weight: 500;
-    opacity: 0.9;
-    .icon{
-        margin-right: 1em;
-        width: 1em;
+  }
+  #settings_sidebar {
+    height: 100%;
+  }
+  #settings_panel {
+    overflow-y: auto;
+    height: 100%;
+  }
+  section {
+    padding: 1rem 1.5rem;
+    width: min(60ch, 100%);
+    display: grid;
+    gap: 0.3rem;
+    sm-button {
+      margin-top: 0.5rem;
+      margin-bottom: 0;
     }
-}
-.back{
-    padding: 0.7rem;
-    height: 2.4rem;
-    width: 2.4rem;
-    margin-left: -0.5rem;
-    cursor: pointer;
-    stroke-width: 8;
-    opacity: 0.8;
-    -webkit-tap-highlight-color: transparent;
-    &:hover{
-        opacity: 1;
+    &:not(:last-of-type) {
+      margin-bottom: 1rem;
     }
-}
-#settings_page{
-    #settings_sidebar header{
-        padding: 1rem 1.5rem;
-    }
-    .flex sm-button{
-        margin: 0;
-        margin-left: 1rem;
-    }
-    sm-switch{
-        padding: 1rem 1.5rem;
-        display: flex;
-        margin-bottom: 1rem;
-        width: min(60ch, 100%);
-        .flex{
-            margin-right: 1rem;
-        }
-        h4{
-            margin-bottom: 0.5rem;
-        }
-    }
-    sm-button{
-        width: 100%;
-    }
-    #settings_title{
-        text-transform: capitalize;
-    }
-    #settings_sidebar{
-        height: 100%;
-    }
-    #settings_panel{
-        overflow-y: auto;
-        height: 100%;
-    }
-    section{
-        padding: 1rem 1.5rem;
-        width: min(60ch, 100%);
-        display: grid;
-        gap: .3rem;
-        sm-button{
-            margin-top: 0.5rem;
-            margin-bottom: 0;
-        }
-        &:not(:last-of-type){
-            margin-bottom: 1rem;
-        }
-    }
-    #sign_out::part(button){
-        color: var(--error-color);
-    }
-    color-grid{
-        margin: 0.5rem 0 1.5rem 0;
-        width: min(60ch, 100%);
-    }
-    #chat_preview{
-        margin-top: 1rem;
-        padding: 1rem;
-        border-radius: 0.5rem;
-    }
-    #bg_preview_container{
-        padding: 1rem 0;
-        gap: 0.5rem;
-        flex-wrap: wrap;
-    }
-    .bg-preview{
-        position: relative;
-        display: grid;
-        place-items: center;
-        height: 8rem;
-        width: 8rem;
-        cursor: pointer;
-        border-radius: 1rem;
-        overflow: hidden;
-        background: rgba(var(--text-color), 0.1);
-        &--selected::after{
-            content: '';
-            position: absolute;
-            height: 100%;
-            width: 100%;
-            box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset;
-        }
-    }
-    .bg-preview__image{
-        object-fit: cover;
-        height: 100%;
-        width: 100%;
-    }
-}
-#video_call_page{
+  }
+  #sign_out::part(button) {
+    color: var(--error-color);
+  }
+  color-grid {
+    margin: 0.5rem 0 1.5rem 0;
+    width: min(60ch, 100%);
+  }
+  #chat_preview {
+    margin-top: 1rem;
+    padding: 1rem;
+    border-radius: 0.5rem;
+  }
+  #bg_preview_container {
+    padding: 1rem 0;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+  .bg-preview {
     position: relative;
     display: grid;
-    video{
-        position: fixed;
-        object-fit: cover;
-        object-position: center;
-    }
-}
-#their_video{
-    height: 100%;
-}
-#my_video{
-    width: max(20vh, 12rem);
-    bottom: 0;
-    right: 0;
+    place-items: center;
+    height: 8rem;
+    width: 8rem;
+    cursor: pointer;
     border-radius: 1rem;
-    border: solid;
-    margin: 1.5rem;
+    overflow: hidden;
+    background: rgba(var(--text-color), 0.1);
+    &--selected::after {
+      content: "";
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset;
+    }
+  }
+  .bg-preview__image {
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
+  }
 }
-#call_controls{
-    padding: 1.5rem;
-    margin-top: auto;
-    justify-self: center;
+@media screen and (max-width: 640px) {
+  sm-popup {
+    --border-radius: 1rem 1rem 0 0;
+  }
+  .hide-on-mobile {
+    position: fixed;
+    max-height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+  #landing {
+    grid-template-areas: "illustration" ".";
+    align-items: flex-start;
+    .title-font {
+      font-size: 2rem;
+      font-weight: 500;
+    }
+    sm-button {
+      width: 100%;
+      display: flex;
+      width: 100% !important;
+    }
+  }
+  #landing_illustration {
+    grid-area: illustration;
+  }
+  .frame,
+  #sign_in {
+    form {
+      height: 100%;
+    }
+    .h2 {
+      margin-top: 3rem;
+    }
+    sm-button[variant="primary"] {
+      margin-top: auto;
+    }
+  }
+  #main_navbar {
+    &.hide-away {
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+  #chats_list,
+  #contact_container {
+    gap: 0.2rem;
+  }
+  #chat {
+    .message {
+      width: auto;
+      max-width: 90%;
+    }
+  }
+  #chat_header {
+    grid-template-columns: auto 1fr auto;
+  }
+  #settings_page {
+    overflow-x: hidden;
+    #settings_header {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      padding: 1rem 1.5rem;
+      margin-bottom: 0.5rem;
+      background: rgba(var(--foreground-color), 1);
+    }
+  }
 }
-#pick_up_call{
-    color: #00C853;
-}
-.circular-button{
+@media screen and (min-width: 40rem) {
+  .hide-on-desktop {
+    display: none !important;
+  }
+  .page {
+    padding-bottom: 0;
+  }
+  .popup__header {
+    grid-column: 1/-1;
+    padding: 1rem 1.5rem 0 1.5rem;
+  }
+  .fab {
+    position: absolute;
+  }
+  .logo-section {
+    padding: 2rem 3rem 0 3rem;
+    margin: 0.5rem 0;
+  }
+  sm-popup {
+    --width: 24rem;
+    --min-width: 24rem;
+    --border-radius: 0.5rem;
+  }
+  #landing {
     align-items: center;
-    .filled{
-        height: 3rem;
-        width: 3rem;
+    gap: 4vw;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 4vw;
+  }
+  #sign_in {
+    width: 24rem;
+  }
+  #main_page {
+    grid-template-columns: min-content 1fr;
+    grid-template-rows: 1fr;
+    grid-template-areas: "nav .";
+    border-radius: 0.8rem;
+    overflow: hidden;
+    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05),
+      0 1rem 3rem rgba(0, 0, 0, 0.2);
+  }
+  #main_navbar {
+    grid-area: nav;
+    border-top: none;
+    flex-direction: column;
+    height: calc(100% - 1rem);
+    margin: 0.5rem;
+    border-radius: 0.5rem;
+    background-color: rgba(37 110 255/ 0.03);
+    ul {
+      flex-direction: column;
+      gap: 0.5rem;
+      padding: 0.3rem;
+      li:last-of-type {
+        margin-top: auto;
+      }
+    }
+  }
+  .nav-item {
+    aspect-ratio: 1/1;
+    &__indicator {
+      width: 0.25rem;
+      height: 50%;
+      left: 0;
+      border-radius: 0 1rem 1rem 0;
+      bottom: auto;
+    }
+  }
+  #add_contact_popup {
+    --min-width: 24rem;
+  }
+  #compose_mail_popup,
+  #reply_mail_popup {
+    --min-width: 36rem;
+  }
+  #emoji_picker {
+    max-height: 18rem;
+  }
+  #chat {
+    .message {
+      width: auto;
+      align-self: flex-start;
+      max-width: 55ch;
+    }
+  }
+  #chat_page,
+  #mail_page {
+    grid-template-columns: 20rem 1fr;
+  }
+  #settings_page {
+    display: grid;
+    height: 100vh;
+    grid-template-columns: 14rem 1fr;
+    sm-button {
+      width: max-content;
+    }
+    .active {
+      background: rgba(var(--text-color), 0.1);
+    }
+    .panel > *:first-of-type {
+      margin-top: 0.5rem;
+    }
+  }
+  .contact.active,
+  .mail-card.active {
+    background: rgba(var(--text-color), 0.06);
+  }
+  .card {
+    display: inline-flex;
+    width: auto;
+  }
+}
+@media only screen and (max-width: 1280px) {
+  .hide-on-medium {
+    display: none !important;
+  }
+}
+@media only screen and (min-width: 1080px) {
+  #chat {
+    #messages_container {
+      padding: 1rem 4rem;
+    }
+  }
+}
+@media only screen and (min-width: 1280px) {
+  #landing {
+    gap: 4vw;
+    padding: 0 8vw;
+    .title-font {
+      font-size: 3rem;
+    }
+  }
+  #chat_page,
+  #mail_page {
+    grid-template-columns: 23rem 1fr;
+  }
+  #chat_details_panel {
+    position: relative;
+  }
+  #chat {
+    &.expand-side-panel {
+      grid-template-columns: 1fr 24rem;
+      #messages_container {
         padding: 1rem;
+      }
     }
-    --padding: 0;
-    --border-radius: 50%;
+  }
+  #emoji_picker {
+    --num-columns: 16;
+  }
+  .contact.active,
+  .mail-card.active {
+    background: rgba(var(--text-color), 0.06);
+  }
+  .card {
+    display: inline-flex;
+    width: auto;
+  }
 }
-@media screen and (max-width: 640px){
-    sm-popup{
-        --border-radius: 1rem 1rem 0 0;
+@media (hover: hover) {
+  ::-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);
     }
-    .hide-on-mobile{
-        position: fixed;
-        max-height: 0;
-        opacity: 0;
-        pointer-events: none;
+  }
+  .contact:hover,
+  .emoji:hover,
+  .option:hover {
+    cursor: pointer;
+    background: rgba(var(--text-color), 0.06);
+  }
+  .contact {
+    .menu {
+      opacity: 0;
+      transition: opacity 0.3s;
     }
-    #landing{
-        grid-template-areas: 'illustration' '.';
-        align-items: flex-start;
-        .title-font{
-            font-size: 2rem;
-            font-weight: 500;
-        }
-        sm-button{
-            width: 100%;
-            display: flex;
-            width: 100% !important;
-        }
-    }
-    #landing_illustration{
-        grid-area: illustration;
-    }
-    .frame,
-    #sign_in{
-        form{
-            height: 100%;
-        }
-        .h2{
-            margin-top: 3rem;
-        }
-        sm-button[variant="primary"]{
-            margin-top: auto;
-        }
-    }
-    #main_navbar{
-        transform: translateX(-110%);
-        transition: transform 0.3s;
-        z-index: 4;
-        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
-        .logo-section{
-            padding: 1rem;
-        }
-    }
-    #navbar_backdrop{
-        position: fixed;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.3);
-        z-index: 2;
-        transition: transform 0.3s, opacity 0.3s;
-    }
-    #chat_container,
-    #contact_container{
-        gap: 0.2rem;
-    }
-    #chat{
-        .message{
-            width: auto;
-            max-width: 90%;
-        }
-    }
-    #chat_header{
-        grid-template-columns: auto 1fr auto;
-    }
-    #settings_page{
-        overflow-x: hidden;
-        #settings_header{
-            position: sticky;
-            top: 0;
-            z-index: 1;
-            padding: 1rem 1.5rem;
-            margin-bottom: 0.5rem;
-            background: rgba(var(--foreground-color), 1);
-        }
+  }
+  .contact:hover {
+    .menu {
+      opacity: 1;
     }
+  }
 }
-@media only screen and (min-width: 640px){
-    .hide-on-desktop{
-        display: none !important;
-    }
-    .page{
-        padding-bottom: 0;
-    }
-    .popup-header{
-        padding-top: 1.5rem;
-    }
-    .fab{
-        position: absolute;
-    }
-    .logo-section{
-        padding: 2rem 3rem 0 3rem;
-        margin: 0.5rem 0;
-    }
-    sm-popup{
-        --width: 24rem;
-        --min-width: 24rem;
-        --border-radius: 0.5rem;
-    }
-    #landing{
-        align-items: center;
-        gap: 4vw;
-        grid-template-columns: 1fr 1fr;
-        padding: 0 4vw;
-    }
-    #sign_in_page{
-        place-content: center;
-    }
-    #sign_in{
-        width: 24rem;
-    }
-    .frame{
-        justify-content: center;
-    }
-    #main_navbar{
-        position: relative;
-        width: auto;
-        padding-bottom: 0.5rem;
-        background: rgba(var(--text-color), 0.06);
-        .logo-section{
-            display: flex;
-            justify-content: center;
-            margin: 1.5rem 0 2rem 0;
-            .main-logo{
-                margin: 0;
-            }
-        }
-        .navbar-item{
-            margin: 0 0.5rem;
-            border-radius: 0.8rem;
-            .icon{
-                margin-right: 0;
-            }
-        }
-        .label{
-            display: none;
-        }
-    }
-    #add_contact_popup{
-        --min-width: 24rem;
-    }
-    #compose_mail_popup,
-    #reply_mail_popup{
-        --min-width: 36rem;
-    }
-    #main_page{
-        grid-template-columns: auto 1fr;
-    }
-    #emoji_picker{
-        max-height: 18rem;
-    }
-    #chat{
-        .message{
-            width: auto;
-            align-self: flex-start;
-            max-width: 55ch;
-        }
-    }
-    #chat_page, #mail_page{
-        grid-template-columns: 20rem 1fr;
-    }
-    #settings_page{
-        display: grid;
-        height: 100vh;
-        grid-template-columns: 14rem 1fr;
-        sm-button{
-            width: max-content;
-        }
-        .active{
-            background: rgba(var(--text-color), 0.1);
-        }
-        .panel > *:first-of-type{
-            margin-top: 0.5rem;
-        }
-    }
-    .contact.active,
-    .mail-card.active{
-        background: rgba(var(--text-color), 0.06);
-    }
-    .card{
-        display: inline-flex;
-        width: auto;
-    }
+@media (hover: none) {
+  .contact-preview,
+  .contact,
+  .icon,
+  .option {
+    -webkit-tap-highlight-color: transparent;
+  }
+  .contact .menu {
+    display: none;
+  }
 }
-@media only screen and (max-width: 1280px){
-    .hide-on-medium{
-        display: none !important;
-    }
+@supports (overflow: overlay) {
+  body {
+    overflow: overlay;
+  }
 }
-@media only screen and (min-width: 1080px){
-    #chat{
-        #messages_container{
-            padding: 1rem 4rem;
-        }
-    }
+
+.hide {
+  display: none !important;
 }
-@media only screen and (min-width: 1280px){
-    #landing{
-        gap: 4vw;
-        padding: 0 8vw;
-        .title-font{
-            font-size: 3rem;
-        }
-    }
-    #chat_page, #mail_page{
-        grid-template-columns: 23rem 1fr;
-    }
-    #chat_details_panel{
-        position: relative;
-    }
-    #chat{
-        &.expand-side-panel{
-            grid-template-columns: 1fr 24rem;
-            #messages_container{
-                padding: 1rem;
-            }
-        }
-    }
-    #emoji_picker{
-        --num-columns: 16;
-    }
-    .contact.active,
-    .mail-card.active{
-        background: rgba(var(--text-color), 0.06);
-    }
-    .card{
-        display: inline-flex;
-        width: auto;
-    }
-}
-@media (hover: hover){
-    ::-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);
-        }
-    }
-    .navbar-item:hover,
-    .contact:hover,
-    .emoji:hover,
-    .option:hover{
-        cursor: pointer;
-        background: rgba(var(--text-color), 0.06);
-    }
-    .contact{
-        .menu{
-            opacity: 0;
-            transition: opacity 0.3s;
-        }
-    }
-    .contact:hover{
-        .menu{
-            opacity: 1;
-        }
-    }
-}
-@media (hover: none){
-    .contact-preview,
-    .contact,
-    .icon,
-    .option{
-        -webkit-tap-highlight-color: transparent;
-    }
-    .contact .menu{
-        display: none;
-    }
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index 40423af..b180153 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
             adminID: "FMRsefPydWznGWneLqi4ABeQAJeFvtS3aQ"
         }
     </script>
+    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
     <script src="scripts/lib.js"></script>
     <script src="scripts/floCrypto.js"></script>
     <script src="scripts/floBlockchainAPI.js"></script>
@@ -22,21 +23,14 @@
     <script src="scripts/messenger.js"></script>
     <script id="onLoadStartUp">
         function onLoadStartUp() {
-
-            document.body.classList.remove('hide-completely')
+            showPage('loading')
+            floDapps.setAppObjectStores({ userSettings: {} })
+            document.body.classList.remove('hide')
             isPinSet = false;
 
-            floDapps.setCustomPrivKeyInput(signIn)
-            showPage('loading_page')
+            floDapps.setCustomPrivKeyInput(getSignedIn)
             getRef('emoji_picker').shadowRoot.append(style);
 
-            //clear Rendered Elements
-            let elementsToReset = ['inbox_mail_container', 'sent_mail_container', 'contacts_container', 'chat_container', 'messages_container',
-                'receiver_name', 'mail_contact_list'
-            ]
-            //, "backup_info"
-            elementsToReset.forEach(e => clearElement(getRef(e)))
-
             chatMutationObserver.observe(getRef('messages_container'), {
                 childList: true,
                 subtree: true
@@ -44,11 +38,7 @@
             //invoke the startup functions
             floDapps.launchStartUp().then(result => {
                 console.log(result)
-                // if (!isPinSet) {
-                //     showFrame(2)
-                // }
-
-                getRef("greet_tag").textContent = myFloID
+                getRef("greet_tag").value = myFloID
 
                 getRef('accent_color_selector').colors = selectedColors
 
@@ -62,7 +52,7 @@
 
                 //load messages from IDB and render them
                 console.log(`Loading Data! Please Wait...`)
-                //Check for availble bg image
+                //Check for available bg image
                 setBgImage();
                 //Set UI render functions
                 messenger.renderUI.chats = renderChatList;
@@ -73,7 +63,7 @@
                 //init messenger
                 messenger.init().then(result => {
                     console.log(result);
-                    loadPage();
+                    showPage(window.location.hash, { firstLoad: true })
                 }).catch(error => notify(error, "error"))
             }).catch(error => notify(error, "error"))
         }
@@ -85,41 +75,48 @@
     <link rel="stylesheet" href="css/style.css">
 </head>
 
-<body data-theme="dark" onload="onLoadStartUp()" class="hide-completely">
-    <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">
-    </audio>
+<body data-theme="dark" onload="onLoadStartUp()" class="hide">
+    <sm-notifications id="notification_drawer"></sm-notifications>
     <sm-popup id="confirmation_popup">
         <h4 id="confirm_title"></h4>
         <p id="confirm_message"></p>
         <div class="flex align-center">
             <sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button>
-            <sm-button variant="no-outline" class="submit-btn">OK</button>
+            <sm-button variant="no-outline" class="submit-btn">OK</sm-button>
         </div>
     </sm-popup>
     <sm-popup id="prompt_popup">
         <h4 id="prompt_title"></h4>
         <p id="prompt_message"></p>
-        <sm-input id="prompt_input"></sm-input>
-        <div class="flex align-center">
-            <sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button>
-            <sm-button variant="no-outline" class="submit-btn" type="submit">OK</button>
-        </div>
+        <sm-form>
+            <sm-input id="prompt_input"></sm-input>
+            <div class="flex align-center">
+                <sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button>
+                <sm-button variant="no-outline" class="submit-btn" type="submit">OK</sm-button>
+            </div>
+        </sm-form>
     </sm-popup>
-    <sm-notifications id="notification_drawer"></sm-notifications>
-    <div id="landing_page" class="grid page hide-completely">
-        <header class="logo-section align-center">
-            <svg class="main-logo" viewBox="0 0 27.25 32">
-                <title>RanchiMall</title>
-                <path
-                    d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
-            </svg>
-            <h4>
-                RanchiMall
-            </h4>
+    <div id="secondary_pages" class="page hide">
+        <header class="flex align-center gap-1">
+            <div class="flex align-center flex-1">
+                <svg class="icon flo-icon" width="64" height="64" viewBox="0 0 64 64" fill="none"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <mask id="path-1-outside-1_16_6" maskUnits="userSpaceOnUse" x="3" y="3" width="58" height="58">
+                        <rect fill="white" x="3" y="3" width="58" height="58" />
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                            d="M31.946 43.6019C28.8545 47.1308 28.7789 51.9719 31.9811 55.1957C35.0078 52.2797 35.0105 46.8446 31.946 43.6019ZM31.9487 10.6835C24.6452 19.1291 24.9206 29.1137 31.9433 37.4108C39.0929 28.9436 39.1118 19.0076 31.9487 10.6808V10.6835ZM37.1111 35.051C43.1861 28.841 50.5976 27.4208 59 28.7654C56.2919 34.9754 52.4714 39.9353 45.7214 42.53C47.2118 41.3609 48.5699 40.4051 49.7984 39.3089C51.8504 37.481 53.303 35.267 54.0293 32.6075C54.2588 31.7678 53.9618 31.5302 53.1896 31.406C50.3627 30.9524 47.7086 31.5464 45.1733 32.702C40.9073 34.646 37.4324 37.6403 34.1735 40.8938C34.1168 40.9532 34.0925 41.0396 33.9899 41.2259C40.3754 41.4689 45.2381 44.0177 48.119 49.9064C44.3768 50.738 40.9532 50.5625 37.778 48.5213C40.1702 49.2557 42.557 49.7903 45.176 48.5483C44.852 48.0083 44.663 47.3765 44.231 47.0228C43.0511 46.0589 41.8415 45.0842 40.505 44.3498C38.4395 43.2212 36.131 42.692 33.5768 42.1682C37.0247 48.2081 36.1607 53.6918 31.946 59C29.9858 56.5295 28.6142 53.9456 28.2389 50.8946C27.8609 47.8328 28.7222 45.0518 30.1991 42.3896C26.9321 41.8658 19.8824 45.6485 18.7916 48.5645C21.3215 49.8443 23.7893 49.2611 26.33 48.3161C24.5048 50.1953 19.2425 50.9648 15.8108 49.8335C18.6593 44.0285 23.4977 41.4716 30.0263 41.2286C29.5457 40.7426 29.1893 40.3673 28.8167 40.0082C26.1005 37.3892 23.2142 34.9862 19.823 33.2366C17.0501 31.8056 14.1422 30.9092 10.9481 31.3871C10.5701 31.4438 10.1948 31.5356 9.6656 31.6436C10.6376 36.6386 13.9856 39.7355 18.1274 42.3464C13.775 41.8199 6.431 34.214 5 28.7546C13.397 27.3938 20.849 28.8842 26.897 35.2319C21.8939 24.089 24.5561 14.2259 31.946 5C39.2765 14.153 41.9657 23.9459 37.1111 35.051" />
+                    </mask>
+                    <path fill-rule="evenodd" clip-rule="evenodd"
+                        d="M31.946 43.6019C28.8545 47.1308 28.7789 51.9719 31.9811 55.1957C35.0078 52.2797 35.0105 46.8446 31.946 43.6019ZM31.9487 10.6835C24.6452 19.1291 24.9206 29.1137 31.9433 37.4108C39.0929 28.9436 39.1118 19.0076 31.9487 10.6808V10.6835ZM37.1111 35.051C43.1861 28.841 50.5976 27.4208 59 28.7654C56.2919 34.9754 52.4714 39.9353 45.7214 42.53C47.2118 41.3609 48.5699 40.4051 49.7984 39.3089C51.8504 37.481 53.303 35.267 54.0293 32.6075C54.2588 31.7678 53.9618 31.5302 53.1896 31.406C50.3627 30.9524 47.7086 31.5464 45.1733 32.702C40.9073 34.646 37.4324 37.6403 34.1735 40.8938C34.1168 40.9532 34.0925 41.0396 33.9899 41.2259C40.3754 41.4689 45.2381 44.0177 48.119 49.9064C44.3768 50.738 40.9532 50.5625 37.778 48.5213C40.1702 49.2557 42.557 49.7903 45.176 48.5483C44.852 48.0083 44.663 47.3765 44.231 47.0228C43.0511 46.0589 41.8415 45.0842 40.505 44.3498C38.4395 43.2212 36.131 42.692 33.5768 42.1682C37.0247 48.2081 36.1607 53.6918 31.946 59C29.9858 56.5295 28.6142 53.9456 28.2389 50.8946C27.8609 47.8328 28.7222 45.0518 30.1991 42.3896C26.9321 41.8658 19.8824 45.6485 18.7916 48.5645C21.3215 49.8443 23.7893 49.2611 26.33 48.3161C24.5048 50.1953 19.2425 50.9648 15.8108 49.8335C18.6593 44.0285 23.4977 41.4716 30.0263 41.2286C29.5457 40.7426 29.1893 40.3673 28.8167 40.0082C26.1005 37.3892 23.2142 34.9862 19.823 33.2366C17.0501 31.8056 14.1422 30.9092 10.9481 31.3871C10.5701 31.4438 10.1948 31.5356 9.6656 31.6436C10.6376 36.6386 13.9856 39.7355 18.1274 42.3464C13.775 41.8199 6.431 34.214 5 28.7546C13.397 27.3938 20.849 28.8842 26.897 35.2319C21.8939 24.089 24.5561 14.2259 31.946 5C39.2765 14.153 41.9657 23.9459 37.1111 35.051" />
+                    <path
+                        d="M31.946 43.6019L32.6728 42.915L31.918 42.1163L31.1938 42.943L31.946 43.6019ZM31.9811 55.1957L31.2716 55.9004L31.9657 56.5992L32.6749 55.9159L31.9811 55.1957ZM31.9487 10.6835L32.7051 11.3376L32.9487 11.0559V10.6835H31.9487ZM31.9433 37.4108L31.18 38.0569L31.9442 38.9597L32.7074 38.056L31.9433 37.4108ZM31.9487 10.6808L32.7068 10.0287L30.9487 7.98495V10.6808H31.9487ZM59 28.7654L59.9166 29.1651L60.4326 27.9819L59.158 27.778L59 28.7654ZM45.7214 42.53L45.1042 41.7432L46.0802 43.4634L45.7214 42.53ZM49.7984 39.3089L49.1332 38.5622L49.1326 38.5628L49.7984 39.3089ZM54.0293 32.6075L53.0647 32.3439L53.0646 32.3441L54.0293 32.6075ZM53.1896 31.406L53.3484 30.4187L53.348 30.4186L53.1896 31.406ZM45.1733 32.702L45.588 33.612L45.5881 33.6119L45.1733 32.702ZM34.1735 40.8938L33.467 40.1861L33.4585 40.1946L33.4501 40.2033L34.1735 40.8938ZM33.9899 41.2259L33.114 40.7435L32.3319 42.1635L33.9519 42.2252L33.9899 41.2259ZM48.119 49.9064L48.3359 50.8826L49.5751 50.6072L49.0173 49.4669L48.119 49.9064ZM37.778 48.5213L38.0715 47.5653L37.2372 49.3625L37.778 48.5213ZM45.176 48.5483L45.6045 49.4518L46.6008 48.9794L46.0335 48.0338L45.176 48.5483ZM44.231 47.0228L44.8645 46.2491L44.8637 46.2484L44.231 47.0228ZM40.505 44.3498L40.9866 43.4734L40.9845 43.4723L40.505 44.3498ZM33.5768 42.1682L33.7777 41.1886L31.6127 40.7446L32.7083 42.664L33.5768 42.1682ZM31.946 59L31.1626 59.6216L31.9457 60.6085L32.7292 59.6218L31.946 59ZM28.2389 50.8946L29.2314 50.7725L29.2314 50.7721L28.2389 50.8946ZM30.1991 42.3896L31.0736 42.8747L31.7652 41.6279L30.3574 41.4022L30.1991 42.3896ZM18.7916 48.5645L17.855 48.2141L17.5413 49.0527L18.3402 49.4568L18.7916 48.5645ZM26.33 48.3161L27.0473 49.0128L25.9814 47.3788L26.33 48.3161ZM15.8108 49.8335L14.9131 49.393L14.4073 50.4237L15.4977 50.7832L15.8108 49.8335ZM30.0263 41.2286L30.0635 42.2279L32.3372 42.1433L30.7373 40.5255L30.0263 41.2286ZM28.8167 40.0082L28.1226 40.7281L28.1228 40.7282L28.8167 40.0082ZM19.823 33.2366L19.3644 34.1252L19.3645 34.1253L19.823 33.2366ZM10.9481 31.3871L10.8001 30.3981L10.7998 30.3982L10.9481 31.3871ZM9.6656 31.6436L9.46564 30.6638L8.49474 30.8619L8.68401 31.8346L9.6656 31.6436ZM18.1274 42.3464L18.0073 43.3392L18.6607 41.5005L18.1274 42.3464ZM5 28.7546L4.84003 27.7675L3.75363 27.9435L4.03268 29.0082L5 28.7546ZM26.897 35.2319L26.173 35.9217L27.8093 34.8223L26.897 35.2319ZM31.946 5L32.7265 4.37488L31.9461 3.40036L31.1655 4.37483L31.946 5ZM31.1938 42.943C27.7974 46.8199 27.6566 52.261 31.2716 55.9004L32.6906 54.491C29.9012 51.6828 29.9116 47.4417 32.6982 44.2609L31.1938 42.943ZM32.6749 55.9159C36.1304 52.5867 36.081 46.5214 32.6728 42.915L31.2192 44.2888C33.94 47.1678 33.8852 51.9727 31.2873 54.4755L32.6749 55.9159ZM31.1923 10.0294C27.4048 14.4092 25.5379 19.2455 25.5737 24.1102C25.6095 28.971 27.5438 33.7608 31.18 38.0569L32.7066 36.7647C29.3201 32.7637 27.6054 28.4127 27.5736 24.0955C27.5419 19.7822 29.1891 15.4034 32.7051 11.3376L31.1923 10.0294ZM32.7074 38.056C36.4083 33.6729 38.31 28.8504 38.3133 23.9938C38.3165 19.1359 36.42 14.3451 32.7068 10.0287L31.1906 11.3329C34.6405 15.3433 36.3161 19.6839 36.3133 23.9925C36.3104 28.3024 34.6279 32.6815 31.1792 36.7656L32.7074 38.056ZM30.9487 10.6808V10.6835H32.9487V10.6808H30.9487ZM37.8259 35.7503C43.6131 29.8345 50.6632 28.444 58.842 29.7528L59.158 27.778C50.532 26.3976 42.7591 27.8475 36.3963 34.3517L37.8259 35.7503ZM58.0834 28.3657C55.4402 34.4268 51.7791 39.1301 45.3626 41.5966L46.0802 43.4634C53.1637 40.7405 57.1436 35.524 59.9166 29.1651L58.0834 28.3657ZM46.3386 43.3168C47.7733 42.1914 49.2057 41.178 50.4642 40.055L49.1326 38.5628C47.9341 39.6322 46.6503 40.5304 45.1042 41.7432L46.3386 43.3168ZM50.4636 40.0556C52.6466 38.111 54.2121 35.7338 54.994 32.871L53.0646 32.3441C52.3939 34.8002 51.0542 36.851 49.1332 38.5622L50.4636 40.0556ZM54.9939 32.8711C55.1262 32.3872 55.2248 31.6946 54.7698 31.1186C54.3643 30.6053 53.7257 30.4794 53.3484 30.4187L53.0308 32.3933C53.1086 32.4058 53.17 32.4181 53.2184 32.43C53.2671 32.442 53.2955 32.4518 53.3091 32.4572C53.3227 32.4626 53.3139 32.4606 53.2926 32.4461C53.2699 32.4307 53.2353 32.4025 53.2004 32.3583C53.1832 32.3366 53.1677 32.3132 53.1543 32.2886C53.1409 32.264 53.1307 32.2402 53.1231 32.2182C53.1079 32.1742 53.1053 32.144 53.1049 32.1366C53.1046 32.1302 53.1059 32.1427 53.1007 32.1797C53.0955 32.2165 53.0849 32.27 53.0647 32.3439L54.9939 32.8711ZM53.348 30.4186C50.274 29.9254 47.4176 30.5801 44.7585 31.7921L45.5881 33.6119C47.9996 32.5127 50.4514 31.9794 53.0312 32.3934L53.348 30.4186ZM44.7586 31.792C40.3293 33.8104 36.7535 36.9051 33.467 40.1861L34.88 41.6015C38.1113 38.3755 41.4853 35.4816 45.588 33.612L44.7586 31.792ZM33.4501 40.2033C33.3063 40.354 33.2291 40.5156 33.2033 40.5674C33.1672 40.64 33.1517 40.6749 33.114 40.7435L34.8658 41.7083C34.9307 41.5906 34.9786 41.4891 34.9945 41.4572C35.0049 41.4363 35.0004 41.4467 34.9882 41.4667C34.9731 41.4914 34.9435 41.5355 34.8969 41.5843L33.4501 40.2033ZM33.9519 42.2252C37.0233 42.3421 39.6629 43.0109 41.8597 44.3098C44.0485 45.6039 45.857 47.5582 47.2207 50.3459L49.0173 49.4669C47.5001 46.3659 45.4368 44.1014 42.8776 42.5882C40.3265 41.0798 37.342 40.3527 34.0279 40.2266L33.9519 42.2252ZM47.9021 48.9302C44.3241 49.7253 41.1983 49.5313 38.3188 47.6801L37.2372 49.3625C40.7081 51.5937 44.4295 51.7507 48.3359 50.8826L47.9021 48.9302ZM37.4845 49.4773C39.9089 50.2215 42.6205 50.8669 45.6045 49.4518L44.7475 47.6448C42.4935 48.7137 40.4315 48.2899 38.0715 47.5653L37.4845 49.4773ZM46.0335 48.0338C45.8849 47.7862 45.8212 47.6158 45.6292 47.2504C45.4736 46.9544 45.2423 46.5584 44.8645 46.2491L43.5975 47.7965C43.6517 47.8409 43.7309 47.9377 43.8588 48.181C43.9503 48.3549 44.1431 48.7704 44.3185 49.0628L46.0335 48.0338ZM44.8637 46.2484C43.6913 45.2906 42.4149 44.2582 40.9866 43.4734L40.0234 45.2262C41.2681 45.9102 42.4109 46.8272 43.5983 47.7972L44.8637 46.2484ZM40.9845 43.4723C38.7711 42.2628 36.3236 41.7107 33.7777 41.1886L33.3759 43.1478C35.9384 43.6733 38.1079 44.1796 40.0255 45.2273L40.9845 43.4723ZM32.7083 42.664C34.346 45.5328 34.9255 48.203 34.6411 50.7474C34.3555 53.3015 33.1882 55.8274 31.1628 58.3782L32.7292 59.6218C34.9185 56.8644 36.2905 53.9944 36.6287 50.9696C36.9679 47.9351 36.2555 44.8435 34.4453 41.6724L32.7083 42.664ZM32.7294 58.3784C30.8397 55.9968 29.577 53.5818 29.2314 50.7725L27.2464 51.0167C27.6514 54.3094 29.1319 57.0622 31.1626 59.6216L32.7294 58.3784ZM29.2314 50.7721C28.8877 47.9881 29.6602 45.4224 31.0736 42.8747L29.3247 41.9045C27.7842 44.6812 26.8341 47.6775 27.2464 51.0171L29.2314 50.7721ZM30.3574 41.4022C29.3303 41.2375 28.1125 41.4187 26.9159 41.7622C25.6987 42.1117 24.4105 42.6564 23.2045 43.307C21.999 43.9574 20.8488 44.728 19.9166 45.543C19.005 46.3399 18.2137 47.2553 17.855 48.2141L19.7282 48.9149C19.9149 48.4157 20.4139 47.7647 21.233 47.0487C22.0314 46.3507 23.0524 45.6616 24.1541 45.0672C25.2552 44.4732 26.4102 43.9882 27.4678 43.6846C28.5458 43.3751 29.4344 43.2798 30.0408 43.377L30.3574 41.4022ZM18.3402 49.4568C21.2702 50.939 24.0958 50.214 26.6786 49.2534L25.9814 47.3788C23.4828 48.3082 21.3728 48.7496 19.243 47.6722L18.3402 49.4568ZM25.6127 47.6194C24.9334 48.3187 23.4333 48.9382 21.5294 49.2141C19.6667 49.484 17.6562 49.3889 16.1239 48.8838L15.4977 50.7832C17.3971 51.4094 19.7336 51.4952 21.8162 51.1934C23.8578 50.8976 25.9014 50.1927 27.0473 49.0128L25.6127 47.6194ZM16.7085 50.274C18.0554 47.5292 19.8486 45.5942 22.044 44.3081C24.2482 43.0169 26.918 42.345 30.0635 42.2279L29.9891 40.2293C26.606 40.3552 23.5923 41.0832 21.0331 42.5824C18.4649 44.0869 16.4147 46.3328 14.9131 49.393L16.7085 50.274ZM30.7373 40.5255C30.2757 40.0586 29.8942 39.6578 29.5106 39.2882L28.1228 40.7282C28.4844 41.0768 28.8157 41.4266 29.3153 41.9317L30.7373 40.5255ZM29.5108 39.2883C26.7637 36.6396 23.7967 34.1615 20.2815 32.3479L19.3645 34.1253C22.6317 35.8109 25.4373 38.1388 28.1226 40.7281L29.5108 39.2883ZM20.2816 32.348C17.4111 30.8666 14.2829 29.877 10.8001 30.3981L11.0961 32.3761C14.0015 31.9414 16.6891 32.7446 19.3644 34.1252L20.2816 32.348ZM10.7998 30.3982C10.388 30.4599 9.94468 30.566 9.46564 30.6638L9.86556 32.6234C10.4449 32.5052 10.7522 32.4277 11.0964 32.376L10.7998 30.3982ZM8.68401 31.8346C9.73479 37.2345 13.3673 40.5279 17.5941 43.1923L18.6607 41.5005C14.6039 38.9431 11.5404 36.0427 10.6472 31.4526L8.68401 31.8346ZM18.2475 41.3536C17.3819 41.2489 16.2594 40.7693 14.9918 39.9335C13.742 39.1093 12.427 37.9891 11.1875 36.7057C8.68437 34.1137 6.62095 30.9947 5.96732 28.5011L4.03268 29.0082C4.81005 31.9739 7.13413 35.3875 9.74885 38.095C11.0683 39.4613 12.4947 40.6825 13.8908 41.6031C15.2691 42.512 16.6967 43.1806 18.0073 43.3392L18.2475 41.3536ZM5.15997 29.7417C13.3246 28.4186 20.4108 29.874 26.173 35.9217L27.621 34.5421C21.2872 27.8944 13.4694 26.369 4.84003 27.7675L5.15997 29.7417ZM27.8093 34.8223C25.3851 29.4232 24.8341 24.3801 25.7561 19.5859C26.6809 14.7778 29.1009 10.1516 32.7265 5.62517L31.1655 4.37483C27.4012 9.07433 24.7952 13.9927 23.7921 19.2082C22.7863 24.4378 23.4058 29.8977 25.9847 35.6415L27.8093 34.8223ZM31.1655 5.62512C34.7619 10.1157 37.1747 14.7077 38.1168 19.4869C39.0562 24.2523 38.5469 29.2701 36.1948 34.6504L38.0274 35.4515C40.5299 29.7268 41.1033 24.2956 40.0791 19.1001C39.0576 13.9183 36.4606 9.03731 32.7265 4.37488L31.1655 5.62512Z"
+                        mask="url(#path-1-outside-1_16_6)" />
+                </svg>
+                <h4>FLO Messenger</h4>
+            </div>
+            <theme-toggle></theme-toggle>
         </header>
-        <div id="landing">
+        <div id="landing" class="grid inner-page hide">
             <div class="left">
                 <h4>
                     FLO Messenger
@@ -127,332 +124,122 @@
                 <h1 class="title-font">
                     Truly Secure, Private and Reliable.
                 </h1>
-                <p>A messenger made with <strong>Blockchain</strong> and <strong>Open Source</strong> technologies. Take
-                    back control of your data that belongs to you and you alone.</p>
+                <p>A messenger made with Blockchain and Open Source technologies. Take back control of your data that
+                    belongs to you and you alone.</p>
                 <div class="flex">
-                    <sm-button variant="primary" onclick="showPage('sign_in_page')">Sign In</sm-button>
-                    <sm-button onclick="initOnBoarding()">Get started</sm-button>
+                    <a href="#/sign_in" class="button button--primary">Sign In</a>
+                    <a href="#/sign_up" class="button">Get started</a>
                 </div>
             </div>
             <div id="landing_illustration" class="right">
                 <img src="assets/message-background.svg" alt="">
             </div>
         </div>
-    </div>
-    <section id="sign_in_page" class="grid page hide-completely">
-        <div id="sign_in" class="flex direction-column">
-            <h2>Sign in</h2>
-            <p>Enter your <span id="type_of_key">FLO private key</span> to continue.</p>
-            <form class="flex direction-column" action="" onsubmit="return false">
-                <pin-input id="get_pin" class="hide-completely"></pin-input>
-                <sm-input id="private_key_input_field" type="password" placeholder="FLO private key" privateKey animate>
-                </sm-input>
-                <sm-button id="sign_in_button" width="cover" variant="primary" disable>continue</sm-button>
-            </form>
-            <sm-button id="remove_account" class="hide-completely" onclick="signOut()">Remove Account</sm-button>
-        </div>
-    </section>
-    <div id="on_boarding_page" class="page grid hide-completely">
-        <div id="frame_1" class="frame">
-            <h2 class="h2">Get started</h2>
-            <strong class="warning">Don't forget to store them securely. <br> Once lost private key can't be recovered
-                along with your data!</strong>
-            <sm-button id="generate_flo_id" onclick="generateId()" variant="primary">Get your FLO credentials
-            </sm-button>
-            <section id="credentials_section" class="hide-completely">
-                <h5>FLO ID (User ID)</h5>
-                <div class="copy-row">
-                    <h4 id="generated_id" class="copy"></h4>
-                    <svg class="icon" onclick="copyToClipboard(this, 'Copied FLO ID')" viewBox="0 0 64 64">
-                        <title>Copy</title>
-                        <rect x="16" y="16" width="48" height="48" rx="6" />
-                        <path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
-                    </svg>
-                </div>
-                <h5>Private key (Password)</h5>
-                <div class="copy-row">
-                    <h4 id="generated_key" class="copy"></h4>
-                    <svg class="icon" onclick="copyToClipboard(this, 'Copied private key')" viewBox="0 0 64 64">
-                        <title>Copy</title>
-                        <rect x="16" y="16" width="48" height="48" rx="6" />
-                        <path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
-                    </svg>
-                </div>
+        <article id="sign_in" class="inner-page page-layout hide">
+            <section>
+                <h1 class="h2">Sign In</h1>
+                <p>Welcome back, glad to see you again</p>
+                <sm-form id="sign_in_form">
+                    <sm-input id="private_key_field" type="password" placeholder="FLO private key"
+                        error-text="Private key is invalid" data-private-key required></sm-input>
+                    <sm-button id="sign_in_button" variant="primary" disabled>Sign In</sm-button>
+                </sm-form>
+                <p>
+                    New here? <a href="#/sign_up">get your FLO login credentials</a>
+                </p>
             </section>
-            <sm-button id="sign_in_with" variant="primary" class="hide-completely">Next</sm-button>
-        </div>
-        <div id="frame_2" class="frame">
-            <h2 class="h2">Set pin</h2>
-            <p>*This pin is saved on this browser only, it won't work anywhere else.</p>
-            <form class="flex direction-column" onsubmit="return false">
-                <pin-input id="first_pin"></pin-input>
-                <pin-input id="confirm_pin"></pin-input>
-                <p id="pin_error" class="danger hide-completely">Pin doesn't match</p>
-                <sm-button variant="primary" id="set_pin_button" onclick="setPin()" disable>Set pin</sm-button>
-            </form>
-        </div>
-    </div>
-    <div id="loading_page" class="page hide-completely">
-        <svg class="page__loader" viewBox="0 0 512 512">
-            <defs>
-                <style>
-                    .a {
-                        fill: #fff;
-                    }
-
-                    .b {
-                        fill: #ccc;
-                    }
-
-                    .c {
-                        fill: none;
-                    }
-
-                    .c,
-                    .d,
-                    .e {
-                        stroke: #000;
-                        stroke-miterlimit: 10;
-                        stroke-width: 20;
-                    }
-
-                    .d {
-                        fill: #ed1c24;
-                    }
-
-                    .e {
-                        fill: #d30d41;
-                    }
-                </style>
-            </defs>
-            <title>mascot</title>
-            <path class="a"
-                d="M506,367.94v51.19a52,52,0,0,1-52,52H130.4a52,52,0,0,1-52-52V183.69L9.58,40.88,454,43.24a52,52,0,0,1,52,52.05V225.38" />
-            <path class="b"
-                d="M506,98.69V431.58c.57,56.06-149.95,44-149.95,44a52,52,0,0,0,52-52V44.86L454,46.65A52,52,0,0,1,506,98.69Z" />
-            <line class="c" x1="506" y1="273.75" x2="506" y2="327.21" />
-            <path class="c"
-                d="M506,367.94v51.19a52,52,0,0,1-52,52H130.4a52,52,0,0,1-52-52V183.69L9.58,40.88,454,43.24a52,52,0,0,1,52,52.05V225.38" />
-            <path class="d" d="M361.83,340a69.63,69.63,0,1,1-139.26,0C222.57,301.5,361.83,301.5,361.83,340Z" />
-            <path class="c" d="M152,242.43a34.32,34.32,0,0,1,64.68.2" />
-            <path class="c" d="M367.79,242.43a34.32,34.32,0,0,1,64.68.2" />
-            <path class="e" d="M325,314.13c21,4.22,36.85,12.82,36.85,25.8a69.7,69.7,0,0,1-41.09,63.58" />
-        </svg>
-        <div class="shadow"></div>
-        <h4 class="page__tag-line">Getting everything ready, Hang on.</h4>
-    </div>
-    <sm-popup id="add_contact_popup">
-        <header class="popup-header" slot="header">
-            <svg class="icon" viewBox="0 0 64 64" onclick="this.closest('sm-popup').hide()">
-                <title>Close</title>
-                <line x1="64" y1="0" x2="0" y2="64" />
-                <line x1="64" y1="64" x2="0" y2="0" />
-            </svg>
-            <h4>Add contact</h4>
-            <sm-button id="add_contact_button" variant="primary" disable>Add</sm-button>
-        </header>
-        <sm-input id="add_contact_floID" floId placeholder="FLO address" animate required></sm-input>
-        <sm-input id="add_contact_name" placeholder="Name" animate required></sm-input>
-    </sm-popup>
-    <sm-popup id="compose_mail_popup">
-        <header class="popup-header" slot="header">
-            <svg class="icon" viewBox="0 0 64 64" onclick="this.closest('sm-popup').hide()">
-                <title>Close</title>
-                <line x1="64" y1="0" x2="0" y2="64" />
-                <line x1="64" y1="64" x2="0" y2="0" />
-            </svg>
-            <h4>Compose Mail</h4>
-            <sm-button id="send_mail_button" variant="primary" disable>Send</sm-button>
-        </header>
-        <div id="auto_complete_contact" class="flex direction-column">
-            <sm-input id="send_mail_to" placeholder="To" animate required></sm-input>
-            <div id="mail_contact_list" class="hide-completely contact-list"></div>
-        </div>
-        <sm-input id="subject_of_mail" placeholder="Subject" animate></sm-input>
-        <textarea id="mail_content" placeholder="Type a mail" name="" id="" rows="10" required></textarea>
-    </sm-popup>
-    <sm-popup id="reply_mail_popup">
-        <header class="popup-header" slot="header">
-            <svg class="icon" viewBox="0 0 64 64" onclick="this.closest('sm-popup').hide()">
-                <title>Close</title>
-                <line x1="64" y1="0" x2="0" y2="64" />
-                <line x1="64" y1="64" x2="0" y2="0" />
-            </svg>
-            <h4>Reply</h4>
-            <sm-button id="reply_mail_button" variant="primary" disable>Send</sm-button>
-        </header>
-        <sm-input id="subject_of_reply_mail" placeholder="Subject" animate></sm-input>
-        <textarea id="reply_mail_content" placeholder="Type a mail" id="" rows="10" required></textarea>
-    </sm-popup>
-    <!-- Contact popup -->
-    <sm-popup id="contact_details_popup">
-        <header class="popup-header" slot="header">
-            <svg class="icon" onclick="this.closest('sm-popup').hide()" viewBox="0 0 64 64">
-                <title>close</title>
-                <line x1="64" y1="0" x2="0" y2="64" />
-                <line x1="64" y1="64" x2="0" y2="0" />
-            </svg>
-        </header>
-        <div class="flex direction-column align-center">
-            <div id="contact_initial" class="initial flex align-center"></div>
-            <text-field id="contact_name"></text-field>
-        </div>
-        <section class="popup-section">
-            <h5>FLO ID</h5>
-            <div class="copy-row grid">
-                <h4 id="contact_flo_id" class="copy"></h4>
-                <svg class="icon" onclick="copyToClipboard(this, 'Copied FLO ID')" viewBox="0 0 64 64">
-                    <title>Copy</title>
-                    <rect x="16" y="16" width="48" height="48" rx="6" />
-                    <path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
-                </svg>
-            </div>
-        </section>
-        <ul id="contact_options">
-            <li id="add_as_contact_option" class="option" onclick="addAsContact()">
-                Add as contact
-            </li>
-            <li id="mark_read_option" class="option" onclick="markAsRead()">
-                Mark as read
-            </li>
-            <li id="mark_unread_option" class="option" onclick="markAsUnread()">
-                Mark as unread
-            </li>
-            <li class="option" onclick="clearChat()">
-                Clear this chat
-            </li>
-            <li id="delete_chat_option" class="option" onclick="deleteChat()">
-                Delete this chat
-            </li>
-        </ul>
-    </sm-popup>
-
-    <!-- all contacts popup -->
-
-    <sm-popup id="contacts_popup">
-        <header class="popup-header" slot="header">
-            <svg class="icon" onclick="this.closest('sm-popup').hide()" viewBox="0 0 64 64">
-                <title>close</title>
-                <line x1="64" y1="0" x2="0" y2="64" />
-                <line x1="64" y1="64" x2="0" y2="0" />
-            </svg>
-            <h4>Select contact to add</h4>
-            <sm-button id="add_members_button" variant="primary" disable>Add</sm-button>
-        </header>
-        <p class="warning">*Contacts that haven't yet replied to you, can't be added to a group. So they won't be
-            visible here.</p>
-        <div id="popup_contacts_container" class="observe-empty-state"></div>
-        <div class="empty-state">
-            <p>You don't have any other contacts to show.</p>
-        </div>
-    </sm-popup>
-
-    <!-- Templates -->
-
-    <template id="mail_card_template">
-        <li class="mail-card interact">
-            <div class="initial flex align-center"></div>
-            <h5 class="sender"></h5>
-            <h5 class="date"></h5>
-            <h4 class="subject text-overflow"></h4>
-            <p class="description"></p>
-        </li>
-    </template>
-
-    <template id="mail_template">
-        <div class="mail">
-            <header class="mail-header flex direction-column">
-                <div class="flex space-between">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon back hide-on-desktop" onclick="goto('mails')"
-                        viewBox="0 0 64 64">
-                        <line x1="1" y1="32" x2="64" y2="32" />
-                        <polyline points="29.64 60.97 0.65 32 29.64 3.03" />
+        </article>
+        <article id="sign_up" class="inner-page page-layout hide">
+            <section class="grid">
+                <div id="flo_id_warning" class="grid justify-center gap-0-5">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                        fill="#000000">
+                        <path d="M0 0h24v24H0z" fill="none" />
+                        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
                     </svg>
-                    <h5 class="date justify-right"></h5>
+                    <h3>Keep your keys safe!</h3>
+                    <strong>Don't share with anyone. Once lost private key can't be
+                        recovered.</strong>
                 </div>
-                <div class="mail-details flex direction-column">
-                    <h4 class="sender-name"></h4>
-                    <h5 class="flo-id text-overflow"></h5>
+                <div class="grid gap-1-5 card">
+                    <div class="grid gap-0-5">
+                        <h5>FLO ID</h5>
+                        <sm-copy id="generated_flo_id"></sm-copy>
+                    </div>
+                    <div class="grid gap-0-5">
+                        <h5>Private key</h5>
+                        <sm-copy id="generated_private_key"></sm-copy>
+                    </div>
                 </div>
-            </header>
-            <h4 class="mail-subject"></h4>
-            <p class="mail-content"></p>
-        </div>
-    </template>
+                <sm-button id="sign_up_button" variant="primary">Sign in with these credentials</sm-button>
+                <p style="margin-top: 2rem;">You can use these FLO credentials with FLO Messenger other RanchiMall apps
+                    too. </p>
+            </section>
+        </article>
+        <div id="loading" class="inner-page hide">
+            <svg class="page__loader" viewBox="0 0 512 512">
+                <defs>
+                    <style>
+                        .a {
+                            fill: #fff;
+                        }
 
-    <template id="contact_template">
-        <div class="contact">
-            <div class="initial flex align-center"></div>
-            <h4 class="name"></h4>
-        </div>
-    </template>
+                        .b {
+                            fill: #ccc;
+                        }
 
-    <template id="message_template">
-        <div class="message">
-            <p class="message-body"></p>
-            <time class="time"></time>
+                        .c {
+                            fill: none;
+                        }
+
+                        .c,
+                        .d,
+                        .e {
+                            stroke: #000;
+                            stroke-miterlimit: 10;
+                            stroke-width: 20;
+                        }
+
+                        .d {
+                            fill: #ed1c24;
+                        }
+
+                        .e {
+                            fill: #d30d41;
+                        }
+                    </style>
+                </defs>
+                <title>mascot</title>
+                <path class="a"
+                    d="M506,367.94v51.19a52,52,0,0,1-52,52H130.4a52,52,0,0,1-52-52V183.69L9.58,40.88,454,43.24a52,52,0,0,1,52,52.05V225.38" />
+                <path class="b"
+                    d="M506,98.69V431.58c.57,56.06-149.95,44-149.95,44a52,52,0,0,0,52-52V44.86L454,46.65A52,52,0,0,1,506,98.69Z" />
+                <line class="c" x1="506" y1="273.75" x2="506" y2="327.21" />
+                <path class="c"
+                    d="M506,367.94v51.19a52,52,0,0,1-52,52H130.4a52,52,0,0,1-52-52V183.69L9.58,40.88,454,43.24a52,52,0,0,1,52,52.05V225.38" />
+                <path class="d" d="M361.83,340a69.63,69.63,0,1,1-139.26,0C222.57,301.5,361.83,301.5,361.83,340Z" />
+                <path class="c" d="M152,242.43a34.32,34.32,0,0,1,64.68.2" />
+                <path class="c" d="M367.79,242.43a34.32,34.32,0,0,1,64.68.2" />
+                <path class="e" d="M325,314.13c21,4.22,36.85,12.82,36.85,25.8a69.7,69.7,0,0,1-41.09,63.58" />
+            </svg>
+            <div class="shadow"></div>
+            <h4 class="page__tag-line">Getting everything ready, Hang on.</h4>
         </div>
-    </template>
-    <div id="navbar_backdrop" class="hide" onclick="toggleDrawer()"></div>
-    <main id="main_page" class="page grid hide-completely">
-        <nav id="main_navbar" class="flex">
-            <div class="logo-section" title="RanchiMall FLO Messenger">
-                <svg class="main-logo" viewBox="0 0 27.25 32">
-                    <title>RanchiMall</title>
-                    <path
-                        d="M27.14,30.86c-.74-2.48-3-4.36-8.25-6.94a20,20,0,0,1-4.2-2.49,6,6,0,0,1-1.25-1.67,4,4,0,0,1,0-2.26c.37-1.08.79-1.57,3.89-4.55a11.66,11.66,0,0,0,3.34-4.67,6.54,6.54,0,0,0,.05-2.82C20,3.6,18.58,2,16.16.49c-.89-.56-1.29-.64-1.3-.24a3,3,0,0,1-.3.72l-.3.55L13.42.94C13,.62,12.4.26,12.19.15c-.4-.2-.73-.18-.72.05a9.39,9.39,0,0,1-.61,1.33s-.14,0-.27-.13C8.76.09,8-.27,8,.23A11.73,11.73,0,0,1,6.76,2.6C4.81,5.87,2.83,7.49.77,7.49c-.89,0-.88,0-.61,1,.22.85.33.92,1.09.69A5.29,5.29,0,0,0,3,8.33c.23-.17.45-.29.49-.26a2,2,0,0,1,.22.63A1.31,1.31,0,0,0,4,9.34a5.62,5.62,0,0,0,2.27-.87L7,8l.13.55c.19.74.32.82,1,.65a7.06,7.06,0,0,0,3.46-2.47l.6-.71-.06.64c-.17,1.63-1.3,3.42-3.39,5.42L6.73,14c-3.21,3.06-3,5.59.6,8a46.77,46.77,0,0,0,4.6,2.41c.28.13,1,.52,1.59.87,3.31,2,4.95,3.92,4.95,5.93a2.49,2.49,0,0,0,.07.77h0c.09.09,0,.1.9-.14a2.61,2.61,0,0,0,.83-.32,3.69,3.69,0,0,0-.55-1.83A11.14,11.14,0,0,0,17,26.81a35.7,35.7,0,0,0-5.1-2.91C9.37,22.64,8.38,22,7.52,21.17a3.53,3.53,0,0,1-1.18-2.48c0-1.38.71-2.58,2.5-4.23,2.84-2.6,3.92-3.91,4.67-5.65a3.64,3.64,0,0,0,.42-2A3.37,3.37,0,0,0,13.61,5l-.32-.74.29-.48c.17-.27.37-.63.46-.8l.15-.3.44.64a5.92,5.92,0,0,1,1,2.81,5.86,5.86,0,0,1-.42,1.94c0,.12-.12.3-.15.4a9.49,9.49,0,0,1-.67,1.1,28,28,0,0,1-4,4.29C8.62,15.49,8.05,16.44,8,17.78a3.28,3.28,0,0,0,1.11,2.76c.95,1,2.07,1.74,5.25,3.32,3.64,1.82,5.22,2.9,6.41,4.38A4.78,4.78,0,0,1,21.94,31a3.21,3.21,0,0,0,.14.92,1.06,1.06,0,0,0,.43-.05l.83-.22.46-.12-.06-.46c-.21-1.53-1.62-3.25-3.94-4.8a37.57,37.57,0,0,0-5.22-2.82A13.36,13.36,0,0,1,11,21.19a3.36,3.36,0,0,1-.8-4.19c.41-.85.83-1.31,3.77-4.15,2.39-2.31,3.43-4.13,3.43-6a5.85,5.85,0,0,0-2.08-4.29c-.23-.21-.44-.43-.65-.65A2.5,2.5,0,0,1,15.27.69a10.6,10.6,0,0,1,2.91,2.78A4.16,4.16,0,0,1,19,6.16a4.91,4.91,0,0,1-.87,3c-.71,1.22-1.26,1.82-4.27,4.67a9.47,9.47,0,0,0-2.07,2.6,2.76,2.76,0,0,0-.33,1.54,2.76,2.76,0,0,0,.29,1.47c.57,1.21,2.23,2.55,4.65,3.73a32.41,32.41,0,0,1,5.82,3.24c2.16,1.6,3.2,3.16,3.2,4.8a1.94,1.94,0,0,0,.09.76,4.54,4.54,0,0,0,1.66-.4C27.29,31.42,27.29,31.37,27.14,30.86ZM6.1,7h0a3.77,3.77,0,0,1-1.46.45L4,7.51l.68-.83a25.09,25.09,0,0,0,3-4.82A12,12,0,0,1,8.28.76c.11-.12.77.32,1.53,1l.63.58-.57.84A10.34,10.34,0,0,1,6.1,7Zm5.71-1.78A9.77,9.77,0,0,1,9.24,7.18h0a5.25,5.25,0,0,1-1.17.28l-.58,0,.65-.78a21.29,21.29,0,0,0,2.1-3.12c.22-.41.42-.76.44-.79s.5.43.9,1.24L12,5ZM13.41,3a2.84,2.84,0,0,1-.45.64,11,11,0,0,1-.9-.91l-.84-.9.19-.45c.34-.79.39-.8,1-.31A9.4,9.4,0,0,1,13.8,2.33q-.18.34-.39.69Z" />
-                </svg>
-                <!-- <img src="assets/messenger-favicon_1.png" alt=""> -->
-                <h5 class="label">FLO Messenger</h5>
-            </div>
-            <div class="navbar-item flex badge align-center active" data-notifications="0" id="chat_page_button"
-                data-target="chat_page" title="Chat">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 64 64">
-                    <path d="M21.31,51a6.62,6.62,0,0,0,6.62,6.62H52.1A6.62,6.62,0,0,0,58.72,51V27.74l4.41-7.55H51" />
-                    <path
-                        d="M5.33,37.51V14L.87,6.4H36.44a6.69,6.69,0,0,1,6.68,6.69V37.51a6.69,6.69,0,0,1-6.68,6.69H12A6.69,6.69,0,0,1,5.33,37.51Z" />
-                </svg>
-                <h5 class="label">Chat</h5>
-            </div>
-            <div class="navbar-item flex badge align-center" id="mail_page_button" data-notifications="0"
-                data-target="mail_page" title="Mail">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 64 64">
-                    <rect x="0.5" y="5.72" width="63" height="52.56" rx="5" />
-                    <polyline points="12.25 21.36 32.03 32.03 51.75 21.42" />
-                </svg>
-                <h5 class="label">Mail</h5>
-            </div>
-            <div class="navbar-item flex align-center" data-target="settings_page" title="Settings">
-                <svg class="icon" viewBox="0 0 64 64">
-                    <path
-                        d="M41,62.92a1.7,1.7,0,0,1-1.45-.83L37,57.7a2.63,2.63,0,0,0-2.27-1.34h-.26a23.91,23.91,0,0,1-5,0h-.26A2.63,2.63,0,0,0,27,57.7l-2.54,4.39a1.67,1.67,0,0,1-1.44.83,1.72,1.72,0,0,1-.83-.22L10.33,55.86a1.67,1.67,0,0,1-.61-2.27l2.54-4.41a2.61,2.61,0,0,0-.12-2.85A23.77,23.77,0,0,1,9.65,42,2.65,2.65,0,0,0,7.24,40.5H2.17A1.67,1.67,0,0,1,.5,38.83V25.17A1.67,1.67,0,0,1,2.17,23.5H7.24A2.64,2.64,0,0,0,9.65,22a25,25,0,0,1,2.49-4.31,2.63,2.63,0,0,0,.12-2.85l-2.54-4.4a1.67,1.67,0,0,1,.61-2.27L22.17,1.3A1.72,1.72,0,0,1,23,1.08a1.67,1.67,0,0,1,1.44.83L27,6.3a2.63,2.63,0,0,0,2.27,1.34h.26a23.91,23.91,0,0,1,5,0h.26A2.63,2.63,0,0,0,37,6.3l2.53-4.39A1.7,1.7,0,0,1,41,1.08a1.72,1.72,0,0,1,.83.22L53.67,8.14a1.67,1.67,0,0,1,.61,2.27l-2.54,4.41a2.61,2.61,0,0,0,.12,2.85A24.46,24.46,0,0,1,54.35,22a2.65,2.65,0,0,0,2.41,1.52h5.07a1.67,1.67,0,0,1,1.67,1.67V38.83a1.67,1.67,0,0,1-1.67,1.67H56.76A2.63,2.63,0,0,0,54.35,42a24.63,24.63,0,0,1-2.49,4.31,2.63,2.63,0,0,0-.12,2.85l2.54,4.4a1.68,1.68,0,0,1-.61,2.27L41.83,62.7A1.72,1.72,0,0,1,41,62.92Z" />
-                    <path
-                        d="M23,1.58h0a1.16,1.16,0,0,1,1,.58l2.54,4.39a3.14,3.14,0,0,0,2.7,1.59l.31,0C30.37,8,31.19,8,32,8s1.63,0,2.44.12l.31,0a3.14,3.14,0,0,0,2.7-1.59L40,2.16a1.16,1.16,0,0,1,1-.58,1.1,1.1,0,0,1,.58.16L53.42,8.57a1.16,1.16,0,0,1,.42,1.59L51.3,14.57a3.15,3.15,0,0,0,.15,3.4,23.69,23.69,0,0,1,2.45,4.21A3.12,3.12,0,0,0,56.76,24h5.07A1.17,1.17,0,0,1,63,25.17V38.83A1.17,1.17,0,0,1,61.83,40H56.76a3.11,3.11,0,0,0-2.86,1.82,24.33,24.33,0,0,1-2.44,4.23,3.11,3.11,0,0,0-.15,3.39l2.53,4.4a1.13,1.13,0,0,1,.12.88,1.17,1.17,0,0,1-.54.71L41.58,62.26a1.08,1.08,0,0,1-.58.16,1.16,1.16,0,0,1-1-.58l-2.54-4.39a3.14,3.14,0,0,0-2.7-1.59l-.31,0C33.63,56,32.81,56,32,56s-1.63,0-2.44-.12l-.31,0a3.14,3.14,0,0,0-2.7,1.59L24,61.84a1.16,1.16,0,0,1-1,.58,1.1,1.1,0,0,1-.58-.16L10.58,55.43a1.16,1.16,0,0,1-.42-1.59l2.54-4.41a3.15,3.15,0,0,0-.15-3.4,23.69,23.69,0,0,1-2.45-4.21A3.12,3.12,0,0,0,7.24,40H2.17A1.17,1.17,0,0,1,1,38.83V25.17A1.17,1.17,0,0,1,2.17,24H7.24a3.11,3.11,0,0,0,2.86-1.82A24.33,24.33,0,0,1,12.54,18a3.11,3.11,0,0,0,.15-3.39l-2.53-4.4a1.16,1.16,0,0,1,.42-1.59L22.42,1.74A1.08,1.08,0,0,1,23,1.58m0-1a2.11,2.11,0,0,0-1.08.29L10.08,7.7a2.17,2.17,0,0,0-.79,3l2.54,4.4a2.15,2.15,0,0,1-.1,2.31,24.92,24.92,0,0,0-2.54,4.4A2.13,2.13,0,0,1,7.24,23H2.17A2.17,2.17,0,0,0,0,25.17V38.83A2.17,2.17,0,0,0,2.17,41H7.24a2.13,2.13,0,0,1,1.95,1.23,25.25,25.25,0,0,0,2.55,4.39,2.13,2.13,0,0,1,.09,2.31L9.29,53.34a2.17,2.17,0,0,0,.79,3l11.84,6.83a2.11,2.11,0,0,0,1.08.29,2.17,2.17,0,0,0,1.88-1.08L27.41,58a2.14,2.14,0,0,1,1.84-1.09h.21a24.88,24.88,0,0,0,5.08,0h.21A2.14,2.14,0,0,1,36.59,58l2.53,4.39A2.17,2.17,0,0,0,41,63.42a2.11,2.11,0,0,0,1.08-.29L53.92,56.3a2.17,2.17,0,0,0,.79-3l-2.54-4.4a2.15,2.15,0,0,1,.1-2.31,24.92,24.92,0,0,0,2.54-4.4A2.13,2.13,0,0,1,56.76,41h5.07A2.17,2.17,0,0,0,64,38.83V25.17A2.17,2.17,0,0,0,61.83,23H56.76a2.13,2.13,0,0,1-1.95-1.23,25.25,25.25,0,0,0-2.55-4.39,2.13,2.13,0,0,1-.09-2.31l2.54-4.41a2.17,2.17,0,0,0-.79-3L42.08.87A2.11,2.11,0,0,0,41,.58a2.17,2.17,0,0,0-1.88,1.08L36.59,6.05a2.14,2.14,0,0,1-1.84,1.09h-.21a24.88,24.88,0,0,0-5.08,0h-.21a2.14,2.14,0,0,1-1.84-1.09L24.88,1.66A2.17,2.17,0,0,0,23,.58Z" />
-                    <circle cx="32" cy="32" r="11.5" />
-                    <path d="M32,21A11,11,0,1,1,21,32,11,11,0,0,1,32,21m0-1A12,12,0,1,0,44,32,12,12,0,0,0,32,20Z" />
-                </svg>
-                <h5 class="label">Settings</h5>
-            </div>
-        </nav>
-        <section id="chat_page" class="sub-page grid">
+    </div>
+    <main id="main_page" class="page grid hide">
+        <section id="chat_page" class="inner-page grid">
             <div id="contacts" class="grid">
                 <header class="grid header">
                     <div class="flex align-center">
-                        <svg class="hamburger-menu-button icon hide-on-desktop" onclick="toggleDrawer()"
-                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                            <line y1="10.66" x2="64" y2="10.66" />
-                            <line y1="32" x2="64" y2="32" />
-                            <line y1="53.34" x2="64" y2="53.34" />
-                        </svg>
                         <h4>FLO Messenger</h4>
-                        <svg class="icon" onclick="toggleSearch('chat_search_field')" viewBox="0 0 64 64">
-                            <title>Search</title>
+                        <svg class="icon" onclick="toggleSearch('chat_search_field')" xmlns="http://www.w3.org/2000/svg"
+                            height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                            <path d="M0 0h24v24H0V0z" fill="none" />
                             <path
-                                d="M25.69,1A24.7,24.7,0,0,1,43.15,43.15,24.7,24.7,0,0,1,8.23,8.22,24.53,24.53,0,0,1,25.69,1m0-1A25.7,25.7,0,1,0,43.85,7.51,25.64,25.64,0,0,0,25.69,0Z" />
-                            <line x1="63.65" y1="63.66" x2="43.36" y2="43.37" />
+                                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
                         </svg>
                         <sm-menu align-options="right">
-                            <sm-menu-option onclick="initGroupCreation()">
+                            <sm-menu-option onclick="openPopup('group_creation_popup')">
                                 Create new group
                             </sm-menu-option>
                         </sm-menu>
@@ -473,18 +260,18 @@
                         </sm-input>
                     </div>
                 </header>
-                <sm-button variant="primary" id="new_message_button" onclick="showContacts({show: true})"
+                <sm-button variant="primary" id="new_message_button" onclick="openPopup('new_message_popup')"
                     class="fab round">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 64 64">
-                        <title>Send new message</title>
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                        fill="#000000">
+                        <path d="M0 0h24v24H0V0z" fill="none" />
                         <path
-                            d="M55.76,20.13,59,23.34l3.5-3.48a3.26,3.26,0,0,0,.05-4.63l0-.05-.59-.56a3.3,3.3,0,0,0-4.67,0l-21.1,21a2.34,2.34,0,0,0-.63,1.19l-.9,4.63a.8.8,0,0,0,.66.91.57.57,0,0,0,.26,0l4.65-.88a2.36,2.36,0,0,0,1.22-.61l15.7-15.63" />
-                        <path d="M48.05,49.79a6,6,0,0,1-6,6H6.47a6,6,0,0,1-6-6V14.21a6,6,0,0,1,6-6H42" />
+                            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM5.92 19H5v-.92l9.06-9.06.92.92L5.92 19zM20.71 5.63l-2.34-2.34c-.2-.2-.45-.29-.71-.29s-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41z" />
                     </svg>
                     New chat
                 </sm-button>
-                <div id="chat_container" class="flex observe-empty-state"></div>
-                <div id="new_conversation" class="flex direction-column empty-state">
+                <div id="chats_list" class="flex observe-empty-state"></div>
+                <div id="new_conversation" class="flex flex-direction-column empty-state">
                     <svg class="icon new-conversation align-center" viewBox="0 0 512 512">
                         <title>new conversation</title>
                         <path
@@ -496,108 +283,8 @@
                     <h4>Start your first conversation</h4>
                     <p class="light-text">Tap/click on 'New chat' to add or select a contact.</p>
                 </div>
-                <div id="all_contacts" class="flex direction-column hide-completely">
-                    <header class="grid header">
-                        <div class="flex align-center">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon back"
-                                onclick="showContacts({show: false})" viewBox="0 0 64 64">
-                                <title>back-arrow</title>
-                                <line x1="1" y1="32" x2="64" y2="32" />
-                                <polyline points="29.64 60.97 0.65 32 29.64 3.03" />
-                            </svg>
-                            <sm-input id="search_contacts" type="search" placeholder="Enter name or FLO ID">
-                                <!--                                 <svg slot="icon" class="icon" viewBox="0 0 64 64">
-                                    <title>Search</title>
-                                    <path d="M25.69,1A24.7,24.7,0,0,1,43.15,43.15,24.7,24.7,0,0,1,8.23,8.22,24.53,24.53,0,0,1,25.69,1m0-1A25.7,25.7,0,1,0,43.85,7.51,25.64,25.64,0,0,0,25.69,0Z"/>
-                                    <line x1="63.65" y1="63.66" x2="43.36" y2="43.37"/>
-                                </svg> -->
-                            </sm-input>
-                        </div>
-                    </header>
-                    <div id="selected_contacts" class="hide-completely">
-                        <h4>Select group members</h4>
-                        <div id="selected_contacts_container" class="observe-empty-state"></div>
-                        <p class="warning empty-state">*Contacts that haven't yet replied to you, can't be added to a
-                            group. So they won't be visible here.</p>
-                    </div>
-                    <div class="scrolling-wrapper">
-                        <div id="all_contacts_options">
-                            <div id="create_group_option" class="option interact" onclick="initGroupCreation()">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="icon filled" viewBox="0 0 64 64">
-                                    <path
-                                        d="M13.61,19.27c-1.63,0-4.72-2.35-5.33-3.57A21.71,21.71,0,0,1,6.93,8.37S6.67,2.3,13.61,2.3A6.38,6.38,0,0,1,20.3,8.37,21.71,21.71,0,0,1,19,15.7c-.62,1.22-3.7,3.57-5.34,3.57" />
-                                    <path
-                                        d="M32,22.92c-2.21,0-6.37-3.17-7.2-4.82A29.42,29.42,0,0,1,23,8.21S22.62,0,32,0c8.68,0,9,8.21,9,8.21A29.42,29.42,0,0,1,39.2,18.1c-.82,1.65-5,4.82-7.2,4.82" />
-                                    <path
-                                        d="M14.82,27.75c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,22.41,19,21.43,18,19.6a8.85,8.85,0,0,1-4.41,2.75,8.85,8.85,0,0,1-4.4-2.75C7.9,22.05,4.63,23,1.55,24.33c-1.26.53-2.3,7.32-.84,7.32A24.66,24.66,0,0,0,11.57,35C11.89,32,12.86,28.57,14.82,27.75Z" />
-                                    <path
-                                        d="M49.15,34.3A14.85,14.85,0,1,0,64,49.15,14.85,14.85,0,0,0,49.15,34.3Zm8,16.31H50.58v6.61H47.66V50.61H41.05V47.69h6.61V41.08h2.92v6.61h6.61Z" />
-                                    <path
-                                        d="M48.93,30.42a1.56,1.56,0,0,0-.64-.66c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88a33,33,0,0,0,16.5,4.52A18.73,18.73,0,0,1,48.93,30.42Z" />
-                                </svg>
-                                Create new group
-                            </div>
-                            <div id="add_contact_option" class="option interact"
-                                onclick="showPopup('add_contact_popup')">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="icon filled" viewBox="0 0 64 64">
-                                    <path
-                                        d="M49.15,34.3A14.85,14.85,0,1,0,64,49.15,14.85,14.85,0,0,0,49.15,34.3Zm8,16.31H50.58v6.61H47.66V50.61H41.05V47.69h6.61V41.08h2.92v6.61h6.61Z" />
-                                    <path
-                                        d="M21.36,26.63C18.79,26.63,14,23,13,21s-2.12-7.45-2.12-11.49c0,0-.41-9.53,10.49-9.53C31.45,0,31.85,9.53,31.85,9.53c0,4-1.17,9.58-2.12,11.49s-5.8,5.61-8.37,5.61" />
-                                    <path
-                                        d="M28.78,49.15A20.28,20.28,0,0,1,36.7,33.07c-3.6-1.49-6.88-3-8.42-5.93a14,14,0,0,1-6.92,4.33,14,14,0,0,1-6.92-4.33c-2,3.85-7.18,5.3-12,7.43-2,.82-3.61,11.48-1.31,11.48a38.44,38.44,0,0,0,19.34,5.26h1.8a37.94,37.94,0,0,0,6.6-.59C28.82,50.2,28.78,49.68,28.78,49.15Z" />
-                                </svg>
-                                Add contact
-                            </div>
-                        </div>
-                        <div id="contacts_container" class="observe-empty-state"></div>
-                        <div class="empty-state">
-                            <p>No contacts found.</p>
-                        </div>
-                    </div>
-                    <sm-button id="skip_members_button" variant="primary" class="fab round hide-completely"
-                        onclick="skipToGroupCreation()">
-                        Skip
-                    </sm-button>
-                </div>
-                <div id="group_creation_panel" class="flex direction-column hide-completely">
-                    <header class="grid header">
-                        <div class="flex align-center">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon back" onclick="backToContacts()"
-                                viewBox="0 0 64 64">
-                                <title>back-arrow</title>
-                                <line x1="1" y1="32" x2="64" y2="32" />
-                                <polyline points="29.64 60.97 0.65 32 29.64 3.03" />
-                            </svg>
-                            <h4>Create group</h4>
-                        </div>
-                    </header>
-                    <form action="" onsubmit="return false">
-                        <div class="grid">
-                            <svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                                <path
-                                    d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58" />
-                                <path
-                                    d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58" />
-                                <path
-                                    d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83" />
-                                <path
-                                    d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z" />
-                                <path
-                                    d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z" />
-                                <path
-                                    d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z" />
-                            </svg>
-                            <sm-input id="group_name_field" placeholder="Group name" animate required></sm-input>
-                            <sm-textarea id="group_description_field" placeholder="Group description"></sm-textarea>
-                        </div>
-                        <sm-button id="create_group_button" variant="primary" class="fab round" type="submit" disable>
-                            Create
-                        </sm-button>
-                    </form>
-                </div>
             </div>
-            <div id="chat" class="grid hide-on-mobile hide-completely">
+            <div id="chat" class="grid hide-on-mobile hide">
                 <div id="chat_left">
                     <header id="chat_header" class="grid align-center">
                         <svg class="icon hide-on-desktop back-button" onclick="goto('chats')"
@@ -610,13 +297,13 @@
                             <div id="receiver_initial" class="initial flex align-center"></div>
                             <h4 id="receiver_name"></h4>
                         </div>
-                        <sm-button id="video_call_button" class="hide-completely" onclick="createOffer()">Call
+                        <sm-button id="video_call_button" class="hide" onclick="createOffer()">Call
                         </sm-button>
                     </header>
-                    <section id="chat_middle" class="flex direction-column">
+                    <section id="chat_middle" class="flex flex-direction-column">
                         <div id="chat_first_child"></div>
                         <h5 id="warn_no_encryption">Messages are not encrypted until receiver replies</h5>
-                        <section id="messages_container" class="flex direction-column">
+                        <section id="messages_container" class="flex flex-direction-column">
                         </section>
                         <div id="scroll_to_bottom" onclick="scrollToBottom()">
                             <svg class="icon" viewBox="0 0 64 64">
@@ -626,7 +313,7 @@
                         </div>
                     </section>
                     <footer id="chat_footer" class="grid">
-                        <emoji-picker id="emoji_picker" class="hide-completely"></emoji-picker>
+                        <emoji-picker id="emoji_picker" class="hide"></emoji-picker>
                         <div class="flex">
                             <svg id="emoji_toggle" onclick="toggleEmoji('toggle')" xmlns="http://www.w3.org/2000/svg"
                                 viewBox="0 0 64 64">
@@ -642,7 +329,7 @@
                         </div>
                     </footer>
                 </div>
-                <div id="chat_details_panel" class="hide-completely">
+                <div id="chat_details_panel" class="hide">
                     <header class="flex align-center">
                         <svg class="icon" onclick="showChatDetails({show: false})" viewBox="0 0 64 64">
                             <title>close</title>
@@ -657,32 +344,24 @@
                     </div>
                     <div id="chat_flo_id_card" class="card">
                         <h4 class="h4" id="chat_type"></h4>
-                        <div class="copy-row grid">
-                            <h4 id="chat_flo_id" class="copy"></h4>
-                            <svg class="icon" onclick="copyToClipboard(this, 'Copied FLO ID')" viewBox="0 0 64 64">
-                                <title>Copy</title>
-                                <rect x="16" y="16" width="48" height="48" rx="6" />
-                                <path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
-                            </svg>
-                        </div>
+                        <sm-copy id="chat_flo_id"></sm-copy>
                     </div>
-                    <div id="group_description_card" class="card hide-completely">
+                    <div id="group_description_card" class="card hide">
                         <h4 class="h4">Group description</h4>
                         <text-field id="group_description"></text-field>
                     </div>
-                    <div id="group_members_card" class="card hide-completely">
+                    <div id="group_members_card" class="card hide">
                         <div class="flex align-center">
                             <h4 class="h4">Group members</h4>
-                            <sm-button id="edit_group_button"
-                                class="admin-option hide-completely round small justify-right"
+                            <sm-button id="edit_group_button" class="admin-option hide round small justify-right"
                                 onclick="editGroupMembers()">Edit</sm-button>
                         </div>
-                        <p id="remove_members_tip" class="tip hide-completely">Select members to remove or add new
+                        <p id="remove_members_tip" class="tip hide">Select members to remove or add new
                             members</p>
-                        <div id="member_options" class="flex hide-completely">
-                            <sm-button id="remove_members_button" class="danger hide-completely"
-                                onclick="removeGroupMembers()">Remove selected</sm-button>
-                            <sm-button id="init_add_members_button" onclick="showPopup('contacts_popup')">Add member
+                        <div id="member_options" class="flex hide">
+                            <sm-button id="remove_members_button" class="danger hide" onclick="removeGroupMembers()">
+                                Remove selected</sm-button>
+                            <sm-button id="init_add_members_button" onclick="openPopup('contacts_popup')">Add member
                             </sm-button>
                         </div>
                         <div id="group_members_list"></div>
@@ -694,21 +373,15 @@
                 </div>
             </div>
         </section>
-        <section class="sub-page grid hide-completely" id="mail_page">
+        <section class="inner-page grid hide" id="mail_page">
             <div id="mails" class="grid">
                 <header class="grid header">
                     <div class="flex align-center">
-                        <svg class="hamburger-menu-button icon hide-on-desktop" onclick="toggleDrawer()"
-                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                            <line y1="10.66" x2="64" y2="10.66" />
-                            <line y1="32" x2="64" y2="32" />
-                            <line y1="53.34" x2="64" y2="53.34" />
-                        </svg>
                         <h4>Mail</h4>
-                        <sm-select id="mail_type_selector">
-                            <sm-option value="inbox">Inbox</sm-option>
-                            <sm-option value="sent">Sent</sm-option>
-                        </sm-select>
+                        <strip-select id="mail_type_selector">
+                            <strip-option value="inbox" selected>Inbox</strip-option>
+                            <strip-option value="sent">Sent</strip-option>
+                        </strip-select>
                     </div>
                 </header>
                 <sm-button variant="primary" id="new_mail_button" class="fab round">
@@ -718,28 +391,32 @@
                     </svg>
                     New Mail
                 </sm-button>
-                <ul id="inbox_mail_container" class="mail-container flex observe-empty-state"></ul>
-                <div class="empty-state flex direction-column align-center">
-                    <svg class="icon new-conversation" viewBox="0 0 512 512">
-                        <path
-                            d="M227,26.16,20.5,177.56a49,49,0,0,0-20,39.53V446.35a49,49,0,0,0,49,49h413a49,49,0,0,0,49-49h0V217.09a49,49,0,0,0-20-39.53L285,26.16A49,49,0,0,0,227,26.16Z" />
-                        <path d="M71,250.29l166.31,86.88a39,39,0,0,0,36.22,0L441,249.66" />
-                    </svg>
-                    <h4>All your received mails will appear here.</h4>
-                    <p class="light-text">Tap/click on 'New Mail' button below to compose new mail.</p>
+                <div>
+                    <ul id="inbox_mail_container" class="mail-container flex observe-empty-state"></ul>
+                    <div class="empty-state flex flex-direction-column align-center">
+                        <svg class="icon new-conversation" viewBox="0 0 512 512">
+                            <path
+                                d="M227,26.16,20.5,177.56a49,49,0,0,0-20,39.53V446.35a49,49,0,0,0,49,49h413a49,49,0,0,0,49-49h0V217.09a49,49,0,0,0-20-39.53L285,26.16A49,49,0,0,0,227,26.16Z" />
+                            <path d="M71,250.29l166.31,86.88a39,39,0,0,0,36.22,0L441,249.66" />
+                        </svg>
+                        <h4>All your received mails will appear here.</h4>
+                        <p class="light-text">Tap/click on 'New Mail' button below to compose new mail.</p>
+                    </div>
                 </div>
-                <ul id="sent_mail_container" class="mail-container flex observe-empty-state hide-completely"></ul>
-                <div class="empty-state flex direction-column align-center">
-                    <svg class="icon new-conversation" viewBox="0 0 512 512">
-                        <path
-                            d="M227,26.16,20.5,177.56a49,49,0,0,0-20,39.53V446.35a49,49,0,0,0,49,49h413a49,49,0,0,0,49-49h0V217.09a49,49,0,0,0-20-39.53L285,26.16A49,49,0,0,0,227,26.16Z" />
-                        <path d="M71,250.29l166.31,86.88a39,39,0,0,0,36.22,0L441,249.66" />
-                    </svg>
-                    <h4>All your sent mails will appear here.</h4>
-                    <p class="light-text">Tap/click on 'New Mail' button below to compose new mail.</p>
+                <div class="hide">
+                    <ul id="sent_mail_container" class="mail-container flex observe-empty-state hide"></ul>
+                    <div class="empty-state flex flex-direction-column align-center">
+                        <svg class="icon new-conversation" viewBox="0 0 512 512">
+                            <path
+                                d="M227,26.16,20.5,177.56a49,49,0,0,0-20,39.53V446.35a49,49,0,0,0,49,49h413a49,49,0,0,0,49-49h0V217.09a49,49,0,0,0-20-39.53L285,26.16A49,49,0,0,0,227,26.16Z" />
+                            <path d="M71,250.29l166.31,86.88a39,39,0,0,0,36.22,0L441,249.66" />
+                        </svg>
+                        <h4>All your sent mails will appear here.</h4>
+                        <p class="light-text">Tap/click on 'New Mail' button below to compose new mail.</p>
+                    </div>
                 </div>
             </div>
-            <div id="mail" class="flex hide-on-mobile hide-completely">
+            <div id="mail" class="flex hide-on-mobile hide">
                 <div id="mail_container"></div>
                 <div class="flex">
                     <sm-button id="prev_mail">View Previous Mail</sm-button>
@@ -747,18 +424,10 @@
                 </div>
             </div>
         </section>
-        <section id="settings_page" class="sub-page hide-completely">
+        <section id="settings_page" class="inner-page hide">
             <aside id="settings_sidebar">
                 <header class="grid header">
-                    <div class="flex align-center">
-                        <svg class="hamburger-menu-button icon hide-on-desktop" onclick="toggleDrawer()"
-                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                            <line y1="10.66" x2="64" y2="10.66" />
-                            <line y1="32" x2="64" y2="32" />
-                            <line y1="53.34" x2="64" y2="53.34" />
-                        </svg>
-                        <h4>Settings</h4>
-                    </div>
+                    <h4>Settings</h4>
                 </header>
                 <div class="sidebar-item interact active" data-target="profile_panel">Account</div>
                 <div class="sidebar-item interact" data-target="chat_panel">chat</div>
@@ -779,14 +448,7 @@
                 <div id="profile_panel" class="panel">
                     <section>
                         <h4>My FLO ID</h4>
-                        <div class="copy-row">
-                            <p id="greet_tag" class="copy"></p>
-                            <svg class="icon" onclick="copyToClipboard(this, 'FLO ID Copied')" viewBox="0 0 64 64">
-                                <title>Copy</title>
-                                <rect x="16" y="16" width="48" height="48" rx="6" />
-                                <path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
-                            </svg>
-                        </div>
+                        <sm-copy id="greet_tag"></sm-copy>
                     </section>
                     <section>
                         <h4>Clear data</h4>
@@ -800,21 +462,21 @@
                         <sm-button id="sign_out" onclick="signOut()">Sign Out</sm-button>
                     </section>
                 </div>
-                <div id="chat_panel" class="panel hide-completely">
+                <div id="chat_panel" class="panel hide">
                     <sm-switch id="is_enter_send_toggle">
-                        <div slot="left" class="flex direction-column">
+                        <div slot="left" class="flex flex-direction-column">
                             <h4>Send by Enter</h4>
                             <p>If this toggle is ON then pressing 'Enter' key will send messages</p>
                         </div>
                     </sm-switch>
                     <sm-switch id="haptic_feedback_switcher">
-                        <div slot="left" class="flex direction-column">
+                        <div slot="left" class="flex flex-direction-column">
                             <h4>Haptic feedback</h4>
                             <p>Turn haptic feedback (vibrations) on/off.</p>
                         </div>
                     </sm-switch>
                 </div>
-                <div id="personalise_panel" class="panel hide-completely">
+                <div id="personalise_panel" class="panel hide">
                     <section>
                         <h4>Chat preview</h4>
                         <div id="chat_preview">
@@ -829,7 +491,7 @@
                         </div>
                     </section>
                     <sm-switch id="theme_switcher">
-                        <div slot="left" class="flex direction-column">
+                        <div slot="left" class="flex flex-direction-column">
                             <h4>Dark mode</h4>
                             <p>Toggle dark mode on/off.<br><strong>*Setting applies to this browser only</strong></p>
                         </div>
@@ -837,14 +499,14 @@
                     <section>
                         <h4>Set chat and mail background image</h4>
                         <div id="bg_preview_container" class="flex">
-                            <div id="selected_bg_preview" class="bg-preview hide-completely" onclick="setBgImage()">
+                            <div id="selected_bg_preview" class="bg-preview hide" onclick="setBgImage()">
                                 <img src="" alt="background perview" class="bg-preview__image">
                             </div>
                             <div id="default_bg_preview" class="bg-preview bg-preview--selected"
                                 onclick="setDefaultBg()">Default</div>
                         </div>
-                        <label class="select-file">
-                            <sm-button id="select_bg_button">Select background</sm-button>
+                        <label class="button select-file">
+                            <span id="select_bg_button">Select background</span>
                             <input type="file" id="select_bg_image" accept="image/*" />
                         </label>
                     </section>
@@ -853,7 +515,7 @@
                         <color-grid id="accent_color_selector"></color-grid>
                     </section>
                 </div>
-                <div id="backup_panel" class="panel hide-completely">
+                <div id="backup_panel" class="panel hide">
                     <section>
                         <h4>Backup data</h4>
                         <p>Create a backup of contacts, conversations and mails. Which can later be used to restore
@@ -865,152 +527,323 @@
                         <h4>Restore backup</h4>
                         <p>Select backup file with extension '.json'. Which was downloaded when backup was performed.
                         </p>
-                        <label class="select-file">
-                            <sm-button onclick="document.getElementById('restore_data').click()">Select File</sm-button>
+                        <label class="button select-file">
+                            <span>Select File</span>
                             <input type="file" id="restore_data" accept=".json" />
                         </label>
                     </section>
                 </div>
-                <div id="about_panel" class="panel hide-completely">
+                <div id="about_panel" class="panel hide">
                     <section>
                         <p>Created by RanchiMall, a Blockchain incorporated entity</p>
                     </section>
                 </div>
             </div>
         </section>
+        <nav id="main_navbar" class="flex hide">
+            <ul>
+                <li>
+                    <a class="nav-item flex badge align-center active" data-notifications="0" href="#/chat_page"
+                        title="Chat">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                            width="24px" fill="#000000">
+                            <path d="M0 0h24v24H0V0z" fill="none" />
+                            <path
+                                d="M15 4v7H5.17l-.59.59-.58.58V4h11m1-2H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm5 4h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1z" />
+                        </svg>
+                        <span class="nav-item__title">Chat</span>
+                    </a>
+                </li>
+                <li>
+                    <a class="nav-item flex badge align-center" id="mail_page_button" data-notifications="0"
+                        href="#/mail_page" title="Mail">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                            width="24px" fill="#000000">
+                            <path d="M0 0h24v24H0V0z" fill="none" />
+                            <path
+                                d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z" />
+                        </svg>
+                        <span class="nav-item__title">Mail</span>
+                    </a>
+                </li>
+                <li>
+                    <a class="nav-item flex align-center" href="#/settings_page" title="Settings">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
+                            width="24px" fill="#000000">
+                            <path d="M0 0h24v24H0V0z" fill="none" />
+                            <path
+                                d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" />
+                        </svg>
+                        <span class="nav-item__title">Settings</span>
+                    </a>
+                </li>
+            </ul>
+        </nav>
     </main>
-    <div id="incoming_call_page" class="page">
-        <div id="caller_dp"></div>
-        <sm-button id="pick_up_call" onclick="createAnswer()">Answer</sm-button>
-    </div>
-    <div id="video_call_page" class="page">
-        <video id="my_video" autoplay></video>
-        <video id="their_video" autoplay></video>
-        <div id="call_controls" class="flex">
-            <sm-button id="mute_audio" class="circular-button" onclick="muteAudio()" title="Toggle audio">
-                <svg class="icon filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                    <rect x="20.01" width="23.97" height="44.59" rx="11.99" />
+    <sm-popup id="add_contact_popup">
+        <header class="popup__header" slot="header">
+            <button class="popup__header__close justify-self-start">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
                     <path
-                        d="M50.47,39.88A4,4,0,0,0,45,41.42a14.88,14.88,0,0,1-25.92,0,4,4,0,1,0-7,4A23,23,0,0,0,28,56.72V60a4.05,4.05,0,1,0,8.1,0V56.72A23,23,0,0,0,52,45.39,4,4,0,0,0,50.47,39.88Z" />
+                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
                 </svg>
-            </sm-button>
-            <sm-button id="end_call" onclick="endCall()">End call</sm-button>
-            <sm-button id="pause_video" class="circular-button" onclick="pauseVideo()" title="Toggle video">
-                <svg class="icon filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+            </button>
+            <h4>Add contact</h4>
+            <sm-button id="add_contact_button" variant="primary" disable>Add</sm-button>
+        </header>
+        <sm-input id="add_contact_floID" floId placeholder="FLO address" animate required></sm-input>
+        <sm-input id="add_contact_name" placeholder="Name" animate required></sm-input>
+    </sm-popup>
+    <sm-popup id="compose_mail_popup">
+        <header class="popup__header" slot="header">
+            <button class="popup__header__close justify-self-start">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
                     <path
-                        d="M56.37,13.81l-8.09,4.68v-2a7.06,7.06,0,0,0-7.06-7H7.06A7.06,7.06,0,0,0,0,16.46V47.54a7.06,7.06,0,0,0,7.06,7.05H41.22a7.06,7.06,0,0,0,7.06-7.05v-2l8.09,4.68A5.09,5.09,0,0,0,64,45.78V18.22A5.09,5.09,0,0,0,56.37,13.81Z" />
+                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
                 </svg>
-            </sm-button>
+            </button>
+            <h4>Compose Mail</h4>
+            <sm-button id="send_mail_button" variant="primary" disable>Send</sm-button>
+        </header>
+        <div id="auto_complete_contact" class="flex flex-direction-column">
+            <sm-input id="send_mail_to" placeholder="To" animate required></sm-input>
+            <div id="mail_contact_list" class="hide contact-list"></div>
         </div>
-    </div>
+        <sm-input id="subject_of_mail" placeholder="Subject" animate></sm-input>
+        <sm-textarea id="mail_content" placeholder="Type a mail" name="" id="" rows="10" required></sm-textarea>
+    </sm-popup>
+    <sm-popup id="reply_mail_popup">
+        <header class="popup__header" slot="header">
+            <button class="popup__header__close justify-self-start">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                </svg>
+            </button>
+            <h4>Reply</h4>
+            <sm-button id="reply_mail_button" variant="primary" disable>Send</sm-button>
+        </header>
+        <sm-input id="subject_of_reply_mail" placeholder="Subject" animate></sm-input>
+        <sm-textarea id="reply_mail_content" placeholder="Type a mail" id="" rows="10" required></sm-textarea>
+    </sm-popup>
+    <!-- Contact popup -->
+    <sm-popup id="contact_details_popup">
+        <header class="popup__header" slot="header">
+            <button class="popup__header__close justify-self-start">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                </svg>
+            </button>
+        </header>
+        <div class="flex flex-direction-column align-center">
+            <div id="contact_initial" class="initial flex align-center"></div>
+            <text-field id="contact_name"></text-field>
+        </div>
+        <section class="popup-section">
+            <h5>FLO ID</h5>
+            <sm-copy id="contact_flo_id"></sm-copy>
+        </section>
+        <fieldset id="contact_options">
+            <button id="add_as_contact_option" class="option" onclick="addAsContact()">
+                Add as contact
+            </button>
+            <button id="mark_read_option" class="option" onclick="markAsRead()">
+                Mark as read
+            </button>
+            <button id="mark_unread_option" class="option" onclick="markAsUnread()">
+                Mark as unread
+            </button>
+            <button class="option" onclick="clearChat()">
+                Clear this chat
+            </button>
+            <button id="delete_chat_option" class="option" onclick="deleteChat()">
+                Delete this chat
+            </button>
+        </fieldset>
+    </sm-popup>
+
+    <sm-popup id="new_message_popup">
+        <header class="grid popup__header" slot="header">
+            <div class="flex align-center">
+                <button class="popup__header__close justify-self-start">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                        fill="#000000">
+                        <path d="M0 0h24v24H0V0z" fill="none" />
+                        <path
+                            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                    </svg>
+                </button>
+                <sm-input id="search_contacts" type="search" placeholder="Enter name or FLO ID"> </sm-input>
+            </div>
+        </header>
+        <div class="scrolling-wrapper">
+            <div id="all_contacts_options">
+                <button id="create_group_option" class="option interact" onclick="openPopup('group_creation_popup')">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                        fill="#000000">
+                        <path d="M0 0h24v24H0V0z" fill="none" />
+                        <path
+                            d="M9 13.75c-2.34 0-7 1.17-7 3.5V19h14v-1.75c0-2.33-4.66-3.5-7-3.5zM4.34 17c.84-.58 2.87-1.25 4.66-1.25s3.82.67 4.66 1.25H4.34zM9 12c1.93 0 3.5-1.57 3.5-3.5S10.93 5 9 5 5.5 6.57 5.5 8.5 7.07 12 9 12zm0-5c.83 0 1.5.67 1.5 1.5S9.83 10 9 10s-1.5-.67-1.5-1.5S8.17 7 9 7zm7.04 6.81c1.16.84 1.96 1.96 1.96 3.44V19h4v-1.75c0-2.02-3.5-3.17-5.96-3.44zM15 12c1.93 0 3.5-1.57 3.5-3.5S16.93 5 15 5c-.54 0-1.04.13-1.5.35.63.89 1 1.98 1 3.15s-.37 2.26-1 3.15c.46.22.96.35 1.5.35z" />
+                    </svg>
+                    Create new group
+                </button>
+                <button id="add_contact_option" class="option interact" onclick="openPopup('add_contact_popup')">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
+                        viewBox="0 0 24 24" width="24px" fill="#000000">
+                        <g>
+                            <rect fill="none" height="24" width="24" />
+                        </g>
+                        <g>
+                            <path
+                                d="M20,9V6h-2v3h-3v2h3v3h2v-3h3V9H20z M9,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4S5,5.79,5,8C5,10.21,6.79,12,9,12z M9,6 c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2S7,9.1,7,8C7,6.9,7.9,6,9,6z M15.39,14.56C13.71,13.7,11.53,13,9,13c-2.53,0-4.71,0.7-6.39,1.56 C1.61,15.07,1,16.1,1,17.22V20h16v-2.78C17,16.1,16.39,15.07,15.39,14.56z M15,18H3v-0.78c0-0.38,0.2-0.72,0.52-0.88 C4.71,15.73,6.63,15,9,15c2.37,0,4.29,0.73,5.48,1.34C14.8,16.5,15,16.84,15,17.22V18z" />
+                        </g>
+                    </svg>
+                    Add contact
+                </button>
+            </div>
+            <div id="contacts_container" class="observe-empty-state"></div>
+            <div class="empty-state">
+                <p>No contacts found.</p>
+            </div>
+        </div>
+    </sm-popup>
+    <sm-popup id="group_creation_popup">
+        <header class="grid popup__header" slot="header">
+            <div class="flex align-center">
+                <button class="popup__header__close justify-self-start">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                        fill="#000000">
+                        <path d="M0 0h24v24H0V0z" fill="none" />
+                        <path
+                            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                    </svg>
+                </button>
+                <h4>Create group</h4>
+            </div>
+        </header>
+        <div>
+            <div id="selected_contacts">
+                <h4>Select group members</h4>
+                <div id="selected_contacts_container" class="observe-empty-state"></div>
+                <div class="empty-state">
+                    <p class="warning">*Contacts that haven't yet replied to you, can't be added to a
+                        group. So they won't be visible here.</p>
+                </div>
+            </div>
+            <div class="scrolling-wrapper">
+                <div id="select_contacts_container" class="observe-empty-state"></div>
+                <div class="empty-state">
+                    <p>No contacts found.</p>
+                </div>
+            </div>
+            <sm-button id="skip_members_button" variant="primary" class="fab round hide"
+                onclick="openPopup('group_creation_popup')"> Skip </sm-button>
+        </div>
+        <sm-form class="hide">
+            <div class="grid">
+                <svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                    <path
+                        d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58" />
+                    <path
+                        d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58" />
+                    <path
+                        d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83" />
+                    <path
+                        d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z" />
+                    <path
+                        d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z" />
+                    <path
+                        d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z" />
+                </svg>
+                <sm-input id="group_name_field" placeholder="Group name" animate required></sm-input>
+                <sm-textarea id="group_description_field" placeholder="Group description"></sm-textarea>
+            </div>
+            <sm-button id="create_group_button" variant="primary" type="submit" disable>
+                Create
+            </sm-button>
+        </sm-form>
+    </sm-popup>
+
+    <!-- all contacts popup -->
+
+    <sm-popup id="contacts_popup">
+        <header class="popup__header" slot="header">
+            <button class="popup__header__close justify-self-start">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                    fill="#000000">
+                    <path d="M0 0h24v24H0V0z" fill="none" />
+                    <path
+                        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+                </svg>
+            </button>
+            <h4>Select contact to add</h4>
+            <sm-button id="add_members_button" variant="primary" disable>Add</sm-button>
+        </header>
+        <p class="warning">*Contacts that haven't yet replied to you, can't be added to a group. So they won't be
+            visible here.</p>
+        <div id="popup_contacts_container" class="observe-empty-state"></div>
+        <div class="empty-state">
+            <p>You don't have any other contacts to show.</p>
+        </div>
+    </sm-popup>
+
+    <!-- Templates -->
+
+    <template id="mail_template">
+        <div class="mail">
+            <header class="mail-header flex flex-direction-column">
+                <div class="flex space-between">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon back hide-on-desktop" onclick="goto('mails')"
+                        viewBox="0 0 64 64">
+                        <line x1="1" y1="32" x2="64" y2="32" />
+                        <polyline points="29.64 60.97 0.65 32 29.64 3.03" />
+                    </svg>
+                    <h5 class="date justify-right"></h5>
+                </div>
+                <div class="mail-details flex flex-direction-column">
+                    <h4 class="sender-name"></h4>
+                    <h5 class="flo-id text-overflow"></h5>
+                </div>
+            </header>
+            <h4 class="mail-subject"></h4>
+            <p class="mail-content"></p>
+        </div>
+    </template>
+    <template id="message_template">
+        <div class="message">
+            <p class="message-body"></p>
+            <time class="time"></time>
+        </div>
+    </template>
     <script src="scripts/components.js"></script>
     <script src="scripts/script.js"></script>
     <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
-    <script id="WEBRTC">
+    <script>
+        /*jshint esversion: 8 */
+        /**
+          * @yaireo/relative-time - javascript function to transform timestamp or date to local relative-time
+          *
+          * @version v1.0.0
+          * @homepage https://github.com/yairEO/relative-time
+          */
 
-        const myVideo = document.getElementById('my_video')
-        const theirVideo = document.getElementById('their_video')
+        !function (e, t) { var o = o || {}; "function" == typeof o && o.amd ? o([], t) : "object" == typeof exports && "object" == typeof module ? module.exports = t() : "object" == typeof exports ? exports.RelativeTime = t() : e.RelativeTime = t() }(this, (function () { const e = { year: 31536e6, month: 2628e6, day: 864e5, hour: 36e5, minute: 6e4, second: 1e3 }, t = "en", o = { numeric: "auto" }; function n(e) { e = { locale: (e = e || {}).locale || t, options: { ...o, ...e.options } }, this.rtf = new Intl.RelativeTimeFormat(e.locale, e.options) } return n.prototype = { from(t, o) { const n = t - (o || new Date); for (let t in e) if (Math.abs(n) > e[t] || "second" == t) return this.rtf.format(Math.round(n / e[t]), t) } }, n }));
 
-        let dataChannel
-        let peerConnection
-        let localStream
-        let remoteSdp = ''
-        const server = { urls: "stun:stun.l.google.com:19302" };
-
-        async function initPeerConnection() {
-            peerConnection = new RTCPeerConnection({ iceServers: [server] });
-            peerConnection.ontrack = (e) => theirVideo.srcObject = e.streams[0];
-            peerConnection.ondatachannel = e => initDataChannel(dataChannel = e.channel);
-            peerConnection.oniceconnectionstatechange = e => console.log(peerConnection.iceConnectionState);
-
-            try {
-                localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
-                localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
-            }
-            catch (err) {
-                console.log("An error occurred: " + err);
-            }
-        }
-
-        function initDataChannel() {
-            dataChannel.onopen = () => console.log("Chat!");
-            dataChannel.onmessage = e => console.log(e.data);
-        }
-
-        async function createOffer() {
-            await initPeerConnection()
-            showPage('video_call_page')
-            initDataChannel(dataChannel = peerConnection.createDataChannel("chat"));
-            try {
-                myVideo.srcObject = localStream
-                const offer = await peerConnection.createOffer()
-                peerConnection.setLocalDescription(offer)
-            }
-            catch (err) {
-                console.log(err)
-            }
-            peerConnection.onicecandidate = e => {
-                if (e.candidate) return;
-                // Send invitation
-                const sdp = peerConnection.localDescription.sdp
-                messenger.sendMessage(sdp, activeChat.floID).then(data => {
-                    console.log('offer sent')
-                }).catch(error => notify(error, "error"));
-            }
-        }
-
-        async function createAnswer() {
-            await initPeerConnection()
-            if (peerConnection.signalingState !== "stable") return;
-            button.disabled = offer.disabled = true;
-            let desc = new RTCSessionDescription({ type: "offer", sdp: remoteSdp });
-            try {
-                await peerConnection.setRemoteDescription(desc)
-                const answer = await peerConnection.createAnswer()
-                peerConnection.setLocalDescription(answer)
-            }
-            catch (err) {
-                console.log(err)
-            }
-            peerConnection.onicecandidate = e => {
-                if (e.candidate) return;
-                const sdp = peerConnection.localDescription.sdp
-                messenger.sendMessage(sdp, activeChat.floID, 'answer').then(data => {
-                    console.log('answer sent')
-                }).catch(error => notify(error, "error"));
-            };
-        }
-
-        function startVideoCall(answer) {
-            if (peerConnection.signalingState != "have-local-offer") return;
-            let desc = new RTCSessionDescription({ type: "answer", sdp: answer });
-            peerConnection.setRemoteDescription(desc).catch(log);
-        }
-
-        function endCall() {
-            remoteSdp = ''
-            peerConnection.close()
-        }
-        /*
-        chat.onkeypress = e => {
-            if (!enterPressed(e)) return;
-            dataChannel.send(chat.value);
-            log(chat.value);
-            chat.value = "";
-        }; */
+        const relativeTime = new RelativeTime({ style: 'narrow' });
     </script>
     <script id="standard_UI_functions">
-
+        const { html, render: renderElem } = uhtml;
         const domRefs = {}
-
-        function getRef(elementId) {
-            if (!domRefs.elementId)
-                domRefs[elementId] = document.getElementById(elementId)
-            return domRefs[elementId]
-        }
-
-
         //Checks for internet connection status
         if (!navigator.onLine)
             notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error', '', true)
@@ -1022,48 +855,19 @@
             notify('We are back online.', 'success')
         })
 
-        const themeSwitcher = getRef('theme_switcher'),
-            hapticFeedbackSwitcher = getRef('haptic_feedback_switcher')
-
-        if (localStorage.theme === "dark") {
-            nightlight()
-            themeSwitcher.checked = true;
-        } else {
-            daylight()
-            themeSwitcher.checked = false;
-        }
-
-        function daylight() {
-            document.body.setAttribute("data-theme", "light");
-        }
-
-        function nightlight() {
-            document.body.setAttribute("data-theme", "dark");
-        }
-        themeSwitcher.addEventListener('change', function (e) {
-            if (this.checked) {
-                nightlight();
-                localStorage.setItem("theme", "dark");
-            }
-            else {
-                daylight();
-                localStorage.setItem("theme", "light");
-            }
-        })
-
         let isHapticOn
-        if (hapticFeedbackSwitcher) {
+        if (getRef('haptic_feedback_switcher')) {
             if (localStorage.getItem('haptic') === null)
                 localStorage.setItem("haptic", "on");
 
             if (localStorage.haptic === "on") {
                 isHapticOn = true
-                hapticFeedbackSwitcher.checked = true;
+                getRef('haptic_feedback_switcher').checked = true;
             } else {
                 isHapticOn = false
-                hapticFeedbackSwitcher.checked = false;
+                getRef('haptic_feedback_switcher').checked = false;
             }
-            hapticFeedbackSwitcher.addEventListener('change', function (e) {
+            getRef('haptic_feedback_switcher').addEventListener('change', function (e) {
                 if (this.checked) {
                     isHapticOn = true
                     localStorage.setItem("haptic", "on");
@@ -1074,74 +878,111 @@
                 }
             })
         }
+        // Use instead of document.getElementById
+        function getRef(elementId) {
+            if (!domRefs.hasOwnProperty(elementId)) {
+                domRefs[elementId] = {
+                    count: 1,
+                    ref: null,
+                };
+                return document.getElementById(elementId);
+            } else {
+                if (domRefs[elementId].count < 3) {
+                    domRefs[elementId].count = domRefs[elementId].count + 1;
+                    return document.getElementById(elementId);
+                } else {
+                    if (!domRefs[elementId].ref)
+                        domRefs[elementId].ref = document.getElementById(elementId);
+                    return domRefs[elementId].ref;
+                }
+            }
+        }
 
+        // returns dom with specified element
+        function createElement(tagName, options = {}) {
+            const { className, textContent, innerHTML, attributes = {} } = options
+            const elem = document.createElement(tagName)
+            for (let attribute in attributes) {
+                elem.setAttribute(attribute, attributes[attribute])
+            }
+            if (className)
+                elem.className = className
+            if (textContent)
+                elem.textContent = textContent
+            if (innerHTML)
+                elem.innerHTML = innerHTML
+            return elem
+        }
+
+        // Use when a function needs to be executed after user finishes changes
+        const debounce = (callback, wait) => {
+            let timeoutId = null;
+            return (...args) => {
+                window.clearTimeout(timeoutId);
+                timeoutId = window.setTimeout(() => {
+                    callback.apply(null, args);
+                }, wait);
+            };
+        }
+        // adds a class to all elements in an array
+        function addClass(elements, className) {
+            elements.forEach((element) => {
+                document.querySelector(element).classList.add(className);
+            });
+        }
+        // removes a class from all elements in an array
+        function removeClass(elements, className) {
+            elements.forEach((element) => {
+                document.querySelector(element).classList.remove(className);
+            });
+        }
+        // return querySelectorAll elements as an array
+        function getAllElements(selector) {
+            return Array.from(document.querySelectorAll(selector));
+        }
+
+        let zIndex = 50
         // function required for popups or modals to appear
-        class Stack {
-            constructor() {
-                this.items = [];
-            }
-            push(element) {
-                this.items.push(element);
-            }
-            pop() {
-                if (this.items.length == 0)
-                    return "Underflow";
-                return this.items.pop();
-            }
-            peek() {
-                return this.items[this.items.length - 1];
-            }
-        }
-        let popupStack = new Stack(),
-            zIndex = 10;
-
-        async function showPopup(popup, pinned) {
+        function openPopup(popupId, pinned) {
             zIndex++
-            getRef(popup).setAttribute('style', `z-index: ${zIndex}`)
-            popupStack = getRef(popup).show(pinned, popupStack)
-            return getRef(popup);
+            getRef(popupId).setAttribute('style', `z-index: ${zIndex}`)
+            getRef(popupId).show({ pinned })
+            return getRef(popupId);
         }
 
-        // hides the popup or modal 
-        function hidePopup() {
+        // hides the popup or modal
+        function closePopup() {
             if (popupStack.peek() === undefined)
                 return;
             popupStack.peek().popup.hide()
         }
 
         document.addEventListener('popupopened', async e => {
-            let thisPopup = e.detail.popup,
-                firstInput = thisPopup.querySelector('sm-input')
-
             //pushes popup as seprate entry in history
             history.pushState({ type: 'popup' }, null, null)
-
-            if (window.innerWidth > 720 && firstInput)
-                firstInput.focusIn()
-
-            switch (e.detail.popup.id) {
+            switch (e.target.id) {
                 case 'contact_details_popup':
                     if (floGlobals.contacts.hasOwnProperty(clickedContact.floID)) {
-                        getRef('add_as_contact_option').classList.add('hide-completely')
+                        getRef('add_as_contact_option').classList.add('hide')
                     }
                     else {
-                        getRef('add_as_contact_option').classList.remove('hide-completely')
+                        getRef('add_as_contact_option').classList.remove('hide')
                     }
 
                     const markUnread = messenger.marked[clickedContact.floID]?.includes('unread')
                     if (markUnread) {
-                        getRef('mark_read_option').classList.remove('hide-completely')
-                        getRef('mark_unread_option').classList.add('hide-completely')
+                        getRef('mark_read_option').classList.remove('hide')
+                        getRef('mark_unread_option').classList.add('hide')
                     }
                     else {
-                        getRef('mark_read_option').classList.add('hide-completely')
-                        getRef('mark_unread_option').classList.remove('hide-completely')
+                        getRef('mark_read_option').classList.add('hide')
+                        getRef('mark_unread_option').classList.remove('hide')
                     }
-                    if (clickedContact.chatCard.closest('#chat_container')) {
-                        getRef('contact_options').classList.remove('hide-completely')
+                    if (clickedContact.chatCard.closest('#chats_list')) {
+                        getRef('contact_options').classList.remove('hide')
                     }
                     else {
-                        getRef('contact_options').classList.add('hide-completely')
+                        getRef('contact_options').classList.add('hide')
                     }
                     if (clickedContact.isGroup) {
                         getRef("contact_initial").innerHTML = `
@@ -1151,16 +992,16 @@
                             getRef('contact_name').disabled = false
                         else
                             getRef('contact_name').disabled = true
-                        getRef('delete_chat_option').classList.add('hide-completely')
+                        getRef('delete_chat_option').classList.add('hide')
                     }
                     else {
                         getRef('contact_name').disabled = false
                         getRef('contact_initial').textContent = clickedContact['name'].charAt(0)
-                        getRef('delete_chat_option').classList.remove('hide-completely')
+                        getRef('delete_chat_option').classList.remove('hide')
                     }
                     getRef('contact_initial').setAttribute('style', `background: ${clickedContact['chatCard'].getAttribute('background-color')}`)
                     getRef('contact_name').value = clickedContact['name']
-                    getRef('contact_flo_id').textContent = clickedContact['floID']
+                    getRef('contact_flo_id').value = clickedContact['floID']
                     break;
                 case 'contacts_popup':
                     const contacts = []
@@ -1178,13 +1019,26 @@
                     })
                     isRemovingMember = false
                     break
+                case 'new_chat_popup':
+                    renderContactList(floGlobals.contacts)
+                    break
+                case 'group_creation_popup':
+                    floGlobals.isCreatingGroup = true
+                    const validContacts = []
+                    for (floID in floGlobals.contacts) {
+                        if (floGlobals.pubKeys.hasOwnProperty(floID)) {
+                            let isSelected = selectedGroupMembers.has(floID)
+                            validContacts.push(render.selectableContact(floID, isSelected))
+                        }
+                    }
+                    console.log(validContacts)
+                    renderElem(getRef('select_contacts_container'), html`${validContacts}`)
+                    break;
             }
         })
 
         document.addEventListener('popupclosed', e => {
-            popupStack = e.detail.popupStack
-            let thisPopup = e.detail.popup
-            switch (e.detail.popup.id) {
+            switch (e.target.id) {
                 case 'contact_details_popup':
                     clickedContact['name'] = getRef('contact_name').value.trim()
                     getRef('contact_name').revert()
@@ -1194,22 +1048,18 @@
                     isRemovingMember = true
                     membersToAdd.clear()
                     break;
+                case 'group_creation_popup':
+                    floGlobals.isCreatingGroup = false
+                    clearAllMembers()
+                    break;
             }
         })
-
         window.addEventListener('popstate', e => {
             if (!e.state) return
-            console.log(e.state)
             switch (e.state.type) {
                 case 'popup':
                     hidePopup()
                     break;
-                case 'page':
-                    showPage(e.state.id)
-                    break;
-                case 'subpage':
-                    showPage(e.state.id, true)
-                    break;
             }
         })
 
@@ -1247,81 +1097,80 @@
             })
         }
 
-        //Function for displaying toast notifications. pass in error for mode param if you want to show an error.
-        function notify(message, mode, pinned, sound) {
-
-            if (mode === 'error')
-                console.error(message)
-            else
-                console.log(message)
-            getRef('notification_drawer').push(message, mode, pinned)
-            if (navigator.onLine && sound) {
-                getRef('notification_sound').currentTime = 0;
-                getRef('notification_sound').play();
-            }
-        }
-
         // displays a popup for asking permission. Use this instead of JS confirm
-        let confirmation = (title, message, cancelText = 'Cancel', confirmText = 'OK') => {
+        const getConfirmation = (title, options = {}) => {
             return new Promise(resolve => {
-                showPopup('confirmation_popup')
-                getRef('confirm_title').textContent = title;
-                getRef('confirm_message').textContent = message;
+                const { message = '', cancelText = 'Cancel', confirmText = 'OK' } = options
+                openPopup('confirmation_popup', true)
+                getRef('confirm_title').innerText = title;
+                getRef('confirm_message').innerText = message;
                 let cancelButton = getRef('confirmation_popup').children[2].children[0],
                     submitButton = getRef('confirmation_popup').children[2].children[1]
                 submitButton.textContent = confirmText
                 cancelButton.textContent = cancelText
                 submitButton.onclick = () => {
-                    hidePopup()
+                    closePopup()
                     resolve(true);
                 }
                 cancelButton.onclick = () => {
-                    hidePopup()
+                    closePopup()
                     resolve(false);
                 }
             })
         }
-
         // displays a popup for asking user input. Use this instead of JS prompt
-        async function getPromptInput(title, message, showText = true, trueBtn = "Ok", falseBtn = "Cancel") {
-            showPopup('prompt_popup')
-            getRef('prompt_title').textContent = title;
-            let input = getRef('prompt_input');
-            input.setAttribute("placeholder", message)
+        function getPromptInput(title, message = '', options = {}) {
+            let { placeholder = '', isPassword = false, cancelText = 'Cancel', confirmText = 'OK' } = options
+            openPopup('prompt_popup', true)
+            getRef('prompt_title').innerText = title;
+            getRef('prompt_message').innerText = message;
             let buttons = getRef('prompt_popup').querySelectorAll("sm-button");
-            if (showText)
-                input.setAttribute("type", "text")
-            else
-                input.setAttribute("type", "password")
-            input.focusIn()
-            buttons[0].textContent = falseBtn;
-            buttons[1].textContent = trueBtn;
+            if (isPassword) {
+                placeholder = 'Password'
+                getRef('prompt_input').setAttribute("type", "password")
+            }
+            getRef('prompt_input').setAttribute("placeholder", placeholder)
+            getRef('prompt_input').focusIn()
+            buttons[0].textContent = cancelText;
+            buttons[1].textContent = confirmText;
             return new Promise((resolve, reject) => {
                 buttons[0].onclick = () => {
-                    hidePopup()
-                    return;
+                    closePopup()
+                    return (null);
                 }
                 buttons[1].onclick = () => {
-                    let value = input.value;
-                    hidePopup()
+                    const value = getRef('prompt_input').value;
+                    closePopup()
                     resolve(value)
                 }
             })
         }
 
-        const currentYear = new Date().getFullYear()
-        function getFormatedTime(time, relative) {
+        //Function for displaying toast notifications. pass in error for mode param if you want to show an error.
+        function notify(message, mode, options = {}) {
+            let icon
+            switch (mode) {
+                case 'success':
+                    icon = `<svg class="icon icon--success" 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 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>`
+                    break;
+                case 'error':
+                    icon = `<svg class="icon icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>`
+                    break;
+            }
+            getRef("notification_drawer").push(message, { icon, ...options });
+            if (mode === 'error') {
+                console.error(message)
+            }
+        }
+
+        function getFormattedTime(time, format) {
             try {
                 if (String(time).indexOf('_'))
                     time = String(time).split('_')[0]
                 const intTime = parseInt(time)
                 if (String(intTime).length < 13)
                     time *= 1000
-                let timeFrag = new Date(intTime).toString().split(' '),
-                    day = timeFrag[0],
-                    month = timeFrag[1],
-                    date = timeFrag[2],
-                    year = timeFrag[3],
+                let [day, month, date, year] = new Date(intTime).toString().split(' '),
                     minutes = new Date(intTime).getMinutes(),
                     hours = new Date(intTime).getHours(),
                     currentTime = new Date().toString().split(' ')
@@ -1336,32 +1185,28 @@
                     finalHours = `${hours}:${minutes}`
 
                 finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`
-                if (relative) {
-                    if (year == currentYear) {
-                        if (currentTime[1] === month) {
-                            const dateDiff = (parseInt(currentTime[2]) - parseInt(date))
-                            if (dateDiff === 0)
-                                return `${finalHours}`;
-                            else if (dateDiff === 1)
-                                return `Yesterday`;
-                            else if (dateDiff > 1 && dateDiff < 8)
-                                return currentTime[0];
-                            else
-                                return ` ${date} ${month}`;
-                        }
-                        else
-                            return ` ${date} ${month}`;
-                    }
-                    else
-                        return `${month} ${year}`;
+                switch (format) {
+                    case 'date-only':
+                        return `${month} ${date}, ${year}`;
+                        break;
+                    default:
+                        return `${month} ${date}, ${year} at ${finalHours}`;
                 }
-                else
-                    return `${finalHours} ${month} ${date} ${year}`;
             } catch (e) {
                 console.error(e);
                 return time;
             }
         }
+        // implement event delegation
+        function delegate(el, event, selector, fn) {
+            el.addEventListener(event, function (e) {
+                const potentialTarget = e.target.closest(selector)
+                if (potentialTarget) {
+                    e.delegateTarget = potentialTarget
+                    fn.call(this, e)
+                }
+            })
+        }
 
         function getContactName(floID) {
             let name
@@ -1375,206 +1220,114 @@
                 name = floID
             return name
         }
-
-        function areInputsValid(parent) {
-            let allInputs = parent.querySelectorAll("sm-input:not([disable]), pin-input:not([disable])"),
-                inputsFilled = [...allInputs].every(input => {
-                    if (input.hasAttribute('floId')) {
-                        if (floCrypto.validateAddr(input.value.trim())) return true
-                    }
-                    else if (input.hasAttribute('privateKey')) {
-                        if (floCrypto.getPubKeyHex(input.value.trim())) return true
-                    }
-                    else
-                        return input.isValid
-                })
-            let allRadios = parent.querySelectorAll("input[type='radio']")
-            if (allRadios.length)
-                return inputsFilled && parent.querySelector('[checked]')
-            else
-                return inputsFilled
-        }
-
-        function formValidation(formElement) {
-            let parent = formElement.closest('sm-popup') || formElement.closest('form'),
-                submitBtn
-            if (parent)
-                submitBtn = parent.querySelector("button[type='submit'], sm-button[variant='primary']");
-            if (!submitBtn) return;
-            if (areInputsValid(parent))
-                submitBtn.disabled = false;
-            else
-                submitBtn.disabled = true;
-        }
-
-        window.addEventListener('load', () => {
-            document.addEventListener('input', e => {
-                if (e.target.closest('sm-input')) {
-                    let input = e.target.closest('sm-input')
-                    formValidation(input)
-                    if (input.value === '')
-                        input.setValidity('')
-                    let validityState = input.validity
-                    if (input.hasAttribute('floId')) {
-                        if (floCrypto.validateAddr(input.value.trim()) || input.value.trim() === '')
-                            input.setValidity('')
-                        else
-                            input.setValidity('Invalid FLO address.')
-                    }
-                    else if (input.hasAttribute('privateKey')) {
-                        if (floCrypto.getPubKeyHex(input.value.trim()) || input.value.trim() === '')
-                            input.setValidity('')
-                        else
-                            input.setValidity('Invalid FLO private key.')
-                    }
-                }
-                else if (e.target.closest('pin-input')) {
-                    formValidation(e.target.closest('pin-input'))
-                }
-            })
+        window.addEventListener('hashchange', e => showPage(window.location.hash))
+        window.addEventListener("load", () => {
+            document.body.classList.remove('hide')
+            document.querySelectorAll('sm-input[data-flo-id]').forEach(input => input.customValidation = floCrypto.validateAddr)
             document.addEventListener('keyup', (e) => {
-                if (e.target.closest('sm-input, pin-input')) {
-                    if (e.key === 'Enter') {
-                        let parent = e.target.closest('sm-popup') || e.target.closest('form')
-                        parent.querySelector("button[type='submit'], sm-button[variant='primary'], sm-button[type='submit']")
-                            .click();
-                    }
-                }
-                if (e.code === 'Escape') {
-                    hidePopup()
+                if (e.key === 'Escape') {
+                    closePopup()
                 }
             })
-
-            document.addEventListener('pointerdown', (e) => {
-                if (e.target.closest('sm-button, .interact')) {
-                    createRipple(e, e.target.closest('sm-button, .interact'))
-                }
+            document.addEventListener('copy', () => {
+                notify('copied', 'success')
             })
-
-        })
+            document.addEventListener("pointerdown", (e) => {
+                if (e.target.closest("button:not([disabled]), sm-button:not([disabled]), .interact")) {
+                    createRipple(e, e.target.closest("button, sm-button, .interact"));
+                }
+            });
+            document.querySelectorAll('.popup__header__close, .close-popup-on-click').forEach(elem => {
+                elem.addEventListener('click', () => {
+                    closePopup()
+                })
+            })
+        });
         function createRipple(event, target) {
             const circle = document.createElement("span");
             const diameter = Math.max(target.clientWidth, target.clientHeight);
             const radius = diameter / 2;
-            const targetDimensions = target.getBoundingClientRect()
+            const targetDimensions = target.getBoundingClientRect();
             circle.style.width = circle.style.height = `${diameter}px`;
             circle.style.left = `${event.clientX - (targetDimensions.left + radius)}px`;
             circle.style.top = `${event.clientY - (targetDimensions.top + radius)}px`;
             circle.classList.add("ripple");
-            const rippleAnimation = circle.animate([
-
+            const rippleAnimation = circle.animate(
+                [
+                    {
+                        transform: "scale(4)",
+                        opacity: 0,
+                    },
+                ],
                 {
-                    transform: 'scale(3)',
-                    opacity: 0
-                }
-            ],
-                {
-                    duration: 1000,
+                    duration: 600,
                     fill: "forwards",
-                    easing: 'ease-out'
-                })
+                    easing: "ease-out",
+                }
+            );
             target.append(circle);
             rippleAnimation.onfinish = () => {
-                circle.remove()
-            }
+                circle.remove();
+            };
         }
-
-        function generateId() {
-            getRef('generate_flo_id').classList.add('hide-completely')
-            getRef('sign_in_with').classList.remove('hide-completely')
-            getRef('credentials_section').classList.remove('hide-completely')
-            let { floID, privKey } = floCrypto.generateNewID()
-            getRef('generated_id').textContent = floID
-            getRef('generated_key').textContent = privKey
-            getRef('private_key_input_field').value = privKey
+        let isMobileView = false
+        const mobileQuery = window.matchMedia('(max-width: 40rem)')
+        function handleMobileChange(e) {
+            isMobileView = e.matches
         }
+        mobileQuery.addEventListener('change', handleMobileChange)
+        handleMobileChange(mobileQuery)
 
-        const signIn = (type) => {
-            return new Promise((resolve, reject) => {
-                showPage('landing_page')
-                if (type === "PRIVATE_KEY") {
-                    getRef('get_pin').setAttribute('disable', '')
-                    getRef('get_pin').classList.add('hide-completely')
-                    getRef('private_key_input_field').removeAttribute('disable')
-                    getRef('private_key_input_field').classList.remove('hide-completely')
-                    getRef("type_of_key").textContent = 'FLO private key'
-                    getRef("remove_account").classList.add("hide-completely");
-                    setTimeout(() => {
-                        getRef('private_key_input_field').focusIn()
-                    }, 100)
-                } else if (type === "PIN/Password") {
-                    getRef('get_pin').removeAttribute('disable')
-                    getRef('get_pin').classList.remove('hide-completely')
-                    getRef('private_key_input_field').setAttribute('disable', '')
-                    getRef('private_key_input_field').classList.add('hide-completely')
-                    getRef("type_of_key").textContent = 'PIN'
-                    getRef("remove_account").classList.remove("hide-completely");
-                    showPage('sign_in_page')
-                    isPinSet = true;
-                    setTimeout(() => {
-                        getRef('get_pin').focusIn()
-                    }, 100);
-                }
-                getRef('sign_in_button').addEventListener('clicked', () => {
-                    let key
-                    if (type === "PRIVATE_KEY") {
-                        key = getRef('private_key_input_field').value;
-                        setTimeout(() => {
-                            getRef('private_key_input_field').value = ''
-                        }, 300);
-                    }
-                    else if (type === "PIN/Password") {
-                        key = getRef('get_pin').value;
-                        setTimeout(() => {
-                            getRef('get_pin').clear()
-                        }, 300);
-                    }
-                    showPage('loading_page')
-                    resolve(key)
-                })
-                getRef('sign_in_with').addEventListener('clicked', () => {
-                    // showFrame(2)
-                    resolve(getRef('generated_key').textContent)
-                })
+        function showChildElement(id, index) {
+            [...getRef(id).children].forEach((child, i) => {
+                if (i === index)
+                    child.classList.remove('hide')
+                else
+                    child.classList.add('hide')
             })
         }
+        function getSignedIn(passwordType) {
+            return new Promise((resolve, reject) => {
+                if (passwordType === 'PIN/Password') {
+                    getRef('private_key_field').removeAttribute('data-private-key');
+                    getRef('private_key_field').setAttribute('placeholder', 'PIN');
+                    getRef('private_key_field').customValidation = null
 
-        async function signOut() {
-            if (await confirmation('Sign Out', 'Are you sure you want to Sign out?', "Stay Signed In", "Sign Out")) {
-                await floDapps.clearCredentials()
-                setTimeout(() => {
-                    onLoadStartUp()
-                    getRef('notification_drawer').clearAll()
-                }, 1000);
-            }
-        }
-        async function loadPage() {
-            if (location.hash === '') {
-                history.pushState({ type: 'subpage', id: 'chat_page' }, null, '#chat_page')
-                showPage('chat_page', true)
-            }
-            else {
-                showPage(location.hash.split('#')[1], true)
-            }
-        }
-        function debounce(func, wait, immediate) {
-            let timeout;
-            return function () {
-                let context = this, args = arguments;
-                let later = function () {
-                    timeout = null;
-                    if (!immediate) func.apply(context, args);
+                } else {
+                    getRef('private_key_field').dataset.privateKey = ''
+                    getRef('private_key_field').setAttribute('placeholder', 'FLO private key');
+                    getRef('private_key_field').customValidation = floCrypto.getPubKeyHex
+                }
+                if (window.location.hash.includes('sign_in') || window.location.hash.includes('sign_up')) {
+                    showPage(window.location.hash);
+                } else {
+                    location.hash = `#/landing`;
+                }
+                getRef('sign_in_button').onclick = () => {
+                    resolve(getRef('private_key_field').value.trim());
+                    getRef('private_key_field').value = '';
+                    showPage('loading');
                 };
-                let callNow = immediate && !timeout;
-                clearTimeout(timeout);
-                timeout = setTimeout(later, wait);
-                if (callNow) func.apply(context, args);
-            };
-        };
+                getRef('sign_up_button').onclick = () => {
+                    resolve(getRef('generated_private_key').value.trim());
+                    getRef('generated_private_key').value = '';
+                    showPage('loading');
+                };
+            });
+        }
+        function signOut() {
+            getConfirmation('Sign out?', 'You are about to sign out of the app, continue?', 'Stay', 'Leave')
+                .then(async (res) => {
+                    if (res) {
+                        await floDapps.clearCredentials();
+                        location.reload();
+                    }
+                });
+        }
     </script>
-    
-	<script>
-		let activePage = {},
+
+    <script>
+        let activePage = {},
             activeChatPage = getRef('contacts'),
             activeMailPage = getRef('mails'),
             activeChat = {},
@@ -1584,12 +1337,7 @@
         // render elements 
         const render = {
             mailCard(floID, ref, subject, timestamp, content, markUnread) {
-                let card = getRef('mail_card_template').content.cloneNode(true),
-                    cardContainer = card.firstElementChild
-                let mailSummery = content.split(' ')
-                mailSummery.splice(16)
-                mailSummery = mailSummery.join(' ')
-                cardContainer.setAttribute("name", ref);
+                let mailSummery = content.split(' ').splice(16).join(' ')
                 let contact;
                 if (Array.isArray(floID)) {
                     for (let f of floID)
@@ -1603,19 +1351,15 @@
                     floID = floID.join(', ')
                 } else
                     contact = floGlobals.contacts[floID] || floID
-                if (markUnread)
-                    cardContainer.classList.add('unread')
-
-                let initial = cardContainer.querySelector('.initial')
-                let color = contactColor(floID)
-                initial.textContent = contact.charAt(0)
-                cardContainer.setAttribute("background-color", color)
-                initial.setAttribute(`style`, `background-color: ${color}`)
-                cardContainer.querySelector('.sender').textContent = contact
-                cardContainer.querySelector('.subject').textContent = subject
-                cardContainer.querySelector('.date').textContent = getFormatedTime(timestamp, true)
-                cardContainer.querySelector('.description').textContent = mailSummery
-                return card
+                return html`
+                    <li class="${`mail-card interact ${markUnread ? 'unread' : ''}`}" name="${ref}" background-color="${contactColor(floID)}">
+                        <div class="initial flex align-center" style=${`background-color: ${contactColor(floID)}`}>${contact.charAt(0)}</div>
+                        <h5 class="sender">${contact}</h5>
+                        <time class="date">${relativeTime.from(timestamp)}</time>
+                        <h4 class="subject text-overflow">${subject}</h4>
+                        <p class="description">${mailSummery}</p>
+                    </li>
+                `
             },
 
             mail(from, to, subject, timestamp, content) {
@@ -1640,93 +1384,79 @@
                 card.querySelector('.sender-name').textContent = senderName
                 card.querySelector('.flo-id').textContent = floID
                 card.querySelector('.mail-subject').textContent = subject
-                card.querySelector('.date').textContent = getFormatedTime(timestamp);
+                card.querySelector('.date').textContent = getFormattedTime(timestamp);
                 card.querySelector('.mail-content').textContent = content
                 return card
             },
             contactCard(floID, options = {}) {
                 let { name, type, prepend = false, markUnread = false, contactOnly = false, isAdmin = false, isSelected = false } = options
-                let card = getRef('contact_template').content.cloneNode(true),
-                    cardContainer = card.firstElementChild
                 if (!name)
                     name = getContactName(floID)
-
-                cardContainer.setAttribute("name", name)
-                cardContainer.setAttribute("flo-id", floID)
-                cardContainer.setAttribute("search-tags", `${name}${floID}`)
-                let initial = card.querySelector('.initial')
                 let color = contactColor(floID)
-                cardContainer.setAttribute("background-color", color)
-                initial.setAttribute(`style`, `background-color: ${color}`)
+                let initial
+                let adminTag
 
                 if (type === 'group') {
-                    initial.innerHTML = `
-                    <svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg>
-                    `
-                    cardContainer.querySelector('.name').textContent = messenger.groups[floID].name
+                    initial = html`<svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg> `
+                    name = messenger.groups[floID].name
+                } else {
+                    name = name !== 'Unknown' ? name : floID
+                    initial = name !== 'Unknown' ? name.charAt(0) : floID.charAt(0)
                 }
-                else {
-                    cardContainer.querySelector('.name').textContent = name !== 'Unknown' ? name : floID
-                    initial.textContent = name !== 'Unknown' ? name.charAt(0) : floID.charAt(0)
-                }
-
                 if (contactOnly || type === 'contact') {
                     if (isAdmin) {
-                        let adminTag = document.createElement('p')
-                        adminTag.textContent = 'Admin'
-                        cardContainer.classList.add('admin')
-                        adminTag.classList.add('admin-tag')
-                        cardContainer.append(adminTag)
+                        adminTag = html`<p class="admin-tag">Admin</p>`
                     }
-                }
-                else {
+                } else {
                     //render chat card for newly added contact
-                    if (type === 'chat')
-                        cardContainer.classList.add('chat')
-                    else
-                        cardContainer.classList.add('group')
-                    if (markUnread)
-                        cardContainer.classList.add('unread')
                     messenger.getChat(floID).then(chat => {
-                        let lastMessage = { message: '', time: 0 }
-                        if (Object.values(chat).length) {
-                            for (msg of Object.values(chat).reverse()) {
-                                if (msg.message) {
-                                    lastMessage = msg
-                                    break;
-                                }
-                            }
-                        }
-                        if (type === 'group' && lastMessage.time === 0) {
+                        let lastMessage = Object.values(chat).reverse().find(({ message }) => message) || { message: '', time: 0 }
+                        if (type === 'group' && lastMessage.time === 0)
                             lastMessage.time = messenger.groups[floID].created
-                        }
-                        let lastText = document.createElement('p')
-                        if ((type === 'chat' && lastMessage.category === 'sent') || (type === 'group' && lastMessage.sender === myFloID)) {
-                            lastText.textContent = `You: ${lastMessage.message}`
-                        }
-                        else {
-                            lastText.textContent = lastMessage.message
-                        }
-                        lastText.classList.add('last-message')
-                        cardContainer.append(lastText)
-                        cardContainer.innerHTML += `
-                        <h5 class="time">${getFormatedTime(lastMessage.time, true)}</h5>
-                        <svg class="icon menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-                            <circle cx="5.59" cy="32" r="5.59"/>
-                            <circle cx="58.41" cy="32" r="5.59"/>
-                            <circle cx="31.89" cy="32" r="5.59"/>
-                        </svg>`
-                    })
-                        .catch(error => console.error(error))
+                        const amISender = type === 'chat' && lastMessage.category === 'sent' || type === 'group' && lastMessage.sender === myFloID
+                        const lastText = html`<p class="last-message">${amISender ? 'You' : ''} ${lastMessage.message}</p>`
+                        const timeAndOptions = html`
+                            <h5 class="time">${relativeTime.from(lastMessage.time)}</h5>
+                            <svg class="icon menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <circle cx="5.59" cy="32" r="5.59"/> <circle cx="58.41" cy="32" r="5.59"/> <circle cx="31.89" cy="32" r="5.59"/> </svg>
+                        `;
+                        getRef('chats_list').querySelector(`.contact[flo-id="${floID}"]`).append(html.node`${lastText}${timeAndOptions}`)
+                    }).catch(error => console.error(error))
                     if (prepend) {
                         activeChat['floID'] = floID
                         if (activeChat['chatCard'])
                             activeChat['chatCard'].classList.remove('active')
                     }
                 }
-                if (isSelected)
-                    addTick(cardContainer, { animate: false })
-                return card
+                const className = `contact ${type !== 'contact' ? type : ''} ${markUnread ? 'unread' : ''} ${isSelected ? 'selected' : ''}`
+                return html`
+                    <div class="${className}" name=${name} flo-id=${floID} search-tags=${`${name}${floID}`} background-color=${color}>
+                        <div class="initial flex align-center" style=${`background-color: ${color}`}>
+                            ${initial} ${isSelected ? html`<div class="tick"><svg class="icon" viewBox="0 0 64 64"> <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/></svg></div>` : ''}
+                        </div>
+                        <h4 class="name">${name}</h4>
+                        ${adminTag}
+                    </div>
+                `
+            },
+            selectableContact(floID, isSelected) {
+                if (!name)
+                    name = getContactName(floID)
+
+                let initial
+                let color = contactColor(floID)
+
+                name = name !== 'Unknown' ? name : floID
+                initial = name !== 'Unknown' ? name.charAt(0) : floID.charAt(0)
+                const className = `flex align-center ${isSelected ? 'selected' : ''}`
+                return html`
+                    <label class="${className}" name=${name} flo-id=${floID} background-color=${color}>
+                        <div class="initial flex align-center" style=${`background-color: ${color}`}>
+                            ${initial} ${isSelected ? html`<div class="tick"><svg class="icon" viewBox="0 0 64 64"> <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/></svg></div>` : ''}
+                        </div>
+                        <h4 class="name">${name}</h4>
+                        <input type="checkbox"/>
+                    </label>
+                `
             },
             messageBubble(msg) {
                 let { admin = false, newMembers = [], rmMembers = [], groupID, name, description, sender, floID, message, time: timestamp, category, unconfirmed = false, updateChatCard = false } = msg
@@ -1741,28 +1471,6 @@
                 }
 
                 if (message) {
-                    if (updateChatCard) {
-                        if (category === 'offer') {
-                            showPage('video_call_page')
-                            remoteSdp = message
-                        }
-                        else if (category === 'answer') {
-                            startVideoCall(message)
-                            return
-                        }
-                    }
-                    else if (category === 'offer') {
-                        let eventCard = document.createElement('p')
-                        eventCard.classList.add('group-event-card')
-                        eventCard.textContent = `You called ${getContactName(floID)}`
-                        return eventCard
-                    }
-                    else if (category === 'answer') {
-                        let eventCard = document.createElement('p')
-                        eventCard.classList.add('group-event-card')
-                        eventCard.textContent = `${getContactName(floID)} called you`
-                        return eventCard
-                    }
                     cardContainer.id = `${floID}_${timestamp}`
                     if (unconfirmed)
                         cardContainer.classList.add('unconfirmed')
@@ -1771,14 +1479,9 @@
 
                     if (sender) {
                         if (sender !== myFloID && lastSender !== sender) {
-                            let senderName = document.createElement('div')
-                            senderName.classList.add('sender-name')
-                            senderName.style.color = contactColor(sender)
-                            senderName.textContent = getContactName(sender)
+                            let senderName = html.node`<div class="sender-name" style=${`color:${contactColor(sender)}`}>${getContactName(sender)}</div>`
                             cardContainer.prepend(senderName)
-
                             cardContainer.classList.add('distinct-sender')
-
                             messageContent = cardContainer.children[1]
                             messageTime = cardContainer.children[2]
                         }
@@ -1790,11 +1493,9 @@
                         const chunksLength = chunks.length - 1
                         chunks.forEach((chunk, index) => {
                             if (hasURL(chunk)) {
-                                const anchorTag = document.createElement('a')
-                                anchorTag.href = /^https?:\/\//i.test(chunk) ? chunk : `http://${chunk}`
-                                anchorTag.target = "_blank"
-                                anchorTag.rel = "noopener"
-                                anchorTag.textContent = chunksLength !== index ? `${chunk} ` : chunk
+                                const href = /^https?:\/\//i.test(chunk) ? chunk : `http://${chunk}`
+                                const text = chunksLength !== index ? `${chunk} ` : chunk
+                                const anchorTag = html.node`<a href="${href}" target="_blank" rel="noopener">${text}</a>`
                                 messageContent.append(anchorTag)
                             }
                             else {
@@ -1826,31 +1527,21 @@
                     }
 
                     if (!renderedDates.has(`${time.slice(4, 10)} ${year}`) && `${time.slice(4, 10)} ${year}` !== currentDate) {
-                        let dateCard = document.createElement('h5')
-                        dateCard.classList.add('date-card')
-                        dateCard.textContent = new Date().getFullYear() !== year ? `${time.slice(4, 10)} ${year}` : time.slice(4, 10)
-                        currentDate = `${time.slice(4, 10)} ${year}`
                         let frag = document.createDocumentFragment()
+                        currentDate = `${time.slice(4, 10)} ${year}`
+                        let dateCard = html.node`<time class="date-card">${new Date().getFullYear() !== year ? `${time.slice(4, 10)} ${year}` : time.slice(4, 10)}</time>`
                         frag.append(dateCard, card)
                         renderedDates.set(currentDate, currentDate)
                         return frag
                     }
                     else
                         return card;
-                }
-                else if (admin) {
+                } else if (admin) {
                     if (newMembers.length) {
                         const cards = document.createDocumentFragment()
                         const { admin } = messenger.groups[groupID]
                         newMembers.forEach(member => {
-                            let eventCard = document.createElement('p')
-                            eventCard.classList.add('group-event-card')
-                            let eventMessage = ''
-                            if (member === myFloID)
-                                eventMessage = `${getContactName(admin)} added you`
-                            else
-                                eventMessage = `${getContactName(admin)} added ${getContactName(member)}`
-                            eventCard.textContent = eventMessage
+                            let eventCard = html.node`<p class="group-event-card">${getContactName(admin)} added ${member === myFloID ? 'you' : getContactName(member)}</p>`
                             cards.append(eventCard)
                         })
                         return cards
@@ -1859,29 +1550,16 @@
                         const cards = document.createDocumentFragment()
                         const { admin } = messenger.groups[groupID]
                         rmMembers.forEach(member => {
-                            let eventCard = document.createElement('p')
-                            eventCard.classList.add('group-event-card')
-                            let eventMessage = ''
-                            if (member === myFloID)
-                                eventMessage = `${getContactName(admin)} removed you`
-                            else
-                                eventMessage = `${getContactName(admin)} removed ${getContactName(member)}`
-                            eventCard.textContent = eventMessage
+                            let eventCard = html.node`<p class="group-event-card">${getContactName(admin)} removed ${member === myFloID ? 'you' : getContactName(member)}</p>`
                             cards.append(eventCard)
                         })
                         return cards
                     }
                     else if (name) {
-                        let eventCard = document.createElement('p')
-                        eventCard.classList.add('group-event-card')
-                        eventCard.textContent = `Changed group name to '${name}'`
-                        return eventCard
+                        return html.node`<p class="group-event-card">Changed group name to '${name}'</p>`
                     }
                     else if (description) {
-                        let eventCard = document.createElement('p')
-                        eventCard.classList.add('group-event-card')
-                        eventCard.textContent = `Changed group description to '${description}'`
-                        return eventCard
+                        return html.node`<p class="group-event-card">Changed group description to '${description}'</p>`
                     }
                 }
 
@@ -1945,15 +1623,12 @@
                 }
             }
         })
-        window.addEventListener('blur', e => {
-            console.log('blured')
-        })
 
         document.addEventListener('keyup', e => {
             if (e.target.closest('#send_mail_to')) {
                 if (e.code === 'ArrowDown') {
                     for (child of getRef('mail_contact_list').children) {
-                        if (!child.classList.contains('hide-completely')) {
+                        if (!child.classList.contains('hide')) {
                             child.focus()
                             break
                         }
@@ -1961,7 +1636,7 @@
                 }
                 if (e.code === 'Enter' && getRef('mail_contact_list').firstElementChild) {
                     for (child of getRef('mail_contact_list').children) {
-                        if (!child.classList.contains('hide-completely')) {
+                        if (!child.classList.contains('hide')) {
                             child.click()
                             break
                         }
@@ -1970,8 +1645,8 @@
             }
             if (e.target.closest('#search_chats')) {
                 if (e.code === 'ArrowDown') {
-                    for (child of getRef('chat_container').children) {
-                        if (!child.classList.contains('hide-completely')) {
+                    for (child of getRef('chats_list').children) {
+                        if (!child.classList.contains('hide')) {
                             child.focus()
                             break
                         }
@@ -1979,7 +1654,7 @@
                 }
                 if (e.code === 'Enter' && getRef('contacts_container').firstElementChild) {
                     for (child of getRef('contacts_container').children) {
-                        if (!child.classList.contains('hide-completely')) {
+                        if (!child.classList.contains('hide')) {
                             child.click()
                             break
                         }
@@ -2001,53 +1676,47 @@
                 }
                 if (e.code === 'Enter' || e.code === 'Space') {
                     getRef('send_mail_to').value = document.activeElement.getAttribute('flo-id')
-                    getRef('mail_contact_list').classList.add('hide-completely')
+                    getRef('mail_contact_list').classList.add('hide')
                 }
             }
         })
 
         const chatScrollInfo = {};
-        let debounceTimer
-        getRef('chat_middle').addEventListener('scroll', function () {
-            if (debounceTimer) {
-                window.clearTimeout(debounceTimer)
+        getRef('chat_middle').addEventListener('scroll', debounce(() => {
+            chatScrollInfo['scrollTop'] = this.scrollTop
+            chatScrollInfo['scrollheight'] = this.scrollHeight
+            if ((this.scrollHeight > this.clientHeight) && (this.scrollHeight - this.clientHeight - this.scrollTop >= 100)) {
+                chatScrollInfo['isScrolledUp'] = true
+                getRef('scroll_to_bottom').classList.add('no-transformations')
             }
-            debounceTimer = setTimeout(e => {
-                chatScrollInfo['scrollTop'] = this.scrollTop
-                chatScrollInfo['scrollheight'] = this.scrollHeight
-                if ((this.scrollHeight > this.clientHeight) && (this.scrollHeight - this.clientHeight - this.scrollTop >= 100)) {
-                    chatScrollInfo['isScrolledUp'] = true
-                    getRef('scroll_to_bottom').classList.add('no-transformations')
-                }
-                else {
-                    chatScrollInfo['isScrolledUp'] = false
-                    getRef('scroll_to_bottom').classList.remove('no-transformations', 'new-message')
-                }
-            }, 100)
-        }, { passive: true })
+            else {
+                chatScrollInfo['isScrolledUp'] = false
+                getRef('scroll_to_bottom').classList.remove('no-transformations', 'new-message')
+            }
+        }, 100), { passive: true })
 
         getRef('send_mail_to').addEventListener('input', function () {
-            getRef('mail_contact_list').classList.remove('hide-completely')
+            getRef('mail_contact_list').classList.remove('hide')
             if (this.value.trim !== '') {
                 for (child of getRef('mail_contact_list').children) {
                     if (child.getAttribute('name').toUpperCase().indexOf(this.value.toUpperCase()) > -1) {
-                        child.classList.remove('hide-completely')
+                        child.classList.remove('hide')
                     }
                     else {
-                        child.classList.add('hide-completely')
+                        child.classList.add('hide')
                     }
                 }
             }
         })
 
         getRef('search_chats').addEventListener('input', function (e) {
-            const contacts = getRef('chat_container').querySelectorAll('.contact')
+            const contacts = getRef('chats_list').querySelectorAll('.contact')
             contacts.forEach(child => {
                 if (child.getAttribute('search-tags').toLowerCase().includes(this.value.toLowerCase())) {
-                    child.classList.remove('hide-completely')
+                    child.classList.remove('hide')
                 }
                 else {
-                    child.classList.add('hide-completely')
+                    child.classList.add('hide')
                 }
             })
         })
@@ -2057,11 +1726,10 @@
             for (contact in floGlobals.contacts) {
                 if (contact.toLowerCase().includes(this.value.toLowerCase()) || floGlobals.contacts[contact].toLowerCase().includes(this.value.toLowerCase())) {
                     contacts[contact] = floGlobals.contacts[contact]
-                    if (isCreatingGroup && !(contact in floGlobals.pubKeys))
+                    if (floGlobals.isCreatingGroup && !(contact in floGlobals.pubKeys))
                         delete contacts[contact]
                 }
             }
-            getRef('contacts_container').innerHTML = ''
             renderContactList(contacts)
         })
 
@@ -2071,25 +1739,20 @@
                 if (target.dataset.target)
                     showPanel(target, target.dataset.target)
             }
-            if (e.target.closest('.navbar-item') && activePage.button !== e.target.closest('.navbar-item')) {
-                const targetPage = e.target.closest('.navbar-item').dataset.target
-                showPage(targetPage, true)
-                history.pushState({ type: 'subpage', id: targetPage }, null, `#${targetPage}`)
-            }
             if (e.target.closest('#send_mail_to') || e.target.closest('#mail_contact_list')) {
-                getRef('mail_contact_list').classList.remove('hide-completely')
+                getRef('mail_contact_list').classList.remove('hide')
             }
             else {
-                getRef('mail_contact_list').classList.add('hide-completely')
+                getRef('mail_contact_list').classList.add('hide')
             }
             if (e.target.closest('#new_mail_button')) {
-                showPopup('compose_mail_popup')
+                openPopup('compose_mail_popup')
             }
 
             //Detect click on send mail option 
             if (e.target.closest(".send-mail-option")) {
                 let floID;
-                showPopup('compose_mail_popup')
+                openPopup('compose_mail_popup')
                 floID = e.target.closest(".contact").getAttribute("flo-id");
                 getRef('send_mail_to').value = floID;
                 return false;
@@ -2101,12 +1764,6 @@
             }
         })
 
-        getRef('chat_page').addEventListener('contextmenu', e => {
-            if (e.target.closest('.contact')) {
-                e.preventDefault()
-            }
-        })
-
         let holdTimeout
         let holdThreshold = 500
 
@@ -2120,7 +1777,7 @@
                     clickedContact['floID'] = contact.getAttribute("flo-id")
                     clickedContact['name'] = contact.getAttribute("name")
                     clickedContact['isGroup'] = messenger.groups.hasOwnProperty(clickedContact['floID'])
-                    showPopup('contact_details_popup')
+                    openPopup('contact_details_popup')
                 }, 500)
                 getRef('chat_page').addEventListener('touchmove', handleTouchMove)
             }
@@ -2142,42 +1799,39 @@
         getRef('mail_contact_list').addEventListener('click', e => {
             if (e.target.closest('.contact')) {
                 getRef('send_mail_to').value = e.target.closest('.contact').getAttribute('flo-id')
-                getRef('mail_contact_list').classList.add('hide-completely')
+                getRef('mail_contact_list').classList.add('hide')
             }
         })
 
 
-        const clickedContact = {}
+        let clickedContact = {}
 
         getRef('chat_page').addEventListener('click', e => {
             //detect click on chat cards
             if (e.target.closest(".contact")) {
                 let contact = e.target.closest(".contact")
-                clickedContact['chatCard'] = contact
-                clickedContact['floID'] = contact.getAttribute("flo-id")
-                clickedContact['name'] = contact.getAttribute("name")
-                clickedContact['isGroup'] = messenger.groups.hasOwnProperty(clickedContact['floID'])
-
+                clickedContact = {
+                    ...clickedContact,
+                    chatCard: contact,
+                    floID: contact.getAttribute("flo-id"),
+                    name: contact.getAttribute("name"),
+                    isGroup: messenger.groups.hasOwnProperty(clickedContact['floID'])
+                }
                 if (clickedContact['floID'] === myFloID) return
 
                 if (e.target.closest(".selectable")) {
                     if (isRemovingMember)
                         selectMemberToRemove(e.target.closest(".selectable"))
                 }
-                else if (isCreatingGroup) {
-                    // code for adding group members
-                    selectContact(contact)
-                }
                 else if (e.target.closest(".initial") || e.target.closest(".menu")) {
-                    showPopup('contact_details_popup')
+                    openPopup('contact_details_popup')
                 }
                 else {
-                    createRipple(e, contact)
                     contact.classList.remove('unread')
                     if (activeChat['chatCard'] === contact && window.innerWidth > 640) return
                     showChatDetails({ show: false, animate: false })
                     document.title = `FLO Messenger`
-                    getRef('chat').classList.remove('hide-completely')
+                    getRef('chat').classList.remove('hide')
                     viewConversation(contact)
                     if (activeChat['chatCard'])
                         activeChat['chatCard'].classList.remove('active')
@@ -2190,8 +1844,7 @@
                         getRef('main_navbar').classList.add('hide-on-mobile')
                     }
                 }
-            }
-            else if (e.target.closest('.contact-preview')) {
+            } else if (e.target.closest('.contact-preview')) {
                 removeSelectedContact(e.target.closest('.contact-preview').getAttribute('flo-id'))
             }
         })
@@ -2202,48 +1855,6 @@
             }
         })
 
-        // Function to show all contacts side drawer
-        let contactsDrawerAnimation
-        function showContacts(options) {
-            const { show = true, onlyValid = false } = options
-            let contacts = {}
-            if (show) {
-                getRef('contacts_container').innerHTML = ''
-                // Show contacts which replied
-                if (onlyValid) {
-                    for (contact in floGlobals.contacts) {
-                        if (contact in floGlobals.pubKeys) {
-                            contacts[contact] = floGlobals.contacts[contact]
-                        }
-                    }
-                }
-                else {
-                    contacts = floGlobals.contacts
-                }
-                renderContactList(contacts)
-                getRef('all_contacts').classList.remove('hide-completely')
-                contactsDrawerAnimation = animateTo(getRef('all_contacts'), [
-                    { transform: 'translateY(2rem)' },
-                    { transform: 'translateY(0)' },
-                ], {
-                    duration: 300,
-                    easing: 'ease'
-                })
-            }
-            else {
-                isCreatingGroup = false
-                clearAllMembers()
-                contactsDrawerAnimation.reverse()
-                contactsDrawerAnimation.onfinish = () => {
-                    getRef('all_contacts').classList.add('hide-completely')
-                    getRef('all_contacts_options').classList.remove('hide-completely')
-                    getRef('selected_contacts').classList.add('hide-completely')
-                    getRef('skip_members_button').classList.add('hide-completely')
-                    getRef('contacts_container').innerHTML = ''
-                }
-            }
-        }
-
         function transformScroll(event) {
             if (!event.deltaY) {
                 return;
@@ -2261,14 +1872,13 @@
                 selectedGroupMembers.add(clickedContact.floID)
                 const clonedInitial = contact.querySelector('.initial').cloneNode(true);
                 const clonedName = contact.querySelector('.name').cloneNode(true);
-                const preview = document.createElement('div')
-                preview.classList.add('contact-preview')
-                preview.setAttribute('flo-id', clickedContact['floID']);
-                preview.append(clonedInitial, clonedName)
+                const preview = html.node`<div class="contact-preview" flo-id="${clickedContact.floID}">
+                    ${clonedInitial}
+                    ${clonedName}
+                </div>`
                 addCross(preview)
                 getRef('selected_contacts_container').append(preview)
                 preview.scrollIntoView({ behavior: "smooth", inline: "end" });
-
                 preview.animate(
                     [
                         { transform: 'scale(0)' },
@@ -2318,89 +1928,16 @@
             getRef('selected_contacts_container').innerHTML = ''
             selectedGroupMembers.clear()
         }
-        let isCreatingGroup = false
-        function initGroupCreation() {
-            isCreatingGroup = true
-            showContacts({ show: true, onlyValid: true })
-            getRef('all_contacts_options').classList.add('hide-completely')
-            getRef('selected_contacts').classList.remove('hide-completely')
-            getRef('skip_members_button').classList.remove('hide-completely')
-        }
 
-        function skipToGroupCreation() {
-            const animOptions = {
-                duration: 300,
-                fill: 'forwards',
-                easing: 'ease'
-            }
-            getRef('all_contacts').animate(
-                [
-                    { transform: 'translateX(0)' },
-                    { transform: 'translateX(-25%)' },
-                ],
-                animOptions
-            ).onfinish = () => {
-                getRef('all_contacts').classList.add('hide-completely')
-            }
-            getRef('group_creation_panel').classList.remove('hide-completely')
-            getRef('group_creation_panel').animate(
-                [
-                    { transform: 'translateX(100%)' },
-                    { transform: 'translateX(0)' },
-                ],
-                animOptions
-            )
-        }
-        function backToContacts() {
-            const animOptions = {
-                duration: 300,
-                fill: 'forwards',
-                easing: 'ease'
-            }
-            getRef('group_creation_panel').animate(
-                [
-                    { transform: 'translateX(0)' },
-                    { transform: 'translateX(100%)' },
-                ],
-                animOptions
-            ).onfinish = () => {
-                getRef('group_creation_panel').classList.add('hide-completely')
-            }
-            getRef('all_contacts').classList.remove('hide-completely')
-            getRef('all_contacts').animate(
-                [
-                    { transform: 'translateX(-25%)' },
-                    { transform: 'translateX(0)' },
-                ],
-                animOptions
-            )
-        }
-
-        document.getElementById('create_group_button').addEventListener('clicked', createGroup)
-        function createGroup() {
+        document.getElementById('create_group_button').addEventListener('click', () => {
             const groupName = getRef('group_name_field').value.trim()
             const groupDescription = getRef('group_description_field').value.trim()
             messenger.createGroup(groupName, groupDescription)
                 .then(groupInfo => {
-                    isCreatingGroup = false
-                    getRef('chat_container').prepend(render.contactCard(groupInfo.groupID, { type: 'group' }))
-                    getRef('chat_container').children[0].click()
-                    getRef('group_creation_panel').animate(
-                        [
-                            { transform: 'translateY(0)' },
-                            { transform: 'translateY(2rem)' },
-                        ],
-                        {
-                            duration: 150,
-                            fill: 'forwards',
-                            easing: 'ease'
-                        }
-                    ).onfinish = () => {
-                        getRef('all_contacts').classList.add('hide-completely')
-                        getRef('group_creation_panel').classList.add('hide-completely')
-                        getRef('all_contacts_options').classList.remove('hide-completely')
-                        getRef('selected_contacts').classList.add('hide-completely')
-                    }
+                    floGlobals.isCreatingGroup = false
+                    getRef('chats_list').prepend(render.contactCard(groupInfo.groupID, { type: 'group' }))
+                    getRef('chats_list').children[0].click()
+                    closePopup()
                     notify('Group created', 'success')
                     if (selectedGroupMembers.size) {
                         messenger.addGroupMembers(groupInfo.groupID, [...selectedGroupMembers])
@@ -2411,7 +1948,7 @@
                     }
                 })
                 .catch(err => console.error(err))
-        }
+        })
 
         let isEmojiPickerOpen = false
         function toggleEmoji(mode) {
@@ -2419,12 +1956,12 @@
                 case 'toggle':
                     isEmojiPickerOpen = true
                     getRef('emoji_toggle').classList.toggle('active')
-                    getRef('emoji_picker').classList.toggle('hide-completely')
+                    getRef('emoji_picker').classList.toggle('hide')
                     break;
                 case 'hide':
                     isEmojiPickerOpen = false
                     getRef('emoji_toggle').classList.remove('active')
-                    getRef('emoji_picker').classList.add('hide-completely')
+                    getRef('emoji_picker').classList.add('hide')
                     break;
             }
             getRef('scroll_to_bottom').setAttribute('style', `bottom: calc(${window.innerHeight - getRef('chat_footer').getBoundingClientRect().top}px - .5rem)`)
@@ -2444,39 +1981,24 @@
 
         const style = document.createElement('style');
         style.textContent = `
-        .emoji-menu{
-            border-top: solid rgba(var(--text-color), 0.2) 1px;
-            background: rgba(var(--foreground-color), 0.6);
-        }
-        @media (hover: hover){
-            ::-webkit-scrollbar{
-                width: 0.5rem;
-                height: 0.5rem;
+            .emoji-menu{
+                border-top: solid rgba(var(--text-color), 0.2) 1px;
+                background: rgba(var(--foreground-color), 0.6);
             }
-            
-            ::-webkit-scrollbar-thumb{
-                background: rgba(var(--text-color), 0.3);
-                border-radius: 1rem;
-                &:hover{
-                    background: rgba(var(--text-color), 0.5);
+            @media (hover: hover){
+                ::-webkit-scrollbar{
+                    width: 0.5rem;
+                    height: 0.5rem;
                 }
-            }
-        }`
-
-        function copyToClipboard(element, message, parent = '.copy-row') {
-            const parentElement = element.closest(parent)
-            const copyTarget = parentElement.querySelector('.copy')
-            if (copyTarget.tagName === 'SM-INPUT' || copyTarget.tagName === 'INPUT' || copyTarget.tagName === 'TEXTAREA')
-                copyText = copyTarget.value
-            else
-                copyText = copyTarget.textContent
-            navigator.clipboard.writeText(copyText).then(() => {
-                notify(`${message}`, 'success')
-            })
-                .catch(error => {
-                    notify(error, 'error')
-                })
-        }
+                
+                ::-webkit-scrollbar-thumb{
+                    background: rgba(var(--text-color), 0.3);
+                    border-radius: 1rem;
+                    &:hover{
+                        background: rgba(var(--text-color), 0.5);
+                    }
+                }
+            }`
 
         let isEnterSend = true
         if (localStorage.getItem('isEnterSend') === null)
@@ -2527,7 +2049,7 @@
         getRef("mails").addEventListener('click', function (e) {
             if (e.target.closest(".mail-card")) {
                 getRef('mail_page_button').setAttribute('data-notifications', '0')
-                getRef('mail').classList.remove('hide-completely')
+                getRef('mail').classList.remove('hide')
                 e.target.closest(".mail-card").classList.remove('unread')
                 viewMail(e.target.closest(".mail-card").getAttribute("name"));
                 if (activeMail)
@@ -2582,31 +2104,27 @@
             }
         });
 
-        getRef('add_contact_button').addEventListener("clicked", addContact)
+        getRef('add_contact_button').addEventListener("click", addContact)
 
         getRef('show_reply_popup').addEventListener("click", () => {
-            showPopup('reply_mail_popup')
+            openPopup('reply_mail_popup')
         })
 
-        getRef('reply_mail_button').addEventListener("clicked", replyMail)
+        getRef('reply_mail_button').addEventListener("click", replyMail)
 
         getRef("backup_data").addEventListener("click", function (e) {
-            let backupInfoText = getRef("backup_info")
-            backupInfoText.classList.remove("error")
-            backupInfoText.textContent = `Generating the backup file! Please wait...`;
+            renderElem(getRef("backup_info"), html`Generating the backup file! Please wait...`)
             messenger.backupData().then(blob => {
-                let anchor = document.createElement('a')
-                anchor.setAttribute("download", `BackupFor_${myFloID}_${Date.now()}.json`)
-                anchor.setAttribute("href", URL.createObjectURL(blob))
-                backupInfoText.textContent =
-                    `Backup file generated! If the download didn't start automatically, click `;
-                anchor.textContent = `here.`;
-                backupInfoText.append(anchor);
-                anchor.click();
+                renderElem(getRef("backup_info"), html`
+                    Backup file generated! If the download didn't start automatically, 
+                    <a href="${URL.createObjectURL(blob)}" download="${`BackupFor_${myFloID}_${Date.now()}.json`}">click here</a>
+                `)
+                getRef("backup_info").querySelector('a').click();
             }).catch(error => {
-                backupInfoText.classList.add("error")
-                backupInfoText.textContent = `Unable to generate backup file! Try again later...`;
-                notify("Backup data Unsuccessful!", "error", error);
+                renderElem(getRef("backup_info"), html`Unable to generate backup file! Try again later...`)
+                getRef("backup_info").classList.add("error")
+                notify("Backup data Unsuccessful!", "error");
+                console.error(error)
             })
         })
 
@@ -2654,14 +2172,14 @@
                 msgObj['category'] = 'sent'
             }
             getRef('messages_container').append(render.messageBubble(msgObj))
-            const contact = getRef('chat_container').querySelector(`.chat[flo-id="${receiver}"], .group[flo-id="${receiver}"]`)
+            const contact = getRef('chats_list').querySelector(`.chat[flo-id="${receiver}"], .group[flo-id="${receiver}"]`)
             if (contact) {
-                if (activeChat['chatCard'] !== getRef('chat_container').children[0]) {
+                if (activeChat['chatCard'] !== getRef('chats_list').children[0]) {
                     const cloneContact = contact.cloneNode(true)
                     contact.remove()
                     activeChat['chatCard'] = cloneContact
-                    getRef('chat_container').prepend(cloneContact)
-                    animateTo(getRef('chat_container').children[0], [
+                    getRef('chats_list').prepend(cloneContact)
+                    animateTo(getRef('chats_list').children[0], [
                         { transform: 'translateY(1rem)' },
                         { transform: 'none' },
                     ],
@@ -2674,22 +2192,22 @@
             }
             else {
                 messenger.addChat(receiver)
-                getRef('chat_container').prepend(render.contactCard(receiver, { type: 'chat', prepend: true }))
-                getRef('chat_container').children[0].classList.add('active')
-                activeChat['chatCard'] = getRef('chat_container').children[0]
+                getRef('chats_list').prepend(render.contactCard(receiver, { type: 'chat', prepend: true }))
+                getRef('chats_list').children[0].classList.add('active')
+                activeChat['chatCard'] = getRef('chats_list').children[0]
             }
             scrollToBottom()
             if (activeChat.isGroup)
                 messenger.sendGroupMessage(message, receiver).then(data => {
                     getRef('messages_container').querySelector(`#${receiver}_${time}`).classList.remove('unconfirmed')
                     activeChat.chatCard.querySelector('.last-message').textContent = `You: ${message}`
-                    activeChat.chatCard.querySelector('.time').textContent = getFormatedTime(Date.now(), true)
+                    activeChat.chatCard.querySelector('.time').textContent = relativeTime.from(Date.now())
                 }).catch(error => notify(error, "error"));
             else
                 messenger.sendMessage(message, receiver).then(data => {
                     getRef('messages_container').querySelector(`#${receiver}_${time}`).classList.remove('unconfirmed')
                     activeChat.chatCard.querySelector('.last-message').textContent = `You: ${message}`
-                    activeChat.chatCard.querySelector('.time').textContent = getFormatedTime(Date.now(), true)
+                    activeChat.chatCard.querySelector('.time').textContent = relativeTime.from(Date.now())
                 }).catch(error => notify(error, "error"));
         }
 
@@ -2714,34 +2232,32 @@
                 return
             }
             messenger.storeContact(floID, name).then(result => {
-                getRef('contacts_container').append(render.contactCard(floID, { name, type: 'contact' }))
-                hidePopup()
+                renderContactList()
+                closePopup()
                 notify(`Added Contact: ${floID}`)
             }).catch(error => notify(error, "error"));
         }
 
         function renderContactList(contactList = {}) {
-            const frag = document.createDocumentFragment()
+            const contacts = []
             for (floID in contactList) {
                 let isSelected = selectedGroupMembers.has(floID)
-                frag.append(render.contactCard(floID, { type: 'contact', isSelected }))
+                contacts.push(render.contactCard(floID, { type: 'contact', isSelected }))
             }
-            getRef('contacts_container').append(frag)
+            renderElem(getRef('contacts_container'), html`${contacts}`)
         }
 
         async function renderChatList(chatOrder) {
-            const frag = document.createDocumentFragment()
-            getRef('chat_container').innerHTML = ''
-            for (floID of chatOrder) {
+            const chats = chatOrder.map(floID => {
                 const markUnread = messenger.marked[floID]?.includes('unread')
                 let type
                 if (messenger.chats[floID])
                     type = 'chat'
                 else if (messenger.groups[floID])
                     type = 'group'
-                frag.append(render.contactCard(floID, { type, markUnread }))
-            }
-            getRef('chat_container').append(frag)
+                return render.contactCard(floID, { type, markUnread })
+            })
+            renderElem(getRef('chats_list'), html`${chats}`)
         }
 
         function renderMarked(data) {
@@ -2801,14 +2317,14 @@
                         }
                         frag.append(render.messageBubble({ ...messages[i], updateChatCard }))
                     }
-                    const contact = getRef('chat_container').querySelector(`.contact[flo-id='${floID || groupID}']`)
+                    const contact = getRef('chats_list').querySelector(`.contact[flo-id='${floID || groupID}']`)
                     if (markUnread && contact) {
                         contact.classList.add("unread");
-                        if (contact !== getRef('chat_container').children[0]) {
+                        if (contact !== getRef('chats_list').children[0]) {
                             const cloneContact = contact.cloneNode(true)
                             contact.remove()
-                            getRef('chat_container').prepend(cloneContact)
-                            animateTo(getRef('chat_container').children[0], [
+                            getRef('chats_list').prepend(cloneContact)
+                            animateTo(getRef('chats_list').children[0], [
                                 { transform: 'translateY(1rem)' },
                                 { transform: 'none' },
                             ],
@@ -2822,8 +2338,8 @@
                     if (updateChatCard) {
                         let chatCard
                         if (!contact) {
-                            getRef('chat_container').prepend(render.contactCard(floID, { type: 'chat', markUnread: true }))
-                            chatCard = getRef('chat_container').firstElementChild
+                            getRef('chats_list').prepend(render.contactCard(floID, { type: 'chat', markUnread: true }))
+                            chatCard = getRef('chats_list').firstElementChild
                         }
                         else {
                             chatCard = contact
@@ -2834,8 +2350,9 @@
                                 finalMessage = `You: ${message}`
                             else
                                 finalMessage = message
-                            chatCard.querySelector('.last-message').textContent = finalMessage
-                            chatCard.querySelector('.time').textContent = getFormatedTime(time, true)
+                            if (chatCard.querySelector('.last-message'))
+                                chatCard.querySelector('.last-message').textContent = finalMessage
+                            chatCard.querySelector('.time').textContent = relativeTime.from(time)
                         }
 
                         if (activeChat.floID === (floID || groupID)) {
@@ -2851,10 +2368,6 @@
                                 }
                             }
                         }
-                        if (!document.hasFocus() && navigator.onLine) {
-                            getRef('notification_sound').currentTime = 0;
-                            getRef('notification_sound').play();
-                        }
                     }
                 }
             }
@@ -2919,17 +2432,17 @@
                 getRef("receiver_initial").innerHTML = `
                     <svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg>
                     `
-                getRef('video_call_button').classList.add('hide-completely')
+                getRef('video_call_button').classList.add('hide')
             }
             else {
                 getRef("receiver_initial").textContent = getContactName(floID).charAt(0);
-                // getRef('video_call_button').classList.remove('hide-completely')    
+                // getRef('video_call_button').classList.remove('hide')    
             }
             getRef("receiver_initial").setAttribute('style', `color: ${textColor}; background-color: ${backgroundColor};`)
             if (floGlobals.pubKeys[floID] || activeChat.isGroup)
-                getRef("warn_no_encryption").classList.add("hide-completely");
+                getRef("warn_no_encryption").classList.add("hide");
             else
-                getRef("warn_no_encryption").classList.remove("hide-completely");
+                getRef("warn_no_encryption").classList.remove("hide");
             renderMessages(await messenger.getChat(floID), { markUnread: false, reRender: true })
             messenger.removeMark(floID, "unread");
             if (this.scrollHeight <= this.clientHeight) {
@@ -2939,17 +2452,17 @@
         }
 
         function renderMailList(mails, markUnread = true) {
-            const inboxMailFrag = document.createDocumentFragment()
-            const sentMailFrag = document.createDocumentFragment()
+            const inboxMails = []
+            const sentMails = []
             for (let m in mails) {
                 let { from, to, prev, ref, subject, time, content } = mails[m]
                 if (from === myFloID)
-                    sentMailFrag.prepend(render.mailCard(to, ref, subject, time, content, markUnread))
+                    sentMails.unshift(render.mailCard(to, ref, subject, time, content, markUnread))
                 else if (to.includes(myFloID))
-                    inboxMailFrag.prepend(render.mailCard(from, ref, subject, time, content, markUnread))
+                    inboxMails.unshift(render.mailCard(from, ref, subject, time, content, markUnread))
             }
-            getRef('inbox_mail_container').prepend(inboxMailFrag)
-            getRef('sent_mail_container').prepend(sentMailFrag)
+            renderElem(getRef('inbox_mail_container'), html`${inboxMails}`)
+            renderElem(getRef('sent_mail_container'), html`${sentMails}`)
         }
 
         function viewMail(mailRef, newView = true) {
@@ -2972,13 +2485,13 @@
                     getRef('reply_mail_popup').dataset["to"] = (from === myFloID ? to.join(',') : from)
                     getRef('reply_mail_popup').dataset["prev"] = mailRef;
                     getRef('subject_of_reply_mail').value = subject.startsWith("Re: ") ? subject : `Re: ${subject}`;
-                    getRef("show_reply_popup").classList.remove("hide-completely");
+                    getRef("show_reply_popup").classList.remove("hide");
                 }
                 messenger.removeMark(mailRef, "unread");
             }).catch(error => notify("Unable to read mail", "error", error))
         }
 
-        getRef('send_mail_button').addEventListener('clicked', sendMail)
+        getRef('send_mail_button').addEventListener('click', sendMail)
 
         function sendMail() {
             let to = getRef('send_mail_to').value.split(",");
@@ -2996,7 +2509,7 @@
                 messenger.sendMail(subject, content, recipients).then(result => {
                     notify(`Mail(s) sent!`)
                     renderMailList(result)
-                    hidePopup()
+                    closePopup()
                 }).catch(error => notify("Failed to send mail!", "error", error))
             } catch (error) {
                 notify(error, "error")
@@ -3013,13 +2526,13 @@
             messenger.sendMail(subject, content, recipient, prev).then(result => {
                 notify(`Mail replied!`);
                 renderMailList(result)
-                hidePopup()
+                closePopup()
             }).catch(error => notify("Failed to reply mail!", "error", error))
         }
 
         document.getElementById('mail_type_selector').addEventListener('change', e => {
-            document.querySelectorAll('.mail-container').forEach(container => container.classList.add('hide-completely'))
-            getRef(`${e.detail.value}_mail_container`).classList.remove('hide-completely')
+            document.querySelectorAll('.mail-container').forEach(container => container.parentNode.classList.add('hide'))
+            getRef(`${e.detail.value}_mail_container`).parentNode.classList.remove('hide')
         })
 
         const allPanels = document.querySelectorAll('.panel'),
@@ -3108,8 +2621,8 @@
                 allSidebarItems.forEach(panel => panel.classList.remove('active'))
                 item.classList.add('active')
             }
-            allPanels.forEach(panel => panel.classList.add('hide-completely'))
-            getRef(panel).classList.remove('hide-completely')
+            allPanels.forEach(panel => panel.classList.add('hide'))
+            getRef(panel).classList.remove('hide')
         }
 
         function hidePanel() {
@@ -3122,12 +2635,6 @@
             }
         }
 
-        function toggleDrawer() {
-            getRef('main_navbar').classList.toggle('no-transformations')
-            getRef('navbar_backdrop').classList.toggle('hide')
-        }
-
-
         document.addEventListener('contentchanged', e => {
             if (e.target.closest('#contact_name')) {
                 changeContactName(e.detail.value.trim())
@@ -3154,8 +2661,7 @@
                 isGroup = activeChat.isGroup
                 floID = activeChat.floID
                 name = activeChat['name']
-            }
-            else {
+            } else {
                 clickedContact['name'] = name
                 if (clickedContact['name'] === '')
                     clickedContact['name'] = 'Unknown'
@@ -3169,8 +2675,7 @@
                     notify('Changed group name', 'success')
                 })
                     .catch(error => notify(error, "error"));
-            }
-            else {
+            } else {
                 messenger.storeContact(floID, name).then(result => {
                     updatechatCards({ name, floID, isGroup: false })
                     notify('Changed contact name', 'success')
@@ -3215,12 +2720,12 @@
                 const floID = activeChat.floID
                 isChatDetailsOpen = true
                 getRef("chat_name").value = getContactName(floID);
-                getRef("chat_flo_id").textContent = floID
+                getRef("chat_flo_id").value = floID
                 if (activeChat.isGroup) {
                     getRef("chat_dp").innerHTML = `
                         <svg class="icon group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M13.61,28.09c-1.63,0-4.72-2.35-5.33-3.58a21.65,21.65,0,0,1-1.35-7.32s-.26-6.07,6.68-6.07a6.38,6.38,0,0,1,6.69,6.07A21.65,21.65,0,0,1,19,24.51c-.62,1.23-3.7,3.58-5.34,3.58"/><path d="M50.39,28.09c-1.64,0-4.72-2.35-5.34-3.58a21.9,21.9,0,0,1-1.35-7.32s-.26-6.07,6.69-6.07a6.37,6.37,0,0,1,6.68,6.07,21.65,21.65,0,0,1-1.35,7.32c-.61,1.23-3.7,3.58-5.33,3.58"/><path d="M32,31.74c-2.21,0-6.37-3.17-7.2-4.83A29.3,29.3,0,0,1,23,17s-.35-8.21,9-8.21c8.68,0,9,8.21,9,8.21a29.3,29.3,0,0,1-1.83,9.88c-.82,1.66-5,4.83-7.2,4.83"/><path d="M48.29,38.58c-4.16-1.83-8.57-3.08-10.34-6.4a12,12,0,0,1-6,3.73,12,12,0,0,1-5.95-3.73c-1.77,3.32-6.18,4.57-10.34,6.4-1.7.71-3.11,9.88-1.13,9.88A33.06,33.06,0,0,0,31.23,53h1.54a33.06,33.06,0,0,0,16.65-4.53C51.4,48.46,50,39.29,48.29,38.58Z"/><path d="M14.82,36.57c.76-.33,1.54-.65,2.3-1,2.49-1,4.85-2,6.22-3.44C21.07,31.23,19,30.25,18,28.41a8.83,8.83,0,0,1-4.41,2.76,8.83,8.83,0,0,1-4.4-2.76c-1.31,2.46-4.58,3.38-7.66,4.74-1.26.52-2.3,7.31-.84,7.31a24.55,24.55,0,0,0,10.86,3.31C11.89,40.81,12.86,37.39,14.82,36.57Z"/><path d="M62.45,33.15c-3.08-1.36-6.35-2.28-7.66-4.74a8.83,8.83,0,0,1-4.4,2.76A8.83,8.83,0,0,1,46,28.41c-1,1.84-3,2.82-5.32,3.76,1.37,1.43,3.73,2.41,6.22,3.44.76.31,1.54.63,2.26,1,2,.83,3,4.25,3.29,7.21a24.55,24.55,0,0,0,10.86-3.31C64.75,40.46,63.71,33.67,62.45,33.15Z"/></svg>
                         `
-                    getRef("last_interaction_time").textContent = `Created ${getFormatedTime(messenger.groups[floID].created)}`;
+                    getRef("last_interaction_time").textContent = `Created ${getFormattedTime(messenger.groups[floID].created)}`;
                     getRef("chat_type").textContent = `Group FLO ID`;
 
                     getRef('group_members_list').innerHTML = ''
@@ -3230,22 +2735,22 @@
                     })
                     getRef('group_members_list').append(frag)
 
-                    getRef("group_description_card").classList.remove('hide-completely')
-                    getRef("group_members_card").classList.remove('hide-completely')
+                    getRef("group_description_card").classList.remove('hide')
+                    getRef("group_members_card").classList.remove('hide')
 
-                    getRef('delete_chat_button').classList.add('hide-completely')
+                    getRef('delete_chat_button').classList.add('hide')
 
                     getRef("group_description").value = messenger.groups[floID].description === '' ? 'Add group description' : messenger.groups[floID].description;
 
                     if (messenger.groups[activeChat['floID']].admin === myFloID) {
                         getRef("chat_name").disabled = false
                         getRef('group_description').disabled = false
-                        getRef('edit_group_button').classList.remove('hide-completely')
+                        getRef('edit_group_button').classList.remove('hide')
                     }
                     else {
                         getRef("chat_name").disabled = true
                         getRef('group_description').disabled = true
-                        getRef('edit_group_button').classList.add('hide-completely')
+                        getRef('edit_group_button').classList.add('hide')
                     }
                 }
                 else {
@@ -3254,15 +2759,14 @@
 
                     getRef("chat_type").textContent = `FLO ID`;
 
-                    getRef("group_description_card").classList.add('hide-completely')
-                    getRef("group_members_card").classList.add('hide-completely')
+                    getRef("group_description_card").classList.add('hide')
+                    getRef("group_members_card").classList.add('hide')
 
-                    getRef('delete_chat_button').classList.remove('hide-completely')
+                    getRef('delete_chat_button').classList.remove('hide')
                 }
-
                 getRef('chat').classList.add('expand-side-panel')
                 getRef('chat_left').classList.add('hide-on-medium')
-                getRef('chat_details_panel').classList.remove('hide-completely')
+                getRef('chat_details_panel').classList.remove('hide')
                 animateTo(getRef('chat_details_panel'), [
                     { transform: 'translateX(100%)' },
                     { transform: 'translateX(0)' },
@@ -3284,34 +2788,34 @@
                     }).onfinish = () => {
                         getRef('chat').classList.remove('expand-side-panel')
                         getRef('chat_left').classList.remove('hide-on-medium')
-                        getRef('chat_details_panel').classList.add('hide-completely')
+                        getRef('chat_details_panel').classList.add('hide')
                     }
                 editGroupMembers()
             }
         }
 
         function addAsContact() {
-            showPopup('add_contact_popup')
+            openPopup('add_contact_popup')
             getRef('add_contact_floID').value = clickedContact.floID
         }
 
         function markAsUnread() {
             clickedContact.chatCard.classList.add('unread')
             messenger.addMark(clickedContact.floID, 'unread')
-            hidePopup()
+            closePopup()
         }
 
         function markAsRead() {
             clickedContact.chatCard.classList.remove('unread')
             messenger.removeMark(clickedContact.floID, 'unread')
-            hidePopup()
+            closePopup()
         }
 
         async function clearChat() {
             if (await confirmation('Clear chat?', `Are you sure to clear this chat?`, 'No', "Yes")) {
                 messenger.clearChat(clickedContact.floID).then(result => {
                     getRef('messages_container').innerHTML = ''
-                    hidePopup()
+                    closePopup()
                     notify('Chat cleared', 'success')
                 })
             }
@@ -3322,8 +2826,8 @@
                 messenger.rmChat(clickedContact.floID).then(result => {
                     clickedContact.chatCard.remove()
                     clickedContact.chatCard = ''
-                    hidePopup()
-                    getRef('chat').classList.add('hide-completely')
+                    closePopup()
+                    getRef('chat').classList.add('hide')
                     notify('Chat deleted', 'success')
                 })
             }
@@ -3341,30 +2845,27 @@
                             removeTick(contact)
                     }
                     else if (contact.classList.contains('admin')) {
-                        contact.classList.remove('hide-completely')
+                        contact.classList.remove('hide')
                     }
                 })
                 membersToRemove.clear()
-                getRef('edit_group_button').textContent = 'Edit'
-                getRef('remove_members_tip').classList.add('hide-completely')
-                getRef('member_options').classList.add('hide-completely')
+                getRef('edit_group_button').textContent = 'Edit';
+                addClass(['#remove_members_tip', '#remove_members_tip'], 'hide')
                 isGroupEditable = false
                 isRemovingMember = false
             }
             else {
                 getRef('group_members_list').querySelectorAll('.contact').forEach(contact => {
                     if (contact.classList.contains('admin')) {
-                        contact.classList.add('hide-completely')
+                        contact.classList.add('hide')
                     }
                     else {
                         contact.classList.add('selectable')
                     }
                 })
                 getRef('edit_group_button').textContent = 'Done'
-                getRef('remove_members_tip').classList.remove('hide-completely')
-                getRef('member_options').classList.remove('hide-completely')
-                getRef('remove_members_button').classList.add('hide-completely')
-                getRef('init_add_members_button').classList.remove('hide-completely')
+                removeClass(['#remove_members_tip', '#member_options', '#init_add_members_button'], 'hide')
+                getRef('remove_members_button').classList.add('hide')
                 isGroupEditable = true
                 isRemovingMember = true
             }
@@ -3382,14 +2883,12 @@
                 addTick(contact)
             }
             if (membersToRemove.size) {
-                getRef('remove_members_tip').classList.add('hide-completely')
-                getRef('init_add_members_button').classList.add('hide-completely')
-                getRef('remove_members_button').classList.remove('hide-completely')
+                addClass(['#remove_members_tip', '#init_add_members_button'], 'hide')
+                getRef('remove_members_button').classList.remove('hide')
             }
             else {
-                getRef('remove_members_tip').classList.remove('hide-completely')
-                getRef('init_add_members_button').classList.remove('hide-completely')
-                getRef('remove_members_button').classList.add('hide-completely')
+                removeClass(['#remove_members_tip', '#init_add_members_button'], 'hide')
+                getRef('remove_members_button').classList.add('hide')
             }
         }
 
@@ -3416,13 +2915,7 @@
             const { animate = true } = options
             contact.classList.add('selected')
             const initial = contact.querySelector('.initial')
-            const tick = document.createElement('div');
-            tick.innerHTML = `
-                <svg class="icon" viewBox="0 0 64 64">
-                    <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
-                </svg>
-            `
-            tick.classList.add('tick')
+            const tick = html.node`<div class="tick"><svg class="icon" viewBox="0 0 64 64"> <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/> </svg></div>`;
             initial.append(tick)
             if (animate)
                 tick.animate(
@@ -3453,19 +2946,11 @@
             }
         }
         function addCross(contact) {
-            const cross = document.createElement('div');
-            cross.innerHTML = `
-            <svg class="icon" viewBox="0 0 64 64">
-                <title>Remove</title>
-                <line x1="64" y1="0" x2="0" y2="64"/>
-                <line x1="64" y1="64" x2="0" y2="0"/>
-            </svg>
-            `
-            cross.classList.add('tick')
+            const cross = html.node`<div class="tick"><svg class="icon" viewBox="0 0 64 64"> <title>Remove</title> <line x1="64" y1="0" x2="0" y2="64"/> <line x1="64" y1="64" x2="0" y2="0"/> </svg></div>`;
             contact.append(cross)
         }
 
-        document.getElementById('add_members_button').addEventListener('clicked', addGroupMembers)
+        document.getElementById('add_members_button').addEventListener('click', addGroupMembers)
 
         function addGroupMembers() {
             messenger.addGroupMembers(activeChat.floID, [...membersToAdd])
@@ -3474,7 +2959,7 @@
                         frag.append(render.contactCard(member, { type: 'contact', contactOnly: true }))
                     })
                     getRef('group_members_list').append(frag)
-                    hidePopup()
+                    closePopup()
                 })
                 .catch(err => console.log(err))
         }
@@ -3490,113 +2975,198 @@
                 .catch(err => console.log(err))
         }
 
-        function showPage(targetPage, subpage) {
-            if (subpage) {
-                document.querySelectorAll('.sub-page').forEach(page => page.classList.add('hide-completely'))
-                document.querySelectorAll(`.navbar-item`).forEach(item => item.classList.remove('active'))
-                const targetButton = document.querySelector(`.navbar-item[data-target="${targetPage}"]`)
-                targetButton.classList.add('active')
-                if (activePage.page) {
-                    activePage.page.classList.add('hide-completely')
-                    activePage.button.classList.remove('active')
-                }
-                activePage.button = targetButton
-                activePage.page = getRef(targetPage);
-                if (getRef('main_page').classList.contains('hide-completely')) {
-                    document.querySelectorAll('.page').forEach(page => page.classList.add('hide-completely'))
-                    getRef('main_page').classList.remove('hide-completely')
-                }
-                if (getRef('main_navbar').classList.contains('no-transformations')) {
-                    getRef('main_navbar').classList.remove('no-transformations')
-                    getRef('navbar_backdrop').classList.add('hide')
-                }
-            }
-            else {
-                document.querySelectorAll('.page').forEach(page => page.classList.add('hide-completely'))
-                switch (targetPage) {
-                    case 'sign_in_page':
-                        break;
-                }
-            }
-            getRef(targetPage).classList.remove('hide-completely')
+        const pagesData = {
+            params: {},
+            openedPages: new Set(),
         }
-
-        function initOnBoarding() {
-            console.log('called')
-            showFrame(1)
-        }
-
-        function showFrame(frameNo) {
-            if (getRef('on_boarding_page').classList.contains('hide-completely')) {
-                showPage('on_boarding_page')
+        async function showPage(targetPage, options = {}) {
+            const { firstLoad, hashChange } = options
+            let pageId
+            let params = {}
+            let searchParams
+            if (targetPage === '') {
+                if (typeof myFloID === "undefined") {
+                    pageId = 'sign_in'
+                } else {
+                    pageId = 'chat_page'
+                }
+            } else {
+                if (targetPage.includes('/')) {
+                    if (targetPage.includes('?')) {
+                        const splitAddress = targetPage.split('?')
+                        searchParams = splitAddress.pop()
+                        const pages = splitAddress.pop().split('/')
+                        pageId = pages[1]
+                        subPageId = pages[2]
+                    } else {
+                        const pages = targetPage.split('/')
+                        pageId = pages[1]
+                        subPageId = pages[2]
+                    }
+                } else {
+                    pageId = targetPage
+                }
             }
-            const frames = ['frame_1', 'frame_2', 'frame_3']
-            document.querySelectorAll('.frame').forEach(frame => frame.classList.add('hide-completely'))
-            getRef(frames[frameNo - 1]).classList.remove('hide-completely')
-            switch (frames[frameNo - 1]) {
-                case 'frame_2':
-                    getRef('first_pin').focusIn()
+            if (typeof myFloID === "undefined" && !(['sign_up', 'sign_in', 'loading', 'landing'].includes(pageId))) return
+            else if (typeof myFloID !== "undefined" && (['sign_up', 'sign_in', 'loading', 'landing'].includes(pageId))) {
+                history.replaceState(null, null, '#/chat_page');
+                pageId = 'chat_page'
+            }
+            if (searchParams) {
+                const urlSearchParams = new URLSearchParams('?' + searchParams);
+                params = Object.fromEntries(urlSearchParams.entries());
+            }
+            switch (pageId) {
+                case 'sign_in':
+                    setTimeout(() => {
+                        getRef('private_key_field').focusIn()
+                    }, 0);
+                    targetPage = 'sign_in'
+                    break;
+                case 'sign_up':
+                    const { floID, privKey } = floCrypto.generateNewID()
+                    getRef('generated_flo_id').value = floID
+                    getRef('generated_private_key').value = privKey
+                    targetPage = 'sign_up'
+                    break;
+                case 'settings':
+                    break;
+                default:
                     break;
             }
-        }
 
-        async function setPin() {
-            try {
-                const firstPin = getRef('first_pin').value
-                const confirmPin = getRef('confirm_pin').value
-                if (firstPin === confirmPin) {
-                    let value = getRef('confirm_pin').value
-                    getRef('pin_error').classList.add('hide-completely')
-                    if (isPinSet) {
-                        floDapps.securePrivKey(value).then(result => {
-                            notify("Pin changed", 'success');
-                            getRef('first_pin').clear()
-                            getRef('confirm_pin').clear()
-                        })
-                    }
-                    else {
-                        floDapps.securePrivKey(value).then(result => {
-                            getRef('first_pin').clear()
-                            getRef('confirm_pin').clear()
-                            isPinSet = true;
-                            showPage('chat_page', true)
-                        })
-                    }
+            if (pagesData.lastPage !== pageId) {
+                const animOptions = {
+                    duration: 100,
+                    fill: 'forwards',
+                    easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
                 }
-                else {
-                    getRef('pin_error').classList.remove('hide-completely')
-                    getRef('pin_error').animate(
-                        [
+                let previousActiveElement = getRef('main_navbar').querySelector('.nav-item--active')
+                const currentActiveElement = document.querySelector(`.nav-item[href="#/${pageId}"]`)
+                if (currentActiveElement) {
+                    getRef('main_page').classList.remove('nav-hidden')
+                    if (getRef('main_navbar').classList.contains('hide')) {
+                        getRef('main_navbar').classList.remove('hide-away', 'hide')
+                        getRef('main_navbar').animate([
                             {
-                                transform: 'translateX(0)'
+                                transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
+                                opacity: 0,
                             },
                             {
-                                transform: 'translateX(-1rem)'
+                                transform: `none`,
+                                opacity: 1,
                             },
-                            {
-                                transform: 'translateX(1rem)'
-                            },
-                            {
-                                transform: 'translateX(-0.5rem)'
-                            },
-                            {
-                                transform: 'translateX(0.5rem)'
-                            },
-                            {
-                                transform: 'translateX(0)'
-                            }
-                        ],
-                        {
-                            duration: 600,
-                            easing: 'ease'
+                        ], { ...animOptions, easing: 'ease-in' })
+                    }
+                    const previousActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(previousActiveElement)
+                    const currentActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(currentActiveElement)
+                    const isOnTop = previousActiveElementIndex < currentActiveElementIndex
+                    const currentIndicator = createElement('div', { className: 'nav-item__indicator' });
+                    let previousIndicator = getRef('main_navbar').querySelector('.nav-item__indicator')
+                    if (!previousIndicator) {
+                        previousIndicator = currentIndicator.cloneNode(true)
+                        previousActiveElement = currentActiveElement
+                        previousActiveElement.append(previousIndicator)
+                    } else if (currentActiveElementIndex !== previousActiveElementIndex) {
+                        const indicatorDimensions = previousIndicator.getBoundingClientRect()
+                        const currentActiveElementDimensions = currentActiveElement.getBoundingClientRect()
+                        let moveBy
+                        if (isMobileView) {
+                            moveBy = ((currentActiveElementDimensions.width - indicatorDimensions.width) / 2) + indicatorDimensions.width
+                        } else {
+                            moveBy = ((currentActiveElementDimensions.height - indicatorDimensions.height) / 2) + indicatorDimensions.height
                         }
-                    )
+                        indicatorObserver.observe(previousIndicator)
+                        previousIndicator.animate([
+                            {
+                                transform: 'none',
+                                opacity: 1,
+                            },
+                            {
+                                transform: `translate${isMobileView ? 'X' : 'Y'}(${isOnTop ? `${moveBy}px` : `-${moveBy}px`})`,
+                                opacity: 0,
+                            },
+                        ], { ...animOptions, easing: 'ease-in' }).onfinish = () => {
+                            previousIndicator.remove()
+                        }
+                        tempData = {
+                            currentActiveElement,
+                            currentIndicator,
+                            isOnTop,
+                            animOptions,
+                            moveBy
+                        }
+                    }
+                    previousActiveElement.classList.remove('nav-item--active');
+                    currentActiveElement.classList.add('nav-item--active')
+                } else {
+                    getRef('main_page').classList.add('nav-hidden')
+                    if (!getRef('main_navbar').classList.contains('hide')) {
+                        getRef('main_navbar').classList.add('hide-away')
+                        getRef('main_navbar').animate([
+                            {
+                                transform: `none`,
+                                opacity: 1,
+                            },
+                            {
+                                transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
+                                opacity: 0,
+                            },
+                        ], {
+                            duration: 200,
+                            fill: 'forwards',
+                            easing: 'ease'
+                        }).onfinish = () => {
+                            getRef('main_navbar').classList.add('hide')
+                        }
+                    }
                 }
+                document.querySelectorAll('.page').forEach(page => page.classList.add('hide'))
+                getRef(pageId).closest('.page').classList.remove('hide')
+                document.querySelectorAll('.inner-page').forEach(page => page.classList.add('hide'))
+                getRef(pageId).classList.remove('hide')
+                getRef(pageId).animate([
+                    {
+                        opacity: 0,
+                        transform: 'translateY(1rem)'
+                    },
+                    {
+                        opacity: 1,
+                        transform: 'translateY(0)'
+                    },
+                ],
+                    {
+                        duration: 300,
+                        easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+                    }).onfinish = () => {
+                    }
+                pagesData.lastPage = pageId
             }
-            catch (error) {
-                notify("Setting pin Failed", "error", error)
-            }
+            if (params)
+                pagesData.params = params
+            pagesData.openedPages.add(pageId)
+
         }
+        const indicatorObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (!entry.isIntersecting) {
+                    const { currentActiveElement, currentIndicator, isOnTop, animOptions, moveBy } = tempData
+                    currentActiveElement.append(currentIndicator)
+                    currentIndicator.animate([
+                        {
+                            transform: `translate${isMobileView ? 'X' : 'Y'}(${isOnTop ? `-${moveBy}px` : `${moveBy}px`})`,
+                            opacity: 0,
+                        },
+                        {
+                            transform: 'none',
+                            opacity: 1
+                        },
+                    ], { ...animOptions, easing: 'ease-out' })
+                }
+            })
+        }, {
+            threshold: 1
+        })
 
         document.addEventListener('colorselected', e => {
             const color = e.detail.value
@@ -3605,7 +3175,6 @@
         })
 
         document.getElementById('select_bg_image').addEventListener('change', function (e) {
-            console
             compactIDB.writeData('userSettings', this.files[0], 'bgImage')
                 .then(async res => {
                     setBgImage()
@@ -3624,13 +3193,11 @@
                     getRef('chat_preview').style.background = `linear-gradient(rgba(var(--foreground-color), 0.6), rgba(var(--foreground-color), 0.6)), url(${url}) center no-repeat`
                     getRef('chat').style.backgroundSize = 'cover'
                     getRef('mail').style.backgroundSize = 'cover'
-                    getRef('chat_preview').style.backgroundSize = 'cover'
-                    getRef('chat').classList.add('has-bg-image')
-                    getRef('mail').classList.add('has-bg-image')
-                    getRef('chat_preview').classList.add('has-bg-image')
+                    getRef('chat_preview').style.backgroundSize = 'cover';
+                    addClass(['#chat', '#mail', '#chat_preview'], 'has-bg-image')
                     getRef('selected_bg_preview').firstElementChild.src = url
                     getRef('selected_bg_preview').classList.add('bg-preview--selected')
-                    getRef('selected_bg_preview').classList.remove('hide-completely')
+                    getRef('selected_bg_preview').classList.remove('hide')
                     getRef('default_bg_preview').classList.remove('bg-preview--selected')
                     getRef('select_bg_button').textContent = 'Change background'
                 }
@@ -3644,9 +3211,7 @@
             getRef('chat').style.background = ``
             getRef('mail').style.background = ``
             getRef('chat_preview').style.background = ``
-            getRef('chat').classList.remove('has-bg-image')
-            getRef('mail').classList.remove('has-bg-image')
-            getRef('chat_preview').classList.remove('has-bg-image')
+            removeClass(['#chat', '#mail', '#chat_preview'], 'has-bg-image')
             getRef('selected_bg_preview').classList.remove('bg-preview--selected')
             getRef('default_bg_preview').classList.add('bg-preview--selected')
             notify('Default background applied', 'success')
diff --git a/scripts/components.js b/scripts/components.js
index 88f5822..41b54a7 100644
--- a/scripts/components.js
+++ b/scripts/components.js
@@ -1,3 +1,4 @@
+/*jshint esversion: 6 */
 //Button
 const smButton = document.createElement('template')
 smButton.innerHTML = `
@@ -9,149 +10,133 @@ smButton.innerHTML = `
             box-sizing: border-box;
 }       
 :host{
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
     display: inline-flex;
+    width: auto;
     --padding: 0.6rem 1.2rem;
     --border-radius: 0.3rem;
-    --background: rgba(var(--text-color), 0.1);
-}
-:host([disable]) .button{
-    cursor: not-allowed;
-    opacity: 0.6;
-    background: rgba(var(--text-color), 0.3) !important;
-    color: rgba(var(--foreground-color), 0.6);
+    --background: rgba(var(--text-color, (17,17,17)), 0.1);
 }
 :host([variant='primary']) .button{
-    background: var(--accent-color);
-    color: rgba(var(--foreground-color), 1);
+    background: var(--accent-color,teal);
+    color: rgba(var(--background-color, (255,255,255)), 1);
 }
 :host([variant='outlined']) .button{
-    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
-            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
+            box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset;
     background: transparent; 
-    color: var(--accent-color);
+    color: var(--accent-color,teal);
 }
 :host([variant='no-outline']) .button{
-    background: rgba(var(--foreground-color), 1); 
-    color: var(--accent-color);
+    background: inherit; 
+    color: var(--accent-color,teal);
 }
-:host(.small) .button{
-    padding: 0.4rem 0.8rem;
-}
-:host(.round) .button{
-    border-radius: 10rem;
+:host([disabled]){
+    pointer-events: none;
+    cursor: not-allowed;
 }
 .button {
     position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
     width: 100%;
     padding: var(--padding);
     cursor: pointer;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
             user-select: none;
     border-radius: var(--border-radius); 
-    -webkit-box-pack: center; 
-        -ms-flex-pack: center; 
             justify-content: center;
-    -webkit-transition: -webkit-box-shadow 0.3s;
-    transition: -webkit-box-shadow 0.3s;
-    -o-transition: box-shadow 0.3s;
-    transition: box-shadow 0.3s;
-    transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
-    text-transform: capitalize;
+    transition: box-shadow 0.3s, background-color 0.3s;
     font-family: inherit;
     font-size: 0.9rem;
     font-weight: 500;
-    background: var(--background); 
+    background-color: var(--background); 
     -webkit-tap-highlight-color: transparent;
     outline: none;
     overflow: hidden;
     border: none;
     color: inherit;
+    align-items: center;
 }
-:host(:not([disable])) .button:focus-visible{
-    -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
-            box-shadow: 0 0 0 0.1rem var(--accent-color);
-}
-:host([variant='outlined']) .button:focus-visible{
-    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color);
-            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color);
+:host([disabled]) .button{
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.6;
+    color: rgba(var(--text-color, (17,17,17)), 1);
+    background-color: rgba(var(--text-color, (17,17,17)), 0.3);
 }
 @media (hover: hover){
-    :host(:not([disable])) .button:hover{
+    :host(:not([disabled])) .button:hover,
+    :host(:focus-within:not([disabled])) .button{
         -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
-                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
+        box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
     }
-    :host([variant='outlined']) .button:hover{
-        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
-                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
+    :host([variant='outlined']:not([disabled])) .button:hover,
+    :host(:focus-within[variant='outlined']:not([disabled])) .button:hover{
+        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
+                box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
     }
 }
 @media (hover: none){
-    :host(:not([disable])) .button:active{
+    :host(:not([disabled])) .button:active{
         -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
                 box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
     }
     :host([variant='outlined']) .button:active{
-        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
-                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
+        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
+                box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
     }
 }
 </style>
-<button part="button" class="button">
+<div part="button" class="button">
     <slot></slot>   
-</button>`;
+</div>`;
 customElements.define('sm-button',
     class extends HTMLElement {
         constructor() {
-            super()
+            super();
             this.attachShadow({
                 mode: 'open'
-            }).append(smButton.content.cloneNode(true))
+            }).append(smButton.content.cloneNode(true));
+        }
+        static get observedAttributes() {
+            return ['disabled'];
         }
 
         get disabled() {
-            return this.isDisabled
+            return this.hasAttribute('disabled');
         }
 
         set disabled(value) {
-            if (value && !this.isDisabled) {
-                this.isDisabled = true
-                this.setAttribute('disable', '')
-                this.button.removeAttribute('tabindex')
-            } else if (!value && this.isDisabled) {
-                this.isDisabled = false
-                this.removeAttribute('disable')
+            if (value) {
+                this.setAttribute('disabled', '');
+            } else {
+                this.removeAttribute('disabled');
             }
         }
+        focusIn() {
+            this.focus();
+        }
 
-        dispatch() {
-            if (this.isDisabled) {
-                this.dispatchEvent(new CustomEvent('disable', {
-                    bubbles: true,
-                    composed: true
-                }))
-            } else {
-                this.dispatchEvent(new CustomEvent('clicked', {
-                    bubbles: true,
-                    composed: true
-                }))
+        handleKeyDown(e) {
+            if (!this.hasAttribute('disabled') && (e.key === 'Enter' || e.key === ' ')) {
+                e.preventDefault();
+                this.click();
             }
         }
 
         connectedCallback() {
-            this.isDisabled = false
-            this.button = this.shadowRoot.querySelector('.button')
-            if (this.hasAttribute('disable') && !this.isDisabled)
-                this.isDisabled = true
-            this.addEventListener('click', (e) => {
-                this.dispatch()
-            })
+            if (!this.hasAttribute('disabled')) {
+                this.setAttribute('tabindex', '0');
+            }
+            this.setAttribute('role', 'button');
+            this.addEventListener('keydown', this.handleKeyDown);
+        }
+        attributeChangedCallback(name) {
+            if (name === 'disabled') {
+                if (this.hasAttribute('disabled')) {
+                    this.removeAttribute('tabindex');
+                } else {
+                    this.setAttribute('tabindex', '0');
+                }
+                this.setAttribute('aria-disabled', this.hasAttribute('disabled'));
+            }
         }
     })
 
@@ -192,57 +177,52 @@ input:invalid{
 border: none;
 }
 :host{
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    --border-radius: 0.3rem;
-    --padding: 0.7rem 1rem;
-    --background: rgba(var(--text-color), 0.06);
+    --success-color: #00C853;
+    --danger-color: red;
+    --width: 100%;
+    --icon-gap: 0.5rem;
+    --background: rgba(var(--text-color, (17,17,17)), 0.06);
 }
 .hide{
-   opacity: 0 !important;
-   pointer-events: none !important;
+   display: none !important;
 }
-.hide-completely{
-    display: none;
+button{
+    display: flex;
+    border: none;
+    background: none;
+    padding: 0;
+    border-radius: 1rem;
+    min-width: 0;
+    cursor: pointer;
+}
+button:focus{
+    outline: var(--accent-color, teal) solid medium;
 }
 .icon {
-    fill: none;
-    height: 1.6rem;
-    width: 1.6rem;
-    padding: 0.5rem;
-    stroke: rgba(var(--text-color), 0.7);
-    stroke-width: 10;
-    overflow: visible;
-    stroke-linecap: round;
-    border-radius: 1rem;
-    stroke-linejoin: round;
-    cursor: pointer;
-    min-width: 0;
+    height: 1.4rem;
+    width: 1.4rem;
+    fill: rgba(var(--text-color, (17,17,17)), 0.6);
 }
+
 :host(.round) .input{
     border-radius: 10rem;
 }
 .input {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
     cursor: text;
     min-width: 0;
     text-align: left;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
             align-items: center;
     position: relative;
-    gap: 0.5rem;
-    padding: var(--padding);
-    border-radius: var(--border-radius);
-    -webkit-transition: opacity 0.3s;
-    -o-transition: opacity 0.3s;
-    transition: opacity 0.3s;
+    gap: var(--icon-gap);
+    padding: var(--padding, 0.6rem 0.8rem);
+    border-radius: var(--border-radius,0.3rem);
+    transition: opacity 0.3s, box-shadow 0.2s;
     background: var(--background);
     width: 100%;
     outline: none;
+    min-height: 3.5rem;
 }
 .input.readonly .clear{
     opacity: 0 !important;
@@ -253,106 +233,99 @@ border: none;
     pointer-events: none;
 }
 .input:focus-within:not(.readonly){
-    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;
+    box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important;
 }
 .disabled{
     pointer-events: none;
     opacity: 0.6;
 }
 .label {
+    grid-area: 1/1/2/2;
+    font-size: inherit;
     opacity: .7;
     font-weight: 400;
-    font-size: 1rem;
-    position: absolute;
-    top: 0;
-    -webkit-transition: -webkit-transform 0.3s;
     transition: -webkit-transform 0.3s;
-    -o-transition: transform 0.3s;
     transition: transform 0.3s;
-    transition: transform 0.3s, -webkit-transform 0.3s;
-    -webkit-transform-origin: left;
-    -ms-transform-origin: left;
+    transition: transform 0.3s, -webkit-transform 0.3s, color .03;
         transform-origin: left;
     pointer-events: none;
     white-space: nowrap;
     overflow: hidden;
-    -o-text-overflow: ellipsis;
-       text-overflow: ellipsis;
     width: 100%;
     user-select: none;
     will-change: transform;
 }
 .outer-container{
     position: relative;
-    width: 100%;
+    width: var(--width);
 }
 .container{
     width: 100%;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr auto;
     position: relative;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    -webkit-box-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
+    align-items: center;
 }    
 input{
-    font-size: 1rem;
+    grid-area: 1/1/2/2;
+    font-size: inherit;
     border: none;
     background: transparent;
     outline: none;
-    color: rgba(var(--text-color), 1);
+    color: inherit;
+    font-family: inherit;
     width: 100%;
+    caret-color: var(--accent-color, teal);
 }
-:host(:not(.outlined)) .animate-label .container input {
+:host([animate]) .input:focus-within .container input,
+.animate-placeholder .container input {
     -webkit-transform: translateY(0.6rem);
             -ms-transform: translateY(0.6rem);
         transform: translateY(0.6rem);
     }
   
-:host(:not(.outlined)) .animate-label .label {
+    :host([animate]) .input:focus-within .label,
+    .animate-placeholder .label {
     -webkit-transform: translateY(-0.7em) scale(0.8);
             -ms-transform: translateY(-0.7em) scale(0.8);
         transform: translateY(-0.7em) scale(0.8);
     opacity: 1;
-    color: var(--accent-color)
+    color: var(--accent-color,teal)
 }
-:host(.outlined) .input {
-    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
-    background: rgba(var(--foreground-color), 1);
+:host([variant="outlined"]) .input {
+    box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset;
+    background: rgba(var(--background-color, (255,255,255)), 1);
 }
-:host(.outlined) .label {
-    width: max-content;
-    margin-left: -0.5rem;
-    padding: 0 0.5rem;
+.animate-placeholder:focus-within:not(.readonly) .label{
+    color: var(--accent-color,teal)
 }
-:host(.outlined) .animate-label .label {
-    -webkit-transform: translate(0.1rem, -1.5rem) scale(0.8);
-            -ms-transform: translate(0.1rem, -1.5rem) scale(0.8);
-        transform: translate(0.1rem, -1.5rem) scale(0.8);
-    opacity: 1;
-    background: rgba(var(--foreground-color), 1);
-}
-.animate-label:focus-within:not(.readonly) .label{
-    color: var(--accent-color)
-}
-.feedback-text{
-    font-size: 0.9rem;
+.feedback-text:not(:empty){
+    display: flex;
     width: 100%;
-    color: var(--error-color);
-    background: rgba(var(--foreground-color), 1);
-    padding: 0.6rem 1rem;
     text-align: left;
+    font-size: 0.9rem;
+    align-items: center;
+    padding: 0.8rem 0;
+    color: rgba(var(--text-color, (17,17,17)), 0.8);
 }
-.feedback-text:empty{
-    padding: 0;
+.success{
+    color: var(--success-color);
+}
+.error{
+    color: var(--danger-color);
+}
+.status-icon{
+    margin-right: 0.2rem;
+}
+.status-icon--error{
+    fill: var(--danger-color);
+}
+.status-icon--success{
+    fill: var(--success-color);
 }
 @media (any-hover: hover){
     .icon:hover{
-        background: rgba(var(--text-color), 0.1);
+        background: rgba(var(--text-color, (17,17,17)), 0.1);
     }
 }
 </style>
@@ -360,97 +333,150 @@ input{
     <label part="input" class="input">
         <slot name="icon"></slot>
         <div class="container">
-            <input/>
+            <input type="text"/>
             <div part="placeholder" class="label"></div>
+            <button class="clear hide" title="Clear" tabindex="-1">
+                <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="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>
+            </button>
         </div>
-        <svg class="icon clear hide" viewBox="0 0 64 64">
-            <title>clear</title>
-            <line x1="64" y1="0" x2="0" y2="64"/>
-            <line x1="64" y1="64" x2="0" y2="0"/>
-        </svg>
+        <slot name="right"></slot>
     </label>
-    <div class="feedback-text"></div>
+    <p class="feedback-text"></p>
 </div>
 `;
 customElements.define('sm-input',
     class extends HTMLElement {
+
         constructor() {
-            super()
+            super();
             this.attachShadow({
                 mode: 'open'
-            }).append(smInput.content.cloneNode(true))
+            }).append(smInput.content.cloneNode(true));
+
+            this.inputParent = this.shadowRoot.querySelector('.input');
+            this.input = this.shadowRoot.querySelector('input');
+            this.clearBtn = this.shadowRoot.querySelector('.clear');
+            this.label = this.shadowRoot.querySelector('.label');
+            this.feedbackText = this.shadowRoot.querySelector('.feedback-text');
+            this.outerContainer = this.shadowRoot.querySelector('.outer-container');
+            this._helperText = '';
+            this._errorText = '';
+            this.isRequired = false;
+            this.validationFunction = undefined;
+            this.reflectedAttributes = ['value', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step'];
+
+            this.reset = this.reset.bind(this);
+            this.clear = this.clear.bind(this);
+            this.focusIn = this.focusIn.bind(this);
+            this.focusOut = this.focusOut.bind(this);
+            this.fireEvent = this.fireEvent.bind(this);
+            this.checkInput = this.checkInput.bind(this);
+            this.vibrate = this.vibrate.bind(this);
         }
+
         static get observedAttributes() {
-            return ['placeholder']
+            return ['value', 'placeholder', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step', 'helper-text', 'error-text', 'hiderequired'];
         }
 
         get value() {
-            return this.shadowRoot.querySelector('input').value
+            return this.input.value;
         }
 
         set value(val) {
-            this.shadowRoot.querySelector('input').value = val;
-            this.checkInput()
-            this.fireEvent()
+            this.input.value = val;
+            this.checkInput();
+            this.fireEvent();
         }
 
         get placeholder() {
-            return this.getAttribute('placeholder')
+            return this.getAttribute('placeholder');
         }
 
         set placeholder(val) {
-            this.setAttribute('placeholder', val)
+            this.setAttribute('placeholder', val);
         }
 
         get type() {
-            return this.getAttribute('type')
+            return this.getAttribute('type');
         }
 
-        get isValid() {
-            return this.shadowRoot.querySelector('input').checkValidity()
+        set type(val) {
+            this.setAttribute('type', val);
         }
 
         get validity() {
-            return this.shadowRoot.querySelector('input').validity
+            return this.input.validity;
         }
 
+        get disabled() {
+            return this.hasAttribute('disabled');
+        }
         set disabled(value) {
             if (value)
-                this.shadowRoot.querySelector('.input').classList.add('disabled')
+                this.inputParent.classList.add('disabled');
             else
-                this.shadowRoot.querySelector('.input').classList.remove('disabled')
+                this.inputParent.classList.remove('disabled');
+        }
+        get readOnly() {
+            return this.hasAttribute('readonly');
         }
         set readOnly(value) {
             if (value) {
-                this.shadowRoot.querySelector('input').setAttribute('readonly', '')
-                this.shadowRoot.querySelector('.input').classList.add('readonly')
+                this.setAttribute('readonly', '');
             } else {
-                this.shadowRoot.querySelector('input').removeAttribute('readonly')
-                this.shadowRoot.querySelector('.input').classList.remove('readonly')
+                this.removeAttribute('readonly');
             }
         }
-
-        setValidity = (message) => {
-            this.feedbackText.textContent = message
+        set customValidation(val) {
+            this.validationFunction = val;
+        }
+        set errorText(val) {
+            this._errorText = val;
+        }
+        set helperText(val) {
+            this._helperText = val;
+        }
+        get isValid() {
+            if (this.input.value !== '') {
+                const _isValid = this.input.checkValidity();
+                let _customValid = true;
+                if (this.validationFunction) {
+                    _customValid = Boolean(this.validationFunction(this.input.value));
+                }
+                if (_isValid && _customValid) {
+                    this.feedbackText.classList.remove('error');
+                    this.feedbackText.classList.add('success');
+                    this.feedbackText.textContent = '';
+                } else {
+                    if (this._errorText) {
+                        this.feedbackText.classList.add('error');
+                        this.feedbackText.classList.remove('success');
+                        this.feedbackText.innerHTML = `
+                            <svg class="status-icon status-icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>
+                        ${this._errorText}
+                        `;
+                    }
+                }
+                return (_isValid && _customValid);
+            }
+        }
+        reset() {
+            this.value = '';
+        }
+        clear() {
+            this.value = '';
+            this.input.focus();
         }
 
-        showValidity = () => {
-            this.feedbackText.classList.remove('hide-completely')
-        }
-        
-        hideValidity = () => {
-            this.feedbackText.classList.add('hide-completely')
+        focusIn() {
+            this.input.focus();
         }
 
-        focusIn = () => {
-            this.input.focus()
+        focusOut() {
+            this.input.blur();
         }
 
-        focusOut = () => {
-            this.input.blur()
-        }
-
-        fireEvent = () => {
+        fireEvent() {
             let event = new Event('input', {
                 bubbles: true,
                 cancelable: true,
@@ -459,199 +485,218 @@ customElements.define('sm-input',
             this.dispatchEvent(event);
         }
 
-        checkInput = (e) => {
-            if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') return;
+        checkInput(e) {
+            if (!this.hasAttribute('readonly')) {
+                if (this.input.value.trim() !== '') {
+                    this.clearBtn.classList.remove('hide');
+                } else {
+                    this.clearBtn.classList.add('hide');
+                }
+            }
+            if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder').trim() === '') return;
             if (this.input.value !== '') {
                 if (this.animate)
-                    this.inputParent.classList.add('animate-label')
+                    this.inputParent.classList.add('animate-placeholder');
                 else
-                    this.label.classList.add('hide')
-                if (!this.readonly)
-                    this.clearBtn.classList.remove('hide')
+                    this.label.classList.add('hide');
             } else {
                 if (this.animate)
-                    this.inputParent.classList.remove('animate-label')
+                    this.inputParent.classList.remove('animate-placeholder');
                 else
-                    this.label.classList.remove('hide')
-                if (!this.readonly)
-                    this.clearBtn.classList.add('hide')
+                    this.label.classList.remove('hide');
+                this.feedbackText.textContent = '';
             }
         }
+        vibrate() {
+            this.outerContainer.animate([
+                { transform: 'translateX(-1rem)' },
+                { transform: 'translateX(1rem)' },
+                { transform: 'translateX(-0.5rem)' },
+                { transform: 'translateX(0.5rem)' },
+                { transform: 'translateX(0)' },
+            ], {
+                duration: 300,
+                easing: 'ease'
+            });
+        }
 
 
         connectedCallback() {
-            this.inputParent = this.shadowRoot.querySelector('.input')
-            this.clearBtn = this.shadowRoot.querySelector('.clear')
-            this.label = this.shadowRoot.querySelector('.label')
-            this.feedbackText = this.shadowRoot.querySelector('.feedback-text')
-            this.valueChanged = false;
-            this.readonly = false
-            this.isNumeric = false
-            this.min
-            this.max
-            this.animate = this.hasAttribute('animate')
-            this.input = this.shadowRoot.querySelector('input')
-            this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder')
-            if (this.hasAttribute('value')) {
-                this.input.value = this.getAttribute('value')
-                this.checkInput()
-            }
-            if (this.hasAttribute('required')) {
-                this.input.setAttribute('required', '')
-            }
-            if (this.hasAttribute('min')) {
-                let minValue = this.getAttribute('min')
-                this.input.setAttribute('min', minValue)
-                this.min = parseInt(minValue)
-            }
-            if (this.hasAttribute('max')) {
-                let maxValue = this.getAttribute('max')
-                this.input.setAttribute('max', maxValue)
-                this.max = parseInt(maxValue)
-            }
-            if (this.hasAttribute('minlength')) {
-                let minValue = this.getAttribute('minlength')
-                this.input.setAttribute('minlength', minValue)
-            }
-            if (this.hasAttribute('maxlength')) {
-                let maxValue = this.getAttribute('maxlength')
-                this.input.setAttribute('maxlength', maxValue)
-            }
-            if (this.hasAttribute('pattern')) {
-                this.input.setAttribute('pattern', this.getAttribute('pattern'))
-            }
-            if (this.hasAttribute('readonly')) {
-                this.input.setAttribute('readonly', '')
-                this.readonly = true
-            }
-            if (this.hasAttribute('disabled')) {
-                this.inputParent.classList.add('disabled')
-            }
-            if (this.hasAttribute('error-text')) {
-                this.feedbackText.textContent = this.getAttribute('error-text')
-            }
-            if (this.hasAttribute('type')) {
-                if (this.getAttribute('type') === 'number') {
-                    this.input.setAttribute('inputmode', 'numeric')
-                    this.input.setAttribute('type', 'number')
-                    this.isNumeric = true
-                } else
-                    this.input.setAttribute('type', this.getAttribute('type'))
-            } else
-                this.input.setAttribute('type', 'text')
-            this.input.addEventListener('input', e => {
-                this.checkInput(e)
-            })
-            this.clearBtn.addEventListener('click', e => {
-                this.value = ''
-            })
+            this.animate = this.hasAttribute('animate');
+            this.setAttribute('role', 'textbox');
+            this.input.addEventListener('input', this.checkInput);
+            this.clearBtn.addEventListener('click', this.clear);
         }
 
         attributeChangedCallback(name, oldValue, newValue) {
             if (oldValue !== newValue) {
+                if (this.reflectedAttributes.includes(name)) {
+                    if (this.hasAttribute(name)) {
+                        this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '');
+                    }
+                    else {
+                        this.input.removeAttribute(name);
+                    }
+                }
                 if (name === 'placeholder') {
-                    this.shadowRoot.querySelector('.label').textContent = newValue;
+                    this.label.textContent = newValue;
                     this.setAttribute('aria-label', newValue);
                 }
+                else if (this.hasAttribute('value')) {
+                    this.checkInput();
+                }
+                else if (name === 'type') {
+                    if (this.hasAttribute('type') && this.getAttribute('type') === 'number') {
+                        this.input.setAttribute('inputmode', 'decimal');
+                    }
+                }
+                else if (name === 'helper-text') {
+                    this._helperText = this.getAttribute('helper-text');
+                }
+                else if (name === 'error-text') {
+                    this._errorText = this.getAttribute('error-text');
+                }
+                else if (name === 'required') {
+                    this.isRequired = this.hasAttribute('required');
+                    if (this.isRequired) {
+                        this.setAttribute('aria-required', 'true');
+                    }
+                    else {
+                        this.setAttribute('aria-required', 'false');
+                    }
+                }
+                else if (name === 'readonly') {
+                    if (this.hasAttribute('readonly')) {
+                        this.inputParent.classList.add('readonly');
+                    } else {
+                        this.inputParent.classList.remove('readonly');
+                    }
+                }
+                else if (name === 'disabled') {
+                    if (this.hasAttribute('disabled')) {
+                        this.inputParent.classList.add('disabled');
+                    }
+                    else {
+                        this.inputParent.classList.remove('disabled');
+                    }
+                }
             }
         }
+        disconnectedCallback() {
+            this.input.removeEventListener('input', this.checkInput);
+            this.clearBtn.removeEventListener('click', this.clear);
+        }
     })
 
 //textarea
 const smTextarea = document.createElement('template')
 smTextarea.innerHTML = `
-<style>
-*,
-*::before,
-*::after { 
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-} 
-::-moz-focus-inner{
-    border: none;
-}
-.hide{
-    opacity: 0 !important;
-}
-:host{
-    display: grid;
-    --border-radius: 0.3s;
-    --background: rgba(var(--text-color), 0.06);
-    --padding-right: initial;
-    --padding-left: initial;
-}
-:host(.outlined) .textarea {
-    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
-    background: rgba(var(--foreground-color), 1);
-}
-.textarea{
-    display: grid;
-    position: relative;
-    cursor: text;
-    min-width: 0;
-    text-align: left;
-    overflow: hidden auto;
-    grid-template-columns: 1fr;
-    align-items: stretch;
-    max-height: 8rem;
-    background: var(--background);
-    border-radius: var(--border-radius);
-    padding-left: var(--padding-left);
-    padding-right: var(--padding-right);
-}
-.textarea::after,
-textarea{
-    padding: 0.7rem 1rem;
-    width: 100%;
-    min-width: 1em;
-    font: inherit;
-    color: inherit;
-    resize: none;
-    grid-area: 2/1;
-    justify-self: stretch;
-    background: none;
-    appearance: none;
-    border: none;
-    outline: none;
-    line-height: 1.5;
-    overflow: hidden;
-}
-.textarea::after{
-    content: attr(data-value) ' ';
-    visibility: hidden;
-    white-space: pre-wrap;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    hyphens: auto;
-}
-.readonly{
-    pointer-events: none;
-}
-.textarea:focus-within:not(.readonly){
-    box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
-}
-.disabled{
-    pointer-events: none;
-    opacity: 0.6;
-}
-.placeholder{
-    position: absolute;
-    margin: 0.7rem 1rem;
-    opacity: .7;
-    font-weight: 400;
-    font-size: 1rem;
-    line-height: 1.5;
-    pointer-events: none;
-    user-select: none;
-}
-</style>
-<label class="textarea" part="textarea">
-    <span class="placeholder"></span>
-    <textarea rows="1"></textarea>
-</label>
-`;
+    <style>
+    *,
+    *::before,
+    *::after { 
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    } 
+    ::-moz-focus-inner{
+        border: none;
+    }
+    .hide{
+        opacity: 0 !important;
+    }
+    :host{
+        display: grid;
+        --danger-color: red;
+        --border-radius: 0.3rem;
+        --background: rgba(var(--text-color,(17,17,17)), 0.06);
+        --padding: initial;
+        --max-height: 8rem;
+    }
+    :host([variant="outlined"]) .textarea {
+        box-shadow: 0 0 0 0.1rem rgba(var(--text-color,(17,17,17)), 0.4) inset;
+        background: rgba(var(--background-color,(255,255,255)), 1);
+    }
+    .textarea{
+        display: grid;
+        position: relative;
+        cursor: text;
+        min-width: 0;
+        text-align: left;
+        overflow: hidden auto;
+        grid-template-columns: 1fr;
+        align-items: stretch;
+        max-height: var(--max-height);
+        background: var(--background);
+        border-radius: var(--border-radius);
+        padding: var(--padding);
+    }
+    .textarea::after,
+    textarea{
+        padding: 0.7rem 1rem;
+        width: 100%;
+        min-width: 1em;
+        font: inherit;
+        color: inherit;
+        resize: none;
+        grid-area: 2/1;
+        justify-self: stretch;
+        background: none;
+        appearance: none;
+        border: none;
+        outline: none;
+        line-height: 1.5;
+        overflow: hidden;
+    }
+    .textarea::after{
+        content: attr(data-value) ' ';
+        visibility: hidden;
+        white-space: pre-wrap;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        hyphens: auto;
+    }
+    .readonly{
+        pointer-events: none;
+    }
+    .textarea:focus-within:not(.readonly){
+        box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset;
+    }
+    .placeholder{
+        position: absolute;
+        margin: 0.7rem 1rem;
+        opacity: .7;
+        font-weight: inherit;
+        font-size: inherit;
+        line-height: 1.5;
+        pointer-events: none;
+        user-select: none;
+    }
+    :host([disabled]) .textarea{
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+    @media (any-hover: hover){
+        ::-webkit-scrollbar{
+            width: 0.5rem;
+            height: 0.5rem;
+        }
+        
+        ::-webkit-scrollbar-thumb{
+            background: rgba(var(--text-color,(17,17,17)), 0.3);
+            border-radius: 1rem;
+            &:hover{
+                background: rgba(var(--text-color,(17,17,17)), 0.5);
+            }
+        }
+    }
+    </style>
+    <label class="textarea" part="textarea">
+        <span class="placeholder"></span>
+        <textarea rows="1"></textarea>
+    </label>
+    `;
 customElements.define('sm-textarea',
     class extends HTMLElement {
         constructor() {
@@ -659,18 +704,44 @@ customElements.define('sm-textarea',
             this.attachShadow({
                 mode: 'open'
             }).append(smTextarea.content.cloneNode(true))
+
             this.textarea = this.shadowRoot.querySelector('textarea')
+            this.textareaBox = this.shadowRoot.querySelector('.textarea')
+            this.placeholder = this.shadowRoot.querySelector('.placeholder')
+            this.reflectedAttributes = ['disabled', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
+
+            this.reset = this.reset.bind(this)
+            this.focusIn = this.focusIn.bind(this)
+            this.fireEvent = this.fireEvent.bind(this)
+            this.checkInput = this.checkInput.bind(this)
+        }
+        static get observedAttributes() {
+            return ['disabled', 'value', 'placeholder', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
         }
         get value() {
             return this.textarea.value
         }
         set value(val) {
-            this.textarea.value = val;
-            this.textareaBox.dataset.value = val
-            this.checkInput()
+            this.setAttribute('value', val)
             this.fireEvent()
         }
-        focusIn = () => {
+        get disabled() {
+            return this.hasAttribute('disabled')
+        }
+        set disabled(val) {
+            if (val) {
+                this.setAttribute('disabled', '')
+            } else {
+                this.removeAttribute('disabled')
+            }
+        }
+        get isValid() {
+            return this.textarea.checkValidity()
+        }
+        reset() {
+            this.setAttribute('value', '')
+        }
+        focusIn() {
             this.textarea.focus()
         }
         fireEvent() {
@@ -681,7 +752,7 @@ customElements.define('sm-textarea',
             });
             this.dispatchEvent(event);
         }
-        checkInput = () => {
+        checkInput() {
             if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '')
                 return;
             if (this.textarea.value !== '') {
@@ -691,234 +762,132 @@ customElements.define('sm-textarea',
             }
         }
         connectedCallback() {
-            this.textareaBox = this.shadowRoot.querySelector('.textarea')
-            this.placeholder = this.shadowRoot.querySelector('.placeholder')
-
-            if(this.hasAttribute('placeholder'))
-                this.placeholder.textContent = this.getAttribute('placeholder')
-
-            if (this.hasAttribute('value')) {
-                this.textarea.value = this.getAttribute('value')
-                this.checkInput()
-            }
-            if (this.hasAttribute('required')) {
-                this.textarea.setAttribute('required', '')
-            }
-            if (this.hasAttribute('readonly')) {
-                this.textarea.setAttribute('readonly', '')
-            }
-            if (this.hasAttribute('rows')) {
-                this.textarea.setAttribute('rows', this.getAttribute('rows'))
-            }
             this.textarea.addEventListener('input', e => {
                 this.textareaBox.dataset.value = this.textarea.value
                 this.checkInput()
             })
         }
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (this.reflectedAttributes.includes(name)) {
+                if (this.hasAttribute(name)) {
+                    this.textarea.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '')
+                }
+                else {
+                    this.textContent.removeAttribute(name)
+                }
+            }
+            else if (name === 'placeholder') {
+                this.placeholder.textContent = this.getAttribute('placeholder')
+            }
+            else if (name === 'value') {
+                this.textarea.value = newValue;
+                this.textareaBox.dataset.value = newValue
+                this.checkInput()
+            }
+        }
     })
+const smForm = document.createElement('template');
+smForm.innerHTML = `
+        <style>
+        *{
+            padding: 0;
+            margin: 0;
+            box-sizing: border-box;
+        }
+        :host{
+            display: flex;
+            width: 100%;
+        }
+        form{
+            display: grid;
+            gap: var(--gap, 1.5rem);
+            width: 100%;
+        }
+        </style>
+        <form part="form" onsubmit="return false">
+            <slot></slot>
+        </form>
+    `;
 
-//chcekbox
-
-const smCheckbox = document.createElement('template')
-smCheckbox.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-    } 
-    :host{
-        display: -webkit-inline-box;
-        display: -ms-inline-flexbox;
-        display: inline-flex;
-        --height: 1.6rem;
-        --width: 1.6rem;
-        --border-radius: 0.2rem;
-        --border-color: rgba(var(--text-color), 0.7);
-    }
-    .checkbox {
-        position: relative;
-        display:-webkit-box;
-        display:-ms-flexbox;
-        display:flex;
-        -webkit-box-align: center;
-            -ms-flex-align: center;
-                align-items: center;
-        cursor: pointer;
-        height: 1.5rem;
-        outline: none;
-        -webkit-tap-highlight-color: transparent;
-    }
-    
-    .checkbox:active .icon,
-    .checkbox:focus-within .icon{
-        box-shadow: 0 0 0 0.3rem var(--accent-color) inset;
-    }
-    
-    .checkbox input {
-        display: none;
-    }
-    
-    .checkbox .checkmark {
-        stroke-dashoffset: -65;
-        stroke-dasharray: 65;
-        -webkit-transition: stroke-dashoffset 0.3s; 
-        -o-transition: stroke-dashoffset 0.3s; 
-        transition: stroke-dashoffset 0.3s;
-    }
-    
-    .checkbox input:checked ~ svg .checkmark {
-        stroke-dashoffset: 0;
-        stroke: rgba(var(--foreground-color), 1);
-    }
-    .checkbox input:checked ~ .icon {
-        stroke-width: 8; 
-        stroke: var(--accent-color);
-        background: var(--accent-color);
-    }
-    .checkbox input:not(:checked) ~ .icon {
-        box-shadow: 0 0 0 0.2rem var(--border-color) inset;
-    }
-    
-    .icon {
-        fill: none;
-        height: var(--height);
-        width: var(--width);
-        padding: 0.2rem;
-        stroke: rgba(var(--text-color), 0.7);
-        stroke-width: 6;
-        overflow: visible;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        -webkit-transition: background 0.3s;
-        -o-transition: background 0.3s;
-        transition: background 0.3s;
-        border-radius: var(--border-radius);
-    }
-    .disabled {
-        opacity: 0.6;
-        pointer-events: none;
-    }
-</style>
-<label class="checkbox" tabindex="0">
-    <input type="checkbox">
-    <svg class="icon" viewBox="0 0 64 64">
-        <title>checkbox</title>
-        <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />
-    </svg>
-    <slot></slot>
-</label>`
-customElements.define('sm-checkbox', class extends HTMLElement {
+customElements.define('sm-form', class extends HTMLElement {
     constructor() {
         super()
         this.attachShadow({
             mode: 'open'
-        }).append(smCheckbox.content.cloneNode(true))
+        }).append(smForm.content.cloneNode(true))
 
-        this.checkbox = this.shadowRoot.querySelector('.checkbox');
-        this.input = this.shadowRoot.querySelector('input')
+        this.form = this.shadowRoot.querySelector('form');
+        this.formElements
+        this.requiredElements
+        this.submitButton
+        this.resetButton
+        this.allRequiredValid = false;
 
-        this.isChecked = false
-        this.isDisabled = false
+        this.debounce = this.debounce.bind(this)
+        this._checkValidity = this._checkValidity.bind(this)
+        this.handleKeydown = this.handleKeydown.bind(this)
+        this.reset = this.reset.bind(this)
+        this.elementsChanged = this.elementsChanged.bind(this)
     }
-
-    static get observedAttributes() {
-        return ['disabled', 'checked']
+    debounce(callback, wait) {
+        let timeoutId = null;
+        return (...args) => {
+            window.clearTimeout(timeoutId);
+            timeoutId = window.setTimeout(() => {
+                callback.apply(null, args);
+            }, wait);
+        };
     }
-
-    get disabled() {
-        return this.getAttribute('disabled')
-    }
-
-    set disabled(val) {
-        this.setAttribute('disabled', val)
-    }
-
-    get checked() {
-        return this.isChecked
-    }
-
-    set checked(value) {
-        if (value) {
-            this.setAttribute('checked', '')
+    _checkValidity() {
+        this.allRequiredValid = this.requiredElements.every(elem => elem.isValid)
+        if (!this.submitButton) return;
+        if (this.allRequiredValid) {
+            this.submitButton.disabled = false;
         }
         else {
-            this.removeAttribute('checked')
+            this.submitButton.disabled = true;
         }
     }
-
-    set value(val) {
-        this.val = val
-        this.setAttribute('value', value)
-    }
-
-    get value() {
-        return getAttribute('value')
-    }
-
-    dispatch = () => {
-        this.dispatchEvent(new CustomEvent('change', {
-            bubbles: true,
-            composed: true
-        }))
-    }
-    handleKeyup = e => {
-        if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) {
-            if (this.hasAttribute('checked')) {
-                this.input.checked = false
-                this.removeAttribute('checked')
+    handleKeydown(e) {
+        if (e.key === 'Enter' && !e.target.tagName.includes('TEXTAREA')) {
+            if (this.allRequiredValid) {
+                if (this.submitButton) {
+                    this.submitButton.click()
+                }
+                this.dispatchEvent(new CustomEvent('submit', {
+                    bubbles: true,
+                    composed: true,
+                }))
             }
             else {
-                this.input.checked = true
-                this.setAttribute('checked', '')
+                this.requiredElements.find(elem => !elem.isValid).vibrate()
             }
         }
     }
-    handleChange = e => {
-        if (this.input.checked) {
-            this.setAttribute('checked', '')
-        }
-        else {
-            this.removeAttribute('checked')
-        }
+    reset() {
+        this.formElements.forEach(elem => elem.reset())
+    }
+    elementsChanged() {
+        this.formElements = [...this.querySelectorAll('sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')]
+        this.requiredElements = this.formElements.filter(elem => elem.hasAttribute('required'));
+        this.submitButton = this.querySelector('[variant="primary"], [type="submit"]');
+        this.resetButton = this.querySelector('[type="reset"]');
+        if (this.resetButton) {
+            this.resetButton.addEventListener('click', this.reset);
+        }
+        this._checkValidity()
     }
-    
     connectedCallback() {
-        this.val = ''
-        this.addEventListener('keyup', this.handleKeyup)
-        this.input.addEventListener('change', this.handleChange)
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-            if (name === 'disabled') {
-                if (newValue === 'true') {
-                    this.checkbox.classList.add('disabled')
-                    this.isDisabled = true
-                } else {
-                    this.checkbox.classList.remove('disabled')
-                    this.isDisabled = false
-                }
-            }
-            else if (name === 'checked') {
-                if (this.hasAttribute('checked')) {
-                    this.isChecked = true
-                    this.input.checked = true
-                }
-                else {
-                    this.input.checked = false
-                    this.isChecked = false
-                }
-                this.dispatch()
-            }
-        }
+        const slot = this.shadowRoot.querySelector('slot')
+        slot.addEventListener('slotchange', this.elementsChanged)
+        this.addEventListener('input', this.debounce(this._checkValidity, 100));
+        this.addEventListener('keydown', this.debounce(this.handleKeydown, 100));
     }
     disconnectedCallback() {
-        this.removeEventListener('keyup', this.handleKeyup)
-        this.removeEventListener('change', this.handleChange)
+        this.removeEventListener('input', this.debounce(this._checkValidity, 100));
+        this.removeEventListener('keydown', this.debounce(this.handleKeydown, 100));
     }
 })
-
 //switch
 
 const smSwitch = document.createElement('template')
@@ -948,9 +917,10 @@ smSwitch.innerHTML = `
         cursor: pointer;
         -webkit-tap-highlight-color: transparent;
     }
-    :host(:not([disable])) label:focus-visible{
-        -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
-            box-shadow: 0 0 0 0.1rem var(--accent-color);
+    :host([disabled]) {
+        cursor: not-allowed;
+        opacity: 0.6;
+        pointer-events: none;
     }
     .switch {
         position: relative;
@@ -980,21 +950,18 @@ smSwitch.innerHTML = `
         -webkit-transition: background 0.3s;
         -o-transition: background 0.3s;
         transition: background 0.3s;
-        background: rgba(var(--text-color), 0.4);
+        background: rgba(var(--text-color,inherit), 0.4);
         -webkit-box-shadow: 0 0.1rem 0.3rem #00000040 inset;
                 box-shadow: 0 0.1rem 0.3rem #00000040 inset;
         border-radius: 1rem;
     }
     
-    .switch:active .button::after,
-    .switch:focus .button::after{
-        opacity: 1
-    }
-    .switch:focus-visible .button::after{
-        opacity: 1
+    label:active .thumb::after,
+    label:focus-within .thumb::after{
+        opacity: 1;
     }
     
-    .button::after{
+    .thumb::after{
         content: '';
         display: -webkit-box;
         display: -ms-flexbox;
@@ -1002,7 +969,7 @@ smSwitch.innerHTML = `
         position: absolute;
         height: 2.6rem;
         width: 2.6rem;
-        background: rgba(var(--text-color), 0.2);
+        background: rgba(var(--text-color,inherit), 0.2);
         border-radius: 2rem;
         opacity: 0;
         -webkit-transition: opacity 0.3s;
@@ -1010,7 +977,7 @@ smSwitch.innerHTML = `
         transition: opacity 0.3s;
     }
     
-    .button {
+    .thumb {
         position: relative;
         display: -webkit-inline-box;
         display: -ms-inline-flexbox;
@@ -1034,18 +1001,14 @@ smSwitch.innerHTML = `
         border: solid 0.3rem white;
     }
     
-    input:checked ~ .button {
+    input:checked ~ .thumb {
         -webkit-transform: translateX(100%);
             -ms-transform: translateX(100%);
                 transform: translateX(100%);
     }
     
     input:checked ~ .track {
-        background: var(--accent-color);
-    }
-    .disabled {
-        opacity: 0.6;
-        pointer-events: none;
+        background: var(--accent-color, teal);
     }
 </style>
 <label tabindex="0">
@@ -1053,8 +1016,9 @@ smSwitch.innerHTML = `
     <div part="switch" class="switch">
         <input type="checkbox">
         <div class="track"></div>
-        <div class="button"></div>
+        <div class="thumb"></div>
     </div>
+    <slot name="right"></slot>
 </label>`
 
 customElements.define('sm-switch', class extends HTMLElement {
@@ -1067,22 +1031,23 @@ customElements.define('sm-switch', class extends HTMLElement {
         this.input = this.shadowRoot.querySelector('input')
         this.isChecked = false
         this.isDisabled = false
+
+        this.dispatch = this.dispatch.bind(this)
+    }
+
+    static get observedAttributes() {
+        return ['disabled', 'checked']
     }
 
     get disabled() {
-        return this.getAttribute('disabled')
+        return this.isDisabled
     }
 
     set disabled(val) {
         if (val) {
-            this.disabled = true
             this.setAttribute('disabled', '')
-            this.switch.classList.add('disabled')
         } else {
-            this.disabled = false
             this.removeAttribute('disabled')
-            this.switch.classList.remove('disabled')
-
         }
     }
 
@@ -1093,29 +1058,32 @@ customElements.define('sm-switch', class extends HTMLElement {
     set checked(value) {
         if (value) {
             this.setAttribute('checked', '')
-            this.isChecked = true
-            this.input.checked = true
         } else {
             this.removeAttribute('checked')
-            this.isChecked = false
-            this.input.checked = false
         }
     }
+    get value() {
+        return this.isChecked
+    }
 
-    dispatch = () => {
+    reset() {
+
+    }
+
+    dispatch() {
         this.dispatchEvent(new CustomEvent('change', {
             bubbles: true,
-            composed: true
+            composed: true,
+            detail: {
+                value: this.isChecked
+            }
         }))
     }
 
     connectedCallback() {
-        if (this.hasAttribute('disabled'))
-            this.switch.classList.add('disabled')
-        if (this.hasAttribute('checked'))
-            this.input.checked = true
-        this.addEventListener('keyup', e => {
-            if ((e.code === "Enter" || e.code === "Space") && !this.isDisabled) {
+        this.addEventListener('keydown', e => {
+            if (e.key === ' ' && !this.isDisabled) {
+                e.preventDefault()
                 this.input.click()
             }
         })
@@ -1127,6 +1095,29 @@ customElements.define('sm-switch', class extends HTMLElement {
             this.dispatch()
         })
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            if (name === 'disabled') {
+                if (this.hasAttribute('disabled')) {
+                    this.disabled = true
+                }
+                else {
+                    this.disabled = false
+                }
+            }
+            else if (name === 'checked') {
+                if (this.hasAttribute('checked')) {
+                    this.isChecked = true
+                    this.input.checked = true
+                }
+                else {
+                    this.isChecked = false
+                    this.input.checked = false
+                }
+            }
+        }
+    }
+
 })
 
 // select
@@ -1139,24 +1130,15 @@ smSelect.innerHTML = `
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
 } 
-.icon {
-    fill: none;
-    height: 0.8rem;
-    width: 0.8rem;
-    stroke: rgba(var(--text-color), 0.7);
-    stroke-width: 6;
-    overflow: visible;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}      
 :host{
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    --min-width: 100%;
 }
-.hide{
-    opacity: 0;
-    pointer-events: none;
+:host([disabled]) .select{
+    opacity: 0.6;
+    cursor: not-allowed;
 }
 .select{
     position: relative;
@@ -1165,17 +1147,25 @@ smSelect.innerHTML = `
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
     cursor: pointer;
     width: 100%;
     -webkit-tap-highlight-color: transparent;
 }
-.option-text{
+.icon {
+    height: 1.2rem;
+    width: 1.2rem;
+    margin-left: 0.5rem;
+    fill: rgba(var(--text-color, (17,17,17)), 0.7);
+}      
+.selected-option-text{
+    font-size: inherit;
     overflow: hidden;
     -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
     white-space: nowrap;
+    font-weight: 500;
 }
 .selection{
     border-radius: 0.3rem;
@@ -1184,20 +1174,17 @@ smSelect.innerHTML = `
     -ms-grid-columns: 1fr auto;
     grid-template-columns: 1fr auto;
         grid-template-areas: 'heading heading' '. .';
-    padding: 0.4rem 1rem;
-    background: rgba(var(--text-color), 0.06);
-    border: solid 1px rgba(var(--text-color), 0.2);
+    padding: var(--padding,0.6rem 0.8rem);
+    background: rgba(var(--text-color,(17,17,17)), 0.06);
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     outline: none;
+    z-index: 2;
 }
 .selection:focus{
-    -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
-            box-shadow: 0 0 0 0.1rem var(--accent-color) 
-}
-.icon{
-    margin-left: 1rem;
+    -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color, teal);
+            box-shadow: 0 0 0 0.1rem var(--accent-color, teal) 
 }
 :host([align-select="left"]) .options{
     left: 0;
@@ -1207,7 +1194,8 @@ smSelect.innerHTML = `
 }
 .options{
     top: 100%;
-    margin-top: 0.5rem; 
+    padding: var(--options-padding, 0.3rem);
+    margin-top: 0.2rem; 
     overflow: hidden auto;
     position: absolute;
     grid-area: options;
@@ -1218,14 +1206,12 @@ smSelect.innerHTML = `
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    min-width: 100%;
-    background: rgba(var(--foreground-color), 1);
-    -webkit-transition: opacity 0.3s, top 0.3s;
-    -o-transition: opacity 0.3s, top 0.3s;
-    transition: opacity 0.3s, top 0.3s;
-    border: solid 1px rgba(var(--text-color), 0.2);
-    border-radius: 0.3rem;
-    z-index: 2;
+    min-width: var(--min-width);
+    max-height: var(--max-height, auto);
+    background: rgba(var(--foreground-color,(255,255,255)), 1);
+    border: solid 1px rgba(var(--text-color,(17,17,17)), 0.2);
+    border-radius: var(--border-radius, 0.5rem);
+    z-index: 1;
     -webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
             box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
 }
@@ -1234,13 +1220,28 @@ smSelect.innerHTML = `
         -ms-transform: rotate(180deg);
             transform: rotate(180deg)
 }
+.hide{
+    display: none;
+}
+@media (any-hover: hover){
+    ::-webkit-scrollbar{
+        width: 0.5rem;
+        height: 0.5rem;
+    }
+    
+    ::-webkit-scrollbar-thumb{
+        background: rgba(var(--text-color,(17,17,17)), 0.3);
+        border-radius: 1rem;
+        &:hover{
+            background: rgba(var(--text-color,(17,17,17)), 0.5);
+        }
+    }
+}
 </style>
-<div class="select" >
-    <div class="selection" tabindex="0">
-        <div class="option-text"></div>
-        <svg class="icon toggle" viewBox="0 0 64 64">
-            <polyline points="63.65 15.99 32 47.66 0.35 15.99"/>
-        </svg>
+<div class="select">
+    <div class="selection">
+        <div class="selected-option-text"></div>
+        <svg class="icon toggle" 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 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
     </div>
     <div part="options" class="options hide">
         <slot></slot> 
@@ -1252,128 +1253,211 @@ customElements.define('sm-select', class extends HTMLElement {
         this.attachShadow({
             mode: 'open'
         }).append(smSelect.content.cloneNode(true))
+
+        this.focusIn = this.focusIn.bind(this)
+        this.reset = this.reset.bind(this)
+        this.open = this.open.bind(this)
+        this.collapse = this.collapse.bind(this)
+        this.toggle = this.toggle.bind(this)
+        this.handleOptionsNavigation = this.handleOptionsNavigation.bind(this)
+        this.handleOptionSelection = this.handleOptionSelection.bind(this)
+        this.handleKeydown = this.handleKeydown.bind(this)
+        this.handleClickOutside = this.handleClickOutside.bind(this)
+
+        this.availableOptions
+        this.previousOption
+        this.isOpen = false;
+        this.label = ''
+        this.slideDown = [{
+            transform: `translateY(-0.5rem)`,
+            opacity: 0
+        },
+        {
+            transform: `translateY(0)`,
+            opacity: 1
+        }
+        ]
+        this.slideUp = [{
+            transform: `translateY(0)`,
+            opacity: 1
+        },
+        {
+            transform: `translateY(-0.5rem)`,
+            opacity: 0
+        }
+        ]
+        this.animationOptions = {
+            duration: 300,
+            fill: "forwards",
+            easing: 'ease'
+        }
+
+        this.optionList = this.shadowRoot.querySelector('.options')
+        this.chevron = this.shadowRoot.querySelector('.toggle')
+        this.selection = this.shadowRoot.querySelector('.selection')
+        this.selectedOptionText = this.shadowRoot.querySelector('.selected-option-text')
     }
     static get observedAttributes() {
-        return ['value']
+        return ['disabled', 'label']
     }
     get value() {
         return this.getAttribute('value')
     }
     set value(val) {
-        this.setAttribute('value', val)
+        const selectedOption = this.availableOptions.find(option => option.getAttribute('value') === val)
+        if (selectedOption) {
+            this.setAttribute('value', val)
+            this.selectedOptionText.textContent = `${this.label}${selectedOption.textContent}`;
+            if (this.previousOption) {
+                this.previousOption.classList.remove('check-selected')
+            }
+            selectedOption.classList.add('check-selected')
+            this.previousOption = selectedOption
+        } else {
+            console.warn(`There is no option with ${val} as value`)
+        }
     }
 
-    collapse() {
-        this.optionList.animate(this.slideUp, this.animationOptions)
-        this.optionList.classList.add('hide')
-        this.chevron.classList.remove('rotate')
-        this.open = false
+    reset(fire = true) {
+        if (this.availableOptions[0] && this.previousOption !== this.availableOptions[0]) {
+            const firstElement = this.availableOptions[0];
+            if (this.previousOption) {
+                this.previousOption.classList.remove('check-selected')
+            }
+            firstElement.classList.add('check-selected')
+            this.value = firstElement.getAttribute('value')
+            this.selectedOptionText.textContent = `${this.label}${firstElement.textContent}`
+            this.previousOption = firstElement;
+            if (fire) {
+                this.fireEvent()
+            }
+        }
     }
-    connectedCallback() {
-        this.availableOptions
-        this.optionList = this.shadowRoot.querySelector('.options')
-        this.chevron = this.shadowRoot.querySelector('.toggle')
-        let slot = this.shadowRoot.querySelector('.options slot'),
-            selection = this.shadowRoot.querySelector('.selection'),
-            previousOption
-        this.open = false;
-        this.slideDown = [{
-                    transform: `translateY(-0.5rem)`
-                },
-                {
-                    transform: `translateY(0)`
-                }
-            ],
-            this.slideUp = [{
-                    transform: `translateY(0)`
-                },
-                {
-                    transform: `translateY(-0.5rem)`
-                }
-            ],
-            this.animationOptions = {
-                duration: 300,
-                fill: "forwards",
-                easing: 'ease'
+
+    focusIn() {
+        this.selection.focus()
+    }
+
+    open() {
+        this.optionList.classList.remove('hide')
+        this.optionList.animate(this.slideDown, this.animationOptions)
+        this.chevron.classList.add('rotate')
+        this.isOpen = true
+    }
+    collapse() {
+        this.chevron.classList.remove('rotate')
+        this.optionList.animate(this.slideUp, this.animationOptions)
+            .onfinish = () => {
+                this.optionList.classList.add('hide')
+                this.isOpen = false
             }
-        selection.addEventListener('click', e => {
-            if (!this.open) {
-                this.optionList.classList.remove('hide')
-                this.optionList.animate(this.slideDown, this.animationOptions)
-                this.chevron.classList.add('rotate')
-                this.open = true
+    }
+    toggle() {
+        if (!this.isOpen && !this.hasAttribute('disabled')) {
+            this.open()
+        } else {
+            this.collapse()
+        }
+    }
+
+    fireEvent() {
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value: this.value
+            }
+        }))
+    }
+
+    handleOptionsNavigation(e) {
+        if (e.key === 'ArrowUp') {
+            e.preventDefault()
+            if (document.activeElement.previousElementSibling) {
+                document.activeElement.previousElementSibling.focus()
             } else {
-                this.collapse()
+                this.availableOptions[this.availableOptions.length - 1].focus()
             }
-        })
-        selection.addEventListener('keydown', e => {
-            if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
-                e.preventDefault()
+        }
+        else if (e.key === 'ArrowDown') {
+            e.preventDefault()
+            if (document.activeElement.nextElementSibling) {
+                document.activeElement.nextElementSibling.focus()
+            } else {
                 this.availableOptions[0].focus()
             }
-            if (e.code === 'Enter' || e.code === 'Space')
-                if (!this.open) {
-                    this.optionList.classList.remove('hide')
-                    this.optionList.animate(this.slideDown, this.animationOptions)
-                    this.chevron.classList.add('rotate')
-                    this.open = true
-                } else {
-                    this.collapse()
-                }
-        })
-        this.optionList.addEventListener('keydown', e => {
-            if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
+        }
+    }
+    handleOptionSelection(e) {
+        if (this.previousOption !== document.activeElement) {
+            this.value = document.activeElement.getAttribute('value')
+            this.fireEvent()
+        }
+    }
+    handleClick(e) {
+        if (e.target === this) {
+            this.toggle()
+        }
+        else {
+            this.handleOptionSelection()
+            this.collapse()
+        }
+    }
+    handleKeydown(e) {
+        if (e.target === this) {
+            if (this.isOpen && e.key === 'ArrowDown') {
                 e.preventDefault()
-                if (document.activeElement.previousElementSibling) {
-                    document.activeElement.previousElementSibling.focus()
-                }
+                this.availableOptions[0].focus()
+                this.handleOptionSelection(e)
             }
-            if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
+            else if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault()
-                if (document.activeElement.nextElementSibling)
-                    document.activeElement.nextElementSibling.focus()
+                this.toggle()
             }
-        })
-        this.addEventListener('optionSelected', e => {
-            if (previousOption !== e.target) {
-                this.setAttribute('value', e.detail.value)
-                this.shadowRoot.querySelector('.option-text').textContent = e.detail.text;
-                this.dispatchEvent(new CustomEvent('change', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        value: e.detail.value
-                    }
-                }))
-                if (previousOption) {
-                    previousOption.classList.remove('check-selected')
-                }
-                previousOption = e.target;
-            }
-            if (!e.detail.switching)
+        }
+        else {
+            this.handleOptionsNavigation(e)
+            this.handleOptionSelection(e)
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
                 this.collapse()
-
-            e.target.classList.add('check-selected')
-        })
+            }
+        }
+    }
+    handleClickOutside(e) {
+        if (this.isOpen && !this.contains(e.target)) {
+            this.collapse()
+        }
+    }
+    connectedCallback() {
+        this.setAttribute('role', 'listbox')
+        if (!this.hasAttribute('disabled')) {
+            this.selection.setAttribute('tabindex', '0')
+        }
+        let slot = this.shadowRoot.querySelector('slot')
         slot.addEventListener('slotchange', e => {
             this.availableOptions = slot.assignedElements()
-            if (this.availableOptions[0]) {
-                let firstElement = this.availableOptions[0];
-                previousOption = firstElement;
-                firstElement.classList.add('check-selected')
-                this.setAttribute('value', firstElement.getAttribute('value'))
-                this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent
-                this.availableOptions.forEach((element, index) => {
-                    element.setAttribute('data-rank', index + 1);
-                    element.setAttribute('tabindex', "0");
-                })
-            }
+            this.reset(false)
         });
-        document.addEventListener('mousedown', e => {
-            if (!this.contains(e.target) && this.open) {
-                this.collapse()
+        this.addEventListener('click', this.handleClick)
+        this.addEventListener('keydown', this.handleKeydown)
+        document.addEventListener('mousedown', this.handleClickOutside)
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this.toggle)
+        this.removeEventListener('keydown', this.handleKeydown)
+        document.removeEventListener('mousedown', this.handleClickOutside)
+    }
+    attributeChangedCallback(name) {
+        if (name === "disabled") {
+            if (this.hasAttribute('disabled')) {
+                this.selection.removeAttribute('tabindex')
+            } else {
+                this.selection.setAttribute('tabindex', '0')
             }
-        })
+        } else if (name === 'label') {
+            this.label = this.hasAttribute('label') ? `${this.getAttribute('label')} ` : ''
+        }
     }
 })
 
@@ -1393,54 +1477,48 @@ smOption.innerHTML = `
     display: flex;
 }
 .option{
-    min-width: 100%;
-    padding: 0.8rem 1.2rem;
-    cursor: pointer;
-    overflow-wrap: break-word;
-    outline: none;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
+    display: grid;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
+    min-width: max-content;
+    width: 100%;
+    gap: 0.5rem;
+    grid-template-columns: max-content minmax(0, 1fr);
+    padding: var(--padding, 0.6rem 1rem);
+    cursor: pointer;
+    white-space: nowrap;
+    outline: none;
+    user-select: none;
+    border-radius: var(--border-radius, 0.3rem);
 }
 :host(:focus){
     outline: none;
-    background: rgba(var(--text-color), 0.1);
+    background: rgba(var(--text-color,(17,17,17)), 0.1);
+}
+.icon {
+    opacity: 0;
+    height: 1.2rem;
+    width: 1.2rem;
+    fill: rgba(var(--text-color,(17,17,17)), 0.8);
 }
 :host(:focus) .option .icon{
     opacity: 0.4
 }
 :host(.check-selected) .icon{
-    opacity: 1 !important
-}
-.icon {
-    margin-right: 0.8rem;
-    fill: none;
-    height: 0.8rem;
-    width: 0.8rem;
-    stroke: rgba(var(--text-color), 0.7);
-    stroke-width: 10;
-    overflow: visible;
-    stroke-linecap: round;
-    border-radius: 1rem;
-    stroke-linejoin: round;
-    opacity: 0;
+    opacity: 1
 }
 @media (hover: hover){
     .option:hover{
-        background: rgba(var(--text-color), 0.1);
+        background: rgba(var(--text-color,(17,17,17)), 0.1);
     }
-    .option:hover .icon{
+    :host(:not(.check-selected):hover) .icon{
         opacity: 0.4
     }
 }
 </style>
 <div class="option">
-    <svg class="icon" viewBox="0 0 64 64">
-        <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
-    </svg>
+    <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="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>
     <slot></slot> 
 </div>`;
 customElements.define('sm-option', class extends HTMLElement {
@@ -1451,375 +1529,32 @@ customElements.define('sm-option', class extends HTMLElement {
         }).append(smOption.content.cloneNode(true))
     }
 
-    sendDetails(switching) {
-        let optionSelected = new CustomEvent('optionSelected', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                text: this.textContent,
-                value: this.getAttribute('value'),
-                switching: switching
-            }
-        })
-        this.dispatchEvent(optionSelected)
-    }
-
     connectedCallback() {
-        let validKey = [
-            'ArrowUp',
-            'ArrowDown',
-            'ArrowLeft',
-            'ArrowRight'
-        ]
-        this.addEventListener('click', e => {
-            this.sendDetails()
-        })
-        this.addEventListener('keyup', e => {
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                this.sendDetails(false)
-            }
-            if (validKey.includes(e.code)) {
-                e.preventDefault()
-                this.sendDetails(true)
-            }
-        })
-        if (this.hasAttribute('default')) {
-            setTimeout(() => {
-                this.sendDetails()
-            }, 0);
-        }
-    }
-})
-
-// select
-const smStripSelect = document.createElement('template')
-smStripSelect.innerHTML = `
-<style>     
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-}    
-:host{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-}
-.icon {
-    position: absolute;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    fill: none;
-    height: 2.6rem;
-    width: 2.6rem;
-    padding: 0.9rem;
-    stroke: rgba(var(--text-color), 0.7);
-    stroke-width: 10;
-    overflow: visible;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    cursor: pointer;
-    min-width: 0;
-    z-index: 1;
-    background: rgba(var(--foreground-color), 1);
-    -webkit-tap-highlight-color: transparent;
-    -webkit-transition: opacity 0.3s;
-    -o-transition: opacity 0.3s;
-    transition: opacity 0.3s; 
-}
-.hide{
-    pointer-events: none;
-    opacity: 0;
-}
-.select-container{
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    width: 100%;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-}
-.select{
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    gap: 0.5rem;
-    max-width: 100%;
-    overflow: auto hidden;
-}
-.previous-item{
-    left: 0;
-}
-.next-item{
-    right: 0;
-}
-.left,.right{
-    position: absolute;
-    width: 1rem;
-    height: 100%; 
-    -webkit-transition: opacity 0.3s; 
-    -o-transition: opacity 0.3s; 
-    transition: opacity 0.3s;
-    z-index: 1;
-}
-.left{
-    background: -webkit-gradient(linear, right top, left top, from(transparent), to(rgba(var(--foreground-color), 1)));
-    background: -o-linear-gradient(right, transparent, rgba(var(--foreground-color), 1));
-    background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 1))
-}
-.right{
-    right: 0;
-    background: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(var(--foreground-color), 1)));
-    background: -o-linear-gradient(left, transparent, rgba(var(--foreground-color), 1));
-    background: linear-gradient(to right, transparent, rgba(var(--foreground-color), 1))
-}
-slot::slotted(.active){
-    border-radius: 2rem;
-    opacity: 1;
-    background-color: rgba(var(--text-color), .6);  
-    color: rgba(var(--foreground-color), 1);
-}
-@media (hover: none){
-    ::-webkit-scrollbar-track {
-        -webkit-box-shadow: none !important;
-        background-color: transparent !important;
-    }
-    ::-webkit-scrollbar {
-        height: 0;
-        background-color: transparent;
-    }
-    .icon{
-        display: none;
-    }
-    .left,.right{
-        display: block;
-    }
-}
-@media (hover: hover){
-    .select{
-        overflow: hidden;
-    }
-    .left,.right{
-        display: none;
-    }
-}
-</style>
-<div class="select-container">
-    <div class="left hide"></div>
-    <svg class="icon previous-item hide" viewBox="4 0 64 64">
-        <title>Previous</title>
-        <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
-    </svg>
-    <div class="select">
-        <slot></slot> 
-    </div>
-    <svg class="icon next-item hide" viewBox="-6 0 64 64">
-        <title>Next</title>
-        <polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
-    </svg>
-    <div class="right hide"></div>
-</div>`;
-customElements.define('sm-strip-select', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smStripSelect.content.cloneNode(true))
-    }
-    static get observedAttributes() {
-        return ['value']
-    }
-    get value() {
-        return this.getAttribute('value')
-    }
-    set value(val) {
-        this.setAttribute('value', val)
-    }
-    scrollLeft = () => {
-        this.select.scrollBy({
-            top: 0,
-            left: -this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-
-    scrollRight = () => {
-        this.select.scrollBy({
-            top: 0,
-            left: this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-    connectedCallback() {
-        let previousOption,
-            slot = this.shadowRoot.querySelector('slot');
-        this.selectContainer = this.shadowRoot.querySelector('.select-container')
-        this.select = this.shadowRoot.querySelector('.select')
-        this.nextArrow = this.shadowRoot.querySelector('.next-item')
-        this.previousArrow = this.shadowRoot.querySelector('.previous-item')
-        this.nextGradient = this.shadowRoot.querySelector('.right')
-        this.previousGradient = this.shadowRoot.querySelector('.left')
-        this.selectOptions
-        this.scrollDistance = this.selectContainer.getBoundingClientRect().width
-        const firstElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.previousArrow.classList.add('hide')
-                this.previousGradient.classList.add('hide')
-            } else {
-                this.previousArrow.classList.remove('hide')
-                this.previousGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.selectContainer,
-            threshold: 0.95
-        })
-        const lastElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.nextArrow.classList.add('hide')
-                this.nextGradient.classList.add('hide')
-            } else {
-                this.nextArrow.classList.remove('hide')
-                this.nextGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.selectContainer,
-            threshold: 0.95
-        })
-
-        const selectObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.scrollDistance = this.selectContainer.getBoundingClientRect().width
-            }
-        })
-
-        selectObserver.observe(this.selectContainer)
-        this.addEventListener('optionSelected', e => {
-            if (previousOption === e.target) return;
-            if (previousOption)
-                previousOption.classList.remove('active')
-            e.target.classList.add('active')
-            e.target.scrollIntoView({
-                behavior: 'smooth',
-                inline: 'center',
-                block: 'nearest'
-            })
-            this.setAttribute('value', e.detail.value)
-            this.dispatchEvent(new CustomEvent('change', {
-                bubbles: true,
-                composed: true
-            }))
-            previousOption = e.target;
-        })
-        slot.addEventListener('slotchange', e => {
-            this.selectOptions = slot.assignedElements()
-            firstElementObserver.observe(this.selectOptions[0])
-            lastElementObserver.observe(this.selectOptions[this.selectOptions.length - 1])
-            if (this.selectOptions[0]) {
-                let firstElement = this.selectOptions[0];
-                this.setAttribute('value', firstElement.getAttribute('value'))
-                firstElement.classList.add('active')
-                previousOption = firstElement;
-            }
-        });
-        this.nextArrow.addEventListener('click', this.scrollRight)
-        this.previousArrow.addEventListener('click', this.scrollLeft)
-    }
-
-    disconnectedCallback() {
-        this.nextArrow.removeEventListener('click', this.scrollRight)
-        this.previousArrow.removeEventListener('click', this.scrollLeft)
-    }
-})
-
-// option
-const smStripOption = document.createElement('template')
-smStripOption.innerHTML = `
-<style>     
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-}     
-:host{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-}
-.option{
-    padding: 0.4rem 0.8rem;
-    cursor: pointer;
-    overflow-wrap: break-word;
-    white-space: nowrap;
-    outline: none;
-    border-radius: 2rem;
-    text-transform: capitalize;
-    border: solid 1px rgba(var(--text-color), .3);
-    opacity: 0.9;
-}
-.option:focus{
-    background: rgba(var(--text-color), 0.1);
-}
-
-@media (hover: hover){
-    .option{
-        -webkit-transition: background 0.3s;
-        -o-transition: background 0.3s;
-        transition: background 0.3s;
-    }
-    .option:hover{
-        background: rgba(var(--text-color), 0.1);
-    }
-}
-</style>
-<div class="option" tabindex="0">
-    <slot></slot> 
-</div>`;
-customElements.define('sm-strip-option', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smStripOption.content.cloneNode(true))
-    }
-    sendDetails() {
-        let optionSelected = new CustomEvent('optionSelected', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                text: this.textContent,
-                value: this.getAttribute('value')
-            }
-        })
-        this.dispatchEvent(optionSelected)
-    }
-
-    connectedCallback() {
-        this.addEventListener('click', e => {
-            this.sendDetails()
-        })
-        this.addEventListener('keyup', e => {
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                this.sendDetails(false)
-            }
-        })
-        if (this.hasAttribute('default')) {
-            setTimeout(() => {
-                this.sendDetails()
-            }, 0);
-        }
+        this.setAttribute('role', 'option')
+        this.setAttribute('tabindex', '0')
     }
 })
 
 //popup
-const smPopup = document.createElement('template')
+class Stack {
+    constructor() {
+        this.items = [];
+    }
+    push(element) {
+        this.items.push(element);
+    }
+    pop() {
+        if (this.items.length == 0)
+            return "Underflow";
+        return this.items.pop();
+    }
+    peek() {
+        return this.items[this.items.length - 1];
+    }
+}
+const popupStack = new Stack();
+
+const smPopup = document.createElement('template');
 smPopup.innerHTML = `
 <style>
 *{
@@ -1834,21 +1569,12 @@ smPopup.innerHTML = `
     display: grid;
     z-index: 10;
     --width: 100%;
+    --height: auto;
     --min-width: auto;
-    --body-padding: 1.5rem;
+    --min-height: auto;
+    --backdrop-background: rgba(0, 0, 0, 0.6);
     --border-radius: 0.8rem 0.8rem 0 0;
 }
-::-webkit-scrollbar{
-    width: 0.5rem;
-}
-
-::-webkit-scrollbar-thumb{
-    background: rgba(var(--text-color), 0.3);
-    border-radius: 1rem;
-    &:hover{
-        background: rgba(var(--text-color), 0.5);
-    }
-}
 .popup-container{
     display: -ms-grid;
     display: grid;
@@ -1858,10 +1584,6 @@ smPopup.innerHTML = `
     left: 0;
     right: 0;
     place-items: center;
-    background: rgba(0, 0, 0, 0.6);
-    -webkit-transition: opacity 0.3s;
-    -o-transition: opacity 0.3s;
-    transition: opacity 0.3s;
     z-index: 10;
     touch-action: none;
 }
@@ -1869,6 +1591,18 @@ smPopup.innerHTML = `
     -webkit-transform: scale(0.9) translateY(-2rem) !important;
             transform: scale(0.9) translateY(-2rem) !important;
 }
+.background{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+    background: var(--backdrop-background);
+    -webkit-transition: opacity 0.3s;
+    -o-transition: opacity 0.3s;
+    transition: opacity 0.3s;
+}
 .popup{
     display: -webkit-box;
     display: -ms-flexbox;
@@ -1884,19 +1618,13 @@ smPopup.innerHTML = `
             align-items: flex-start;
     width: var(--width);
     min-width: var(--min-width);
+    height: var(--height);
+    min-height: var(--min-height);
+    max-height: 90vh;
     border-radius: var(--border-radius);
-    -webkit-transform: scale(1) translateY(100%);
-            transform: scale(1) translateY(100%);
-    -webkit-transition: -webkit-transform 0.3s;
-    transition: -webkit-transform 0.3s;
-    -o-transition: transform 0.3s;
-    transition: transform 0.3s, -webkit-transform 0.3s;
-    transition: transform 0.3s;
-    background: rgba(var(--foreground-color), 1);
+    background: rgba(var(--background-color, (255,255,255)), 1);
     -webkit-box-shadow: 0 -1rem 2rem #00000020;
             box-shadow: 0 -1rem 2rem #00000020;
-    max-height: 90vh;
-    content-visibility: auto;
 }
 .container-header{
     display: -webkit-box;
@@ -1923,26 +1651,22 @@ smPopup.innerHTML = `
         -ms-flex: 1;
             flex: 1;
     width: 100%;
-    padding: var(--body-padding);
+    padding: var(--body-padding, 1.5rem);
     overflow-y: auto;
 }
 .hide{
-    opacity: 0;
-    pointer-events: none;
-    visiblity: none;
+    display:none;
 }
 @media screen and (min-width: 640px){
     :host{
-        --border-radius: 0.4rem;
+        --border-radius: 0.5rem;
     }
     .popup{
         -ms-flex-item-align: center;
             -ms-grid-row-align: center;
             align-self: center;
         border-radius: var(--border-radius);
-        height: auto;
-        -webkit-transform: scale(1) translateY(3rem);
-                transform: scale(1) translateY(3rem);
+        height: var(--height);
         -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;
                 box-shadow: 0 3rem 2rem -0.5rem #00000040;
     }
@@ -1958,13 +1682,27 @@ smPopup.innerHTML = `
     .handle{
         height: 0.3rem;
         width: 2rem;
-        background: rgba(var(--text-color), .4);
+        background: rgba(var(--text-color, (17,17,17)), .4);
         border-radius: 1rem;
         margin: 0.5rem 0;
     }
 }
+@media (any-hover: hover){
+    ::-webkit-scrollbar{
+        width: 0.5rem;
+    }
+    
+    ::-webkit-scrollbar-thumb{
+        background: rgba(var(--text-color, (17,17,17)), 0.3);
+        border-radius: 1rem;
+        &:hover{
+            background: rgba(var(--text-color, (17,17,17))), 0.5);
+        }
+    }
+}
 </style>
-<div part="background" class="popup-container hide" role="dialog">
+<div class="popup-container hide" role="dialog">
+    <div part="background" class="background"></div>
     <div part="popup" class="popup">
         <div part="popup-header" class="popup-top">
             <div class="handle"></div>
@@ -1978,831 +1716,676 @@ smPopup.innerHTML = `
 `;
 customElements.define('sm-popup', class extends HTMLElement {
     constructor() {
-        super()
+        super();
         this.attachShadow({
             mode: 'open'
-        }).append(smPopup.content.cloneNode(true))
+        }).append(smPopup.content.cloneNode(true));
 
-        this.allowClosing = false
+        this.allowClosing = false;
+        this.isOpen = false;
+        this.pinned = false;
+        this.offset = 0;
+        this.touchStartY = 0;
+        this.touchEndY = 0;
+        this.touchStartTime = 0;
+        this.touchEndTime = 0;
+        this.touchEndAnimation = undefined;
+        this.focusable
+        this.autoFocus
+        this.mutationObserver
+
+        this.popupContainer = this.shadowRoot.querySelector('.popup-container');
+        this.backdrop = this.shadowRoot.querySelector('.background');
+        this.dialogBox = this.shadowRoot.querySelector('.popup');
+        this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot');
+        this.popupHeader = this.shadowRoot.querySelector('.popup-top');
+
+        this.resumeScrolling = this.resumeScrolling.bind(this);
+        this.setStateOpen = this.setStateOpen.bind(this);
+        this.show = this.show.bind(this);
+        this.hide = this.hide.bind(this);
+        this.handleTouchStart = this.handleTouchStart.bind(this);
+        this.handleTouchMove = this.handleTouchMove.bind(this);
+        this.handleTouchEnd = this.handleTouchEnd.bind(this);
+        this.detectFocus = this.detectFocus.bind(this);
     }
 
-    resumeScrolling = () => {
+    static get observedAttributes() {
+        return ['open'];
+    }
+
+    get open() {
+        return this.isOpen;
+    }
+
+    animateTo(element, keyframes, options) {
+        const anime = element.animate(keyframes, { ...options, fill: 'both' })
+        anime.finished.then(() => {
+            anime.commitStyles()
+            anime.cancel()
+        })
+        return anime
+    }
+
+    resumeScrolling() {
         const scrollY = document.body.style.top;
         window.scrollTo(0, parseInt(scrollY || '0') * -1);
-        setTimeout(() => {
-            document.body.style.overflow = 'auto';
-            document.body.style.top= 'initial'
-        }, 300);
+        document.body.style.overflow = '';
+        document.body.style.top = 'initial';
     }
 
-    show = (pinned, popupStack) => {
-        if (popupStack)
-            this.popupStack = popupStack
-        if (this.popupStack && !this.hasAttribute('open')) {
-            this.popupStack.push({
+    setStateOpen() {
+        if (!this.isOpen || this.offset) {
+            const animOptions = {
+                duration: 300,
+                easing: 'ease'
+            }
+            const initialAnimation = (window.innerWidth > 640) ? 'scale(1.1)' : `translateY(${this.offset ? `${this.offset}px` : '100%'})`
+            this.animateTo(this.dialogBox, [
+                {
+                    opacity: this.offset ? 1 : 0,
+                    transform: initialAnimation
+                },
+                {
+                    opacity: 1,
+                    transform: 'none'
+                },
+            ], animOptions)
+
+        }
+    }
+
+    show(options = {}) {
+        const { pinned = false } = options;
+        if (!this.isOpen) {
+            const animOptions = {
+                duration: 300,
+                easing: 'ease'
+            }
+            popupStack.push({
                 popup: this,
                 permission: pinned
-            })
-            if (this.popupStack.items.length > 1) {
-                this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked')
+            });
+            if (popupStack.items.length > 1) {
+                this.animateTo(popupStack.items[popupStack.items.length - 2].popup.shadowRoot.querySelector('.popup'), [
+                    { transform: 'none' },
+                    { transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' },
+                ], animOptions)
             }
+            this.popupContainer.classList.remove('hide');
+            if (!this.offset)
+                this.backdrop.animate([
+                    { opacity: 0 },
+                    { opacity: 1 },
+                ], animOptions)
+            this.setStateOpen()
             this.dispatchEvent(
                 new CustomEvent("popupopened", {
                     bubbles: true,
                     detail: {
                         popup: this,
-                        popupStack: this.popupStack
                     }
                 })
-            )
-            this.setAttribute('open', '')
-            this.pinned = pinned
+            );
+            this.pinned = pinned;
+            this.isOpen = true;
+            document.body.style.overflow = 'hidden';
+            document.body.style.top = `-${window.scrollY}px`;
+            const elementToFocus = this.autoFocus || this.focusable[0];
+            elementToFocus.tagName.includes('SM-') ? elementToFocus.focusIn() : elementToFocus.focus();
+            if (!this.hasAttribute('open'))
+                this.setAttribute('open', '');
         }
-        this.popupContainer.classList.remove('hide')
-        this.popup.style.transform = 'none';
-        document.body.style.overflow = 'hidden';
-        document.body.style.top= `-${window.scrollY}px`
-        return this.popupStack
     }
-    hide = () => {
-        if (window.innerWidth < 640)
-            this.popup.style.transform = 'translateY(100%)';
-        else
-            this.popup.style.transform = 'translateY(3rem)';
-        this.popupContainer.classList.add('hide')
-        this.removeAttribute('open')
-        if (typeof this.popupStack !== 'undefined') {
-            this.popupStack.pop()
-            if (this.popupStack.items.length) {
-                this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked')
-            } else {
-                this.resumeScrolling()
-            }
+    hide() {
+        const animOptions = {
+            duration: 150,
+            easing: 'ease'
+        }
+        this.backdrop.animate([
+            { opacity: 1 },
+            { opacity: 0 }
+        ], animOptions)
+        this.animateTo(this.dialogBox, [
+            {
+                opacity: 1,
+                transform: (window.innerWidth > 640) ? 'none' : `translateY(${this.offset ? `${this.offset}px` : '0'})`
+            },
+            {
+                opacity: 0,
+                transform: (window.innerWidth > 640) ? 'scale(1.1)' : 'translateY(100%)'
+            },
+        ], animOptions).finished
+            .finally(() => {
+                this.popupContainer.classList.add('hide');
+                this.dialogBox.style = ''
+                this.removeAttribute('open');
+
+                if (this.forms.length) {
+                    this.forms.forEach(form => form.reset());
+                }
+                this.dispatchEvent(
+                    new CustomEvent("popupclosed", {
+                        bubbles: true,
+                        detail: {
+                            popup: this,
+                        }
+                    })
+                );
+                this.isOpen = false;
+            })
+        popupStack.pop();
+        if (popupStack.items.length) {
+            this.animateTo(popupStack.items[popupStack.items.length - 1].popup.shadowRoot.querySelector('.popup'), [
+                { transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' },
+                { transform: 'none' },
+            ], animOptions)
+
         } else {
-            this.resumeScrolling()
+            this.resumeScrolling();
         }
-
-        if (this.inputFields.length) {
-            setTimeout(() => {
-                this.inputFields.forEach(field => {
-                    if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX')
-                        field.checked = false
-                    if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA'|| field.tagName === 'SM-TEXTAREA')
-                        field.value = ''
-                })
-            }, 300);
-        }
-        setTimeout(() => {            
-            this.dispatchEvent(
-                new CustomEvent("popupclosed", {
-                    bubbles: true,
-                    detail: {
-                        popup: this,
-                        popupStack: this.popupStack
-                    }
-                })
-            )
-        }, 300);
     }
 
-    handleTouchStart = (e) => {
-        this.touchStartY = e.changedTouches[0].clientY
-        this.popup.style.transition = 'transform 0.1s'
-        this.touchStartTime = e.timeStamp
+    handleTouchStart(e) {
+        this.offset = 0
+        this.popupHeader.addEventListener('touchmove', this.handleTouchMove, { passive: true });
+        this.popupHeader.addEventListener('touchend', this.handleTouchEnd, { passive: true });
+        this.touchStartY = e.changedTouches[0].clientY;
+        this.touchStartTime = e.timeStamp;
     }
 
-    handleTouchMove = (e) => {
+    handleTouchMove(e) {
         if (this.touchStartY < e.changedTouches[0].clientY) {
             this.offset = e.changedTouches[0].clientY - this.touchStartY;
-            this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup())
+            this.touchEndAnimation = window.requestAnimationFrame(() => {
+                this.dialogBox.style.transform = `translateY(${this.offset}px)`;
+            });
         }
-        /*else {
-            this.offset = this.touchStartY - e.changedTouches[0].clientY;
-            this.popup.style.transform = `translateY(-${this.offset}px)`
-        }*/
     }
 
-    handleTouchEnd = (e) => {
-        this.touchEndTime = e.timeStamp
-        cancelAnimationFrame(this.touchEndAnimataion)
-        this.touchEndY = e.changedTouches[0].clientY
-        this.popup.style.transition = 'transform 0.3s'
-        this.threshold = this.popup.getBoundingClientRect().height * 0.3
+    handleTouchEnd(e) {
+        this.touchEndTime = e.timeStamp;
+        cancelAnimationFrame(this.touchEndAnimation);
+        this.touchEndY = e.changedTouches[0].clientY;
+        this.threshold = this.dialogBox.getBoundingClientRect().height * 0.3;
         if (this.touchEndTime - this.touchStartTime > 200) {
             if (this.touchEndY - this.touchStartY > this.threshold) {
                 if (this.pinned) {
-                    this.show()
-                    return
+                    this.setStateOpen();
+                    return;
                 } else
-                    this.hide()
+                    this.hide();
             } else {
-                this.show()
+                this.setStateOpen();
             }
         } else {
             if (this.touchEndY > this.touchStartY)
                 if (this.pinned) {
-                    this.show()
-                    return
+                    this.setStateOpen();
+                    return;
                 }
-            else
-                this.hide()
+                else
+                    this.hide();
+        }
+        this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, { passive: true });
+        this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, { passive: true });
+    }
+
+
+    detectFocus(e) {
+        if (e.key === 'Tab') {
+            const lastElement = this.focusable[this.focusable.length - 1];
+            const firstElement = this.focusable[0];
+            if (e.shiftKey && document.activeElement === firstElement) {
+                e.preventDefault();
+                lastElement.tagName.includes('SM-') ? lastElement.focusIn() : lastElement.focus();
+            } else if (!e.shiftKey && document.activeElement === lastElement) {
+                e.preventDefault();
+                firstElement.tagName.includes('SM-') ? firstElement.focusIn() : firstElement.focus();
+            }
         }
     }
 
-    movePopup = () => {
-        this.popup.style.transform = `translateY(${this.offset}px)`
+    updateFocusableList() {
+        this.focusable = this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input:not([readonly]), sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])')
+        this.autoFocus = this.querySelector('[autofocus]')
     }
 
     connectedCallback() {
-        this.pinned = false
-        this.popupStack
-        this.popupContainer = this.shadowRoot.querySelector('.popup-container')
-        this.popup = this.shadowRoot.querySelector('.popup')
-        this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot')
-        this.offset
-        this.popupHeader = this.shadowRoot.querySelector('.popup-top')
-        this.touchStartY = 0
-        this.touchEndY = 0
-        this.touchStartTime = 0
-        this.touchEndTime = 0
-        this.touchEndAnimataion;
-        this.threshold = this.popup.getBoundingClientRect().height * 0.3
-
-        if (this.hasAttribute('open'))
-            this.show()
+        this.popupBodySlot.addEventListener('slotchange', () => {
+            this.forms = this.querySelectorAll('sm-form');
+            this.updateFocusableList()
+        });
         this.popupContainer.addEventListener('mousedown', e => {
             if (e.target === this.popupContainer && !this.pinned) {
                 if (this.pinned) {
-                    this.show()
-                    return
+                    this.setStateOpen();
                 } else
-                    this.hide()
+                    this.hide();
             }
-        })
+        });
 
-        this.popupBodySlot.addEventListener('slotchange', () => {
-            setTimeout(() => {
-                this.threshold = this.popup.getBoundingClientRect().height * 0.3
-            }, 200);
-            this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'sm-textarea', 'radio')
-        })
+        const resizeObserver = new ResizeObserver(entries => {
+            for (let entry of entries) {
+                if (entry.contentBoxSize) {
+                    // Firefox implements `contentBoxSize` as a single content rect, rather than an array
+                    const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
+                    this.threshold = contentBoxSize.blockSize.height * 0.3;
+                } else {
+                    this.threshold = entry.contentRect.height * 0.3;
+                }
+            }
+        });
+        resizeObserver.observe(this);
 
-        this.popupHeader.addEventListener('touchstart', (e) => { this.handleTouchStart(e) }, {passive: true})
-        this.popupHeader.addEventListener('touchmove', (e) => {this.handleTouchMove(e)}, {passive: true})
-        this.popupHeader.addEventListener('touchend', (e) => {this.handleTouchEnd(e)}, {passive: true})
+        this.mutationObserver = new MutationObserver(entries => {
+            this.updateFocusableList()
+        })
+        this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true })
+
+        this.addEventListener('keydown', this.detectFocus);
+        this.popupHeader.addEventListener('touchstart', this.handleTouchStart, { passive: true });
     }
     disconnectedCallback() {
-        this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, {passive: true})
-        this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, {passive: true})
-        this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, {passive: true})
+        this.removeEventListener('keydown', this.detectFocus);
+        resizeObserver.unobserve();
+        this.mutationObserver.disconnect()
+        this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
     }
-})
-
-//carousel
-
-const smCarousel = document.createElement('template')
-smCarousel.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-} 
-:host{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-}
-.icon {
-    position: absolute;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    fill: none;
-    height: 2.6rem;
-    width: 2.6rem;
-    border-radius: 3rem;
-    padding: 0.9rem;
-    stroke: rgba(var(--foreground-color), 0.8);
-    stroke-width: 14;
-    overflow: visible;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    cursor: pointer;
-    min-width: 0;
-    background: rgba(var(--text-color), 1);
-    -webkit-box-shadow: 0 0.2rem 0.2rem #00000020, 
-                0 0.5rem 1rem #00000040;
-            box-shadow: 0 0.2rem 0.2rem #00000020, 
-                0 0.5rem 1rem #00000040; 
-    -webkit-tap-highlight-color: transparent;
-    -webkit-transform: scale(0);
-        -ms-transform: scale(0);
-            transform: scale(0);
-    z-index: 1;
-}
-.hide{
-    pointer-events: none;
-    opacity: 0;
-}
-.expand{
-    -webkit-transform: scale(1);
-        -ms-transform: scale(1);
-            transform: scale(1)
-}
-.previous-item{
-    left: 1rem;
-}
-.next-item{
-    right: 1rem;
-}
-.carousel-container{
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    width: 100%;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-}
-.carousel{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    max-width: 100%;
-    width: 100%;
-    overflow: auto hidden;
-    -ms-scroll-snap-type: x mandatory;
-        scroll-snap-type: x mandatory;
-}
-.indicators{
-    display: -ms-grid;
-    display: grid;
-    grid-auto-flow: column;
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
-    position: absolute;
-    bottom: -1rem;
-    gap: 0.5rem;
-    width: 100%;
-}
-.dot{
-    position: relative;
-    padding: 0.2rem;
-    background: rgba(var(--text-color), 0.3);
-    border-radius: 1rem;
-    -webkit-transition: 0.2s;
-    -o-transition: 0.2s;
-    transition: 0.2s;
-}
-.dot.active{
-    -webkit-transform: scale(1.5);
-        -ms-transform: scale(1.5);
-            transform: scale(1.5);
-    background: var(--accent-color);
-}
-slot::slotted(*){
-    scroll-snap-align: center;
-}
-:host([align-items="start"]) slot::slotted(*){
-    scroll-snap-align: start;
-}
-:host([align-items="center"]) slot::slotted(*){
-    scroll-snap-align: center;
-}
-:host([align-items="end"]) slot::slotted(*){
-scroll-snap-align: end;
-}
-@media (hover: hover){
-.carousel{
-    overflow: hidden;
-}
-.left,.right{
-    display: none;
-}
-}
-@media (hover: none){
-::-webkit-scrollbar-track {
-    -webkit-box-shadow: none !important;
-    background-color: transparent !important;
-}
-::-webkit-scrollbar {
-    height: 0;
-    background-color: transparent;
-}
-.carousel{
-    overflow: auto none;
-}
-.icon{
-    display: none;
-}
-.left,.right{
-    display: block;
-}
-}
-</style>
-<div class="carousel-container">
-    <svg class="icon previous-item" viewBox="4 0 64 64">
-        <title>Previous</title>
-        <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
-    </svg>
-    <div part="carousel" class="carousel">
-        <slot></slot>
-    </div>
-    <svg class="icon next-item" viewBox="-6 0 64 64">
-        <title>Next</title>
-        <polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
-    </svg>
-    <div class="indicators"></div>
-</div>
-`;
-
-customElements.define('sm-carousel', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smCarousel.content.cloneNode(true))
-    }
-
-    static get observedAttributes() {
-        return ['indicator']
-    }
-
-    scrollLeft = () => {
-        this.carousel.scrollBy({
-            top: 0,
-            left: -this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-
-    scrollRight = () => {
-        this.carousel.scrollBy({
-            top: 0,
-            left: this.scrollDistance,
-            behavior: 'smooth'
-        })
-    }
-
-    connectedCallback() {
-        this.carousel = this.shadowRoot.querySelector('.carousel')
-        this.carouselContainer = this.shadowRoot.querySelector('.carousel-container')
-        this.carouselSlot = this.shadowRoot.querySelector('slot')
-        this.nextArrow = this.shadowRoot.querySelector('.next-item')
-        this.previousArrow = this.shadowRoot.querySelector('.previous-item')
-        this.indicatorsContainer = this.shadowRoot.querySelector('.indicators')
-        this.carouselItems
-        this.indicators
-        this.showIndicator = false
-        this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
-        let frag = document.createDocumentFragment();
-        if (this.hasAttribute('indicator'))
-            this.showIndicator = true
-
-
-        let firstVisible = false,
-            lastVisible = false
-        const allElementsObserver = new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                if (this.showIndicator)
-                    if (entry.isIntersecting) {
-                        this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.add('active')
-                    }
-                else
-                    this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active')
-                if (!entry.target.previousElementSibling)
-                    if (entry.isIntersecting) {
-                        this.previousArrow.classList.remove('expand')
-                        firstVisible = true
-                    }
-                else {
-                    this.previousArrow.classList.add('expand')
-                    firstVisible = false
-                }
-                if (!entry.target.nextElementSibling)
-                    if (entry.isIntersecting) {
-                        this.nextArrow.classList.remove('expand')
-                        lastVisible = true
-                    }
-                else {
-                    this.nextArrow.classList.add('expand')
-
-                    lastVisible = false
-                }
-                if (firstVisible && lastVisible)
-                    this.indicatorsContainer.classList.add('hide')
-                else
-                    this.indicatorsContainer.classList.remove('hide')
-            })
-        }, {
-            root: this.carouselContainer,
-            threshold: 0.9
-        })
-
-        const carouselObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
+    attributeChangedCallback(name) {
+        if (name === 'open') {
+            if (this.hasAttribute('open')) {
+                this.show();
             }
-        })
-
-        carouselObserver.observe(this.carouselContainer)
-
-        this.carouselSlot.addEventListener('slotchange', e => {
-            this.carouselItems = this.carouselSlot.assignedElements()
-            this.carouselItems.forEach(item => allElementsObserver.observe(item))
-            if (this.showIndicator) {
-                this.indicatorsContainer.innerHTML = ``
-                this.carouselItems.forEach((item, index) => {
-                    let dot = document.createElement('div')
-                    dot.classList.add('dot')
-                    frag.append(dot)
-                    item.setAttribute('rank', index)
-                })
-                this.indicatorsContainer.append(frag)
-                this.indicators = this.indicatorsContainer.children
-            }
-        })
-
-        this.addEventListener('keyup', e => {
-            if (e.code === 'ArrowLeft')
-                this.scrollRight()
-            else
-                this.scrollRight()
-        })
-
-        this.nextArrow.addEventListener('click', this.scrollRight)
-        this.previousArrow.addEventListener('click', this.scrollLeft)
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (name === 'indicator') {
-            if (this.hasAttribute('indicator'))
-                this.showIndicator = true
-            else
-                this.showIndicator = false
         }
     }
-
-    disconnectedCallback() {
-        this.nextArrow.removeEventListener('click', this.scrollRight)
-        this.previousArrow.removeEventListener('click', this.scrollLeft)
-    }
-})
+});
 
 //notifications
 
 const smNotifications = document.createElement('template')
 smNotifications.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-    } 
-    :host{
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-    }
-    .hide{
-        opacity: 0 !important;
-        pointer-events: none !important;
-    }
-    .notification-panel{
-        display: -ms-grid;
-        display: grid;
-        width: 100%;
-        position: fixed;
-        top: 0;
-        right: 0;
-        z-index: 100;
-        max-height: 100%;
-        overflow: hidden auto;
-        -ms-scroll-chaining: none;
-            overscroll-behavior: contain;
-        }
-        .no-transformations{
-        -webkit-transform: none;
-            -ms-transform: none;
-                transform: none;
-        opacity: 1;
-    }
-    .notification{
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        opacity: 0;
-        padding: 1rem 1.5rem;
-        margin-bottom: 0.5rem;
-        -webkit-transform: translateY(-1rem);
-            -ms-transform: translateY(-1rem);
-                transform: translateY(-1rem);
-        position: relative;
-        border-radius: 0.3rem;
-        -webkit-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1),
-                    0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);
-                box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1),
-                    0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);
-        background: rgba(var(--foreground-color), 1);
-        -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-        transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-        -o-transition: height 0.3s, transform 0.3s, opacity 0.3s;
-        transition: height 0.3s, transform 0.3s, opacity 0.3s;
-        transition: height 0.3s, transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-        overflow: hidden;
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        -ms-word-break: break-all;
-        word-break: break-all;
-        word-break: break-word;
-        -ms-hyphens: auto;
-        -webkit-hyphens: auto;
-        hyphens: auto;
-        max-width: 100%;
-        touch-action: none;
-    }
-    h4:first-letter,
-    p:first-letter{
-        text-transform: uppercase;
-    }
-    h4{
-        font-weight: 400;
-    }
-    p{
-        line-height: 1.6;
-        -webkit-box-flex: 1;
-            -ms-flex: 1;
-                flex: 1;
-        color: rgba(var(--text-color), 0.9);
-        overflow-wrap: break-word;
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        -ms-word-break: break-all;
-        word-break: break-all;
-        word-break: break-word;
-        -ms-hyphens: auto;
-        -webkit-hyphens: auto;
-        hyphens: auto;
-        max-width: 100%;
-    }
-    .notification:last-of-type{
-        margin-bottom: 0;
-    }
-    .icon {
-        fill: none;
-        height: 1.6rem;
-        width: 1.6rem;
-        stroke: rgba(var(--text-color), 0.7);
-        overflow: visible;
-        stroke-linecap: round;
-        border-radius: 1rem;
-        stroke-linejoin: round;
-        cursor: pointer;
-    }
-    .error-icon{
-        stroke: #E53935;
-    }
-    .success-icon{
-        stroke: #00C853;
-    }
-    .close{
-        margin-left: 1rem;
-        padding: 0.5rem;
-        stroke-width: 10;
-    }
-    .notification-icon{
-        height: 1.4rem;
-        width: 1.4rem;
-        margin: 0.3em 1rem 0 0;
-        stroke-width: 6;
-    }
-    @media screen and (min-width: 640px){
-        .notification-panel{
-            max-width: 28rem;
-            width: max-content;
-            -webkit-box-pack: end;
-                -ms-flex-pack: end;
-            justify-content: flex-end;
-        }
-        .notification{
-            -ms-grid-column-align: end;
-                justify-self: end;
-            width: auto;
-            margin-right: 1.5rem;
-            margin-bottom: 1rem;
-            border-bottom: none;
-            border: solid 1px rgba(var(--text-color), 0.2);
-            -webkit-transform: translateX(1rem);
-                -ms-transform: translateX(1rem);
-                    transform: translateX(1rem);
-        }
-    }
-    @media screen and (any-hover: none){
-        .close{
-            display: none
-        }
-    }
-</style>
-<div class="notification-panel">
-</div>
-`
-
+        <style>
+            *{
+                padding: 0;
+                margin: 0;
+                -webkit-box-sizing: border-box;
+                        box-sizing: border-box;
+            } 
+            :host{
+                display: flex;
+                --icon-height: 1.5rem;
+                --icon-width: 1.5rem;
+            }
+            .hide{
+                opacity: 0 !important;
+                pointer-events: none !important;
+            }
+            .notification-panel{
+                display: grid;
+                width: 100%;
+                gap: 0.5rem;
+                position: fixed;
+                left: 0;
+                top: 0;
+                z-index: 100;
+                max-height: 100%;
+                padding: 1rem;
+                overflow: hidden auto;
+                -ms-scroll-chaining: none;
+                    overscroll-behavior: contain;
+                touch-action: none;
+            }
+            .notification-panel:empty{
+                display:none;
+            }
+            .notification{
+                display: -webkit-box;
+                display: -ms-flexbox;
+                display: flex;
+                position: relative;
+                border-radius: 0.3rem;
+                background: rgba(var(--foreground-color, (255,255,255)), 1);
+                overflow: hidden;
+                overflow-wrap: break-word;
+                word-wrap: break-word;
+                -ms-word-break: break-all;
+                word-break: break-all;
+                word-break: break-word;
+                -ms-hyphens: auto;
+                -webkit-hyphens: auto;
+                hyphens: auto;
+                max-width: 100%;
+                padding: 1rem;
+                align-items: center;
+                box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.14);
+                touch-action: none;
+            }
+            .icon-container:not(:empty){
+                margin-right: 0.5rem;
+                height: var(--icon-height);
+                width: var(--icon-width);
+            }
+            h4:first-letter,
+            p:first-letter{
+                text-transform: uppercase;
+            }
+            h4{
+                font-weight: 400;
+            }
+            p{
+                line-height: 1.6;
+                -webkit-box-flex: 1;
+                    -ms-flex: 1;
+                        flex: 1;
+                color: rgba(var(--text-color, (17,17,17)), 0.9);
+                overflow-wrap: break-word;
+                overflow-wrap: break-word;
+                word-wrap: break-word;
+                -ms-word-break: break-all;
+                word-break: break-all;
+                word-break: break-word;
+                -ms-hyphens: auto;
+                -webkit-hyphens: auto;
+                hyphens: auto;
+                max-width: 100%;
+            }
+            .notification:last-of-type{
+                margin-bottom: 0;
+            }
+            .icon {
+                height: 100%;
+                width: 100%;
+                fill: rgba(var(--text-color, (17,17,17)), 0.7);
+            }
+            .icon--success {
+                fill: var(--green);
+              }
+              .icon--failure,
+              .icon--error {
+                fill: var(--danger-color);
+              }
+            .close{
+                height: 2rem;
+                width: 2rem;
+                border: none;
+                cursor: pointer;
+                margin-left: 1rem;
+                border-radius: 50%;
+                padding: 0.3rem;
+                transition: background-color 0.3s, transform 0.3s;
+                background-color: transparent;
+            }
+            .close:active{
+                transform: scale(0.9);
+            }
+            .action{
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 0.5rem 0.8rem;
+                border-radius: 0.2rem;
+                border: none;
+                background-color: rgba(var(--text-color, (17,17,17)), 0.03);
+                font-family: inherit;
+                font-size: inherit;
+                color: var(--accent-color, teal);
+                font-weight: 500;
+                cursor: pointer;
+            }
+            @media screen and (max-width: 640px){
+                .notification-panel:not(:empty){
+                    padding-bottom: 3rem;
+                }
+            }
+            @media screen and (min-width: 640px){
+                .notification-panel{
+                    max-width: 28rem;
+                    width: max-content;
+                    top: auto;
+                    bottom: 0;
+                }
+                .notification{
+                    width: auto;
+                    border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2);
+                }
+            }
+            @media (any-hover: hover){
+                ::-webkit-scrollbar{
+                    width: 0.5rem;
+                }
+                
+                ::-webkit-scrollbar-thumb{
+                    background: rgba(var(--text-color, (17,17,17)), 0.3);
+                    border-radius: 1rem;
+                    &:hover{
+                        background: rgba(var(--text-color, (17,17,17)), 0.5);
+                    }
+                }
+                .close:hover{
+                    background-color: rgba(var(--text-color, (17,17,17)), 0.1);
+                }
+            }
+        </style>
+        <div class="notification-panel"></div>
+        `;
 customElements.define('sm-notifications', class extends HTMLElement {
     constructor() {
-        super()
+        super();
         this.shadow = this.attachShadow({
             mode: 'open'
         }).append(smNotifications.content.cloneNode(true))
-    }
 
-    handleTouchStart = (e) => {
-        this.notification = e.target.closest('.notification')
-        this.touchStartX = e.changedTouches[0].clientX
-        this.notification.style.transition = 'initial'
-        this.touchStartTime = e.timeStamp
-    }
-
-    handleTouchMove = (e) => {
-        e.preventDefault()
-        if (this.touchStartX < e.changedTouches[0].clientX) {
-            this.offset = e.changedTouches[0].clientX - this.touchStartX;
-            this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
-        } else {
-            this.offset = -(this.touchStartX - e.changedTouches[0].clientX);
-            this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
-        }
-    }
-
-    handleTouchEnd = (e) => {
-        this.notification.style.transition = 'transform 0.3s, opacity 0.3s'
-        this.touchEndTime = e.timeStamp
-        cancelAnimationFrame(this.touchEndAnimataion)
-        this.touchEndX = e.changedTouches[0].clientX
-        if (this.touchEndTime - this.touchStartTime > 200) {
-            if (this.touchEndX - this.touchStartX > this.threshold) {
-                this.removeNotification(this.notification)
-            } else if (this.touchStartX - this.touchEndX > this.threshold) {
-                this.removeNotification(this.notification, true)
-            } else {
-                this.resetPosition()
-            }
-        } else {
-            if (this.touchEndX > this.touchStartX) {
-                this.removeNotification(this.notification)
-            } else {
-                this.removeNotification(this.notification, true)
-            }
-        }
-    }
-
-    movePopup = () => {
-        this.notification.style.transform = `translateX(${this.offset}px)`
-    }
-
-    resetPosition = () => {
-        this.notification.style.transform = `translateX(0)`
-    }
-
-    push = (messageBody, type, pinned) => {
-        let notification = document.createElement('div'),
-            composition = ``
-        notification.classList.add('notification')
-        if (pinned)
-            notification.classList.add('pinned')
-        if (type === 'error') {
-            composition += `
-    <svg class="notification-icon icon error-icon" viewBox="0 0 64 64">
-            <path d="M32,4.73a3.17,3.17,0,0,1,2.76,1.59l13.9,24.09L62.57,54.49a3.19,3.19,0,0,1-2.76,4.78H4.19a3.19,3.19,0,0,1-2.76-4.78L15.34,30.41,29.24,6.32A3.17,3.17,0,0,1,32,4.73m0-1a4.14,4.14,0,0,0-3.62,2.09L14.47,29.91.57,54a4.19,4.19,0,0,0,3.62,6.28H59.81A4.19,4.19,0,0,0,63.43,54L49.53,29.91,35.62,5.82A4.14,4.14,0,0,0,32,3.73Z"/>
-            <line x1="32" y1="24" x2="32" y2="36"/>
-            <line x1="32" y1="46" x2="32" y2="48"/>
-    </svg>`
-        } else if (type === 'success') {
-            composition += `
-        <svg class="notification-icon icon success-icon" viewBox="0 0 64 64">
-            <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
-        </svg>`
-        }
-        composition += `
-                    <p>${messageBody}</p>
-                    <svg class="icon close" viewBox="0 0 64 64">
-                        <title>Close</title>
-                        <line x1="64" y1="0" x2="0" y2="64"/>
-                        <line x1="64" y1="64" x2="0" y2="0"/>
-                    </svg>`
-        notification.innerHTML = composition
-        this.notificationPanel.prepend(notification)
-        if (window.innerWidth > 640) {
-            notification.animate([{
-                    transform: `translateX(1rem)`,
-                    opacity: '0'
-                },
-                {
-                    transform: 'translateX(0)',
-                    opacity: '1'
-                }
-            ], this.animationOptions).onfinish = () => {
-                notification.setAttribute('style', `transform: none;`);
-            }
-        } else {
-            notification.setAttribute('style', `transform: translateY(0); opacity: 1`)
-        }
-        notification.addEventListener('touchstart', this.handleTouchStart)
-        notification.addEventListener('touchmove', this.handleTouchMove)
-        notification.addEventListener('touchend', this.handleTouchEnd)
-    }
-
-    removeNotification = (notification, toLeft) => {
-        if (!this.offset)
-            this.offset = 0;
-
-        if (toLeft)
-            notification.animate([{
-                    transform: `translateX(${this.offset}px)`,
-                    opacity: '1'
-                },
-                {
-                    transform: `translateX(-100%)`,
-                    opacity: '0'
-                }
-            ], this.animationOptions).onfinish = () => {
-                notification.remove()
-            }
-        else {
-            notification.animate([{
-                    transform: `translateX(${this.offset}px)`,
-                    opacity: '1'
-                },
-                {
-                    transform: `translateX(100%)`,
-                    opacity: '0'
-                }
-            ], this.animationOptions).onfinish = () => {
-                notification.remove()
-            }
-        }
-    }
-
-    clearAll = () => {
-        Array.from(this.notificationPanel.children).forEach(child => {
-            this.removeNotification(child)
-        })
-    }
-
-    connectedCallback() {
         this.notificationPanel = this.shadowRoot.querySelector('.notification-panel')
         this.animationOptions = {
             duration: 300,
             fill: "forwards",
-            easing: "ease"
+            easing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
         }
-        this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])
-        this.notification
-        this.offset
-        this.touchStartX = 0
-        this.touchEndX = 0
-        this.touchStartTime = 0
-        this.touchEndTime = 0
-        this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3
-        this.touchEndAnimataion;
 
+        this.push = this.push.bind(this)
+        this.createNotification = this.createNotification.bind(this)
+        this.removeNotification = this.removeNotification.bind(this)
+        this.clearAll = this.clearAll.bind(this)
+        this.handlePointerMove = this.handlePointerMove.bind(this)
+
+
+        this.startX = 0;
+        this.currentX = 0;
+        this.endX = 0;
+        this.swipeDistance = 0;
+        this.swipeDirection = '';
+        this.swipeThreshold = 0;
+        this.startTime = 0;
+        this.swipeTime = 0;
+        this.swipeTimeThreshold = 200;
+        this.currentTarget = null;
+
+        this.mediaQuery = window.matchMedia('(min-width: 640px)')
+        this.handleOrientationChange = this.handleOrientationChange.bind(this)
+        this.isLandscape = false
+    }
+
+    randString(length) {
+        let result = '';
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        for (let i = 0; i < length; i++)
+            result += characters.charAt(Math.floor(Math.random() * characters.length));
+        return result;
+    }
+
+    createNotification(message, options = {}) {
+        const { pinned = false, icon = '', action } = options;
+        const notification = document.createElement('output')
+        notification.id = this.randString(8)
+        notification.classList.add('notification');
+        let composition = ``;
+        composition += `
+                    <div class="icon-container">${icon}</div>
+                    <p>${message}</p>
+                    `;
+        if (action) {
+            composition += `
+                            <button class="action">${action.label}</button>
+                        `
+        }
+        if (pinned) {
+            notification.classList.add('pinned');
+            composition += `
+                        <button class="close">
+                            <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="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>
+                    `;
+        }
+        notification.innerHTML = composition;
+        return notification;
+    }
+
+    push(message, options = {}) {
+        const notification = this.createNotification(message, options);
+        if (this.isLandscape)
+            this.notificationPanel.append(notification);
+        else
+            this.notificationPanel.prepend(notification);
+        this.notificationPanel.animate(
+            [
+                {
+                    transform: `translateY(${this.isLandscape ? '' : '-'}${notification.clientHeight}px)`,
+                },
+                {
+                    transform: `none`,
+                },
+            ], this.animationOptions
+        )
+        notification.animate([
+            {
+                transform: `translateY(-1rem)`,
+                opacity: '0'
+            },
+            {
+                transform: `none`,
+                opacity: '1'
+            },
+        ], this.animationOptions).onfinish = (e) => {
+            e.target.commitStyles()
+            e.target.cancel()
+        }
+        if (notification.querySelector('.action'))
+            notification.querySelector('.action').addEventListener('click', options.action.callback)
+        return notification.id;
+    }
+
+    removeNotification(notification, direction = 'left') {
+        const sign = direction === 'left' ? '-' : '+';
+        notification.animate([
+            {
+                transform: this.currentX ? `translateX(${this.currentX}px)` : `none`,
+                opacity: '1'
+            },
+            {
+                transform: `translateX(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`,
+                opacity: '0'
+            }
+        ], this.animationOptions).onfinish = () => {
+            notification.remove();
+        };
+    }
+
+    clearAll() {
+        Array.from(this.notificationPanel.children).forEach(child => {
+            this.removeNotification(child);
+        });
+    }
+
+    handlePointerMove(e) {
+        this.currentX = e.clientX - this.startX;
+        this.currentTarget.style.transform = `translateX(${this.currentX}px)`;
+    }
+
+    handleOrientationChange(e) {
+        this.isLandscape = e.matches
+        if (e.matches) {
+            // landscape
+
+        } else {
+            // portrait
+        }
+    }
+    connectedCallback() {
+
+        this.handleOrientationChange(this.mediaQuery);
+
+        this.mediaQuery.addEventListener('change', this.handleOrientationChange);
+        this.notificationPanel.addEventListener('pointerdown', e => {
+            if (e.target.closest('.notification')) {
+                this.swipeThreshold = this.clientWidth / 2;
+                this.currentTarget = e.target.closest('.notification');
+                this.currentTarget.setPointerCapture(e.pointerId);
+                this.startTime = Date.now();
+                this.startX = e.clientX;
+                this.startY = e.clientY;
+                this.notificationPanel.addEventListener('pointermove', this.handlePointerMove);
+            }
+        });
+        this.notificationPanel.addEventListener('pointerup', e => {
+            this.endX = e.clientX;
+            this.endY = e.clientY;
+            this.swipeDistance = Math.abs(this.endX - this.startX);
+            this.swipeTime = Date.now() - this.startTime;
+            if (this.endX > this.startX) {
+                this.swipeDirection = 'right';
+            } else {
+                this.swipeDirection = 'left';
+            }
+            if (this.swipeTime < this.swipeTimeThreshold) {
+                if (this.swipeDistance > 50)
+                    this.removeNotification(this.currentTarget, this.swipeDirection);
+            } else {
+                if (this.swipeDistance > this.swipeThreshold) {
+                    this.removeNotification(this.currentTarget, this.swipeDirection);
+                } else {
+                    this.currentTarget.animate([
+                        {
+                            transform: `translateX(${this.currentX}px)`,
+                        },
+                        {
+                            transform: `none`,
+                        },
+                    ], this.animationOptions).onfinish = (e) => {
+                        e.target.commitStyles()
+                        e.target.cancel()
+                    }
+                }
+            }
+            this.notificationPanel.removeEventListener('pointermove', this.handlePointerMove)
+            this.notificationPanel.releasePointerCapture(e.pointerId);
+            this.currentX = 0;
+        });
         this.notificationPanel.addEventListener('click', e => {
-            if (e.target.closest('.close'))(
-                this.removeNotification(e.target.closest('.notification'))
-            )
-        })
+            if (e.target.closest('.close')) {
+                this.removeNotification(e.target.closest('.notification'));
+            }
+        });
 
         const observer = new MutationObserver(mutationList => {
             mutationList.forEach(mutation => {
                 if (mutation.type === 'childList') {
-                    if (mutation.addedNodes.length) {
-                        if (!mutation.addedNodes[0].classList.contains('pinned'))
-                            setTimeout(() => {
-                                this.removeNotification(mutation.addedNodes[0])
-                            }, 5000);
-                        if (window.innerWidth > 640)
-                            this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem';
-                        else
-                            this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem';
-                    } else if (mutation.removedNodes.length && !this.notificationPanel.children.length) {
-                        this.notificationPanel.style.padding = 0;
+                    if (mutation.addedNodes.length && !mutation.addedNodes[0].classList.contains('pinned')) {
+                        setTimeout(() => {
+                            this.removeNotification(mutation.addedNodes[0]);
+                        }, 5000);
                     }
                 }
-            })
-        })
+            });
+        });
         observer.observe(this.notificationPanel, {
-            attributes: true,
             childList: true,
-            subtree: true
-        })
+        });
     }
-})
-
-
+    disconnectedCallback() {
+        mediaQueryList.removeEventListener('change', handleOrientationChange);
+    }
+});
 
 // sm-menu
 const smMenu = document.createElement('template')
@@ -3096,497 +2679,6 @@ customElements.define('sm-menu-option', class extends HTMLElement {
     }
 })
 
-// tab-header
-
-const smTabHeader = document.createElement('template')
-smTabHeader.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-    } 
-    :host{
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-    }
-    .tabs{
-        position: relative;
-        display: -ms-grid;
-        display: grid;
-        width: 100%;
-    }
-    .tab-header{
-        display: -ms-grid;
-        display: grid;
-        grid-auto-flow: column;
-        -webkit-box-pack: start;
-            -ms-flex-pack: start;
-                justify-content: flex-start;
-        gap: 1rem;
-        position: relative;
-        overflow: auto hidden;
-        max-width: 100%;
-        scrollbar-width: 0;
-    }
-    .indicator{
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        height: 0.15rem;
-        border-radius: 1rem 1rem 0 0;  
-        background: var(--accent-color);
-        -webkit-transition: width 0.3s, -webkit-transform 0.3s;
-        transition: width 0.3s, -webkit-transform 0.3s;
-        -o-transition: transform 0.3s, width 0.3s;
-        transition: transform 0.3s, width 0.3s;
-        transition: transform 0.3s, width 0.3s, -webkit-transform 0.3s;
-        pointer-events: none;
-    }
-    :host([variant="tab"]) .indicator{
-        height: 100%;
-        border-radius: 0.3rem;
-    }
-    :host(.round) .indicator{
-        border-radius: 3rem;
-    }
-    :host([variant="tab"]) .tab-header{
-        border-bottom: none; 
-    }
-    .hide-completely{
-        display: none;
-    }
-    :host([variant="tab"]) .tab-header{
-        gap: 0.2rem;
-        display: -ms-inline-grid;
-        display: inline-grid;
-        justify-self: flex-start;
-        border-radius: 0.3rem;
-    }
-    :host([variant="tab"]) slot::slotted(.active){
-        color: rgba(var(--foreground-color), 1);
-    }
-    slot::slotted(.active){
-        color: var(--accent-color);
-        opacity: 1;
-    }
-    @media (hover: none){
-        .tab-header::-webkit-scrollbar-track {
-            -webkit-box-shadow: none !important;
-            background-color: transparent !important;
-        }
-        .tab-header::-webkit-scrollbar {
-            height: 0;
-            background-color: transparent;
-        }
-    }         
-</style>
-<div part="tab-container" class="tabs">
-    <div part="tab-header" class="tab-header">
-        <slot></slot>
-        <div part="indicator" class="indicator"></div>
-    </div>
-</div>
-`;
-
-customElements.define('sm-tab-header', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smTabHeader.content.cloneNode(true))
-
-        this.indicator = this.shadowRoot.querySelector('.indicator');
-        this.tabSlot = this.shadowRoot.querySelector('slot');
-        this.tabHeader = this.shadowRoot.querySelector('.tab-header');
-    }
-
-    sendDetails(element) {
-        this.dispatchEvent(
-            new CustomEvent("switchtab", {
-                bubbles: true,
-                detail: {
-                    target: this.target,
-                    rank: parseInt(element.getAttribute('rank'))
-                }
-            })
-        )
-    }
-
-    moveIndiactor(tabDimensions) {
-        //if(this.isTab)
-        this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
-        //else
-        //this.indicator.setAttribute('style', `width: calc(${tabDimensions.width}px - 1.6rem); transform: translateX(calc(${ tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px + 0.8rem)`)
-    }
-
-    connectedCallback() {
-        if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return;
-        this.prevTab
-        this.allTabs
-        this.activeTab
-        this.isTab = false
-        this.target = this.getAttribute('target')
-
-        if (this.hasAttribute('variant') && this.getAttribute('variant') === 'tab') {
-            this.isTab = true
-        }
-
-        this.tabSlot.addEventListener('slotchange', () => {
-            this.tabSlot.assignedElements().forEach((tab, index) => {
-                tab.setAttribute('rank', index)
-            })
-        })
-        this.allTabs = this.tabSlot.assignedElements();
-
-        this.tabSlot.addEventListener('click', e => {
-            if (e.target === this.prevTab || !e.target.closest('sm-tab'))
-                return
-            if (this.prevTab)
-                this.prevTab.classList.remove('active')
-            e.target.classList.add('active')
-
-            e.target.scrollIntoView({
-                behavior: 'smooth',
-                block: 'nearest',
-                inline: 'center'
-            })
-            this.moveIndiactor(e.target.getBoundingClientRect())
-            this.sendDetails(e.target)
-            this.prevTab = e.target;
-            this.activeTab = e.target;
-        })
-        let resizeObserver = new ResizeObserver(entries => {
-            entries.forEach((entry) => {
-                if (this.prevTab) {
-                    let tabDimensions = this.activeTab.getBoundingClientRect();
-                    this.moveIndiactor(tabDimensions)
-                }
-            })
-        })
-        resizeObserver.observe(this)
-        let observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    this.indicator.style.transition = 'none'
-                    if (this.activeTab) {
-                        let tabDimensions = this.activeTab.getBoundingClientRect();
-                        this.moveIndiactor(tabDimensions)
-                    } else {
-                        this.allTabs[0].classList.add('active')
-                        let tabDimensions = this.allTabs[0].getBoundingClientRect();
-                        this.moveIndiactor(tabDimensions)
-                        this.sendDetails(this.allTabs[0])
-                        this.prevTab = this.tabSlot.assignedElements()[0];
-                        this.activeTab = this.prevTab;
-                    }
-                }
-            })
-        }, {
-            threshold: 1.0
-        })
-        observer.observe(this)
-    }
-})
-
-// tab
-const smTab = document.createElement('template')
-smTab.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-    } 
-    :host{
-        position: relative;
-        display: -webkit-inline-box;
-        display: -ms-inline-flexbox;
-        display: inline-flex;
-        z-index: 1;
-    }
-    .tab{
-        position: relative;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-            -ms-user-select: none;
-                user-select: none;
-        -webkit-box-pack: center;
-            -ms-flex-pack: center;
-                justify-content: center;
-        cursor: pointer;
-        -webkit-tap-highlight-color: transparent;
-        white-space: nowrap;
-        padding: 0.4rem 0.8rem;
-        font-weight: 500;
-        word-spacing: 0.1rem;
-        text-align: center;
-        -webkit-transition: color 0.3s;
-        -o-transition: color 0.3s;
-        transition: color 0.3s;
-        text-transform: capitalize;
-        height: 100%;
-    }
-    @media (hover: hover){
-        :host(.active) .tab{
-            opacity: 1;
-        }
-        .tab{
-            opacity: 0.7
-        }
-        .tab:hover{
-            opacity: 1
-        }
-    }
-</style>
-<div part="tab" class="tab">
-<slot></slot>
-</div>
-`;
-
-customElements.define('sm-tab', class extends HTMLElement {
-    constructor() {
-        super()
-        this.shadow = this.attachShadow({
-            mode: 'open'
-        }).append(smTab.content.cloneNode(true))
-    }
-})
-
-// tab-panels
-
-const smTabPanels = document.createElement('template')
-smTabPanels.innerHTML = `
-<style>
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-} 
-:host{
-    width: 100%;
-}
-.panel-container{
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    overflow: hidden auto;
-}
-slot::slotted(.hide-completely){
-    display: none;
-}
-@media (hover: none){
-    .tab-header::-webkit-scrollbar-track {
-        -webkit-box-shadow: none !important;
-        background-color: transparent !important;
-    }
-    .tab-header::-webkit-scrollbar {
-        height: 0;
-        background-color: transparent;
-    }
-}         
-</style>
-<div part="panel-container" class="panel-container">
-    <slot>Nothing to see here.</slot>
-</div>
-`;
-
-customElements.define('sm-tab-panels', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(smTabPanels.content.cloneNode(true))
-        this.panelSlot = this.shadowRoot.querySelector('slot');
-    }
-    connectedCallback() {
-
-        //animations
-        let flyInLeft = [{
-                    opacity: 0,
-                    transform: 'translateX(-1rem)'
-                },
-                {
-                    opacity: 1,
-                    transform: 'none'
-                }
-            ],
-            flyInRight = [{
-                    opacity: 0,
-                    transform: 'translateX(1rem)'
-                },
-                {
-                    opacity: 1,
-                    transform: 'none'
-                }
-            ],
-            flyOutLeft = [{
-                    opacity: 1,
-                    transform: 'none'
-                },
-                {
-                    opacity: 0,
-                    transform: 'translateX(-1rem)'
-                }
-            ],
-            flyOutRight = [{
-                    opacity: 1,
-                    transform: 'none'
-                },
-                {
-                    opacity: 0,
-                    transform: 'translateX(1rem)'
-                }
-            ],
-            animationOptions = {
-                duration: 300,
-                fill: 'forwards',
-                easing: 'ease'
-            }
-        this.prevPanel
-        this.allPanels
-        this.previousRank
-
-        this.panelSlot.addEventListener('slotchange', () => {
-            this.panelSlot.assignedElements().forEach((panel) => {
-                panel.classList.add('hide-completely')
-            })
-        })
-        this.allPanels = this.panelSlot.assignedElements()
-        this._targetBodyFlyRight = (targetBody) => {
-            targetBody.classList.remove('hide-completely')
-            targetBody.animate(flyInRight, animationOptions)
-        }
-        this._targetBodyFlyLeft = (targetBody) => {
-            targetBody.classList.remove('hide-completely')
-            targetBody.animate(flyInLeft, animationOptions)
-        }
-        document.addEventListener('switchtab', e => {
-            if (e.detail.target !== this.id)
-                return
-
-            if (this.prevPanel) {
-                let targetBody = this.allPanels[e.detail.rank],
-                    currentBody = this.prevPanel;
-                if (this.previousRank < e.detail.rank) {
-                    if (currentBody && !targetBody)
-                        currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                        }
-                    else if (targetBody && !currentBody) {
-                        this._targetBodyFlyRight(targetBody)
-                    } else if (currentBody && targetBody) {
-                        currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                            this._targetBodyFlyRight(targetBody)
-                        }
-                    }
-                } else {
-                    if (currentBody && !targetBody)
-                        currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                        }
-                    else if (targetBody && !currentBody) {
-                        this._targetBodyFlyLeft(targetBody)
-                    } else if (currentBody && targetBody) {
-                        currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
-                            currentBody.classList.add('hide-completely')
-                            this._targetBodyFlyLeft(targetBody)
-                        }
-                    }
-                }
-            } else {
-                this.allPanels[e.detail.rank].classList.remove('hide-completely')
-            }
-            this.previousRank = e.detail.rank
-            this.prevPanel = this.allPanels[e.detail.rank];
-        })
-    }
-})
-
-
-const slidingSection = document.createElement('template')
-slidingSection.innerHTML = `
-<style>
-*{
-    margin: 0;
-    padding: 0;
-    box-sizzing: border-box;
-}
-:host{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    height: 100%;
-    width: 100%;
-}
-.section{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    max-width: 100%;
-    overflow: hidden auto;
-    -ms-scroll-snap-type: mandatory x;
-        scroll-snap-type: mandatory x;
-}
-
-</style>
-<section class="section">
-    <slot></slot>
-</section>
-`
-
-customElements.define('sm-sliding-section', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(slidingSection.content.cloneNode(true))
-    }
-    connectedCallback() {
-
-    }
-})
-
-const section = document.createElement('template')
-section.innerHTML = `
-<style>
-*{
-    margin: 0;
-    padding: 0;
-    box-sizzing: border-box;
-}
-:host{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-}
-.section{
-    min-width: 100%;
-    scroll-snap-align: start;
-}
-</style>
-<section class="section">
-    <slot></slot>
-</section>
-`
-
-customElements.define('sm-section', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(section.content.cloneNode(true))
-    }
-})
-
 const textField = document.createElement('template')
 textField.innerHTML = `
 <style>
@@ -3660,8 +2752,8 @@ textField.innerHTML = `
 </div>
 `
 
-customElements.define('text-field', class extends HTMLElement{
-    constructor(){
+customElements.define('text-field', class extends HTMLElement {
+    constructor() {
         super()
         this.attachShadow({
             mode: 'open'
@@ -3676,11 +2768,11 @@ customElements.define('text-field', class extends HTMLElement{
         this.isDisabled = false
     }
 
-    static get observedAttributes(){
+    static get observedAttributes() {
         return ['disable']
     }
 
-    get value(){
+    get value() {
         return this.text
     }
     set value(val) {
@@ -3690,7 +2782,7 @@ customElements.define('text-field', class extends HTMLElement{
     }
     set disabled(val) {
         this.isDisabled = val
-        if(this.isDisabled)
+        if (this.isDisabled)
             this.setAttribute('disable', '')
         else
             this.removeAttribute('disable')
@@ -3706,9 +2798,9 @@ customElements.define('text-field', class extends HTMLElement{
         });
         this.dispatchEvent(event);
     }
-    
+
     setEditable = () => {
-        if(this.isTextEditable) return
+        if (this.isTextEditable) return
         this.textContainer.contentEditable = true
         this.textContainer.classList.add('editable')
         this.textContainer.focus()
@@ -3722,11 +2814,11 @@ customElements.define('text-field', class extends HTMLElement{
         }, 100);
         this.isTextEditable = true
     }
-    setNonEditable = () => {   
+    setNonEditable = () => {
         if (!this.isTextEditable) return
         this.textContainer.contentEditable = false
         this.textContainer.classList.remove('editable')
-        
+
         if (this.text !== this.textContainer.textContent.trim()) {
             this.setAttribute('value', this.textContainer.textContent)
             this.text = this.textContainer.textContent.trim()
@@ -3749,17 +2841,17 @@ customElements.define('text-field', class extends HTMLElement{
         }
     }
 
-    connectedCallback(){
+    connectedCallback() {
         this.text
         if (this.hasAttribute('value')) {
             this.text = this.getAttribute('value')
             this.textContainer.textContent = this.text
         }
-        if(this.hasAttribute('disable'))
+        if (this.hasAttribute('disable'))
             this.isDisabled = true
         else
             this.isDisabled = false
-        
+
         this.rotateOut = [
             {
                 transform: 'rotate(0)',
@@ -3818,7 +2910,7 @@ customElements.define('text-field', class extends HTMLElement{
 
 //Color Grid
 const colorGrid = document.createElement('template');
-colorGrid.innerHTML =`
+colorGrid.innerHTML = `
 <style>
     *{
         padding:0;
@@ -3863,79 +2955,79 @@ colorGrid.innerHTML =`
 </div>`;
 
 customElements.define('color-grid',
-class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(colorGrid.content.cloneNode(true))
+    class extends HTMLElement {
+        constructor() {
+            super()
+            this.attachShadow({
+                mode: 'open'
+            }).append(colorGrid.content.cloneNode(true))
 
-        this.colorArray = []
-        this.container = this.shadowRoot.querySelector('.color-tile-container')
-    }
-
-    set colors(arr) {
-        this.colorArray = arr
-        this.renderTiles()
-    }
-
-    set selectedColor(color) {
-        if (this.colorArray.includes(color) && this.container.querySelector(`[data-color="${color}"]`)) {
-            this.container.querySelector(`[data-color="${color}"] input`).checked = true
+            this.colorArray = []
+            this.container = this.shadowRoot.querySelector('.color-tile-container')
         }
-    }
 
-    randString(length) {
-        let result = '';
-        let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        set colors(arr) {
+            this.colorArray = arr
+            this.renderTiles()
+        }
 
-        for (let i = 0; i < length; i++)
-            result += characters.charAt(Math.floor(Math.random() * characters.length));
-        return result;
-    }
+        set selectedColor(color) {
+            if (this.colorArray.includes(color) && this.container.querySelector(`[data-color="${color}"]`)) {
+                this.container.querySelector(`[data-color="${color}"] input`).checked = true
+            }
+        }
 
-    renderTiles() {
-        this.container.innerHTML = ''
-        const frag = document.createDocumentFragment()
-        const groupName = this.randString(6)
-        this.colorArray.forEach(color => {
-            const label = document.createElement('label')
-            label.classList.add('color-tile')
-            label.setAttribute('data-color', color)
-            if(color.includes('--'))
-                label.setAttribute('style', `background-color: var(${color})`)
-            else
-                label.setAttribute('style', `background-color: ${color}`)
-            label.innerHTML = `
+        randString(length) {
+            let result = '';
+            let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+            for (let i = 0; i < length; i++)
+                result += characters.charAt(Math.floor(Math.random() * characters.length));
+            return result;
+        }
+
+        renderTiles() {
+            this.container.innerHTML = ''
+            const frag = document.createDocumentFragment()
+            const groupName = this.randString(6)
+            this.colorArray.forEach(color => {
+                const label = document.createElement('label')
+                label.classList.add('color-tile')
+                label.setAttribute('data-color', color)
+                if (color.includes('--'))
+                    label.setAttribute('style', `background-color: var(${color})`)
+                else
+                    label.setAttribute('style', `background-color: ${color}`)
+                label.innerHTML = `
                 <input type="radio" name="${groupName}">
                 <div class="border"></div>
                 `
-            frag.append(label)
-        })
-        this.container.append(frag)
-    }
-    
-    handleChange(e) {
-        const clickedTile = e.target.closest('.color-tile')
-        const clickedTileColor = clickedTile.dataset.color
-        const tileSelected = new CustomEvent('colorselected', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                value: clickedTileColor,
-            }
-        })
-        this.dispatchEvent(tileSelected)
-    }
+                frag.append(label)
+            })
+            this.container.append(frag)
+        }
 
-    connectedCallback() {
-        this.container.addEventListener('change', this.handleChange)
-    }
+        handleChange(e) {
+            const clickedTile = e.target.closest('.color-tile')
+            const clickedTileColor = clickedTile.dataset.color
+            const tileSelected = new CustomEvent('colorselected', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    value: clickedTileColor,
+                }
+            })
+            this.dispatchEvent(tileSelected)
+        }
 
-    disconnectedCallback() {
-        this.container.removeEventListener('change', this.handleChange)
-    }
-})
+        connectedCallback() {
+            this.container.addEventListener('change', this.handleChange)
+        }
+
+        disconnectedCallback() {
+            this.container.removeEventListener('change', this.handleChange)
+        }
+    })
 
 const pinInput = document.createElement('template');
 pinInput.innerHTML = `
@@ -4021,151 +3113,859 @@ pinInput.innerHTML = `
 
 customElements.define('pin-input',
 
-	class extends HTMLElement {
-		constructor() {
-			super()
-			this.attachShadow({
-				mode: 'open'
-			}).append(pinInput.content.cloneNode(true))
+    class extends HTMLElement {
+        constructor() {
+            super()
+            this.attachShadow({
+                mode: 'open'
+            }).append(pinInput.content.cloneNode(true))
 
-			this.pinDigits = 4
+            this.pinDigits = 4
 
-			this.arrayOfInput = [];
-			this.container = this.shadowRoot.querySelector('.pin-container');
-			this.toggleButton = this.shadowRoot.querySelector('button')
-		}
+            this.arrayOfInput = [];
+            this.container = this.shadowRoot.querySelector('.pin-container');
+            this.toggleButton = this.shadowRoot.querySelector('button')
+        }
 
         set value(val) {
-			this.arrayOfInput.forEach((input, index) => input.value = val[index] ? val[index] : '')
-        }
-        
-		get value() {
-			return this.getValue()
-		}
-
-		set pinLength(val) {
-			this.pinDigits = val
-			this.setAttribute('pin-length', val)
-			this.style.setProperty('--pin-length', val)
-			this.render()
+            this.arrayOfInput.forEach((input, index) => input.value = val[index] ? val[index] : '')
         }
 
-        get isValid(){
+        get value() {
+            return this.getValue()
+        }
+
+        set pinLength(val) {
+            this.pinDigits = val
+            this.setAttribute('pin-length', val)
+            this.style.setProperty('--pin-length', val)
+            this.render()
+        }
+
+        get isValid() {
             return this.arrayOfInput.every(input => input.value.trim().length)
         }
-        
+
         clear = () => {
             this.value = ''
         }
-        
+
         focusIn = () => {
             this.arrayOfInput[0].focus();
         }
 
-		getValue = () => {
-			return this.arrayOfInput.reduce((acc, val) => {
-				return acc += val.value
-			}, '')
-		}
+        getValue = () => {
+            return this.arrayOfInput.reduce((acc, val) => {
+                return acc += val.value
+            }, '')
+        }
 
-		render = () => {
-			this.container.innerHTML = ''
-			const frag = document.createDocumentFragment();
+        render = () => {
+            this.container.innerHTML = ''
+            const frag = document.createDocumentFragment();
 
-			for (let i = 0; i < this.pinDigits; i++) {
-				const inputBox = document.createElement('input')
-				inputBox.setAttribute('type', 'password')
-				inputBox.setAttribute('inputmode', 'numeric')
-				inputBox.setAttribute('maxlength', '1')
-				inputBox.setAttribute('required', '')
-				this.arrayOfInput.push(inputBox);
-				frag.append(inputBox);
-			}
-			this.container.append(frag);
-		}
+            for (let i = 0; i < this.pinDigits; i++) {
+                const inputBox = document.createElement('input')
+                inputBox.setAttribute('type', 'password')
+                inputBox.setAttribute('inputmode', 'numeric')
+                inputBox.setAttribute('maxlength', '1')
+                inputBox.setAttribute('required', '')
+                this.arrayOfInput.push(inputBox);
+                frag.append(inputBox);
+            }
+            this.container.append(frag);
+        }
 
-		handleKeydown = (e) => {
+        handleKeydown = (e) => {
             const activeInput = e.target.closest('input')
-			if (/[0-9]/.test(e.key)) {
+            if (/[0-9]/.test(e.key)) {
                 if (activeInput.value.trim().length > 2) {
                     e.preventDefault();
-				}
-				else {
+                }
+                else {
                     if (activeInput.value.trim().length === 1) {
                         activeInput.value = e.key
                     }
-					if (activeInput.nextElementSibling) {
-						setTimeout(() => {
-							activeInput.nextElementSibling.focus();
-						}, 0)
-					}
-				}
-			}
-			else if (e.key === "Backspace") {
-				if(activeInput.previousElementSibling)
-					setTimeout(() => {
-						activeInput.previousElementSibling.focus();
-					}, 0)
-			}
-			else if (e.key.length === 1 && !/[0-9]/.test(e.key)) {
-				e.preventDefault();
-			}
-		}
-		
-		handleInput = () => {			
-			if (this.isValid) {
-				this.fireEvent(this.getValue())
-			}
-		}
+                    if (activeInput.nextElementSibling) {
+                        setTimeout(() => {
+                            activeInput.nextElementSibling.focus();
+                        }, 0)
+                    }
+                }
+            }
+            else if (e.key === "Backspace") {
+                if (activeInput.previousElementSibling)
+                    setTimeout(() => {
+                        activeInput.previousElementSibling.focus();
+                    }, 0)
+            }
+            else if (e.key.length === 1 && !/[0-9]/.test(e.key)) {
+                e.preventDefault();
+            }
+        }
 
-		fireEvent = (value) => {
-			let event = new CustomEvent('pincomplete', {
-				bubbles: true,
-				cancelable: true,
-				composed: true,
-				detail: {
-					value
-				}
-			});
-			this.dispatchEvent(event);
-		}
+        handleInput = () => {
+            if (this.isValid) {
+                this.fireEvent(this.getValue())
+            }
+        }
 
-		toggleVisiblity = () => {
-			if (this.arrayOfInput[0].getAttribute('type') === 'password') {
-				this.toggleButton.innerHTML = `
+        fireEvent = (value) => {
+            let event = new CustomEvent('pincomplete', {
+                bubbles: true,
+                cancelable: true,
+                composed: true,
+                detail: {
+                    value
+                }
+            });
+            this.dispatchEvent(event);
+        }
+
+        toggleVisiblity = () => {
+            if (this.arrayOfInput[0].getAttribute('type') === 'password') {
+                this.toggleButton.innerHTML = `
 					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M22.05,31.44a10.12,10.12,0,0,0,.1,1.36L33.36,21.59a10.12,10.12,0,0,0-1.36-.1A10,10,0,0,0,22.05,31.44Z"/><path d="M19.11,35.84A13.6,13.6,0,0,1,36.4,18.55l5.28-5.27A31,31,0,0,0,32,11.72c-20.3,0-32,19.72-32,19.72A48.48,48.48,0,0,0,11.27,43.69Z"/><path d="M52.73,19.2l6.14-6.14L54.63,8.81l-7,7h0l-6,6h0L39,24.41h0l-7,7L20.09,43.35,16.4,47h0l-7,7,4.25,4.24,8.71-8.71A31.15,31.15,0,0,0,32,51.16c20.3,0,32-19.72,32-19.72A48.54,48.54,0,0,0,52.73,19.2ZM32,45.07a13.63,13.63,0,0,1-4.4-.74l3-3a10.12,10.12,0,0,0,1.36.1,10,10,0,0,0,10-9.95,10.12,10.12,0,0,0-.1-1.36l3-3A13.6,13.6,0,0,1,32,45.07Z"/></svg>
                     Hide    
                     `
-                    this.arrayOfInput.forEach(input => input.setAttribute('type', 'text'))
-                }
-                else {
-                    this.toggleButton.innerHTML = `
+                this.arrayOfInput.forEach(input => input.setAttribute('type', 'text'))
+            }
+            else {
+                this.toggleButton.innerHTML = `
 					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="9.95"/><path d="M32,12.28C11.7,12.28,0,32,0,32S11.7,51.72,32,51.72,64,32,64,32,52.3,12.28,32,12.28Zm0,33.35A13.63,13.63,0,1,1,45.63,32,13.64,13.64,0,0,1,32,45.63Z"/></svg>
                     Show
                 `
-				this.arrayOfInput.forEach(input => input.setAttribute('type', 'password'))
-				
-			}
-		}
+                this.arrayOfInput.forEach(input => input.setAttribute('type', 'password'))
 
-		connectedCallback() {
-			if (this.hasAttribute('pin-length')) {
-				const pinLength = parseInt(this.getAttribute('pin-length'))
-				this.pinDigits = pinLength
-				this.style.setProperty('--pin-length', pinLength)
-			}
+            }
+        }
 
-			this.render()
+        connectedCallback() {
+            if (this.hasAttribute('pin-length')) {
+                const pinLength = parseInt(this.getAttribute('pin-length'))
+                this.pinDigits = pinLength
+                this.style.setProperty('--pin-length', pinLength)
+            }
 
-			this.toggleButton.addEventListener('click', this.toggleVisiblity)
-			
-			this.container.addEventListener('input', this.handleInput);
-			this.container.addEventListener('keydown', this.handleKeydown);
-		}
-		disconnectedCallback() {
-			this.toggleButton.removeEventListener('click', this.toggleVisiblity)
+            this.render()
 
-			this.container.removeEventListener('input', this.handleInput);
-			this.container.removeEventListener('keydown', this.handleKeydown);
-		}
-	})
+            this.toggleButton.addEventListener('click', this.toggleVisiblity)
+
+            this.container.addEventListener('input', this.handleInput);
+            this.container.addEventListener('keydown', this.handleKeydown);
+        }
+        disconnectedCallback() {
+            this.toggleButton.removeEventListener('click', this.toggleVisiblity)
+
+            this.container.removeEventListener('input', this.handleInput);
+            this.container.removeEventListener('keydown', this.handleKeydown);
+        }
+    })
+
+const themeToggle = document.createElement('template');
+themeToggle.innerHTML = `
+    <style>
+    *{
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }
+    :host{
+        cursor: pointer;
+        --height: 2.5rem;
+        --width: 2.5rem;
+    }
+    .theme-toggle {
+        display: flex;
+        position: relative;
+        width: 1.2rem;
+        height: 1.2rem;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+    }
+    .theme-toggle::after{
+        content: '';
+        position: absolute;
+        height: var(--height);
+        width: var(--width);
+        top: 50%;
+        left: 50%;
+        opacity: 0;
+        border-radius: 50%;
+        pointer-events: none;
+        transition: transform 0.3s, opacity 0.3s;
+        transform: translate(-50%, -50%) scale(1.2);
+        background-color: rgba(var(--text-color,inherit), 0.12);
+    }
+    :host(:focus-within) .theme-toggle{
+        outline: none;
+    }
+    :host(:focus-within) .theme-toggle::after{
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+    .icon {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        fill: rgba(var(--text-color,inherit), 1);
+        transition: transform 0.3s, opacity 0.1s;
+    }
+    
+    .theme-switcher__checkbox {
+        display: none;
+    }
+    :host([checked]) .moon-icon {
+        transform: translateY(50%);
+        opacity: 0;
+    }
+    :host(:not([checked])) .sun-icon {
+        transform: translateY(50%);
+        opacity: 0;
+    }
+    </style>
+    <label class="theme-toggle" title="Change theme" tabindex="0">
+        <slot name="light-mode-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon moon-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg>
+        </slot>
+        <slot name="dark-mode-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon sun-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg>
+        </slot>
+    </label>
+`;
+
+class ThemeToggle extends HTMLElement {
+    constructor() {
+        super();
+
+        this.attachShadow({
+            mode: 'open'
+        }).append(themeToggle.content.cloneNode(true));
+
+        this.isChecked = false;
+        this.hasTheme = 'light';
+
+        this.toggleState = this.toggleState.bind(this);
+        this.fireEvent = this.fireEvent.bind(this);
+        this.handleThemeChange = this.handleThemeChange.bind(this);
+    }
+    static get observedAttributes() {
+        return ['checked'];
+    }
+
+    daylight() {
+        this.hasTheme = 'light';
+        document.body.dataset.theme = 'light';
+        this.setAttribute('aria-checked', 'false');
+    }
+
+    nightlight() {
+        this.hasTheme = 'dark';
+        document.body.dataset.theme = 'dark';
+        this.setAttribute('aria-checked', 'true');
+    }
+
+    toggleState() {
+        this.toggleAttribute('checked');
+        this.fireEvent();
+    }
+    handleKeyDown(e) {
+        if (e.key === ' ') {
+            this.toggleState();
+        }
+    }
+    handleThemeChange(e) {
+        if (e.detail.theme !== this.hasTheme) {
+            if (e.detail.theme === 'dark') {
+                this.setAttribute('checked', '');
+            }
+            else {
+                this.removeAttribute('checked');
+            }
+        }
+    }
+
+    fireEvent() {
+        this.dispatchEvent(
+            new CustomEvent('themechange', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    theme: this.hasTheme
+                }
+            })
+        );
+    }
+
+    connectedCallback() {
+        this.setAttribute('role', 'switch');
+        this.setAttribute('aria-label', 'theme toggle');
+        if (localStorage.getItem(`${window.location.hostname}-theme`) === "dark") {
+            this.nightlight();
+            this.setAttribute('checked', '');
+        } else if (localStorage.getItem(`${window.location.hostname}-theme`) === "light") {
+            this.daylight();
+            this.removeAttribute('checked');
+        }
+        else {
+            if (window.matchMedia(`(prefers-color-scheme: dark)`).matches) {
+                this.nightlight();
+                this.setAttribute('checked', '');
+            } else {
+                this.daylight();
+                this.removeAttribute('checked');
+            }
+        }
+        this.addEventListener("click", this.toggleState);
+        this.addEventListener("keydown", this.handleKeyDown);
+        document.addEventListener('themechange', this.handleThemeChange);
+    }
+
+    disconnectedCallback() {
+        this.removeEventListener("click", this.toggleState);
+        this.removeEventListener("keydown", this.handleKeyDown);
+        document.removeEventListener('themechange', this.handleThemeChange);
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (name === 'checked') {
+            if (this.hasAttribute('checked')) {
+                this.nightlight();
+                localStorage.setItem(`${window.location.hostname}-theme`, "dark");
+            } else {
+                this.daylight();
+                localStorage.setItem(`${window.location.hostname}-theme`, "light");
+            }
+        }
+    }
+}
+
+window.customElements.define('theme-toggle', ThemeToggle);
+
+const smCopy = document.createElement('template');
+smCopy.innerHTML = `
+<style>     
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+}       
+:host{
+    display: -webkit-box;
+    display: flex;
+    --padding: 0;
+    --button-background-color: rgba(var(--text-color, (17,17,17)), 0.2);
+}
+.copy{
+    display: grid;
+    gap: 0.5rem;
+    padding: var(--padding);
+    align-items: center;
+    grid-template-columns: minmax(0, 1fr) auto;
+}
+:host(:not([clip-text])) .copy-content{
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+}
+:host([clip-text]) .copy-content{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.copy-button{
+    display: inline-flex;
+    justify-content: center;
+    cursor: pointer;
+    border: none;
+    padding: 0.4rem;
+    background-color: rgba(var(--text-color, (17,17,17)), 0.06);
+    border-radius: var(--button-border-radius, 0.3rem);
+    transition: background-color 0.2s;
+    font-family: inherit;
+    color: inherit;
+    font-size: 0.7rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05rem;
+}
+.copy-button:active{
+    background-color: var(--button-background-color);
+}
+.icon{
+    height: 1.2rem;
+    width: 1.2rem;
+    fill: rgba(var(--text-color, (17,17,17)), 0.8);
+}
+@media (any-hover: hover){
+    .copy:hover .copy-button{
+        opacity: 1;
+    }
+    .copy-button:hover{
+        background-color: var(--button-background-color);
+    }
+}
+</style>
+<section class="copy">
+    <p class="copy-content"></p>
+    <button part="button" class="copy-button" title="copy">
+        <slot name="copy-icon">
+        COPY
+        </slot>
+    </button>
+</section>
+`;
+customElements.define('sm-copy',
+    class extends HTMLElement {
+        constructor() {
+            super();
+            this.attachShadow({
+                mode: 'open'
+            }).append(smCopy.content.cloneNode(true));
+
+            this.copyContent = this.shadowRoot.querySelector('.copy-content');
+            this.copyButton = this.shadowRoot.querySelector('.copy-button');
+
+            this.copy = this.copy.bind(this);
+        }
+        static get observedAttributes() {
+            return ['value'];
+        }
+        set value(val) {
+            this.setAttribute('value', val);
+        }
+        get value() {
+            return this.getAttribute('value');
+        }
+        fireEvent() {
+            this.dispatchEvent(
+                new CustomEvent('copy', {
+                    composed: true,
+                    bubbles: true,
+                    cancelable: true,
+                })
+            );
+        }
+        copy() {
+            navigator.clipboard.writeText(this.copyContent.textContent)
+                .then(res => this.fireEvent())
+                .catch(err => console.error(err));
+        }
+        connectedCallback() {
+            this.copyButton.addEventListener('click', this.copy);
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (name === 'value') {
+                this.copyContent.textContent = newValue;
+            }
+        }
+        disconnectedCallback() {
+            this.copyButton.removeEventListener('click', this.copy);
+        }
+    });
+const spinner = document.createElement('template');
+spinner.innerHTML = `
+<style>     
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+}
+.loader {
+    height: var(--size, 1.5rem);
+    width: var(--size, 1.5rem);
+    stroke-width: 8;
+    overflow: visible;
+    stroke: var(--accent-color, teal);
+    fill: none;
+    stroke-dashoffset: 180;
+    stroke-dasharray: 180;
+    animation: load 2s infinite, spin 1s linear infinite;
+}
+@keyframes load {
+    50% {
+        stroke-dashoffset: 0;
+    }
+    100%{
+        stroke-dashoffset: -180;
+    }
+}
+
+@keyframes spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>
+<svg viewBox="0 0 64 64" class="loader"><circle cx="32" cy="32" r="32" /></svg>
+
+`;
+class SpinnerLoader extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({
+            mode: 'open'
+        }).append(spinner.content.cloneNode(true));
+    }
+}
+window.customElements.define('sm-spinner', SpinnerLoader);
+
+const stripSelect = document.createElement('template');
+stripSelect.innerHTML = `
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    }  
+    :host{
+        padding: 1rem 0;
+    }
+    .hide{
+        display: none !important;
+    }
+    input[type="radio"]{
+        display: none;
+    }
+    .scrolling-container{
+        position: relative;
+        display: flex;
+        align-items: center;
+    }
+    .strip-select{
+        position: relative;
+    }
+    :host([multiline]) .strip-select{
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--gap, 0.5rem);
+        overflow: auto hidden;
+    }
+    :host(:not([multiline])) .strip-select{
+        display: grid;
+        grid-auto-flow: column;
+        gap: var(--gap, 0.5rem);
+        max-width: 100%;   
+        align-items: center;
+        overflow: auto hidden;
+    }
+    .nav-button{
+        display: flex;
+        top: 50%;
+        z-index: 2;
+        border: none;
+        padding: 0.3rem;
+        cursor: pointer;
+        position: absolute;
+        align-items: center;
+        background: rgba(var(--background-color,(255,255,255)), 1);
+        transform: translateY(-50%);
+    }
+    .nav-button--right{
+        right: 0;
+    }
+    .cover{
+        position: absolute;
+        z-index: 1;
+        width: 5rem;
+        height: 100%;
+        pointer-events: none;
+    }
+    .nav-button--right::before{
+        background-color: red;
+    }
+    .icon{
+        height: 1.5rem;
+        width: 1.5rem;
+        fill: rgba(var(--text-color,(17,17,17)), .8);
+    }
+    @media (hover: none){
+        ::-webkit-scrollbar {
+            height: 0;
+        }
+        .nav-button{
+            display: none;
+        }
+        .strip-select{
+            overflow: auto hidden;
+        }
+        .cover{
+            width: 2rem;
+        }
+        .cover--left{
+            background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1), transparent);
+        }
+        .cover--right{
+            right: 0;
+            background: linear-gradient(90deg, transparent, rgba(var(--background-color,(255,255,255)), 1));
+        }
+    }
+    @media (hover: hover){
+        ::-webkit-scrollbar-track {
+            background-color: transparent !important;
+        }
+        ::-webkit-scrollbar {
+            height: 0;
+            background-color: transparent;
+        }
+        .strip-select{
+            overflow: hidden;
+        }
+        .cover--left{
+            background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1) 60%, transparent);
+        }
+        .cover--right{
+            right: 0;
+            background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color,(255,255,255)), 1) 40%);
+        }
+    }
+</style>
+<section class="scrolling-container">
+    <div class="cover cover--left hide"></div>
+    <button class="nav-button nav-button--left hide">
+        <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="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>
+    </button>
+    <section class="strip-select">
+        <slot></slot>
+    </section>
+    <button class="nav-button nav-button--right hide">
+        <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="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>
+    </button>
+    <div class="cover cover--right hide"></div>
+</section>
+
+`;
+customElements.define('strip-select', class extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({
+            mode: 'open'
+        }).append(stripSelect.content.cloneNode(true));
+        this.stripSelect = this.shadowRoot.querySelector('.strip-select');
+        this.slottedOptions = undefined;
+        this._value = undefined;
+        this.scrollDistance = 0;
+        this.assignedElements = [];
+
+        this.scrollLeft = this.scrollLeft.bind(this);
+        this.scrollRight = this.scrollRight.bind(this);
+        this.fireEvent = this.fireEvent.bind(this);
+        this.setSelectedOption = this.setSelectedOption.bind(this);
+    }
+    get value() {
+        return this._value;
+    }
+    set value(val) {
+        this.setSelectedOption(val);
+    }
+    scrollLeft() {
+        this.stripSelect.scrollBy({
+            left: -this.scrollDistance,
+            behavior: 'smooth'
+        });
+    }
+
+    scrollRight() {
+        this.stripSelect.scrollBy({
+            left: this.scrollDistance,
+            behavior: 'smooth'
+        });
+    }
+    setSelectedOption(value) {
+        if (this._value === value) return
+        this._value = value;
+        this.assignedElements.forEach(elem => {
+            if (elem.value === value) {
+                elem.setAttribute('active', '');
+                elem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+            }
+            else
+                elem.removeAttribute('active')
+        });
+    }
+
+    fireEvent() {
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    value: this._value
+                }
+            })
+        );
+    }
+    connectedCallback() {
+        this.setAttribute('role', 'listbox');
+
+        const slot = this.shadowRoot.querySelector('slot');
+        const coverLeft = this.shadowRoot.querySelector('.cover--left');
+        const coverRight = this.shadowRoot.querySelector('.cover--right');
+        const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left');
+        const navButtonRight = this.shadowRoot.querySelector('.nav-button--right');
+        slot.addEventListener('slotchange', e => {
+            this.assignedElements = slot.assignedElements();
+            this.assignedElements.forEach(elem => {
+                if (elem.hasAttribute('selected')) {
+                    elem.setAttribute('active', '');
+                    this._value = elem.value;
+                }
+            });
+            if (!this.hasAttribute('multiline')) {
+                if (this.assignedElements.length > 0) {
+                    firstOptionObserver.observe(this.assignedElements[0]);
+                    lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]);
+                }
+                else {
+                    navButtonLeft.classList.add('hide');
+                    navButtonRight.classList.add('hide');
+                    coverLeft.classList.add('hide');
+                    coverRight.classList.add('hide');
+                    firstOptionObserver.disconnect();
+                    lastOptionObserver.disconnect();
+                }
+            }
+        });
+        const resObs = new ResizeObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.contentBoxSize) {
+                    // Firefox implements `contentBoxSize` as a single content rect, rather than an array
+                    const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
+
+                    this.scrollDistance = contentBoxSize.inlineSize * 0.6;
+                } else {
+                    this.scrollDistance = entry.contentRect.width * 0.6;
+                }
+            });
+        });
+        resObs.observe(this);
+        this.stripSelect.addEventListener('option-clicked', e => {
+            if (this._value !== e.target.value) {
+                this.setSelectedOption(e.target.value);
+                this.fireEvent();
+            }
+        });
+        const firstOptionObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    navButtonLeft.classList.add('hide');
+                    coverLeft.classList.add('hide');
+                }
+                else {
+                    navButtonLeft.classList.remove('hide');
+                    coverLeft.classList.remove('hide');
+                }
+            });
+        },
+            {
+                threshold: 0.9,
+                root: this
+            });
+        const lastOptionObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    navButtonRight.classList.add('hide');
+                    coverRight.classList.add('hide');
+                }
+                else {
+                    navButtonRight.classList.remove('hide');
+                    coverRight.classList.remove('hide');
+                }
+            });
+        },
+            {
+                threshold: 0.9,
+                root: this
+            });
+        navButtonLeft.addEventListener('click', this.scrollLeft);
+        navButtonRight.addEventListener('click', this.scrollRight);
+    }
+    disconnectedCallback() {
+        navButtonLeft.removeEventListener('click', this.scrollLeft);
+        navButtonRight.removeEventListener('click', this.scrollRight);
+    }
+});
+
+//Strip option
+const stripOption = document.createElement('template');
+stripOption.innerHTML = `
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    }  
+    .strip-option{
+        display: flex;
+        flex-shrink: 0;
+        cursor: pointer;
+        white-space: nowrap;
+        padding: var(--padding, 0.4rem 0.6rem);
+        transition: background 0.3s;
+        border-radius: var(--border-radius, 2rem);
+        -webkit-tap-highlight-color: transparent;
+    }
+    :host([active]) .strip-option{
+        color: var(--active-option-color, rgba(var(--background-color,white)));
+        background-color: var(--active-background-color, var(--accent-color,teal));
+    }
+    :host(:focus-within){
+        outline: none;
+    }
+    :host(:focus-within) .strip-option{
+        box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset;
+    }
+    :host(:hover:not([active])) .strip-option{
+        background-color: rgba(var(--text-color,(17,17,17)), 0.06);
+    }
+</style>
+<label class="strip-option">
+    <slot></slot>
+</label>
+`;
+customElements.define('strip-option', class extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({
+            mode: 'open'
+        }).append(stripOption.content.cloneNode(true));
+        this._value = undefined;
+        this.radioButton = this.shadowRoot.querySelector('input');
+
+        this.fireEvent = this.fireEvent.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+    }
+    get value() {
+        return this._value;
+    }
+    fireEvent() {
+        this.dispatchEvent(
+            new CustomEvent("option-clicked", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    value: this._value
+                }
+            })
+        );
+    }
+    handleKeyDown(e) {
+        if (e.key === 'Enter' || e.key === 'Space') {
+            this.fireEvent();
+        }
+    }
+    connectedCallback() {
+        this.setAttribute('role', 'option');
+        this.setAttribute('tabindex', '0');
+        this._value = this.getAttribute('value');
+        this.addEventListener('click', this.fireEvent);
+        this.addEventListener('keydown', this.handleKeyDown);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this.fireEvent);
+        this.removeEventListener('keydown', this.handleKeyDown);
+    }
+});
\ No newline at end of file