diff --git a/css/main.css b/css/main.css
index 46909e9..82e3f74 100644
--- a/css/main.css
+++ b/css/main.css
@@ -188,6 +188,18 @@ strong {
   stroke: white;
 }
 
+a:-webkit-any-link {
+  word-wrap: break-word;
+  color: var(--accent-color);
+  font-weight: 500;
+}
+
+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);
@@ -341,6 +353,8 @@ sm-button[variant=primary] {
   display: flex;
   position: relative;
   align-items: center;
+  height: -webkit-max-content;
+  height: -moz-max-content;
   height: max-content;
   margin: 0.5rem 0;
 }
@@ -393,6 +407,8 @@ sm-button[variant=primary] {
 }
 #landing .left sm-button {
   margin: 1.5rem 0 2rem 0;
+  width: -webkit-max-content;
+  width: -moz-max-content;
   width: max-content;
 }
 #landing .left h3 {
@@ -489,7 +505,8 @@ sm-button[variant=primary] {
   width: 100%;
 }
 #frame_1 #credentials_section {
-  animation: slide-down 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  -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 {
@@ -503,6 +520,15 @@ sm-button[variant=primary] {
   margin: 1rem 0;
 }
 
+@-webkit-keyframes slide-down {
+  from {
+    transform: translateY(-1rem);
+  }
+  to {
+    transform: none;
+  }
+}
+
 @keyframes slide-down {
   from {
     transform: translateY(-1rem);
@@ -523,7 +549,8 @@ sm-button[variant=primary] {
   transform-origin: bottom;
   height: 6rem;
   width: 6rem;
-  animation: bounce 0.5s infinite alternate ease-in;
+  -webkit-animation: bounce 0.5s infinite alternate ease-in;
+          animation: bounce 0.5s infinite alternate ease-in;
 }
 
 .shadow {
@@ -532,7 +559,8 @@ sm-button[variant=primary] {
   height: 2rem;
   background: rgba(var(--text-color), 0.1);
   border-radius: 50%;
-  animation: scale 0.5s infinite alternate ease-in;
+  -webkit-animation: scale 0.5s infinite alternate ease-in;
+          animation: scale 0.5s infinite alternate ease-in;
   margin-left: 1rem;
 }
 
@@ -540,6 +568,18 @@ sm-button[variant=primary] {
   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);
@@ -551,6 +591,17 @@ sm-button[variant=primary] {
     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);
@@ -579,7 +630,10 @@ sm-button[variant=primary] {
   box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.06);
   border-radius: 2rem;
   text-transform: uppercase;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 
 .filled {
@@ -601,7 +655,10 @@ sm-button[variant=primary] {
   padding: 0.8rem 1.5rem;
   align-items: center;
   flex-shrink: 0;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
   overflow: hidden;
 }
 .contact:not(.chat) {
@@ -829,7 +886,10 @@ sm-button[variant=primary] {
   padding: 0.8rem 1.5rem;
   align-items: center;
   flex-shrink: 0;
-  user-select: none;
+  -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";
 }
@@ -872,6 +932,17 @@ sm-button[variant=primary] {
   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;
@@ -891,7 +962,8 @@ sm-button[variant=primary] {
 }
 .mail:not(:first-of-type) {
   margin-top: 2rem;
-  padding-inline-start: 1rem;
+  -webkit-padding-start: 1rem;
+          padding-inline-start: 1rem;
 }
 .mail:not(:first-of-type)::before {
   content: "";
@@ -931,6 +1003,8 @@ sm-button[variant=primary] {
   margin-bottom: 0.4em;
 }
 .mail .mail-content {
+  height: -webkit-max-content;
+  height: -moz-max-content;
   height: max-content;
   max-width: 60ch;
   white-space: pre-wrap;
@@ -945,7 +1019,10 @@ sm-button[variant=primary] {
   display: flex;
   align-items: center;
   padding: 0.8rem 1.5rem;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 .option .icon {
   height: 1.4rem;
@@ -1099,6 +1176,7 @@ sm-button[variant=primary] {
 
 #contacts, #mails {
   position: relative;
+  grid-template-rows: -webkit-max-content 1fr;
   grid-template-rows: max-content 1fr;
 }
 
@@ -1285,6 +1363,8 @@ sm-button[variant=primary] {
   flex-wrap: wrap;
   width: auto;
   font-size: 0.92rem;
+  max-width: -webkit-max-content;
+  max-width: -moz-max-content;
   max-width: max-content;
   margin-bottom: 0.2rem;
   margin-top: 0.8rem;
@@ -1304,9 +1384,9 @@ sm-button[variant=primary] {
   word-wrap: break-word;
   word-break: break-all;
   word-break: break-word;
-  -moz-hyphens: auto;
   -webkit-hyphens: auto;
-  hyphens: auto;
+  -ms-hyphens: auto;
+      hyphens: auto;
   white-space: pre-wrap;
   line-height: 1.5;
 }
@@ -1400,7 +1480,17 @@ sm-button[variant=primary] {
 .unconfirmed {
   opacity: 0.7;
   transform-origin: left;
-  animation: pop 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  -webkit-animation: pop 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
+          animation: pop 0.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 {
@@ -1550,7 +1640,10 @@ sm-button[variant=primary] {
   --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;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
   width: 100%;
   max-height: 40vh;
 }
@@ -1560,7 +1653,10 @@ sm-button[variant=primary] {
   cursor: pointer;
   padding: 0.4rem;
   border-radius: 0.6rem;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
   text-align: center;
 }
 
@@ -1777,7 +1873,8 @@ sm-button[variant=primary] {
   box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset;
 }
 #settings_page .bg-preview__image {
-  object-fit: cover;
+  -o-object-fit: cover;
+     object-fit: cover;
   height: 100%;
   width: 100%;
 }
@@ -1788,8 +1885,10 @@ sm-button[variant=primary] {
 }
 #video_call_page video {
   position: fixed;
-  object-fit: cover;
-  object-position: center;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
 }
 
 #their_video {
@@ -2021,6 +2120,8 @@ sm-button[variant=primary] {
     grid-template-columns: 14rem 1fr;
   }
   #settings_page sm-button {
+    width: -webkit-max-content;
+    width: -moz-max-content;
     width: max-content;
   }
   #settings_page .active {
@@ -2130,4 +2231,4 @@ sm-button[variant=primary] {
   .contact .menu {
     display: none;
   }
-}
\ No newline at end of file
+}/*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/css/main.css.map b/css/main.css.map
index e7eb916..ff31db5 100644
--- a/css/main.css.map
+++ b/css/main.css.map
@@ -1,9 +1 @@
-{
-    "version": 3,
-    "mappings": "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",
-    "sources": [
-        "main.scss"
-    ],
-    "names": [],
-    "file": "main.css"
-}
\ No newline at end of file
+{"version":3,"sources":["main.scss"],"names":[],"mappings":"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","file":"main.css"}
\ No newline at end of file
diff --git a/index.html b/index.html
index 1315232..adc1f22 100644
--- a/index.html
+++ b/index.html
@@ -2,8 +2,8 @@
 <html lang="en">
 
 <head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>FLO Messenger</title>
     <script id="floGlobals">
         /* Constants for FLO blockchain operations !!Make sure to add this at begining!! */
@@ -141,43 +141,45 @@
         </div>
     </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>
-		</header>
-		<div id="landing">
-			<div class="left">
-				<h4>
-					FLO Messenger
-				</h4>
-				<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>
+    <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>
+        </header>
+        <div id="landing">
+            <div class="left">
+                <h4>
+                    FLO Messenger
+                </h4>
+                <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>
                 <div class="flex">
                     <sm-button variant="primary" onclick="showPage('sign_in_page')">Sign In</sm-button>
                     <sm-button onclick="initOnBoarding()">Get started</sm-button>
                 </div>
-			</div>
-			<div id="landing_illustration" class="right">				
-				<img src="assets/message-background.svg" alt="">
-			</div>
-		</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">  
+    <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-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>
@@ -186,8 +188,10 @@
     <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>
+            <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">
@@ -204,7 +208,7 @@
                     <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"/>
+                        <path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
                     </svg>
                 </div>
             </section>
@@ -228,15 +232,15 @@
                     .a {
                         fill: #fff;
                     }
-        
+
                     .b {
                         fill: #ccc;
                     }
-        
+
                     .c {
                         fill: none;
                     }
-        
+
                     .c,
                     .d,
                     .e {
@@ -244,11 +248,11 @@
                         stroke-miterlimit: 10;
                         stroke-width: 20;
                     }
-        
+
                     .d {
                         fill: #ed1c24;
                     }
-        
+
                     .e {
                         fill: #d30d41;
                     }
@@ -270,48 +274,48 @@
         <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>
+    <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-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">
@@ -368,36 +372,38 @@
             <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>
+        <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 -->
+    <!-- Templates -->
 
-	<template id="mail_card_template">
-		<li class="mail-card interact">
+    <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>
+            <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"/>
+                    <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 direction-column">                            
+                <div class="mail-details flex direction-column">
                     <h4 class="sender-name"></h4>
                     <h5 class="flo-id text-overflow"></h5>
                 </div>
@@ -407,71 +413,76 @@
         </div>
     </template>
 
-	<template id="contact_template">
-		<div class="contact">
-			<div class="initial flex align-center"></div>
-			<h4 class="name"></h4>
-		</div>
-	</template>
+    <template id="contact_template">
+        <div class="contact">
+            <div class="initial flex align-center"></div>
+            <h4 class="name"></h4>
+        </div>
+    </template>
 
-	<template id="message_template">
-		<div class="message">              
-			<p class="message-body"></p>
-			<time class="time"></time>
-		</div>
+    <template id="message_template">
+        <div class="message">
+            <p class="message-body"></p>
+            <time class="time"></time>
+        </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" />
+    <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 id="contacts" class="grid">
-				<header class="grid header">
+            </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 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 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>
-                            <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"/>
+                            <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-menu align-options="right">
                             <sm-menu-option onclick="initGroupCreation()">
@@ -480,13 +491,14 @@
                         </sm-menu>
                     </div>
                     <div id="chat_search_field" class="expanding-search flex align-center">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon back" onclick="toggleSearch('chat_search_field')" viewBox="0 0 64 64">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon back"
+                            onclick="toggleSearch('chat_search_field')" 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"/>
+                            <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_chats" type="search" placeholder="Search">
-<!--                             <svg slot="icon" class="icon" viewBox="0 0 64 64">
+                            <!--                             <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"/>
@@ -494,11 +506,13 @@
                         </sm-input>
                     </div>
                 </header>
-                <sm-button variant="primary" id="new_message_button" onclick="showContacts({show: true})" class="fab round">
-                    <svg xmlns="http://www.w3.org/2000/svg"class="icon" viewBox="0 0 64 64">
+                <sm-button variant="primary" id="new_message_button" onclick="showContacts({show: true})"
+                    class="fab round">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 64 64">
                         <title>Send new message</title>
-                        <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"/>
+                        <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" />
                     </svg>
                     New chat
                 </sm-button>
@@ -506,24 +520,26 @@
                 <div id="new_conversation" class="flex direction-column empty-state">
                     <svg class="icon new-conversation align-center" viewBox="0 0 512 512">
                         <title>new conversation</title>
-                        <path d="M304.11,403.5H101.42a51,51,0,0,1-51-51v-191L6.87,84.82H424.36a51,51,0,0,1,51,51v86.72"/>
-                        <ellipse cx="423.3" cy="342.48" rx="84.7"/>
-                        <line  x1="423.3" y1="306.34" x2="423.3" y2="379.64"/>
-                        <line x1="459.95" y1="342.99" x2="386.65" y2="342.99"/>
-                    </svg>                  
+                        <path
+                            d="M304.11,403.5H101.42a51,51,0,0,1-51-51v-191L6.87,84.82H424.36a51,51,0,0,1,51,51v86.72" />
+                        <ellipse cx="423.3" cy="342.48" rx="84.7" />
+                        <line x1="423.3" y1="306.34" x2="423.3" y2="379.64" />
+                        <line x1="459.95" y1="342.99" x2="386.65" y2="342.99" />
+                    </svg>
                     <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">
+                            <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"/>
+                                <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">
+                                <!--                                 <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"/>
@@ -534,16 +550,36 @@
                     <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>
+                        <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>
+                                <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>
+                            <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>
@@ -552,24 +588,39 @@
                             <p>No contacts found.</p>
                         </div>
                     </div>
-                    <sm-button id="skip_members_button" variant="primary" class="fab round hide-completely" onclick="skipToGroupCreation()">
+                    <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">
+                            <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"/>
+                                <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>
+                            <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>
@@ -578,20 +629,22 @@
                         </sm-button>
                     </form>
                 </div>
-			</div>
-			<div id="chat" class="grid hide-on-mobile hide-completely">
+            </div>
+            <div id="chat" class="grid hide-on-mobile hide-completely">
                 <div id="chat_left">
                     <header id="chat_header" class="grid align-center">
-                        <svg class="icon hide-on-desktop back-button" onclick="goto('chats')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                        <svg class="icon hide-on-desktop back-button" onclick="goto('chats')"
+                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                             <title>Go to chat page</title>
-                            <line x1="1" y1="32" x2="64" y2="32"/>
-                            <polyline points="29.64 60.97 0.65 32 29.64 3.03"/>
+                            <line x1="1" y1="32" x2="64" y2="32" />
+                            <polyline points="29.64 60.97 0.65 32 29.64 3.03" />
                         </svg>
                         <div class="flex align-center interact" onclick="showChatDetails({show: true})">
                             <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>
+                        <sm-button id="video_call_button" class="hide-completely" onclick="createOffer()">Call
+                        </sm-button>
                     </header>
                     <section id="chat_middle" class="flex direction-column">
                         <div id="chat_first_child"></div>
@@ -601,17 +654,23 @@
                         <div id="scroll_to_bottom" onclick="scrollToBottom()">
                             <svg class="icon" viewBox="0 0 64 64">
                                 <title></title>
-                                <polyline points="63.65 15.99 32 47.66 0.35 15.99"/>
+                                <polyline points="63.65 15.99 32 47.66 0.35 15.99" />
                             </svg>
                         </div>
                     </section>
                     <footer id="chat_footer" class="grid">
                         <emoji-picker id="emoji_picker" class="hide-completely"></emoji-picker>
                         <div class="flex">
-                            <svg id="emoji_toggle" onclick="toggleEmoji('toggle')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0ZM43.84,17.51a4.92,4.92,0,1,1-4.92,4.92A4.92,4.92,0,0,1,43.84,17.51Zm-23.62-.06a5,5,0,1,1-5,5A5,5,0,0,1,20.22,17.45ZM32,54.42A19.68,19.68,0,0,1,12.31,34.73H51.69A19.68,19.68,0,0,1,32,54.42Z"/></svg>
+                            <svg id="emoji_toggle" onclick="toggleEmoji('toggle')" xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 64 64">
+                                <path
+                                    d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0ZM43.84,17.51a4.92,4.92,0,1,1-4.92,4.92A4.92,4.92,0,0,1,43.84,17.51Zm-23.62-.06a5,5,0,1,1-5,5A5,5,0,0,1,20.22,17.45ZM32,54.42A19.68,19.68,0,0,1,12.31,34.73H51.69A19.68,19.68,0,0,1,32,54.42Z" />
+                            </svg>
                             <sm-textarea id="type_message" placeholder="Type a message" class="rest"></sm-textarea>
-                            <svg xmlns="http://www.w3.org/2000/svg" id="send_message_button" class="icon" viewBox="0 0 64 64">
-                                <path d="M63.34,31,3.07,4.71A2.19,2.19,0,0,0,.18,7.58L8.94,28.29,42.18,32,8.94,35.71.18,56.42a2.19,2.19,0,0,0,2.89,2.87L63.34,33A1.09,1.09,0,0,0,63.34,31Z"/>
+                            <svg xmlns="http://www.w3.org/2000/svg" id="send_message_button" class="icon"
+                                viewBox="0 0 64 64">
+                                <path
+                                    d="M63.34,31,3.07,4.71A2.19,2.19,0,0,0,.18,7.58L8.94,28.29,42.18,32,8.94,35.71.18,56.42a2.19,2.19,0,0,0,2.89,2.87L63.34,33A1.09,1.09,0,0,0,63.34,31Z" />
                             </svg>
                         </div>
                     </footer>
@@ -647,12 +706,17 @@
                     <div id="group_members_card" class="card hide-completely">
                         <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" onclick="editGroupMembers()">Edit</sm-button>
+                            <sm-button id="edit_group_button"
+                                class="admin-option hide-completely 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 members</p>
+                        <p id="remove_members_tip" class="tip hide-completely">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</sm-button>
+                            <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
+                            </sm-button>
                         </div>
                         <div id="group_members_list"></div>
                     </div>
@@ -661,16 +725,17 @@
                         <sm-button id="delete_chat_button" class="danger" onclick="deleteChat()">Delete chat</sm-button>
                     </div>
                 </div>
-			</div>
-		</section>
-		<section class="sub-page grid hide-completely" id="mail_page">
-			<div id="mails" class="grid">
-				<header class="grid header">
+            </div>
+        </section>
+        <section class="sub-page grid hide-completely" 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 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">
@@ -678,7 +743,7 @@
                             <sm-option value="sent">Sent</sm-option>
                         </sm-select>
                     </div>
-				</header>
+                </header>
                 <sm-button variant="primary" id="new_mail_button" class="fab round">
                     <svg class="icon" viewBox="0 0 64 64">
                         <path
@@ -689,8 +754,9 @@
                 <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"/>
+                        <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>
@@ -698,33 +764,35 @@
                 <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"/>
+                        <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 id="mail" class="flex hide-on-mobile hide-completely">
-				<div id="mail_container"></div>
-				<div class="flex">
-					<sm-button id="prev_mail">View Previous Mail</sm-button>
-					<sm-button id="show_reply_popup">reply</sm-button>
-				</div>
-			</div>
-		</section>
-		<section id="settings_page" class="sub-page hide-completely">
+            </div>
+            <div id="mail" class="flex hide-on-mobile hide-completely">
+                <div id="mail_container"></div>
+                <div class="flex">
+                    <sm-button id="prev_mail">View Previous Mail</sm-button>
+                    <sm-button id="show_reply_popup">reply</sm-button>
+                </div>
+            </div>
+        </section>
+        <section id="settings_page" class="sub-page hide-completely">
             <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 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>
-				</header>
+                </header>
                 <div class="sidebar-item interact active" data-target="profile_panel">Account</div>
                 <div class="sidebar-item interact" data-target="chat_panel">chat</div>
                 <div class="sidebar-item interact" data-target="personalise_panel">personalise</div>
@@ -733,10 +801,11 @@
             </aside>
             <div id="settings_panel" class=" hide-on-mobile">
                 <header id="settings_header" class="flex align-center hide-on-desktop">
-                    <svg id="back_settings" onclick='hidePanel()' xmlns="http://www.w3.org/2000/svg" class="icon back" viewBox="0 0 64 64">
+                    <svg id="back_settings" onclick='hidePanel()' xmlns="http://www.w3.org/2000/svg" class="icon back"
+                        viewBox="0 0 64 64">
                         <title>Go back</title>
-                        <line x1="1" y1="32" x2="64" y2="32"/>
-                        <polyline points="29.64 60.97 0.65 32 29.64 3.03"/>
+                        <line x1="1" y1="32" x2="64" y2="32" />
+                        <polyline points="29.64 60.97 0.65 32 29.64 3.03" />
                     </svg>
                     <h4 id="settings_title"></h4>
                 </header>
@@ -754,7 +823,8 @@
                     </section>
                     <section>
                         <h4>Clear data</h4>
-                        <p><strong></strong>This can't be undone.</strong> Make sure you have stored the PRIVATE KEY and backed up the data.</p>
+                        <p><strong></strong>This can't be undone.</strong> Make sure you have stored the PRIVATE KEY and
+                            backed up the data.</p>
                         <sm-button id="clear_data">Clear Data</sm-button>
                     </section>
                     <section>
@@ -781,11 +851,11 @@
                     <section>
                         <h4>Chat preview</h4>
                         <div id="chat_preview">
-                            <div class="message sent">              
+                            <div class="message sent">
                                 <p class="message-body">Hey there!</p>
                                 <time class="time">12:00PM</time>
                             </div>
-                            <div class="message received">              
+                            <div class="message received">
                                 <p class="message-body">How are you?</p>
                                 <time class="time">12:00PM</time>
                             </div>
@@ -803,7 +873,8 @@
                             <div id="selected_bg_preview" class="bg-preview hide-completely" 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 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>
@@ -818,15 +889,17 @@
                 <div id="backup_panel" class="panel hide-completely">
                     <section>
                         <h4>Backup data</h4>
-                        <p>Create a backup of contacts, conversations and mails. Which can later be used to restore these in case of data is cleared. </p>
-                        <sm-button id="backup_data" >Backup Data</sm-button>
+                        <p>Create a backup of contacts, conversations and mails. Which can later be used to restore
+                            these in case of data is cleared. </p>
+                        <sm-button id="backup_data">Backup Data</sm-button>
                         <span id="backup_info"></span>
                     </section>
                     <section>
                         <h4>Restore backup</h4>
-                        <p>Select backup file with extension '.json'. Which was downloaded when backup was performed.</p>
+                        <p>Select backup file with extension '.json'. Which was downloaded when backup was performed.
+                        </p>
                         <label class="select-file">
-                            <sm-button >Select File</sm-button>
+                            <sm-button>Select File</sm-button>
                             <input type="file" id="restore_data" accept=".json" />
                         </label>
                     </section>
@@ -837,7 +910,7 @@
                     </section>
                 </div>
             </div>
-		</section>
+        </section>
     </main>
     <div id="incoming_call_page" class="page">
         <div id="caller_dp"></div>
@@ -848,11 +921,18 @@
         <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"/><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"/></svg>
+                <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" />
+                    <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" />
+                </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"><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"/></svg>
+                <svg class="icon filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                    <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" />
+                </svg>
             </sm-button>
         </div>
     </div>
@@ -861,27 +941,27 @@
     <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">
-        
+
         const myVideo = document.getElementById('my_video')
         const theirVideo = document.getElementById('their_video')
-        
+
         let dataChannel
         let peerConnection
         let localStream
         let remoteSdp = ''
         const server = { urls: "stun:stun.l.google.com:19302" };
 
-        async function initPeerConnection(){
+        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})
+            try {
+                localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
                 localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
             }
-            catch(err) {
+            catch (err) {
                 console.log("An error occurred: " + err);
             }
         }
@@ -895,12 +975,12 @@
             await initPeerConnection()
             showPage('video_call_page')
             initDataChannel(dataChannel = peerConnection.createDataChannel("chat"));
-            try{
+            try {
                 myVideo.srcObject = localStream
                 const offer = await peerConnection.createOffer()
                 peerConnection.setLocalDescription(offer)
             }
-            catch(err){
+            catch (err) {
                 console.log(err)
             }
             peerConnection.onicecandidate = e => {
@@ -913,17 +993,17 @@
             }
         }
 
-        async function createAnswer(){
+        async function createAnswer() {
             await initPeerConnection()
             if (peerConnection.signalingState !== "stable") return;
             button.disabled = offer.disabled = true;
-            let desc = new RTCSessionDescription({ type:"offer", sdp: remoteSdp});
-            try{
+            let desc = new RTCSessionDescription({ type: "offer", sdp: remoteSdp });
+            try {
                 await peerConnection.setRemoteDescription(desc)
                 const answer = await peerConnection.createAnswer()
                 peerConnection.setLocalDescription(answer)
             }
-            catch(err){
+            catch (err) {
                 console.log(err)
             }
             peerConnection.onicecandidate = e => {
@@ -935,17 +1015,17 @@
             };
         }
 
-        function startVideoCall(answer){
+        function startVideoCall(answer) {
             if (peerConnection.signalingState != "have-local-offer") return;
-            let desc = new RTCSessionDescription({ type:"answer", sdp: answer});
+            let desc = new RTCSessionDescription({ type: "answer", sdp: answer });
             peerConnection.setRemoteDescription(desc).catch(log);
         }
 
-        function endCall(){
+        function endCall() {
             remoteSdp = ''
             peerConnection.close()
         }
-        /* 
+        /*
         chat.onkeypress = e => {
             if (!enterPressed(e)) return;
             dataChannel.send(chat.value);
@@ -957,8 +1037,8 @@
 
         const domRefs = {}
 
-        function getRef(elementId){
-            if(!domRefs.elementId)
+        function getRef(elementId) {
+            if (!domRefs.elementId)
                 domRefs[elementId] = document.getElementById(elementId)
             return domRefs[elementId]
         }
@@ -975,8 +1055,8 @@
             notify('We are back online.', 'success')
         })
 
-        const   themeSwitcher = getRef('theme_switcher'),
-                hapticFeedbackSwitcher = getRef('haptic_feedback_switcher')
+        const themeSwitcher = getRef('theme_switcher'),
+            hapticFeedbackSwitcher = getRef('haptic_feedback_switcher')
 
         if (localStorage.theme === "dark") {
             nightlight()
@@ -1005,10 +1085,10 @@
         })
 
         let isHapticOn
-        if(hapticFeedbackSwitcher){
-            if(localStorage.getItem('haptic') === null)
+        if (hapticFeedbackSwitcher) {
+            if (localStorage.getItem('haptic') === null)
                 localStorage.setItem("haptic", "on");
-        
+
             if (localStorage.haptic === "on") {
                 isHapticOn = true
                 hapticFeedbackSwitcher.checked = true;
@@ -1067,46 +1147,46 @@
                 firstInput = thisPopup.querySelector('sm-input')
 
             //pushes popup as seprate entry in history
-            history.pushState({type: 'popup'}, null, null)
+            history.pushState({ type: 'popup' }, null, null)
 
             if (window.innerWidth > 720 && firstInput)
                 firstInput.focusIn()
 
             switch (e.detail.popup.id) {
                 case 'contact_details_popup':
-                    if(floGlobals.contacts.hasOwnProperty(clickedContact.floID)){
+                    if (floGlobals.contacts.hasOwnProperty(clickedContact.floID)) {
                         getRef('add_as_contact_option').classList.add('hide-completely')
                     }
-                    else{
+                    else {
                         getRef('add_as_contact_option').classList.remove('hide-completely')
                     }
 
                     const markUnread = floGlobals.marked[clickedContact.floID]?.includes('unread')
-                    if(markUnread){
+                    if (markUnread) {
                         getRef('mark_read_option').classList.remove('hide-completely')
                         getRef('mark_unread_option').classList.add('hide-completely')
                     }
-                    else{
+                    else {
                         getRef('mark_read_option').classList.add('hide-completely')
                         getRef('mark_unread_option').classList.remove('hide-completely')
                     }
-                    if(clickedContact.chatCard.closest('#chat_container')){
+                    if (clickedContact.chatCard.closest('#chat_container')) {
                         getRef('contact_options').classList.remove('hide-completely')
                     }
-                    else{
+                    else {
                         getRef('contact_options').classList.add('hide-completely')
                     }
-                    if(clickedContact.isGroup){
+                    if (clickedContact.isGroup) {
                         getRef("contact_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>
                             `
-                        if(floGlobals.groups[clickedContact['floID']].admin === myFloID)
+                        if (floGlobals.groups[clickedContact['floID']].admin === myFloID)
                             getRef('contact_name').disabled = false
                         else
                             getRef('contact_name').disabled = true
                         getRef('delete_chat_option').classList.add('hide-completely')
                     }
-                    else{
+                    else {
                         getRef('contact_name').disabled = false
                         getRef('contact_initial').textContent = clickedContact['name'].charAt(0)
                         getRef('delete_chat_option').classList.remove('hide-completely')
@@ -1114,23 +1194,23 @@
                     getRef('contact_initial').setAttribute('style', `background: ${clickedContact['chatCard'].getAttribute('background-color')}`)
                     getRef('contact_name').value = clickedContact['name']
                     getRef('contact_flo_id').textContent = clickedContact['floID']
-                break;
+                    break;
                 case 'contacts_popup':
                     const contacts = []
-                    for(contact in floGlobals.contacts){
-                        if(!floGlobals.groups[activeChat.floID].members.includes(contact) && contact in floGlobals.pubKeys){
+                    for (contact in floGlobals.contacts) {
+                        if (!floGlobals.groups[activeChat.floID].members.includes(contact) && contact in floGlobals.pubKeys) {
                             contacts.push(contact)
                         }
                     }
                     contacts.forEach(member => {
-                        frag.append(render.contactCard(member, {type: 'contact', contactOnly: true}))
+                        frag.append(render.contactCard(member, { type: 'contact', contactOnly: true }))
                     })
                     getRef('popup_contacts_container').append(frag)
                     getRef('popup_contacts_container').querySelectorAll('.contact').forEach(cont => {
                         cont.classList.add('selectable')
                     })
                     isRemovingMember = false
-                break
+                    break
             }
         })
 
@@ -1141,19 +1221,19 @@
                 case 'contact_details_popup':
                     clickedContact['name'] = getRef('contact_name').value.trim()
                     getRef('contact_name').revert()
-                break;
+                    break;
                 case 'contacts_popup':
                     getRef('popup_contacts_container').innerHTML = ''
                     isRemovingMember = true
                     membersToAdd.clear()
-                break;
+                    break;
             }
         })
 
         window.addEventListener('popstate', e => {
-            if(!e.state) return
+            if (!e.state) return
             console.log(e.state)
-            switch (e.state.type){
+            switch (e.state.type) {
                 case 'popup':
                     hidePopup()
                     break;
@@ -1182,13 +1262,13 @@
         }
 
         const selectedColors = ['#FF1744', '#F50057', '#8E24AA', '#5E35B1', '#3F51B5', '#3D5AFE', '#00B0FF', '#00BCD4', '#16c79a', '#66BB6A', '#8BC34A', '#11698e', '#FF6F00', '#FF9100', '#FF3D00']
-        function randomColor(){
+        function randomColor() {
             return selectedColors[Math.floor(Math.random() * selectedColors.length)]
         }
 
         const contactsInfo = {}
-        function contactColor(floID){
-            if(!contactsInfo[floID]){
+        function contactColor(floID) {
+            if (!contactsInfo[floID]) {
                 contactsInfo[floID] = randomColor()
             }
             return contactsInfo[floID]
@@ -1221,9 +1301,9 @@
                 getRef('confirm_title').textContent = title;
                 getRef('confirm_message').textContent = message;
                 let cancelButton = getRef('confirmation_popup').children[2].children[0],
-                    submitButton = getRef('confirmation_popup').children[2].children[1]  
+                    submitButton = getRef('confirmation_popup').children[2].children[1]
                 submitButton.textContent = confirmText
-                cancelButton.textContent = cancelText 
+                cancelButton.textContent = cancelText
                 submitButton.onclick = () => {
                     hidePopup()
                     resolve(true);
@@ -1260,15 +1340,15 @@
                     resolve(value)
                 }
             })
-		}
+        }
 
         const currentYear = new Date().getFullYear()
         function getFormatedTime(time, relative) {
             try {
                 if (String(time).indexOf('_'))
-                time = String(time).split('_')[0]
+                    time = String(time).split('_')[0]
                 const intTime = parseInt(time)
-                if(String(intTime).length < 13)
+                if (String(intTime).length < 13)
                     time *= 1000
                 let timeFrag = new Date(intTime).toString().split(' '),
                     day = timeFrag[0],
@@ -1291,13 +1371,13 @@
                 finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`
                 if (relative) {
                     if (year == currentYear) {
-                        if (currentTime[1] === month){
+                        if (currentTime[1] === month) {
                             const dateDiff = (parseInt(currentTime[2]) - parseInt(date))
-                            if(dateDiff === 0)
+                            if (dateDiff === 0)
                                 return `${finalHours}`;
-                            else if(dateDiff === 1)
+                            else if (dateDiff === 1)
                                 return `Yesterday`;
-                            else if(dateDiff > 1 && dateDiff < 8)
+                            else if (dateDiff > 1 && dateDiff < 8)
                                 return currentTime[0];
                             else
                                 return ` ${date} ${month}`;
@@ -1316,13 +1396,13 @@
             }
         }
 
-        function getContactName(floID){
+        function getContactName(floID) {
             let name
-            if(floGlobals.contacts[floID])
+            if (floGlobals.contacts[floID])
                 name = floGlobals.contacts[floID]
-            else if(floGlobals.groups[floID])
+            else if (floGlobals.groups[floID])
                 name = floGlobals.groups[floID].name
-            else if(floID === myFloID)
+            else if (floID === myFloID)
                 name = 'You'
             else
                 name = floID
@@ -1351,7 +1431,7 @@
         function formValidation(formElement) {
             let parent = formElement.closest('sm-popup') || formElement.closest('form'),
                 submitBtn
-            if(parent)
+            if (parent)
                 submitBtn = parent.querySelector("button[type='submit'], sm-button[variant='primary']");
             if (!submitBtn) return;
             if (areInputsValid(parent))
@@ -1381,7 +1461,7 @@
                             input.setValidity('Invalid FLO private key.')
                     }
                 }
-                else if(e.target.closest('pin-input')){
+                else if (e.target.closest('pin-input')) {
                     formValidation(e.target.closest('pin-input'))
                 }
             })
@@ -1393,7 +1473,7 @@
                             .click();
                     }
                 }
-                if(e.code === 'Escape'){
+                if (e.code === 'Escape') {
                     hidePopup()
                 }
             })
@@ -1453,10 +1533,10 @@
                     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('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')
@@ -1470,7 +1550,7 @@
                 }
                 getRef('sign_in_button').addEventListener('clicked', () => {
                     let key
-                    if (type === "PRIVATE_KEY"){
+                    if (type === "PRIVATE_KEY") {
                         key = getRef('private_key_input_field').value;
                         setTimeout(() => {
                             getRef('private_key_input_field').value = ''
@@ -1486,7 +1566,7 @@
                     resolve(key)
                 })
                 getRef('sign_in_with').addEventListener('clicked', () => {
-                    showFrame(2)
+                    // showFrame(2)
                     resolve(getRef('generated_key').textContent)
                 })
             })
@@ -1501,20 +1581,20 @@
                 }, 1000);
             }
         }
-       async function loadPage(){
-            if(location.hash === ''){
-                history.pushState({type: 'subpage', id: 'chat_page'}, null, '#chat_page')
+        async function loadPage() {
+            if (location.hash === '') {
+                history.pushState({ type: 'subpage', id: 'chat_page' }, null, '#chat_page')
                 showPage('chat_page', true)
             }
-            else{
+            else {
                 showPage(location.hash.split('#')[1], true)
             }
         }
         function debounce(func, wait, immediate) {
             let timeout;
-            return function() {
+            return function () {
                 let context = this, args = arguments;
-                let later = function() {
+                let later = function () {
                     timeout = null;
                     if (!immediate) func.apply(context, args);
                 };
@@ -1534,9 +1614,9 @@
             activeMail,
             frag = document.createDocumentFragment()
 
-		// render elements 
-		const render = {
-			mailCard(floID, ref, subject, timestamp, content, markUnread){
+        // 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(' ')
@@ -1544,43 +1624,43 @@
                 mailSummery = mailSummery.join(' ')
                 cardContainer.setAttribute("name", ref);
                 let contact;
-                if(Array.isArray(floID)){
-                    for(let f of floID)
-                        if(floGlobals.contacts[f]){
+                if (Array.isArray(floID)) {
+                    for (let f of floID)
+                        if (floGlobals.contacts[f]) {
                             contact = floGlobals.contacts[f]
                             break;
                         }
                     contact = contact || `${floID[0].substring(12)}...`;
-                    if(floID.length > 1)
+                    if (floID.length > 1)
                         contact = `${contact} & ${floID.length - 1} others(s)`
                     floID = floID.join(', ')
                 } else
                     contact = floGlobals.contacts[floID] || floID
-                if(markUnread)
+                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}`)  
+                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
             },
-            
-            mail(from, to, subject, timestamp, content){
+
+            mail(from, to, subject, timestamp, content) {
                 let card = getRef('mail_template').content.cloneNode(true),
                     cardContainer = card.querySelector('.mail')
                 let senderName, floID
-                if(from === myFloID){
+                if (from === myFloID) {
                     let count = 0, list = [];
-                    to.forEach(f => floGlobals.contacts[f] ? list.push(floGlobals.contacts[f]): count++)
+                    to.forEach(f => floGlobals.contacts[f] ? list.push(floGlobals.contacts[f]) : count++)
                     senderName = `To : ${list.join(', ')}`
-                    if(count){
-                        if(list.length)
+                    if (count) {
+                        if (list.length)
                             senderName = `${senderName} & ${count} other(s)`
                         else
                             senderName = `${senderName} ${count} Unknown people`
@@ -1597,11 +1677,11 @@
                 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
+            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)
+                if (!name)
                     name = getContactName(floID)
 
                 cardContainer.setAttribute("name", name)
@@ -1610,54 +1690,54 @@
                 let initial = card.querySelector('.initial')
                 let color = contactColor(floID)
                 cardContainer.setAttribute("background-color", color)
-                initial.setAttribute(`style`, `background-color: ${color}`)     
+                initial.setAttribute(`style`, `background-color: ${color}`)
 
-                if(type === 'group'){
+                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 = floGlobals.groups[floID].name
                 }
-                else{
+                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){
+
+                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)
                     }
-                } 
-                else{
+                }
+                else {
                     //render chat card for newly added contact
-                    if(type === 'chat')
+                    if (type === 'chat')
                         cardContainer.classList.add('chat')
-                    else    
+                    else
                         cardContainer.classList.add('group')
-                    if(markUnread)
+                    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){
+                        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){
+                        if (type === 'group' && lastMessage.time === 0) {
                             lastMessage.time = floGlobals.groups[floID].created
                         }
                         let lastText = document.createElement('p')
-                        if((type === 'chat' && lastMessage.category === 'sent') || (type === 'group' && lastMessage.sender === myFloID)){
+                        if ((type === 'chat' && lastMessage.category === 'sent') || (type === 'group' && lastMessage.sender === myFloID)) {
                             lastText.textContent = `You: ${lastMessage.message}`
                         }
-                        else{
+                        else {
                             lastText.textContent = lastMessage.message
                         }
                         lastText.classList.add('last-message')
@@ -1670,60 +1750,60 @@
                             <circle cx="31.89" cy="32" r="5.59"/>
                         </svg>`
                     })
-                    .catch(error => console.error(error))
-                    if(prepend){
+                        .catch(error => console.error(error))
+                    if (prepend) {
                         activeChat['floID'] = floID
-                        if(activeChat['chatCard'])
+                        if (activeChat['chatCard'])
                             activeChat['chatCard'].classList.remove('active')
                     }
                 }
-                if(isSelected)
-                    addTick(cardContainer, {animate: false})
+                if (isSelected)
+                    addTick(cardContainer, { animate: false })
                 return card
             },
-            messageBubble(msg){
-                let {admin = false, newMembers = [], rmMembers = [], groupID, name, description, sender, floID, message, time: timestamp, category, unconfirmed = false, updateChatCard = false} = msg
+            messageBubble(msg) {
+                let { admin = false, newMembers = [], rmMembers = [], groupID, name, description, sender, floID, message, time: timestamp, category, unconfirmed = false, updateChatCard = false } = msg
                 let card = getRef('message_template').content.cloneNode(true),
                     cardContainer = card.querySelector('.message'),
                     messageContent = cardContainer.children[0],
                     messageTime = cardContainer.children[1]
 
-                if(activeChat.isGroup){
+                if (activeChat.isGroup) {
                     floID = groupID
-                    category = sender === myFloID ? 'sent': 'received'
+                    category = sender === myFloID ? 'sent' : 'received'
                 }
 
-                if(message){
-                    if(updateChatCard){
-                        if(category === 'offer'){
+                if (message) {
+                    if (updateChatCard) {
+                        if (category === 'offer') {
                             showPage('video_call_page')
                             remoteSdp = message
                         }
-                        else if(category === 'answer'){
+                        else if (category === 'answer') {
                             startVideoCall(message)
                             return
                         }
                     }
-                    else if(category === 'offer'){
+                    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'){
+                    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)
+                    if (unconfirmed)
                         cardContainer.classList.add('unconfirmed')
-                
+
                     cardContainer.classList.add(category)
-                    
-                    if(sender){
-                        if(sender !== myFloID && lastSender !== sender){
+
+                    if (sender) {
+                        if (sender !== myFloID && lastSender !== sender) {
                             let senderName = document.createElement('div')
                             senderName.classList.add('sender-name')
                             senderName.style.color = contactColor(sender)
@@ -1731,35 +1811,35 @@
                             cardContainer.prepend(senderName)
 
                             cardContainer.classList.add('distinct-sender')
-    
+
                             messageContent = cardContainer.children[1]
                             messageTime = cardContainer.children[2]
                         }
                         lastSender = sender
                     }
-                    
-                    if(hasURL(message)){
+
+                    if (hasURL(message)) {
                         const chunks = message.split(' ')
                         const chunksLength = chunks.length - 1
                         chunks.forEach((chunk, index) => {
-                            if(hasURL(chunk)){
+                            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
+                                anchorTag.target = "_blank"
+                                anchorTag.rel = "noopener"
+                                anchorTag.textContent = chunksLength !== index ? `${chunk} ` : chunk
                                 messageContent.append(anchorTag)
                             }
-                            else{
+                            else {
                                 const text = chunksLength !== index ? `${chunk} ` : chunk
                                 const textNode = document.createTextNode(text)
                                 messageContent.append(textNode)
                             }
                         })
                     }
-                    else{
+                    else {
                         let [messageBody, isOnlyEmoji] = isEmoji(message)
-                        if(isOnlyEmoji)
+                        if (isOnlyEmoji)
                             cardContainer.classList.add('big-emoji')
                         messageContent.append(messageBody)
                     }
@@ -1769,16 +1849,16 @@
                         year = new Date(timestamp).getFullYear()
                     minutes = minutes.length === 1 ? `0${minutes}` : minutes
                     let finalHours = hours - 12 > 0 ? `${hours - 12}:${minutes} pm` : `${hours}:${minutes} am`
-    
+
                     messageTime.textContent = finalHours
-                    if(currentFloID !== floID){
+                    if (currentFloID !== floID) {
                         currentDate = null
                         lastSender = null
                         currentFloID = floID
                         renderedDates.clear()
                     }
-    
-                    if(!renderedDates.has(`${time.slice(4, 10)} ${year}`) && `${time.slice(4, 10)} ${year}` !== currentDate){
+
+                    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)
@@ -1791,46 +1871,46 @@
                     else
                         return card;
                 }
-                else if(admin){
-                    if(newMembers.length){
+                else if (admin) {
+                    if (newMembers.length) {
                         const cards = document.createDocumentFragment()
-                        const {admin} = floGlobals.groups[groupID]
+                        const { admin } = floGlobals.groups[groupID]
                         newMembers.forEach(member => {
                             let eventCard = document.createElement('p')
                             eventCard.classList.add('group-event-card')
                             let eventMessage = ''
-                            if(member === myFloID)
+                            if (member === myFloID)
                                 eventMessage = `${getContactName(admin)} added you`
-                                else    
+                            else
                                 eventMessage = `${getContactName(admin)} added ${getContactName(member)}`
                             eventCard.textContent = eventMessage
                             cards.append(eventCard)
                         })
                         return cards
                     }
-                    else if(rmMembers.length){
+                    else if (rmMembers.length) {
                         const cards = document.createDocumentFragment()
-                        const {admin} = floGlobals.groups[groupID]
+                        const { admin } = floGlobals.groups[groupID]
                         rmMembers.forEach(member => {
                             let eventCard = document.createElement('p')
                             eventCard.classList.add('group-event-card')
                             let eventMessage = ''
-                            if(member === myFloID)
+                            if (member === myFloID)
                                 eventMessage = `${getContactName(admin)} removed you`
-                            else    
+                            else
                                 eventMessage = `${getContactName(admin)} removed ${getContactName(member)}`
                             eventCard.textContent = eventMessage
                             cards.append(eventCard)
                         })
                         return cards
                     }
-                    else if(name){
+                    else if (name) {
                         let eventCard = document.createElement('p')
                         eventCard.classList.add('group-event-card')
                         eventCard.textContent = `Changed group name to '${name}'`
                         return eventCard
                     }
-                    else if(description){
+                    else if (description) {
                         let eventCard = document.createElement('p')
                         eventCard.classList.add('group-event-card')
                         eventCard.textContent = `Changed group description to '${description}'`
@@ -1838,9 +1918,9 @@
                     }
                 }
 
-			},
+            },
         }
-        
+
         let currentDate,
             currentFloID,
             renderedDates = new Map(),
@@ -1855,45 +1935,45 @@
             const length = res.length
             let isOnlyEmoji = false
             res.forEach(section => {
-                if(section.match(rx)){
+                if (section.match(rx)) {
                     const span = document.createElement('span')
-                    if(length === 1)
+                    if (length === 1)
                         isOnlyEmoji = true
                     else
-                        span.classList.add('text-emoji') 
+                        span.classList.add('text-emoji')
                     span.textContent = section
                     messageBody.append(span)
                 }
-                else if (length === 2 && !/\w/.test(section)){        
+                else if (length === 2 && !/\w/.test(section)) {
                     isOnlyEmoji = true
                 }
-                else{
+                else {
                     messageBody.append(section)
                 }
             })
             return [messageBody, isOnlyEmoji]
         }
-        
+
 
         function renderDirectUI(data) {
-            renderMessages(data.messages, {updateChatCard: true});
+            renderMessages(data.messages, { updateChatCard: true });
             renderMailList(data.mails)
             //let order = Object.keys(data.messages).map(a => a.split('_')).sort((a, b) => a[0] - b[0]).map(a => a[1])
-            if(Object.keys(data.messages).length){
+            if (Object.keys(data.messages).length) {
                 document.title = `New message(s)`
             }
-            if(Object.keys(data.mails).length && activePage.button !== getRef('mail_page_button')){
+            if (Object.keys(data.mails).length && activePage.button !== getRef('mail_page_button')) {
                 document.title = `New mail(s)`
             }
         }
-        
-        function renderGroupUI(data){
-            renderMessages(data.messages, {updateChatCard: true});
+
+        function renderGroupUI(data) {
+            renderMessages(data.messages, { updateChatCard: true });
         }
 
         window.addEventListener('focus', e => {
-            if(activeChat.chatCard){
-                if(!chatScrollInfo.isScrolledUp){
+            if (activeChat.chatCard) {
+                if (!chatScrollInfo.isScrolledUp) {
                     scrollToBottom()
                 }
             }
@@ -1901,58 +1981,58 @@
         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')){
+
+        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')) {
                             child.focus()
                             break
                         }
                     }
                 }
-                if(e.code === 'Enter' && getRef('mail_contact_list').firstElementChild){
-                    for(child of getRef('mail_contact_list').children){
-                        if(!child.classList.contains('hide-completely')){
+                if (e.code === 'Enter' && getRef('mail_contact_list').firstElementChild) {
+                    for (child of getRef('mail_contact_list').children) {
+                        if (!child.classList.contains('hide-completely')) {
                             child.click()
                             break
                         }
                     }
                 }
             }
-            if(e.target.closest('#search_chats')){
-                if(e.code === 'ArrowDown'){
-                    for(child of getRef('chat_container').children){
-                        if(!child.classList.contains('hide-completely')){
+            if (e.target.closest('#search_chats')) {
+                if (e.code === 'ArrowDown') {
+                    for (child of getRef('chat_container').children) {
+                        if (!child.classList.contains('hide-completely')) {
                             child.focus()
                             break
                         }
                     }
                 }
-                if(e.code === 'Enter' && getRef('contacts_container').firstElementChild){
-                    for(child of getRef('contacts_container').children){
-                        if(!child.classList.contains('hide-completely')){
+                if (e.code === 'Enter' && getRef('contacts_container').firstElementChild) {
+                    for (child of getRef('contacts_container').children) {
+                        if (!child.classList.contains('hide-completely')) {
                             child.click()
                             break
                         }
                     }
                 }
             }
-            if(e.target.closest('.contact')){
-                if(e.code === 'ArrowDown' || e.code === 'ArrowRight'){
-                    if(document.activeElement.nextElementSibling)
+            if (e.target.closest('.contact')) {
+                if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
+                    if (document.activeElement.nextElementSibling)
                         document.activeElement.nextElementSibling.focus()
                     else
                         getRef('mail_contact_list').firstElementChild.focus()
                 }
-                if(e.code === 'ArrowUp' || e.code === 'ArrowLeft' ){
-                    if(document.activeElement.previousElementSibling)
+                if (e.code === 'ArrowUp' || e.code === 'ArrowLeft') {
+                    if (document.activeElement.previousElementSibling)
                         document.activeElement.previousElementSibling.focus()
                     else
                         getRef('mail_contact_list').lastElementChild.focus()
                 }
-                if(e.code === 'Enter' || e.code === 'Space'){
+                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')
                 }
@@ -1961,56 +2041,56 @@
 
         const chatScrollInfo = {};
         let debounceTimer
-        getRef('chat_middle').addEventListener('scroll', function() {
-            if(debounceTimer){
+        getRef('chat_middle').addEventListener('scroll', function () {
+            if (debounceTimer) {
                 window.clearTimeout(debounceTimer)
             }
             debounceTimer = setTimeout(e => {
                 chatScrollInfo['scrollTop'] = this.scrollTop
                 chatScrollInfo['scrollheight'] = this.scrollHeight
-                if((this.scrollHeight > this.clientHeight) && (this.scrollHeight - this.clientHeight - this.scrollTop >= 100)){
+                if ((this.scrollHeight > this.clientHeight) && (this.scrollHeight - this.clientHeight - this.scrollTop >= 100)) {
                     chatScrollInfo['isScrolledUp'] = true
                     getRef('scroll_to_bottom').classList.add('no-transformations')
                 }
-                else{
+                else {
                     chatScrollInfo['isScrolledUp'] = false
                     getRef('scroll_to_bottom').classList.remove('no-transformations', 'new-message')
                 }
             }, 100)
-        }, {passive: true})
+        }, { passive: true })
 
-        getRef('send_mail_to').addEventListener('input', function() {
+        getRef('send_mail_to').addEventListener('input', function () {
             getRef('mail_contact_list').classList.remove('hide-completely')
-            if(this.value.trim !== ''){
-                for(child of getRef('mail_contact_list').children) {
-                    if(child.getAttribute('name').toUpperCase().indexOf(this.value.toUpperCase()) > -1){
+            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')
                     }
-                    else{
+                    else {
                         child.classList.add('hide-completely')
                     }
                 }
             }
         })
 
-        getRef('search_chats').addEventListener('input', function(e) {
+        getRef('search_chats').addEventListener('input', function (e) {
             const contacts = getRef('chat_container').querySelectorAll('.contact')
-            contacts.forEach( child => {
-                if(child.getAttribute('search-tags').toLowerCase().includes(this.value.toLowerCase())){
+            contacts.forEach(child => {
+                if (child.getAttribute('search-tags').toLowerCase().includes(this.value.toLowerCase())) {
                     child.classList.remove('hide-completely')
                 }
-                else{
+                else {
                     child.classList.add('hide-completely')
                 }
             })
         })
 
-        getRef('search_contacts').addEventListener('input', function() {
+        getRef('search_contacts').addEventListener('input', function () {
             const contacts = {}
-            for(contact in floGlobals.contacts) {
-                if(contact.toLowerCase().includes(this.value.toLowerCase()) || floGlobals.contacts[contact].toLowerCase().includes(this.value.toLowerCase())){
+            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 (isCreatingGroup && !(contact in floGlobals.pubKeys))
                         delete contacts[contact]
                 }
             }
@@ -2019,43 +2099,43 @@
         })
 
         document.addEventListener('click', e => {
-            if(e.target.closest('.sidebar-item')){
+            if (e.target.closest('.sidebar-item')) {
                 let target = e.target.closest('.sidebar-item')
-                if(target.dataset.target)
+                if (target.dataset.target)
                     showPanel(target, target.dataset.target)
             }
-            if(e.target.closest('.navbar-item') && activePage.button !== e.target.closest('.navbar-item')){
+            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}`)
+                history.pushState({ type: 'subpage', id: targetPage }, null, `#${targetPage}`)
             }
-            if(e.target.closest('#send_mail_to') || e.target.closest('#mail_contact_list')){
+            if (e.target.closest('#send_mail_to') || e.target.closest('#mail_contact_list')) {
                 getRef('mail_contact_list').classList.remove('hide-completely')
             }
-            else{
+            else {
                 getRef('mail_contact_list').classList.add('hide-completely')
             }
-			if(e.target.closest('#new_mail_button')){
+            if (e.target.closest('#new_mail_button')) {
                 showPopup('compose_mail_popup')
             }
 
             //Detect click on send mail option 
-            if (e.target.closest(".send-mail-option")){
+            if (e.target.closest(".send-mail-option")) {
                 let floID;
-				showPopup('compose_mail_popup')
-				floID = e.target.closest(".contact").getAttribute("flo-id");
-				getRef('send_mail_to').value = floID;
-				return false;
-			}
-            
+                showPopup('compose_mail_popup')
+                floID = e.target.closest(".contact").getAttribute("flo-id");
+                getRef('send_mail_to').value = floID;
+                return false;
+            }
+
             // detect click outside emoji panel and emoji button
-            if(isEmojiPickerOpen && (!e.target.closest('#emoji_picker') && !e.target.closest('#emoji_toggle') && !e.target.closest('#type_message'))){
+            if (isEmojiPickerOpen && (!e.target.closest('#emoji_picker') && !e.target.closest('#emoji_toggle') && !e.target.closest('#type_message'))) {
                 toggleEmoji('hide')
             }
         })
 
         getRef('chat_page').addEventListener('contextmenu', e => {
-            if(e.target.closest('.contact')){
+            if (e.target.closest('.contact')) {
                 e.preventDefault()
             }
         })
@@ -2064,9 +2144,9 @@
         let holdThreshold = 500
 
         getRef('chat_page').addEventListener('touchstart', e => {
-            if(e.target.closest('.contact')){
+            if (e.target.closest('.contact')) {
                 holdTimeout = setTimeout(() => {
-                    if(isHapticOn)
+                    if (isHapticOn)
                         navigator.vibrate(100)
                     let contact = e.target.closest(".contact")
                     clickedContact['chatCard'] = contact
@@ -2078,22 +2158,22 @@
                 getRef('chat_page').addEventListener('touchmove', handleTouchMove)
             }
         })
-        
-        function handleTouchMove(e){
-            if(e.target.closest('.contact')){
+
+        function handleTouchMove(e) {
+            if (e.target.closest('.contact')) {
                 clearTimeout(holdTimeout)
             }
         }
 
         getRef('chat_page').addEventListener('touchend', e => {
-            if(e.target.closest('.contact')){
+            if (e.target.closest('.contact')) {
                 clearTimeout(holdTimeout)
                 getRef('chat_page').removeEventListener('touchmove', handleTouchMove)
             }
         })
 
         getRef('mail_contact_list').addEventListener('click', e => {
-            if(e.target.closest('.contact')){
+            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')
             }
@@ -2104,39 +2184,39 @@
 
         getRef('chat_page').addEventListener('click', e => {
             //detect click on chat cards
-            if (e.target.closest(".contact")){
+            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'] = floGlobals.groups.hasOwnProperty(clickedContact['floID'])
 
-                if(clickedContact['floID'] === myFloID) return
+                if (clickedContact['floID'] === myFloID) return
 
-                if(e.target.closest(".selectable")){
-                    if(isRemovingMember)
+                if (e.target.closest(".selectable")) {
+                    if (isRemovingMember)
                         selectMemberToRemove(e.target.closest(".selectable"))
                 }
-                else if(isCreatingGroup){
+                else if (isCreatingGroup) {
                     // code for adding group members
                     selectContact(contact)
                 }
-                else if(e.target.closest(".initial") || e.target.closest(".menu")){
+                else if (e.target.closest(".initial") || e.target.closest(".menu")) {
                     showPopup('contact_details_popup')
                 }
-                else{
+                else {
                     createRipple(e, contact)
                     contact.classList.remove('unread')
-                    if(activeChat['chatCard'] === contact && window.innerWidth > 640) return
-                    showChatDetails({show: false, animate: false})
+                    if (activeChat['chatCard'] === contact && window.innerWidth > 640) return
+                    showChatDetails({ show: false, animate: false })
                     document.title = `FLO Messenger`
                     getRef('chat').classList.remove('hide-completely')
                     viewConversation(contact)
-                    if(activeChat['chatCard'])
+                    if (activeChat['chatCard'])
                         activeChat['chatCard'].classList.remove('active')
                     contact.classList.add('active')
                     activeChat['chatCard'] = contact
-                    if(activeChatPage.id === 'contacts'){
+                    if (activeChatPage.id === 'contacts') {
                         getRef('chat').classList.remove('hide-on-mobile')
                         getRef('contacts').classList.add('hide-on-mobile')
                         activeChatPage = getRef('chat')
@@ -2144,46 +2224,46 @@
                     }
                 }
             }
-            else if(e.target.closest('.contact-preview')){
+            else if (e.target.closest('.contact-preview')) {
                 removeSelectedContact(e.target.closest('.contact-preview').getAttribute('flo-id'))
             }
         })
         getRef('contacts_popup').addEventListener('click', e => {
             //detect click on contacts
-            if (e.target.closest(".selectable")){
+            if (e.target.closest(".selectable")) {
                 selectMemberToAdd(e.target.closest(".selectable"))
             }
         })
 
         // Function to show all contacts side drawer
         let contactsDrawerAnimation
-        function showContacts(options){
-            const {show = true, onlyValid = false} = options
+        function showContacts(options) {
+            const { show = true, onlyValid = false } = options
             let contacts = {}
-            if(show){
+            if (show) {
                 getRef('contacts_container').innerHTML = ''
                 // Show contacts which replied
-                if(onlyValid){
-                    for(contact in floGlobals.contacts){
-                        if(contact in floGlobals.pubKeys){
+                if (onlyValid) {
+                    for (contact in floGlobals.contacts) {
+                        if (contact in floGlobals.pubKeys) {
                             contacts[contact] = floGlobals.contacts[contact]
                         }
                     }
                 }
-                else{
+                else {
                     contacts = floGlobals.contacts
                 }
                 renderContactList(contacts)
                 getRef('all_contacts').classList.remove('hide-completely')
                 contactsDrawerAnimation = animateTo(getRef('all_contacts'), [
-                    {transform: 'translateY(2rem)'},
-                    {transform: 'translateY(0)'},
-                ],{
+                    { transform: 'translateY(2rem)' },
+                    { transform: 'translateY(0)' },
+                ], {
                     duration: 300,
                     easing: 'ease'
                 })
             }
-            else{
+            else {
                 isCreatingGroup = false
                 clearAllMembers()
                 contactsDrawerAnimation.reverse()
@@ -2209,23 +2289,23 @@
         getRef('selected_contacts_container').addEventListener('wheel', transformScroll);
 
         const selectedGroupMembers = new Set()
-        function selectContact(contact){
-            if(!selectedGroupMembers.has(clickedContact.floID)){
+        function selectContact(contact) {
+            if (!selectedGroupMembers.has(clickedContact.floID)) {
                 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.setAttribute('flo-id', clickedContact['floID']);
                 preview.append(clonedInitial, clonedName)
                 addCross(preview)
                 getRef('selected_contacts_container').append(preview)
-                preview.scrollIntoView({behavior: "smooth", inline: "end"});
-                
+                preview.scrollIntoView({ behavior: "smooth", inline: "end" });
+
                 preview.animate(
                     [
-                        {transform: 'scale(0)'},
-                        {transform: 'scale(1)'},
+                        { transform: 'scale(0)' },
+                        { transform: 'scale(1)' },
                     ],
                     {
                         duration: 300,
@@ -2234,28 +2314,28 @@
                     }
                 )
                 addTick(contact)
-            }      
-            else{
+            }
+            else {
                 removeSelectedContact(clickedContact.floID)
             }
-            if(selectedGroupMembers.size){
+            if (selectedGroupMembers.size) {
                 getRef('skip_members_button').textContent = 'Next'
             }
-            else{
+            else {
                 getRef('skip_members_button').textContent = 'Skip'
             }
         }
 
-        function removeSelectedContact(floID){
+        function removeSelectedContact(floID) {
             selectedGroupMembers.delete(floID)
             const relatedContact = getRef('contacts_container').querySelector(`[flo-id="${floID}"]`)
             const relatedPreview = getRef('selected_contacts_container').querySelector(`[flo-id="${floID}"]`)
-            if(relatedContact)
+            if (relatedContact)
                 removeTick(relatedContact)
             relatedPreview.animate(
                 [
-                    {transform: 'scale(1)'},
-                    {transform: 'scale(0)'},
+                    { transform: 'scale(1)' },
+                    { transform: 'scale(0)' },
                 ],
                 {
                     duration: 150,
@@ -2267,20 +2347,20 @@
             }
         }
 
-        function clearAllMembers(){
-            getRef('selected_contacts_container').innerHTML = ''        
+        function clearAllMembers() {
+            getRef('selected_contacts_container').innerHTML = ''
             selectedGroupMembers.clear()
         }
         let isCreatingGroup = false
-        function initGroupCreation(){
+        function initGroupCreation() {
             isCreatingGroup = true
-            showContacts({show: true, onlyValid: 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(){
+        function skipToGroupCreation() {
             const animOptions = {
                 duration: 300,
                 fill: 'forwards',
@@ -2288,8 +2368,8 @@
             }
             getRef('all_contacts').animate(
                 [
-                    {transform: 'translateX(0)'},
-                    {transform: 'translateX(-25%)'},
+                    { transform: 'translateX(0)' },
+                    { transform: 'translateX(-25%)' },
                 ],
                 animOptions
             ).onfinish = () => {
@@ -2298,13 +2378,13 @@
             getRef('group_creation_panel').classList.remove('hide-completely')
             getRef('group_creation_panel').animate(
                 [
-                    {transform: 'translateX(100%)'},
-                    {transform: 'translateX(0)'},
+                    { transform: 'translateX(100%)' },
+                    { transform: 'translateX(0)' },
                 ],
                 animOptions
             )
         }
-        function backToContacts(){
+        function backToContacts() {
             const animOptions = {
                 duration: 300,
                 fill: 'forwards',
@@ -2312,8 +2392,8 @@
             }
             getRef('group_creation_panel').animate(
                 [
-                    {transform: 'translateX(0)'},
-                    {transform: 'translateX(100%)'},
+                    { transform: 'translateX(0)' },
+                    { transform: 'translateX(100%)' },
                 ],
                 animOptions
             ).onfinish = () => {
@@ -2322,73 +2402,73 @@
             getRef('all_contacts').classList.remove('hide-completely')
             getRef('all_contacts').animate(
                 [
-                    {transform: 'translateX(-25%)'},
-                    {transform: 'translateX(0)'},
+                    { transform: 'translateX(-25%)' },
+                    { transform: 'translateX(0)' },
                 ],
                 animOptions
             )
         }
 
         document.getElementById('create_group_button').addEventListener('clicked', createGroup)
-        function createGroup(){
+        function createGroup() {
             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'
+                .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')
                     }
-                ).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')
-                }
-                notify('Group created', 'success')
-                if(selectedGroupMembers.size){
-                    messenger.addGroupMembers(groupInfo.groupID, [...selectedGroupMembers])
-                    .then(res => {
-                        clearAllMembers()
-                    })
-                    .catch(err => console.error(err))
-                }
-            })
-            .catch(err => console.error(err))
+                    notify('Group created', 'success')
+                    if (selectedGroupMembers.size) {
+                        messenger.addGroupMembers(groupInfo.groupID, [...selectedGroupMembers])
+                            .then(res => {
+                                clearAllMembers()
+                            })
+                            .catch(err => console.error(err))
+                    }
+                })
+                .catch(err => console.error(err))
         }
-        
+
         let isEmojiPickerOpen = false
-        function toggleEmoji(mode){
-            switch(mode){
+        function toggleEmoji(mode) {
+            switch (mode) {
                 case 'toggle':
                     isEmojiPickerOpen = true
                     getRef('emoji_toggle').classList.toggle('active')
                     getRef('emoji_picker').classList.toggle('hide-completely')
-                break;
+                    break;
                 case 'hide':
                     isEmojiPickerOpen = false
                     getRef('emoji_toggle').classList.remove('active')
                     getRef('emoji_picker').classList.add('hide-completely')
-                break;
+                    break;
             }
             getRef('scroll_to_bottom').setAttribute('style', `bottom: calc(${window.innerHeight - getRef('chat_footer').getBoundingClientRect().top}px - .5rem)`)
-            if(!chatScrollInfo.isScrolledUp)
+            if (!chatScrollInfo.isScrolledUp)
                 scrollToBottom()
         }
 
         getRef('emoji_picker').addEventListener('emoji-click', e => {
             const clickedEmoji = e.detail.unicode
             getRef('type_message').value += clickedEmoji
-            if(window.innerWidth > 640){
+            if (window.innerWidth > 640) {
                 setTimeout(() => {
                     getRef('type_message').focusIn()
                 }, 0);
@@ -2416,23 +2496,23 @@
             }
         }`
 
-        function copyToClipboard(element, message, parent = '.copy-row'){
+        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')
+            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')
-            })
+                .catch(error => {
+                    notify(error, 'error')
+                })
         }
 
         let isEnterSend = true
-        if(localStorage.getItem('isEnterSend') === null)
+        if (localStorage.getItem('isEnterSend') === null)
             localStorage.setItem('isEnterSend', 'true')
 
         if (localStorage.isEnterSend === 'true') {
@@ -2442,58 +2522,58 @@
             isEnterSend = false
             getRef('is_enter_send_toggle').checked = false;
         }
-        
-        getRef('is_enter_send_toggle').addEventListener('change', function(){
-            if(this.checked){
+
+        getRef('is_enter_send_toggle').addEventListener('change', function () {
+            if (this.checked) {
                 isEnterSend = true
                 localStorage.setItem("isEnterSend", 'true');
             }
-            else{
+            else {
                 isEnterSend = false
                 localStorage.setItem("isEnterSend", 'false');
             }
         })
 
-        function updateHeight(){
-            if(window.innerWidth < 640){
+        function updateHeight() {
+            if (window.innerWidth < 640) {
                 getRef('chat').style.height = window.innerHeight + 'px'
             }
-            else{
+            else {
                 getRef('chat').style.height = '100vh'
             }
         }
 
-		function goto(page){
-			if(page === 'chats'){
-				getRef('chat').classList.add('hide-on-mobile')
-				getRef('contacts').classList.remove('hide-on-mobile')
-				activeChatPage = getRef('contacts')
-			}
-			if(page === 'mails'){
-				getRef('mail').classList.add('hide-on-mobile')
-				getRef('mails').classList.remove('hide-on-mobile')
-				activeMailPage = getRef('mails')
-			}
-			getRef('main_navbar').classList.remove('hide-on-mobile')
-		}
+        function goto(page) {
+            if (page === 'chats') {
+                getRef('chat').classList.add('hide-on-mobile')
+                getRef('contacts').classList.remove('hide-on-mobile')
+                activeChatPage = getRef('contacts')
+            }
+            if (page === 'mails') {
+                getRef('mail').classList.add('hide-on-mobile')
+                getRef('mails').classList.remove('hide-on-mobile')
+                activeMailPage = getRef('mails')
+            }
+            getRef('main_navbar').classList.remove('hide-on-mobile')
+        }
 
         getRef("mails").addEventListener('click', function (e) {
-			if (e.target.closest(".mail-card")){
+            if (e.target.closest(".mail-card")) {
                 getRef('mail_page_button').setAttribute('data-notifications', '0')
                 getRef('mail').classList.remove('hide-completely')
                 e.target.closest(".mail-card").classList.remove('unread')
                 viewMail(e.target.closest(".mail-card").getAttribute("name"));
-                if(activeMail)
+                if (activeMail)
                     activeMail.classList.remove('active')
                 e.target.closest(".mail-card").classList.add('active')
                 activeMail = e.target.closest(".mail-card")
-				if(activeMailPage.id === 'mails'){
+                if (activeMailPage.id === 'mails') {
                     getRef('mail').classList.remove('hide-on-mobile')
-					getRef('mails').classList.add('hide-on-mobile')
+                    getRef('mails').classList.add('hide-on-mobile')
                     activeMailPage = getRef('mail')
                     getRef('main_navbar').classList.add('hide-on-mobile')
-				}
-			}
+                }
+            }
         })
 
         getRef("prev_mail").addEventListener('click', function (e) {
@@ -2503,22 +2583,22 @@
         getRef('send_message_button').addEventListener('click', sendMessage)
 
         getRef('type_message').addEventListener('input', e => {
-            if(getRef('type_message').value.trim() !== '')
+            if (getRef('type_message').value.trim() !== '')
                 getRef('send_message_button').classList.add('active')
-            else   
+            else
                 getRef('send_message_button').classList.remove('active')
         })
         getRef('type_message').addEventListener('keydown', e => {
-            if(getRef('type_message').value.trim() === '' && e.code === "Enter"){
+            if (getRef('type_message').value.trim() === '' && e.code === "Enter") {
                 e.preventDefault()
                 return
             }
-            else{
-                if(e.code === "Enter" && e.shiftKey){
+            else {
+                if (e.code === "Enter" && e.shiftKey) {
                     e.preventDefault()
                     getRef('type_message').value += '\r\n';
                 }
-                else if(!e.shiftKey && e.code === "Enter" && isEnterSend){
+                else if (!e.shiftKey && e.code === "Enter" && isEnterSend) {
                     e.preventDefault()
                     sendMessage()
                 }
@@ -2526,21 +2606,21 @@
         })
 
         getRef("clear_data").addEventListener('click', async function (e) {
-            if(await confirmation('Clear Data?',
-                `Are you sure you want to clear stored data?`, 'No', "Clear")){
-                    messenger.clearUserData().then(result => {
-                        notify("Successfully Cleared local data", 'success')
-                        setTimeout(onLoadStartUp, 2000)
-                    }).catch(error => notify(error, "error"))
-                }
+            if (await confirmation('Clear Data?',
+                `Are you sure you want to clear stored data?`, 'No', "Clear")) {
+                messenger.clearUserData().then(result => {
+                    notify("Successfully Cleared local data", 'success')
+                    setTimeout(onLoadStartUp, 2000)
+                }).catch(error => notify(error, "error"))
+            }
         });
-		
+
         getRef('add_contact_button').addEventListener("clicked", addContact)
 
         getRef('show_reply_popup').addEventListener("click", () => {
             showPopup('reply_mail_popup')
         })
-        
+
         getRef('reply_mail_button').addEventListener("clicked", replyMail)
 
         getRef("backup_data").addEventListener("click", function (e) {
@@ -2567,14 +2647,14 @@
             let file = this.files[0]
             notify(`Retrieving backup data! Please wait.`);
             if (!file) {
-               notify(`No files selected!`);
+                notify(`No files selected!`);
                 return;
             }
             messenger.parseBackup(file).then(async data => {
-                if(await confirmation('Restore Data?',
+                if (await confirmation('Restore Data?',
                     `Found: ${Object.keys(data.contacts).length} Contacts,\n ${Object.keys(data.messages).length} Messages, ${Object.keys(data.mails).length} Mails.`,
                     'Cancel', "Restore"
-                )){
+                )) {
                     notify(`Restoring data! Please wait.`);
                     messenger.restoreData(data).then(result => {
                         notify("Data restore completed successful! Initiating reload, Please wait", 'success')
@@ -2589,35 +2669,35 @@
         })
 
         function sendMessage() {
-            if(window.innerWidth > 640)
+            if (window.innerWidth > 640)
                 getRef('type_message').focusIn()
             let receiver = activeChat['floID']
             let container;
             let message = getRef('type_message').value.trim();
-			getRef('type_message').value = ''
-            if(message === '') return
+            getRef('type_message').value = ''
+            if (message === '') return
             let time = Date.now()
-            let msgObj = {message, time, unconfirmed: true}
-            if(activeChat.isGroup){
+            let msgObj = { message, time, unconfirmed: true }
+            if (activeChat.isGroup) {
                 msgObj['groupID'] = activeChat.floID
                 msgObj['sender'] = myFloID
             }
-            else{
+            else {
                 msgObj['floID'] = activeChat.floID
                 msgObj['category'] = 'sent'
             }
             getRef('messages_container').append(render.messageBubble(msgObj))
             const contact = getRef('chat_container').querySelector(`.chat[flo-id="${receiver}"], .group[flo-id="${receiver}"]`)
-            if(contact){
-                if(activeChat['chatCard'] !== getRef('chat_container').children[0]){
+            if (contact) {
+                if (activeChat['chatCard'] !== getRef('chat_container').children[0]) {
                     const cloneContact = contact.cloneNode(true)
                     contact.remove()
                     activeChat['chatCard'] = cloneContact
                     getRef('chat_container').prepend(cloneContact)
                     animateTo(getRef('chat_container').children[0], [
-                        {transform: 'translateY(1rem)'},
-                            {transform: 'none'},
-                        ],
+                        { transform: 'translateY(1rem)' },
+                        { transform: 'none' },
+                    ],
                         {
                             easing: 'ease',
                             duration: 300
@@ -2625,14 +2705,14 @@
                     )
                 }
             }
-            else{
+            else {
                 messenger.addChat(receiver)
-                getRef('chat_container').prepend(render.contactCard(receiver, {type: 'chat', prepend: true}))
+                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]
             }
             scrollToBottom()
-            if(activeChat.isGroup)
+            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}`
@@ -2658,16 +2738,16 @@
         function addContact() {
             let floID = getRef('add_contact_floID').value.trim();
             let name = getRef('add_contact_name').value.trim();
-            if(floID === myFloID){
-                notify( `you can't add your own FLO ID as contact`, 'error')
+            if (floID === myFloID) {
+                notify(`you can't add your own FLO ID as contact`, 'error')
                 return
             }
-            if(floGlobals.contacts.hasOwnProperty(floID)){
-                notify( `Contact already saved`, 'error')
+            if (floGlobals.contacts.hasOwnProperty(floID)) {
+                notify(`Contact already saved`, 'error')
                 return
             }
             messenger.storeContact(floID, name).then(result => {
-                getRef('contacts_container').append(render.contactCard(floID, {name, type: 'contact'}))
+                getRef('contacts_container').append(render.contactCard(floID, { name, type: 'contact' }))
                 hidePopup()
                 notify(`Added Contact: ${floID}`)
             }).catch(error => notify(error, "error"));
@@ -2675,9 +2755,9 @@
 
         function renderContactList(contactList = {}) {
             const frag = document.createDocumentFragment()
-            for (floID in contactList){
+            for (floID in contactList) {
                 let isSelected = selectedGroupMembers.has(floID)
-                frag.append(render.contactCard(floID, {type: 'contact', isSelected}))
+                frag.append(render.contactCard(floID, { type: 'contact', isSelected }))
             }
             getRef('contacts_container').append(frag)
         }
@@ -2685,14 +2765,14 @@
         async function renderChatList() {
             const frag = document.createDocumentFragment()
             getRef('chat_container').innerHTML = ''
-            for (floID of messenger.getChatOrder().mixed){
+            for (floID of messenger.getChatOrder().mixed) {
                 const markUnread = floGlobals.marked[floID]?.includes('unread')
                 let type
-                if(floGlobals.chats[floID])
+                if (floGlobals.chats[floID])
                     type = 'chat'
-                else if(floGlobals.groups[floID])
+                else if (floGlobals.groups[floID])
                     type = 'group'
-                frag.append(render.contactCard(floID, {type, markUnread}))
+                frag.append(render.contactCard(floID, { type, markUnread }))
             }
             getRef('chat_container').append(frag)
         }
@@ -2700,71 +2780,71 @@
         function renderMarked(data) {
             for (let d in data) {
                 let element = document.getElementsByName(d)[0]
-                if(element)
+                if (element)
                     data[d].forEach(mark => element.classList.add(mark))
             }
         }
 
-        function scrollToBottom(smooth = false){
-            if(activeChat.chatCard){
+        function scrollToBottom(smooth = false) {
+            if (activeChat.chatCard) {
                 messenger.removeMark(activeChat.floID, 'unread')
                 activeChat.chatCard.classList.remove('unread')
             }
             getRef('scroll_to_bottom').classList.remove('new-message')
             setTimeout(() => {
-                getRef('chat_middle').scrollTo({top: getRef('chat_middle').scrollHeight, behavior: smooth ? 'smooth': undefined})
+                getRef('chat_middle').scrollTo({ top: getRef('chat_middle').scrollHeight, behavior: smooth ? 'smooth' : undefined })
             }, smooth ? 300 : 0);
         }
 
         let startIndex = 0,
             endIndex = 0
         function renderMessages(data, options) {
-            let {markUnread = true, updateChatCard = false, reRender = false, lazyLoad = false} = options
+            let { markUnread = true, updateChatCard = false, reRender = false, lazyLoad = false } = options
             let messages
-            if(reRender){
+            if (reRender) {
                 activeChat['allMessages'] = Object.values(data)
                 startIndex = activeChat['allMessages'].length > 20 ? activeChat['allMessages'].length - 20 : 0
                 endIndex = activeChat['allMessages'].length
                 messages = activeChat['allMessages']
                 renderedDates.clear()
             }
-            else if(lazyLoad){
+            else if (lazyLoad) {
                 messages = activeChat['allMessages']
                 endIndex = startIndex
                 startIndex = endIndex > 20 ? endIndex - 20 : 0
                 markUnread = false
             }
-            else{
+            else {
                 messages = Object.values(data)
-                if(messages.length){
+                if (messages.length) {
                     startIndex = 0
-                    endIndex = messages.length  
+                    endIndex = messages.length
                 }
             }
 
-            if(messages && messages.length){
+            if (messages && messages.length) {
                 for (let i = startIndex; i < endIndex; i++) {
-                    let {floID, groupID, sender, message, time, category} = messages[i]
+                    let { floID, groupID, sender, message, time, category } = messages[i]
                     //Stops message from rendering in wrong chat window
-                    if(activeChat['floID'] && ( activeChat['floID'] === floID || activeChat['floID'] === groupID)){
+                    if (activeChat['floID'] && (activeChat['floID'] === floID || activeChat['floID'] === groupID)) {
                         // Stops message rendering if message is sent from original user causing duplication
-                        if(updateChatCard && activeChat.isGroup && message && sender === myFloID){
+                        if (updateChatCard && activeChat.isGroup && message && sender === myFloID) {
                             messenger.removeMark(groupID, 'unread')
                             return
-                        } 
-                        frag.append(render.messageBubble({...messages[i], updateChatCard}))
+                        }
+                        frag.append(render.messageBubble({ ...messages[i], updateChatCard }))
                     }
                     const contact = getRef('chat_container').querySelector(`.contact[flo-id='${floID || groupID}']`)
-                    if (markUnread && contact){
+                    if (markUnread && contact) {
                         contact.classList.add("unread");
-                        if(contact !== getRef('chat_container').children[0]){
+                        if (contact !== getRef('chat_container').children[0]) {
                             const cloneContact = contact.cloneNode(true)
                             contact.remove()
                             getRef('chat_container').prepend(cloneContact)
                             animateTo(getRef('chat_container').children[0], [
-                                    {transform: 'translateY(1rem)'},
-                                    {transform: 'none'},
-                                ],
+                                { transform: 'translateY(1rem)' },
+                                { transform: 'none' },
+                            ],
                                 {
                                     easing: 'ease',
                                     duration: 300
@@ -2772,30 +2852,30 @@
                             )
                         }
                     }
-                    if(updateChatCard){
+                    if (updateChatCard) {
                         let chatCard
-                        if(!contact){
-                            getRef('chat_container').prepend(render.contactCard(floID, {type: 'chat', markUnread: true}))
+                        if (!contact) {
+                            getRef('chat_container').prepend(render.contactCard(floID, { type: 'chat', markUnread: true }))
                             chatCard = getRef('chat_container').firstElementChild
                         }
-                        else{
+                        else {
                             chatCard = contact
                             let finalMessage
-                            if(floGlobals.contacts[sender])
+                            if (floGlobals.contacts[sender])
                                 finalMessage = `${floGlobals.contacts[sender]}: ${message}`
-                            else if(sender === myFloID)
+                            else if (sender === myFloID)
                                 finalMessage = `You: ${message}`
-                            else 
+                            else
                                 finalMessage = message
                             chatCard.querySelector('.last-message').textContent = finalMessage
                             chatCard.querySelector('.time').textContent = getFormatedTime(time, true)
                         }
 
-                        if(activeChat.floID === (floID || groupID)){
-                            if(chatScrollInfo.isScrolledUp)
+                        if (activeChat.floID === (floID || groupID)) {
+                            if (chatScrollInfo.isScrolledUp)
                                 getRef('scroll_to_bottom').classList.add('new-message')
-                            else{
-                                if(document.hasFocus()){
+                            else {
+                                if (document.hasFocus()) {
                                     messenger.removeMark((floID || groupID), 'unread')
                                     setTimeout(() => {
                                         document.title = 'FLO Messenger'
@@ -2804,31 +2884,31 @@
                                 }
                             }
                         }
-                        if(!document.hasFocus() && navigator.onLine) {
+                        if (!document.hasFocus() && navigator.onLine) {
                             getRef('notification_sound').currentTime = 0;
                             getRef('notification_sound').play();
                         }
                     }
-                } 
+                }
             }
-            
-            if(!lazyLoad && !reRender){
+
+            if (!lazyLoad && !reRender) {
                 endIndex = messages.length
                 getRef('messages_container').append(frag)
-                if(!chatScrollInfo['isScrolledUp']){
+                if (!chatScrollInfo['isScrolledUp']) {
                     setTimeout(() => {
                         scrollToBottom(true)
                     }, 100);
                 }
             }
-            if(reRender || lazyLoad){
+            if (reRender || lazyLoad) {
                 currentDate = null
                 lastSender = null
                 chatScrollInfo['scrollTop'] = getRef('chat_middle').scrollTop
                 chatScrollInfo['scrollHeight'] = getRef('chat_middle').scrollHeight
                 getRef('messages_container').prepend(frag)
             }
-            if(reRender){
+            if (reRender) {
                 scrollToBottom()
             }
         }
@@ -2836,45 +2916,45 @@
         //checks for added elements in chat
         const chatMutationObserver = new MutationObserver(
             (mutations, observer) => {
-                for(const mutation of mutations) {
+                for (const mutation of mutations) {
                     if (mutation.type === 'childList' && mutation.addedNodes.length && getRef('messages_container').firstElementChild) {
                         chatMessageObserver.observe(getRef('messages_container').firstElementChild)
                         chatScrollInfo['scrollTop'] += (getRef('chat_middle').scrollHeight - chatScrollInfo['scrollHeight'])
                         chatScrollInfo['scrollHeight'] = getRef('chat_middle').scrollHeight
-                        getRef('chat_middle').scrollTo({top: chatScrollInfo['scrollTop']})
+                        getRef('chat_middle').scrollTo({ top: chatScrollInfo['scrollTop'] })
                     }
                 }
-            }            
+            }
         )
 
         //Lazy loading for chat messages
         const chatMessageObserver = new IntersectionObserver(
             (entries, observer) => {
-                if(entries[0].isIntersecting){
-                    renderMessages('', {lazyLoad: true})
+                if (entries[0].isIntersecting) {
+                    renderMessages('', { lazyLoad: true })
                     observer.disconnect()
                 }
             }
         )
-        
+
         async function viewConversation(contact) {
             getRef('messages_container').innerHTML = ''
             let floID = clickedContact['floID'],
                 name = contact.getAttribute('name'),
                 textColor = contact.getAttribute('text-color'),
                 backgroundColor = contact.getAttribute('background-color')
-            
+
             activeChat['floID'] = floID
             activeChat['isGroup'] = floGlobals.groups[floID] ? true : false
             getRef("chat_dp").setAttribute('style', `color: ${textColor}; background-color: ${backgroundColor};`)
             getRef("receiver_name").textContent = getContactName(floID);
-            if(activeChat.isGroup){
+            if (activeChat.isGroup) {
                 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-completely')
             }
-            else{
+            else {
                 getRef("receiver_initial").textContent = getContactName(floID).charAt(0);
                 // getRef('video_call_button').classList.remove('hide-completely')    
             }
@@ -2883,9 +2963,9 @@
                 getRef("warn_no_encryption").classList.add("hide-completely");
             else
                 getRef("warn_no_encryption").classList.remove("hide-completely");
-            renderMessages(await messenger.getChat(floID),{markUnread: false, reRender: true})
+            renderMessages(await messenger.getChat(floID), { markUnread: false, reRender: true })
             messenger.removeMark(floID, "unread");
-            if(this.scrollHeight <= this.clientHeight){
+            if (this.scrollHeight <= this.clientHeight) {
                 chatScrollInfo['isScrolledUp'] = false
                 getRef('scroll_to_bottom').classList.remove('no-transformations')
             }
@@ -2896,9 +2976,9 @@
             const sentMailFrag = document.createDocumentFragment()
             for (let m in mails) {
                 let { from, to, prev, ref, subject, time, content } = mails[m]
-                if(from === myFloID)
+                if (from === myFloID)
                     sentMailFrag.prepend(render.mailCard(to, ref, subject, time, content, markUnread))
-                else if(to.includes(myFloID))
+                else if (to.includes(myFloID))
                     inboxMailFrag.prepend(render.mailCard(from, ref, subject, time, content, markUnread))
             }
             getRef('inbox_mail_container').prepend(inboxMailFrag)
@@ -2907,7 +2987,7 @@
 
         function viewMail(mailRef, newView = true) {
             //stop rerendering if same mail is already open
-            if(mailRef === (activeMail ? activeMail.getAttribute('name') : '')) return
+            if (mailRef === (activeMail ? activeMail.getAttribute('name') : '')) return
             //clear the container
             if (newView)
                 clearElement(getRef("mail_container"))
@@ -2929,9 +3009,9 @@
                 }
                 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('clicked', sendMail)
 
         function sendMail() {
             let to = getRef('send_mail_to').value.split(",");
@@ -2958,7 +3038,7 @@
 
         function replyMail() {
             let recipient = getRef('reply_mail_popup').dataset.to;
-            if(recipient.includes(','))
+            if (recipient.includes(','))
                 recipient = recipient.split(',')
             let subject = getRef('subject_of_reply_mail').value;
             let content = getRef('reply_mail_content').value;
@@ -2975,10 +3055,10 @@
             getRef(`${e.detail.value}_mail_container`).classList.remove('hide-completely')
         })
 
-        const   allPanels = document.querySelectorAll('.panel'),
-                allSidebarItems = document.querySelectorAll('.sidebar-item')
+        const allPanels = document.querySelectorAll('.panel'),
+            allSidebarItems = document.querySelectorAll('.sidebar-item')
+
 
-        
         const flyOutLeft = [
             {
                 transform: 'translateX(0)',
@@ -3030,7 +3110,7 @@
 
         const windowSizeObserver = new ResizeObserver(entries => {
             updateHeight()
-            if(entries[0].borderBoxSize[0].inlineSize > 640){
+            if (entries[0].borderBoxSize[0].inlineSize > 640) {
                 getRef('settings_sidebar').style = ''
                 getRef('settings_panel').style = ''
             }
@@ -3038,8 +3118,8 @@
 
         windowSizeObserver.observe(document.body)
 
-        function animateTo(element, animation, options){
-            const anime = element.animate(animation, {...options, fill: 'both'})
+        function animateTo(element, animation, options) {
+            const anime = element.animate(animation, { ...options, fill: 'both' })
             anime.addEventListener('finish', () => {
                 anime.commitStyles()
                 anime.cancel()
@@ -3047,9 +3127,9 @@
             return anime
         }
 
-        function showPanel(item, panel){
+        function showPanel(item, panel) {
             getRef('settings_title').textContent = item.textContent
-            if(window.innerWidth < 720){
+            if (window.innerWidth < 720) {
                 animateTo(getRef('settings_sidebar'), flyOutLeft, animOptions).onfinish = () => {
                     animateTo(getRef('settings_panel'), flyInLeft, animOptions)
                     getRef('settings_sidebar').style = ''
@@ -3057,15 +3137,15 @@
                     getRef('settings_panel').classList.remove('hide-on-mobile')
                 }
             }
-            else{
+            else {
                 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')
         }
-        
-        function hidePanel(){
+
+        function hidePanel() {
             animateTo(getRef('settings_panel'), flyOutRight, animOptions).onfinish = () => {
                 getRef('settings_title').textContent = ''
                 getRef('settings_panel').style = ''
@@ -3075,22 +3155,22 @@
             }
         }
 
-        function toggleDrawer(){
+        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())
             }
-            else if(e.target.closest('#group_description')){
+            else if (e.target.closest('#group_description')) {
                 messenger.changeGroupDescription(activeChat.floID, e.detail.value.trim())
-                .then(res => {
-                    notify('Changed group description', 'success')
-                })
-                .catch(error => notify(error, "error"));
+                    .then(res => {
+                        notify('Changed group description', 'success')
+                    })
+                    .catch(error => notify(error, "error"));
             }
             else if (e.target.closest('#chat_name')) {
                 changeContactName(e.detail.value.trim(), true)
@@ -3100,7 +3180,7 @@
         async function changeContactName(name, isChat = false) {
             let isGroup,
                 floID
-            if(isChat){
+            if (isChat) {
                 activeChat['name'] = name
                 if (activeChat['name'] === '')
                     activeChat['name'] = 'Unknown'
@@ -3108,68 +3188,68 @@
                 floID = activeChat.floID
                 name = activeChat['name']
             }
-            else{
+            else {
                 clickedContact['name'] = name
                 if (clickedContact['name'] === '')
-                clickedContact['name'] = 'Unknown'
+                    clickedContact['name'] = 'Unknown'
                 isGroup = clickedContact.isGroup
                 floID = clickedContact.floID
                 name = clickedContact['name']
             }
-            if(isGroup){
+            if (isGroup) {
                 messenger.changeGroupName(floID, name).then(res => {
-                    updatechatCards({name, floID, isGroup: true})
+                    updatechatCards({ name, floID, isGroup: true })
                     notify('Changed group name', 'success')
                 })
-                .catch(error => notify(error, "error"));
+                    .catch(error => notify(error, "error"));
             }
-            else{
+            else {
                 messenger.storeContact(floID, name).then(result => {
-                    updatechatCards({name, floID, isGroup: false})
+                    updatechatCards({ name, floID, isGroup: false })
                     notify('Changed contact name', 'success')
                 })
-                .catch(error => notify(error, "error"));
+                    .catch(error => notify(error, "error"));
             }
         }
 
-        function updatechatCards({name, floID, isGroup = false}){
-            if(activeChat.floID && activeChat.floID === clickedContact.floID){
+        function updatechatCards({ name, floID, isGroup = false }) {
+            if (activeChat.floID && activeChat.floID === clickedContact.floID) {
                 getRef('receiver_name').textContent = name
                 getRef('chat_name').value = name
             }
-            if(!isGroup){
+            if (!isGroup) {
                 getRef('contact_initial').textContent = name.charAt(0)
-                if(activeChat.floID && activeChat.floID === clickedContact.floID){
+                if (activeChat.floID && activeChat.floID === clickedContact.floID) {
                     getRef('receiver_initial').textContent = name.charAt(0)
                     getRef('chat_dp').textContent = name.charAt(0)
                 }
             }
             document.querySelectorAll(`.contact[flo-id="${floID}"]`).forEach(contact => {
-                if(!isGroup){
-                    contact.children[0].textContent = name.charAt(0) 
+                if (!isGroup) {
+                    contact.children[0].textContent = name.charAt(0)
                     contact.children[1].textContent = name
                 }
-                contact.setAttribute('name', name) 
+                contact.setAttribute('name', name)
             })
         }
 
-        function toggleSearch(target){
+        function toggleSearch(target) {
             getRef(target).classList.toggle('expand')
-            if(getRef(target).classList.contains('expand'))
+            if (getRef(target).classList.contains('expand'))
                 getRef(target).children[1].focusIn()
             else
-            getRef(target).querySelector('sm-input').value = ''
+                getRef(target).querySelector('sm-input').value = ''
         }
 
         let isChatDetailsOpen = false
-        function showChatDetails({show, animate= true}){
-            if(show){
-                if(isChatDetailsOpen) return
+        function showChatDetails({ show, animate = true }) {
+            if (show) {
+                if (isChatDetailsOpen) return
                 const floID = activeChat.floID
                 isChatDetailsOpen = true
                 getRef("chat_name").value = getContactName(floID);
                 getRef("chat_flo_id").textContent = floID
-                if(activeChat.isGroup){
+                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>
                         `
@@ -3179,7 +3259,7 @@
                     getRef('group_members_list').innerHTML = ''
                     floGlobals.groups[floID].members.forEach(member => {
                         let isAdmin = floGlobals.groups[floID].admin === member ? true : false
-                        frag.append(render.contactCard(member, {type: 'contact', contactOnly: true, isAdmin}))
+                        frag.append(render.contactCard(member, { type: 'contact', contactOnly: true, isAdmin }))
                     })
                     getRef('group_members_list').append(frag)
 
@@ -3187,24 +3267,24 @@
                     getRef("group_members_card").classList.remove('hide-completely')
 
                     getRef('delete_chat_button').classList.add('hide-completely')
-                    
+
                     getRef("group_description").value = floGlobals.groups[floID].description === '' ? 'Add group description' : floGlobals.groups[floID].description;
 
-                    if(floGlobals.groups[activeChat['floID']].admin === myFloID){
+                    if (floGlobals.groups[activeChat['floID']].admin === myFloID) {
                         getRef("chat_name").disabled = false
                         getRef('group_description').disabled = false
                         getRef('edit_group_button').classList.remove('hide-completely')
                     }
-                    else{
+                    else {
                         getRef("chat_name").disabled = true
                         getRef('group_description').disabled = true
                         getRef('edit_group_button').classList.add('hide-completely')
                     }
                 }
-                else{
+                else {
                     getRef("chat_dp").textContent = getContactName(floID).charAt(0);
                     getRef("last_interaction_time").textContent = ``;
-                    
+
                     getRef("chat_type").textContent = `FLO ID`;
 
                     getRef("group_description_card").classList.add('hide-completely')
@@ -3214,54 +3294,54 @@
                 }
 
                 getRef('chat').classList.add('expand-side-panel')
-                getRef('chat_left').classList.add('hide-on-medium')    
+                getRef('chat_left').classList.add('hide-on-medium')
                 getRef('chat_details_panel').classList.remove('hide-completely')
                 animateTo(getRef('chat_details_panel'), [
-                    {transform: 'translateX(100%)'},
-                    {transform: 'translateX(0)'},
+                    { transform: 'translateX(100%)' },
+                    { transform: 'translateX(0)' },
                 ],
-                {
-                    duration: animate ? 300 : 0,
-                    easing: 'ease'
-                })
+                    {
+                        duration: animate ? 300 : 0,
+                        easing: 'ease'
+                    })
             }
-            else if(isChatDetailsOpen){
+            else if (isChatDetailsOpen) {
                 isChatDetailsOpen = false
                 animateTo(getRef('chat_details_panel'), [
-                    {transform: 'translateX(0)'},
-                    {transform: 'translateX(100%)'},
+                    { transform: 'translateX(0)' },
+                    { transform: 'translateX(100%)' },
                 ],
-                {
-                    duration: animate ? 150 : 0,
-                    easing: 'ease'
-                }).onfinish = () => {
-                    getRef('chat').classList.remove('expand-side-panel')
-                    getRef('chat_left').classList.remove('hide-on-medium')    
-                    getRef('chat_details_panel').classList.add('hide-completely')    
-                }
+                    {
+                        duration: animate ? 150 : 0,
+                        easing: 'ease'
+                    }).onfinish = () => {
+                        getRef('chat').classList.remove('expand-side-panel')
+                        getRef('chat_left').classList.remove('hide-on-medium')
+                        getRef('chat_details_panel').classList.add('hide-completely')
+                    }
                 editGroupMembers()
             }
         }
 
-        function addAsContact(){
+        function addAsContact() {
             showPopup('add_contact_popup')
             getRef('add_contact_floID').value = clickedContact.floID
         }
 
-        function markAsUnread(){
+        function markAsUnread() {
             clickedContact.chatCard.classList.add('unread')
             messenger.addMark(clickedContact.floID, 'unread')
             hidePopup()
         }
-        
-        function markAsRead(){
+
+        function markAsRead() {
             clickedContact.chatCard.classList.remove('unread')
             messenger.removeMark(clickedContact.floID, 'unread')
             hidePopup()
         }
 
-        async function clearChat(){
-            if(await confirmation('Clear chat?', `Are you sure to clear this chat?`, 'No', "Yes")){
+        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()
@@ -3270,8 +3350,8 @@
             }
         }
 
-        async function deleteChat(){
-            if(await confirmation('Delete chat?', `Are you sure to delete this chat?`, 'No', "Yes")){
+        async function deleteChat() {
+            if (await confirmation('Delete chat?', `Are you sure to delete this chat?`, 'No', "Yes")) {
                 messenger.rmChat(clickedContact.floID).then(result => {
                     clickedContact.chatCard.remove()
                     clickedContact.chatCard = ''
@@ -3281,19 +3361,19 @@
                 })
             }
         }
-        
+
         let isGroupEditable = false
         let isRemovingMember = false
-        function editGroupMembers(){
-            if(!isChatDetailsOpen && !isGroupEditable) return
-            if(isGroupEditable){
+        function editGroupMembers() {
+            if (!isChatDetailsOpen && !isGroupEditable) return
+            if (isGroupEditable) {
                 getRef('group_members_list').querySelectorAll('.contact').forEach(contact => {
-                    if(contact.classList.contains('selectable')){
+                    if (contact.classList.contains('selectable')) {
                         contact.classList.remove('selectable')
-                        if(membersToRemove.has(contact.getAttribute('flo-id')))
+                        if (membersToRemove.has(contact.getAttribute('flo-id')))
                             removeTick(contact)
-                        }
-                    else if(contact.classList.contains('admin')){
+                    }
+                    else if (contact.classList.contains('admin')) {
                         contact.classList.remove('hide-completely')
                     }
                 })
@@ -3304,12 +3384,12 @@
                 isGroupEditable = false
                 isRemovingMember = false
             }
-            else{
+            else {
                 getRef('group_members_list').querySelectorAll('.contact').forEach(contact => {
-                    if(contact.classList.contains('admin')){
+                    if (contact.classList.contains('admin')) {
                         contact.classList.add('hide-completely')
                     }
-                    else{
+                    else {
                         contact.classList.add('selectable')
                     }
                 })
@@ -3324,22 +3404,22 @@
         }
 
         const membersToRemove = new Set()
-        function selectMemberToRemove(contact){
+        function selectMemberToRemove(contact) {
             const floID = contact.getAttribute('flo-id')
-            if(membersToRemove.has(floID)){
+            if (membersToRemove.has(floID)) {
                 membersToRemove.delete(floID)
                 removeTick(contact)
             }
-            else{
+            else {
                 membersToRemove.add(floID)
                 addTick(contact)
             }
-            if(membersToRemove.size){
+            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')
             }
-            else{
+            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')
@@ -3347,26 +3427,26 @@
         }
 
         const membersToAdd = new Set()
-        function selectMemberToAdd(contact){
+        function selectMemberToAdd(contact) {
             const floID = contact.getAttribute('flo-id')
-            if(membersToAdd.has(floID)){
+            if (membersToAdd.has(floID)) {
                 membersToAdd.delete(floID)
                 removeTick(contact)
             }
-            else{
+            else {
                 membersToAdd.add(floID)
                 addTick(contact)
             }
-            if(membersToAdd.size){
+            if (membersToAdd.size) {
                 getRef('add_members_button').disabled = false
             }
-            else{
+            else {
                 getRef('add_members_button').disabled = true
             }
         }
-        
-        function addTick(contact, options = {}){
-            const {animate = true} = options
+
+        function addTick(contact, options = {}) {
+            const { animate = true } = options
             contact.classList.add('selected')
             const initial = contact.querySelector('.initial')
             const tick = document.createElement('div');
@@ -3377,11 +3457,11 @@
             `
             tick.classList.add('tick')
             initial.append(tick)
-            if(animate)
+            if (animate)
                 tick.animate(
                     [
-                        {transform: 'scale(0)'},
-                        {transform: 'scale(1)'},
+                        { transform: 'scale(0)' },
+                        { transform: 'scale(1)' },
                     ],
                     {
                         duration: 300,
@@ -3390,22 +3470,22 @@
                     }
                 )
         }
-        function removeTick(contact){
+        function removeTick(contact) {
             contact.classList.remove('selected')
             const tick = contact.querySelector('.tick')
             tick.animate([
-                {transform: 'scale(1)'},
-                {transform: 'scale(0)'},
+                { transform: 'scale(1)' },
+                { transform: 'scale(0)' },
             ],
-            {
-                duration: 150,
-                fill: 'forwards',
-            }
+                {
+                    duration: 150,
+                    fill: 'forwards',
+                }
             ).onfinish = () => {
                 tick.remove()
             }
         }
-        function addCross(contact){
+        function addCross(contact) {
             const cross = document.createElement('div');
             cross.innerHTML = `
             <svg class="icon" viewBox="0 0 64 64">
@@ -3420,94 +3500,94 @@
 
         document.getElementById('add_members_button').addEventListener('clicked', addGroupMembers)
 
-        function addGroupMembers(){
+        function addGroupMembers() {
             messenger.addGroupMembers(activeChat.floID, [...membersToAdd])
-            .then(res => {
-                membersToAdd.forEach(member => {
-                    frag.append(render.contactCard(member, {type: 'contact', contactOnly: true}))
+                .then(res => {
+                    membersToAdd.forEach(member => {
+                        frag.append(render.contactCard(member, { type: 'contact', contactOnly: true }))
+                    })
+                    getRef('group_members_list').append(frag)
+                    hidePopup()
                 })
-                getRef('group_members_list').append(frag)
-                hidePopup()
-            })
-            .catch(err =>  console.log(err))
+                .catch(err => console.log(err))
         }
 
-        function removeGroupMembers(){
+        function removeGroupMembers() {
             messenger.rmGroupMembers(activeChat.floID, [...membersToRemove])
-            .then(res => {
-                getRef('group_members_list').querySelectorAll('.selected').forEach(contact => {
-                    contact.remove()
+                .then(res => {
+                    getRef('group_members_list').querySelectorAll('.selected').forEach(contact => {
+                        contact.remove()
+                    })
+                    editGroupMembers()
                 })
-                editGroupMembers()
-            })
-            .catch(err =>  console.log(err))
+                .catch(err => console.log(err))
         }
 
-        function showPage(targetPage, subpage){
-            if(subpage){
+        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){
+                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')){
+                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')){
+                if (getRef('main_navbar').classList.contains('no-transformations')) {
                     getRef('main_navbar').classList.remove('no-transformations')
                     getRef('navbar_backdrop').classList.add('hide')
                 }
             }
-            else{
+            else {
                 document.querySelectorAll('.page').forEach(page => page.classList.add('hide-completely'))
-                switch(targetPage){
+                switch (targetPage) {
                     case 'sign_in_page':
-                    break;
+                        break;
                 }
             }
             getRef(targetPage).classList.remove('hide-completely')
         }
 
-        function initOnBoarding(){
+        function initOnBoarding() {
             console.log('called')
             showFrame(1)
         }
 
-        function showFrame(frameNo){
-            if(getRef('on_boarding_page').classList.contains('hide-completely')){
+        function showFrame(frameNo) {
+            if (getRef('on_boarding_page').classList.contains('hide-completely')) {
                 showPage('on_boarding_page')
             }
             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]){
+            switch (frames[frameNo - 1]) {
                 case 'frame_2':
                     getRef('first_pin').focusIn()
-                break;
+                    break;
             }
         }
 
-        async function setPin(){
-            try{
+        async function setPin() {
+            try {
                 const firstPin = getRef('first_pin').value
                 const confirmPin = getRef('confirm_pin').value
-                if(firstPin === confirmPin){
+                if (firstPin === confirmPin) {
                     let value = getRef('confirm_pin').value
                     getRef('pin_error').classList.add('hide-completely')
-                    if(isPinSet){
+                    if (isPinSet) {
                         floDapps.securePrivKey(value).then(result => {
                             notify("Pin changed", 'success');
                             getRef('first_pin').clear()
                             getRef('confirm_pin').clear()
                         })
                     }
-                    else{
+                    else {
                         floDapps.securePrivKey(value).then(result => {
                             getRef('first_pin').clear()
                             getRef('confirm_pin').clear()
@@ -3516,7 +3596,7 @@
                         })
                     }
                 }
-                else{
+                else {
                     getRef('pin_error').classList.remove('hide-completely')
                     getRef('pin_error').animate(
                         [
@@ -3546,7 +3626,7 @@
                     )
                 }
             }
-            catch(error){
+            catch (error) {
                 notify("Setting pin Failed", "error", error)
             }
         }
@@ -3557,20 +3637,20 @@
             document.body.style.setProperty('--accent-color', color);
         })
 
-        document.getElementById('select_bg_image').addEventListener('change', function(e){
+        document.getElementById('select_bg_image').addEventListener('change', function (e) {
             console
             compactIDB.writeData('userSettings', this.files[0], 'bgImage')
-            .then(async res => {
-                setBgImage()
-                notify('Background applied', 'success')
-            })     
-            .catch(err => console.error(err))       
+                .then(async res => {
+                    setBgImage()
+                    notify('Background applied', 'success')
+                })
+                .catch(err => console.error(err))
         })
-        
-        async function setBgImage(){
-            try{
+
+        async function setBgImage() {
+            try {
                 const image = await compactIDB.readData('userSettings', 'bgImage')
-                if(image){
+                if (image) {
                     const url = URL.createObjectURL(image)
                     getRef('chat').style.background = `linear-gradient(rgba(var(--foreground-color), 0.6), rgba(var(--foreground-color), 0.6)), url(${url}) center no-repeat`
                     getRef('mail').style.background = `linear-gradient(rgba(var(--foreground-color), 0.6), rgba(var(--foreground-color), 0.6)), url(${url}) center no-repeat`
@@ -3588,12 +3668,12 @@
                     getRef('select_bg_button').textContent = 'Change background'
                 }
             }
-            catch(err){
+            catch (err) {
                 console.error(err)
             }
         }
-        
-        function setDefaultBg(){
+
+        function setDefaultBg() {
             getRef('chat').style.background = ``
             getRef('mail').style.background = ``
             getRef('chat_preview').style.background = ``
diff --git a/scripts/components.js b/scripts/components.js
index 086ad03..88f5822 100644
--- a/scripts/components.js
+++ b/scripts/components.js
@@ -717,71 +717,6 @@ customElements.define('sm-textarea',
         }
     })
 
-// 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))
-    }
-})
-
 //chcekbox
 
 const smCheckbox = document.createElement('template')
@@ -3356,6 +3291,71 @@ customElements.define('sm-tab-header', class extends HTMLElement {
     }
 })
 
+// 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')