diff --git a/addons/base/static/openerp/base.css b/addons/base/static/openerp/base.css
new file mode 100644
index 00000000000..b25d88c8e89
--- /dev/null
+++ b/addons/base/static/openerp/base.css
@@ -0,0 +1,107 @@
+/* TODO: seperate openerp webclient page css from openerp views css */
+body {
+    padding: 0;
+    margin: 0;
+    font-family: helvetica, sans, arial;
+    /* TODO: We must check best practice for font-size */
+}
+
+.oe_box {
+    border: 1px solid #aaf;
+    padding: 2px;
+    margin: 2px;
+}
+
+.#oe_header h2 {
+    margin: 2px 0;
+}
+
+#oe_errors pre {
+    margin: 0;
+}
+
+
+.openerp {
+}
+
+.openerp .loading {
+    display: none;
+    z-index: 1000;
+    position: fixed;
+    top: 0;
+    right: 0;
+    padding: 4px 8px;
+    background: #A61300;
+    color: white;
+    text-align: center;
+}
+
+.openerp .login {
+    display: none;
+    padding: 6px;
+    z-index: 100;
+    width: 34%;
+    position: fixed;
+    top: 0;
+    left: 33%;
+
+}
+.openerp .login_valid {
+    background-color: #8f8;
+}
+.openerp .login_invalid {
+    background-color: #f88;
+}
+
+.openerp h3.title {
+    margin: 2px 0;
+    color: #252424;
+    text-shadow: white 0 1px 0;
+}
+
+.openerp .sf-menu {
+    margin-bottom: 0px;
+}
+/*
+.sf-menu a {
+    padding: 5px 5px;
+}
+*/
+
+/* SearchView */
+
+.openerp .filter_label, .openerp .filter_icon {
+    border: 1px solid #666;
+    border-left-width: 0;
+    background: #F4F2F2;
+}
+.openerp .filter_icon {
+    padding: 1px 2px 0px 2px;
+}
+.openerp .filter_label {
+    font-weight: bold;
+    text-transform: uppercase;
+    text-shadow: #EEE 0 1px 0;
+    color: #4C4C4C;
+    white-space: nowrap;
+    min-height: 40px;
+    min-width: 75px;
+    padding: 2px 4px;
+}
+.openerp .filter_label_group  button:first-child {
+    border-left: 1px solid #666;
+    -webkit-border-top-left-radius: 7px;
+    -webkit-border-bottom-left-radius: 7px;
+    -moz-border-radius-topleft: 7px;
+    -moz-border-radius-bottomleft: 7px;
+    border-top-left-radius: 7px;
+    border-bottom-left-radius: 7px;
+}
+.openerp .filter_label_group button:last-child {
+    -webkit-border-top-right-radius: 7px;
+    -webkit-border-bottom-right-radius: 7px;
+    -moz-border-radius-topright: 7px;
+    -moz-border-radius-bottomright: 7px;
+    border-top-right-radius: 7px;
+    border-bottom-right-radius: 7px;
+}
diff --git a/addons/base/static/openerp/base.html b/addons/base/static/openerp/base.html
new file mode 100644
index 00000000000..070e927ac19
--- /dev/null
+++ b/addons/base/static/openerp/base.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <title>OpenERP</title>
+    <link rel="shortcut icon" href="/openobject/static/images/favicon.ico" type="image/x-icon"/>
+
+
+    <!-- jquery -->
+    <script src="/base/static/jquery/jquery-1.5.js"></script>
+
+    <!-- jquery.jqGrid
+    -->
+    <link rel="stylesheet" type="text/css" media="screen" href="/base/static/jquery.ui/css/smoothness/jquery-ui-1.8.9.custom.css" />
+    <link rel="stylesheet" type="text/css" media="screen" href="/base/static/jquery.jqGrid/css/ui.jqgrid.css" />
+    <script src="/base/static/jquery.jqGrid/jquery.jqGrid.js" type="text/javascript"></script>
+
+    <!-- jquery.superfish -->
+    <link rel="stylesheet" type="text/css" href="/base/static/jquery.superfish/css/superfish.css" media="screen">
+    <script type="text/javascript" src="/base/static/jquery.superfish/js/hoverIntent.js"></script>
+    <script type="text/javascript" src="/base/static/jquery.superfish/js/superfish.js"></script>
+
+    <!-- qweb -->
+    <script src="/base/static/qweb/qweb.js"></script>
+
+    <!-- openerp.base -->
+    <link rel="stylesheet" href="/base/static/openerp/base.css" type="text/css"/>
+    <script src="/base/static/openerp/openerp.base.js"></script>
+
+
+    <!-- all of the above should be replaced by:
+    <link rel="stylesheet" type="text/css" media="screen" href="/base/connection/css" />
+    <script type="text/javascript" src="/base/connection/js" ></script>
+    -->
+    <script type="text/javascript">
+    $(function() {
+        var oe = openerp();
+        oe.base.webclient("oe");
+    });
+    </script>
+
+</head>
+<body id="oe" class="openerp">
+</body>
+</html>
diff --git a/addons/base/static/openerp/base.xml b/addons/base/static/openerp/base.xml
index beedaea82d2..aab8af79377 100644
--- a/addons/base/static/openerp/base.xml
+++ b/addons/base/static/openerp/base.xml
@@ -3,8 +3,8 @@
 -->
 <templates id="template" xml:space="preserve">
 <t t-name="interface">
