diff --git a/css/main.css b/css/main.css
index 5a2c21e..b505a83 100644
--- a/css/main.css
+++ b/css/main.css
@@ -577,15 +577,16 @@ sm-button[variant=primary] .icon {
   padding: 0.8rem 1.5rem;
   align-items: center;
   flex-shrink: 0;
-}
-.contact.chat {
-  grid-template-columns: auto 1fr auto;
-  grid-template-areas: "dp . menu" "dp . .";
+  overflow: hidden;
 }
 .contact:not(.chat) {
   grid-template-columns: auto 1fr;
   grid-template-areas: "dp .";
 }
+.contact.chat, .contact.group {
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas: "dp . time" "dp . menu";
+}
 .contact .initial {
   grid-area: dp;
 }
@@ -593,9 +594,11 @@ sm-button[variant=primary] .icon {
   font-size: 1em;
   font-weight: 500;
   color: rgba(var(--text-color), 0.8);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 .contact .last-message {
-  grid-column: 2/4;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -603,11 +606,16 @@ sm-button[variant=primary] .icon {
   font-size: 0.9em;
   color: rgba(var(--text-color), 0.9);
 }
+.contact .menu {
+  grid-area: menu;
+  justify-self: flex-end;
+  padding: 0.2rem;
+  fill: rgba(var(--text-color), 1);
+}
 .contact .time {
   font-weight: 400;
   opacity: 0.8;
-  grid-area: menu;
-  align-self: flex-start;
+  grid-area: time;
 }
 
 #contact_details_popup > .flex:first-of-type {
@@ -644,6 +652,7 @@ sm-button[variant=primary] .icon {
   border-radius: 0.5rem;
   max-width: 30ch;
   padding: 0.6rem 1.2rem;
+  overflow-wrap: break-word;
 }
 #contact_details_popup #contact_name:focus {
   outline: none;
@@ -666,8 +675,7 @@ sm-button[variant=primary] .icon {
   color: #111;
 }
 
-.mail-card.unread::before,
-.contact.unread .initial::before {
+.mail-card.unread::before {
   content: "";
   position: absolute;
   padding: 0.4rem;
@@ -677,6 +685,23 @@ sm-button[variant=primary] .icon {
   background: var(--accent-color);
 }
 
+.contact .initial::after {
+  content: "";
+  position: absolute;
+  height: calc(100% + 0.8rem);
+  width: calc(100% + 0.8rem);
+  border: solid var(--accent-color) 0.2rem;
+  border-radius: 100%;
+  transform: scale(0.8);
+  opacity: 0;
+  transition: transform 0.3s, opacity 0.3s;
+}
+
+.contact.unread .initial::after {
+  transform: scale(1);
+  opacity: 1;
+}
+
 .mail-card.unread .time,
 .contact.unread .time {
   color: var(--accent-color);
@@ -815,7 +840,7 @@ sm-button[variant=primary] .icon {
   justify-content: flex-start;
   flex-direction: row;
   flex: none;
-  padding: 1rem 1.2rem;
+  padding: 1rem;
 }
 #main_navbar .navbar-item .icon {
   height: 1.2rem;
@@ -887,7 +912,7 @@ sm-button[variant=primary] .icon {
   background: rgba(var(--foreground-color), 1);
 }
 #contacts #all_contacts .header {
-  padding-bottom: 1rem;
+  padding-top: 0.7rem;
 }
 #contacts .option {
   padding: 1rem 1.5rem;
@@ -936,9 +961,10 @@ sm-button[variant=primary] .icon {
   overflow-y: hidden;
 }
 #contacts .header, #mails .header, #settings_page .header {
-  padding: 1rem 1.5rem 0 1.5rem;
+  padding: 1rem 1.5rem 1rem 1.5rem;
   position: relative;
   gap: 0.5rem;
+  min-height: 4rem;
 }
 #contacts .header sm-tab::part(tab), #mails .header sm-tab::part(tab), #settings_page .header sm-tab::part(tab) {
   padding: 0.8rem 1rem;
@@ -948,28 +974,16 @@ sm-button[variant=primary] .icon {
   width: 100%;
   padding: 0.7rem 1.5rem;
   background: rgba(var(--foreground-color), 1);
+  transform: scale(0.9);
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.3s;
+  transition: opacity 0.3s, transform 0.3s;
 }
 #contacts .header .expanding-search.expand, #mails .header .expanding-search.expand, #settings_page .header .expanding-search.expand {
   transform: none;
   opacity: 1;
   pointer-events: all;
 }
-#contacts .header .expanding-search.expand sm-input,
-#contacts .header .expanding-search.expand .back, #mails .header .expanding-search.expand sm-input,
-#mails .header .expanding-search.expand .back, #settings_page .header .expanding-search.expand sm-input,
-#settings_page .header .expanding-search.expand .back {
-  transform: none;
-}
-#contacts .header .expanding-search sm-input,
-#contacts .header .expanding-search .back, #mails .header .expanding-search sm-input,
-#mails .header .expanding-search .back, #settings_page .header .expanding-search sm-input,
-#settings_page .header .expanding-search .back {
-  transform: translateX(0.5rem);
-  transition: transform 0.3s;
-}
 #contacts .header sm-input, #mails .header sm-input, #settings_page .header sm-input {
   margin: 0;
   width: 100%;
@@ -981,10 +995,11 @@ sm-button[variant=primary] .icon {
 }
 #contacts .header sm-input::part(input), #mails .header sm-input::part(input), #settings_page .header sm-input::part(input) {
   border-radius: 3rem;
-  padding: 0.3rem 0.8rem;
+  padding: 0.2rem 0.8rem;
 }
 #contacts .header h4, #mails .header h4, #settings_page .header h4 {
   text-transform: capitalize;
+  font-weight: 500;
 }
 #contacts .header .icon, #mails .header .icon, #settings_page .header .icon {
   -webkit-tap-highlight-color: transparent;
@@ -1023,10 +1038,12 @@ sm-button[variant=primary] .icon {
 }
 
 #chat {
-  height: 100vh;
+  height: 100%;
 }
 #chat header {
-  padding: 0.5rem 1rem;
+  padding: 1rem;
+  min-height: 4rem;
+  grid-template-columns: auto 1fr auto;
 }
 #chat header .back-button {
   padding: 0.1rem;
@@ -1037,11 +1054,18 @@ sm-button[variant=primary] .icon {
 #chat header .initial {
   cursor: pointer;
   margin-right: 1rem;
+  height: 2.2rem;
+  width: 2.2rem;
 }
 #chat header h4 {
   font-weight: 500;
   font-size: 0.9rem;
 }
+#chat header #receiver_name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 #chat #scroll_to_bottom {
   position: fixed;
   right: 0;
@@ -1057,7 +1081,7 @@ sm-button[variant=primary] .icon {
   transform: scale(0);
   transition: transform 0.3s;
 }
-#chat footer #toggle_emoji {
+#chat footer #emoji_toggle {
   align-self: center;
   padding: 0.6rem;
   width: 2.6rem;
@@ -1065,10 +1089,10 @@ sm-button[variant=primary] .icon {
   border-radius: 2rem;
   cursor: pointer;
 }
-#chat footer #toggle_emoji path {
+#chat footer #emoji_toggle path {
   fill: rgba(var(--text-color), 0.5);
 }
-#chat footer #toggle_emoji.active path {
+#chat footer #emoji_toggle.active path {
   fill: var(--accent-color);
 }
 #chat footer .flex {
@@ -1113,7 +1137,7 @@ sm-button[variant=primary] .icon {
   align-items: center;
   gap: 0.5rem;
   width: 100%;
-  font-size: 0.9rem;
+  font-size: 0.92rem;
   max-width: max-content;
   margin-bottom: 0.2rem;
   margin-top: 0.8rem;
@@ -1131,7 +1155,7 @@ sm-button[variant=primary] .icon {
   hyphens: auto;
   white-space: pre-wrap;
   padding: 0.6em 1em;
-  line-height: 1.5;
+  line-height: 1.6;
 }
 #chat .message .message-body a {
   color: inherit;
@@ -1218,7 +1242,7 @@ sm-button[variant=primary] .icon {
   font-size: 2.6rem;
 }
 
-#chat_container {
+#messages_container {
   flex: 1;
   padding: 0 1rem;
 }
@@ -1281,8 +1305,8 @@ sm-button[variant=primary] .icon {
   stroke: rgba(var(--text-color), 0.4);
 }
 
+#messages_container,
 #chat_container,
-#dm_container,
 #inbox_mail_container,
 #sent_mail_container,
 #mail {
@@ -1292,16 +1316,16 @@ sm-button[variant=primary] .icon {
   overflow-y: auto;
 }
 
-#dm_container:empty {
+#chat_container:empty {
   display: none;
 }
 
-#dm_container:not(:empty) ~ .empty-state {
+#chat_container:not(:empty) ~ .empty-state {
   display: none;
 }
 
-#dm_container {
-  padding-bottom: 5rem;
+#chat_container {
+  padding-bottom: 6rem;
 }
 
 sm-tab-panels {
@@ -1461,18 +1485,11 @@ sm-panel {
     transition: transform 0.3s, opacity 0.3s;
   }
 
-  #dm_container,
+  #chat_container,
 #contact_container {
     gap: 0.2rem;
   }
 
-  #chat header {
-    padding: 1rem;
-  }
-  #chat header .initial {
-    width: 2rem;
-    height: 2rem;
-  }
   #chat .message {
     width: fit-content;
     max-width: 90%;
@@ -1554,7 +1571,7 @@ sm-panel {
   }
   #main_navbar .navbar-item {
     margin: 0 0.5rem;
-    border-radius: 0.5rem;
+    border-radius: 0.8rem;
   }
   #main_navbar .navbar-item .icon {
     margin-right: 0;
@@ -1637,9 +1654,9 @@ sm-panel {
   }
 
   #chat header {
-    padding: 0.5rem 1.5rem;
+    padding: 0.8rem 1.5rem;
   }
-  #chat #chat_container {
+  #chat #messages_container {
     padding: 1rem 5rem;
   }
 }
@@ -1649,17 +1666,21 @@ sm-panel {
     cursor: pointer;
   }
 
