diff --git a/.gitignore b/.gitignore
index bb9c80e86..7a585cf31 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,6 +15,7 @@ eggs
 .Python
 
 dev-jc.html
+inverse-dev.html
 
 converse-logs/*.html
 
diff --git a/Makefile b/Makefile
index 61de980bd..c0b404c91 100644
--- a/Makefile
+++ b/Makefile
@@ -119,19 +119,19 @@ dev: stamp-bundler stamp-npm
 .PHONY: css
 css: sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css
 
-css/inverse.css:: stamp-bundler sass
+css/inverse.css:: stamp-bundler sass sass/*
 	$(SASS) -I $(BOURBON_TEMPLATES) sass/inverse/inverse.scss css/inverse.css
 
 css/inverse.min.css:: css/inverse.css
 	$(CLEANCSS) css/inverse.css > css/inverse.min.css
 
-css/converse-muc-embedded.css:: stamp-bundler sass
+css/converse-muc-embedded.css:: stamp-bundler sass/*
 	$(SASS) -I $(BOURBON_TEMPLATES) sass/_muc_embedded.scss css/converse-muc-embedded.css
 
 css/converse-muc-embedded.min.css:: stamp-bundler sass css/converse-muc-embedded.css
 	$(CLEANCSS) css/converse-muc-embedded.css > css/converse-muc-embedded.min.css
 
-css/converse.css:: stamp-bundler sass
+css/converse.css:: stamp-bundler sass/*
 	$(SASS) -I $(BOURBON_TEMPLATES) sass/converse/converse.scss css/converse.css
 
 css/converse.min.css:: css/converse.css
@@ -140,7 +140,7 @@ css/converse.min.css:: css/converse.css
 css/theme.min.css:: stamp-npm css/theme.css
 	$(CLEANCSS) css/theme.css > css/theme.min.css
 
-css/mobile.min.css:: stamp-npm sass
+css/mobile.min.css:: stamp-npm sass/*
 	$(CLEANCSS) css/mobile.css > css/mobile.min.css
 
 .PHONY: watch
diff --git a/css/converse.css b/css/converse.css
index 7b84fa2ee..6e771f3ea 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -172,6 +172,9 @@
 #converse-embedded-chat .icon-logout:before,
 #conversejs .icon-logout:before {
   content: "\e601"; }
+#converse-embedded-chat .icon-leave:before,
+#conversejs .icon-leave:before {
+  content: "\e601"; }
 #converse-embedded-chat .icon-minus:before,
 #conversejs .icon-minus:before {
   content: "\e05a"; }
@@ -1163,9 +1166,25 @@
     #conversejs {
       width: 100%;
       width: 100vw; } }
+  #converse-embedded-chat ::-webkit-input-placeholder,
+  #conversejs ::-webkit-input-placeholder {
+    /* Chrome/Opera/Safari */
+    color: #A8ABA1; }
+  #converse-embedded-chat ::-moz-placeholder,
+  #conversejs ::-moz-placeholder {
+    /* Firefox 19+ */
+    color: #A8ABA1; }
+  #converse-embedded-chat :-ms-input-placeholder,
+  #conversejs :-ms-input-placeholder {
+    /* IE 10+ */
+    color: #A8ABA1; }
+  #converse-embedded-chat :-moz-placeholder,
+  #conversejs :-moz-placeholder {
+    /* Firefox 18- */
+    color: #A8ABA1; }
   #converse-embedded-chat ::placeholder,
   #conversejs ::placeholder {
-    color: #BBB; }
+    color: #A8ABA1; }
   #converse-embedded-chat .circle,
   #conversejs .circle {
     border-radius: 50%; }
@@ -1355,7 +1374,7 @@
     display: table-cell; }
   #converse-embedded-chat .error,
   #conversejs .error {
-    color: red; }
+    color: #D24E2B; }
   #converse-embedded-chat .reg-feedback,
   #conversejs .reg-feedback {
     font-size: 85%; }
@@ -1428,7 +1447,7 @@
       border: none; }
     #converse-embedded-chat form.pure-form.converse-form input.error,
     #conversejs form.pure-form.converse-form input.error {
-      border: 1px solid red;
+      border: 1px solid #D24E2B;
       color: #818479; }
     #converse-embedded-chat form.pure-form.converse-form .form-help,
     #conversejs form.pure-form.converse-form .form-help {
@@ -1481,24 +1500,12 @@
       bottom: 0; } }
 #converse-embedded-chat .chat-head,
 #conversejs .chat-head {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
   color: #ffffff;
   font-size: 100%;
   height: 55px;
   margin: 0;
   padding: 0.5em;
   position: relative; }
-  @media screen and (max-height: 450px) {
-    #converse-embedded-chat .chat-head,
-    #conversejs .chat-head {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0; } }
-  @media screen and (max-width: 480px) {
-    #converse-embedded-chat .chat-head,
-    #conversejs .chat-head {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0; } }
   #converse-embedded-chat .chat-head .avatar,
   #conversejs .chat-head .avatar {
     margin-right: 0.5em;
@@ -1875,6 +1882,21 @@
       top: 0;
       left: 0; }
 
+#converse-embedded-chat .chat-head,
+#conversejs .chat-head {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px; }
+  @media screen and (max-height: 450px) {
+    #converse-embedded-chat .chat-head,
+    #conversejs .chat-head {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0; } }
+  @media screen and (max-width: 480px) {
+    #converse-embedded-chat .chat-head,
+    #conversejs .chat-head {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0; } }
+
 #conversejs #controlbox {
   margin-right: 1em; }
   @media screen and (max-width: 480px) {
@@ -1964,19 +1986,23 @@
       width: 100%;
       margin: 0.5em 0; }
   #conversejs #controlbox #users .add-converse-contact {
-    margin: 0 1em 0.75em 1em; }
-  #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
-  #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
-  #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
-    width: 100%; }
+    margin: 0 0 0.75em 0; }
+  #conversejs #controlbox #chatrooms form.add-chatroom {
+    margin: 0;
+    padding: 0; }
+    #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
+    #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
+    #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
+      width: 100%; }
   #conversejs #controlbox #chatrooms .rooms-list-container {
     text-align: left;
-    margin: 0 1em; }
+    margin: 0; }
     #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle {
       display: block;
-      font-weight: bold;
       color: #818479;
       margin-top: 1em; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle:hover {
+        color: #585B51; }
     #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list {
       margin: 0.5em 0;
       text-align: left; }
@@ -1996,8 +2022,8 @@
         padding: 0.3em 0;
         text-shadow: 0 1px 0 #FAFAFA;
         word-wrap: break-word; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom:hover {
-          background-color: #DCF9F6; }
+        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a:hover {
+          color: #015158; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom.unread-msgs .open-room {
           max-width: 50%;
           width: auto;
@@ -2012,9 +2038,11 @@
           white-space: nowrap;
           padding-right: 0.5em; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark {
-          color: #BBB; }
+          color: #A8ABA1; }
           #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark.button-on {
             color: #2A9D8F; }
+            #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark.button-on:hover {
+              color: #015158; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .room-info {
           font-size: 12px;
           font-style: normal;
@@ -2081,8 +2109,8 @@
       #conversejs #controlbox #controlbox-tabs li a {
         background-color: white;
         border-bottom: 1px solid #CCC;
-        border-top-left-radius: 4px;
-        border-top-right-radius: 4px;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
         box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
         color: #818479;
         display: block;
@@ -2097,7 +2125,7 @@
         #conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator {
           background-color: #E76F51; }
         #conversejs #controlbox #controlbox-tabs li a .msgs-indicator {
-          border-top-right-radius: 4px; }
+          border-top-right-radius: 5px; }
         #conversejs #controlbox #controlbox-tabs li a:hover {
           color: #818479; }
           #conversejs #controlbox #controlbox-tabs li a:hover .msgs-indicator {
@@ -2111,52 +2139,55 @@
   #conversejs #controlbox .fancy-dropdown {
     border: 1px solid #B1BFC4;
     height: 25px;
-    border-radius: 4px;
-    text-align: left;
-    padding: 0.3em 0.3em 0 0.3em; }
+    border-radius: 5px;
+    text-align: left; }
     #conversejs #controlbox .fancy-dropdown .choose-xmpp-status,
     #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
+      line-height: 25px;
       text-shadow: 0 1px 0 #ffffff;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       display: inline-block; }
+      #conversejs #controlbox .fancy-dropdown .choose-xmpp-status:hover,
+      #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form:hover {
+        color: #015158; }
+    #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
+      padding: 0 0.5em;
+      width: 100%; }
     #conversejs #controlbox .fancy-dropdown.no-border {
       border: 0; }
-  #conversejs #controlbox .xmpp-status {
-    padding: 0.3em 0.3em 0 0.3em; }
-  #conversejs #controlbox #fancy-xmpp-status-select {
-    padding: 0em; }
-    #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
-      float: right;
-      clear: right;
-      width: 12px;
-      color: #2A9D8F; }
-    #conversejs #controlbox #fancy-xmpp-status-select fieldset {
-      padding: 0;
-      margin-top: -1px; }
-    #conversejs #controlbox #fancy-xmpp-status-select input {
-      height: 26px;
-      width: -webkit-calc(100% - 40px);
-      width: calc(100% - 40px);
-      padding: 0 0 0 0.5em; }
-    #conversejs #controlbox #fancy-xmpp-status-select input[type=submit] {
-      height: 26px;
-      width: 40px;
-      padding: 1px;
-      float: right; }
+  #conversejs #controlbox #fancy-xmpp-status-select .xmpp-status {
+    padding: 0 0.5em; }
+  #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
+    line-height: 25px;
+    float: right;
+    clear: right;
+    width: 12px;
+    color: #2A9D8F; }
+    #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message:hover {
+      color: #015158; }
+  #conversejs #controlbox #fancy-xmpp-status-select fieldset {
+    padding: 0;
+    margin-top: -1px; }
+  #conversejs #controlbox #fancy-xmpp-status-select input {
+    height: 26px;
+    width: -webkit-calc(100% - 40px);
+    width: calc(100% - 40px);
+    padding: 0 0 0 0.5em; }
+  #conversejs #controlbox #fancy-xmpp-status-select input[type=submit] {
+    height: 26px;
+    width: 40px;
+    padding: 1px;
+    float: right; }
   #conversejs #controlbox .controlbox-pane {
