diff --git a/addons/pad/static/src/css/etherpad.css b/addons/pad/static/src/css/etherpad.css
index bd73af6c2cd..6d27b527383 100644
--- a/addons/pad/static/src/css/etherpad.css
+++ b/addons/pad/static/src/css/etherpad.css
@@ -1,17 +1,36 @@
-.oe_pad_head {
-    box-sizing: border-box;
-    width: 100%;
-    display: block;
-    padding: 4px;
-    text-align: right;
-}
-.oe_pad_head .oe_pad_switch {
-    
+.oe_pad {
+    margin-top: 16px;
 }
 
-.oe_pad_readonly {
-    border: 1px solid #ddd;
-    padding: 8px;
+.oe_pad_switch_positioner {
+    position: relative;
+}
+
+.oe_pad_switch {
+    position: absolute;
+    top: 5px;
+    left: 383px;
+    width: 28px;
+    height: 28px;
+    background-image: -webkit-linear-gradient(top, white, #f0f0f0);
+    border: solid 1px #ccc;
+    border-radius:3px;
+    text-align: center;
+    line-height: 22px;
+    overflow: hidden;
+    -webkit-box-sizing: border-box;
+    color: #666666;
+    padding-top:-3px;
+    padding-left:-1px;
+    cursor: pointer;
+}
+
+.oe_pad_switch:hover{
+    background-image: -webkit-linear-gradient(top, #f4f4f4, #e4e4e4);
+}
+
+.oe_pad_fullscreen .oe_pad_switch {
+    top:4px;
 }
 
 .oe_pad_fullscreen {
@@ -27,9 +46,9 @@
     z-index: 1000;
 }
 
-.oe_pad_content {
+.oe_pad.oe_configured .oe_pad_content.oe_editing{
     border: solid 1px #c4c4c4;
-    height: 150px;
+    height:300px;
     -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.1);
         -ms-box-shadow: 0 5px 10px rgba(0,0,0,0.1);
@@ -37,12 +56,7 @@
             box-shadow: 0 5px 10px rgba(0,0,0,0.1);
 }
 
-.oe_pad_content > p {
-    text-align: center;
-    opacity: 0.75;
-}
-
-.oe_pad_fullscreen .oe_pad_content {
+.oe_pad.oe_configured.oe_pad_fullscreen .oe_pad_content {
     height: 100%;
     border: none;
     -webkit-box-shadow: none;
@@ -52,6 +66,16 @@
             box-shadow: none;
 }
 
+.oe_pad.oe_unconfigured > p {
+    text-align: center;
+    opacity: 0.75;
+}
+
+.oe_pad_loading{
+    text-align: center;
+    opacity: 0.75;
+}
+
 .etherpad_readonly ul, .etherpad_readonly ol {
     margin-before: 1em;
     margin-after: 1em;
diff --git a/addons/pad/static/src/js/pad.js b/addons/pad/static/src/js/pad.js
index 511400bcede..4f5ecbf1793 100644
--- a/addons/pad/static/src/js/pad.js
+++ b/addons/pad/static/src/js/pad.js
@@ -1,49 +1,47 @@
 openerp.pad = function(instance) {
-
-instance.web.form.FieldPad = instance.web.form.AbstractField.extend({
-    template: 'FieldPad',
-    start: function() {
-        this._super();
-        var self = this;
-        this.$el.find('div.oe_pad_head').click(function(ev) {
-            self.$el.toggleClass('oe_pad_fullscreen');
-        });
-        this.on("change:effective_readonly", this, function() {
-            this.render_value();
-        });
-    },
-    set_value: function(val) {
-        var self = this;
-        var _super = self._super;
-        _super.apply(self,[val]);
-        this._dirty_flag = true;
-        self.render_value();
-    },
-    render_value: function() {
-        console.log("display");
-        var self = this;
-        var value = this.get('value');
-
-        if (!_.str.startsWith(value, "http")) {
-            self.$('.oe_pad_content').html(instance.web.qweb.render('FieldPad.unconfigured'));
-        } else {
-            if (!this.get("effective_readonly")) {
-                var pad_username = this.session.username;
-                var code = '<iframe width="100%" height="100%" frameborder="0" src="'+value+'?showChat=false&userName='+pad_username+'"></iframe>';
-                this.$('.oe_pad_content').html(code);
-            } else {
-                $.get(value+'/export/html').success(function(data) {
-                    self.$('.oe_pad_content').html('<div class="oe_pad_readonly">'+data+'</div>');
-                }).error(function() {
-                    self.$('.oe_pad_content').text('Unable to load pad');
-                });
+    
+    instance.web.form.FieldPad = instance.web.form.AbstractField.extend({
+        template: 'FieldPad',
+        configured: false,
+        content: "",
+        set_value: function(val) {
+            var self = this;
+            var _super = self._super;
+            _super.apply(self,[val]);
+            this._dirty_flag = true;
+            self.renderElement();
+        },
+        renderElement: function(){
+            var self  = this;
+            var value = this.get('value');
+            if(!_.str.startsWith(value,'http')){
+                this.configured = false;
+                this.content = "";
+            }else{
+                this.configured = true;
+                if(!this.get('effective_readonly')){
+                    this.content = '<iframe width="100%" height="100%" frameborder="0" src="'+value+'?showChat=false&userName='+this.session.username+'"></iframe>';
+                }else{
+                    this.content = '<div class="oe_pad_loading">... Loading pad ...</div>';
+                    $.get(value+'/export/html').success(function(data){
+                        self.$('.oe_pad_content').html('<div class="oe_pad_readonly">'+data+'<div>');
+                    }).error(function(){
+                        self.$('.oe_pad_content').text('Unable to load pad');
+                    });
+                }
             }
-        }
-    },
-});
-
-instance.web.form.widgets = instance.web.form.widgets.extend({
-    'pad': 'instance.web.form.FieldPad',
-});
+            this._super();
+            this.$('.oe_pad_content').html(this.content);
+            this.$('.oe_pad_switch').click(function(){
+                self.$el.toggleClass('oe_pad_fullscreen');
+            });
+            this.on('change:effective_readonly',this,function(){
+                self.renderElement();
+            });
+        },
+    });
 
+    instance.web.form.widgets = instance.web.form.widgets.extend({
+        'pad': 'instance.web.form.FieldPad',
+    });
 };
diff --git a/addons/pad/static/src/xml/pad.xml b/addons/pad/static/src/xml/pad.xml
index 911655b6b89..eaa519dc04b 100644
--- a/addons/pad/static/src/xml/pad.xml
+++ b/addons/pad/static/src/xml/pad.xml
@@ -2,17 +2,35 @@
 <!-- vim:fdl=1:
 -->
 <templates id="template" xml:space="preserve">
-<t t-name="FieldPad">
-    <div class="oe_form_field_text oe_pad">
-        <div class="oe_pad_head">
-            <button class="oe_pad_switch oe_button">Fullscreen</button>
-        </div>
-        <div class="oe_pad_content"></div>
-    </div>
-</t>
-<t t-name="FieldPad.unconfigured">
-    <p>
-    You must configure the etherpad through the menu Setting > Companies > Companies, in the configuration tab of your company.<br/>
-    </p>
-</t>
+
+    <t t-name="FieldPad">
+
+        <t t-if="!widget.configured">
+            <div class="oe_form_field_text oe_pad oe_unconfigured">
+                <p>
+                    You must configure the etherpad through the menu Setting > Companies > Companies, in the configuration tab of your company.
+                </p>
+            </div>
+        </t>
+
+        <t t-if="widget.configured">
+            <t t-if="widget.get('effective_readonly')">
+                <div class="oe_form_field_text oe_pad oe_configured">
+                    <div class="oe_pad_content etherpad_readonly">
+                    </div>
+                </div>
+            </t>
+
+            <t t-if="!widget.get('effective_readonly')">
+                <div class="oe_form_field_text oe_pad oe_configured">
+                    <div class="oe_pad_switch_positioner">
+                        <span class="oe_pad_switch oe_e">&amp;Ntilde;</span>
+                    </div>
+                    <div class="oe_pad_content oe_editing">
+                    </div>
+                </div>
+            </t>
+        </t>
+    </t>
+
 </templates>