diff --git a/html/main.html b/html/main.html
index 834dd710..54dad972 100644
--- a/html/main.html
+++ b/html/main.html
@@ -8,16 +8,18 @@
 <div id="loader"><div><i class="fa fa-spinner fa-spin"></i></div></div>
 <page></page>
 <div id="bar">
-    <div class="bar-left">
-    	<%template "logo" .%>
-    </div>
-    <status-message></status-message>
-    <div class="ng-cloak bar-right">
-        <button title="{{_('Share your screen')}}" class="btn aenablebtn" ng-show="isChrome && webrtcDetectedVersion >= 32 && (status=='connected' || status=='conference' || layout.screenshare)" ng-model="layout.screenshare" btn-checkbox><i class="fa fa-desktop"></i></button>
-        <button title="{{_('Chat')}}" ng-show="roomstatus" class="btn" ng-class="{messagesunseen: chatMessagesUnseen>0}" ng-model="layout.chat" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-comments-o"></i><span class="badge" ng-show="chatMessagesUnseen">{{chatMessagesUnseen}}</span></button>
-        <button title="{{_('Mute microphone')}}" class="btn amutebtn" ng-model="microphoneMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-microphone-slash"></i></button>
-        <button title="{{_('Turn camera off')}}" class="btn amutebtn" ng-model="cameraMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-eye-slash"></i></button>
-        <button title="{{_('Settings')}}" class="btn" ng-model="layout.settings" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-cog"></i></button>
+    <div class="bar">
+        <div class="left">
+          <%template "logo" .%>
+        </div>
+        <status-message></status-message>
+        <div class="ng-cloak right">
+           <button title="{{_('Share your screen')}}" class="btn aenablebtn" ng-show="isChrome && webrtcDetectedVersion >= 32 && (status=='connected' || status=='conference' || layout.screenshare)" ng-model="layout.screenshare" btn-checkbox><i class="fa fa-desktop"></i></button>
+           <button title="{{_('Chat')}}" ng-show="roomstatus" class="btn" ng-class="{messagesunseen: chatMessagesUnseen>0}" ng-model="layout.chat" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-comments-o"></i><span class="badge" ng-show="chatMessagesUnseen">{{chatMessagesUnseen}}</span></button>
+           <button title="{{_('Mute microphone')}}" class="btn amutebtn" ng-model="microphoneMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-microphone-slash"></i></button>
+           <button title="{{_('Turn camera off')}}" class="btn amutebtn" ng-model="cameraMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-eye-slash"></i></button>
+           <button title="{{_('Settings')}}" class="btn" ng-model="layout.settings" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-cog"></i></button>
+        </div>
     </div>
 </div>
 <div id="roombar" class="ng-cloak">
diff --git a/src/styles/components/_bar.scss b/src/styles/components/_bar.scss
index 676c45bf..c4b97a61 100644
--- a/src/styles/components/_bar.scss
+++ b/src/styles/components/_bar.scss
@@ -20,16 +20,20 @@
  */
 
 #bar {
-  background-color: $componentbg;
-  color: $componentfg1;
   left: 0;
   min-height: 44px;
   position: absolute;
   right: 0;
   top: 0;
-  text-align: center;
   z-index: 5;
-  @include adjust-leading-to(2);
+}
+
+.bar {
+  background-color: $componentbg;
+  color: $componentfg1;
+  font: bold 1em/40px $font-sans-serif;
+  text-align: center;
+  // @include adjust-leading-to(2);
   @include box-shadow(0 2px 10px 0 $componentfg3);
   // @include debug-vertical-alignment();
   @include touch-callout(none);
@@ -43,7 +47,7 @@
   }
 }
 