+    padding: 1em;
     background-color: white;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
     border: 0;
     font-size: 14px;
     position: absolute;
     text-align: center;
     width: 100%;
-    height: 289px;
-    height: -webkit-calc(100% - 55px);
-    height: calc(100% - 55px);
     overflow-y: auto;
     overflow-x: hidden; }
     #conversejs #controlbox .controlbox-pane label {
@@ -2192,13 +2223,13 @@
     color: #D24E2B; }
   #conversejs #controlbox .set-xmpp-status {
     background: none;
-    margin: 1em 1em 0.5em 1em; }
+    margin: 1em 0 0.5em 0em; }
     #conversejs #controlbox .set-xmpp-status .dropdown dd ul {
       z-index: 22; }
 #conversejs .toggle-controlbox {
   background-color: #2A9D8F;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
   color: #0a0a0a;
   float: right;
   height: 100%;
@@ -2207,6 +2238,13 @@
   #conversejs .toggle-controlbox span {
     color: white; }
 
+#conversejs #controlbox .controlbox-pane {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  height: 289px;
+  height: -webkit-calc(100% - 55px);
+  height: calc(100% - 55px); }
+
 #conversejs #controlbox .available-chatroom .pulse {
   padding: 0;
   margin: 0; }
@@ -2232,9 +2270,8 @@
   #conversejs #converse-roster .search-xmpp ul li.chat-info {
     padding-left: 10px; }
   #conversejs #converse-roster .roster-filter-form {
-    margin: 0 1em 0.5em 1em;
+    margin: 0 0 0.5em 0;
     width: 100%;
-    padding-right: 2em;
     /* (jQ addClass:) if input has value: */
     /* (jQ addClass:) if mouse is over the 'x' input area*/ }
     #conversejs #converse-roster .roster-filter-form .roster-filter {
@@ -2275,6 +2312,7 @@
       border-radius: 0;
       border: 1px solid; }
   #conversejs #converse-roster .roster-contacts {
+    padding: 0;
     margin: 0;
     height: 100%;
     overflow-x: hidden;
@@ -2285,33 +2323,32 @@
       color: #818479;
       display: none;
       font-weight: normal;
-      margin-top: 0.5em;
-      padding: 0.5em 1em;
+      margin: 1em 0 0.5em 0;
       text-shadow: 0 1px 0 #FAFAFA; }
-      #conversejs #converse-roster .roster-contacts dt.roster-group:hover {
-        background-color: #DCF9F6; }
       #conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle {
         color: #818479;
         display: block;
         width: 100%; }
+        #conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle:hover {
+          color: #585B51; }
     #conversejs #converse-roster .roster-contacts dd {
       border: none;
       clear: both;
       color: #818479;
-      background-color: #FCFDFD;
       display: block;
       height: 24px;
       overflow-y: hidden;
-      padding: 0.3em 1em;
       text-shadow: 0 1px 0 #FAFAFA;
       line-height: 16px;
       width: 100%;
       height: 30px;
       margin: 0;
-      padding: 0; }
+      padding: 0.5em 0 0 0; }
+      #conversejs #converse-roster .roster-contacts dd a:hover {
+        color: #015158; }
       #conversejs #converse-roster .roster-contacts dd .open-chat {
         margin: auto;
-        padding: 0.5em 0em 0 1em;
+        padding: 0;
         width: 85%; }
         #conversejs #converse-roster .roster-contacts dd .open-chat .pulse {
           padding: 0;
@@ -2356,13 +2393,8 @@
           height: 60px; }
           #conversejs #converse-roster .roster-contacts dd .open-chat .avatar .status-icon {
             color: #2A9D8F; }
-      #conversejs #converse-roster .roster-contacts dd:hover {
-        background-color: #DCF9F6; }
       #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .request-actions {
-        padding-top: 0.5em;
-        margin-right: 1em;
-        margin-left: 0.3em;
-        margin-bottom: 0.3em;
+        padding: 0 0 0 0.3em;
         float: right; }
       #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat {
         max-width: 70%; }
@@ -2375,7 +2407,6 @@
       #conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span {
         font-size: 16px;
         float: left;
-        color: #2A9D8F;
         margin-right: 0.5em; }
       #conversejs #converse-roster .roster-contacts dd.odd {
         background-color: #DCEAC5;
@@ -2393,9 +2424,11 @@
       #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
         font-size: 10px;
         float: right;
-        margin-right: 1em;
-        padding-top: 0.5em;
-        color: #BBB; }
+        margin: 0;
+        padding: 0;
+        color: #A8ABA1; }
+        #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact:hover {
+          color: #818479; }
   #conversejs #converse-roster span.pending-contact-name {
     line-height: 16px;
     width: 100%; }
diff --git a/css/inverse.css b/css/inverse.css
index a67210127..1c99961fa 100644
--- a/css/inverse.css
+++ b/css/inverse.css
@@ -5,16 +5,15 @@
  * Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
  * Licensed under the Mozilla Public License
  */
-/* 
+/*
     Color scheme helpers:
     https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
     http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
  */
-/* $font-path: "../fonticons/fonts/" !default; */
 @font-face {
   font-family: 'Converse-js';
-  src: url("https://cdn.conversejs.org/fonticons/fonts/icomoon.eot?wvi0ht");
-  src: url("https://cdn.conversejs.org/fonticons/fonts/icomoon.eot?wvi0ht#iefix") format("embedded-opentype"), url("https://cdn.conversejs.org/fonticons/fonts/icomoon.ttf?wvi0ht") format("truetype"), url("https://cdn.conversejs.org/fonticons/fonts/icomoon.woff?wvi0ht") format("woff"), url("https://cdn.conversejs.org/fonticons/fonts/icomoon.svg?wvi0ht#icomoon") format("svg");
+  src: url("../fonticons/fonts/icomoon.eot?wvi0ht");
+  src: url("../fonticons/fonts/icomoon.eot?wvi0ht#iefix") format("embedded-opentype"), url("../fonticons/fonts/icomoon.ttf?wvi0ht") format("truetype"), url("../fonticons/fonts/icomoon.woff?wvi0ht") format("woff"), url("../fonticons/fonts/icomoon.svg?wvi0ht#icomoon") format("svg");
   font-weight: normal;
   font-style: normal; }
 .icon-conversejs {
@@ -173,6 +172,9 @@
 #converse-embedded-chat .icon-logout:before,
 #conversejs .icon-logout:before {
   content: "\e601"; }
+#converse-embedded-chat .icon-leave:before,
+#conversejs .icon-leave:before {
+  content: "\e601"; }
 #converse-embedded-chat .icon-minus:before,
 #conversejs .icon-minus:before {
   content: "\e05a"; }
@@ -1138,9 +1140,342 @@
     margin: 0; }
   #conversejs a, #conversejs a:visited {
     text-decoration: none;
-    color: #587BDD;
+    color: #2A9D8F;
     text-shadow: none; }
 