-  .contact sm-menu {
+  .contact .menu {
     opacity: 0;
     transition: opacity 0.3s;
   }
 
-  .contact:hover sm-menu,
-sm-menu:focus-within {
+  .contact:hover .menu {
     opacity: 1;
   }
 
   .emoji:hover {
     background: rgba(var(--text-color), 0.1);
   }
+}
+@media (hover: none) {
+  .contact .menu {
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/css/main.min.css b/css/main.min.css
index 0cc7722..92c2ada 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-#landing_page,.sign-in-box,body,body #scroll_to_bottom{background:rgba(var(--foreground-color),1)}p,textarea{line-height:1.6}.align-center,.popup-header{align-items:center}.contact .last-message,.copy-row .copy,.mail-card .sender,.text-overflow{text-overflow:ellipsis;white-space:nowrap}*,::after,::before{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{scroll-behavior:smooth;font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%}body{--accent-color:#5b00d3;--secondary-color:#ffac2e;--text-color:17,17,17;--text-color-light:100,100,100;--foreground-color:255,255,255;--background-color:#efefef;--error-color:red;color:rgba(var(--text-color),1)}body #scroll_to_bottom{box-shadow:0 .3rem .4rem rgba(0,0,0,.2)}body[data-theme=dark]{--accent-color:#923eff;--secondary-color:#d60739;--text-color:240,240,240;--text-color-light:170,170,170;--foreground-color:20,20,20}body[data-theme=dark] .initial{color:rgba(var(--text-color),1)!important;box-shadow:0 .1rem .1rem rgba(0,0,0,.16)}body[data-theme=dark] .message,h1,h2,h3,h4,h5,textarea{color:rgba(var(--text-color),1)}body[data-theme=dark] #scroll_to_bottom{background:linear-gradient(rgba(var(--text-color),.1),rgba(var(--text-color),.1)),rgba(var(--foreground-color),1);box-shadow:0 .4rem .4rem rgba(0,0,0,.3)}h1{font-size:3rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.1rem}h5{font-size:.8rem}h1,h2,h3,h4,h5{font-weight:600}textarea{background:rgba(var(--text-color),.06);border:none;border-radius:.3rem;width:100%;padding:1rem;font-size:1rem;resize:none}textarea:focus{outline:0;box-shadow:0 0 0 .1rem var(--accent-color)}strong{font-weight:500}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.justify-right{margin-left:auto}.direction-column{flex-direction:column}.rest{flex:1}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.no-transformations{transform:none!important}.breakable{overflow-wrap:break-word}.text-overflow{overflow:hidden}.sticky{position:sticky;top:1rem}.light-text{color:rgba(var(--text-color-light),1)}.accent-color{color:var(--accent-color)}.secondary-color{color:var(--secondary-color)}.fab{filter:drop-shadow(0 .4rem .3rem rgba(0, 0, 0, .2));margin:1.5rem;position:fixed;right:0;bottom:0;z-index:1}.fab::part(button){padding:.9rem 1.6rem}.fab .icon{margin-left:0!important;margin-right:.5rem;height:.9rem!important;stroke-width:8!important}a:any-link{word-wrap:break-word;color:var(--accent-color);font-weight:500}.solid-background{background:var(--background-color)!important}.normal-weight{font-weight:400}.icon{fill:none;stroke-width:6;stroke:rgba(var(--text-color),1);height:1.2rem;width:1.2rem;overflow:visible;stroke-linecap:round;stroke-linejoin:round}span.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.2);pointer-events:none}#landing_illustration,.contact,.initial,.interact,.logo-section{position:relative}.interact{overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}sm-popup sm-input+sm-input{margin-top:1rem}.popup-header{padding:.5rem 1.5rem 0;display:flex;width:100%}.popup-header .icon{padding:.7rem;height:2.4rem;width:2.4rem;stroke-width:8;transform:translateX(-.5rem);cursor:pointer;-webkit-tap-highlight-color:transparent}.popup-header .back{transform:none}.popup-header button,.popup-header sm-button{width:auto;margin-left:auto}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{overflow:hidden}.copy-row h4{margin-bottom:0!important}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:2rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.card,sm-button{margin:1rem 0}.page{align-items:flex-start;width:100%;height:100%}.card{display:flex;flex-direction:column}sm-button .icon{margin-right:.4rem}sm-button[variant=primary]{--foreground-color:255,255,255}sm-button[variant=primary] .icon{align-self:center;height:1rem;width:1rem;margin-left:.8rem;stroke-width:6;stroke:#fff}.logo-section{align-items:center;height:max-content;margin:.5rem 0}.logo-section h5{font-size:1.1rem!important;font-weight:500}.logo-section .main-logo{height:1.4rem;margin-right:.4rem;fill:rgba(var(--text-color),1);stroke:none}.logo-section img{width:2rem;margin-right:.5rem}.select-file input[type=file]{display:none}#landing{display:grid;border-radius:.6rem;width:100%;padding:0 1.5rem;height:100%;align-items:center;overflow-y:auto}#landing .logo-section{padding:1.5rem;display:flex}#landing .title-font{line-height:1.2;font-weight:700;font-size:2.5rem}#landing .left h3,#landing .left h4,#landing .left p,.contact .name,.sign-in-box h3,.sign-in-box h4,.sign-in-box h5{font-weight:500}#landing .left{display:grid;flex-direction:column;padding-bottom:1.5rem;z-index:1}#landing .left h4{color:rgba(var(--foreground-color),1)}#landing .left sm-button{margin:1.5rem 0 2rem;width:max-content}#landing_illustration,.sign-in-box,.sign-in-box form,.sign-in-box sm-button,.sign-in-box sm-panel{width:100%}#landing .left h3{margin-bottom:1rem}.logo-section{padding:1.5rem}#sign_in_popup::part(popup-body){padding:0}.sign-in-box{margin:0 -2rem;z-index:1;justify-self:center;padding:1.5rem;border-radius:.5rem}.sign-in-box sm-input{margin-top:1.5rem}.sign-in-box sm-tab-header{margin:0;background:0 0;align-self:flex-start}.sign-in-box sm-tab-header::part(tab-header){padding-bottom:.4rem;gap:1.5rem}.sign-in-box sm-tab::part(tab){padding:.4rem 0}.sign-in-box sm-tab-panels{margin-top:1.5rem}.sign-in-box h2{margin-bottom:.5rem}.sign-in-box h4{margin-bottom:1.5rem}.sign-in-box h5{opacity:.8}.sign-in-box strong{display:flex;background:#ffd92e;padding:.4em .6em;border-radius:.4em;color:#111;margin-top:.5rem}.sign-in-box .copy-row h4{max-width:34ch}.sign-in-box .copy-row:not(:last-of-type){margin-bottom:1rem}.sign-in-box button{margin-top:2rem;padding:.6rem 1.6rem}.sign-in-box sm-button::part(button){padding:.8rem 1.6rem}.sign-in-box p{margin-bottom:.5rem;max-width:35ch;margin-top:.5rem}.sign-in-box #credentials_section{border-top:1px rgba(var(--text-color),.2) solid;margin-top:1rem;padding-top:1.5rem;animation:slide-down .3s forwards}.sign-in-box #sign_in_with,.sign-in-box sm-button{margin-top:2rem;margin-bottom:0}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}#loading_page{height:100vh;display:grid;place-content:center;justify-items:center}#loading_page svg{z-index:1;transform-origin:bottom;height:6rem;width:6rem;animation:bounce .5s infinite alternate ease-in}#loading_page .shadow{margin-top:-1rem;width:5rem;height:2rem;background:rgba(var(--text-color),.1);border-radius:50%;animation:scale .5s infinite alternate ease-in;margin-left:1rem}#loading_page h4{margin-top:2rem}@keyframes bounce{0%{transform:scaleY(1) translateY(-4rem)}90%{transform:scaleY(1) translateY(0)}100%{transform:scaleY(.8)}}@keyframes scale{0%{transform:scale(.5)}90%{transform:scale(1.05)}100%{transform:scale(1)}}.initial{justify-content:center;font-size:1.2rem;width:2.5rem;height:2.5rem;color:#fff;box-shadow:0 .1rem .1rem rgba(0,0,0,.06);border-radius:2rem;text-transform:uppercase}.contact{display:grid;gap:0 1rem;padding:.8rem 1.5rem;align-items:center;flex-shrink:0}.contact.chat{grid-template-columns:auto 1fr auto;grid-template-areas:"dp . menu" "dp . ."}.contact:not(.chat){grid-template-columns:auto 1fr;grid-template-areas:"dp ."}.contact .initial{grid-area:dp}.contact .name{font-size:1em;color:rgba(var(--text-color),.8)}.contact .last-message{grid-column:2/4;overflow:hidden;font-weight:400;font-size:.9em;color:rgba(var(--text-color),.9)}.contact .time{font-weight:400;opacity:.8;grid-area:menu;align-self:flex-start}#contact_details_popup>.flex:first-of-type{margin:1rem 0}#contact_details_popup>.flex:first-of-type .flex .icon{height:2.6rem;width:2.6rem;padding:.85rem;cursor:pointer;stroke-width:8}#contact_details_popup>.flex:first-of-type .flex .icon:hover{background:rgba(var(--text-color),.06)}#contact_details_popup h5{font-weight:500;opacity:.8}#contact_details_popup .copy-row{margin-bottom:1.5rem}#contact_details_popup .copy-row h4{font-weight:400}#contact_details_popup #contact_initial{height:3.6rem;width:3.6rem;font-size:1.6rem;border-radius:4rem;margin-bottom:1rem}#contact_details_popup #contact_name{border-radius:.5rem;max-width:30ch;padding:.6rem 1.2rem}#contact_details_popup #contact_name:focus{outline:0;background:rgba(var(--text-color),.1)}#warn_no_encryption,.date-card{padding:.4rem .8rem;background:rgba(var(--text-color),.1);font-weight:500;border-radius:.5rem;color:rgba(var(--text-color),.8);margin:1rem 0;justify-self:center;align-self:center}#warn_no_encryption{background:#fffd8d;color:#111}.contact.unread .initial::before,.mail-card.unread::before{content:"";position:absolute;padding:.4rem;border-radius:1rem;top:0;left:0;background:var(--accent-color)}.mail,.mail-card{position:relative}.contact.unread .time,.mail-card.unread .time{color:var(--accent-color)}.contact.unread h4,.contact.unread h5,.contact.unread p,.mail-card.unread h4,.mail-card.unread h5,.mail-card.unread p{font-weight:700}.mail-card{display:flex;flex-direction:column;padding:1rem 1.5rem}.mail-card .sender{color:rgba(var(--text-color),.9);font-weight:500;overflow:hidden;margin-right:1rem}.mail-card .date{margin-left:auto;font-weight:500;white-space:nowrap}.mail-card .subject{font-size:1em;margin-top:.5rem;font-weight:500}.mail-card .description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9em;margin-top:.2rem;color:rgba(var(--text-color),.8)}#chat .message .message-body,.mail .mail-content,.mail .mail-subject{overflow-wrap:break-word;word-wrap:break-word}@keyframes slide{from{opacity:0;transform:translateX(-1rem)}to{opacity:1;transform:none}}#mail_container{width:100%}#contacts #all_contacts,#mail_contact_list{position:absolute;background:rgba(var(--foreground-color),1)}.mail:not(:first-of-type){margin-top:2rem;padding-inline-start:1rem}.mail:not(:first-of-type)::before{content:"";position:absolute;left:0;top:0;width:.2rem;height:100%;background:rgba(var(--text-color),.2)}.mail header{align-self:start;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:solid 1px rgba(var(--text-color),.2)}.mail header h4{font-weight:500}.mail header .flo-id{font-weight:400;max-width:90%}.mail .mail-subject{margin-bottom:.4em}.mail .mail-content{height:max-content;max-width:60ch;white-space:pre-wrap}.logo-section{display:grid;grid-template-columns:auto 1fr}#main_navbar{position:fixed;flex-direction:column;bottom:0;top:0;padding:0;width:max(16rem,60vw);background:rgba(var(--foreground-color),1)}#main_navbar .logo-section{margin:1rem 0 1.5rem;padding:0 1rem}#main_navbar .active{background:var(--accent-color)}#main_navbar .active .icon{stroke:#fff}#main_navbar .active .label{color:#fff}#main_navbar .label{font-weight:500;font-size:.9rem}#main_navbar .navbar-item{height:auto;justify-content:flex-start;flex-direction:row;flex:none;padding:1rem 1.2rem}#main_navbar .navbar-item .icon{margin-right:.8rem;height:1.2rem;width:1.2rem}#main_navbar .navbar-item:last-of-type{margin-top:auto}#main_navbar .navbar-item.badge::after{right:0;top:0;position:absolute;content:attr(data-notifications);display:flex;justify-content:center;align-items:center;padding:.4rem;line-height:0;height:calc(1em + .4rem);background:#00C853;color:rgba(var(--foreground-color),1);border-radius:2rem;transition:transform .3s}#main_navbar .navbar-item.badge.active::after,#main_navbar .navbar-item.badge[data-notifications=""]::after,#main_navbar .navbar-item.badge[data-notifications="0"]::after{transform:scale(0)}#auto_complete_contact{position:relative;justify-content:flex-start;padding-bottom:0}#mail_contact_list{max-height:40vh;overflow-y:auto;top:100%;z-index:1;border-radius:.4rem;box-shadow:0 .1rem .1rem rgba(0,0,0,.1),0 .2rem .5rem rgba(0,0,0,.16);width:100%}#mail_contact_list .contact{grid-template-columns:auto 1fr;grid-template-areas:"dp ." "dp ."}#mail_contact_list sm-menu{display:none}#contacts{position:relative}#contacts #all_contacts{top:0;bottom:0;left:0;right:0;z-index:1}#contacts #all_contacts .header{padding-bottom:1rem}#contacts .option{padding:1rem 1.5rem}#contacts .scrolling-wrapper{height:100%;flex:1;overflow-y:auto}#contacts #contacts_container{padding-bottom:5rem}#contacts #contacts_container::before{display:flex;content:"Contacts";font-size:.9em;color:rgba(var(--text-color),.9);padding:1rem 1.5rem}#selected_contacts{padding:1.5rem;background:rgba(var(--text-color),.06)}#selected_contacts h4{font-weight:500;font-size:1rem}#selected_contacts sm-button{margin-bottom:0}#selected_contacts_container{display:grid;grid-template-columns:repeat(auto-fill,minmax(6rem,1fr));gap:1rem}#contacts,#mails{position:relative;grid-template-rows:max-content 1fr}#contacts,#mails,#settings_page{height:100vh;overflow-y:hidden}#contacts .header,#mails .header,#settings_page .header{padding:1rem 1.5rem 0;position:relative;gap:.5rem}#contacts .header sm-tab::part(tab),#mails .header sm-tab::part(tab),#settings_page .header sm-tab::part(tab){padding:.8rem 1rem}#contacts .header .expanding-search,#mails .header .expanding-search,#settings_page .header .expanding-search{position:absolute;width:100%;padding:.7rem 1.5rem;background:rgba(var(--foreground-color),1);opacity:0;pointer-events:none;transition:opacity .3s}#contacts .header .expanding-search.expand,#mails .header .expanding-search.expand,#settings_page .header .expanding-search.expand{transform:none;opacity:1;pointer-events:all}#contacts .header .expanding-search.expand .back,#contacts .header .expanding-search.expand sm-input,#mails .header .expanding-search.expand .back,#mails .header .expanding-search.expand sm-input,#settings_page .header .expanding-search.expand .back,#settings_page .header .expanding-search.expand sm-input{transform:none}#contacts .header .expanding-search .back,#contacts .header .expanding-search sm-input,#mails .header .expanding-search .back,#mails .header .expanding-search sm-input,#settings_page .header .expanding-search .back,#settings_page .header .expanding-search sm-input{transform:translateX(.5rem);transition:transform .3s}#contacts .header sm-input,#mails .header sm-input,#settings_page .header sm-input{margin:0;width:100%}#contacts .header sm-input .icon,#mails .header sm-input .icon,#settings_page .header sm-input .icon{stroke:rgba(var(--text-color),.5);height:.9rem;width:.9rem}#contacts .header sm-input::part(input),#mails .header sm-input::part(input),#settings_page .header sm-input::part(input){border-radius:3rem;padding:.3rem .8rem}#contacts .header h4,#mails .header h4,#settings_page .header h4{text-transform:capitalize}#contacts .header .icon,#mails .header .icon,#settings_page .header .icon{-webkit-tap-highlight-color:transparent}#contacts .header .flex .hamburger-menu-button,#mails .header .flex .hamburger-menu-button,#settings_page .header .flex .hamburger-menu-button{-webkit-tap-highlight-color:transparent;margin-right:1rem}#contacts .header .flex h4,#mails .header .flex h4,#settings_page .header .flex h4{flex:1}#contacts .header .flex .icon,#mails .header .flex .icon,#settings_page .header .flex .icon{height:2.2rem;width:2.2rem;padding:.6rem;margin-left:-.4rem;cursor:pointer}#contacts .header .flex sm-menu,#mails .header .flex sm-menu,#settings_page .header .flex sm-menu{margin-right:-.7rem}#chat #type_message,#contacts .header sm-button,#mails .header sm-button,#settings_page .header sm-button{margin:0}#contacts .header sm-button .icon,#mails .header sm-button .icon,#settings_page .header sm-button .icon{height:.9rem;width:.9rem;align-self:center;stroke-width:8;margin-left:0;margin-right:.5rem}#chat_page{overflow-y:hidden}#chat{height:100vh}#chat header{padding:.5rem 1rem}#chat header .back-button{padding:.1rem;stroke-width:8;margin-right:.5rem;stroke:rgba(var(--text-color),.8)}#chat header .initial{cursor:pointer;margin-right:1rem}#chat header h4{font-weight:500;font-size:.9rem}#chat #scroll_to_bottom{position:fixed;right:0;bottom:4rem;width:2.6rem;height:2.6rem;padding:.9rem;border-radius:4rem;z-index:1;margin:1.5rem;stroke-width:8;cursor:pointer;transform:scale(0);transition:transform .3s}#chat footer #toggle_emoji{align-self:center;padding:.6rem;width:2.6rem;height:2.6rem;border-radius:2rem;cursor:pointer}#chat footer #toggle_emoji path{fill:rgba(var(--text-color),.5)}#chat footer #toggle_emoji.active path{fill:var(--accent-color)}#chat footer .flex{align-items:flex-end;padding:1rem 1rem 1rem .4rem}#chat footer sm-textarea::part(textarea){background:rgba(var(--text-color),.1);padding-right:3rem;border-radius:2rem}#chat #send_message_button{position:absolute;right:1.5rem;transform:scale(0);opacity:0;pointer-events:none;z-index:1;align-self:center;height:2.4rem;width:2.4rem;padding:.5rem;cursor:pointer;stroke:none;fill:rgba(var(--text-color),.4);margin-left:1rem;transition:.3s}#chat #send_message_button.active{opacity:1;fill:var(--accent-color);transform:none;pointer-events:all}#chat .message{position:relative;display:grid;grid-auto-flow:column;align-items:center;gap:.5rem;width:100%;font-size:.9rem;max-width:max-content;margin-bottom:.2rem;margin-top:.8rem}#chat .message .message-body{display:inline-flex;align-items:center;flex-wrap:wrap;word-break:break-all;word-break:break-word;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;white-space:pre-wrap;padding:.6em 1em;line-height:1.5}#chat .message .message-body a{color:inherit}#chat .message .message-body .text-emoji{align-self:center;font-size:1.4em;letter-spacing:0ch}#chat .message .time{white-space:nowrap;font-size:.8em;opacity:.8}#chat .sent{margin-left:auto}#chat .sent::after{content:"";position:absolute;left:100%;top:0;width:0;height:0;border-style:solid;border-width:.5em .3em 0 0;border-color:var(--accent-color) transparent transparent}#chat .sent .message-body{background:var(--accent-color);color:#f0f0f0;border-radius:1.5em 0 1.5em 1.5em}#chat .sent .time{grid-column:1}#chat .received::after{content:"";position:absolute;left:-.5em;top:0;width:0;height:0;border-style:solid;border-width:0 .5em .5em 0;border-color:transparent rgba(var(--text-color),.1) transparent transparent}#chat .received .message-body{background:rgba(var(--text-color),.1);border-radius:0 1.5em 1.5em}#chat .received+.received,#chat .sent+.sent{margin-top:0}#chat .received+.received::after,#chat .sent+.sent::after{display:none}#chat .received+.received .message-body,#chat .sent+.sent .message-body{border-radius:1.5em}#chat .unconfirmed{opacity:.7;transform-origin:right;animation:slide-up .3s forwards}@keyframes slide-up{from{transform:translateY(-2rem)}to{transform:none}}.big-emoji::after{display:none}.big-emoji .message-body{background:0 0!important;padding:0!important;font-size:2.6rem}#chat_container{flex:1;padding:0 1rem}#emoji_picker{display:grid;gap:1rem;background:rgba(var(--text-color),.06);border-radius:1rem;margin:0 1rem;box-shadow:0 .2rem .8rem rgba(0,0,0,.3);overflow-y:auto;max-height:30vh}#emoji_picker section{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.6rem,1fr));gap:.5rem;padding:0 1rem;width:100%}#emoji_picker .section-header{grid-column:1/-1;position:sticky;top:0;background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),rgba(var(--foreground-color),1);padding:1rem 0;z-index:1}.emoji{font-size:1.6rem;cursor:pointer;padding:.4rem;border-radius:.6rem;user-select:none;text-align:center}#new_conversation,#no_mails{height:100%;justify-content:center;text-align:center;padding:1.5rem}#new_conversation p,#no_mails p{margin-top:.8rem}#no_mails .new-conversation{height:7rem;margin-bottom:1rem}.new-conversation{height:8rem;width:8rem;align-self:center;stroke-width:16;stroke:rgba(var(--text-color),.4)}#chat_container,#dm_container,#inbox_mail_container,#mail,#sent_mail_container{width:100%;flex-direction:column;height:100%;overflow-y:auto}#dm_container:empty{display:none}#dm_container:not(:empty)~.empty-state{display:none}#dm_container,#inbox_mail_container,#sent_mail_container{padding-bottom:5rem}sm-tab-panels{overflow:hidden auto}sm-panel{width:100%;overflow-y:auto}#chat,#mail{background:rgba(var(--foreground-color),1)}#mail{height:100vh;padding:0 1.5rem;align-items:flex-start}#mail .flex{margin-top:1rem}#mail .flex sm-button:first-of-type{margin-right:.5rem}#compose_mail_popup sm-input{margin-bottom:1rem}.sidebar-item{display:flex;align-items:center;padding:1rem 1.5rem;text-transform:capitalize;font-weight:500;opacity:.9}.sidebar-item .icon{margin-right:1em;width:1em}.back{padding:.7rem;height:2.4rem;width:2.4rem;margin-left:-.5rem;cursor:pointer;stroke-width:8;opacity:.8;-webkit-tap-highlight-color:transparent}.back:hover{opacity:1}#settings_page #settings_sidebar header{padding:1rem 1.5rem}#settings_page .flex sm-button{margin:0;margin-left:1rem}#settings_page sm-switch{padding-left:1rem}#settings_page sm-button{width:100%}#settings_page #settings_title{text-transform:capitalize}#settings_page #settings_sidebar{height:100%}#settings_page #settings_panel{padding:0 1.5rem}#settings_page section{max-width:50ch;display:grid;gap:.3rem}#settings_page section:not(:last-of-type){margin-bottom:1.5rem}#settings_page section.setting-toggle{grid-template-columns:1fr auto}#settings_page section.setting-toggle sm-switch{grid-column:2;grid-row:1/3}#settings_page section.setting-toggle>h4,#settings_page section.setting-toggle>p{grid-column:1}#settings_page #sign_out::part(button){color:var(--error-color)}@media screen and (max-width:640px){#chat header,#main_navbar .logo-section{padding:1rem}.hide-on-mobile{position:fixed;max-height:0;opacity:0;pointer-events:none}#landing{grid-template-areas:"illustration" ".";align-items:flex-start}#landing .title-font{text-align:center;font-size:2rem;font-weight:500}#landing sm-button{display:flex;width:100%!important}#sing_in{max-height:90vh}#landing_illustration{grid-area:illustration}#main_navbar{transform:translateX(-100%);transition:transform .3s;z-index:4;box-shadow:0 0 1rem rgba(0,0,0,.3)}#navbar_backdrop{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.3);z-index:2;transition:transform .3s,opacity .3s}#contact_container,#dm_container{gap:.2rem}#chat header .initial{width:2rem;height:2rem}#chat .message{width:fit-content;max-width:90%}#settings_page{overflow-x:hidden}#settings_page #settings_panel header{position:sticky;top:0;padding:1rem 0;margin-bottom:.5rem;background:rgba(var(--foreground-color),1)}}@media only screen and (min-width:640px){::-webkit-scrollbar{width:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.hide-on-desktop{display:none!important}.page{padding-bottom:0}.fab{position:absolute}.logo-section{padding:2rem 3rem 0;margin:.5rem 0}sm-popup::part(popup){width:24rem;min-width:24rem}#landing{align-items:center;gap:4vw;grid-template-columns:1fr 1fr;padding:0 4vw}#landing .left h4{color:var(--accent-color)}#sign_in_popup .popup-header{padding-top:1.5rem}#main_navbar{position:relative;width:auto;padding-bottom:.5rem;background:rgba(var(--text-color),.06)}#main_navbar .logo-section{display:flex;justify-content:center;margin:1.5rem 0}#main_navbar .logo-section .main-logo{margin:0}#main_navbar .navbar-item{margin:0 .5rem;border-radius:.5rem}#main_navbar .navbar-item .icon{margin-right:0}#main_navbar .label{display:none}#add_contact_popup::part(popup){min-width:24rem}#compose_mail_popup::part(popup),#reply_mail_popup::part(popup){min-width:36rem}#main{width:100vw;height:100vh;grid-template-columns:auto 1fr}#emoji_picker{max-height:18rem}#chat .message .message-body{max-width:65ch}#chat_page,#mail_page{grid-template-columns:20rem 1fr;box-shadow:0 0 1rem rgba(0,0,0,.1);z-index:1}#settings_page{display:grid;height:100vh;box-shadow:0 0 1rem rgba(0,0,0,.1);grid-template-columns:14rem 1fr}#settings_page sm-button{width:max-content}#settings_page #settings_panel{padding:1.5rem}#settings_page .active{background:rgba(var(--text-color),.1)}.contact.active,.mail-card.active{background:rgba(var(--text-color),.06)}.card{display:inline-flex;width:auto}#settings_panel{overflow-y:auto;max-height:100vh}}@media only screen and (min-width:1280px){#landing{gap:4vw;padding:0 8vw}#landing .title-font{font-size:3rem}#chat_page,#mail_page{grid-template-columns:21rem 1fr}#chat header{padding:.5rem 1.5rem}#chat #chat_container{padding:1rem 5rem}}@media (hover:hover){.contact:hover,.mail-card:hover,.navbar-item:hover{background:rgba(var(--text-color),.06);cursor:pointer}.contact sm-menu{opacity:0;transition:opacity .3s}.contact:hover sm-menu,sm-menu:focus-within{opacity:1}.emoji:hover{background:rgba(var(--text-color),.1)}}
\ No newline at end of file
+#landing_page,.sign-in-box,body,body #scroll_to_bottom{background:rgba(var(--foreground-color),1)}.align-center,.popup-header{align-items:center}.contact .last-message,.contact .name,.copy-row .copy,.mail-card .sender,.text-overflow{white-space:nowrap;text-overflow:ellipsis}*,::after,::before{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{scroll-behavior:smooth;font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%}body{--accent-color:#5b00d3;--secondary-color:#ffac2e;--text-color:17,17,17;--text-color-light:100,100,100;--foreground-color:255,255,255;--background-color:#efefef;--error-color:red;color:rgba(var(--text-color),1)}body #scroll_to_bottom{box-shadow:0 .3rem .4rem rgba(0,0,0,.2)}body[data-theme=dark]{--accent-color:#923eff;--secondary-color:#d60739;--text-color:240,240,240;--text-color-light:170,170,170;--foreground-color:20,20,20}body[data-theme=dark] .initial{color:rgba(var(--text-color),1)!important;box-shadow:0 .1rem .1rem rgba(0,0,0,.16)}body[data-theme=dark] .message,h1,h2,h3,h4,h5,textarea{color:rgba(var(--text-color),1)}body[data-theme=dark] #scroll_to_bottom{background:linear-gradient(rgba(var(--text-color),.1),rgba(var(--text-color),.1)),rgba(var(--foreground-color),1);box-shadow:0 .4rem .4rem rgba(0,0,0,.3)}p{line-height:1.6}h1{font-size:3rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.1rem}h5{font-size:.8rem}h1,h2,h3,h4,h5{font-weight:600}a:any-link,strong{font-weight:500}textarea{background:rgba(var(--text-color),.06);border:none;border-radius:.3rem;width:100%;padding:1rem;font-size:1rem;resize:none;line-height:1.6}textarea:focus{outline:0;box-shadow:0 0 0 .1rem var(--accent-color)}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.justify-right{margin-left:auto}.direction-column{flex-direction:column}.rest{flex:1}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.no-transformations{transform:none!important}.breakable{overflow-wrap:break-word}.text-overflow{overflow:hidden}.sticky{position:sticky;top:1rem}.light-text{color:rgba(var(--text-color-light),1)}.accent-color{color:var(--accent-color)}.secondary-color{color:var(--secondary-color)}.fab{filter:drop-shadow(0 .4rem .3rem rgba(0, 0, 0, .2));margin:1.5rem;position:fixed;right:0;bottom:0;z-index:1}.fab::part(button){padding:.9rem 1.6rem}.fab .icon{margin-left:0!important;margin-right:.5rem;height:.9rem!important;stroke-width:8!important}a:any-link{word-wrap:break-word;color:var(--accent-color)}.solid-background{background:var(--background-color)!important}.normal-weight{font-weight:400}.icon{fill:none;stroke-width:6;stroke:rgba(var(--text-color),1);height:1.2rem;width:1.2rem;overflow:visible;stroke-linecap:round;stroke-linejoin:round}span.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.2);pointer-events:none}#landing_illustration,.contact,.initial,.interact,.logo-section{position:relative}.interact{overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}sm-popup sm-input+sm-input{margin-top:1rem}.popup-header{padding:.5rem 1.5rem 0;display:flex;width:100%}.popup-header .icon{padding:.7rem;height:2.4rem;width:2.4rem;stroke-width:8;transform:translateX(-.5rem);cursor:pointer;-webkit-tap-highlight-color:transparent}.popup-header .back{transform:none}.popup-header button,.popup-header sm-button{width:auto;margin-left:auto}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{overflow:hidden}.copy-row h4{margin-bottom:0!important}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:2rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.card,sm-button{margin:1rem 0}.page{align-items:flex-start;width:100%;height:100%}.card{display:flex;flex-direction:column}sm-button .icon{margin-right:.4rem}sm-button[variant=primary]{--foreground-color:255,255,255}sm-button[variant=primary] .icon{align-self:center;height:1rem;width:1rem;margin-left:.8rem;stroke-width:6;stroke:#fff}.logo-section{align-items:center;height:max-content;margin:.5rem 0}.logo-section h5{font-size:1.1rem!important;font-weight:500}.logo-section .main-logo{height:1.4rem;margin-right:.4rem;fill:rgba(var(--text-color),1);stroke:none}.logo-section img{width:2rem;margin-right:.5rem}.select-file input[type=file]{display:none}#landing{display:grid;border-radius:.6rem;width:100%;padding:0 1.5rem;height:100%;align-items:center;overflow-y:auto}#landing .logo-section{padding:1.5rem;display:flex}#landing .title-font{line-height:1.2;font-weight:700;font-size:2.5rem}#landing .left h3,#landing .left h4,#landing .left p,.contact .name,.sign-in-box h3,.sign-in-box h4,.sign-in-box h5{font-weight:500}#landing .left{display:grid;flex-direction:column;padding-bottom:1.5rem;z-index:1}#landing .left h4{color:rgba(var(--foreground-color),1)}#landing .left sm-button{margin:1.5rem 0 2rem;width:max-content}#landing_illustration,.sign-in-box,.sign-in-box form,.sign-in-box sm-button,.sign-in-box sm-panel{width:100%}#landing .left h3{margin-bottom:1rem}.logo-section{padding:1.5rem}#sign_in_popup::part(popup-body){padding:0}.sign-in-box{margin:0 -2rem;z-index:1;justify-self:center;padding:1.5rem;border-radius:.5rem}.sign-in-box sm-input{margin-top:1.5rem}.sign-in-box sm-tab-header{margin:0;background:0 0;align-self:flex-start}.sign-in-box sm-tab-header::part(tab-header){padding-bottom:.4rem;gap:1.5rem}.sign-in-box sm-tab::part(tab){padding:.4rem 0}.sign-in-box sm-tab-panels{margin-top:1.5rem}.sign-in-box h2{margin-bottom:.5rem}.sign-in-box h4{margin-bottom:1.5rem}.sign-in-box h5{opacity:.8}.sign-in-box strong{display:flex;background:#ffd92e;padding:.4em .6em;border-radius:.4em;color:#111;margin-top:.5rem}.sign-in-box .copy-row h4{max-width:34ch}.sign-in-box .copy-row:not(:last-of-type){margin-bottom:1rem}.sign-in-box button{margin-top:2rem;padding:.6rem 1.6rem}.sign-in-box sm-button::part(button){padding:.8rem 1.6rem}.sign-in-box p{margin-bottom:.5rem;max-width:35ch;margin-top:.5rem}.sign-in-box #credentials_section{border-top:1px rgba(var(--text-color),.2) solid;margin-top:1rem;padding-top:1.5rem;animation:slide-down .3s forwards}.sign-in-box #sign_in_with,.sign-in-box sm-button{margin-top:2rem;margin-bottom:0}@keyframes slide-down{from{transform:translateY(-1rem)}to{transform:none}}#loading_page{height:100vh;display:grid;place-content:center;justify-items:center}#loading_page svg{z-index:1;transform-origin:bottom;height:6rem;width:6rem;animation:bounce .5s infinite alternate ease-in}#loading_page .shadow{margin-top:-1rem;width:5rem;height:2rem;background:rgba(var(--text-color),.1);border-radius:50%;animation:scale .5s infinite alternate ease-in;margin-left:1rem}#loading_page h4{margin-top:2rem}@keyframes bounce{0%{transform:scaleY(1) translateY(-4rem)}90%{transform:scaleY(1) translateY(0)}100%{transform:scaleY(.8)}}@keyframes scale{0%{transform:scale(.5)}90%{transform:scale(1.05)}100%{transform:scale(1)}}.initial{justify-content:center;font-size:1.2rem;width:2.5rem;height:2.5rem;color:#fff;box-shadow:0 .1rem .1rem rgba(0,0,0,.06);border-radius:2rem;text-transform:uppercase}.contact{display:grid;gap:0 1rem;padding:.8rem 1.5rem;align-items:center;flex-shrink:0;overflow:hidden}.contact:not(.chat){grid-template-columns:auto 1fr;grid-template-areas:"dp ."}.contact.chat,.contact.group{grid-template-columns:auto 1fr auto;grid-template-areas:"dp . time" "dp . menu"}.contact .initial{grid-area:dp}.contact .name{font-size:1em;color:rgba(var(--text-color),.8);overflow:hidden}.contact .last-message{overflow:hidden;font-weight:400;font-size:.9em;color:rgba(var(--text-color),.9)}.contact .menu{grid-area:menu;justify-self:flex-end;padding:.2rem;fill:rgba(var(--text-color),1)}.contact .time{font-weight:400;opacity:.8;grid-area:time}#contact_details_popup>.flex:first-of-type{margin:1rem 0}#contact_details_popup>.flex:first-of-type .flex .icon{height:2.6rem;width:2.6rem;padding:.85rem;cursor:pointer;stroke-width:8}#contact_details_popup>.flex:first-of-type .flex .icon:hover{background:rgba(var(--text-color),.06)}#contact_details_popup h5{font-weight:500;opacity:.8}#contact_details_popup .copy-row{margin-bottom:1.5rem}#contact_details_popup .copy-row h4{font-weight:400}#contact_details_popup #contact_initial{height:3.6rem;width:3.6rem;font-size:1.6rem;border-radius:4rem;margin-bottom:1rem}#contact_details_popup #contact_name{border-radius:.5rem;max-width:30ch;padding:.6rem 1.2rem;overflow-wrap:break-word}#contact_details_popup #contact_name:focus{outline:0;background:rgba(var(--text-color),.1)}#warn_no_encryption,.date-card{padding:.4rem .8rem;background:rgba(var(--text-color),.1);font-weight:500;border-radius:.5rem;color:rgba(var(--text-color),.8);margin:1rem 0;justify-self:center;align-self:center}#warn_no_encryption{background:#fffd8d;color:#111}.mail-card.unread::before{content:"";position:absolute;padding:.4rem;border-radius:1rem;top:0;left:0;background:var(--accent-color)}.contact .initial::after{content:"";position:absolute;height:calc(100% + .8rem);width:calc(100% + .8rem);border:var(--accent-color) solid;border-radius:100%;transform:scale(.8);opacity:0;transition:transform .3s,opacity .3s}.mail,.mail-card{position:relative}.contact.unread .initial::after{transform:scale(1);opacity:1}.contact.unread .time,.mail-card.unread .time{color:var(--accent-color)}.contact.unread h4,.contact.unread h5,.contact.unread p,.mail-card.unread h4,.mail-card.unread h5,.mail-card.unread p{font-weight:700}.mail-card{display:flex;flex-direction:column;padding:1rem 1.5rem}.mail-card .sender{color:rgba(var(--text-color),.9);font-weight:500;overflow:hidden;margin-right:1rem}.mail-card .date{margin-left:auto;font-weight:500;white-space:nowrap}.mail-card .subject{font-size:1em;margin-top:.5rem;font-weight:500}.mail-card .description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9em;margin-top:.2rem;color:rgba(var(--text-color),.8)}#chat .message .message-body,.mail .mail-content,.mail .mail-subject{overflow-wrap:break-word;word-wrap:break-word}@keyframes slide{from{opacity:0;transform:translateX(-1rem)}to{opacity:1;transform:none}}#mail_container{width:100%}.mail:not(:first-of-type){margin-top:2rem;padding-inline-start:1rem}.mail:not(:first-of-type)::before{content:"";position:absolute;left:0;top:0;width:.2rem;height:100%;background:rgba(var(--text-color),.2)}.mail header{align-self:start;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:solid 1px rgba(var(--text-color),.2)}.mail header h4{font-weight:500}.mail header .flo-id{font-weight:400;max-width:90%}.mail .mail-subject{margin-bottom:.4em}.mail .mail-content{height:max-content;max-width:60ch;white-space:pre-wrap}.logo-section{display:grid;grid-template-columns:auto 1fr}#main_navbar{position:fixed;flex-direction:column;bottom:0;top:0;padding:0;width:max(16rem,60vw);background:rgba(var(--foreground-color),1)}#main_navbar .logo-section{margin:1rem 0 1.5rem;padding:0 1rem}#main_navbar .active{background:var(--accent-color)}#main_navbar .active .icon{stroke:#fff}#main_navbar .active .label{color:#fff}#main_navbar .label{font-weight:500;font-size:.9rem}#main_navbar .navbar-item{height:auto;justify-content:flex-start;flex-direction:row;flex:none;padding:1rem}#main_navbar .navbar-item .icon{margin-right:.8rem;height:1.2rem;width:1.2rem}#main_navbar .navbar-item:last-of-type{margin-top:auto}#main_navbar .navbar-item.badge::after{right:0;top:0;position:absolute;content:attr(data-notifications);display:flex;justify-content:center;align-items:center;padding:.4rem;line-height:0;height:calc(1em + .4rem);background:#00C853;color:rgba(var(--foreground-color),1);border-radius:2rem;transition:transform .3s}#contacts #all_contacts,#mail_contact_list{position:absolute;background:rgba(var(--foreground-color),1);z-index:1}#main_navbar .navbar-item.badge.active::after,#main_navbar .navbar-item.badge[data-notifications=""]::after,#main_navbar .navbar-item.badge[data-notifications="0"]::after{transform:scale(0)}#auto_complete_contact{position:relative;justify-content:flex-start;padding-bottom:0}#mail_contact_list{max-height:40vh;overflow-y:auto;top:100%;border-radius:.4rem;box-shadow:0 .1rem .1rem rgba(0,0,0,.1),0 .2rem .5rem rgba(0,0,0,.16);width:100%}#mail_contact_list .contact{grid-template-columns:auto 1fr;grid-template-areas:"dp ." "dp ."}#mail_contact_list sm-menu{display:none}#contacts{position:relative}#contacts #all_contacts{top:0;bottom:0;left:0;right:0}#contacts #all_contacts .header{padding-top:.7rem}#contacts .option{padding:1rem 1.5rem}#contacts .scrolling-wrapper{height:100%;flex:1;overflow-y:auto}#contacts #contacts_container{padding-bottom:5rem}#contacts #contacts_container::before{display:flex;content:"Contacts";font-size:.9em;color:rgba(var(--text-color),.9);padding:1rem 1.5rem}#selected_contacts{padding:1.5rem;background:rgba(var(--text-color),.06)}#selected_contacts h4{font-weight:500;font-size:1rem}#selected_contacts sm-button{margin-bottom:0}#selected_contacts_container{display:grid;grid-template-columns:repeat(auto-fill,minmax(6rem,1fr));gap:1rem}#contacts,#mails{position:relative;grid-template-rows:max-content 1fr}#contacts,#mails,#settings_page{height:100vh;overflow-y:hidden}#contacts .header,#mails .header,#settings_page .header{padding:1rem 1.5rem;position:relative;gap:.5rem;min-height:4rem}#contacts .header sm-tab::part(tab),#mails .header sm-tab::part(tab),#settings_page .header sm-tab::part(tab){padding:.8rem 1rem}#contacts .header .expanding-search,#mails .header .expanding-search,#settings_page .header .expanding-search{position:absolute;width:100%;padding:.7rem 1.5rem;background:rgba(var(--foreground-color),1);transform:scale(.9);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}#contacts .header .expanding-search.expand,#mails .header .expanding-search.expand,#settings_page .header .expanding-search.expand{transform:none;opacity:1;pointer-events:all}#contacts .header sm-input,#mails .header sm-input,#settings_page .header sm-input{margin:0;width:100%}#contacts .header sm-input .icon,#mails .header sm-input .icon,#settings_page .header sm-input .icon{stroke:rgba(var(--text-color),.5);height:.9rem;width:.9rem}#contacts .header sm-input::part(input),#mails .header sm-input::part(input),#settings_page .header sm-input::part(input){border-radius:3rem;padding:.2rem .8rem}#contacts .header h4,#mails .header h4,#settings_page .header h4{text-transform:capitalize;font-weight:500}#contacts .header .icon,#mails .header .icon,#settings_page .header .icon{-webkit-tap-highlight-color:transparent}#contacts .header .flex .hamburger-menu-button,#mails .header .flex .hamburger-menu-button,#settings_page .header .flex .hamburger-menu-button{-webkit-tap-highlight-color:transparent;margin-right:1rem}#contacts .header .flex h4,#mails .header .flex h4,#settings_page .header .flex h4{flex:1}#contacts .header .flex .icon,#mails .header .flex .icon,#settings_page .header .flex .icon{height:2.2rem;width:2.2rem;padding:.6rem;margin-left:-.4rem;cursor:pointer}#contacts .header .flex sm-menu,#mails .header .flex sm-menu,#settings_page .header .flex sm-menu{margin-right:-.7rem}#chat #type_message,#contacts .header sm-button,#mails .header sm-button,#settings_page .header sm-button{margin:0}#contacts .header sm-button .icon,#mails .header sm-button .icon,#settings_page .header sm-button .icon{height:.9rem;width:.9rem;align-self:center;stroke-width:8;margin-left:0;margin-right:.5rem}#chat_page{overflow-y:hidden}#chat{height:100%}#chat header{padding:1rem;min-height:4rem;grid-template-columns:auto 1fr auto}#chat header .back-button{padding:.1rem;stroke-width:8;margin-right:.5rem;stroke:rgba(var(--text-color),.8)}#chat header .initial{cursor:pointer;margin-right:1rem;height:2.2rem;width:2.2rem}#chat header h4{font-weight:500;font-size:.9rem}#chat header #receiver_name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#chat #scroll_to_bottom{position:fixed;right:0;bottom:4rem;width:2.6rem;height:2.6rem;padding:.9rem;border-radius:4rem;z-index:1;margin:1.5rem;stroke-width:8;cursor:pointer;transform:scale(0);transition:transform .3s}#chat footer #emoji_toggle{align-self:center;padding:.6rem;width:2.6rem;height:2.6rem;border-radius:2rem;cursor:pointer}#chat footer #emoji_toggle path{fill:rgba(var(--text-color),.5)}#chat footer #emoji_toggle.active path{fill:var(--accent-color)}#chat footer .flex{align-items:flex-end;padding:1rem 1rem 1rem .4rem}#chat footer sm-textarea::part(textarea){background:rgba(var(--text-color),.1);padding-right:3rem;border-radius:2rem}#chat #send_message_button{position:absolute;right:1.5rem;transform:scale(0);opacity:0;pointer-events:none;z-index:1;align-self:center;height:2.4rem;width:2.4rem;padding:.5rem;cursor:pointer;stroke:none;fill:rgba(var(--text-color),.4);margin-left:1rem;transition:.3s}#chat #send_message_button.active{opacity:1;fill:var(--accent-color);transform:none;pointer-events:all}#chat .message{position:relative;display:grid;grid-auto-flow:column;align-items:center;gap:.5rem;width:100%;font-size:.92rem;max-width:max-content;margin-bottom:.2rem;margin-top:.8rem}#chat .message .message-body{display:inline-flex;align-items:center;flex-wrap:wrap;word-break:break-all;word-break:break-word;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;white-space:pre-wrap;padding:.6em 1em;line-height:1.6}#chat .message .message-body a{color:inherit}#chat .message .message-body .text-emoji{align-self:center;font-size:1.4em;letter-spacing:0ch}#chat .message .time{white-space:nowrap;font-size:.8em;opacity:.8}#chat .sent{margin-left:auto}#chat .sent::after{content:"";position:absolute;left:100%;top:0;width:0;height:0;border-style:solid;border-width:.5em .3em 0 0;border-color:var(--accent-color) transparent transparent}#chat .sent .message-body{background:var(--accent-color);color:#f0f0f0;border-radius:1.5em 0 1.5em 1.5em}#chat .sent .time{grid-column:1}#chat .received::after{content:"";position:absolute;left:-.5em;top:0;width:0;height:0;border-style:solid;border-width:0 .5em .5em 0;border-color:transparent rgba(var(--text-color),.1) transparent transparent}#chat .received .message-body{background:rgba(var(--text-color),.1);border-radius:0 1.5em 1.5em}#chat .received+.received,#chat .sent+.sent{margin-top:0}#chat .received+.received::after,#chat .sent+.sent::after{display:none}#chat .received+.received .message-body,#chat .sent+.sent .message-body{border-radius:1.5em}#chat .unconfirmed{opacity:.7;transform-origin:right;animation:slide-up .3s forwards}@keyframes slide-up{from{transform:translateY(-2rem)}to{transform:none}}.big-emoji::after{display:none}.big-emoji .message-body{background:0 0!important;padding:0!important;font-size:2.6rem}#messages_container{flex:1;padding:0 1rem}#emoji_picker{display:grid;gap:1rem;background:rgba(var(--text-color),.06);border-radius:1rem;margin:0 1rem;box-shadow:0 .2rem .8rem rgba(0,0,0,.3);overflow-y:auto;max-height:30vh}#emoji_picker section{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.6rem,1fr));gap:.5rem;padding:0 1rem;width:100%}#emoji_picker .section-header{grid-column:1/-1;position:sticky;top:0;background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),rgba(var(--foreground-color),1);padding:1rem 0;z-index:1}.emoji{font-size:1.6rem;cursor:pointer;padding:.4rem;border-radius:.6rem;user-select:none;text-align:center}#new_conversation,#no_mails{height:100%;justify-content:center;text-align:center;padding:1.5rem}#new_conversation p,#no_mails p{margin-top:.8rem}#no_mails .new-conversation{height:7rem;margin-bottom:1rem}.new-conversation{height:8rem;width:8rem;align-self:center;stroke-width:16;stroke:rgba(var(--text-color),.4)}#chat_container,#inbox_mail_container,#mail,#messages_container,#sent_mail_container{width:100%;flex-direction:column;height:100%;overflow-y:auto}#chat_container:empty{display:none}#chat_container:not(:empty)~.empty-state{display:none}#chat_container{padding-bottom:6rem}sm-tab-panels{overflow:hidden auto}sm-panel{width:100%;overflow-y:auto}#inbox_mail_container,#sent_mail_container{padding-bottom:5rem}#chat,#mail{background:rgba(var(--foreground-color),1)}#mail{height:100vh;padding:0 1.5rem;align-items:flex-start}#mail .flex{margin-top:1rem}#mail .flex sm-button:first-of-type{margin-right:.5rem}#compose_mail_popup sm-input{margin-bottom:1rem}.sidebar-item{display:flex;align-items:center;padding:1rem 1.5rem;text-transform:capitalize;font-weight:500;opacity:.9}.sidebar-item .icon{margin-right:1em;width:1em}.back{padding:.7rem;height:2.4rem;width:2.4rem;margin-left:-.5rem;cursor:pointer;stroke-width:8;opacity:.8;-webkit-tap-highlight-color:transparent}.back:hover{opacity:1}#settings_page #settings_sidebar header{padding:1rem 1.5rem}#settings_page .flex sm-button{margin:0;margin-left:1rem}#settings_page sm-switch{padding-left:1rem}#settings_page sm-button{width:100%}#settings_page #settings_title{text-transform:capitalize}#settings_page #settings_sidebar{height:100%}#settings_page #settings_panel{padding:0 1.5rem}#settings_page section{max-width:50ch;display:grid;gap:.3rem}#settings_page section:not(:last-of-type){margin-bottom:1.5rem}#settings_page section.setting-toggle{grid-template-columns:1fr auto}#settings_page section.setting-toggle sm-switch{grid-column:2;grid-row:1/3}#settings_page section.setting-toggle>h4,#settings_page section.setting-toggle>p{grid-column:1}#settings_page #sign_out::part(button){color:var(--error-color)}@media screen and (max-width:640px){.hide-on-mobile{position:fixed;max-height:0;opacity:0;pointer-events:none}#landing{grid-template-areas:"illustration" ".";align-items:flex-start}#landing .title-font{text-align:center;font-size:2rem;font-weight:500}#landing sm-button{display:flex;width:100%!important}#sing_in{max-height:90vh}#landing_illustration{grid-area:illustration}#main_navbar{transform:translateX(-100%);transition:transform .3s;z-index:4;box-shadow:0 0 1rem rgba(0,0,0,.3)}#main_navbar .logo-section{padding:1rem}#navbar_backdrop{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.3);z-index:2;transition:transform .3s,opacity .3s}#chat_container,#contact_container{gap:.2rem}#chat .message{width:fit-content;max-width:90%}#settings_page{overflow-x:hidden}#settings_page #settings_panel header{position:sticky;top:0;padding:1rem 0;margin-bottom:.5rem;background:rgba(var(--foreground-color),1)}}@media only screen and (min-width:640px){::-webkit-scrollbar{width:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.hide-on-desktop{display:none!important}.page{padding-bottom:0}.fab{position:absolute}.logo-section{padding:2rem 3rem 0;margin:.5rem 0}sm-popup::part(popup){width:24rem;min-width:24rem}#landing{align-items:center;gap:4vw;grid-template-columns:1fr 1fr;padding:0 4vw}#landing .left h4{color:var(--accent-color)}#sign_in_popup .popup-header{padding-top:1.5rem}#main_navbar{position:relative;width:auto;padding-bottom:.5rem;background:rgba(var(--text-color),.06)}#main_navbar .logo-section{display:flex;justify-content:center;margin:1.5rem 0}#main_navbar .logo-section .main-logo{margin:0}#main_navbar .navbar-item{margin:0 .5rem;border-radius:.8rem}#main_navbar .navbar-item .icon{margin-right:0}#main_navbar .label{display:none}#add_contact_popup::part(popup){min-width:24rem}#compose_mail_popup::part(popup),#reply_mail_popup::part(popup){min-width:36rem}#main{width:100vw;height:100vh;grid-template-columns:auto 1fr}#emoji_picker{max-height:18rem}#chat .message .message-body{max-width:65ch}#chat_page,#mail_page{grid-template-columns:20rem 1fr;box-shadow:0 0 1rem rgba(0,0,0,.1);z-index:1}#settings_page{display:grid;height:100vh;box-shadow:0 0 1rem rgba(0,0,0,.1);grid-template-columns:14rem 1fr}#settings_page sm-button{width:max-content}#settings_page #settings_panel{padding:1.5rem}#settings_page .active{background:rgba(var(--text-color),.1)}.contact.active,.mail-card.active{background:rgba(var(--text-color),.06)}.card{display:inline-flex;width:auto}#settings_panel{overflow-y:auto;max-height:100vh}}@media only screen and (min-width:1280px){#landing{gap:4vw;padding:0 8vw}#landing .title-font{font-size:3rem}#chat_page,#mail_page{grid-template-columns:21rem 1fr}#chat header{padding:.8rem 1.5rem}#chat #messages_container{padding:1rem 5rem}}@media (hover:hover){.contact:hover,.mail-card:hover,.navbar-item:hover{background:rgba(var(--text-color),.06);cursor:pointer}.contact .menu{opacity:0;transition:opacity .3s}.contact:hover .menu{opacity:1}.emoji:hover{background:rgba(var(--text-color),.1)}}@media (hover:none){.contact .menu{display:none}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 0256cf9..2c08238 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -526,15 +526,17 @@ sm-button[variant="primary"]{
     padding: 0.8rem 1.5rem;
     align-items: center;
     flex-shrink: 0;
-    &.chat{
-        grid-template-columns: auto 1fr auto;
-        grid-template-areas: 'dp . menu'
-        'dp . .';
-    }
+    overflow: hidden;
     &:not(.chat){
         grid-template-columns: auto 1fr;
         grid-template-areas: 'dp .';
     }
+    &.chat,
+    &.group{
+        grid-template-columns: auto 1fr auto;
+        grid-template-areas: 'dp . time'
+                            'dp . menu';
+    }
     .initial{
         grid-area: dp;
     }
@@ -542,9 +544,11 @@ sm-button[variant="primary"]{
         font-size: 1em;
         font-weight: 500;
         color: rgba(var(--text-color), 0.8);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
     }
     .last-message{
-        grid-column: 2/4;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -552,11 +556,16 @@ sm-button[variant="primary"]{
         font-size: 0.9em;
         color: rgba(var(--text-color), 0.9);
     }
+    .menu{
+        grid-area: menu;
+        justify-self: flex-end;
+        padding: 0.2rem;
+        fill: rgba(var(--text-color), 1);
+    }
     .time{
         font-weight: 400;
         opacity: 0.8;
-        grid-area: menu;
-        align-self: flex-start;
+        grid-area: time;
     }
 }
 #contact_details_popup{
@@ -596,6 +605,7 @@ sm-button[variant="primary"]{
         border-radius: 0.5rem;
         max-width: 30ch;
         padding: 0.6rem 1.2rem;
+        overflow-wrap: break-word;
         &:focus{
             outline: none;
             background: rgba(var(--text-color), 0.1);
@@ -616,8 +626,7 @@ sm-button[variant="primary"]{
     background: rgb(255, 253, 141);
     color: #111;
 }
-.mail-card.unread::before,
-.contact.unread .initial::before{
+.mail-card.unread::before{
     content: '';
     position: absolute;
     padding: 0.4rem;
@@ -626,6 +635,21 @@ sm-button[variant="primary"]{
     left: 0;
     background: var(--accent-color);
 }
+.contact .initial::after{
+    content: '';
+    position: absolute;
+    height: calc(100% + 0.8rem);
+    width: calc(100% + 0.8rem);
+    border: solid var(--accent-color) 0.2rem;
+    border-radius: 100%;
+    transform: scale(0.8);
+    opacity: 0;
+    transition: transform 0.3s, opacity 0.3s;
+}
+.contact.unread .initial::after{
+    transform: scale(1);
+    opacity: 1;
+}
 .mail-card.unread,
 .contact.unread{
     .time{
@@ -757,7 +781,7 @@ sm-button[variant="primary"]{
         justify-content: flex-start;
         flex-direction: row;
         flex: none;
-        padding: 1rem 1.2rem;
+        padding: 1rem;
         .icon{
             height: 1.2rem;
             width: 2.4rem;
@@ -827,7 +851,7 @@ sm-button[variant="primary"]{
         z-index: 1;
         background: rgba(var(--foreground-color), 1);
         .header{
-            padding-bottom: 1rem;
+            padding-top: 0.7rem;
         }
     }
     .option{
@@ -874,9 +898,10 @@ sm-button[variant="primary"]{
     overflow-y: hidden;
     .header{
         //background: rgba(var(--text-color), 0.06);
-        padding: 1rem 1.5rem 0 1.5rem;
+        padding: 1rem 1.5rem 1rem 1.5rem;
         position: relative;
         gap: 0.5rem;
+        min-height: 4rem;
         // margin-bottom: 1rem;
         sm-tab::part(tab){
             padding: 0.8rem 1rem;
@@ -886,22 +911,14 @@ sm-button[variant="primary"]{
             width: 100%;
             padding: 0.7rem 1.5rem;
             background: rgba(var(--foreground-color), 1);
+            transform: scale(0.9);
             opacity: 0;
             pointer-events: none;
-            transition: opacity 0.3s;
+            transition: opacity 0.3s, transform 0.3s;
             &.expand{
                 transform: none;
                 opacity: 1;
                 pointer-events: all;
-                sm-input,
-                .back{
-                    transform: none;
-                }
-            }
-            sm-input,
-            .back{
-                transform: translateX(0.5rem);
-                transition: transform 0.3s;
             }
         }
         sm-input{
@@ -915,10 +932,11 @@ sm-button[variant="primary"]{
         }
         sm-input::part(input){
             border-radius: 3rem;
-            padding: 0.3rem 0.8rem;
+            padding: 0.2rem 0.8rem;
         }
         h4{
             text-transform: capitalize;
+            font-weight: 500;
         }
         .icon{
             -webkit-tap-highlight-color: transparent;
@@ -959,9 +977,11 @@ sm-button[variant="primary"]{
     overflow-y: hidden;
 }
 #chat{
-    height: 100vh;
+    height: 100%;
     header{
-        padding: 0.5rem 1rem;
+        padding: 1rem;
+        min-height: 4rem;
+        grid-template-columns: auto 1fr auto;
         .back-button{
             padding: 0.1rem;
             stroke-width: 8;
@@ -971,11 +991,18 @@ sm-button[variant="primary"]{
         .initial{
             cursor: pointer;
             margin-right: 1rem;
+            height: 2.2rem;
+            width: 2.2rem;
         }
         h4{
             font-weight: 500;
             font-size: 0.9rem;
         }
+        #receiver_name{
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
     }
     #scroll_to_bottom{
         position: fixed;
@@ -993,7 +1020,7 @@ sm-button[variant="primary"]{
         transition: transform 0.3s;
     }
     footer{
-        #toggle_emoji{
+        #emoji_toggle{
             align-self: center;
             padding: 0.6rem;
             width: 2.6rem;
@@ -1050,7 +1077,7 @@ sm-button[variant="primary"]{
         align-items: center;
         gap: 0.5rem;
         width: 100%;
-        font-size: 0.9rem;
+        font-size: 0.92rem;
         max-width: max-content;
         margin-bottom: 0.2rem;
         margin-top: 0.8rem;
@@ -1067,7 +1094,7 @@ sm-button[variant="primary"]{
             hyphens: auto;
             white-space: pre-wrap;
             padding: 0.6em 1em;
-            line-height: 1.5;
+            line-height: 1.6;
             a{
                 color: inherit;
             }
@@ -1158,7 +1185,7 @@ sm-button[variant="primary"]{
         font-size: 2.6rem;
     }
 }
-#chat_container{
+#messages_container{
     flex: 1;
     padding: 0 1rem;
 }
@@ -1217,8 +1244,8 @@ sm-button[variant="primary"]{
     stroke-width: 16;
     stroke: rgba(var(--text-color), 0.4);
 }
+#messages_container,
 #chat_container,
-#dm_container,
 #inbox_mail_container,
 #sent_mail_container,
 #mail{
@@ -1227,14 +1254,14 @@ sm-button[variant="primary"]{
     height: 100%;
     overflow-y: auto;
 }
-#dm_container:empty{
+#chat_container:empty{
     display: none;
 }
-#dm_container:not(:empty) ~ .empty-state{
+#chat_container:not(:empty) ~ .empty-state{
     display: none;
 }
-#dm_container{
-    padding-bottom: 5rem;
+#chat_container{
+    padding-bottom: 6rem;
 }
 sm-tab-panels{
     overflow: hidden auto;
@@ -1384,18 +1411,11 @@ sm-panel{
         z-index: 2;
         transition: transform 0.3s, opacity 0.3s;
     }
-    #dm_container,
+    #chat_container,
     #contact_container{
         gap: 0.2rem;
     }
     #chat{
-        header{
-            padding: 1rem;
-            .initial{
-                width: 2rem;
-                height: 2rem;
-            }
-        }
         .message{
             width: fit-content;
             max-width: 90%;
@@ -1472,7 +1492,7 @@ sm-panel{
         }
         .navbar-item{
             margin: 0 0.5rem;
-            border-radius: 0.5rem;
+            border-radius: 0.8rem;
             .icon{
                 margin-right: 0;
             }
@@ -1549,9 +1569,9 @@ sm-panel{
     }
     #chat{
         header{
-            padding: 0.5rem 1.5rem;
+            padding: 0.8rem 1.5rem;
         }
-        #chat_container{
+        #messages_container{
             padding: 1rem 5rem;
         }
     }
@@ -1561,15 +1581,19 @@ sm-panel{
         background: rgba(var(--text-color), 0.06);
         cursor: pointer;
     }
-    .contact sm-menu{
+    .contact .menu{
         opacity: 0;
         transition: opacity 0.3s;
     }
-    .contact:hover sm-menu,
-    sm-menu:focus-within{
+    .contact:hover .menu{
         opacity: 1;
     }
     .emoji:hover{
         background: rgba(var(--text-color), 0.1);
     }
+}
+@media (hover: none){
+    .contact .menu{
+        display: none;
+    }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 91eec7c..4ad131f 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="css/main.min.css">
 </head>
 
-<body data-theme="light" onload="onLoadStartUp()">
+<body data-theme="light" onload="onLoadStartUp()" class="hide-completely">
     <audio id="notification_sound">
         <source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg">
         <source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg">
@@ -277,12 +277,9 @@
     </template>
 
 	<template id="contact_template">
-		<div class="contact interact">
+		<div class="contact">
 			<div class="initial flex align-center"></div>
 			<h4 class="name"></h4>
-            <!--<sm-menu align-options="right">
-                <sm-menu-option class="send-mail-option">Send mail</sm-menu-option>
-            </sm-menu>-->
 		</div>
 	</template>
 
@@ -339,7 +336,7 @@
                             <line y1="32" x2="64" y2="32"/>
                             <line y1="53.34" x2="64" y2="53.34"/>
                         </svg>
-                        <h4>Chat</h4>
+                        <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"/>
@@ -363,11 +360,6 @@
                             </svg>
                         </sm-input>
                     </div>
-                    <sm-tab-header target="chat_panels">
-                        <sm-tab>Direct</sm-tab>
-                        <sm-tab>Groups</sm-tab>
-                        <sm-tab>Notes</sm-tab>
-                    </sm-tab-header>
                 </header>
                 <sm-button variant="primary" id="new_message_button" onclick="showContacts()" class="fab round">
                     <svg xmlns="http://www.w3.org/2000/svg"class="icon" viewBox="0 0 64 64">
@@ -377,24 +369,18 @@
                     </svg>
                     New chat
                 </sm-button>
-                <sm-tab-panels id="chat_panels">
-                    <sm-panel>
-                        <div id="dm_container" class="flex"></div>
-                        <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>                  
-                            <h4>Add a contact for getting started</h4>
-                            <p class="light-text">Tap/click on added contact to start a conversation</p>
-                        </div>
-                    </sm-panel>
-                    <sm-panel></sm-panel>
-                    <sm-panel></sm-panel>
-                </sm-tab-panels>
+                <div id="chat_container" class="flex"></div>
+                <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>                  
+                    <h4>Add a contact for getting started</h4>
+                    <p class="light-text">Tap/click on added contact to start a conversation</p>
+                </div>
                 <div id="all_contacts" class="flex direction-column hide-completely">
                     <header class="grid header">
                         <div class="flex align-center">
@@ -440,17 +426,19 @@
                 </div>
 			</div>
 			<div id="chat" class="flex direction-column hide-on-mobile hide-completely">
-				<header class="flex align-center">
+				<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">
                         <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"/>
                     </svg>
-                    <div id="receiver_initial" onclick="showPopup('contact_details_popup')" class="initial flex align-center"></div>
-                    <h4 id="receiver_name"></h4>
+                    <div class="flex align-center interact" onclick="showPopup('contact_details_popup')">
+                        <div id="receiver_initial" class="initial flex align-center"></div>
+                        <h4 id="receiver_name"></h4>
+                    </div>
 				</header>
                 <h5 id="warn_no_encryption">Messages are not encrypted until receiver replies</h5>
-				<section id="chat_container" class="flex direction-column">
+				<section id="messages_container" class="flex direction-column">
                 </section>
                 <svg id="scroll_to_bottom" onclick="scrollToBottom()" class="icon" viewBox="0 0 64 64">
                     <title></title>
@@ -459,7 +447,7 @@
 				<footer class="grid">
                     <div id="emoji_picker" class="hide-completely"></div>
                     <div class="flex">
-                        <svg id="toggle_emoji" onclick="toggleEmoji(this)" 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()" 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"/>
@@ -777,7 +765,7 @@
             return color;
         }
 
-        const selectedColors = ['#FF1744', '#F50057', '#8E24AA', '#5E35B1', '#3F51B5', '#3D5AFE', '#00B0FF', '#00BCD4', '#1DE9B6', '#66BB6A', '#8BC34A', '#FBC02D', '#FF6F00', '#FF9100', '#FF3D00']
+        const selectedColors = ['#FF1744', '#F50057', '#8E24AA', '#5E35B1', '#3F51B5', '#3D5AFE', '#00B0FF', '#00BCD4', '#16c79a', '#66BB6A', '#8BC34A', '#11698e', '#FF6F00', '#FF9100', '#FF3D00']
         function randomColor(){
             return selectedColors[Math.floor(Math.random() * selectedColors.length)]
         }
@@ -984,32 +972,32 @@
                 }
             })
 
-            function createRipple(event, target) {
-                const circle = document.createElement("span");
-                const diameter = Math.max(target.clientWidth, target.clientHeight);
-                const radius = diameter / 2;
-                circle.style.width = circle.style.height = `${diameter}px`;
-                circle.style.left = `${event.clientX - (target.getBoundingClientRect().left + radius)}px`;
-                circle.style.top = `${event.clientY - (target.getBoundingClientRect().top + radius)}px`;
-                circle.classList.add("ripple");
-                const rippleAnimation = circle.animate([
-
-                    {
-                        transform: 'scale(3)',
-                        opacity: 0
-                    }
-                ],
-                    {
-                        duration: 1000,
-                        fill: "forwards",
-                        easing: 'ease-out'
-                    })
-                target.append(circle);
-                rippleAnimation.onfinish = () => {
-                    circle.remove()
-                }
-            }
         })
+        function createRipple(event, target) {
+            const circle = document.createElement("span");
+            const diameter = Math.max(target.clientWidth, target.clientHeight);
+            const radius = diameter / 2;
+            circle.style.width = circle.style.height = `${diameter}px`;
+            circle.style.left = `${event.clientX - (target.getBoundingClientRect().left + radius)}px`;
+            circle.style.top = `${event.clientY - (target.getBoundingClientRect().top + radius)}px`;
+            circle.classList.add("ripple");
+            const rippleAnimation = circle.animate([
+
+                {
+                    transform: 'scale(3)',
+                    opacity: 0
+                }
+            ],
+                {
+                    duration: 1000,
+                    fill: "forwards",
+                    easing: 'ease-out'
+                })
+            target.append(circle);
+            rippleAnimation.onfinish = () => {
+                circle.remove()
+            }
+        }
 
         function generateId() {
             getRef('generate_flo_id').classList.add('hide-completely')
@@ -1107,12 +1095,13 @@
     </script>
     <script id="onLoadStartUp">
         function onLoadStartUp() {
+            document.body.classList.remove('hide-completely')
             privKeyNotSecured = true;
 
             //display loading screen
             getRef('loading_page').classList.remove("hide-completely")
             //clear Rendered Elements
-            let elementsToReset = ['inbox_mail_container', 'sent_mail_container', 'contacts_container', 'dm_container', 'chat_container',
+            let elementsToReset = ['inbox_mail_container', 'sent_mail_container', 'contacts_container', 'chat_container', 'messages_container',
                  'receiver_name', 'mail_contact_list'
             ]
             //, "backup_info"
@@ -1133,6 +1122,7 @@
                         floGlobals.appendix = data.appendix;
                         floGlobals.groups = data.groups;
                         floGlobals.chats = data.chats
+                        floGlobals['marked'] = data.marked
                         renderContactList(floGlobals.contacts)
                         renderChatList()
                         renderMailList(data.mails, false)
@@ -1235,14 +1225,15 @@
                 card.querySelector('.mail-content').textContent = content
                 return card
             },
-            async contactCard(floID, name, type, prepend = false){
+            async contactCard(floID, name, type, options = {}){
+                let {prepend = false, markUnread = false} = options
                 let card = getRef('contact_template').content.cloneNode(true),
                     cardContainer = card.firstElementChild
                 cardContainer.setAttribute("name", name || 'Unknown')
                 cardContainer.setAttribute("flo-id", floID)
-                cardContainer.querySelector('.name').textContent = name || 'Unknown'
+                cardContainer.querySelector('.name').textContent = name || floID
                 let initial = card.querySelector('.initial')
-                initial.textContent = name ? name.charAt(0) : 'U'
+                initial.textContent = name ? name.charAt(0) : floID.charAt(0)
                 let color = contactColor(floID)
                 //cardContainer.setAttribute("text-color", randomColor.primary)
                 cardContainer.setAttribute("background-color", color)
@@ -1255,23 +1246,36 @@
                 }
                 else{
                     //render chat card for newly added contact
-                    cardContainer.classList.add('chat')
-                    if(prepend){
+                    if(type === 'chat')
+                        cardContainer.classList.add('chat')
+                    else    
+                        cardContainer.classList.add('group')
+                    if(markUnread)
+                        cardContainer.classList.add('unread')
+                    messenger.getChat(floID).then(chat => {
+                        let lastMessage = {message: '', time: 0}
+                        if(Object.values(chat).length){
+                            lastMessage = Object.values(chat).pop()
+                        }
+                        else if(type === 'group'){
+                            lastMessage.time = floGlobals.groups[floID].created
+                        }
                         cardContainer.innerHTML += `
-                            <h5 class="last-message"></h5>
-                            <h5 class="time"></h5>`
-                        getRef('dm_container').prepend(card);
-                        getRef('dm_container').children[0].click()
+                        <p class="last-message">${lastMessage.message}</p>
+                        <h5 class="time">${getFormatedTime(lastMessage.time, true)}</h5>
+                        <svg class="icon menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+                            <circle cx="5.59" cy="32" r="5.59"/>
+                            <circle cx="58.41" cy="32" r="5.59"/>
+                            <circle cx="31.89" cy="32" r="5.59"/>
+                        </svg>`
+                    })
+                    .catch(error => console.error(error))
+                    if(prepend){
+                        getRef('chat_container').prepend(card);
+                        getRef('chat_container').children[0].click()
                     }
                     else{
-                        messenger.getChat(floID).then(chat => {
-                            const lastMessage = Object.values(chat).pop()
-                            cardContainer.innerHTML += `
-                            <p class="last-message">${lastMessage.message}</p>
-                            <h5 class="time">${getFormatedTime(lastMessage.time, true)}</h5>`
-                        })
-                        .catch(error => console.log(error))
-                        getRef('dm_container').append(card);
+                        getRef('chat_container').append(card);
                     }
                 }
             },
@@ -1409,7 +1413,7 @@
             }
             if(e.target.closest('#search_chats')){
                 if(e.code === 'ArrowDown'){
-                    for(child of getRef('dm_container').children){
+                    for(child of getRef('chat_container').children){
                         if(!child.classList.contains('hide-completely')){
                             child.focus()
                             break
@@ -1446,7 +1450,7 @@
         })
 
         const chatScrollInfo = {};
-        getRef('chat_container').addEventListener('scroll', function() {
+        getRef('messages_container').addEventListener('scroll', function() {
             chatScrollInfo['scrollTop'] = this.scrollTop
             chatScrollInfo['scrollheight'] = this.scrollHeight
             if((this.scrollHeight > this.clientHeight) && (this.scrollHeight - this.clientHeight - this.scrollTop >= 100)){
@@ -1475,7 +1479,7 @@
 
         getRef('search_chats').addEventListener('input', function() {
             if(this.value.trim !== ''){
-                for(child of getRef('dm_container').children) {
+                for(child of getRef('chat_container').children) {
                     if(child.getAttribute('name').toUpperCase().indexOf(this.value.toUpperCase()) > -1){
                         child.classList.remove('hide-completely')
                     }
@@ -1486,7 +1490,7 @@
             }
         })
 
-        document.addEventListener('pointerdown', e => {
+        document.addEventListener('click', e => {
             if(e.target.closest('.sidebar-item')){
                 let target = e.target.closest('.sidebar-item')
                 if(target.dataset.target)
@@ -1521,9 +1525,6 @@
 			if(e.target.closest('#new_mail_button')){
                 showPopup('compose_mail_popup')
             }
-            if(e.target.closest('#chat')){
-                messenger.removeMark(activeChat['receiver'], "unread");
-            }
 
             //Detect click on send mail option 
             if (e.target.closest(".send-mail-option")){
@@ -1552,6 +1553,15 @@
                     }, 0);
                 }
             }
+            // 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'))){
+                isEmojiPickerOpen = false
+                getRef('emoji_toggle').classList.remove('active')
+                getRef('emoji_picker').classList.add('hide-completely')
+                getRef('scroll_to_bottom').setAttribute('style', `top: calc(${getRef('messages_container').getBoundingClientRect().height}px - 1.5rem`)
+                if(!chatScrollInfo.scrolledUp)
+                    scrollToBottom()
+            }
         })
 
         let clickedContact = {}
@@ -1562,13 +1572,14 @@
                 clickedContact['card'] = contact
                 clickedContact['floID'] = contact.getAttribute("flo-id")
                 clickedContact['name'] = contact.getAttribute("name")
-                if(e.target.closest(".initial") || e.target.closest("sm-menu")){
+                if(e.target.closest(".initial") || e.target.closest(".icon")){
                     showPopup('contact_details_popup')
                 }
                 else if(isCreatingGroup){
                     // code for adding group members
                 }
                 else{
+                    createRipple(e, contact)
                     contact.classList.remove('unread')
                     if(activeChat['chatCard'] === contact && window.innerWidth > 640) return
                     document.title = `FLO Messenger`
@@ -1641,6 +1652,7 @@
         }
         let renderedEmojis = ''
         let emojiSectionCounter = 0
+        let isEmojiPickerOpen = false
         let emojiSections = ['Smileys', 'Gestures and Body Parts', 'People and Fantasy', 'Clothing and Accessories', 'Animals & Nature', 'Food & Drink', 'Activity and Sports']
         renderedEmojis += `
             <section id="recent_emoji_section">
@@ -1664,14 +1676,19 @@
                 emojis += `<span class="emoji">${emoji}</span>`
             })
             getRef('recent_emoji_section').innerHTML = ''
-            getRef('recent_emoji_section').innerHTML = emojis
+            if(recentEmojis.length)
+                getRef('recent_emoji_section').innerHTML = emojis
         }
         renderRecentEmojis()
 
         function toggleEmoji(button){
-            button.classList.toggle('active')
+            getRef('emoji_toggle').classList.toggle('active')
             getRef('emoji_picker').classList.toggle('hide-completely')
-            getRef('scroll_to_bottom').setAttribute('style', `top: calc(${getRef('chat_container').getBoundingClientRect().height}px - 1.5rem`)
+            getRef('scroll_to_bottom').setAttribute('style', `top: calc(${getRef('messages_container').getBoundingClientRect().height}px - 1.5rem`)
+            if(getRef('emoji_picker').classList.contains('hide-completely'))
+                isEmojiPickerOpen = false
+            else
+                isEmojiPickerOpen = true
             if(!chatScrollInfo.scrolledUp)
                 scrollToBottom()
         }
@@ -1721,7 +1738,7 @@
                 getRef('all_contacts').classList.remove('hide-completely')
                 contactsDrawerAnimation = animateTo(getRef('all_contacts'), [
                     {transform: 'translateY(2rem)'},
-                    {transform: 'none'},
+                    {transform: 'translateY(0)'},
                 ],{
                     duration: 300,
                     easing: 'ease'
@@ -1800,11 +1817,11 @@
                 return
             }
             else{
-                if(e.code === "Enter" && (e.code === "ShiftLeft" || e.code === "ShiftRight")){
+                if(e.code === "Enter" && e.shiftKey){
                     e.preventDefault()
                     getRef('type_message').value += '\r\n';
                 }
-                else if(e.code === "Enter" && isEnterSend){
+                else if(!e.shiftKey && e.code === "Enter" && isEnterSend){
                     e.preventDefault()
                     sendMessage()
                 }
@@ -1906,20 +1923,20 @@
                 getRef('type_message').focusIn()
             let receiver = activeChat['receiver']
             let container;
-            let message = getRef('type_message').value;
+            let message = getRef('type_message').value.trim();
 			getRef('type_message').value = ''
-            if(message.trim() === '') return
+            if(message === '') return
             let time = Date.now()
-            getRef('chat_container').append(render.messageBubble(receiver, message, time, 'sent', true))
+            getRef('messages_container').append(render.messageBubble(receiver, message, time, 'sent', true))
             scrollToBottom(true)
-            const contact = getRef('dm_container').querySelector(`.chat[flo-id="${receiver}"]`)
+            const contact = getRef('chat_container').querySelector(`.chat[flo-id="${receiver}"]`)
             if(contact){
-                if(activeChat['chatCard'] !== getRef('dm_container').children[0]){
+                if(activeChat['chatCard'] !== getRef('chat_container').children[0]){
                     const cloneContact = contact.cloneNode(true)
                     contact.remove()
                     activeChat['chatCard'] = cloneContact
-                    getRef('dm_container').prepend(cloneContact)
-                    animateTo(getRef('dm_container').children[0], [
+                    getRef('chat_container').prepend(cloneContact)
+                    animateTo(getRef('chat_container').children[0], [
                             {transform: 'translateY(1rem)'},
                             {transform: 'none'},
                         ],
@@ -1932,7 +1949,7 @@
             }
             else{
                 messenger.addChat(receiver)
-                render.contactCard(receiver, floGlobals.contacts[receiver], 'chat', true)
+                render.contactCard(receiver, floGlobals.contacts[receiver], 'chat', {prepend: true})
             }
             messenger.sendMessage(message, receiver).then(data => {
                 getRef(`${receiver}_${time}`).classList.remove('unconfirmed')
@@ -1974,11 +1991,17 @@
         }
 
         async function renderChatList() {
-            getRef('dm_container').innerHTML = ''
-            for (floID of messenger.getChatOrder().direct){
-                render.contactCard(floID, floGlobals.contacts[floID], 'chat')
+            getRef('chat_container').innerHTML = ''
+            for (floID of messenger.getChatOrder().mixed){
+                const markUnread = floGlobals.marked[floID]?.[0] === 'unread' ? true : false
+                let type
+                if(floGlobals.chats[floID])
+                    type = 'chat'
+                else if(floGlobals.groups[floID])
+                    type = 'group'
+                render.contactCard(floID, floGlobals.contacts[floID], type, {markUnread})
             }
-            chatMutationObserver.observe(getRef('chat_container'), {childList: true})
+            chatMutationObserver.observe(getRef('messages_container'), {childList: true})
         }
 
         function renderMarked(data) {
@@ -1990,7 +2013,7 @@
         }
 
         function scrollToBottom(smooth = false){
-            getRef('chat_container').scrollTo({top: getRef('chat_container').scrollHeight, behaviour: smooth ? 'smooth': ''})
+            getRef('messages_container').scrollTo({top: getRef('messages_container').scrollHeight, behaviour: smooth ? 'smooth': ''})
         }
 
         let startIndex = 0,
@@ -2021,14 +2044,14 @@
                 //Stops message from rendering in wrong chat window
                 if(activeChat['receiver'] && activeChat['receiver'] === floID)
                     frag.append(render.messageBubble(floID, message, time, category))
-                const contact = getRef('dm_container').querySelector(`.chat[flo-id='${floID}']`)
+                const contact = getRef('chat_container').querySelector(`.chat[flo-id='${floID}']`)
                 if (markUnread && contact){
                     contact.classList.add("unread");
-                    if(activeChat['chatCard'] !== getRef('dm_container').children[0] || contact !== getRef('dm_container').children[0]){
+                    if(contact !== getRef('chat_container').children[0]){
                         const cloneContact = contact.cloneNode(true)
                         contact.remove()
-                        getRef('dm_container').prepend(cloneContact)
-                        animateTo(getRef('dm_container').children[0], [
+                        getRef('chat_container').prepend(cloneContact)
+                        animateTo(getRef('chat_container').children[0], [
                                 {transform: 'translateY(1rem)'},
                                 {transform: 'none'},
                             ],
@@ -2040,7 +2063,7 @@
                     }
                 }
                 if(updateChatCard){
-                    const chatCard = getRef('dm_container').querySelector(`[flo-id="${floID}"]`)
+                    const chatCard = getRef('chat_container').querySelector(`[flo-id="${floID}"]`)
                     chatCard.querySelector('.last-message').textContent = message
                     chatCard.querySelector('.time').textContent = getFormatedTime(time, true)
                 }
@@ -2048,15 +2071,15 @@
             endIndex = startIndex
             if(!lazyLoad && !reRender){
                 endIndex = messages.length
-                getRef('chat_container').append(frag)
+                getRef('messages_container').append(frag)
                 if(!chatScrollInfo['scrolledUp'])
                     scrollToBottom()
             }
             if(reRender || lazyLoad){
                 currentDate = null
-                chatScrollInfo['scrollTop'] = getRef('chat_container').scrollTop
-                chatScrollInfo['scrollHeight'] = getRef('chat_container').scrollHeight
-                getRef('chat_container').prepend(frag)
+                chatScrollInfo['scrollTop'] = getRef('messages_container').scrollTop
+                chatScrollInfo['scrollHeight'] = getRef('messages_container').scrollHeight
+                getRef('messages_container').prepend(frag)
             }
             if(reRender){
                 scrollToBottom()
@@ -2068,10 +2091,10 @@
             (mutations, observer) => {
                 for(const mutation of mutations) {
                     if (mutation.type === 'childList' && mutation.addedNodes.length) {
-                        chatMessageObserver.observe(getRef('chat_container').firstElementChild)
-                        chatScrollInfo['scrollTop'] += (getRef('chat_container').scrollHeight - chatScrollInfo['scrollHeight'])
-                        chatScrollInfo['scrollHeight'] = getRef('chat_container').scrollHeight
-                        getRef('chat_container').scrollTo({top: chatScrollInfo['scrollTop']})
+                        chatMessageObserver.observe(getRef('messages_container').firstElementChild)
+                        chatScrollInfo['scrollTop'] += (getRef('messages_container').scrollHeight - chatScrollInfo['scrollHeight'])
+                        chatScrollInfo['scrollHeight'] = getRef('messages_container').scrollHeight
+                        getRef('messages_container').scrollTo({top: chatScrollInfo['scrollTop']})
                     }
                 }
             }            
@@ -2088,7 +2111,7 @@
         )
         
         async function viewConversation(contact) {
-            getRef('chat_container').innerHTML = ''
+            getRef('messages_container').innerHTML = ''
             let floID = clickedContact['floID'],
                 name = contact.getAttribute('name'),
                 textColor = contact.getAttribute('text-color'),
@@ -2096,7 +2119,7 @@
             activeChat['receiver'] = floID
             getRef("receiver_initial").textContent = floGlobals.contacts[floID] ? floGlobals.contacts[floID].charAt(0) : name.charAt(0) || ' ';
             getRef("receiver_initial").setAttribute('style', `color: ${textColor}; background-color: ${backgroundColor};`)
-            getRef("receiver_name").textContent = floGlobals.contacts[floID] || name || ' ';
+            getRef("receiver_name").textContent = floGlobals.contacts[floID] || floID || ' ';
             if (floGlobals.pubKeys[floID])
                 getRef("warn_no_encryption").classList.add("hide-completely");
             else
@@ -2268,11 +2291,11 @@
         windowSizeObserver.observe(document.body)
 
         function animateTo(element, animation, options){
-            const anime = element.animate(animation, {...options})
-            anime.onfinish = () => {
+            const anime = element.animate(animation, {...options, fill: 'both'})
+            anime.addEventListener('finish', () => {
                 anime.commitStyles()
                 anime.cancel()
-            }
+            })
             return anime
         }