diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index e69de29bb2d..71739e8167d 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -0,0 +1,125 @@
+/* line 43, base.sass */
+.openerp2 {
+  padding: 0;
+  margin: 0;
+  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+  color: #4c4c4c;
+  font-size: 13px;
+  background: white;
+  position: relative;
+}
+/* line 53, base.sass */
+.openerp2 a {
+  color: #4c4c4c;
+  text-decoration: none;
+}
+/* line 59, base.sass */
+.openerp2 .oe_webclient {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+/* line 68, base.sass */
+.openerp2 .oe_topbar {
+  width: 100%;
+  height: 31px;
+  border-top: solid 1px #d3d3d3;
+  border-bottom: solid 1px black;
+  background: #646060;
+  background: -moz-linear-gradient(#646060, #262626);
+  background: -webkit-gradient(linear, left top, left bottom, from(#646060), to(#262626));
+  background: -webkit-linear-gradient(#646060, #262626);
+}
+/* line 75, base.sass */
+.openerp2 .oe_topbar .oe_topbar_item {
+  float: left;
+}
+/* line 77, base.sass */
+.openerp2 .oe_topbar .oe_topbar_item li {
+  float: left;
+}
+/* line 79, base.sass */
+.openerp2 .oe_topbar .oe_topbar_item li a {
+  display: block;
+  padding: 5px 10px 7px;
+  line-height: 20px;
+  height: 20px;
+  color: #eeeeee;
+  vertical-align: top;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+}
+/* line 87, base.sass */
+.openerp2 .oe_topbar .oe_topbar_item li a:hover {
+  background: #303030;
+  color: white;
+  -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+  -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+  -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+}
+/* line 91, base.sass */
+.openerp2 .oe_topbar .oe_topbar_item .oe_active {
+  background: #303030;
+  font-weight: bold;
+  color: white;
+  -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+  -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+  -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+}
+/* line 97, base.sass */
+.openerp2 .oe_topbar .oe_topbar_avatar {
+  width: 24px;
+  height: 24px;
+  margin: -2px 2px 0 0;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+}
+/* line 105, base.sass */
+.openerp2 .oe_menu {
+  float: left;
+  padding: 0;
+  margin: 0;
+}
+/* line 109, base.sass */
+.openerp2 .oe_menu li {
+  list-style-type: none;
+  float: left;
+}
+/* line 112, base.sass */
+.openerp2 .oe_menu a {
+  display: block;
+  padding: 5px 10px 7px;
+  line-height: 20px;
+  height: 20px;
+  color: #eeeeee;
+  vertical-align: top;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+}
+/* line 120, base.sass */
+.openerp2 .oe_menu a:hover {
+  background: #303030;
+  color: white;
+  -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+  -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+  -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+}
+/* line 124, base.sass */
+.openerp2 .oe_menu .oe_active {
+  background: #303030;
+  font-weight: bold;
+  color: white;
+  -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+  -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+  -box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+}
+
+/* line 133, base.sass */
+.openerp .oe-shortcuts {
+  position: static;
+}
+/* line 135, base.sass */
+.openerp #oe_header {
+  clear: both;
+}
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 51e11840bf9..090c0ac822f 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -41,7 +41,100 @@
 // }}}
 
 .openerp2
-    // Minh's playground.
+    // Common styles {{{
+    padding: 0
+    margin: 0
+    font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif
+    color: #4c4c4c
+    font-size: 13px
+    background: white
+    position: relative
+
+    a
+        color: #4c4c4c
+        text-decoration: none
+    // }}}
+
+    // WebClient {{{
+    .oe_webclient
+        position: absolute
+        top: 0
+        bottom: 0
+        left: 0
+        right: 0
+    // }}}
+
+    // Topbar {{{
+    .oe_topbar
+        width: 100%
+        height: 31px
+        border-top: solid 1px #d3d3d3
+        border-bottom: solid 1px black
+        @include vertical-gradient(#646060, #262626)
+
+        .oe_topbar_item
+            float: left
+            li
+                float: left
+                a
+                    display: block
+                    padding: 5px 10px 7px
+                    line-height: 20px
+                    height: 20px
+                    color: #eee
+                    vertical-align: top
+                    text-shadow: 0 1px 1px rgba(0,0,0,0.2)
+                    &:hover
+                        background: #303030
+                        color: white
+                        @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
+            .oe_active
+                background: #303030
+                font-weight: bold
+                color: white
+                @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
+
+        .oe_topbar_avatar
+            width: 24px
+            height: 24px
+            margin: -2px 2px 0 0
+            @include radius(4px)
+    // }}}
+
+    // Menu {{{
+    .oe_menu
+        float: left
+        padding: 0
+        margin: 0
+        li
+            list-style-type: none
+            float: left
+        a
+            display: block
+            padding: 5px 10px 7px
+            line-height: 20px
+            height: 20px
+            color: #eee
+            vertical-align: top
+            text-shadow: 0 1px 1px rgba(0,0,0,0.2)
+            &:hover
+                background: #303030
+                color: white
+                @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
+        .oe_active
+            background: #303030
+            font-weight: bold
+            color: white
+            @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
+    // }}}
+
+.openerp
+    // Transitional overrides for old styles {{{
+    .oe-shortcuts
+        position: static
+    #oe_header
+        clear: both
+    // }}}
 
 // au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker:
diff --git a/addons/web/static/src/js/chrome.js b/addons/web/static/src/js/chrome.js
index 63587ad59fa..9d26b39ffad 100644
--- a/addons/web/static/src/js/chrome.js
+++ b/addons/web/static/src/js/chrome.js
@@ -887,7 +887,7 @@ openerp.web.Menu =  openerp.web.OldWidget.extend(/** @lends openerp.web.Menu# */
     on_toggle_fold: function() {
         this.$secondary_menu.toggleClass('oe_folded').toggleClass('oe_unfolded');
         if (this.folded) {
-            this.$secondary_menu.find('.oe_secondary_menu.active').show();
+            this.$secondary_menu.find('.oe_secondary_menu.oe_active').show();
         } else {
             this.$secondary_menu.find('.oe_secondary_menu').hide();
         }
@@ -903,8 +903,8 @@ openerp.web.Menu =  openerp.web.OldWidget.extend(/** @lends openerp.web.Menu# */
      * @param {Number} menu_id database id of the terminal menu to select
      */
     open_menu: function (menu_id) {
-        this.$element.add(this.$secondary_menu).find('.active')
-                .removeClass('active');
+        this.$element.add(this.$secondary_menu).find('.oe_active')
+                .removeClass('oe_active');
         this.$secondary_menu.find('> .oe_secondary_menu').hide();
 
         var $primary_menu;
@@ -913,7 +913,7 @@ openerp.web.Menu =  openerp.web.OldWidget.extend(/** @lends openerp.web.Menu# */
         if ($secondary_submenu.length) {
             for(;;) {
                 if ($secondary_submenu.hasClass('leaf')) {
-                    $secondary_submenu.addClass('active');
+                    $secondary_submenu.addClass('oe_active');
                 } else if ($secondary_submenu.hasClass('submenu')) {
                     $secondary_submenu.addClass('opened')
                 }
@@ -932,9 +932,9 @@ openerp.web.Menu =  openerp.web.OldWidget.extend(/** @lends openerp.web.Menu# */
         if (!$primary_menu.length) {
             return;
         }
-        $primary_menu.addClass('active');
+        $primary_menu.addClass('oe_active');
         this.$secondary_menu.find(
-            'div[data-menu-parent=' + $primary_menu.data('menu') + ']').addClass('active').toggle(!this.folded);
+            'div[data-menu-parent=' + $primary_menu.data('menu') + ']').addClass('oe_active').toggle(!this.folded);
     },
     on_menu_click: function(ev, id) {
         id = id || 0;
@@ -964,7 +964,7 @@ openerp.web.Menu =  openerp.web.OldWidget.extend(/** @lends openerp.web.Menu# */
     },
     do_menu_click: function($clicked_menu, manual) {
         var $sub_menu, $main_menu,
-            active = $clicked_menu.is('.active'),
+            active = $clicked_menu.is('.oe_active'),
             sub_menu_visible = false,
             has_submenu_items = false;
 
@@ -980,8 +980,8 @@ openerp.web.Menu =  openerp.web.OldWidget.extend(/** @lends openerp.web.Menu# */
         has_submenu_items = !!$sub_menu.children().length;
         this.$secondary_menu.find('.oe_secondary_menu').hide();
 
-        $('.active', this.$element.add(this.$secondary_menu)).removeClass('active');
-        $main_menu.add($clicked_menu).add($sub_menu).addClass('active');
+        $('.oe_active', this.$element.add(this.$secondary_menu)).removeClass('oe_active');
+        $main_menu.add($clicked_menu).add($sub_menu).addClass('oe_active');
 
         if (has_submenu_items) {
             if (!(this.folded && manual)) {
@@ -1125,7 +1125,7 @@ openerp.web.WebClient = openerp.web.Widget.extend(/** @lends openerp.web.WebClie
         self.header.on_logout.add(this.proxy('on_logout'));
         self.header.on_action.add(this.proxy('on_menu_action'));
         self.header.appendTo($("#oe_header"));
-        self.menu = new openerp.web.Menu(self, "oe_menu", "oe_secondary_menu");
+        self.menu = new openerp.web.Menu(self, "oe_menu_temporary_id", "oe_secondary_menu");
         self.menu.on_action.add(this.proxy('on_menu_action'));
         self.menu.start();
     },
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 89e28398bc9..81d9f5ccd09 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -20,9 +20,9 @@
 <t t-name="WebClient">
     <div class="oe_webclient">
         <div class="oe_topbar">
-            <div id="oe_header" class="header"></div>
-            <div id="oe_menu" class="menu"></div>
+            <div class="oe_menu_placeholder" id="oe_menu_temporary_id"/>
         </div>
+        <div id="oe_header" class="header"></div>
         <div class="oe_leftbar">
             <!--
             <a href="#" class="oe_logo"><img src="img/logo.png"/></a>
@@ -45,7 +45,6 @@
                 </td>
             </tr>
             </table>
-
         </div>
     </div>
 </t>
@@ -375,15 +374,13 @@
         ><t t-esc="shortcut.name"/></li>
 </ul>
 <t t-name="Menu">
-    <table align="center">
-    <tr>
-        <td t-foreach="widget.data.data.children" t-as="menu">
+    <ul class="oe_menu" t-if="widget.data">
+        <li t-foreach="widget.data.data.children" t-as="menu">
             <a href="#" t-att-data-menu="menu.id">
                 <t t-esc="menu.name"/>
             </a>
-        </td>
-    </tr>
-    </table>
+        </li>
+    </ul>
 </t>
 <t t-name="Menu.secondary">
     <div t-attf-class="oe_toggle_secondary_menu">