+#converse-embedded-chat,
+#conversejs {
+  bottom: 0;
+  color: #818479;
+  direction: ltr;
+  display: block;
+  font-family: "Helvetica", "Arial", sans-serif;
+  font-size: 15px;
+  height: 35px;
+  position: fixed;
+  right: 0;
+  width: auto;
+  z-index: 1031; }
+  @media screen and (max-height: 450px) {
+    #converse-embedded-chat,
+    #conversejs {
+      width: 100%;
+      width: 100vw; } }
+  @media screen and (max-width: 480px) {
+    #converse-embedded-chat,
+    #conversejs {
+      width: 100%;
+      width: 100vw; } }
+  #converse-embedded-chat ::-webkit-input-placeholder,
+  #conversejs ::-webkit-input-placeholder {
+    /* Chrome/Opera/Safari */
+    color: #A8ABA1; }
+  #converse-embedded-chat ::-moz-placeholder,
+  #conversejs ::-moz-placeholder {
+    /* Firefox 19+ */
+    color: #A8ABA1; }
+  #converse-embedded-chat :-ms-input-placeholder,
+  #conversejs :-ms-input-placeholder {
+    /* IE 10+ */
+    color: #A8ABA1; }
+  #converse-embedded-chat :-moz-placeholder,
+  #conversejs :-moz-placeholder {
+    /* Firefox 18- */
+    color: #A8ABA1; }
+  #converse-embedded-chat ::placeholder,
+  #conversejs ::placeholder {
+    color: #A8ABA1; }
+  #converse-embedded-chat .circle,
+  #conversejs .circle {
+    border-radius: 50%; }
+  #converse-embedded-chat ::selection,
+  #conversejs ::selection {
+    background-color: #DCF9F6; }
+  #converse-embedded-chat ::-moz-selection,
+  #conversejs ::-moz-selection {
+    background-color: #DCF9F6; }
+  #converse-embedded-chat .no-text-select,
+  #conversejs .no-text-select {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none; }
+  #converse-embedded-chat .emoticon,
+  #conversejs .emoticon {
+    font-size: 15px; }
+@keyframes fadein {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+@-webkit-keyframes fadein {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+  #converse-embedded-chat .visible,
+  #conversejs .visible {
+    visibility: visible;
+    opacity: 1;
+    -webkit-animation-name: fadein;
+    -moz-animation-name: fadein;
+    animation-name: fadein;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-duration: 350ms;
+    -moz-animation-duration: 350ms;
+    animation-duration: 350ms;
+    -webkit-animation-timing-function: ease;
+    -moz-animation-timing-function: ease;
+    animation-timing-function: ease; }
+  #converse-embedded-chat .hidden,
+  #conversejs .hidden {
+    opacity: 0;
+    display: none; }
+  #converse-embedded-chat .locked,
+  #conversejs .locked {
+    padding-right: 22px; }
+@-webkit-keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg); }
+  to {
+    -webkit-transform: rotate(359deg); } }
+@-moz-keyframes spin {
+  from {
+    -moz-transform: rotate(0deg); }
+  to {
+    -moz-transform: rotate(359deg); } }
+@keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg); }
+  to {
+    -webkit-transform: rotate(359deg);
+    -moz-transform: rotate(359deg);
+    -ms-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    transform: rotate(359deg); } }
+@-webkit-keyframes pulse {
+  0% {
+    -webkit-transform: scale(0);
+    opacity: 0.0; }
+  25% {
+    -webkit-transform: scale(0);
+    opacity: 0.1; }
+  50% {
+    -webkit-transform: scale(0.1);
+    opacity: 0.3; }
+  75% {
+    -webkit-transform: scale(0.5);
+    opacity: 0.5; }
+  100% {
+    -webkit-transform: scale(1);
+    opacity: 0.0; } }
+@-moz-keyframes pulse {
+  0% {
+    -moz-transform: scale(0);
+    opacity: 0.0; }
+  25% {
+    -moz-transform: scale(0);
+    opacity: 0.1; }
+  50% {
+    -moz-transform: scale(0.1);
+    opacity: 0.3; }
+  75% {
+    -moz-transform: scale(0.5);
+    opacity: 0.5; }
+  100% {
+    -moz-transform: scale(1);
+    opacity: 0.0; } }
+@keyframes pulse {
+  0% {
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    -ms-transform: scale(0);
+    -o-transform: scale(0);
+    transform: scale(0);
+    opacity: 0.0; }
+  25% {
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    -ms-transform: scale(0);
+    -o-transform: scale(0);
+    transform: scale(0);
+    opacity: 0.1; }
+  50% {
+    -webkit-transform: scale(0.1);
+    -moz-transform: scale(0.1);
+    -ms-transform: scale(0.1);
+    -o-transform: scale(0.1);
+    transform: scale(0.1);
+    opacity: 0.3; }
+  75% {
+    -webkit-transform: scale(0.5);
+    -moz-transform: scale(0.5);
+    -ms-transform: scale(0.5);
+    -o-transform: scale(0.5);
+    transform: scale(0.5);
+    opacity: 0.5; }
+  100% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+    opacity: 0.0; } }
+  #converse-embedded-chat .spinner,
+  #conversejs .spinner {
+    -webkit-animation: spin 2s infinite, linear;
+    -moz-animation: spin 2s infinite, linear;
+    animation: spin 2s infinite, linear;
+    display: block;
+    text-align: center;
+    margin: 1em; }
+    #converse-embedded-chat .spinner:before,
+    #conversejs .spinner:before {
+      font-size: 24px;
+      font-family: 'Converse-js' !important;
+      content: "\231b"; }
+  #converse-embedded-chat .left,
+  #conversejs .left {
+    float: left; }
+  #converse-embedded-chat .right,
+  #conversejs .right {
+    float: right; }
+  #converse-embedded-chat .centered,
+  #conversejs .centered {
+    text-align: center;
+    display: block;
+    margin: 0;
+    padding: 50% 0; }
+  #converse-embedded-chat .hor_centered,
+  #conversejs .hor_centered {
+    text-align: center;
+    display: block;
+    margin: 0 auto;
+    clear: both; }
+  #converse-embedded-chat .button-group,
+  #converse-embedded-chat .input-button-group,
+  #conversejs .button-group,
+  #conversejs .input-button-group {
+    display: table; }
+  #converse-embedded-chat .button-group,
+  #conversejs .button-group {
+    width: 100%; }
+  #converse-embedded-chat .input-button-group button,
+  #converse-embedded-chat .input-button-group input,
+  #conversejs .input-button-group button,
+  #conversejs .input-button-group input {
+    display: table-cell; }
+  #converse-embedded-chat .error,
+  #conversejs .error {
+    color: #D24E2B; }
+  #converse-embedded-chat .reg-feedback,
+  #conversejs .reg-feedback {
+    font-size: 85%; }
+  #converse-embedded-chat .reg-feedback,
+  #converse-embedded-chat #converse-login .conn-feedback,
+  #conversejs .reg-feedback,
+  #conversejs #converse-login .conn-feedback {
+    display: block;
+    text-align: center;
+    width: 100%; }
+  #converse-embedded-chat a.restore-chat,
+  #conversejs a.restore-chat {
+    padding: 1px 0 1px 5px;
+    color: white;
+    line-height: 15px;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; }
+  #converse-embedded-chat a.restore-chat:visited,
+  #conversejs a.restore-chat:visited {
+    color: white; }
+  #converse-embedded-chat .activated,
+  #conversejs .activated {
+    display: block !important; }
+  #converse-embedded-chat .pure-button,
+  #conversejs .pure-button {
+    border-radius: 7px; }
+  #converse-embedded-chat .button-primary,
+  #conversejs .button-primary {
+    color: white;
+    background-color: #2AC611; }
+  #converse-embedded-chat .button-secondary,
+  #conversejs .button-secondary {
+    color: white;
+    background-color: #83A0D6; }
+  #converse-embedded-chat .button-cancel,
+  #conversejs .button-cancel {
+    color: white;
+    background-color: #D24E2B; }
+  #converse-embedded-chat form.pure-form.converse-form,
+  #conversejs form.pure-form.converse-form {
+    background: white;
+    padding: 0 1em; }
+    #converse-embedded-chat form.pure-form.converse-form legend,
+    #conversejs form.pure-form.converse-form legend {
+      color: #818479; }
+    #converse-embedded-chat form.pure-form.converse-form label,
+    #conversejs form.pure-form.converse-form label {
+      margin-top: 1em;
+      font-size: 18px; }
+    #converse-embedded-chat form.pure-form.converse-form input[type=text],
+    #converse-embedded-chat form.pure-form.converse-form input[type=password],
+    #converse-embedded-chat form.pure-form.converse-form input[type=number],
+    #converse-embedded-chat form.pure-form.converse-form input[type=button],
+    #converse-embedded-chat form.pure-form.converse-form input[type=submit],
+    #conversejs form.pure-form.converse-form input[type=text],
+    #conversejs form.pure-form.converse-form input[type=password],
+    #conversejs form.pure-form.converse-form input[type=number],
+    #conversejs form.pure-form.converse-form input[type=button],
+    #conversejs form.pure-form.converse-form input[type=submit] {
+      padding: 0.5em; }
+    #converse-embedded-chat form.pure-form.converse-form input[type=button],
+    #converse-embedded-chat form.pure-form.converse-form input[type=submit],
+    #conversejs form.pure-form.converse-form input[type=button],
+    #conversejs form.pure-form.converse-form input[type=submit] {
+      padding-left: 1em;
+      padding-right: 1em;
+      margin: 0.5em 0;
+      border: none; }
+    #converse-embedded-chat form.pure-form.converse-form input.error,
+    #conversejs form.pure-form.converse-form input.error {
+      border: 1px solid #D24E2B;
+      color: #818479; }
+    #converse-embedded-chat form.pure-form.converse-form .form-help,
+    #conversejs form.pure-form.converse-form .form-help {
+      color: gray;
+      font-size: 85%;
+      padding-top: 0.5em; }
+      #converse-embedded-chat form.pure-form.converse-form .form-help:hover,
+      #conversejs form.pure-form.converse-form .form-help:hover {
+        color: #818479; }
+  #converse-embedded-chat form.pure-form.converse-centered-form,
+  #conversejs form.pure-form.converse-centered-form {
+    text-align: center;
+    width: 100%; }
+  #converse-embedded-chat .chat-textarea-chatbox-selected,
+  #conversejs .chat-textarea-chatbox-selected {
+    border: 1px solid #578308;
+    margin: 0; }
+  #converse-embedded-chat .chat-textarea-chatroom-selected,
+  #conversejs .chat-textarea-chatroom-selected {
+    border: 2px solid #2A9D8F;
+    margin: 0; }
+  #converse-embedded-chat .dropdown dt,
+  #converse-embedded-chat .dropdown ul,
+  #conversejs .dropdown dt,
+  #conversejs .dropdown ul {
+    margin: 0;
+    padding: 0; }
+
 body {
   width: 100%;
   height: 100%;
@@ -1167,130 +1502,8 @@ div.content {
 
 #conversejs {
   width: 100vw;
-  height: 100vh;
-  position: fixed;
-  bottom: 0;
-  color: #818479;
-  direction: ltr;
-  display: block;
-  font-size: 15px;
-  right: 0;
-  z-index: 1031; }
-  @media screen and (max-height: 450px) {
-    #conversejs {
-      width: 100%;
-      width: 100vw; } }
-  @media screen and (max-width: 480px) {
-    #conversejs {
-      width: 100%;
-      width: 100vw; } }
-  #conversejs ::selection {
-    background-color: #DCF9F6; }
-  #conversejs ::-moz-selection {
-    background-color: #DCF9F6; }
-  #conversejs .circle {
-    border-radius: 50%; }
-  #conversejs .no-text-select {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none; }
-  #conversejs .emoticon {
-    font-size: 15px; }
-  #conversejs .left {
-    float: left; }
-  #conversejs .right {
-    float: right; }
-  #conversejs .centered {
-    text-align: center;
-    display: block;
-    margin: 5em auto; }
-  #conversejs .hor_centered {
-    text-align: center;
-    display: block;
-    margin: 0 auto;
-    clear: both; }
-  #conversejs .hidden {
-    display: none; }
-  #conversejs .locked {
-    padding-right: 22px; }
-@-webkit-keyframes spin {
-  from {
-    -webkit-transform: rotate(0deg); }
-  to {
-    -webkit-transform: rotate(359deg); } }
-@-moz-keyframes spin {
-  from {
-    -moz-transform: rotate(0deg); }
-  to {
-    -moz-transform: rotate(359deg); } }
-@keyframes spin {
-  from {
-    -webkit-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    transform: rotate(0deg); }
-  to {
-    -webkit-transform: rotate(359deg);
-    -moz-transform: rotate(359deg);
-    -ms-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    transform: rotate(359deg); } }
-  #conversejs .spinner {
-    -webkit-animation: spin 2s infinite, linear;
-    -moz-animation: spin 2s infinite, linear;
-    animation: spin 2s infinite, linear;
-    display: block;
-    text-align: center;
-    margin: 5px; }
-    #conversejs .spinner:before {
-      font-size: 24px;
-      font-family: 'Converse-js' !important;
-      content: "\231b"; }
-  #conversejs .button-group,
-  #conversejs .input-button-group {
-    display: table; }
-  #conversejs .button-group {
-    width: 100%; }
-  #conversejs .input-button-group button,
-  #conversejs .input-button-group input {
-    display: table-cell; }
-  #conversejs .error {
-    color: red; }
-  #conversejs .reg-feedback {
-    font-size: 85%; }
-  #conversejs .reg-feedback,
-  #conversejs #converse-login .conn-feedback {
-    display: block;
-    text-align: center;
-    width: 100%; }
-  #conversejs a.restore-chat {
-    padding: 1px 0 1px 5px;
-    color: white;
-    line-height: 15px;
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap; }
-  #conversejs a.restore-chat:visited {
-    color: white; }
-  #conversejs .activated {
-    display: block !important; }
-  #conversejs .pure-button {
-    border-radius: 4px; }
-  #conversejs .button-primary {
-    color: white;
-    background-color: #2AC611; }
-  #conversejs .button-secondary {
-    color: white;
-    background-color: #83A0D6; }
-  #conversejs .button-cancel {
-    color: white;
-    background-color: #D24E2B; }
+  height: 100vh; }
   #conversejs form.pure-form.converse-form {
