diff --git a/clientapp/app.js b/clientapp/app.js
index 0ac0603..4851dac 100644
--- a/clientapp/app.js
+++ b/clientapp/app.js
@@ -122,6 +122,9 @@ module.exports = {
         // to start with the active class already before appending to DOM.
         container.append(view.render(animation === 'none').el);
         view.show(animation);
+    },
+    serverConfig: function () {
+        return SERVER_CONFIG;
     }
 };
 
diff --git a/clientapp/models/me.js b/clientapp/models/me.js
index 9acafe9..9e60e6d 100644
--- a/clientapp/models/me.js
+++ b/clientapp/models/me.js
@@ -63,7 +63,13 @@ module.exports = HumanModel.define({
                 if (!this.stream) return '';
                 return URL.createObjectURL(this.stream);
             }
-        }
+        },
+        organization: {
+            deps: ['orga'],
+            fn: function () {
+                return app.serverConfig().name || 'Otalk';
+            }
+        },
     },
     setActiveContact: function (jid) {
         var prev = this.getContact(this._activeContact);
@@ -125,6 +131,7 @@ module.exports = HumanModel.define({
 
         app.storage.profiles.get(this.jid.bare, function (err, profile) {
             if (!err) {
+                self.nick = self.jid.local;
                 self.status = profile.status;
                 self.avatarID = profile.avatarID;
             }
diff --git a/clientapp/models/muc.js b/clientapp/models/muc.js
index 3eb0b76..87acb27 100644
--- a/clientapp/models/muc.js
+++ b/clientapp/models/muc.js
@@ -16,6 +16,10 @@ module.exports = HumanModel.define({
         if (attrs.jid) {
             this.id = attrs.jid.full;
         }
+        var self = this;
+        this.resources.bind("add remove reset", function(){
+            self.membersCount = self.resources.length;
+        });
     },
     type: 'muc',
     props: {
@@ -32,7 +36,8 @@ module.exports = HumanModel.define({
         lastSentMessage: 'object',
         unreadCount: ['number', false, 0],
         persistent: ['bool', false, false],
-        joined: ['bool', true, false]
+        joined: ['bool', true, false],
+        membersCount: ['number', false, 0],
     },
     derived: {
         displayName: {
@@ -52,7 +57,7 @@ module.exports = HumanModel.define({
                     else
                       return '99+'
                 }
-                return '0';
+                return '';
             }
         },
         displaySubject: {
diff --git a/clientapp/pages/chat.js b/clientapp/pages/chat.js
index 3ef1333..33cc4fd 100644
--- a/clientapp/pages/chat.js
+++ b/clientapp/pages/chat.js
@@ -29,7 +29,6 @@ module.exports = BasePage.extend({
     events: {
         'keydown textarea': 'handleKeyDown',
         'keyup textarea': 'handleKeyUp',
-        'click .remove': 'handleRemoveClick',
         'click .call': 'handleCallClick',
         'click .accept': 'handleAcceptClick',
         'click .end': 'handleEndClick',
@@ -46,8 +45,8 @@ module.exports = BasePage.extend({
     },
     classBindings: {
         chatState: 'header',
-        idle: 'header',
-        show: 'header',
+        idle: '.user_presence',
+        show: '.user_presence',
         onCall: '.conversation'
     },
     show: function (animation) {
@@ -76,7 +75,7 @@ module.exports = BasePage.extend({
         this.listenTo(this.model.messages, 'add', this.handleChatAdded);
         this.listenToAndRun(this.model, 'change:jingleResources', this.handleJingleResourcesChanged);
 
-        $(window).on('resize', _.bind(this.resizeInput, this));
+        //$(window).on('resize', _.bind(this.resizeInput, this));
 
         this.registerBindings(me, {
             srcBindings: {
@@ -88,11 +87,7 @@ module.exports = BasePage.extend({
     },
     handlePageLoaded: function () {
         this.staydown.checkdown();
-        this.resizeInput();
-    },
-    handleRemoveClick: function (e) {
-      me.removeContact(this.model.jid);
-      app.navigate('/');
+        //this.resizeInput();
     },
     handleCallClick: function (e) {
         e.preventDefault();
@@ -102,6 +97,7 @@ module.exports = BasePage.extend({
     renderCollection: function () {
         var self = this;
         this.$messageList.empty();
+        this.lastDate = '';
         this.model.messages.each(function (model, i) {
             self.appendModel(model);
         });
@@ -133,7 +129,7 @@ module.exports = BasePage.extend({
         }
     },
     handleKeyUp: function (e) {
-        this.resizeInput();
+        //this.resizeInput();
         if (this.typing && this.$chatInput.val().length === 0) {
             this.typing = false;
             this.$chatInput.removeClass('typing');
@@ -215,10 +211,16 @@ module.exports = BasePage.extend({
         this.$('button.call').prop('disabled', !resources.length);
     },
     appendModel: function (model, preload) {
-        var self = this;
-        var isGrouped = model.shouldGroupWith(this.lastModel);
         var newEl, first, last;
 
+        var messageDay = Date.create(model.timestamp).format('{month} {ord}, {yyyy}');
+        if (messageDay !== this.lastDate) {
+            var dayDivider = $(templates.includes.dayDivider({day_name: messageDay}));
+            this.staydown.append(dayDivider[0]);
+            this.lastDate = messageDay;
+        }
+
+        var isGrouped = model.shouldGroupWith(this.lastModel);
         if (isGrouped) {
             newEl = $(model.partialTemplateHtml);
             last = this.$messageList.find('li').last();
diff --git a/clientapp/pages/groupchat.js b/clientapp/pages/groupchat.js
index 58f20fe..185d1d4 100644
--- a/clientapp/pages/groupchat.js
+++ b/clientapp/pages/groupchat.js
@@ -28,18 +28,18 @@ module.exports = BasePage.extend({
     events: {
         'keydown textarea': 'handleKeyDown',
         'keyup textarea': 'handleKeyUp',
-        'click .joinRoom': 'handleJoin',
-        'click .leaveRoom': 'handleLeave',
         'click .status': 'clickStatusChange',
         'blur .status': 'blurStatusChange',
-        'keydown .status': 'keyDownStatusChange'
+        'keydown .status': 'keyDownStatusChange',
+        'click #members_toggle': 'clickMembersToggle'
     },
     classBindings: {
         joined: '.controls'
     },
     textBindings: {
         displayName: 'header .name',
-        subject: 'header .status'
+        subject: 'header .status',
+        membersCount: '#members_toggle_count'
     },
     show: function (animation) {
         BasePage.prototype.show.apply(this, [animation]);
@@ -73,7 +73,7 @@ module.exports = BasePage.extend({
 
         this.listenTo(this.model.messages, 'add', this.handleChatAdded);
 
-        $(window).on('resize', _.bind(this.resizeInput, this));
+        //$(window).on('resize', _.bind(this.resizeInput, this));
 
         this.registerBindings();
 
@@ -81,6 +81,7 @@ module.exports = BasePage.extend({
     },
     renderMessages: function () {
         var self = this;
+        this.lastDate = '';
         this.model.messages.each(function (model, i) {
             self.appendModel(model);
         });
@@ -91,7 +92,7 @@ module.exports = BasePage.extend({
     },
     handlePageLoaded: function () {
         this.staydown.checkdown();
-        this.resizeInput();
+        //this.resizeInput();
     },
     handleKeyDown: function (e) {
         if (e.which === 13 && !e.shiftKey) {
@@ -122,7 +123,7 @@ module.exports = BasePage.extend({
         }
     },
     handleKeyUp: function (e) {
-        this.resizeInput();
+        //this.resizeInput();
         if (this.typing && this.$chatInput.val().length === 0) {
             this.typing = false;
             this.paused = false;
@@ -208,12 +209,6 @@ module.exports = BasePage.extend({
         this.$chatInput.removeClass('editing');
         this.$chatInput.val('');
     },
-    handleJoin: function () {
-        this.model.join();
-    },
-    handleLeave: function () {
-        this.model.leave();
-    },
     clickStatusChange: function (e) {
         tempSubject = e.target.textContent;
     },
@@ -230,11 +225,24 @@ module.exports = BasePage.extend({
             return false;
         }
     },
+    clickMembersToggle: function (e) {
+        var roster = $('.groupRoster');
+        if (roster.css('visibility') == 'hidden')
+            roster.css('visibility', 'visible');
+        else
+            roster.css('visibility', 'hidden');
+    },
     appendModel: function (model, preload) {
-        var self = this;
-        var isGrouped = model.shouldGroupWith(this.lastModel);
         var newEl, first, last;
 
+        var messageDay = Date.create(model.timestamp).format('{month} {ord}, {yyyy}');
+        if (messageDay !== this.lastDate) {
+            var dayDivider = $(templates.includes.dayDivider({day_name: messageDay}));
+            this.staydown.append(dayDivider[0]);
+            this.lastDate = messageDay;
+        }
+
+        var isGrouped = model.shouldGroupWith(this.lastModel);
         if (isGrouped) {
             newEl = $(model.partialTemplateHtml);
             last = this.$messageList.find('li').last();
diff --git a/clientapp/templates.js b/clientapp/templates.js
index 0b72fbc..6ea9cae 100644
--- a/clientapp/templates.js
+++ b/clientapp/templates.js
@@ -13,7 +13,7 @@ exports.pages = {};
 exports.body = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<body><div id="connectionOverlay"><aside id="connectionStatus" class="box"><p>You\'re currently<strong>disconnected</strong></p><button class="primary reconnect">Reconnect</button></aside></div><div id="updateBar"><p>Update available!</p><button class="primary upgrade">Upgrade</button></div><div id="wrapper"><aside id="menu"><section id="roster"><h1>Roster</h1><input type="text" id="addcontact" class="inline"/><button class="primary small addContact">Add</button><ul id="contactrequests"></ul><nav></nav></section><section id="bookmarks"><h1>Rooms</h1><input type="text" id="joinmuc" class="inline"/><button class="primary small joinMUC">Add</button><nav></nav></section></aside><header id="me"><h1><img class="avatar"/><span class="name"></span><span contenteditable="true" class="status"></span></h1><a href="/" class="button secondary settings"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg>Settings</a></header></div><main id="pages"></main></body>');
+        buf.push('<body><div id="connectionOverlay"><aside id="connectionStatus" class="box"><p>You\'re currently<strong>disconnected</strong></p><button class="primary reconnect">Reconnect</button></aside></div><div id="updateBar"><p>Update available!</p><button class="primary upgrade">Upgrade</button></div><div id="wrapper"><aside id="menu"><section id="organization"><span id="orga_name"></span></section><section id="bookmarks"><h1>Rooms</h1><nav></nav><input type="text" placeholder="add a room" id="joinmuc" class="inline"/></section><section id="roster"><h1>Direct messages</h1><ul id="contactrequests"></ul><nav></nav><input type="text" placeholder="add a contact" id="addcontact" class="inline"/></section></aside><header id="topbar"><a href="/" class="button secondary settings"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg>Settings</a></header><main id="pages"></main><div id="footer"><div id="me"><div><img class="avatar"/></div><span class="name"></span><span contenteditable="true" spellcheck="false" class="status"></span></div></div></div></body>');
     }
     return buf.join("");
 };
@@ -37,7 +37,7 @@ exports.includes.bareMessage = function anonymous(locals) {
         }, {
             "class": true,
             id: true
-        }) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
+        }) + '><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
         var urls = message.urls;
         buf.push('<section class="embeds">');
         (function() {
@@ -104,12 +104,7 @@ exports.includes.call = function anonymous(locals) {
 exports.includes.contactListItem = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<li class="contact"><div class="wrap"><img' + jade.attrs({
-            src: contact.avatar,
-            "class": "avatar"
-        }, {
-            src: true
-        }) + '/><div class="user"><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</span><span class="idleTime">' + jade.escape(null == (jade.interp = contact.idleSince) ? "" : jade.interp) + '</span></div><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><div class="status">' + jade.escape(null == (jade.interp = contact.status) ? "" : jade.interp) + "</div></div></li>");
+        buf.push('<li class="contact joined"><div class="wrap"><i class="remove fa fa-times-circle"></i><i class="presence fa fa-circle"></i><div class="user"><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</span><span class="idleTime">' + jade.escape(null == (jade.interp = contact.idleSince) ? "" : jade.interp) + '</span></div><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + "</div></div></li>");
     }
     return buf.join("");
 };
@@ -127,7 +122,16 @@ exports.includes.contactListItemResource = function anonymous(locals) {
 exports.includes.contactRequest = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<li><div class="jid"></div><button class="primary small approve">Approve</button><button class="secondary small deny">Deny</button></li>');
+        buf.push('<li><div class="jid"></div><div class="response"><button class="primary small approve">Approve</button><button class="secondary small deny">Deny</button></div></li>');
+    }
+    return buf.join("");
+};
+
+// dayDivider.jade compiled template
+exports.includes.dayDivider = function anonymous(locals) {
+    var buf = [];
+    with (locals || {}) {
+        buf.push('<li class="day_divider"><hr/><div class="day_divider_name">' + jade.escape((jade.interp = day_name) == null ? "" : jade.interp) + "</div></li>");
     }
     return buf.join("");
 };
@@ -231,7 +235,7 @@ exports.includes.mucBareMessage = function anonymous(locals) {
         }, {
             "class": true,
             id: true
-        }) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
+        }) + '><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
         var urls = message.urls;
         buf.push('<section class="embeds">');
         (function() {
@@ -289,7 +293,7 @@ exports.includes.mucBareMessage = function anonymous(locals) {
 exports.includes.mucListItem = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<li class="contact"><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><div class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</div><button class="primary small joinRoom">Join</button><button class="secondary small leaveRoom">Leave</button></li>');
+        buf.push('<li class="contact"><div class="wrap"><i class="remove fa fa-times-circle"></i><i class="join fa fa-sign-in"></i><span class="prefix">#</span><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + "</span></div></li>");
     }
     return buf.join("");
 };
@@ -307,13 +311,21 @@ exports.includes.mucRosterItem = function anonymous(locals) {
 exports.includes.mucWrappedMessage = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<li><div class="sender"><div class="name">' + jade.escape(null == (jade.interp = message.from.resource) ? "" : jade.interp) + '</div></div><div class="messageWrapper"><div' + jade.attrs({
+        buf.push('<li><div class="sender"><a href="#" class="messageAvatar"><img' + jade.attrs({
+            src: "https://gravatar.com/avatar",
+            alt: message.from.resource,
+            "data-placement": "below"
+        }, {
+            src: true,
+            alt: true,
+            "data-placement": true
+        }) + '/></a></div><div class="messageWrapper"><div class="message_header"><div class="name">' + jade.escape((jade.interp = message.from.resource) == null ? "" : jade.interp) + '</div><div class="date">' + jade.escape((jade.interp = Date.create(message.timestamp).format("{h}:{mm} {tt}")) == null ? "" : jade.interp) + "</div></div><div" + jade.attrs({
             id: "chat" + message.cid,
             "class": "message" + " " + message.classList
         }, {
             "class": true,
             id: true
-        }) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
+        }) + '><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
         var urls = message.urls;
         buf.push('<section class="embeds">');
         (function() {
@@ -379,13 +391,13 @@ exports.includes.wrappedMessage = function anonymous(locals) {
             src: true,
             alt: true,
             "data-placement": true
-        }) + '/></a></div><div class="messageWrapper"><div' + jade.attrs({
+        }) + '/></a></div><div class="messageWrapper"><div class="message_header"><div class="name">' + jade.escape((jade.interp = message.sender.displayName) == null ? "" : jade.interp) + '</div><div class="date">' + jade.escape((jade.interp = Date.create(message.timestamp).format("{h}:{mm} {tt}")) == null ? "" : jade.interp) + "</div></div><div" + jade.attrs({
             id: "chat" + message.cid,
             "class": "message" + " " + message.classList
         }, {
             "class": true,
             id: true
-        }) + '><span class="timestamp">' + jade.escape(null == (jade.interp = message.formattedTime) ? "" : jade.interp) + '</span><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
+        }) + '><p class="body">' + ((jade.interp = message.processedBody) == null ? "" : jade.interp) + "</p>");
         var urls = message.urls;
         buf.push('<section class="embeds">');
         (function() {
@@ -470,7 +482,7 @@ exports.misc.growlMessage = function anonymous(locals) {
 exports.pages.chat = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page chat"><section class="conversation"><header><h1><span class="status"></span><span class="name"></span><button class="primary small call">Call</button><button class="secondary small remove">Remove</button></h1><div class="tzo"></div><div class="activeCall"><video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="button-wrap"><button class="accept primary">Accept</button><button class="end secondary">End</button><div class="button-group outlined"><button class="mute">Mute</button><button class="unmute">Unmute</button></div></aside></div></header><ul class="messages scroll-container"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
+        buf.push('<section class="page chat"><section class="conversation"><header><h1><span class="prefix">@</span><span class="name"></span><i class="user_presence fa fa-circle"></i><span class="status"></span></h1><div class="tzo"></div></header><ul class="messages scroll-container"></ul><div class="activeCall"><div class="container"><video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="button-wrap"><button class="accept primary">Accept</button><button class="end secondary">End</button><div class="button-group outlined"><button class="mute">Mute</button><button class="unmute">Unmute</button></div></aside></div></div><div class="chatBox"><form class="formwrap"><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form><button class="primary small call">Call</button></div></section></section>');
     }
     return buf.join("");
 };
@@ -479,7 +491,7 @@ exports.pages.chat = function anonymous(locals) {
 exports.pages.groupchat = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page chat"><section class="group conversation"><header class="online"><h1><span class="name"></span><span contenteditable="true" class="status"></span></h1><div class="controls"><button class="primary small joinRoom">Join</button><button class="secondary small leaveRoom">Leave</button></div></header><ul class="messages"></ul><ul class="groupRoster"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
+        buf.push('<section class="page chat"><section class="group conversation"><header class="online"><h1><span class="prefix">#</span><span class="name"></span><i class="channel_actions fa fa-chevron-down"></i><span contenteditable="true" spellcheck="false" class="status"></span></h1></header><ul class="messages"></ul><a id="members_toggle"><i class="fa fa-user"></i><span id="members_toggle_count"></span></a><ul class="groupRoster"></ul><div class="chatBox"><form class="formwrap"><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
     }
     return buf.join("");
 };
diff --git a/clientapp/templates/body.jade b/clientapp/templates/body.jade
index cad99ad..42ac30c 100644
--- a/clientapp/templates/body.jade
+++ b/clientapp/templates/body.jade
@@ -10,26 +10,28 @@ body
     button.primary.upgrade Upgrade
   #wrapper
     aside#menu
-      section#roster
-        h1 Roster
-        input(type="text", class="inline")#addcontact
-        button.primary.small.addContact Add
-        ul#contactrequests
-        nav
+      section#organization
+        span#orga_name
       section#bookmarks
         h1 Rooms
-        input(type="text", class="inline")#joinmuc
-        button.primary.small.joinMUC Add
         nav
-    header#me
-      h1
-        img.avatar
-        span.name
-        span.status(contenteditable="true")
+        input(type="text", class="inline", placeholder="add a room")#joinmuc
+      section#roster
+        h1 Direct messages
+        ul#contactrequests
+        nav
+        input(type="text", class="inline", placeholder="add a contact")#addcontact
+    header#topbar
       a(href="/", class="button secondary settings")
         svg(version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', viewbox="0 0 25 25", height="25", width="25")
           g(transform='scale(0.4)')
             path(d='M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z')
             path(d='M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z')
         | Settings
-   main#pages
+    main#pages
+    #footer
+      #me
+        div
+          img.avatar
+        span.name
+        span.status(contenteditable="true", spellcheck="false")
diff --git a/clientapp/templates/head.jade b/clientapp/templates/head.jade
index be675c9..bd39dde 100644
--- a/clientapp/templates/head.jade
+++ b/clientapp/templates/head.jade
@@ -1,5 +1,7 @@
 meta(name="viewport", content="width=device-width,initial-scale=1.0,maximum-scale=1.0")
 meta(name="apple-mobile-web-app-capable", content="yes")
+link(rel="stylesheet", type="text/css", href="//fonts.googleapis.com/css?family=Lato:400,700")
+link(rel="stylesheet", type="text/css", href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css")
 link(rel="stylesheet", type="text/css", href="//cloud.typography.com/7773252/657662/css/fonts.css")
 link(rel="shortcut icon", type="image/png", href="data:image/png;base64,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")
 script(src="/config.js")
diff --git a/clientapp/templates/includes/bareMessage.jade b/clientapp/templates/includes/bareMessage.jade
index e2062ae..8b4c397 100644
--- a/clientapp/templates/includes/bareMessage.jade
+++ b/clientapp/templates/includes/bareMessage.jade
@@ -1,5 +1,4 @@
 .message(id='chat'+message.cid, class=message.classList)
-  span.timestamp=message.formattedTime
   p.body !{message.processedBody}
   - var urls = message.urls
   section.embeds
diff --git a/clientapp/templates/includes/contactListItem.jade b/clientapp/templates/includes/contactListItem.jade
index 78bd2fe..252fba3 100644
--- a/clientapp/templates/includes/contactListItem.jade
+++ b/clientapp/templates/includes/contactListItem.jade
@@ -1,8 +1,8 @@
-li.contact
+li.contact.joined
   .wrap
-    img.avatar(src=contact.avatar)
+    i.remove.fa.fa-times-circle
+    i.presence.fa.fa-circle
     .user
       span.name=contact.displayName
       span.idleTime=contact.idleSince
     .unread=contact.unreadCount
-    .status=contact.status
diff --git a/clientapp/templates/includes/contactRequest.jade b/clientapp/templates/includes/contactRequest.jade
index bbfd4dc..a7dd9e5 100644
--- a/clientapp/templates/includes/contactRequest.jade
+++ b/clientapp/templates/includes/contactRequest.jade
@@ -1,4 +1,5 @@
 li
   .jid
-  button.primary.small.approve Approve
-  button.secondary.small.deny Deny
+  .response
+      button.primary.small.approve Approve
+      button.secondary.small.deny Deny
diff --git a/clientapp/templates/includes/dayDivider.jade b/clientapp/templates/includes/dayDivider.jade
new file mode 100644
index 0000000..392f375
--- /dev/null
+++ b/clientapp/templates/includes/dayDivider.jade
@@ -0,0 +1,3 @@
+li.day_divider
+  hr
+  div.day_divider_name #{day_name}
diff --git a/clientapp/templates/includes/mucBareMessage.jade b/clientapp/templates/includes/mucBareMessage.jade
index e2062ae..8b4c397 100644
--- a/clientapp/templates/includes/mucBareMessage.jade
+++ b/clientapp/templates/includes/mucBareMessage.jade
@@ -1,5 +1,4 @@
 .message(id='chat'+message.cid, class=message.classList)
-  span.timestamp=message.formattedTime
   p.body !{message.processedBody}
   - var urls = message.urls
   section.embeds
diff --git a/clientapp/templates/includes/mucListItem.jade b/clientapp/templates/includes/mucListItem.jade
index d9bc337..465cc19 100644
--- a/clientapp/templates/includes/mucListItem.jade
+++ b/clientapp/templates/includes/mucListItem.jade
@@ -1,5 +1,7 @@
 li.contact
-  .unread=contact.unreadCount
-  .name=contact.displayName
-  button.primary.small.joinRoom Join
-  button.secondary.small.leaveRoom Leave
+  .wrap
+    i.remove.fa.fa-times-circle
+    i.join.fa.fa-sign-in
+    span.prefix #
+    .unread=contact.unreadCount
+    span.name=contact.displayName
diff --git a/clientapp/templates/includes/mucWrappedMessage.jade b/clientapp/templates/includes/mucWrappedMessage.jade
index 5676cc0..d8caa22 100644
--- a/clientapp/templates/includes/mucWrappedMessage.jade
+++ b/clientapp/templates/includes/mucWrappedMessage.jade
@@ -1,5 +1,9 @@
 li
   .sender
-    .name=message.from.resource
+    a.messageAvatar(href='#')
+      img(src="https://gravatar.com/avatar", alt=message.from.resource, data-placement="below")
   .messageWrapper
+    .message_header
+      .name #{message.from.resource}
+      .date #{Date.create(message.timestamp).format('{h}:{mm} {tt}')}
     include mucBareMessage
diff --git a/clientapp/templates/includes/wrappedMessage.jade b/clientapp/templates/includes/wrappedMessage.jade
index 51efa6e..f221b7f 100644
--- a/clientapp/templates/includes/wrappedMessage.jade
+++ b/clientapp/templates/includes/wrappedMessage.jade
@@ -3,4 +3,7 @@ li
     a.messageAvatar(href='#')
       img(src=message.sender.avatar, alt=message.sender.displayName, data-placement="below")
   .messageWrapper
+    .message_header
+      .name #{message.sender.displayName}
+      .date #{Date.create(message.timestamp).format('{h}:{mm} {tt}')}
     include bareMessage
diff --git a/clientapp/templates/pages/chat.jade b/clientapp/templates/pages/chat.jade
index c076b8d..542e98b 100644
--- a/clientapp/templates/pages/chat.jade
+++ b/clientapp/templates/pages/chat.jade
@@ -2,12 +2,14 @@ section.page.chat
   section.conversation
     header
       h1
-        span.status
+        span.prefix @
         span.name
-        button.primary.small.call Call
-        button.secondary.small.remove Remove
+        i.user_presence.fa.fa-circle
+        span.status
       .tzo
-      .activeCall
+    ul.messages.scroll-container
+    .activeCall
+      .container
         video.remote(autoplay)
         video.local(autoplay, muted)
         aside.button-wrap
@@ -16,7 +18,7 @@ section.page.chat
           .button-group.outlined
             button.mute Mute
             button.unmute Unmute
-    ul.messages.scroll-container
     .chatBox
-      form
+      form.formwrap
         textarea(name='chatInput', type='text', placeholder='Send a message...', autocomplete='off')
+      button.primary.small.call Call
diff --git a/clientapp/templates/pages/groupchat.jade b/clientapp/templates/pages/groupchat.jade
index 335cd62..ee225d2 100644
--- a/clientapp/templates/pages/groupchat.jade
+++ b/clientapp/templates/pages/groupchat.jade
@@ -2,13 +2,15 @@ section.page.chat
   section.group.conversation
     header.online
       h1
+        span.prefix #
         span.name
-        span.status(contenteditable="true")
-      .controls
-        button.primary.small.joinRoom Join
-        button.secondary.small.leaveRoom Leave
+        i.channel_actions.fa.fa-chevron-down
+        span.status(contenteditable="true", spellcheck="false")
     ul.messages
+    a#members_toggle
+      i.fa.fa-user
+      span#members_toggle_count
     ul.groupRoster
     .chatBox
-      form
+      form.formwrap
         textarea(name='chatInput', type='text', placeholder='Send a message...', autocomplete='off')
diff --git a/clientapp/views/contactListItem.js b/clientapp/views/contactListItem.js
index a3650d7..d555734 100644
--- a/clientapp/views/contactListItem.js
+++ b/clientapp/views/contactListItem.js
@@ -19,20 +19,27 @@ module.exports = HumanView.extend({
     },
     textBindings: {
         displayName: '.name',
-        status: '.status',
         displayUnreadCount: '.unread'
     },
     srcBindings: {
-        avatar: '.avatar'
     },
     events: {
-        'click': 'handleClick'
+        'click': 'handleClick',
+        'click .remove': 'handleRemoveContact'
     },
     render: function () {
         this.renderAndBind({contact: this.model});
         return this;
     },
     handleClick: function () {
-        app.navigate('chat/' + this.model.jid);
+        if (me.contacts.get(this.model.jid)) {
+            app.navigate('chat/' + this.model.jid);
+        }
+    },
+    handleRemoveContact: function() {
+        me.removeContact(this.model.jid);
+        if (app.history.fragment === 'chat/' + this.model.jid) {
+            app.navigate('/');
+        }
     }
 });
diff --git a/clientapp/views/main.js b/clientapp/views/main.js
index 1ce2a4d..6f0bda7 100644
--- a/clientapp/views/main.js
+++ b/clientapp/views/main.js
@@ -24,9 +24,7 @@ module.exports = HumanView.extend({
         'click .embed': 'handleEmbedClick',
         'click .reconnect': 'handleReconnect',
         'click .logout': 'handleLogout',
-        'click .addContact': 'handleAddContact',
         'keydown #addcontact': 'keyDownAddContact',
-        'click .joinMUC': 'handleJoinMUC',
         'keydown #joinmuc': 'keyDownJoinMUC',
         'blur #me .status': 'handleStatusChange',
         'keydown .status': 'keyDownStatus'
@@ -47,7 +45,8 @@ module.exports = HumanView.extend({
         this.registerBindings(me, {
             textBindings: {
                 displayName: '#me .name',
-                status: '#me .status'
+                status: '#me .status',
+                organization: '#organization #orga_name',
             },
             srcBindings: {
                 avatar: '#me .avatar'
diff --git a/clientapp/views/mucListItem.js b/clientapp/views/mucListItem.js
index fcdf6a4..b889033 100644
--- a/clientapp/views/mucListItem.js
+++ b/clientapp/views/mucListItem.js
@@ -20,8 +20,8 @@ module.exports = HumanView.extend({
     },
     events: {
         'click .name': 'handleClick',
-        'click .joinRoom': 'handleJoinRoom',
-        'click .leaveRoom': 'handleLeaveRoom'
+        'click .join': 'handleJoinRoom',
+        'click .remove': 'handleLeaveRoom'
     },
     render: function () {
         this.renderAndBind({contact: this.model});
diff --git a/dev_config.json b/dev_config.json
index f5f7a8b..55fa62b 100644
--- a/dev_config.json
+++ b/dev_config.json
@@ -13,6 +13,7 @@
         "secret": "shhhhhh don't tell anyone ok?"
     },
     "server": {
+        "name": "Otalk",
         "domain": "localhost",
         "wss": "wss://localhost:5281/xmpp-websocket/",
         "muc": "chat.localhost",
diff --git a/public/css/_mixins.styl b/public/css/_mixins.styl
index 22d7391..9bfa9e5 100644
--- a/public/css/_mixins.styl
+++ b/public/css/_mixins.styl
@@ -38,9 +38,9 @@ borderbox()
 // avatars
 
 avatar()
-  width: 30px
-  height: 30px
-  roundall(50px)
+  width: 36px
+  height: 36px
+  roundall(0.2rem)
 
 // this if for the content flash and hardware acceleration bugs in webkit
 webkit-transition-fix()
diff --git a/public/css/_variables.styl b/public/css/_variables.styl
index 1f930dc..2c4f9c9 100644
--- a/public/css/_variables.styl
+++ b/public/css/_variables.styl
@@ -25,9 +25,10 @@ $pink-lighter = #fce8f1
 
 // Greens
 
-$green = #43bb6e
+$green = #4C9689
 $green-light = lighten($green, 70%)
 $green-lighter = lighten($green, 94%)
+$green-lighterer = #B2D5C9
 
 // Reds
 
@@ -41,13 +42,69 @@ $orange = #f18902
 $orange-light = lighten($orange, 50%)
 $orange-lighter = lighten($orange, 85%)
 
+// Brown
+
+$brown = #4D394B
+$brown-light = #AB9BA9
+$brown-lighter = lighten($brown, 20%)
+$brown-dark = #3E313C
+$brown-darker = #372C36
+$brown-darkerer = #625361
+
+// Gray
+
+$gray-dark = #555459
+$gray = #9E9EA6
+$gray-light = #BABBBF
+$gray-lighter = #E0E0E0
+
+// Black
+
+$black = #3D3C40
+
+
+// Style
+
+$sidebarTopAndBottomBg = #1A233F
+$sidebarOrgaName = #fff
+$sidebarBorder = #121A33
+$sidebarBg = #3D486B
+$sidebarText = #ABB6DA
+
+$sidebarNames = #C1DCEC
+
+$sidebarInputBg = $sidebarBg
+$sidebarInputBorder = #626F9C
+$sidebarInputText = $sidebarNames
+
+$sidebarSelectionBg = #94B021
+$sidebarSelectionText = #fff
+
+$sidebarUnreadBg = $sidebarSelectionBg
+$sidebarUnreadText = $sidebarSelectionText
+
+$sidebarHover = $sidebarTopAndBottomBg
+
+$sidebarRequestBg = $sidebarHover
+$sidebarRequestBorder = $sidebarHover
+
+$sidebarStatusText = $sidebarNames
+$sidebarStatusBorder = $sidebarInputBorder
+
+$settingsBg = #fff
+$settingsText = $sidebarBg
+$settingsHoverBg = $sidebarBg
+$settingsHoverText = #fff
+
 // Font families
 
+$font-family-lato = 'Lato', sans-serif
 $font-family-gotham = 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif
 
 // Font sizes
 
-$font-size-large = 16px
+$font-size-large = 17px
+$font-size-message = 15px
 $font-size-base = 14px
 $font-size-small = 12px
 $font-size-smaller = 10px
@@ -60,4 +117,6 @@ $font-size-h4 = 12px
 $line-height-base = 18px
 $line-height-headings = 26px
 
-$font-weight-bold = 800
+$font-weight-classic = 500
+$font-weight-bold = 700
+$font-weight-bolder = 900
diff --git a/public/css/components/buttons.styl b/public/css/components/buttons.styl
index 04f17cc..826c235 100644
--- a/public/css/components/buttons.styl
+++ b/public/css/components/buttons.styl
@@ -8,7 +8,6 @@ button
 
 .button, button
   display: inline-block
-  border-radius: 3px
   padding: 0 15px
   height: 35px
   background: $gray-lighter
@@ -16,7 +15,9 @@ button
   font-weight: $font-weight-bold
   text-align: center
   text-decoration: none
-  color: $gray-light
+  color: $gray
+  border: 1px solid $gray-light
+  border-radius: 3px
   text-overflow: ellipsis
   vertical-align: middle
   user-select()
@@ -49,22 +50,22 @@ button
     color: white
 
   &.primary
-    background: $pink
+    background: $green
 
     &:hover:not(:disabled)
-      background: darken($pink, 10%)
+      background: darken($green, 10%)
 
     &:disabled
-      background: $pink-light
+      background: $green-light
 
   &.secondary
-    background: $blue
+    background: $red
 
     &:disabled
-      background: $blue-light
+      background: $red-light
 
     &:hover:not(:disabled)
-      background: darken($blue, 10%)
+      background: darken($red, 10%)
 
 .button-group
 
@@ -86,7 +87,7 @@ button
     border-radius: 3px
 
     button, .button
-      border: 1px solid lighten($gray-light, 70%)
+      border: 1px solid $gray-light
 
     &.primary
 
diff --git a/public/css/components/forms.styl b/public/css/components/forms.styl
index 8b4e0f4..8663173 100644
--- a/public/css/components/forms.styl
+++ b/public/css/components/forms.styl
@@ -8,7 +8,7 @@ input[type=text], input[type=email], input[type=password], input[type=search], i
     display: inline-block
     width: auto
 
-input[type=text], input[type=email], input[type=password], input[type=search], 
+input[type=text], input[type=email], input[type=password], input[type=search],
 input[type=date], input[type=url], input[type=file], textarea, select, input[type=checkbox], input[type=radio]
 
   &:disabled
@@ -49,10 +49,6 @@ input[type=text], input[type=email], input[type=password], input[type=search], i
 
   &:focus
     outline: none
-    border: 1px solid $blue-light
-    box-shadow: 0 0 5px $blue-light
-    transition: all .3s ease-in
-    -webkit-transition: all .3s ease-in
 
   &:disabled
     background: lighten($gray-lighter, 60%)
diff --git a/public/css/components/layout.styl b/public/css/components/layout.styl
index c92355f..4843910 100644
--- a/public/css/components/layout.styl
+++ b/public/css/components/layout.styl
@@ -1,17 +1,16 @@
 @import '../_variables'
 @import '../_mixins'
 
+html
+  font-size: 100%
+
 body
   background: white
-  color: $gray
-  font-family: $font-family-gotham
+  font-family: $font-family-lato
   font-size: $font-size-base
   font-weight: 400
   -webkit-font-smoothing: antialiased
 
-h1, h2, h3, h4
-  color: darken($gray, 30%)
-
 h4
   margin-top: 0
   font-size: $font-size-h4
@@ -28,6 +27,6 @@ a
   position: absolute
   top: 0px
   right: 0px
-  left: 270px
+  left: 220px
   height: 100%
   borderbox()
diff --git a/public/css/otalk.css b/public/css/otalk.css
index efac921..ccabaf4 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -161,27 +161,23 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 }
+html {
+  font-size: 100%;
+}
 body {
   background: #fff;
-  color: #565656;
-  font-family: 'Gotham SSm A', 'Gotham SSm B', Helvetica, Arial, sans-serif;
+  font-family: 'Lato', sans-serif;
   font-size: 14px;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
 }
-h1,
-h2,
-h3,
-h4 {
-  color: #3c3c3c;
-}
 h4 {
   margin-top: 0;
   font-size: 12px;
 }
 a {
   color: #12acef;
-  font-weight: 800;
+  font-weight: 700;
   text-decoration: none;
 }
 a:hover,
@@ -192,7 +188,7 @@ a:active {
   position: absolute;
   top: 0px;
   right: 0px;
-  left: 270px;
+  left: 220px;
   height: 100%;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -264,7 +260,7 @@ input[type=radio]:disabled {
   box-shadow: 0 0 5px #fdcad3;
 }
 .valid label {
-  color: #43bb6e;
+  color: #4c9689;
 }
 .valid input[type=text],
 .valid input[type=email],
@@ -274,9 +270,9 @@ input[type=radio]:disabled {
 .valid input[type=url],
 .valid input[type=file],
 .valid textarea {
-  background: #f4fbf6;
-  border: 1px solid #c6ebd3;
-  color: #c6ebd3;
+  background: #f4f9f8;
+  border: 1px solid #c6e2dd;
+  color: #c6e2dd;
 }
 .valid input[type=text]:focus,
 .valid input[type=email]:focus,
@@ -286,8 +282,8 @@ input[type=radio]:disabled {
 .valid input[type=url]:focus,
 .valid input[type=file]:focus,
 .valid textarea:focus {
-  border: 1px solid #c6ebd3;
-  box-shadow: 0 0 5px #c6ebd3;
+  border: 1px solid #c6e2dd;
+  box-shadow: 0 0 5px #c6e2dd;
 }
 input[type=text],
 input[type=email],
@@ -301,7 +297,7 @@ select,
 .main .status {
   display: block;
   border-radius: 3px;
-  border: 1px solid #eee;
+  border: 1px solid #e0e0e0;
 }
 input[type=text]:focus,
 input[type=email]:focus,
@@ -314,10 +310,6 @@ textarea:focus,
 select:focus,
 .main .status:focus {
   outline: none;
-  border: 1px solid #88d5f7;
-  box-shadow: 0 0 5px #88d5f7;
-  transition: all 0.3s ease-in;
-  -webkit-transition: all 0.3s ease-in;
 }
 input[type=text]:disabled,
 input[type=email]:disabled,
@@ -329,7 +321,7 @@ input[type=file]:disabled,
 textarea:disabled,
 select:disabled,
 .main .status:disabled {
-  background: #f8f8f8;
+  background: #f3f3f3;
 }
 input[type=text],
 input[type=email],
@@ -348,14 +340,14 @@ textarea {
 }
 input[type=file] {
   padding: 15px;
-  background: #fafafa;
+  background: #f6f6f6;
   font-size: 12px;
-  color: #878787;
+  color: #babbbf;
 }
 label {
   display: block;
   margin-bottom: 5px;
-  font-weight: 800;
+  font-weight: 700;
   font-size: 12px;
 }
 .has-icon {
@@ -372,10 +364,10 @@ label {
   color: #fdcad3;
 }
 .has-icon .ss-icon.ss-check {
-  color: #c6ebd3;
+  color: #c6e2dd;
 }
 .has-icon .ss-icon.ss-search {
-  color: #eee;
+  color: #e0e0e0;
 }
 button {
   border: none;
@@ -386,15 +378,16 @@ button {
 .button,
 button {
   display: inline-block;
-  border-radius: 3px;
   padding: 0 15px;
   height: 35px;
-  background: #eee;
+  background: #e0e0e0;
   font-size: 12px;
-  font-weight: 800;
+  font-weight: 700;
   text-align: center;
   text-decoration: none;
-  color: #878787;
+  color: #9e9ea6;
+  border: 1px solid #babbbf;
+  border-radius: 3px;
   text-overflow: ellipsis;
   vertical-align: middle;
 }
@@ -404,14 +397,14 @@ button:focus {
 }
 .button:hover:not(:disabled),
 button:hover:not(:disabled) {
-  color: #565656;
-  background: #d6d6d6;
+  color: #9e9ea6;
+  background: #cacaca;
   transition: all 0.3s ease-in;
 }
 .button:disabled,
 button:disabled {
   cursor: not-allowed;
-  color: #b7b7b7;
+  color: #d6d6d9;
 }
 .button.small,
 button.small {
@@ -425,7 +418,7 @@ button.large {
   height: 50px;
   line-height: 50px;
   padding: 0 30px;
-  font-size: 16px;
+  font-size: 17px;
 }
 .button.primary,
 button.primary,
@@ -439,27 +432,27 @@ button.secondary:hover {
 }
 .button.primary,
 button.primary {
-  background: #ec008c;
+  background: #4c9689;
 }
 .button.primary:hover:not(:disabled),
 button.primary:hover:not(:disabled) {
-  background: #d4007e;
+  background: #44877b;
 }
 .button.primary:disabled,
 button.primary:disabled {
-  background: #f8bee0;
+  background: #c6e2dd;
 }
 .button.secondary,
 button.secondary {
-  background: #12acef;
+  background: #de0a32;
 }
 .button.secondary:disabled,
 button.secondary:disabled {
-  background: #88d5f7;
+  background: #fdcad3;
 }
 .button.secondary:hover:not(:disabled),
 button.secondary:hover:not(:disabled) {
-  background: #0f9bd9;
+  background: #c8092d;
 }
 .button-group .button,
 .button-group button {
@@ -484,7 +477,7 @@ button.secondary:hover:not(:disabled) {
 }
 .button-group.outlined button,
 .button-group.outlined .button {
-  border: 1px solid #dbdbdb;
+  border: 1px solid #babbbf;
 }
 .button-group.outlined.primary button,
 .button-group.outlined.primary .button {
@@ -561,9 +554,10 @@ button.secondary:hover:not(:disabled) {
   top: 0px;
   bottom: 0px;
   left: 0px;
-  width: 270px;
-  background-color: #0b1316;
-  border-right: 1px solid #eee;
+  width: 220px;
+  background-color: #3d486b;
+  color: #abb6da;
+  border-right: 1px solid #121a33;
   z-index: 300;
   overflow-y: auto;
   overflow-x: hidden;
@@ -575,6 +569,21 @@ button.secondary:hover:not(:disabled) {
   -ms-user-select: none;
   user-select: none;
 }
+#menu #organization {
+  width: 220px;
+  height: 53px;
+  background-color: #1a233f;
+  border-bottom: 2px solid #121a33;
+  margin-bottom: 10px;
+}
+#menu #organization #orga_name {
+  color: #fff;
+  font-size: 17px;
+  font-weight: 900;
+  line-height: 53px;
+  vertical-align: middle;
+  margin-left: 20px;
+}
 #menu .main {
   margin: 10px 0 0 0;
   text-align: center;
@@ -597,17 +606,35 @@ button.secondary:hover:not(:disabled) {
   position: relative;
 }
 #menu h1 {
-  font-size: 12px;
+  font-size: 14px;
   margin: 0;
-  padding: 20px 10px;
-  color: #fff;
+  padding: 4px 20px;
   text-transform: uppercase;
 }
+#roster,
+#bookmarks {
+  margin-right: 20px;
+  margin-bottom: 25px;
+}
 #roster #contactrequests,
 #bookmarks #contactrequests {
   margin: 0px;
   padding-left: 0px;
-  background: #192a47;
+}
+#roster #contactrequests li,
+#bookmarks #contactrequests li {
+  width: 180px;
+  height: 68px;
+  margin-left: 20px;
+  margin-bottom: 10px;
+  padding-bottom: 4px;
+  background: #1a233f;
+  border-radius: 0.25rem;
+  border: 2px solid #1a233f;
+}
+#roster #contactrequests li .response,
+#bookmarks #contactrequests li .response {
+  text-align: center;
 }
 #roster .jid,
 #bookmarks .jid {
@@ -626,107 +653,126 @@ button.secondary:hover:not(:disabled) {
 #bookmarks #addcontact,
 #roster #joinmuc,
 #bookmarks #joinmuc {
-  margin: 0px 10px 5px 10px;
+  margin: 8px 20px 5px 20px;
   padding: 0px 10px;
   width: 178px;
   height: 25px;
   font-size: 12px;
+  background-color: #3d486b;
+  border-radius: 0.25rem;
+  border: 1px solid #626f9c;
+  color: #c1dcec;
 }
 #roster li,
 #bookmarks li {
   list-style-type: none;
-  padding: 7px 10px 7px 10px;
+  padding: 4px 10px;
   margin: 0px;
+  border-radius: 0px 0.25rem 0.25rem 0px;
   position: relative;
-  min-height: 40px;
-  font-size: 12px;
-  color: #fff;
+  height: 25px;
+  font-size: 14px;
   cursor: pointer;
-  transition: all 0.3s ease-in 0;
-  -webkit-transition: all 0.3s ease-in 0;
-  -moz-transition: all 0.3s ease-in 0;
   width: 100%;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-}
-#roster li .wrap,
-#bookmarks li .wrap {
-  vertical-align: middle;
-  padding-left: 40px;
+  color: #c1dcec;
 }
 #roster li:hover,
 #bookmarks li:hover {
-  background: #192a47;
+  background: #1a233f;
 }
-#roster li.online:after,
-#bookmarks li.online:after,
-#roster li.chat:after,
-#bookmarks li.chat:after,
-#roster li.dnd:after,
-#bookmarks li.dnd:after,
-#roster li.away:after,
-#bookmarks li.away:after,
-#roster li.xa:after,
-#bookmarks li.xa:after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  right: 15px;
-  height: 6px;
-  width: 6px;
-  margin-top: -4px;
-  border: 1px solid transparent;
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  -khtml-border-radius: 10px;
-  -o-border-radius: 10px;
-  -border-radius: 10px;
-  border-radius: 10px;
+#roster li.joined:hover:not(.hasUnread) .remove,
+#bookmarks li.joined:hover:not(.hasUnread) .remove {
+  visibility: visible;
 }
-#roster li.online:after,
-#bookmarks li.online:after,
-#roster li.chat:after,
-#bookmarks li.chat:after {
-  background: #43bb6e;
-  border-color: #43bb6e;
+#roster li:not(.joined):hover:not(.hasUnread) .join,
+#bookmarks li:not(.joined):hover:not(.hasUnread) .join {
+  visibility: visible;
 }
-#roster li.dnd:after,
-#bookmarks li.dnd:after {
-  background: #de0a32;
-  border-color: #de0a32;
+#roster li.hasUnread,
+#bookmarks li.hasUnread,
+#roster li.hasUnread .prefix,
+#bookmarks li.hasUnread .prefix {
+  font-weight: 900;
+  color: #fff;
 }
-#roster li.away:after,
-#bookmarks li.away:after,
-#roster li.xa:after,
-#bookmarks li.xa:after {
-  background: #f18902;
-  border-color: #f18902;
+#roster li:not(.activeContact).offline .presence,
+#bookmarks li:not(.activeContact).offline .presence,
+#roster li:not(.activeContact).chat .presence,
+#bookmarks li:not(.activeContact).chat .presence {
+  color: #ab9ba9;
 }
-#roster li.offline:not(:hover) .name,
-#bookmarks li.offline:not(:hover) .name {
-  color: #515151;
+#roster li:not(.activeContact).dnd .presence,
+#bookmarks li:not(.activeContact).dnd .presence {
+  color: #de0a32;
+  opacity: 1;
 }
-#roster li.offline:not(:hover) .status,
-#bookmarks li.offline:not(:hover) .status {
-  color: #2f2f2f;
-}
-#roster li.offline:not(:hover) img,
-#bookmarks li.offline:not(:hover) img {
-  opacity: 0.25;
+#roster li:not(.activeContact).away .presence,
+#bookmarks li:not(.activeContact).away .presence,
+#roster li:not(.activeContact).xa .presence,
+#bookmarks li:not(.activeContact).xa .presence {
+  color: #f18902;
+  opacity: 1;
 }
 #roster li.activeContact,
 #bookmarks li.activeContact,
 #roster li.offline.activeContact,
 #bookmarks li.offline.activeContact {
-  background: #fff;
-  font-weight: 800;
+  background: #94b021;
+}
+#roster li.activeContact .prefix,
+#bookmarks li.activeContact .prefix,
+#roster li.offline.activeContact .prefix,
+#bookmarks li.offline.activeContact .prefix {
+  color: #b2d5c9;
+  opacity: 1;
+}
+#roster li.activeContact:not(.dnd):not(.away):not(.online) .presence,
+#bookmarks li.activeContact:not(.dnd):not(.away):not(.online) .presence,
+#roster li.offline.activeContact:not(.dnd):not(.away):not(.online) .presence,
+#bookmarks li.offline.activeContact:not(.dnd):not(.away):not(.online) .presence {
+  color: #625361;
+  opacity: 1;
+}
+#roster li.activeContact .remove,
+#bookmarks li.activeContact .remove,
+#roster li.offline.activeContact .remove,
+#bookmarks li.offline.activeContact .remove,
+#roster li.activeContact .join,
+#bookmarks li.activeContact .join,
+#roster li.offline.activeContact .join,
+#bookmarks li.offline.activeContact .join {
+  color: #fff;
 }
 #roster li.activeContact .name,
 #bookmarks li.activeContact .name,
 #roster li.offline.activeContact .name,
 #bookmarks li.offline.activeContact .name {
-  color: #565656;
+  color: #fff;
+}
+#roster li:not(.activeContact).online .presence,
+#bookmarks li:not(.activeContact).online .presence {
+  color: #4c9689;
+  opacity: 1;
+}
+#roster li.online .name,
+#bookmarks li.online .name,
+#roster li.dnd .name,
+#bookmarks li.dnd .name,
+#roster li.away .name,
+#bookmarks li.away .name {
+  font-style: normal;
+}
+#roster li.activeContact.online .presence,
+#bookmarks li.activeContact.online .presence,
+#roster li.activeContact.dnd .presence,
+#bookmarks li.activeContact.dnd .presence,
+#roster li.activeContact.away .presence,
+#bookmarks li.activeContact.away .presence {
+  color: #fff;
+  opacity: 1;
 }
 #roster li.composing:after,
 #bookmarks li.composing:after {
@@ -736,8 +782,8 @@ button.secondary:hover:not(:disabled) {
 }
 #roster li.paused:after,
 #bookmarks li.paused:after {
-  background: #ababab;
-  border-color: #ababab;
+  background: #cfcfd2;
+  border-color: #cfcfd2;
 }
 #roster li.idle,
 #bookmarks li.idle {
@@ -749,51 +795,34 @@ button.secondary:hover:not(:disabled) {
 }
 #roster li.idle .name,
 #bookmarks li.idle .name {
-  color: #878787;
+  color: #c1dcec;
   max-width: 60%;
 }
 #roster li.idle .user,
 #bookmarks li.idle .user {
   width: 95%;
 }
-#roster li img,
-#bookmarks li img {
-  opacity: 1;
-}
-#roster li .avatar,
-#bookmarks li .avatar {
-  vertical-align: top;
-  margin-right: 5px;
-  margin-top: -15px;
-  position: absolute;
-  left: 10px;
-  top: 20px;
-  width: 30px;
-  height: 30px;
-  -moz-border-radius: 50px;
-  -webkit-border-radius: 50px;
-  -khtml-border-radius: 50px;
-  -o-border-radius: 50px;
-  -border-radius: 50px;
-  border-radius: 50px;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+#roster li .presence,
+#bookmarks li .presence {
+  font-size: 10px;
+  display: inline-block;
+  margin-top: -10px;
+  vertical-align: middle;
+  opacity: 0.5;
 }
 #roster li .user,
 #bookmarks li .user {
-  color: #fff;
-  width: 100%;
+  display: inline-block;
+  width: 120px;
   line-height: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
+  height: 17px;
+  font-style: italic;
+  text-shadow: 0px 1px 1px rgba(0,0,0,0.25);
 }
 #roster li .status,
 #bookmarks li .status {
-  color: #878787;
   font-size: 12px;
   font-weight: 400;
   line-height: 12px;
@@ -804,43 +833,65 @@ button.secondary:hover:not(:disabled) {
   display: inline-block;
   margin-left: 5px;
   font-size: 12px;
-  color: #444;
+  color: #594a57;
 }
 #roster li .name,
 #bookmarks li .name {
-  display: inline-block;
-  text-overflow: ellipsis;
+  width: 100%;
+  line-height: 100%;
   overflow: hidden;
-}
-#roster li.persistent .name,
-#bookmarks li.persistent .name {
-  color: #f00;
+  text-overflow: ellipsis;
+  height: 17px;
+  text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
+  position: absolute;
+  left: 32px;
+  max-width: 140px;
 }
 #roster li .unread,
 #bookmarks li .unread {
   display: none;
   color: #fff;
-  height: 22px;
-  width: 30px;
-  padding-top: 8px;
-  -moz-border-radius: 30px;
-  -webkit-border-radius: 30px;
-  -khtml-border-radius: 30px;
-  -o-border-radius: 30px;
-  -border-radius: 30px;
-  border-radius: 30px;
+  height: 16px;
+  width: 18px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -khtml-border-radius: 5px;
+  -o-border-radius: 5px;
+  -border-radius: 5px;
+  border-radius: 5px;
   position: absolute;
-  top: 5px;
-  left: 10px;
-  font-size: 12px;
-  font-weight: 800;
+  padding-top: 2px;
+  right: 5px;
+  top: 3px;
+  font-size: 10px;
+  font-weight: 700;
   text-align: center;
-  background: rgba(0,174,239,0.8);
+  background: #94b021;
 }
 #roster li .unread:not(:empty),
 #bookmarks li .unread:not(:empty) {
   display: block;
 }
+#roster li .remove,
+#bookmarks li .remove,
+#roster li .join,
+#bookmarks li .join {
+  position: absolute;
+  right: 7px;
+  top: 5px;
+  font-size: 14px;
+  display: inline-block;
+  font-family: FontAwesome;
+  visibility: hidden;
+}
+#roster li .prefix,
+#bookmarks li .prefix {
+  font-weight: 300;
+  opacity: 0.5;
+  position: relative;
+  left: -15px;
+  text-shadow: 0px 1px 1px rgba(0,0,0,0.25);
+}
 #roster li button,
 #bookmarks li button {
   margin: -15px 0px 0px 5px;
@@ -861,12 +912,11 @@ button.secondary:hover:not(:disabled) {
 #bookmarks li.joined .leaveRoom {
   display: inline-block;
 }
-#roster .name {
-  width: 180px;
+#roster .wrap {
+  padding-left: 10px;
 }
-#bookmarks .name {
-  width: 120px;
-  padding: 5px 10px 5px 40px;
+#bookmarks .wrap {
+  padding-left: 24px;
 }
 @-moz-keyframes pulsate {
   0% {
@@ -929,126 +979,120 @@ button.secondary:hover:not(:disabled) {
 }
 .conversation header {
   padding: 0px;
-  padding-left: 6px;
-  border-bottom: 1px solid #d6d6d6;
   position: fixed;
-  top: 40px;
+  top: 0px;
   right: 0px;
-  left: 270px;
-  z-index: 10;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  background: #f7f7f7;
-}
-.conversation header:before {
-  content: '';
-  position: absolute;
-  left: 5px;
-  top: 18px;
-  height: 4px;
-  width: 4px;
-  margin-top: -3px;
-  border: 1px solid transparent;
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  -khtml-border-radius: 10px;
-  -o-border-radius: 10px;
-  -border-radius: 10px;
-  border-radius: 10px;
-}
-.conversation header.online:before,
-.conversation header.chat:before {
-  background: #43bb6e;
-  border-color: #43bb6e;
-}
-.conversation header.dnd:before {
-  background: #de0a32;
-  border-color: #de0a32;
-}
-.conversation header.away:before,
-.conversation header.xa:before {
-  background: #f18902;
-  border-color: #f18902;
-}
-.conversation header.offline:before {
-  background: #2d2d2d;
-}
-.conversation header.composing:before {
-  animation: pulsate 1.5s infinite ease-in;
-  -webkit-animation: pulsate 1.5s infinite ease-in;
-  -moz-animation: pulsate 1.5s infinite ease-in;
-}
-.conversation header.paused:before {
-  background: #ababab;
-  border-color: #ababab;
-}
-.conversation header.idle:before {
-  background: transparent;
-}
-.conversation header .controls {
-  float: right;
-}
-.conversation header .controls .leaveRoom {
-  display: none;
-}
-.conversation header .controls .joinRoom {
-  display: block;
-}
-.conversation header .controls button {
-  margin-top: 5px;
-}
-.conversation header .controls.joined .joinRoom {
-  display: none;
-}
-.conversation header .controls.joined .leaveRoom {
-  display: block;
+  left: 220px;
+  right: 90px;
+  height: 55px;
+  z-index: 101;
 }
 .conversation header .avatar {
   margin-right: 5px;
-  width: 30px;
-  height: 30px;
-  -moz-border-radius: 50px;
-  -webkit-border-radius: 50px;
-  -khtml-border-radius: 50px;
-  -o-border-radius: 50px;
-  -border-radius: 50px;
-  border-radius: 50px;
+  width: 36px;
+  height: 36px;
+  -moz-border-radius: 0.2rem;
+  -webkit-border-radius: 0.2rem;
+  -khtml-border-radius: 0.2rem;
+  -o-border-radius: 0.2rem;
+  -border-radius: 0.2rem;
+  border-radius: 0.2rem;
   position: absolute;
   top: 11px;
   left: 11px;
   vertical-align: top;
 }
 .conversation header h1 {
-  font-size: 12px;
-  margin: 5px;
-  margin-left: 10px;
   padding: 0px;
+  margin: 0px;
+  top: 0px;
   white-space: nowrap;
-  max-width: 80%;
   display: inline-block;
-  height: 25px;
-  line-height: 25px;
+  height: 53px;
+}
+.conversation header h1:hover .prefix {
+  color: #555459;
+}
+.conversation header .prefix,
+.conversation header .name,
+.conversation header .user_presence,
+.conversation header .channel_actions,
+.conversation header .status {
+  display: inline-block;
+  color: #555459;
+  padding: 0px;
+  text-rendering: optimizelegibility;
+  top: 0px;
+  vertical-align: middle;
+}
+.conversation header .prefix {
+  color: #9e9ea6;
+  font-size: 22px;
+  font-weight: 500;
+  margin-left: 25px;
+  line-height: 53px;
+  cursor: pointer;
 }
 .conversation header .name {
-  font-size: 12px;
-  border-width: 0px;
-  padding: 0px;
-  display: inline-block;
+  font-size: 22px;
+  font-weight: 900;
   overflow: hidden;
+  text-overflow: ellipsis;
+  padding-left: 3px;
+  line-height: 53px;
+  cursor: pointer;
 }
-.conversation header .status {
-  font-weight: normal;
+.conversation header .user_presence,
+.conversation header .channel_actions {
   font-size: 12px;
-  border-width: 0px;
-  padding: 0px;
-  max-width: 80%;
-  padding-left: 5px;
+  color: #9e9ea6;
+  padding-left: 8px;
+  line-height: 53px;
+  cursor: pointer;
+}
+.conversation header .user_presence {
+  padding-top: 5px;
+}
+.conversation header .user_presence.online {
+  color: #4c9689;
+  opacity: 1;
+}
+.conversation header .user_presence.offline {
+  color: #555459;
+  opacity: 0.5;
+}
+.conversation header .user_presence.dnd {
+  color: #de0a32;
+}
+.conversation header .user_presence.away,
+.conversation header .user_presence.xa {
+  color: #f18902;
+}
+.conversation header .user_presence.composing {
+  animation: pulsate 1.5s infinite ease-in;
+  -webkit-animation: pulsate 1.5s infinite ease-in;
+  -moz-animation: pulsate 1.5s infinite ease-in;
+}
+.conversation header .user_presence.paused:before {
+  color: #87868c;
+}
+.conversation header .user_presence.idle:before {
+  background: transparent;
+}
+.conversation .channel_actions {
+  opacity: 1;
+}
+.conversation .status {
+  color: #9e9ea6;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 18px;
+  margin-left: 15px;
+  padding-top: 5px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   transition: all 0.25s;
-  display: inline-block;
   -webkit-touch-callout: initial;
   -webkit-user-select: initial;
   -khtml-user-select: initial;
@@ -1056,19 +1100,16 @@ button.secondary:hover:not(:disabled) {
   -ms-user-select: initial;
   user-select: initial;
 }
-.conversation header .status:empty:before {
-  content: '- No subject';
+.conversation .status:empty:before {
+  content: '';
 }
-.conversation header .status:not(:empty):before {
-  content: '- ';
+.conversation .status:focus {
+  border-radius: 0.25rem;
+  border: 1px solid #9e9ea6;
+  padding: 5px;
+  outline: none;
 }
-.conversation header .status:before,
-.conversation header .status:empty:focus:before {
-  content: '-';
-  padding-left: 5px;
-  padding-right: 5px;
-}
-.conversation header .tzo:not(:empty) {
+.conversation .tzo:not(:empty) {
   position: absolute;
   right: 15px;
   top: 18px;
@@ -1082,75 +1123,174 @@ button.secondary:hover:not(:disabled) {
   -border-radius: 3px;
   border-radius: 3px;
   font-size: 12px;
-  font-weight: 800;
+  font-weight: 700;
   line-height: 20px;
-  color: #898989;
-  background: #eee;
-  border: 1px solid #d6d6d6;
+  color: #bbbbc1;
+  background: #e0e0e0;
+  border: 1px solid #cacaca;
 }
-.conversation header .tzo:not(:empty):before {
+.conversation .tzo:not(:empty):before {
   content: 'Current Time: ';
   font-weight: bold;
 }
-.conversation header .call,
-.conversation header .remove {
-  display: inline-block;
-  margin-top: -17px;
-  margin-left: 10px;
-}
-.conversation header .activeCall {
-  height: 0px;
-  position: relative;
-  top: 0px;
-}
-.conversation header .activeCall .remote {
+.conversation .call {
+  display: block;
+  width: 50px;
+  height: 38px;
   position: absolute;
-  top: 60px;
-  left: 10px;
-  height: 50%;
+  top: 0px;
+  right: 11px;
 }
-.conversation header .activeCall .local {
+.activeCall {
+  display: none;
+  height: 0px;
+  position: absolute;
+  bottom: 4rem;
+  width: 100%;
+  min-width: 610px;
+  box-sizing: border-box;
+  padding: 0px 73px 0px 24px;
+}
+.activeCall .container {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #e0e0e0;
+  border-bottom: none;
+  border-radius: 0.2rem 0.2rem 0 0;
+  background-color: #e0e0e0;
+}
+.activeCall .remote {
+  position: absolute;
+  top: 20px;
+  left: 40px;
+  height: 65%;
+  border: 2px solid #babbbf;
+}
+.activeCall .local {
   position: absolute;
   bottom: 10px;
-  right: 10px;
+  right: 80px;
   height: 20%;
-  border: 2px solid #eee;
+  border: 2px solid #babbbf;
   -webkit-transform: scaleX(-1);
   -moz-transform: scaleX(-1);
   -ms-transform: scaleX(-1);
   transform: scaleX(-1);
 }
-.conversation header .activeCall .button-wrap {
+.activeCall .button-wrap {
   position: absolute;
-  left: 10px;
-  bottom: 10px;
+  left: 118px;
+  bottom: 26px;
 }
-.conversation header .activeCall .button-wrap .button-group {
+.activeCall .button-wrap .button-group {
   margin-left: 5px;
 }
-.conversation .activeCall {
-  display: none;
-}
-.conversation.onCall .activeCall {
+.onCall .activeCall {
   display: block;
-  height: 400px;
+  height: 20rem;
+}
+.onCall .messages {
+  bottom: 24rem;
+}
+.chatBox {
+  background-color: #fff;
+  bottom: 0px;
+  position: fixed;
+  right: 0px;
+  left: 221px;
+  height: 4rem;
+  z-index: 302;
+  transition: none;
+  -webkit-transition: none;
+}
+.chatBox .formwrap {
+  transition: none;
+  -webkit-transition: none;
+  position: relative;
+  height: 38px;
+  left: 24px;
+  margin-right: 93px;
+}
+.chatBox textarea {
+  display: inline-block;
+  vertical-align: middle;
+  background: none repeat scroll 0% 0% padding-box #fff;
+  font-size: 14px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #e0e0e0;
+  border-image: none;
+  border-radius: 0px 0.2rem 0.2rem 0px;
+  font-family: "Lato", sans-serif;
+  margin: 0;
+  color: #3d3c40;
+  overflow-y: hidden;
+  box-shadow: none;
+  outline: 0px none;
+  position: absolute;
+  bottom: 0px;
+  height: 38px;
+  padding: 9px 5px 9px 8px;
+  max-height: 10rem;
+  resize: none !important;
+}
+.chatBox textarea.editing {
+  background-color: #fffcea;
+  border: 1px solid #efe391;
+  color: #d2bd2d;
+}
+.chatBox textarea:focus {
+  box-shadow: none;
 }
 .messages {
   margin: 0px;
-  padding: 0px;
+  padding: 0px 1.5rem;
   overflow-y: auto;
   overflow-x: hidden;
   position: absolute;
   top: 0px;
   right: 0px;
-  bottom: 55px;
-  margin-top: 75px;
+  bottom: 4rem;
+  margin-top: 54px;
   width: 100%;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
 }
+.messages li.day_divider {
+  display: block;
+  background: none repeat scroll 0% 0% #fff;
+  font-size: 1rem;
+  color: #555459;
+  font-weight: 900;
+  text-align: center;
+  cursor: default;
+  clear: both;
+  position: relative;
+  line-height: 1.2rem;
+  margin: 1.5rem 0px;
+  padding: 0;
+  min-height: 0;
+}
+.messages li.day_divider hr {
+  position: absolute;
+  width: 100%;
+  top: 0.6rem;
+  margin: 0px;
+  border-width: 1px 0px 0px 0px;
+  border-style: solid none;
+  border-color: #ddd;
+}
+.messages li.day_divider .day_divider_name {
+  background: none repeat scroll 0% 0% #fff;
+  text-transform: capitalize;
+  text-align: center;
+  padding: 0px 1rem;
+  display: inline-block;
+  margin: 0px auto;
+  position: relative;
+}
 .messages li {
   position: relative;
   list-style: none;
@@ -1158,10 +1298,6 @@ button.secondary:hover:not(:disabled) {
   width: 100%;
   min-height: 50px;
   display: table;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  border-bottom: 1px solid #eee;
   display: table-row;
 }
 .messages li:last-of-type {
@@ -1169,16 +1305,17 @@ button.secondary:hover:not(:disabled) {
 }
 .messages li .messageAvatar {
   display: inline-block;
+  outline: none;
 }
 .messages li .messageAvatar img {
-  width: 30px;
-  height: 30px;
-  -moz-border-radius: 50px;
-  -webkit-border-radius: 50px;
-  -khtml-border-radius: 50px;
-  -o-border-radius: 50px;
-  -border-radius: 50px;
-  border-radius: 50px;
+  width: 36px;
+  height: 36px;
+  -moz-border-radius: 0.2rem;
+  -webkit-border-radius: 0.2rem;
+  -khtml-border-radius: 0.2rem;
+  -o-border-radius: 0.2rem;
+  -border-radius: 0.2rem;
+  border-radius: 0.2rem;
 }
 .messages li .messageAvatar .name {
   text-indent: -9999em;
@@ -1196,15 +1333,13 @@ button.secondary:hover:not(:disabled) {
   box-shadow: rgba(0,0,0,0.25) 0 2px 3px;
 }
 .messages .sender {
-  display: table-cell;
   font-size: 12px;
   font-weight: bold;
-  color: #565656;
-  padding: 5px;
+  color: #9e9ea6;
   text-align: right;
-  border-top: 1px solid #eee;
   white-space: nowrap;
-  vertical-align: middle;
+  vertical-align: top;
+  margin-top: 5px;
 }
 .messages .sender .name {
   padding-left: 10px;
@@ -1212,16 +1347,34 @@ button.secondary:hover:not(:disabled) {
 }
 .messages .messageWrapper {
   display: table-cell;
-  padding: 5px;
-  border-top: 1px solid #eee;
+  padding: 0px 0px 12px 15px;
   width: 99%;
-  vertical-align: middle;
+  vertical-align: top;
+}
+.messages .messageWrapper .message_header .name {
+  display: inline-block;
+  font-weight: 900;
+  font-size: 15px;
+  color: #3d3c40;
+  line-height: 22px;
+  cursor: pointer;
+}
+.messages .messageWrapper .message_header .date {
+  display: inline-block;
+  margin-left: 0.25rem;
+  color: #babbbf;
+  font-size: 12px;
+  width: 60px;
+  line-height: 22px;
+  text-transform: uppercase;
+  cursor: pointer;
 }
 .messages .message {
-  font-size: 12px;
-  margin: 2px;
+  font-size: 15px;
+  line-height: 22px;
+  color: #3d3c40;
+  margin: 0px 0px 2px 0px;
   display: inline-block;
-  padding-right: 3px;
   min-width: 20px;
   width: 100%;
   -moz-box-sizing: border-box;
@@ -1229,27 +1382,10 @@ button.secondary:hover:not(:disabled) {
   box-sizing: border-box;
 }
 .messages .message:not(.mine) {
-  color: #2d2d2d;
-}
-.messages .message.mine .timestamp {
-  color: #bebebe;
-}
-.messages .message.mine.pendingReceipt:not(.delayed) .timestamp:after {
-  content: '\26A0';
-  color: #f18902;
-}
-.messages .message.delayed .timestamp:before {
-  content: '@ ';
-}
-.messages .message.edited .timestamp:before {
-  content: 'edited ';
-}
-.messages .message.mine.delivered .timestamp:after {
-  content: '\2713' !important;
-  color: #43bb6e !important;
+  color: #555459;
 }
 .messages .message.pending {
-  color: #ababab;
+  color: #cfcfd3;
 }
 .messages .message.meAction {
   font-style: italic;
@@ -1295,43 +1431,25 @@ button.secondary:hover:not(:disabled) {
 .messages .message .sender {
   display: block;
 }
-.chatBox {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  bottom: 0px;
-  position: fixed;
-  right: 0px;
-  left: 270px;
-  z-index: 200;
-  transition: none;
-  -webkit-transition: none;
+.group.conversation h1 .status:empty:before {
+  content: 'No subject';
 }
-.chatBox form {
-  border-top: 1px solid #eee;
-  background: #f7f7f7;
-  padding: 11px;
-  transition: none;
-  -webkit-transition: none;
+.group.conversation .chatBox .formwrap {
+  margin-right: 35px;
 }
-.chatBox .formwrap {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  width: 100%;
-  padding-right: 80px;
-  position: relative;
+.group.conversation #members_toggle {
+  position: absolute;
+  top: 60px;
+  right: 20px;
+  cursor: pointer;
+  color: #9e9ea6;
+  font-size: 16px;
 }
-.chatBox textarea {
-  height: 30px;
-  padding: 6px 10px;
-  transition: none;
-  -webkit-transition: none;
+.group.conversation #members_toggle:hover {
+  color: #439fe0;
 }
-.chatBox textarea.editing {
-  background-color: #fffcea;
-  border: 1px solid #efe391;
-  color: #d2bd2d;
+.group.conversation #members_toggle #members_toggle_count {
+  margin-left: 5px;
 }
 .group.conversation .groupRoster {
   width: 150px;
@@ -1340,36 +1458,48 @@ button.secondary:hover:not(:disabled) {
   overflow-y: auto;
   overflow-x: hidden;
   position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 50px;
-  padding-top: 80px;
-  padding-bottom: 10px;
+  top: 80px;
+  right: 20px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
+  box-shadow: 0px 2px 10px rgba(64,54,63,0.25);
   -webkit-overflow-scrolling: touch;
-  background: #f7f7f7;
-  border-left: 1px solid #eee;
+  border: 1px solid #ddd;
+  border-radius: 0.25rem;
+  background-color: #fff;
+  z-index: 100;
+  visibility: hidden;
+  padding: 5px 30px 5px 5px;
 }
 .group.conversation .groupRoster li {
   padding: 3px;
   margin: 0px;
-  font-size: 12px;
+  border-radius: 0.25rem;
   position: relative;
+  cursor: pointer;
+}
+.group.conversation .groupRoster li:hover {
+  background-color: #439fe0;
+}
+.group.conversation .groupRoster li:hover .name {
+  color: #fff;
 }
 .group.conversation .groupRoster li .name {
-  padding-left: 10px;
+  padding-left: 14px;
+  color: #9e9ea6;
+  font-size: 14px;
+  font-weight: bold;
 }
 .group.conversation .groupRoster li:before {
   content: '';
   position: absolute;
   left: 4px;
-  top: 11px;
+  top: 12px;
   height: 4px;
   width: 4px;
   margin-top: -3px;
-  border: 1px solid transparent;
+  border: 2px solid transparent;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -khtml-border-radius: 10px;
@@ -1379,8 +1509,16 @@ button.secondary:hover:not(:disabled) {
 }
 .group.conversation .groupRoster li.online:before,
 .group.conversation .groupRoster li.chat:before {
-  background: #43bb6e;
-  border-color: #43bb6e;
+  background: #4c9689;
+  border-color: #4c9689;
+}
+.group.conversation .groupRoster li.online:not(:hover) .name,
+.group.conversation .groupRoster li.chat:not(:hover) .name {
+  color: #555459;
+}
+.group.conversation .groupRoster li.online:not(:hover).active .name,
+.group.conversation .groupRoster li.chat:not(:hover).active .name {
+  color: #de0a32;
 }
 .group.conversation .groupRoster li.dnd:before {
   background: #de0a32;
@@ -1392,8 +1530,8 @@ button.secondary:hover:not(:disabled) {
   border-color: #f18902;
 }
 .group.conversation .groupRoster li.offline:before {
-  background: #2d2d2d;
-  border-color: #2d2d2d;
+  background: #555459;
+  border-color: #555459;
 }
 .group.conversation .groupRoster li.composing:before {
   animation: pulsate 1.5s infinite ease-in;
@@ -1401,8 +1539,8 @@ button.secondary:hover:not(:disabled) {
   -moz-animation: pulsate 1.5s infinite ease-in;
 }
 .group.conversation .groupRoster li.paused:before {
-  background: #ababab;
-  border-color: #ababab;
+  background: #cfcfd2;
+  border-color: #cfcfd2;
 }
 .group.conversation .groupRoster li.idle:before {
   background: transparent;
@@ -1423,7 +1561,7 @@ button.secondary:hover:not(:disabled) {
   margin: 5px;
   padding: 10px;
   border: 1px solid #eee;
-  background-color: #f7f7f7;
+  background-color: #f0f0f0;
   text-align: center;
 }
 .embed.active img {
@@ -1471,8 +1609,8 @@ button.secondary:hover:not(:disabled) {
 }
 .main > div {
   padding: 20px;
-  padding-top: 50px;
-  border-bottom: 1px solid #eee;
+  padding-top: 64px;
+  border-bottom: 1px solid #e0e0e0;
 }
 .main > div:last-of-type {
   border: none;
@@ -1492,8 +1630,8 @@ button.secondary:hover:not(:disabled) {
   -border-radius: 3px;
   border-radius: 3px;
   margin: 10px 0;
-  border: 1px solid #eee;
-  background: #fcfcfc;
+  border: 1px solid #e0e0e0;
+  background: #f9f9f9;
 }
 .uploadRegion p {
   margin: 0;
@@ -1502,7 +1640,7 @@ button.secondary:hover:not(:disabled) {
   margin: 10px 0;
 }
 .aux {
-  background: #f7f7f7;
+  background: #fafafb;
 }
 .aux header {
   margin-top: 8%;
@@ -1542,7 +1680,7 @@ button.secondary:hover:not(:disabled) {
 }
 .box .head {
   margin-bottom: 20px;
-  border-bottom: 1px solid #f7f7f7;
+  border-bottom: 1px solid #f0f0f0;
 }
 .box input {
   width: 100%;
@@ -1622,7 +1760,7 @@ button.secondary:hover:not(:disabled) {
   content: "On Call: ";
 }
 #calls .call.ending {
-  background: #f7f7f7;
+  background: #fafafb;
 }
 #calls .call.ending .callerName:before {
   content: "Call ending with: ";
@@ -1643,7 +1781,7 @@ button.secondary:hover:not(:disabled) {
 rgba(0,0,0,0.1)
   width: 100px;
   margin-right: 10px;
-  font-size: 16px;
+  font-size: 17px;
   color: rgba(0,0,0,0.75);
 rgba(255,255,255,0.5)
   float: left;
@@ -1683,7 +1821,7 @@ rgba(0,0,0,0.2)
 }
 #calls .callerName,
 #calls .callTime {
-  font-weight: 800;
+  font-weight: 700;
   color: #fff;
 rgba(0,0,0,0.7)
   line-height: 1;
@@ -1707,14 +1845,13 @@ rgba(0,0,0,0.7)
   right: 40px;
   margin: 0;
 }
-#me {
+#topbar {
   position: fixed;
-  left: 270px;
+  left: 220px;
   top: 0px;
-  height: 40px;
+  height: 54px;
   width: 100%;
   background-color: #fff;
-  border-bottom: 1px solid #d6d6d6;
   z-index: 100;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -1724,39 +1861,78 @@ rgba(0,0,0,0.7)
   user-select: none;
   color: #fff;
 }
-#me .avatar {
-  width: 30px;
+#topbar .settings {
+  position: fixed;
+  padding-left: 30px;
+  line-height: 30px;
   height: 30px;
+  right: 5px;
+  top: 5px;
+  background-color: #fff;
+  color: #3d486b;
+  transition: none;
+  border: 0;
+}
+#topbar .settings svg {
+  position: absolute;
+  top: 50%;
+  left: 5px;
+  margin: 0px;
+  margin-top: -13px;
+  fill: #3d486b;
+}
+#topbar .settings:hover {
+  background-color: #3d486b;
+  color: #fff;
+}
+#topbar .settings:hover svg {
+  fill: #fff;
+}
+#footer {
+  bottom: 0px;
+  left: 0px;
+  background-color: #1a233f;
+  width: 100%;
+  height: 4rem;
+  position: fixed;
+  z-index: 301;
+}
+#footer #me {
+  border-top: 2px solid #121a33;
+  padding: 7px 0px 9px 8px;
+}
+#footer .avatar {
+  float: left;
+  width: 48px;
+  height: 48px;
+  background: rgba(0,0,0,0);
+  background-color: transparent;
   vertical-align: middle;
-  margin-right: 5px;
-  -moz-border-radius: 15px;
-  -webkit-border-radius: 15px;
-  -khtml-border-radius: 15px;
-  -o-border-radius: 15px;
-  -border-radius: 15px;
-  border-radius: 15px;
+  margin: 0px 0.5rem 0px 0px;
 }
-#me h1 {
-  font-size: 13px;
-  line-height: 12px;
-  margin: 5px;
-  padding: 0px;
-  white-space: nowrap;
-  max-width: 75%;
+#footer .name,
+#footer .status {
+  display: block;
+  width: 145px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-#me .status {
+#footer .name {
+  color: #fff;
+  font-size: 17px;
+  font-weight: 900;
+}
+#footer .status {
+  color: #c1dcec;
   font-weight: normal;
-  font-size: 12px;
-  line-height: 12px;
+  font-size: 14px;
+  line-height: 14px;
   border-width: 0px;
   margin: 0px;
   padding: 0px;
-  line-height: 20px;
-  height: 20px;
-  max-width: 75%;
+  line-height: 18px;
+  height: 18px;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   transition: all 0.25s;
   -webkit-touch-callout: initial;
   -webkit-user-select: initial;
@@ -1765,47 +1941,16 @@ rgba(0,0,0,0.7)
   -ms-user-select: initial;
   user-select: initial;
 }
-#me .status:empty:before {
-  content: '- Update your status';
+#footer .status:focus {
+  border-radius: 0.25rem;
+  border: 1px solid #626f9c;
+  outline: none;
+  padding: 2px;
 }
-#me .status:before,
-#me .status:empty:focus:before {
-  content: '-';
-  padding-left: 5px;
-  padding-right: 5px;
+#footer .status:empty:before {
+  content: 'Update your status';
 }
-#me .status:empty {
-  font-style: italic;
-}
-#me .name:focus,
-#me .status:focus {
-  background-color: #fffcea;
-  border: 1px solid #efe391;
-  color: #d2bd2d;
-}
-#me .settings {
-  position: fixed;
-  padding-left: 30px;
-  line-height: 30px;
-  height: 30px;
-  right: 5px;
-  top: 5px;
-  background-color: #fff;
-  color: #12acef;
-  transition: none;
-}
-#me .settings svg {
-  position: absolute;
-  top: 50%;
-  left: 5px;
-  margin: 0px;
-  margin-top: -13px;
-  fill: #12acef;
-}
-#me .settings:hover {
-  background-color: #12acef;
-  color: #fff;
-}
-#me .settings:hover svg {
-  fill: #fff;
+#footer .status:before,
+#footer .status:empty:focus:before {
+  content: '';
 }
diff --git a/public/css/otalk.styl b/public/css/otalk.styl
index e1c7718..36ef334 100644
--- a/public/css/otalk.styl
+++ b/public/css/otalk.styl
@@ -14,3 +14,4 @@
 @import 'pages/aux'
 @import 'pages/callbar'
 @import 'pages/header'
+@import 'pages/footer'
diff --git a/public/css/pages/chat.styl b/public/css/pages/chat.styl
index 44caf51..e374315 100644
--- a/public/css/pages/chat.styl
+++ b/public/css/pages/chat.styl
@@ -14,75 +14,13 @@
 
   header
     padding: 0px
-    padding-left: 6px
-    border-bottom: 1px solid darken($gray-lighter, 10%)
     position: fixed
-    top: 40px
+    top: 0px
     right: 0px
-    left: 270px
-    z-index: 10
-    borderbox()
-    background: lighten($gray-light, 93%)
-
-    &:before
-      content: ''
-      position: absolute
-      left: 5px
-      top: 18px
-      height: 4px
-      width: 4px
-      margin-top: -3px
-      border: 1px solid transparent
-      roundall(10px)
-
-    &.online,
-    &.chat
-      &:before
-        background: $green
-        border-color: $green
-
-    &.dnd:before
-      background: $red
-      border-color: $red
-
-    &.away:before,
-    &.xa:before
-      background: $orange
-      border-color: $orange
-
-    &.offline:before
-      background: $gray-dark
-
-    &.composing:before
-      animation: pulsate 1.5s infinite ease-in
-      -webkit-animation: pulsate 1.5s infinite ease-in
-      -moz-animation: pulsate 1.5s infinite ease-in
-
-    &.paused:before
-      background: lighten($gray-light, 30%)
-      border-color: lighten($gray-light, 30%)
-
-    &.idle:before
-      background: transparent
-
-    .controls
-      float: right
-
-      .leaveRoom
-        display: none
-
-      .joinRoom
-        display: block
-
-      button
-        margin-top: 5px
-
-      &.joined
-        .joinRoom
-          display: none
-
-        .leaveRoom
-          display: block
+    left: 220px
+    right: 90px
+    height: 55px
+    z-index: 101
 
     .avatar
       margin-right: 5px
@@ -93,48 +31,100 @@
       vertical-align: top
 
     h1
-      font-size: 12px
-      margin: 5px
-      margin-left: 10px
       padding: 0px
+      margin: 0px
+      top: 0px
       white-space: nowrap
-      max-width: 80%
       display: inline-block
-      height: 25px
-      line-height: 25px
+      height: 53px
+
+      &:hover .prefix
+        color: $gray-dark
+
+    .prefix, .name, .user_presence, .channel_actions, .status
+      display: inline-block
+      color: $gray-dark
+      padding: 0px
+      text-rendering: optimizelegibility
+      top: 0px
+      vertical-align: middle
+
+    .prefix
+      color: $gray
+      font-size: $font-size-h2
+      font-weight: $font-weight-classic
+      margin-left: 25px
+      line-height: 53px
+      cursor: pointer
 
     .name
-      font-size: 12px
-      border-width: 0px
-      padding: 0px
-      display: inline-block
+      font-size: $font-size-h2
+      font-weight: $font-weight-bolder
       overflow: hidden
+      text-overflow: ellipsis
+      padding-left: 3px
+      line-height: 53px
+      cursor: pointer
+
+    .user_presence, .channel_actions
+      font-size: $font-size-small
+      color: $gray
+      padding-left: 8px
+      line-height: 53px
+      cursor: pointer
+
+    .user_presence
+      padding-top: 5px
+
+        &.online
+          color: $green
+          opacity: 1
+
+        &.offline
+          color: $gray-dark
+          opacity: 0.5
+
+        &.dnd
+          color: $red
+
+        &.away, &.xa
+          color: $orange
+
+        &.composing
+          animation: pulsate 1.5s infinite ease-in
+          -webkit-animation: pulsate 1.5s infinite ease-in
+          -moz-animation: pulsate 1.5s infinite ease-in
+
+        &.paused:before
+          color: lighten($gray-dark, 30%)
+
+        &.idle:before
+          background: transparent
+
+    .channel_actions
+      opacity: 1
 
     .status
-      font-weight: normal
-      font-size: 12px
-      border-width: 0px
-      padding: 0px
-      max-width: 80%
-      padding-left: 5px
+      color: $gray
+      font-weight: $font-weight-classic
+      font-size: $font-size-h3
+      line-height: 18px
+      margin-left: 15px
+      padding-top: 5px
       white-space: nowrap
       overflow: hidden
       text-overflow: ellipsis
       transition: all .25s
-      display: inline-block
       allowselect()
 
       &:empty:before
-        content: '- No subject'
+        content: ''
 
-      &:not(:empty):before
-        content: '- '
-
-      &:before,
-      &:empty:focus:before
-        content: '-'
-        padding-left: 5px
-        padding-right: 5px
+      &:focus
+        border-radius: 0.25rem
+        border: 1px solid $gray
+        padding: 5px
+        outline: none
 
     .tzo:not(:empty)
       position: absolute
@@ -155,62 +145,158 @@
         content: 'Current Time: '
         font-weight: bold
 
-    .call, .remove
-      display: inline-block
-      margin-top: -17px
-      margin-left: 10px
-
-    .activeCall
-      transition(height 250ms)
-      height: 0px
-      position: relative
+    .call
+      display: block
+      width: 50px
+      height: 38px
+      position: absolute
       top: 0px
+      right: 11px
 
-      .remote
-        position: absolute
-        top: 60px
-        left: 10px
-        height: 50%
-
-      .local
-        position: absolute
-        bottom: 10px
-        right: 10px
-        height: 20%
-        border: 2px solid $gray-lighter
-        transform(scaleX(-1))
-
-      .button-wrap
-        position: absolute
-        left: 10px
-        bottom: 10px
-
-        .button-group
-          margin-left: 5px
-
-  // while on video call the parent has
-  // this class so we animate the height
   .activeCall
     display: none
+    transition(height 250ms)
+    height: 0px
+    position: absolute
+    bottom: 4rem
+    width: 100%
+    min-width: 610px
+    box-sizing: border-box
+    padding: 0px 73px 0px 24px
+
+    .container
+      width: 100%
+      height: 100%
+      border: 1px solid $gray-lighter
+      border-bottom: none
+      border-radius: 0.2rem 0.2rem 0 0
+      background-color: $gray-lighter
+
+    .remote
+      position: absolute
+      top: 20px
+      left: 40px
+      height: 65%
+      border: 2px solid $gray-light
+
+    .local
+      position: absolute
+      bottom: 10px
+      right: 80px
+      height: 20%
+      border: 2px solid $gray-light
+      transform(scaleX(-1))
+
+    .button-wrap
+      position: absolute
+      left: 118px
+      bottom: 26px
+
+      .button-group
+        margin-left: 5px
   &.onCall
     .activeCall
       display: block
-      height: 400px
+      height: 20rem
+    .messages
+      bottom: 24rem
+
+  .chatBox
+    background-color: #fff
+    bottom: 0px
+    position: fixed
+    right: 0px
+    left: 221px
+    height: 4rem
+    z-index: 302
+    transition: none
+    -webkit-transition: none
+
+    .formwrap
+      transition: none
+      -webkit-transition: none
+      position: relative
+      height:38px
+      left: 24px
+      margin-right: 93px
+
+    textarea
+      display: inline-block
+      vertical-align: middle
+      background: none repeat scroll 0% 0% padding-box #fff
+      font-size: $font-size-base
+      border-width: 2px
+      border-style: solid
+      border-color: $gray-lighter
+      border-image: none
+      border-radius: 0px 0.2rem 0.2rem 0px
+      font-family: "Lato",sans-serif
+      margin: 0
+      color: #3D3C40
+      overflow-y: hidden
+      box-shadow: none
+      outline: 0px none
+      position: absolute
+      bottom: 0px
+      height: 38px
+      padding: 9px 5px 9px 8px
+      max-height: 10rem
+      resize: none !important
+
+      &.editing
+        background-color: #fffcea
+        border: 1px solid #efe391
+        color: #d2bd2d
+      &:focus
+        box-shadow: none
 
 .messages
   margin: 0px
-  padding: 0px
+  padding: 0px 1.5rem
   overflow-y: auto
   overflow-x: hidden
   position: absolute
   top: 0px
   right: 0px
-  bottom: 55px
-  margin-top: 75px
+  bottom: 4rem
+  margin-top: 54px
   width: 100%
   borderbox()
   -webkit-overflow-scrolling: touch
 
+  li.day_divider
+    display: block
+    background: none repeat scroll 0% 0% #fff
+    font-size: 1rem
+    color: #555459
+    font-weight: 900
+    text-align: center
+    cursor: default
+    clear: both
+    position: relative
+    line-height: 1.2rem
+    margin: 1.5rem 0px
+    padding: 0
+    min-height: 0
+
+    hr
+      position: absolute
+      width: 100%
+      top: 0.6rem
+      margin: 0px
+      border-width: 1px 0px 0px 0px
+      border-style: solid none
+      border-color: #ddd
+
+    .day_divider_name
+      background: none repeat scroll 0% 0% #fff
+      text-transform: capitalize
+      text-align: center
+      padding: 0px 1rem
+      display: inline-block
+      margin: 0px auto
+      position: relative
+
   li
     position: relative
     list-style: none
@@ -218,8 +304,6 @@
     width: 100%
     min-height: 50px
     display: table
-    borderbox()
-    border-bottom: 1px solid $gray-lighter
     display: table-row
 
     &:last-of-type
@@ -227,6 +311,7 @@
 
     .messageAvatar
       display: inline-block
+      outline: none
 
       img
         avatar()
@@ -247,15 +332,13 @@
       box-shadow: rgba(0, 0, 0, .25) 0 2px 3px
 
   .sender
-    display: table-cell
     font-size: 12px
     font-weight: bold
     color: $gray
-    padding: 5px
     text-align: right
-    border-top: 1px solid #eee
     white-space: nowrap
-    vertical-align: middle
+    vertical-align: top
+    margin-top: 5px
 
     .name
       padding-left: 10px
@@ -263,16 +346,36 @@
 
   .messageWrapper
     display: table-cell
-    padding: 5px
-    border-top: 1px solid #eee
+    padding: 0px 0px 12px 15px
     width: 99%
-    vertical-align: middle
+    vertical-align: top
+
+    .message_header
+
+      .name
+        display: inline-block
+        font-weight: $font-weight-bolder
+        font-size: $font-size-message
+        color: $black
+        line-height: 22px
+        cursor: pointer
+
+      .date
+        display: inline-block
+        margin-left: 0.25rem
+        color: $gray-light
+        font-size: $font-size-small
+        width: 60px
+        line-height: 22px
+        text-transform: uppercase
+        cursor: pointer
 
   .message
-    font-size: $font-size-small
-    margin: 2px
+    font-size: $font-size-message
+    line-height: 22px
+    color: $black
+    margin: 0px 0px 2px 0px
     display: inline-block
-    padding-right: 3px
     min-width: 20px
     width: 100%
     borderbox()
@@ -280,28 +383,6 @@
     &:not(.mine)
       color: $gray-dark
 
-    &.mine
-      .timestamp
-        color: darken($gray-lighter, 20%)
-
-    &.mine.pendingReceipt:not(.delayed)
-      .timestamp:after
-        content: '\26A0'
-        color: $orange
-
-    &.delayed
-      .timestamp:before
-        content: '@ '
-
-    &.edited
-      .timestamp:before
-        content: 'edited '
-
-    &.mine.delivered
-      .timestamp:after
-        content: '\2713' !important
-        color: $green !important
-
     &.pending
       color: lighten($gray, 50%)
 
@@ -349,42 +430,28 @@
     .sender
       display: block
 
-.chatBox
-  borderbox()
-  bottom: 0px
-  position: fixed
-  right: 0px
-  left: 270px
-  z-index: 200
-  transition: none
-  -webkit-transition: none
-
-  form
-    border-top: 1px solid #eee
-    background: lighten($gray-light, 93%)
-    padding: 11px
-    transition: none
-    -webkit-transition: none
-
-  .formwrap
-    borderbox()
-    width: 100%
-    padding-right: 80px
-    position: relative
-
-  textarea
-    height: 30px
-    padding: 6px 10px
-    transition: none
-    -webkit-transition: none
-
-    &.editing
-      background-color: #fffcea
-      border: 1px solid #efe391
-      color: #d2bd2d
-
-
 .group.conversation
+  h1
+    .status
+      &:empty:before
+        content: 'No subject'
+
+  .chatBox .formwrap
+    margin-right: 35px
+
+  #members_toggle
+    position: absolute
+    top: 60px
+    right: 20px
+    cursor: pointer
+    color: $gray
+    font-size: $font-size-h3
+
+    &:hover
+      color: #439FE0
+
+    #members_toggle_count
+      margin-left: 5px
 
   .groupRoster
     width: 150px
@@ -393,34 +460,46 @@
     overflow-y: auto
     overflow-x: hidden
     position: absolute
-    top: 0px
-    right: 0px
-    bottom: 50px
-    padding-top: 80px
-    padding-bottom: 10px
+    top: 80px
+    right: 20px
     borderbox()
+    box-shadow: 0px 2px 10px rgba(64, 54, 63, 0.25)
     -webkit-overflow-scrolling: touch
-    background: lighten($gray, 95%)
-    border-left: 1px solid #eee
+    border: 1px solid #ddd
+    border-radius: 0.25rem
+    background-color: #fff
+    z-index: 100
+    visibility: hidden
+    padding: 5px 30px 5px 5px
 
     li
       padding: 3px
       margin: 0px
-      font-size: 12px
+      border-radius: 0.25rem
       position: relative
+      cursor: pointer
+
+      &:hover
+        background-color: #439FE0
+
+        .name
+          color: #fff
 
       .name
-        padding-left: 10px
+        padding-left: 14px
+        color: $gray
+        font-size: 14px
+        font-weight: bold
 
       &:before
         content: ''
         position: absolute
         left: 4px
-        top: 11px
+        top: 12px
         height: 4px
         width: 4px
         margin-top: -3px
-        border: 1px solid transparent
+        border: 2px solid transparent
         roundall(10px)
 
       &.online,
@@ -428,6 +507,11 @@
         &:before
           background: $green
           border-color: $green
+        &:not(:hover) .name
+          color: $gray-dark
+
+        &:not(:hover).active .name
+          color $red
 
       &.dnd:before
         background: $red
diff --git a/public/css/pages/footer.styl b/public/css/pages/footer.styl
new file mode 100644
index 0000000..c301a63
--- /dev/null
+++ b/public/css/pages/footer.styl
@@ -0,0 +1,63 @@
+@import '../_variables'
+@import '../_mixins'
+
+#footer
+  bottom: 0px
+  left: 0px
+  background-color: $sidebarTopAndBottomBg
+  width:100%
+  height: 4rem;
+  position: fixed
+  z-index: 301
+
+  #me
+    border-top: 2px solid $sidebarBorder
+    padding: 7px 0px 9px 8px;
+
+  .avatar
+    float:left
+    width: 48px
+    height: 48px
+    background: rgba(0,0,0,0)
+    background-color: transparent
+    vertical-align: middle
+    margin: 0px 0.5rem 0px 0px;
+
+  .name,
+  .status
+    display: block
+    width: 145px
+    overflow: hidden
+    text-overflow: ellipsis
+
+  .name
+    color: #fff
+    font-size: $font-size-large
+    font-weight: $font-weight-bolder
+
+  .status
+    color: $sidebarStatusText
+    font-weight: normal
+    font-size: $font-size-base
+    line-height: $font-size-base
+    border-width: 0px
+    margin: 0px
+    padding: 0px
+    line-height: 18px
+    height: 18px
+    white-space: nowrap
+    transition: all .25s
+    allowselect()
+
+    &:focus
+      border-radius: 0.25rem
+      border: 1px solid $sidebarStatusBorder
+      outline: none
+      padding: 2px
+
+    &:empty:before
+      content: 'Update your status'
+
+    &:before,
+    &:empty:focus:before
+      content: ''
diff --git a/public/css/pages/header.styl b/public/css/pages/header.styl
index 145d333..659967e 100644
--- a/public/css/pages/header.styl
+++ b/public/css/pages/header.styl
@@ -1,68 +1,17 @@
 @import '../_variables'
 @import '../_mixins'
 
-#me
+#topbar
   position: fixed
-  left: 270px
+  left: 220px
   top: 0px
-  height: 40px
+  height: 54px
   width: 100%
   background-color: #fff
-  border-bottom: 1px solid darken($gray-lighter, 10%)
   z-index: 100
   noselect()
   color: #fff
 
-  .avatar
-    width: 30px
-    height: 30px
-    vertical-align: middle
-    margin-right: 5px
-    roundall(15px)
-
-  h1
-    font-size: 13px
-    line-height: 12px
-    margin: 5px
-    padding: 0px
-    white-space: nowrap
-    max-width: 75%
-
-  .status
-    font-weight: normal
-    font-size: 12px
-    line-height: 12px
-    border-width: 0px
-    margin: 0px
-    padding: 0px
-    line-height: 20px
-    height: 20px
-    max-width: 75%
-    white-space: nowrap
-    overflow: hidden
-    text-overflow: ellipsis
-    transition: all .25s
-    allowselect()
-
-    &:empty:before
-      content: '- Update your status'
-
-    &:before,
-    &:empty:focus:before
-      content: '-'
-      padding-left: 5px
-      padding-right: 5px
-
-    &:empty
-      font-style: italic
-
-  .name,
-  .status
-    &:focus
-      background-color: #fffcea
-      border: 1px solid #efe391
-      color: #d2bd2d
-
   .settings
     position: fixed
     padding-left: 30px
@@ -70,9 +19,10 @@
     height: 30px
     right: 5px
     top: 5px
-    background-color: #fff
-    color: #12acef
+    background-color: $settingsBg
+    color: $settingsText
     transition: none
+    border: 0
 
     svg
       position: absolute
@@ -80,11 +30,11 @@
       left: 5px
       margin: 0px
       margin-top: -13px
-      fill: #12acef
+      fill: $settingsText
 
     &:hover
-      background-color: #12acef
-      color: #fff
+      background-color: $settingsHoverBg
+      color: $settingsHoverText
 
       svg
         fill: #fff
diff --git a/public/css/pages/roster.styl b/public/css/pages/roster.styl
index ff48831..f0fbde4 100644
--- a/public/css/pages/roster.styl
+++ b/public/css/pages/roster.styl
@@ -6,15 +6,31 @@
   top: 0px
   bottom: 0px
   left: 0px
-  width: 270px
-  background-color: $blue-saturated-darker
-  border-right: 1px solid $gray-lighter
+  width: 220px
+  background-color: $sidebarBg
+  color: $sidebarText
+  border-right: 1px solid $sidebarBorder
   z-index: 300
   overflow-y: auto;
   overflow-x: hidden;
   webkit-transition-fix()
   noselect()
 
+  #organization
+    width: 220px
+    height: 53px
+    background-color: $sidebarTopAndBottomBg
+    border-bottom: 2px solid $sidebarBorder
+    margin-bottom: 10px
+
+    #orga_name
+      color: $sidebarOrgaName
+      font-size: $font-size-large
+      font-weight: $font-weight-bolder
+      line-height: 53px;
+      vertical-align: middle
+      margin-left: 20px
+
   .main
     margin: 10px 0 0 0
     text-align: center
@@ -37,19 +53,32 @@
         position: relative
 
   h1
-    font-size: $font-size-small
+    font-size: $font-size-base
     margin: 0
-    padding: 20px 10px
-    color: white
+    padding: 4px 20px
     text-transform: uppercase
 
 #roster,
 #bookmarks
+  margin-right: 20px
+  margin-bottom: 25px
 
   #contactrequests
     margin: 0px
     padding-left: 0px
-    background: $blue-saturated
+
+    li
+      width: 180px
+      height: 68px
+      margin-left: 20px
+      margin-bottom: 10px
+      padding-bottom: 4px
+      background: $sidebarRequestBg
+      border-radius: 0.25rem
+      border: 2px solid $sidebarRequestBorder
+
+      .response
+        text-align: center
 
   .jid
     display: inline-block
@@ -62,79 +91,88 @@
 
   #addcontact,
   #joinmuc
-    margin: 0px 10px 5px 10px
+    margin: 8px 20px 5px 20px
     padding: 0px 10px
     width: 178px
     height: 25px
     font-size: $font-size-small
+    background-color: $sidebarInputBg
+    border-radius: 0.25rem
+    border: 1px solid $sidebarInputBorder
+    color: $sidebarInputText
 
   li
     list-style-type: none
-    padding: 7px 10px 7px 10px
+    padding: 4px 10px
     margin: 0px
+    border-radius: 0px 0.25rem 0.25rem 0px;
     position: relative
-    min-height: 40px
-    font-size: $font-size-small
-    color: #fff
+    height: 25px
+    font-size: $font-size-base
     cursor: pointer
-    transition: all .3s ease-in 0
-    -webkit-transition: all .3s ease-in 0
-    -moz-transition: all .3s ease-in 0
     width: 100%
     borderbox()
-
-    .wrap
-      vertical-align: middle
-      padding-left: 40px
+    color: $sidebarNames
 
     &:hover
-      background: $blue-saturated
+      background: $sidebarHover
 
-    &.online, &.chat, &.dnd, &.away, &.xa
-      &:after
-        content: ''
-        position: absolute
-        top: 50%
-        right: 15px
-        height: 6px
-        width: 6px
-        margin-top: -4px
-        border: 1px solid transparent
-        roundall(10px)
+    &.joined
+      &:hover:not(.hasUnread) .remove
+        visibility: visible
 
-    &.online,
-    &.chat
-      &:after
-        background: $green
-        border-color: $green
+    &:not(.joined)
+      &:hover:not(.hasUnread) .join
+        visibility: visible
 
-    &.dnd
-      &:after
-        background: $red
-        border-color: $red
+    &.hasUnread, &.hasUnread .prefix
+      font-weight: $font-weight-bolder
+      color: #fff
 
-    &.away,
-    &.xa
-      &:after
-        background: $orange
-        border-color: $orange
+    &:not(.activeContact).offline,
+    &:not(.activeContact).chat
+      .presence
+        color: $brown-light
 
-    &.offline:not(:hover)
-      .name
-        color: darken($gray-light, 40%)
+    &:not(.activeContact).dnd
+      .presence
+        color: $red
+        opacity: 1
 
-      .status
-        color: darken($gray-light, 65%)
-
-      img
-        opacity: .25
+    &:not(.activeContact).away,
+    &:not(.activeContact).xa
+      .presence
+        color: $orange
+        opacity: 1
 
     &.activeContact, &.offline.activeContact
-      background: white
-      font-weight: $font-weight-bold
-
+      background: $sidebarSelectionBg
+      .prefix
+        color: $green-lighterer
+        opacity: 1
+      &:not(.dnd):not(.away):not(.online) .presence
+        color: $brown-darkerer
+        opacity: 1
+      .remove, .join
+        color: #fff
       .name
-        color: $gray
+        color: #fff
+
+    &:not(.activeContact).online
+      .presence
+        color: $green
+        opacity: 1
+
+    &.online, &.dnd, &.away
+      .name
+        font-style : normal
+
+    &.activeContact
+      &.online .presence,
+      &.dnd .presence,
+      &.away .presence
+        color: #fff
+        opacity: 1
 
     &.composing
       &:after
@@ -154,34 +192,30 @@
         background: transparent
 
       .name
-        color: $gray-light
+        color: $sidebarNames
         max-width: 60%
 
       .user
         width: 95%
 
-    img
-      opacity: 1
-
-    .avatar
-      vertical-align: top
-      margin-right: 5px
-      margin-top: -15px
-      position: absolute
-      left: 10px
-      top: 20px
-      avatar()
-      noselect()
+    .presence
+      font-size: 10px
+      display: inline-block
+      margin-top: -10px
+      vertical-align: middle
+      opacity: 0.5
 
     .user
-      color: white
-      width: 100%
+      display: inline-block
+      width: 120px
       line-height: 100%
       overflow: hidden
       text-overflow: ellipsis
+      height: $font-size-base+3
+      font-style: italic
+      text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25)
 
     .status
-      color: $gray-light
       font-size: $font-size-small
       font-weight: 400
       line-height: 12px
@@ -191,35 +225,53 @@
       display: inline-block
       margin-left: 5px
       font-size: $font-size-small
-      color: darken($gray-light, 50%)
+      color: darken($brown-light, 50%)
 
     .name
-      display: inline-block
-      text-overflow: ellipsis
+      width: 100%
+      line-height: 100%
       overflow: hidden
-
-    &.persistent
-      .name
-        color: red
+      text-overflow: ellipsis
+      height: $font-size-base+3
+      text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3)
+      position: absolute
+      left: 32px
+      max-width: 140px
 
     .unread
       display: none
-      color: white
-      height: 22px
-      width: 30px
-      padding-top: 8px
-      roundall(30px)
+      color: $sidebarUnreadText
+      height: 16px
+      width: 18px
+      roundall(5px)
       position: absolute
-      top: 5px
-      left: 10px
-      font-size: $font-size-small
+      padding-top:2px
+      right: 5px
+      top: 3px
+      font-size: $font-size-smaller
       font-weight: $font-weight-bold
       text-align: center
-      background: rgba(0, 174, 239, .8)
+      background: $sidebarUnreadBg
 
     .unread:not(:empty)
       display: block
 
+    .remove, .join
+      position: absolute
+      right: 7px
+      top: 5px
+      font-size: $font-size-base
+      display: inline-block
+      font-family: FontAwesome
+      visibility: hidden
+
+    .prefix
+      font-weight: 300
+      opacity: 0.5
+      position: relative
+      left: -15px
+      text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
+
     button
       margin: -15px 0px 0px 5px
 
@@ -237,15 +289,12 @@
         display: inline-block
 
 #roster
-
-  .name
-    width: 180px
+  .wrap
+    padding-left: 10px
 
 #bookmarks
-
-  .name
-    width: 120px
-    padding: 5px 10px 5px 40px
+  .wrap
+    padding-left: 24px
 
 @keyframes pulsate
   0%
diff --git a/public/css/pages/settings.styl b/public/css/pages/settings.styl
index 2d8d4c1..1d28670 100644
--- a/public/css/pages/settings.styl
+++ b/public/css/pages/settings.styl
@@ -4,7 +4,7 @@
 // Settings
 .main > div
   padding: 20px
-  padding-top: 50px
+  padding-top: 64px
   border-bottom: 1px solid $gray-lighter
 
   &:last-of-type
diff --git a/server.js b/server.js
index a3c2146..086b31f 100644
--- a/server.js
+++ b/server.js
@@ -31,7 +31,8 @@ var clientApp = new Moonboots({
         __dirname + '/clientapp/libraries/jquery.js',
         __dirname + '/clientapp/libraries/ui.js',
         __dirname + '/clientapp/libraries/resampler.js',
-        __dirname + '/clientapp/libraries/IndexedDBShim.min.js'
+        __dirname + '/clientapp/libraries/IndexedDBShim.min.js',
+        __dirname + '/clientapp/libraries/sugar-1.2.1-dates.js'
     ],
     browserify: {
         debug: false