-.bar-left {
+.bar .left {
   bottom: 0;
   left: 0;
   top: 0;
@@ -55,10 +59,11 @@
     display: inline-block;
     color: black;
     height: 32px;
+    font: normal 11px/11px $font-sans-serif;
     text-align: left;
     width: 90px;
     vertical-align: middle;
-    @include adjust-font-size-to(11px,0.4);
+    // @include adjust-font-size-to(11px,0.4);
     span {
       font-style: italic;
       left: 38px;
@@ -71,7 +76,7 @@
   }
 }
 
-.bar-middle {
+.bar .middle {
   background-color: $componentbg;
   display: inline-block;
   font-weight: bold;
@@ -133,7 +138,7 @@
   }
 }
 
-.bar-right {
+.bar .right {
   bottom: 1px;
   padding-right: 8px;
   position: absolute;
@@ -153,11 +158,12 @@
     color: $grey3;
     display: inline-block;
     height: 42px;
+    font: 24px/40px $font-sans-serif;
     margin-left: -4px;
     padding: 0;
     text-align: center;
     width: 42px;
-    @include adjust-font-size-to(24px);
+    // @include adjust-font-size-to(24px);
     &:focus {
       border: none;
       outline: none;
diff --git a/src/styles/global/_base.scss b/src/styles/global/_base.scss
index 712e4820..38d95cca 100644
--- a/src/styles/global/_base.scss
+++ b/src/styles/global/_base.scss
@@ -19,14 +19,14 @@
  *
  */
 
-@include establish-baseline();
+// @include establish-baseline();
 
 html,
 body {
   background-clip: padding-box;
   background-color: $background;
   height: 100%;
-  font: normal #{$base-font-size}/#{$base-rhythm-unit} $font-sans-serif;
+  font: normal $base-font-size $font-sans-serif;
   // @include debug-vertical-alignment();
 }
 
diff --git a/src/styles/global/_mixins.scss b/src/styles/global/_mixins.scss
index b72bfab0..44a8e4e7 100644
--- a/src/styles/global/_mixins.scss
+++ b/src/styles/global/_mixins.scss
@@ -31,12 +31,27 @@
 @mixin transition-duration($duration) {
   transition-duration: $duration;
   -webkit-transition-duration: $duration;
-
 }
 
 @mixin transition($transition) {
-  transition: all linear 0.5s;
-  -moz-transition: all linear 0.5s;
-  -o-transition: all linear 0.5s;
-  -webkit-transition: all linear 0.5s;
+  transition: $transition;
+  -moz-transition: $transition;
+  -o-transition: $transition;
+  -webkit-transition: $transition;
+}
+
+@mixin border-radius($radius) {
+  border-radius: $radius;
+  -moz-border-radius: $radius;
+  -webkit-border-radius: $radius;
+}
+
+@mixin linear-gradient($gradient...) {
+  background: #9dd53a; /* Old browsers */
+  background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
+  background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
+  background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 92c4ad39..c7188673 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -20,8 +20,7 @@
  */
 
 @import "global/variables";
-@import "compass";
-
+@import "compass/typography/vertical_rhythm";
 @import "libs/libs";
 
 @import "global/mixins";
diff --git a/static/partials/statusmessage.html b/static/partials/statusmessage.html
index 1216daf4..bddddd86 100644
--- a/static/partials/statusmessage.html
+++ b/static/partials/statusmessage.html
@@ -1,4 +1,4 @@
-<span class="bar-middle status-{{status}}" ng-switch on="status">
+<span class="middle status-{{status}}" ng-switch on="status">
   <span ng-switch-when="initializing">{{_("Initializing")}} <i class="fa fa-spinner fa-spin"></i></span>
   <span ng-switch-when="waiting"><span class="msg">{{_("Online")}} </span><i style="color:rgb(132,184,25)" class="fa fa-bullseye"></i> {{id|displayName}} <img class="userpicture" ng-show="master.buddyPicture" ng-src="{{master.buddyPicture}}" alt="" /></span>
   <span ng-switch-when="connecting"><span class="msg">{{_("Calling")}} {{dialing|displayName}}</span> <a class="btn btn-small btn-danger" ng-click="doAbort()"><i class="fa fa-spinner fa-spin"></i> {{_("Hangup")}}</a></span>