-    background: white;
     margin: 1em; }
     #conversejs form.pure-form.converse-form legend {
       color: #818479; }
@@ -1307,29 +1520,10 @@ div.content {
       padding-left: 1em;
       padding-right: 1em;
       margin-right: 1em; }
-    #conversejs form.pure-form.converse-form input.error {
-      border: 1px solid red;
-      color: #818479; }
-    #conversejs form.pure-form.converse-form .form-help {
-      color: gray;
-      font-size: 85%;
-      padding-top: 0.5em; }
-      #conversejs form.pure-form.converse-form .form-help:hover {
-        color: #818479; }
-  #conversejs .chat-textarea-chatbox-selected {
-    border: 1px solid #578308;
-    margin: 0; }
-  #conversejs .chat-textarea-chatroom-selected {
-    border: 2px solid #587BDD;
-    margin: 0; }
-  #conversejs .dropdown dt,
-  #conversejs .dropdown ul {
-    margin: 0;
-    padding: 0; }
 
 #converse-embedded-chat .flyout,
 #conversejs .flyout {
-  border-radius: 0;
+  border-radius: 7px;
   bottom: 6px;
   display: block;
   position: absolute; }
@@ -1351,24 +1545,12 @@ div.content {
       bottom: 0; } }
 #converse-embedded-chat .chat-head,
 #conversejs .chat-head {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
   color: #ffffff;
   font-size: 100%;
   height: 55px;
   margin: 0;
   padding: 0.5em;
   position: relative; }
-  @media screen and (max-height: 450px) {
-    #converse-embedded-chat .chat-head,
-    #conversejs .chat-head {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0; } }
-  @media screen and (max-width: 480px) {
-    #converse-embedded-chat .chat-head,
-    #conversejs .chat-head {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0; } }
   #converse-embedded-chat .chat-head .avatar,
   #conversejs .chat-head .avatar {
     margin-right: 0.5em;
@@ -1460,8 +1642,8 @@ div.content {
   #converse-embedded-chat .chatbox .chat-body,
   #conversejs .chatbox .chat-body {
     background-color: white;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 7px;
+    border-bottom-right-radius: 7px;
     border-top: 0;
     height: 289px;
     height: -webkit-calc(100% - 55px);
@@ -1524,7 +1706,7 @@ div.content {
           color: #1A9707; }
         #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
         #conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
-          color: #587BDD; }
+          color: #2A9D8F; }
         #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
         #conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
           max-width: 100%;
@@ -1574,8 +1756,8 @@ div.content {
   #conversejs .chatbox form.sendXMPPMessage {
     -moz-background-clip: padding;
     -webkit-background-clip: padding-box;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 7px;
+    border-bottom-right-radius: 7px;
     background-clip: padding-box;
     background: white;
     border-top: 1px solid #BBB;
@@ -1595,8 +1777,8 @@ div.content {
         width: 100%; } }
     #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
     #conversejs .chatbox form.sendXMPPMessage .chat-textarea {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 7px;
+      border-bottom-right-radius: 7px;
       border: 0;
       height: 70px;
       padding: 0.5em;
@@ -1625,7 +1807,7 @@ div.content {
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
         font-size: 15px;
-        color: #587BDD;
+        color: #2A9D8F;
         text-decoration: none;
         text-shadow: none; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
@@ -1688,7 +1870,7 @@ div.content {
         margin-left: 0; }
       #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley,
       #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
-        color: #587BDD;
+        color: #2A9D8F;
         padding-left: 5px; }
         #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul,
         #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul {
@@ -1746,12 +1928,12 @@ div.content {
       left: 0; }
 
 #conversejs .chatbox-btn {
-  font-size: 17px; }
+  font-size: 18px;
+  margin: 0 0.3em; }
 #conversejs .flyout {
   border: 1em solid #F4A261;
   border-top: 0.8em solid #F4A261;
   border-radius: 0;
-  bottom: 0;
   bottom: 0; }
 #conversejs .chat-head {
   font-size: 20px;
@@ -1760,6 +1942,8 @@ div.content {
     font-size: 66%;
     height: auto;
     line-height: 16px; }
+  #conversejs .chat-head.chat-head-chatbox .close-chatbox-button {
+    display: none; }
   #conversejs .chat-head .avatar {
     border-radius: 25%; }
 #conversejs .chatbox {
@@ -1769,14 +1953,22 @@ div.content {
   width: calc(100% - 250px);
   margin: 0; }
   #conversejs .chatbox .box-flyout {
+    background-color: #F4A261;
     width: -webkit-calc(100% - 250px);
     width: calc(100% - 250px);
     box-shadow: none;
     min-width: auto; }
+  #conversejs .chatbox .chat-body {
+    background-color: #F4A261;
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px; }
   #conversejs .chatbox .chat-content {
-    padding: 0 1em 1em 1em; }
+    padding: 0 1em 1em 1em;
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px; }
   #conversejs .chatbox .chat-title {
-    line-height: 17px; }
+    font-size: 26px;
+    line-height: 26px; }
   #conversejs .chatbox form.sendXMPPMessage ul {
     width: 100%; }
   #conversejs .chatbox form.sendXMPPMessage .toggle-smiley {
@@ -1794,8 +1986,8 @@ div.content {
       margin: 0; } }
   #conversejs #controlbox .controlbox-head {
     background-color: #577BDD;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
     color: white;
     height: 55px;
     margin: 0;
@@ -1845,7 +2037,7 @@ div.content {
       margin-bottom: 8px; }
     #conversejs #controlbox #converse-register .form-help .url {
       font-weight: bold;
-      color: #587BDD; }
+      color: #2A9D8F; }
     #conversejs #controlbox #converse-register .input-group {
       display: table;
       margin: auto;
@@ -1873,19 +2065,23 @@ div.content {
       width: 100%;
       margin: 0.5em 0; }
   #conversejs #controlbox #users .add-converse-contact {
-    margin: 0 1em 0.75em 1em; }
-  #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
-  #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
-  #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
-    width: 100%; }
+    margin: 0 0 0.75em 0; }
+  #conversejs #controlbox #chatrooms form.add-chatroom {
+    margin: 0;
+    padding: 0; }
+    #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
+    #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
+    #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
+      width: 100%; }
   #conversejs #controlbox #chatrooms .rooms-list-container {
     text-align: left;
-    margin: 0 1em; }
+    margin: 0; }
     #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle {
       display: block;
-      font-weight: bold;
       color: #818479;
       margin-top: 1em; }
+      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle:hover {
+        color: #585B51; }
     #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list {
       margin: 0.5em 0;
       text-align: left; }
@@ -1905,8 +2101,8 @@ div.content {
         padding: 0.3em 0;
         text-shadow: 0 1px 0 #FAFAFA;
         word-wrap: break-word; }