-    <div id="oe_loading" style="display: none;"></div>
-    <div id="oe_login" style="display: none; padding: 6px;"></div>
+    <div id="oe_loading" class="loading"></div>
+    <div id="oe_login" class="login"></div>
     <div id="oe_header" style="padding: 4px; border-bottom: 1px solid #000;">
         <h2>OpenERP Web Client <span style="font-size:50%; font-weight: normal;"><br/>Codename: from __future__ import openerpweb</span></h2>
     </div>
@@ -64,7 +64,7 @@
     <table id="todo_use_unique_id" class="jqGrid"></table>
 </t>
 <t t-name="FormView">
-    <h3><t t-esc="fields_view.arch.attrs.string"/></h3>
+    <h3 class="title"><t t-esc="fields_view.arch.attrs.string"/></h3>
     <div style="text-align:right;">
         <input type="button" value="First"/>
         <input type="button" value="&lt;&lt;"/>
@@ -104,8 +104,8 @@
     </t>
 </t>
 <t t-name="SearchView">
-    <h3><t t-esc="fields_view.arch.attrs['string']"/></h3>
-    <table border="0">
+    <h3 class="title"><t t-esc="fields_view.arch.attrs['string']"/></h3>
+    <table border="0" cellspacing="0" cellpadding="0">
     <tr>
         <t t-call="SearchView.node">
             <t t-set="node" t-value="fields_view.arch"/>
@@ -129,7 +129,7 @@
     -->
     <t t-if="node.tag == 'filter'">
         <t t-if="previous_node_type != 'filter'">
-            &lt;td nowrap="true" valign="bottom"&gt;
+            &lt;td nowrap="true" valign="bottom" class="filter_label_group"&gt;
         </t>
             <!-- TODO: buttons are inline elements. should not have whitespaces between them.
              Either implement trim in qweb or use css3 white-space-collapsing (not stable now)
@@ -141,7 +141,7 @@
              Also add a TODO about t-code=""
              
              -->
-            <button type="button" t-att-title="node.attrs.help">
+            <button type="button" t-att-title="node.attrs.help" t-att-class="node.attrs.string ? 'filter_label' : 'filter_icon'">
                 <img t-if="node.attrs.icon" t-att-src="'/base/static/openerp/img/icons/' + node.attrs.icon + '.png'" width="16" height="16"/>
                 <br t-if="node.attrs.icon and node.attrs.string"/>
                 <t t-esc="node.attrs.string"/>
@@ -157,7 +157,7 @@
         <!-- TODO: check qweb support for cdata -->
         &lt;/tr&gt;
         &lt;/table&gt;
-        &lt;table border="0"&gt;
+        &lt;table border="0" cellspacing="0" cellpadding="0"&gt;
         &lt;tr&gt;
     </t>
     <t t-if="node.tag == 'field'">
diff --git a/addons/base/static/openerp/openerp.base.js b/addons/base/static/openerp/openerp.base.js
index bdf17dde43a..f10e3227340 100644
--- a/addons/base/static/openerp/openerp.base.js
+++ b/addons/base/static/openerp/openerp.base.js
@@ -385,14 +385,14 @@ openerp.base.Login =  openerp.base.Controller.extend({
     },
     on_login_invalid: function() {
         var $e = this.$element;
-        $e.removeClass("oe_login_valid");
-        $e.addClass("oe_login_invalid");
+        $e.removeClass("login_valid");
+        $e.addClass("login_invalid");
         $e.show();
     },
     on_login_valid: function() {
         var $e = this.$element;
         $e.removeClass("oe_login_invalid");
-        $e.addClass("oe_login_valid");
+        $e.addClass("login_valid");
         $e.hide();
     },
     on_submit: function(ev) {