-        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom:hover {
-          background-color: #DCF9F6; }
+        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a:hover {
+          color: #015158; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom.unread-msgs .open-room {
           max-width: 50%;
           width: auto;
@@ -1921,9 +2117,11 @@ div.content {
           white-space: nowrap;
           padding-right: 0.5em; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark {
-          color: #BBB; }
+          color: #A8ABA1; }
           #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark.button-on {
-            color: #587BDD; }
+            color: #2A9D8F; }
+            #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark.button-on:hover {
+              color: #015158; }
         #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .room-info {
           font-size: 14px;
           font-style: normal;
@@ -1990,8 +2188,8 @@ div.content {
       #conversejs #controlbox #controlbox-tabs li a {
         background-color: white;
         border-bottom: 1px solid #CCC;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
         box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
         color: #818479;
         display: block;
@@ -2006,7 +2204,7 @@ div.content {
         #conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator {
           background-color: #E76F51; }
         #conversejs #controlbox #controlbox-tabs li a .msgs-indicator {
-          border-top-right-radius: 0; }
+          border-top-right-radius: 5px; }
         #conversejs #controlbox #controlbox-tabs li a:hover {
           color: #818479; }
           #conversejs #controlbox #controlbox-tabs li a:hover .msgs-indicator {
@@ -2019,53 +2217,56 @@ div.content {
           color: #818479; }
   #conversejs #controlbox .fancy-dropdown {
     border: 1px solid #B1BFC4;
-    height: 25px;
-    border-radius: 0;
-    text-align: left;
-    padding: 0.3em 0.3em 0 0.3em; }
+    height: 30px;
+    border-radius: 5px;
+    text-align: left; }
     #conversejs #controlbox .fancy-dropdown .choose-xmpp-status,
     #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
+      line-height: 30px;
       text-shadow: 0 1px 0 #ffffff;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       display: inline-block; }
+      #conversejs #controlbox .fancy-dropdown .choose-xmpp-status:hover,
+      #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form:hover {
+        color: #015158; }
+    #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
+      padding: 0 0.5em;
+      width: 100%; }
     #conversejs #controlbox .fancy-dropdown.no-border {
       border: 0; }
-  #conversejs #controlbox .xmpp-status {
-    padding: 0.3em 0.3em 0 0.3em; }
-  #conversejs #controlbox #fancy-xmpp-status-select {
-    padding: 0em; }
-    #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
-      float: right;
-      clear: right;
-      width: 12px;
-      color: #587BDD; }
-    #conversejs #controlbox #fancy-xmpp-status-select fieldset {
-      padding: 0;
-      margin-top: -1px; }
-    #conversejs #controlbox #fancy-xmpp-status-select input {
-      height: 26px;
-      width: -webkit-calc(100% - 40px);
-      width: calc(100% - 40px);
-      padding: 0 0 0 0.5em; }
-    #conversejs #controlbox #fancy-xmpp-status-select input[type=submit] {
-      height: 26px;
-      width: 40px;
-      padding: 1px;
-      float: right; }
+  #conversejs #controlbox #fancy-xmpp-status-select .xmpp-status {
+    padding: 0 0.5em; }
+  #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
+    line-height: 30px;
+    float: right;
+    clear: right;
+    width: 12px;
+    color: #2A9D8F; }
+    #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message:hover {
+      color: #015158; }
+  #conversejs #controlbox #fancy-xmpp-status-select fieldset {
+    padding: 0;
+    margin-top: -1px; }
+  #conversejs #controlbox #fancy-xmpp-status-select input {
+    height: 31px;
+    width: -webkit-calc(100% - 40px);
+    width: calc(100% - 40px);
+    padding: 0 0 0 0.5em; }
+  #conversejs #controlbox #fancy-xmpp-status-select input[type=submit] {
+    height: 31px;
+    width: 40px;
+    padding: 1px;
+    float: right; }
   #conversejs #controlbox .controlbox-pane {
+    padding: 1.2em;
     background-color: white;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
     border: 0;
     font-size: 15px;
     position: absolute;
     text-align: center;
     width: 100%;
-    height: 289px;
-    height: -webkit-calc(100% - 55px);
-    height: calc(100% - 55px);
     overflow-y: auto;
     overflow-x: hidden; }
     #conversejs #controlbox .controlbox-pane label {
@@ -2101,13 +2302,13 @@ div.content {
     color: #D24E2B; }
   #conversejs #controlbox .set-xmpp-status {
     background: none;
-    margin: 1em 1em 0.5em 1em; }
+    margin: 1em 0 0.5em 0em; }
     #conversejs #controlbox .set-xmpp-status .dropdown dd ul {
       z-index: 22; }
 #conversejs .toggle-controlbox {
-  background-color: #587BDD;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  background-color: #2A9D8F;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
   color: #0a0a0a;
   float: right;
   height: 100%;
@@ -2157,12 +2358,14 @@ div.content {
       #conversejs #controlbox #controlbox-tabs li a {
         height: 62px;
         line-height: 62px;
-        font-size: 17px; }
+        font-size: 18px; }
         #conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
           height: 63px; }
   #conversejs #controlbox .controlbox-pane {
     height: -webkit-calc(100% - 63px);
-    height: calc(100% - 63px); }
+    height: calc(100% - 63px);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0; }
 
 #conversejs #converse-roster {
   text-align: left;
@@ -2170,21 +2373,20 @@ div.content {
   position: relative;
   margin: 1em 0 0 0;
   height: 194px;
-  height: calc(100% - 50px - 20px);
+  height: calc(100% - 60px - 20px);
   overflow: hidden;
   padding: 0;
   padding-bottom: 3em;
   /* Custom addition for CSP */ }
   #conversejs #converse-roster.no-contact-requests {
-    height: calc(100% - 25px - 20px); }
+    height: calc(100% - 30px - 20px); }
   #conversejs #converse-roster #online-count {
     display: none; }
   #conversejs #converse-roster .search-xmpp ul li.chat-info {
     padding-left: 10px; }
   #conversejs #converse-roster .roster-filter-form {
-    margin: 0 1em 0.5em 1em;
+    margin: 0 0 0.5em 0;
     width: 100%;
-    padding-right: 2em;
     /* (jQ addClass:) if input has value: */
     /* (jQ addClass:) if mouse is over the 'x' input area*/ }
     #conversejs #converse-roster .roster-filter-form .roster-filter {
@@ -2192,7 +2394,7 @@ div.content {
       background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
       border: 1px solid #999;
       font-size: 15px;
-      height: 25px;
+      height: 30px;
       margin: 0;
       padding: 0;
       padding-left: 0.4em;
@@ -2207,7 +2409,7 @@ div.content {
       float: left;
       border: 1px solid #999;
       font-size: calc(15px - 2px);
-      height: 25px;
+      height: 30px;
       margin: 0;
       padding: 0;
       padding-left: 0.4em;
@@ -2219,12 +2421,13 @@ div.content {
       display: table-cell;
       float: right;
       font-size: calc(15px - 2px);
-      height: 25px;
+      height: 30px;
       padding: 0;
       width: 47%;
       border-radius: 0;
       border: 1px solid; }
   #conversejs #converse-roster .roster-contacts {
+    padding: 0;
     margin: 0;
     height: 100%;
     overflow-x: hidden;
@@ -2235,33 +2438,32 @@ div.content {
       color: #818479;
       display: none;
       font-weight: normal;
-      margin-top: 0.5em;
-      padding: 0.5em 1em;
+      margin: 1em 0 0.5em 0;
       text-shadow: 0 1px 0 #FAFAFA; }
-      #conversejs #converse-roster .roster-contacts dt.roster-group:hover {
-        background-color: #DCF9F6; }
       #conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle {
         color: #818479;
         display: block;
         width: 100%; }
+        #conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle:hover {
+          color: #585B51; }
     #conversejs #converse-roster .roster-contacts dd {
       border: none;
       clear: both;
       color: #818479;
-      background-color: #FCFDFD;
       display: block;
       height: 24px;
       overflow-y: hidden;
-      padding: 0.3em 1em;
       text-shadow: 0 1px 0 #FAFAFA;
       line-height: 16px;
       width: 100%;
       height: 30px;
       margin: 0;
-      padding: 0; }
+      padding: 0.5em 0 0 0; }
+      #conversejs #converse-roster .roster-contacts dd a:hover {
+        color: #015158; }
       #conversejs #converse-roster .roster-contacts dd .open-chat {
         margin: auto;
-        padding: 0.5em 0em 0 1em;
+        padding: 0;
         width: 85%; }
         #conversejs #converse-roster .roster-contacts dd .open-chat .pulse {
           padding: 0;
@@ -2271,7 +2473,7 @@ div.content {
           #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name {
             width: 70%; }
           #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .avatar .pulse {
-            border: 0.7em solid #587BDD;
+            border: 0.7em solid #2A9D8F;
             background: transparent;
             border-radius: 60px;
             height: 30px;
@@ -2289,7 +2491,7 @@ div.content {
             z-index: 1;
             opacity: 0; }
           #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .avatar.avatar-online .pulse {
-            border: 0.7em solid #587BDD; }
+            border: 0.7em solid #2A9D8F; }
         #conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
           opacity: 1;
           margin-left: -3em;
@@ -2305,14 +2507,9 @@ div.content {
           display: inline-block;
           height: 30px; }
           #conversejs #converse-roster .roster-contacts dd .open-chat .avatar .status-icon {
-            color: #587BDD; }
-      #conversejs #converse-roster .roster-contacts dd:hover {
-        background-color: #DCF9F6; }
+            color: #2A9D8F; }
       #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .request-actions {
-        padding-top: 0.5em;
-        margin-right: 1em;
-        margin-left: 0.3em;
-        margin-bottom: 0.3em;
+        padding: 0 0 0 0.3em;
         float: right; }
       #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat {
         max-width: 70%; }
@@ -2325,7 +2522,6 @@ div.content {
       #conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span {
         font-size: 16px;
         float: left;
-        color: #587BDD;
         margin-right: 0.5em; }
       #conversejs #converse-roster .roster-contacts dd.odd {
         background-color: #DCEAC5;
@@ -2343,9 +2539,11 @@ div.content {
       #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
         font-size: 10px;
         float: right;
-        margin-right: 1em;
-        padding-top: 0.5em;
-        color: #BBB; }
+        margin: 0;
+        padding: 0;
+        color: #A8ABA1; }
+        #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact:hover {
+          color: #818479; }
   #conversejs #converse-roster span.pending-contact-name {
     line-height: 16px;
     width: 100%; }
@@ -2409,8 +2607,8 @@ div.content {
     #converse-embedded-chat .chatroom .box-flyout .chatroom-body,
     #conversejs .chatroom .box-flyout .chatroom-body {
       height: 289px;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 7px;
+      border-bottom-right-radius: 7px;
       height: -webkit-calc(100% - 55px);
       height: calc(100% - 55px);
       background-color: white;
@@ -2453,7 +2651,7 @@ div.content {
         vertical-align: top;
         background-color: white;
         border-left: 1px solid #818479;
-        border-bottom-right-radius: 0;
+        border-bottom-right-radius: 7px;
         width: 30%;
         height: 100%;
         padding: 0.5em; }
@@ -2529,8 +2727,8 @@ div.content {
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
       #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
         background-color: white;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 7px;
+        border-bottom-right-radius: 7px;
         border: 0;
         color: #818479;
         font-size: 15px;
@@ -2569,10 +2767,11 @@ div.content {
 #conversejs .chat-head-chatroom {
   height: 55px;
   font-size: 20px; }
+  #conversejs .chat-head-chatroom .close-chatbox-button:before {
+    content: "\e601"; }
   #conversejs .chat-head-chatroom .chatroom-description {
     font-size: 66%;
-    margin-top: 3px;
-    margin-top: 0.5em; }
+    margin-top: 3px; }
 #conversejs .chatroom {
   width: -webkit-calc(100% - 250px);
   width: calc(100% - 250px); }
@@ -2583,23 +2782,23 @@ div.content {
     width: -webkit-calc(100% - 250px);
     width: calc(100% - 250px); }
     #conversejs .chatroom .box-flyout .chatroom-body {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0; }
+      border-top-left-radius: 7px;
+      border-top-right-radius: 7px; }
       #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
-        border-top-left-radius: 0;
+        border-top-left-radius: 7px;
         min-width: auto; }
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
-          border-top-left-radius: 0;
+          border-top-left-radius: 7px;
           padding: 0 1em 1em 1em; }
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
           max-width: 100%; }
           #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
             max-width: 100%; }
       #conversejs .chatroom .box-flyout .chatroom-body .occupants {
-        border-top-right-radius: 0;
+        border-top-right-radius: 7px;
         padding: 1em; }
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
-          font-size: 17px; }
+          font-size: 18px; }
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
           bottom: 1em;
           width: 25%;
@@ -2615,6 +2814,8 @@ div.content {
           #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li {
             font-size: 14px;
             width: 100%; }
+        #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
+          font-size: 14px; }
   #conversejs .chatroom .room-invite span .invited-contact {
     margin: 0 0 0.5em -1px; }
 
diff --git a/dev.html b/dev.html
index f5cc1df74..1b0292cc2 100644
--- a/dev.html
+++ b/dev.html
@@ -54,7 +54,7 @@
     require(['converse'], function (converse) {
         converse.initialize({
             auto_away: 300,
-            i18n: locales['af'],
+            i18n: 'en',
             // auto_join_rooms: [
             //     'discuss@conference.conversejs.org',
             //     'prosody@conference.prosody.im',
diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss
index d7f8dbd10..d3ca9d7a9 100644
--- a/sass/_chatbox.scss
+++ b/sass/_chatbox.scss
@@ -19,16 +19,6 @@
         }
     }
     .chat-head {
-        border-top-left-radius: $chatbox-border-radius;
-        border-top-right-radius: $chatbox-border-radius;
-        @media screen and (max-height: $mobile-landscape-height) {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-        }
-        @media screen and (max-width: $mobile-portrait-length) {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-        }
         color: #ffffff;
         font-size: 100%;
         height: $chat-head-height;
diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss
index d2f403e67..df3a9947c 100644
--- a/sass/_chatrooms.scss
+++ b/sass/_chatrooms.scss
@@ -42,9 +42,6 @@
             width: $mobile-chat-width;
         }
 
-        .spinner {
-        }
-
         .box-flyout {
             min-width: $chatroom-width;
             width: $chatroom-width;
diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss
index 99346b7df..2c0e8d73d 100644
--- a/sass/_controlbox.scss
+++ b/sass/_controlbox.scss
@@ -114,7 +114,7 @@
         }
         #users {
             .add-converse-contact {
-                margin: 0 1em 0.75em 1em;
+                margin: 0 0 0.75em 0;
             }
         }
 
@@ -125,15 +125,19 @@
                 input[type=text] {
                     width: 100%;
                 }
+                margin: 0;
+                padding: 0;
             }
             .rooms-list-container {
                 text-align: left;
-                margin: 0 1em;
+                margin: 0;
                 .rooms-toggle {
                     display: block;
-                    font-weight: bold;
                     color: $text-color;
                     margin-top: 1em;
+                    &:hover {
+                        color: $dark-gray-color;
+                    }
                 }
                 dl.rooms-list {
                     margin: 0.5em 0;
@@ -155,8 +159,8 @@
                         padding: 0.3em 0;
                         text-shadow: 0 1px 0 $text-shadow-color;
                         word-wrap: break-word;
-                        &:hover {
-                            background-color: $highlight-color;
+                        a:hover {
+                            color: $dark-link-color;
                         }
                         &.unread-msgs {
                             .open-room {
@@ -183,6 +187,9 @@
                         .remove-bookmark {
                             &.button-on {
                                 color: $link-color;
+                                &:hover {
+                                    color: $dark-link-color;
+                                }
                             }
                             color: $subdued-color;
                         }
@@ -278,8 +285,8 @@
                 a {
                     background-color: white;
                     border-bottom: 1px solid $border-color;
-                    border-top-left-radius: $chatbox-border-radius;
-                    border-top-right-radius: $chatbox-border-radius;
+                    border-top-left-radius: $button-border-radius;
+                    border-top-right-radius: $button-border-radius;
                     box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
                     color: $text-color;
                     display: block;
@@ -300,7 +307,7 @@
                         }
                     }
                     .msgs-indicator {
-                        border-top-right-radius: $chatbox-border-radius;
+                        border-top-right-radius: $button-border-radius;
                     }
                     &:hover {
                         color: $text-color;
@@ -323,32 +330,43 @@
         .fancy-dropdown {
             border: 1px solid $light-background-border-color;
             height: $controlbox-dropdown-height;
-            border-radius: $chatbox-border-radius;
+            border-radius: $button-border-radius;
             text-align: left;
-            padding: 0.3em 0.3em 0 0.3em;
+
             .choose-xmpp-status,
             .toggle-xmpp-contact-form {
+                line-height: $controlbox-dropdown-height;
                 text-shadow: 0 1px 0 #ffffff;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 display: inline-block;
+                &:hover {
+                    color: $dark-link-color;
+                }
+            }
+            .toggle-xmpp-contact-form {
+                padding: 0 0.5em;
+                width: 100%;
             }
             &.no-border {
                 border: 0;
             }
 
         }
-        .xmpp-status {
-            padding: 0.3em 0.3em 0 0.3em;
-        }
         #fancy-xmpp-status-select {
-            padding: 0em;
+            .xmpp-status {
+                padding: 0 0.5em;
+            }
             a.change-xmpp-status-message {
+                line-height: $controlbox-dropdown-height;
                 float: right;
                 clear: right;
                 width: 12px;
                 color: $link-color;
+                &:hover {
+                    color: $dark-link-color;
+                }
             }
             fieldset {
                 padding: 0;
@@ -368,16 +386,13 @@
         }
 
         .controlbox-pane {
+            padding: $controlbox-pane-padding;
             background-color: white;
-            border-bottom-left-radius: $chatbox-border-radius;
-            border-bottom-right-radius: $chatbox-border-radius;
             border: 0;
             font-size: $font-size;
             position: absolute;
             text-align: center;
             width: 100%;
-            height: 289px;
-            @include calc(height, '100% - #{$chat-head-height}');
             overflow-y: auto;
             overflow-x: hidden;
             label {
@@ -429,7 +444,7 @@
 
         .set-xmpp-status {
             background: none;
-            margin: 1em 1em 0.5em 1em;
+            margin: 1em 0 0.5em 0em;
             .dropdown dd ul {
                 z-index: 22;
             }
@@ -438,8 +453,8 @@
 
     .toggle-controlbox {
         background-color: $link-color;
-        border-top-left-radius: $chatbox-border-radius;
-        border-top-right-radius: $chatbox-border-radius;
+        border-top-left-radius: $button-border-radius;
+        border-top-right-radius: $button-border-radius;
         color: #0a0a0a;
         float: right;
         height: 100%;
diff --git a/sass/_core.scss b/sass/_core.scss
index d15f106ab..6820bb6e8 100644
--- a/sass/_core.scss
+++ b/sass/_core.scss
@@ -20,8 +20,21 @@
         width: 100vw;
     }
 
+
+	::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+        color: $subdued-color;
+	}
+	::-moz-placeholder { /* Firefox 19+ */
+        color: $subdued-color;
+	}
+	:-ms-input-placeholder { /* IE 10+ */
+        color: $subdued-color;
+	}
+	:-moz-placeholder { /* Firefox 18- */
+        color: $subdued-color;
+	}
     ::placeholder {
-        color: #BBB;
+        color: $subdued-color;
     }
 
     .circle {
@@ -144,7 +157,7 @@
     }
 
     .error {
-        color: red;
+        color: $error-color;
     }
     .reg-feedback {
         font-size: 85%;
@@ -216,7 +229,7 @@
                 border: none;
             }
             input.error {
-                border: 1px solid red;
+                border: 1px solid $error-color;
                 color: $text-color;
             }
             .form-help {
diff --git a/sass/_fonts.scss b/sass/_fonts.scss
index b79b2ce56..c0154bd28 100644
--- a/sass/_fonts.scss
+++ b/sass/_fonts.scss
@@ -75,6 +75,7 @@
     .icon-legal:before              { content: "\f0e3"; }
     .icon-lock:before               { content: "\e027"; }
     .icon-logout:before             { content: "\e601"; }
+    .icon-leave:before              { content: "\e601"; }
     .icon-minus:before              { content: "\e05a"; }
     .icon-music:before              { content: "\266b"; }
     .icon-new-tab:before            { content: "\e053"; }
diff --git a/sass/_muc_embedded.scss b/sass/_muc_embedded.scss
index 3de31bc76..ae980d752 100644
--- a/sass/_muc_embedded.scss
+++ b/sass/_muc_embedded.scss
@@ -1,5 +1,5 @@
 @import "bourbon";
-@import "variables";
+@import "converse/variables";
 #converse-embedded-chat {
 
     @include box-sizing(border-box);
diff --git a/sass/_roster.scss b/sass/_roster.scss
index 086cc6723..7a4f1c3e9 100644
--- a/sass/_roster.scss
+++ b/sass/_roster.scss
@@ -27,9 +27,8 @@
     }
 
     .roster-filter-form {
-        margin: 0 1em 0.5em 1em;
+        margin: 0 0 0.5em 0;
         width: 100%;
-        padding-right: 1em + 2*$chat-gutter;
         .roster-filter {
             float: left;
             background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
@@ -79,6 +78,7 @@
     }
 
     .roster-contacts {
+        padding: 0;
         margin: 0;
         height: 100%;
         overflow-x: hidden;
@@ -89,13 +89,12 @@
             color: $text-color;
             display: none;
             font-weight: normal;
-            margin-top: 0.5em;
-            padding: 0.5em 1em;
+            margin: 1em 0 0.5em 0;
             text-shadow: 0 1px 0 $text-shadow-color;
-            &:hover {
-                background-color: $highlight-color;
-            }
             .group-toggle {
+                &:hover {
+                    color: $dark-gray-color;
+                }
                 color: $text-color;
                 display: block;
                 width: 100%;
@@ -105,21 +104,23 @@
             border: none;
             clear: both;
             color: $text-color;
-            background-color: $light-background-color;
             display: block;
             height: 24px;
             overflow-y: hidden;
-            padding: 0.3em 1em;
             text-shadow: 0 1px 0 $text-shadow-color;
             line-height: $line-height;
             width: 100%;
             height: 30px;
             margin: 0;
-            padding: 0;
+            padding: 0.5em 0 0 0;
+
+            a:hover {
+                color: $dark-link-color;
+            }
 
             .open-chat {
                 margin: auto;
-                padding: 0.5em 0em 0 1em;
+                padding: 0;
                 width: 85%;
                 .pulse {
                     padding: 0;
@@ -178,16 +179,9 @@
                     }
                 }
             }
-
-            &:hover {
-                background-color: $highlight-color;
-            }
             &.requesting-xmpp-contact {
                 .request-actions {
-                    padding-top: 0.5em;
-                    margin-right: 1em;
-                    margin-left: 0.3em;
-                    margin-bottom: 0.3em;
+                    padding: 0 0 0 0.3em;
                     float: right;
                 }
                 .open-chat {
@@ -205,7 +199,6 @@
             &.current-xmpp-contact span {
                 font-size: 16px;
                 float: left;
-                color: $link-color;
                 margin-right: 0.5em;
             }
             &.odd {
@@ -229,9 +222,12 @@
                 &.remove-xmpp-contact {
                     font-size: $font-size-tiny;
                     float: right;
-                    margin-right: 1em;
-                    padding-top: 0.5em;
+                    margin: 0;
+                    padding: 0;
                     color: $subdued-color;
+                    &:hover {
+                        color: $gray-color;
+                    }
                 }
             }
         }
diff --git a/sass/converse/_chatbox.scss b/sass/converse/_chatbox.scss
new file mode 100644
index 000000000..0d1ca0d6c
--- /dev/null
+++ b/sass/converse/_chatbox.scss
@@ -0,0 +1,15 @@
+#converse-embedded-chat,
+#conversejs {
+    .chat-head {
+        border-top-left-radius: $chatbox-border-radius;
+        border-top-right-radius: $chatbox-border-radius;
+        @media screen and (max-height: $mobile-landscape-height) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+        @media screen and (max-width: $mobile-portrait-length) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+    }
+}
diff --git a/sass/converse/_controlbox.scss b/sass/converse/_controlbox.scss
new file mode 100644
index 000000000..394b217af
--- /dev/null
+++ b/sass/converse/_controlbox.scss
@@ -0,0 +1,10 @@
+#conversejs {
+    #controlbox {
+        .controlbox-pane {
+            border-bottom-left-radius: $chatbox-border-radius;
+            border-bottom-right-radius: $chatbox-border-radius;
+            height: 289px;
+            @include calc(height, '100% - #{$controlbox-head-height}');
+        }
+    }
+}
diff --git a/sass/converse/_variables.scss b/sass/converse/_variables.scss
index 8714bfd3d..bf20cdcdd 100644
--- a/sass/converse/_variables.scss
+++ b/sass/converse/_variables.scss
@@ -4,6 +4,8 @@
     http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
  */
 $link-color: #2A9D8F !default;
+$dark-link-color: #015158 !default;
+
 $inverse-link-color: white !default;
 $link-shadow-color: #FAFAFA !default;
 $text-shadow-color: #FAFAFA !default;
@@ -16,6 +18,7 @@ $chat-textarea-height: 70px !default;
 $send-button-height: 27px !default;
 $send-button-margin: 3px !default;
 $message-them-color: #1A9707 !default;
+
 $roster-height: 194px !default;
 $roster-item-height: 60px !default;
 
@@ -27,8 +30,14 @@ $chat-head-height: 55px !default;
 $input-focus-color: #1A9707 !default;
 $highlight-color: #DCF9F6 !default;
 
-$controlbox-head-color: #577BDD !default;
+$subdued-color: #A8ABA1 !default;
+$gray-color: #818479 !default;
+$dark-gray-color: #585B51!default;
+
 $controlbox-dropdown-height: 25px !default;
+$controlbox-head-color: #577BDD !default;
+$controlbox-head-height: 55px !default;
+$controlbox-pane-padding: 1em !default;
 
 $primary-color: #2AC611 !default;
 $secondary-color: #83A0D6 !default;
@@ -43,8 +52,8 @@ $toolbar-color: #FFF5EE !default;
 $moderator-color: #D24E2B !default;
 $online-color: #1A9707 !default;
 $error-color: #D24E2B !default;
-$subdued-color: #BBB !default;
 
+$button-border-radius: 5px !default;
 $chatbox-border-radius: 4px !default;
 $bottom-gutter-height: 35px !default;
 $chatbox-hover-height: 6px !default;
diff --git a/sass/converse/converse.scss b/sass/converse/converse.scss
index 2733553a9..cf8b1a311 100644
--- a/sass/converse/converse.scss
+++ b/sass/converse/converse.scss
@@ -12,7 +12,9 @@
 @import "../normalize";
 @import "../core";
 @import "../chatbox";
+@import "chatbox";
 @import "../controlbox";
+@import "controlbox";
 @import "../roomslist";
 @import "../roster";
 @import "../chatrooms";
diff --git a/sass/inverse/_chatbox.scss b/sass/inverse/_chatbox.scss
index f35c2578d..8d6c6b093 100644
--- a/sass/inverse/_chatbox.scss
+++ b/sass/inverse/_chatbox.scss
@@ -1,13 +1,13 @@
 #conversejs {
     .chatbox-btn {
         font-size: $font-size-large;
+        margin: 0 0.3em;
     }
     .flyout {
         border: 1em solid $chat-head-color;
         border-top: 0.8em solid $chat-head-color;
         border-radius: 0;
         bottom: 0;
-        bottom: 0;
     }
     .chat-head {
         font-size: 20px;
@@ -17,6 +17,11 @@
             height: auto;
             line-height: $line-height;
         }
+        &.chat-head-chatbox {
+            .close-chatbox-button {
+                display: none;
+            }
+        }
         .avatar {
             border-radius: 25%;
         }
@@ -27,15 +32,24 @@
         @include calc(width, '100% - #{$controlbox-width}');
         margin: 0;
         .box-flyout {
+            background-color: $chat-head-color;
             @include calc(width, '100% - #{$controlbox-width}');
             box-shadow: none;
             min-width: auto;
         }
+        .chat-body {
+            background-color: $chat-head-color;
+            border-top-left-radius: $chatbox-border-radius;
+            border-top-right-radius: $chatbox-border-radius;
+        }
         .chat-content {
             padding: 0 $padding $padding $padding;
+            border-top-left-radius: $chatbox-border-radius;
+            border-top-right-radius: $chatbox-border-radius;
         }
         .chat-title {
-            line-height: 17px;
+            font-size: $font-size-huge;
+            line-height: $font-size-huge;
         }
 
         form.sendXMPPMessage {
diff --git a/sass/inverse/_chatrooms.scss b/sass/inverse/_chatrooms.scss
index 5ad1c9ffc..45b4228db 100644
--- a/sass/inverse/_chatrooms.scss
+++ b/sass/inverse/_chatrooms.scss
@@ -2,11 +2,12 @@
     .chat-head-chatroom {
         height: $chatroom-head-height;
         font-size: 20px;
-
+        .close-chatbox-button:before {
+            content: "\e601"; // Leave icon
+        }
         .chatroom-description {
             font-size: 66%;
             margin-top: 3px;
-            margin-top: 0.5em;
         }
     }
 
@@ -60,6 +61,11 @@
                                 width: 100%;
                             }
                         }
+                        li {
+                            &.feature {
+                                font-size: $font-size-small;
+                            }
+                        }
                     }
                 }
             }
diff --git a/sass/inverse/_controlbox.scss b/sass/inverse/_controlbox.scss
index 5a61a1e48..5cbdda3ee 100644
--- a/sass/inverse/_controlbox.scss
+++ b/sass/inverse/_controlbox.scss
@@ -63,6 +63,8 @@
         }
         .controlbox-pane {
             @include calc(height, '100% - #{$controlbox-head-height}');
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
         }
     }
 }
diff --git a/sass/inverse/_core.scss b/sass/inverse/_core.scss
index 5757ab051..d02899b94 100644
--- a/sass/inverse/_core.scss
+++ b/sass/inverse/_core.scss
@@ -31,146 +31,9 @@ div.content {
 #conversejs {
     width: 100vw;
     height: 100vh;
-    position: fixed;
-    bottom: 0;
-    color: $text-color;
-    direction: ltr;
-    display: block;
-    font-size: $font-size;
-    right: 0;
-    z-index: 1031; // One more than bootstrap navbar
-    @media screen and (max-height: $mobile-landscape-height) {
-        width: 100%;
-        width: 100vw;
-    }
-    @media screen and (max-width: $mobile-portrait-length) {
-        width: 100%;
-        width: 100vw;
-    }
-
-    ::selection {
-        background-color: $highlight-color;
-    }
-    ::-moz-selection {
-        background-color: $highlight-color;
-    }
-    .circle {
-        border-radius: 50%;
-    }
-    .no-text-select {
-        -webkit-touch-callout: none;
-        @include user-select(none);
-    }
-    .emoticon {
-        font-size: $font-size;
-    }
-    .left {
-        float: left;
-    }
-    .right {
-        float: right;
-    }
-    .centered {
-        text-align: center;
-        display: block;
-        margin: 5em auto;
-    }
-    .hor_centered {
-        text-align: center;
-        display: block;
-        margin: 0 auto;
-        clear: both;
-    }
-    .hidden {
-        display: none;
-    }
-    .locked {
-        padding-right: 22px;
-    }
-
-    @include keyframes(spin) {
-        from {
-            @include transform(rotate(0deg));
-        }
-        to {
-            @include transform(rotate(359deg));
-        }
-    }
-
-    .spinner {
-        @include animation(spin 2s infinite, linear);
-        display: block;
-        text-align: center;
-        margin: 5px;
-        &:before {
-            font-size: 24px;
-            font-family: 'Converse-js' !important;
-            content: "\231b";
-        }
-    }
-
-    .button-group,
-    .input-button-group {
-        display: table;
-    }
-    .button-group {
-        width: 100%;
-    }
-    .input-button-group button,
-    .input-button-group input {
-        display: table-cell;
-    }
-
-    .error {
-        color: red;
-    }
-    .reg-feedback {
-        font-size: 85%;
-    }
-
-    .reg-feedback,
-    #converse-login .conn-feedback {
-        display: block;
-        text-align: center;
-        width: 100%;
-    }
-
-    a.restore-chat {
-        padding: 1px 0 1px 5px;
-        color: $chat-head-text-color;
-        line-height: 15px;
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    a.restore-chat:visited {
-        color: $chat-head-text-color;
-    }
-
-    .activated {
-        display: block !important;
-    }
-    .pure-button {
-        border-radius: $button-border-radius;
-    }
-    .button-primary {
-        color: white;
-        background-color: $primary-color;
-    }
-    .button-secondary {
-        color: white;
-        background-color: $secondary-color;
-    }
-    .button-cancel {
-        color: white;
-        background-color: $warning-color;
-    }
 
     form {
         &.pure-form.converse-form {
-            background: white;
             margin: 1em;
             legend {
                 color: $text-color;
@@ -191,33 +54,6 @@ div.content {
                 padding-right: 1em;
                 margin-right: 1em;
             }
-            input.error {
-                border: 1px solid red;
-                color: $text-color;
-            }
-            .form-help {
-                color: gray;
-                font-size: 85%;
-                padding-top: 0.5em;
-                &:hover {
-                    color: $text-color;
-                }
-            }
         }
     }
-
-    .chat-textarea-chatbox-selected {
-        border: 1px solid #578308;
-        margin: 0;
-    }
-    .chat-textarea-chatroom-selected {
-        border: 2px solid $link-color;
-        margin: 0;
-    }
-
-    .dropdown dt,
-    .dropdown ul {
-        margin: 0;
-        padding: 0;
-    }
 }
diff --git a/sass/inverse/_variables.scss b/sass/inverse/_variables.scss
index 6f853a77b..708cfd68c 100644
--- a/sass/inverse/_variables.scss
+++ b/sass/inverse/_variables.scss
@@ -1,11 +1,13 @@
-/* 
+/*
     Color scheme helpers:
     https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
     http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
  */
 $global-background-color: #17818B !default;
 
-$link-color: #587BDD !default;
+$link-color: #2A9D8F !default;
+$dark-link-color: #015158 !default;
+
 $inverse-link-color: white !default;
 $link-shadow-color: #FAFAFA !default;
 $text-shadow-color: #FAFAFA !default;
@@ -18,6 +20,7 @@ $chat-textarea-height: 70px !default;
 $send-button-height: 27px !default;
 $send-button-margin: 3px !default;
 $message-them-color: #1A9707 !default;
+
 $roster-height: 194px !default;
 $roster-item-height: 30px !default;
 
@@ -25,14 +28,19 @@ $chat-head-color: #F4A261 !default;
 $chat-head-text-color: white !default;
 $chat-head-inverse-text-color: white !default;
 $chat-head-height: 55px !default;
-$controlbox-head-height: 63px !default;
 $chatroom-head-height: 55px !default;
 
 $input-focus-color: #1A9707 !default;
 $highlight-color: #DCF9F6 !default;
 
+$subdued-color: #A8ABA1 !default;
+$gray-color: #818479 !default;
+$dark-gray-color: #585B51!default;
+
+$controlbox-dropdown-height: 30px !default;
 $controlbox-head-color: #577BDD !default;
-$controlbox-dropdown-height: 25px !default;
+$controlbox-head-height: 63px !default;
+$controlbox-pane-padding: 1.2em !default;
 
 $primary-color: #2AC611 !default;
 $secondary-color: #83A0D6 !default;
@@ -47,10 +55,9 @@ $toolbar-color: #FFF5EE !default;
 $moderator-color: #D24E2B !default;
 $online-color: #1A9707 !default;
 $error-color: #D24E2B !default;
-$subdued-color: #BBB !default;
 
-$button-border-radius: 4px !default;
-$chatbox-border-radius: 0 !default;
+$button-border-radius: 5px !default;
+$chatbox-border-radius: 7px !default;
 $bottom-gutter-height: 35px !default;
 $chatbox-hover-height: 6px !default;
 
@@ -60,8 +67,9 @@ $mobile_portrait_length: 480px !default;
 $font-size-tiny: 10px !default;
 $font-size-small: 14px !default;
 $font-size: 15px !default;
-$font-size-large: 17px !default;
-$legend-font-size: 17px !default;
+$font-size-large: 18px !default;
+$font-size-huge: 26px !default;
+$legend-font-size: 18px !default;
 
 $line-height:  16px !default;
 
@@ -77,8 +85,7 @@ $mobile-chat-width: 100% !default;
 $mobile-chat-height: 400px !default;
 $small-mobile-chat-height: 300px !default;
 
-/* $font-path: "../fonticons/fonts/" !default; */
-$font-path: "https://cdn.conversejs.org/fonticons/fonts/" !default;
+$font-path: "../fonticons/fonts/" !default;
 
 $chatroom-width: 300px !default;
 $chatroom-head-color: #E76F51 !default;
diff --git a/sass/inverse/inverse.scss b/sass/inverse/inverse.scss
index b638029b2..e8ee15235 100644
--- a/sass/inverse/inverse.scss
+++ b/sass/inverse/inverse.scss
@@ -10,6 +10,7 @@
 @import "variables";
 @import "../fonts";
 @import "normalize";
+@import "../core";
 @import "core";
 @import "../chatbox";
 @import "chatbox";
diff --git a/src/converse-inverse.js b/src/converse-inverse.js
index bfd3a009d..b40b37ffb 100644
--- a/src/converse-inverse.js
+++ b/src/converse-inverse.js
@@ -103,8 +103,8 @@
 
             this.updateSettings({
                 blacklisted_plugins: ['converse-minimize', 'converse-dragresize'],
-                chatview_avatar_height: 42,
-                chatview_avatar_width: 42,
+                chatview_avatar_height: 44,
+                chatview_avatar_width: 44,
                 hide_open_bookmarks: true,
                 notification_icon: '/node_modules/converse.js/logo/conversejs128.png', // New default
                 show_controlbox_by_default: true,
diff --git a/src/templates/rooms_list_item.html b/src/templates/rooms_list_item.html
index e55a73273..388f0d36f 100644
--- a/src/templates/rooms_list_item.html
+++ b/src/templates/rooms_list_item.html
@@ -3,7 +3,7 @@
     <span class="msgs-indicator">{{{ num_unread }}}</span>
 {[ } ]}
 <a class="open-room" data-room-jid="{{{jid}}}" title="{{{open_title}}}" href="#">{{{name}}}</a>
-<a class="right close-room icon-remove"
+<a class="right close-room icon-leave"
    data-room-jid="{{{jid}}}" title="{{{info_leave_room}}}" href="#">&nbsp;</a>
 <a class="right remove-bookmark icon-pushpin {[ if (bookmarked) { ]} button-on {[ } ]}"
    data-room-jid="{{{jid}}}" data-bookmark-name="{{{name}}}"
diff --git a/src/templates/toolbar.html b/src/templates/toolbar.html
index b0848d8f9..30835a859 100644
--- a/src/templates/toolbar.html
+++ b/src/templates/toolbar.html
@@ -21,5 +21,5 @@
 <li class="toggle-call"><a class="icon-phone" title="{{{label_start_call}}}"></a></li>
 {[ } ]}
 {[ if (show_clear_button)  { ]}
-<li class="toggle-clear"><a class="icon-remove" title="{{{label_clear}}}"></a></li>
+<li class="toggle-clear"><a class="icon-trash" title="{{{label_clear}}}"></a></li>
 {[ } ]}