diff --git a/app/assets/js/movim_websocket.js b/app/assets/js/movim_websocket.js
index a9505fcb4..5b5a94174 100755
--- a/app/assets/js/movim_websocket.js
+++ b/app/assets/js/movim_websocket.js
@@ -97,7 +97,7 @@ var MovimWebsocket = {
         if(funcalls != null) {
             for(h = 0; h < funcalls.length; h++) {
                 var funcall = funcalls[h];
-                console.log(funcall);
+                //console.log(funcall);
                 if(funcall.func != null && (typeof window[funcall.func] == 'function')) {
                     try {
                         window[funcall.func].apply(null, funcall.params);
diff --git a/app/views/account.tpl b/app/views/account.tpl
index 2888f64e3..0b18c27de 100755
--- a/app/views/account.tpl
+++ b/app/views/account.tpl
@@ -1,9 +1,6 @@
-<?php /* -*- mode: html -*- */
-?>
-<div id="main">
-    <div id="left">
-    </div>
-    <div id="center">
+<main>
+    <?php $this->widget('Header'); ?>
+    <section>
         <?php $this->widget('Subscribe');?>
-    </div>
-</div>
+    </section>
+</main>
diff --git a/app/views/accountnext.tpl b/app/views/accountnext.tpl
index 7e3a261d4..f036e0674 100755
--- a/app/views/accountnext.tpl
+++ b/app/views/accountnext.tpl
@@ -1,10 +1,6 @@
-<?php /* -*- mode: html -*- */
-?>
-<div id="main">
-    <div id="left">
-        <?php $this->widget('AccountError');?>
-    </div>
-    <div id="center">
+<main>
+    <?php $this->widget('Header'); ?>
+    <section>
         <?php $this->widget('AccountNext');?>
-    </div>
-</div>
+    </section>
+</main>
diff --git a/app/views/chat.tpl b/app/views/chat.tpl
index dcf31c80e..4d5e4d74c 100644
--- a/app/views/chat.tpl
+++ b/app/views/chat.tpl
@@ -6,7 +6,7 @@
 <main>
     <?php $this->widget('Header'); ?>
     <section>
-        <?php $this->widget('Roster');?>
+        <?php $this->widget('Chats');?>
         <?php $this->widget('Chat');?>
     </section>
 </main>
diff --git a/app/views/conf.tpl b/app/views/conf.tpl
index 8ecf5dc68..328e3c668 100755
--- a/app/views/conf.tpl
+++ b/app/views/conf.tpl
@@ -10,7 +10,7 @@
             <?php $this->widget('Tabs');?>
             <?php $this->widget('Vcard4');?>
             <?php $this->widget('Config');?>
-            <?php $this->widget('ConfigData');?>
+            <?php //$this->widget('ConfigData');?>
             <?php $this->widget('PubsubSubscriptionConfig');?>
         </div>
     </section>
diff --git a/app/views/contact.tpl b/app/views/contact.tpl
index 02f2a5503..f0249c3bf 100644
--- a/app/views/contact.tpl
+++ b/app/views/contact.tpl
@@ -8,6 +8,7 @@
     <section>
         <?php $this->widget('Roster');?>
         <div>
+            <?php $this->widget('Notifs');?>
             <?php $this->widget('Tabs');?>
             <?php $this->widget('Contact');?>
         </div>
diff --git a/app/views/help.tpl b/app/views/help.tpl
index 0a57628d8..f6f61b7fe 100755
--- a/app/views/help.tpl
+++ b/app/views/help.tpl
@@ -4,11 +4,7 @@
 </nav>
 
 <main>
-    <header>
-        <span id="menu" class="on_mobile icon" onclick="MovimTpl.showMenu()"><i class="md md-menu"></i></span>
-        <span class="on_desktop icon"><i class="md md-help"></i></span>
-        <h2>Help **FIXME**</h2>
-    </header>
+    <?php $this->widget('Header'); ?>
     <section>
         <div>
             <?php $this->widget('Tabs');?>
diff --git a/app/widgets/AccountNext/_accountnext_form.tpl b/app/widgets/AccountNext/_accountnext_form.tpl
index 6a97195bb..e8b93813a 100755
--- a/app/widgets/AccountNext/_accountnext_form.tpl
+++ b/app/widgets/AccountNext/_accountnext_form.tpl
@@ -2,13 +2,11 @@
     <div id="subscription_error">
 
     </div>
-    <fieldset>
-        {$formh}
-        <a
-            class="button color green oppose" 
-            onclick="{$submitdata}"
-        >
-            <i class="fa fa-check"></i> {$c->__('button.validate')}
-        </a>
-    </fieldset>
+    {$formh}
+    <a
+        class="button color green oppose" 
+        onclick="{$submitdata}"
+    >
+        {$c->__('button.validate')}
+    </a>
 </form>
diff --git a/app/widgets/AccountNext/accountnext.tpl b/app/widgets/AccountNext/accountnext.tpl
index 447f9b4f6..848bfb282 100755
--- a/app/widgets/AccountNext/accountnext.tpl
+++ b/app/widgets/AccountNext/accountnext.tpl
@@ -1,8 +1,8 @@
 <div id="subscribe">
-    <h1 class="paddedtopbottom">{$c->__('create.title')} {$c->__('on')} {$host}</h1>
+    <h1>{$c->__('create.title')} {$c->__('on')} {$host}</h1>
 
-    <div id="subscription_form" class="paddedtopbottom">
-        {$c->__('loading')}
+    <div id="subscription_form">
+        <h4>{$c->__('loading')}</h4>
     </div>
 
     <script type="text/javascript">
diff --git a/app/widgets/Chat/Chat.php b/app/widgets/Chat/Chat.php
index 790265f3a..7c7843609 100644
--- a/app/widgets/Chat/Chat.php
+++ b/app/widgets/Chat/Chat.php
@@ -7,6 +7,7 @@ class Chat extends WidgetCommon
     function load()
     {
         $this->addjs('chat.js');
+        $this->registerEvent('carbons', 'onMessage');
         $this->registerEvent('message', 'onMessage');
     }
 
@@ -14,11 +15,6 @@ class Chat extends WidgetCommon
     {
         $message = $packet->content;
 
-        \movim_log('HOP');
-        \movim_log('SESSION '.$message->session);
-        \movim_log('TO '.$message->jidto);
-        \movim_log('FROM '.$message->jidfrom);
-
         // If the message is from me
         if($message->session == $message->jidto) {
             $from = $message->jidfrom;
@@ -133,7 +129,7 @@ class Chat extends WidgetCommon
             $this->call(
                 'ajaxSendMessage',
                 "'" . $jid . "'",
-                "Chats.sendMessage(this, '" . $jid . "')")
+                "Chat.sendMessage(this, '" . $jid . "')")
             );
         $view->assign('smiley', $this->call('ajaxSmiley'));
 
diff --git a/app/widgets/Chat/_chat.tpl b/app/widgets/Chat/_chat.tpl
index a32c42708..94bc2ee78 100644
--- a/app/widgets/Chat/_chat.tpl
+++ b/app/widgets/Chat/_chat.tpl
@@ -1,16 +1,16 @@
-<div id="{$jid}_discussion" class="actions fixed contained">
-    <div id="{$jid}_messages">
+<div id="{$jid}_discussion" class="actions scroll fixed contained">
+    <section id="{$jid}_messages">
         {$messages}
-    </div>
+    </section>
     <div>
         <ul>
             <li>
                 <span class="icon gray">
                     <i class="md md-create"></i>
                 </span>
-                <div class="control" onclick="{$smiley}">
+                <!--<div class="control" onclick="{$smiley}">
                     <i class="md md-mood"></i>
-                </div>
+                </div>-->
                 <form>
                     <div>
                          <textarea 
diff --git a/app/widgets/Chat/_chat_header.tpl b/app/widgets/Chat/_chat_header.tpl
index 58d29e94e..fb08fbc29 100644
--- a/app/widgets/Chat/_chat_header.tpl
+++ b/app/widgets/Chat/_chat_header.tpl
@@ -2,7 +2,7 @@
 <span class="on_desktop icon" onclick="MovimTpl.hidePanel()"><i class="md md-person"></i></span>
 
 <ul class="active">
-    <li onclick="{$close}">
+    <li onclick="Chats_ajaxClose('{$jid}'); MovimTpl.hidePanel();">
         <span class="icon">
             <i class="md md-close"></i>
         </span>
diff --git a/app/widgets/Chat/_chat_messages.tpl b/app/widgets/Chat/_chat_messages.tpl
index ba7cd9772..56fedc867 100644
--- a/app/widgets/Chat/_chat_messages.tpl
+++ b/app/widgets/Chat/_chat_messages.tpl
@@ -1,4 +1,4 @@
-<ul class="thick">
+<ul class="middle">
     {loop="$messages"}
         <li {if="$value->jidfrom == $jid"}class="oppose"{/if}>
             <span class="icon bubble">
diff --git a/app/widgets/Chat/chat.js b/app/widgets/Chat/chat.js
index b69fc8546..22e134ed6 100644
--- a/app/widgets/Chat/chat.js
+++ b/app/widgets/Chat/chat.js
@@ -1,8 +1,8 @@
-var Chats = {
+var Chat = {
+    /*
     message: function(jid, html) {
         movim_append('messages' + jid, html);
-        Chats.scroll(jid);
-    },
+    },*/
     addSmiley: function(smiley) {
 
     },
diff --git a/app/widgets/Chats/Chats.php b/app/widgets/Chats/Chats.php
index 02e4d5f88..a89437b01 100644
--- a/app/widgets/Chats/Chats.php
+++ b/app/widgets/Chats/Chats.php
@@ -4,9 +4,74 @@ class Chats extends WidgetCommon
 {
     function load()
     {
+        $this->addjs('chats.js');
+        $this->registerEvent('carbons', 'onMessage');
+        $this->registerEvent('message', 'onMessage');
+    }
+
+    function onMessage($packet)
+    {
+        $message = $packet->content;
+
+        // If the message is from me
+        if($message->session == $message->jidto) {
+            $from = $message->jidfrom;
+        } else {
+            $from = $message->jidto;
+        }
+
+        $chats = Cache::c('chats');
+        if(!array_key_exists($from, $chats)) {
+            $this->ajaxOpen($from);
+        }
+    }
+
+    function ajaxOpen($jid)
+    {
+        $chats = Cache::c('chats');
+        if($chats == null) $chats = array();
+         
+        $chats[$jid] = 1;
+        Cache::c('chats', $chats);
+
+        RPC::call('movim_fill', 'chats_widget_list', $this->prepareChats());
+
+        RPC::call('Chats.refresh');
+    }
+
+    function ajaxClose($jid)
+    {
+        $chats = Cache::c('chats');
+        unset($chats[$jid]);
+        Cache::c('chats', $chats);
+
+        $c = new Chat;
+        $c->ajaxGet(current(array_keys($chats)));
+
+        RPC::call('movim_fill', 'chats_widget_list', $this->prepareChats());
+
+        RPC::call('Chats.refresh');
+    }
+
+    function prepareChats()
+    {
+        $chats = Cache::c('chats');
+        
+        $view = $this->tpl();
+
+        $cd = new \Modl\ContactDAO;
+
+        foreach($chats as $jid => $value) {
+            $chats[$jid] = $cd->get($jid);
+        }
+
+        $view->assign('chats', array_reverse($chats));
+        
+        return $view->draw('_chats', true);
     }
 
     function display()
     {
+        $this->view->assign('list', $this->prepareChats());
     }
 }
diff --git a/app/widgets/Chats/_chats.tpl b/app/widgets/Chats/_chats.tpl
index e69de29bb..15d1b5521 100644
--- a/app/widgets/Chats/_chats.tpl
+++ b/app/widgets/Chats/_chats.tpl
@@ -0,0 +1,11 @@
+{loop="$chats"}
+    <li data-jid="{$value->jid}">
+        <div class="control">
+            <i class="md md-chevron-right"></i>
+        </div>
+        <span class="icon bubble">
+            <img src="{$value->getPhoto('s')}">
+        </span>
+        <span>{$value->getTrueName()}</span>
+    </li>
+{/loop}
diff --git a/app/widgets/Chats/chats.js b/app/widgets/Chats/chats.js
new file mode 100644
index 000000000..afdd5f123
--- /dev/null
+++ b/app/widgets/Chats/chats.js
@@ -0,0 +1,28 @@
+var Chats = {
+    refresh: function() {
+        var items = document.querySelectorAll('ul#chats_widget_list li');
+        var i = 0;
+        while(i < items.length)
+        {
+            items[i].onclick = function(e) {
+                MovimTpl.showPanel();
+                Chat_ajaxGet(this.dataset.jid);
+                Chats.reset(items);
+                movim_add_class(this, 'active');
+            }
+            i++;
+        }
+
+        items[0].click();
+    },
+
+    reset: function(list) {
+        for(i = 0; i < list.length; i++) {
+            movim_remove_class(list[i], 'active');
+        }
+    }
+}
+
+MovimWebsocket.attach(function() {
+    Chats.refresh();
+});
diff --git a/app/widgets/Chats/chats.tpl b/app/widgets/Chats/chats.tpl
index e69de29bb..517a3c0f0 100644
--- a/app/widgets/Chats/chats.tpl
+++ b/app/widgets/Chats/chats.tpl
@@ -0,0 +1,8 @@
+<div id="chats_widget">
+    <ul id="chats_widget_list" class="thick active divided">
+        {$list}
+    </ul>
+    <a class="button action color">
+        <i class="md md-playlist-add"></i>
+    </a>
+</div>
diff --git a/app/widgets/Config/_config_form.tpl b/app/widgets/Config/_config_form.tpl
index 4852cb03b..e5a3d0e01 100644
--- a/app/widgets/Config/_config_form.tpl
+++ b/app/widgets/Config/_config_form.tpl
@@ -4,8 +4,9 @@
     <i class="fa fa-user"></i> {$c->__('config.feed_configuration')}
 </a>-->
 <form enctype="multipart/form-data" method="post" action="index.php" name="general">
+    <br/>
     <h3>{$c->__('config.general')}</h3>
-    <div class="block large">
+    <div class="block">
         <div class="select">
             <select name="language" id="language">
                 <option value="en">English (default)</option>
@@ -95,11 +96,11 @@
 <!--<input value="{$c->t('Submit'); ?>" onclick="<?php echo $submit; ?>" type="button" class="button icon yes merged right" style="float: right;">
     <input type="reset" value="{$c->t('Reset'); ?>" class="button icon no merged left" style="float: right;">-->
 
-    <div class="clear"></div>
+    <div class="clear padded"></div>
     <a 
         onclick="{$submit}" 
-        class="button color" >
-        {$c->__('button.submit')}
+        class="button color oppose" >
+        {$c->__('button.save')}
     </a>
     <div class="clear"></div>
 </form>
diff --git a/app/widgets/Contact/Contact.php b/app/widgets/Contact/Contact.php
index e2c323839..281a180f8 100644
--- a/app/widgets/Contact/Contact.php
+++ b/app/widgets/Contact/Contact.php
@@ -54,6 +54,14 @@ class Contact extends WidgetCommon
         Dialog::fill($view->draw('_contact_edit', true));
     }
 
+    function ajaxChat($jid)
+    {
+        $c = new Chats;
+        $c->ajaxOpen($jid);
+        
+        RPC::call('movim_redirect', $this->route('chat'));
+    }
+
     function ajaxDeleteContact($jid)
     {
         $view = $this->tpl();
@@ -124,10 +132,22 @@ class Contact extends WidgetCommon
 
             $view->assign('contact', $c);
             $view->assign('contactr', $cr);
+
+            $view->assign('chat', 
+                $this->call(
+                    'ajaxChat', 
+                    "'".$c->jid."'"));
+
             return $view->draw('_contact', true);
         } elseif(isset($cr)) {
             $view->assign('contact', null);
             $view->assign('contactr', $cr);
+
+            $view->assign('chat', 
+                $this->call(
+                    'ajaxChat', 
+                    "'".$cr->jid."'"));
+            
             return $view->draw('_contact', true);
         } else {
             return $this->prepareEmpty($jid);
diff --git a/app/widgets/Contact/_contact.tpl b/app/widgets/Contact/_contact.tpl
index 06c026a66..9a9511aa5 100644
--- a/app/widgets/Contact/_contact.tpl
+++ b/app/widgets/Contact/_contact.tpl
@@ -172,6 +172,10 @@
         {/if}
     </ul>
     {/if}
+
+    <a onclick="{$chat}" class="button action color red">
+        <i class="md md-chat"></i>
+    </a>
 {else}
     <ul class="thick">
         <li>
@@ -180,7 +184,3 @@
         </li>
     </ul>
 {/if}
-
-<a class="button action color red">
-    <i class="md md-chat"></i>
-</a>
diff --git a/app/widgets/Header/_header_account.tpl b/app/widgets/Header/_header_account.tpl
new file mode 100644
index 000000000..18cb0b589
--- /dev/null
+++ b/app/widgets/Header/_header_account.tpl
@@ -0,0 +1,6 @@
+<header id="header">
+    <a href="{$c->route('main')}" class="classic">
+        <span id="menu" class="icon"><i class="md md-home"></i></span>
+    </a>
+    <h2>{$c->__('page.account_creation')}</h2>
+</header>
diff --git a/app/widgets/Header/_header_accountnext.tpl b/app/widgets/Header/_header_accountnext.tpl
new file mode 100644
index 000000000..15a7a5241
--- /dev/null
+++ b/app/widgets/Header/_header_accountnext.tpl
@@ -0,0 +1,6 @@
+<header id="header">
+    <a href="{$c->route('account')}" class="classic">
+        <span id="menu" class="icon"><i class="md md-arrow-back"></i></span>
+    </a>
+    <h2>{$c->__('page.account_creation')}</h2>
+</header>
diff --git a/app/widgets/Header/_header_help.tpl b/app/widgets/Header/_header_help.tpl
new file mode 100644
index 000000000..800297cac
--- /dev/null
+++ b/app/widgets/Header/_header_help.tpl
@@ -0,0 +1,5 @@
+<header id="header">
+    <span id="menu" class="on_mobile icon" onclick="MovimTpl.showMenu()"><i class="md md-menu"></i></span>
+    <span class="on_desktop icon"><i class="md md-help"></i></span>
+    <h2>{$c->__('page.help')}</h2>
+</header>
diff --git a/app/widgets/Login/_login_sessions.tpl b/app/widgets/Login/_login_sessions.tpl
index 98fac1c4f..07053e7f8 100755
--- a/app/widgets/Login/_login_sessions.tpl
+++ b/app/widgets/Login/_login_sessions.tpl
@@ -1,20 +1,23 @@
-<ul class="active">
-    <li class="subheader">{$c->__('account.title')}</li>
-{loop="$sessions"}
-    <li onclick="chooseSession('{$value->jid}')">
-        <div class="control">
-            <i onclick="removeSession('{$value->jid}')" class="fa fa-times"></i>
-        </div>
-        <span class="icon bubble">
-            <img src="{$value->getPhoto('s')}"/>
-        </span>
-        <span onclick="chooseSession('{$value->jid}')">{$value->getTrueName()}</span>
-    </li>
-{/loop}
-    <li>
-        <span class="icon bubble color green">
-            <i class="md md-face-unlock"></i>
-        </span>
-        <span onclick="chooseSession('')">{$c->__('form.another_account')}</span>
-    </li>
-</ul>
+<section>
+    <h3>{$c->__('account.title')}</h3>
+    <br />
+    <ul class="active">
+        {loop="$sessions"}
+        <li>
+            <div class="control">
+                <i onclick="Login.removeSession('{$value->jid}')" class="fa fa-times"></i>
+            </div>
+            <span class="icon bubble">
+                <img src="{$value->getPhoto('s')}"/>
+            </span>
+            <span onclick="Login.choose('{$value->jid}')">{$value->getTrueName()}</span>
+        </li>
+        {/loop}
+    </ul>
+</section>
+<div>
+    <a class="button flat" href="{$c->route('admin')}">
+        <i class="md md-pages"></i>
+    </a>
+    <span class="button flat" onclick="Login.choose('')">{$c->__('form.another_account')}</span>
+</div>
diff --git a/app/widgets/Login/locales.ini b/app/widgets/Login/locales.ini
index aa78cc977..3e91ed0f9 100755
--- a/app/widgets/Login/locales.ini
+++ b/app/widgets/Login/locales.ini
@@ -26,7 +26,7 @@ form.username           = 'My address'
 form.password           = 'Password'
 form.create_one         = 'Create one !'
 form.no_account         = 'No account yet ?'
-form.another_account    = 'Login with an another account'
+form.another_account    = 'Another account'
 
 whitelist.info          = 'This server accept only connection with xmpp accounts from these servers :'
 whitelist.info2         = "If you don't have such xmpp account, you can try %sanother public Movim%s client."
diff --git a/app/widgets/Login/login.css b/app/widgets/Login/login.css
index 118288b75..0a0282cd4 100755
--- a/app/widgets/Login/login.css
+++ b/app/widgets/Login/login.css
@@ -1,17 +1,54 @@
 body main {
     background-color: #32434D;
-}
 
-#login_widget {
     background-image: url(img/logo.svg);
     background-repeat: no-repeat;
-    background-position: center 5rem;
-    background-size: 80% auto;
-    width: 50rem;
-    max-width: calc(100% - 2rem);
-    padding-top: 20rem;
+    background-position: center 90%;
+    background-size: 30rem auto;
+
+    animation: 60s infinite colorful;
+}
+
+@media screen and (max-width: 600px) {
+    body main {
+        background-image: none;
+    }
+
+}
+
+#login_widget li.new_account {
+    text-align: center;
 }
 
+#login_widget > div {
+    display: none;
+}
+
+#login_widget.choose > div:first-child {
+    display: initial;
+}
+
+#login_widget:not(.choose) > div:last-child {
+    display: initial;
+}
+
+#login_widget span.info {
+    float: right;
+    margin-top: 2.5rem;
+}
+
+#login_widget span.info + h3 {
+    margin-top: 2rem;
+}
+
+ul.admin {
+    position: relative;
+    text-align: center;
+    color: white;
+    max-width: 45rem;
+}
+
+/*
 #login_widget > div {
     background-color: white;
     border-radius: 0.25rem;
@@ -33,7 +70,7 @@ body main {
     #login_widget > ul {
         display: none;
     }
-}
+}*/
 
 /*body {
     width: 100%;
@@ -206,7 +243,7 @@ body main {
 }
 */
 /* States */
-
+/*
 #login_widget > div #sessions,
 #login_widget > div.choose #loginhelp,
 #login_widget > div.choose form div,
@@ -230,7 +267,7 @@ body main {
 
 footer {
     display: none;
-}
+}*/
 /*
 @media screen and (max-width: 1024px) {
     #loginpage {
diff --git a/app/widgets/Login/login.js b/app/widgets/Login/login.js
index 4b083161c..69e6e0e87 100755
--- a/app/widgets/Login/login.js
+++ b/app/widgets/Login/login.js
@@ -1,71 +1,100 @@
-function fillExample(login, pass) {
-    document.querySelector('#login').value = login;
-    document.querySelector('#pass').value = pass;
-}
-
-/**
- * @brief Save a jid in the local storage
- * @param The jid to remember
- */
-function rememberSession(jid) {
-    if(localStorage['previousSessions'] == null) {
-        localStorage.setObject('previousSessions', new Array());
-    }
-
-    var s = localStorage.getObject('previousSessions');
-    if(s.indexOf(jid) == -1) {
-        s.push(jid);
-        localStorage.setObject('previousSessions', s);
-    }
-}
-
-/**
- * @brief Choose a session to connect and show the login form
- * @param The jid to choose
- */
-function chooseSession(jid) {
-    movim_remove_class('#login_widget > div', 'choose');
-    document.querySelector('#login').value = jid;
-    
-    if(jid != '') {
-        document.querySelector('#pass').focus();
-    } else {
-        document.querySelector('#login').focus();
-    }
-}
-
-/**
- * @brief Remove a remembered session
- * @param The jid to choose
- */
-function removeSession(jid) {
-    var s = localStorage.getObject('previousSessions');
-    s.splice(s.indexOf(jid), 1);
-
-    if(s.length == 0) {
-        localStorage.removeItem('previousSessions');
-        movim_remove_class('#login_widget > div', 'choose');
-    } else {
-        localStorage.setObject('previousSessions', s);
+var Login = {
+    fillExample : function(login, pass) {
+        document.querySelector('#login').value = login;
+        document.querySelector('#pass').value = pass;
+    },
+
+    /**
+     * @brief Init the main form behaviour
+     */
+    init : function() {
+        // The form submission event
+        form = document.querySelector('form[name="login"]');
+        form.onsubmit = function(e) {
+            e.preventDefault();
+
+            var button = this.querySelector('input[type=submit]');
+            button.value = button.dataset.loading;
+            
+            eval(this.dataset.action);
+
+            localStorage.username = document.querySelector('#login').value;
+            Login.rememberSession(localStorage.username);
+
+            // A fallback security
+            setTimeout("MovimWebsocket.unregister()", 7000);
+        }
+    },
+
+    /**
+     * @brief Save a jid in the local storage
+     * @param The jid to remember
+     */
+    rememberSession : function(jid) {
+        if(localStorage['previousSessions'] == null) {
+            localStorage.setObject('previousSessions', new Array());
+        }
+
+        var s = localStorage.getObject('previousSessions');
+        if(s.indexOf(jid) == -1) {
+            s.push(jid);
+            localStorage.setObject('previousSessions', s);
+        }
+    },
+
+    /**
+     * @brief Choose a session to connect and show the login form
+     * @param The jid to choose
+     */
+    choose : function(jid) {
+        movim_remove_class('#login_widget', 'choose');
+        document.querySelector('#login').value = jid;
+        
+        if(jid != '') {
+            document.querySelector('#pass').focus();
+        } else {
+            document.querySelector('#login').focus();
+        }
+    },
+
+    /**
+     * @brief Remove a remembered session
+     * @param The jid to choose
+     */
+    removeSession : function(jid) {
+        var s = localStorage.getObject('previousSessions');
+        s.splice(s.indexOf(jid), 1);
+
+        if(s.length == 0) {
+            localStorage.removeItem('previousSessions');
+            movim_remove_class('#login_widget', 'choose');
+        } else {
+            localStorage.setObject('previousSessions', s);
+        }
+        
+        Login_ajaxGetRememberedSession(localStorage.getItem('previousSessions'));
+    },
+
+    /**
+     * @brief Back to the choosing panel
+     */
+    backToChoose : function() {
+        movim_add_class('#login_widget', 'choose');
+    },
+
+    /**
+     * @brief Post login requests
+     */
+    post : function(jid, url) {
+        Login.rememberSession(jid);
+        localStorage.postStart = 1;
+        movim_reload(url);
     }
-    
-    Login_ajaxGetRememberedSession(localStorage.getItem('previousSessions'));
-}
 
-/**
- * @brief Back to the choosing panel
- */
-function backToChoose() {
-    movim_add_class('#login_widget > div', 'choose');
 }
 
-/**
- * @brief Post login requests
- */
 function postLogin(jid, url) {
-    rememberSession(jid);
-    localStorage.postStart = 1;
-    movim_reload(url);
+    Login.post(jid, url);
 }
 
 MovimWebsocket.attach(function()
@@ -73,29 +102,13 @@ MovimWebsocket.attach(function()
     if(localStorage.username != null)
         document.querySelector('#login').value = localStorage.username;
 
-    // The form submission event
-    form = document.querySelector('form[name="login"]');
-    form.onsubmit = function(e) {
-        e.preventDefault();
-
-        var button = this.querySelector('input[type=submit]');
-        button.className = 'button color orange icon yes';
-        button.value = button.dataset.loading;
-        
-        eval(this.dataset.action);
-
-        localStorage.username = document.querySelector('#login').value;
-        rememberSession(localStorage.username);
-
-        // A fallback security
-        setTimeout("MovimWebsocket.unregister()", 7000);
-    }
+    Login.init();
 
     // We hide the Websocket error
     document.querySelector('#error_websocket').style.display = 'none';
 
     // We enable the form
-    var inputs = document.querySelectorAll('#login_widget > div input[disabled]');
+    var inputs = document.querySelectorAll('.dialog div input[disabled]');
     for (var i = 0; i < inputs.length; i++)
     {
         inputs[i].disabled = false;
@@ -105,7 +118,7 @@ MovimWebsocket.attach(function()
     Login_ajaxGetRememberedSession(localStorage.getItem('previousSessions'));
 
     if(localStorage.getItem('previousSessions') != null) {
-        movim_add_class('#login_widget > div', 'choose');
+        movim_add_class('#login_widget', 'choose');
     }
 });
 
diff --git a/app/widgets/Login/login.tpl b/app/widgets/Login/login.tpl
index 9a0aff062..69ec0e8df 100755
--- a/app/widgets/Login/login.tpl
+++ b/app/widgets/Login/login.tpl
@@ -1,18 +1,15 @@
+{if="!BROWSER_COMP"}
+    <div class="message warning">
+        {$c->__('error.too_old')}
+    </div>
+{else}
 <div id="login_widget">
-    <div class="fadeDown">
-        {if="!BROWSER_COMP"}
-            <div class="message warning">
-                {$c->__('error.too_old')}
-            </div>
-        {else}
-            <div id="sessions">
+    <div id="sessions" class="dialog actions"></div>
 
-            </div>
-            {if="isset($info) && $info != ''"}
-                <div class="message warning">
-                    {$info}
-                </div>
-            {/if}
+    <div class="dialog">
+        <section>
+            <span class="info">{$c->__('connected')} {$connected} • {$c->__('population')} {$pop}</span>
+            <h3>{$c->__('page.login')}</h3>
             <form
                 data-action="{$submit}"
                 name="login">
@@ -26,47 +23,27 @@
                         placeholder="{$c->__('form.password')}"/>
                     <label for="pass">{$c->__('form.password')}</label>
                 </div>
-                
-                <input
-                    type="submit"
-                    disabled
-                    data-loading="{$c->__('button.connecting')}"
-                    value="{$c->__('button.come_in')}"
-                    class="button flat"/> 
-                <!--<div class="clear"></div>-->
-                <!--
-                <div class="clear"></div>-->
-            
-                <!--<ul id="loginhelp">
-                    {if="$whitelist_display == true"}
-                        <li id="whitelist">
-                            <p>{$c->__('whitelist.info')}</p>
-                            <p style="font-weight:bold; text-align:center; margin:0.5em;">{$whitelist}</p>
-                            <p>{$c->__('whitelist.info2', '<a href="http://pod.movim.eu">', '</a>')}</p>
-                        </li>
-                    {else}
-                        <li id="jabber">{$c->__('account.jabber')}
-                            <a href="#" onclick="fillExample('demonstration@movim.eu', 'demonstration');">
-                                {$c->__('account.demo')}
+                <div>
+                    <ul class="simple thin">
+                        <li>
+                            <div class="control">
+                                <input
+                                    type="submit"
+                                    disabled
+                                    data-loading="{$c->__('button.connecting')}"
+                                    value="{$c->__('button.come_in')}"
+                                    class="button flat"/> 
+                            </div>
+                            <a id="return_sessions" class="button flat" href="#" onclick="Login.backToChoose()">
+                                {$c->__('account.title')}
                             </a>
                         </li>
-                        <li id="gmail">
-                            {$gmail}
-                        </li>
-                        <li id="facebook">
-                            {$facebook}
-                        </li>
-                    {/if}
-                </ul>-->
+                    </ul>
+                </div>
             </form>
 
-            <ul class="">
-                <li>
-                    <span class="icon">
-                        <a id="return_sessions" class="" href="#" onclick="backToChoose()">
-                            <i class="fa fa-chevron-left"></i>
-                        </a>
-                    </span>
+            <ul class="thin simple">
+                <li class="new_account">
                     <span>{$c->__('form.no_account')}
                         <a class="" href="{$c->route('account')}">
                             {$c->__('form.create_one')}
@@ -74,18 +51,44 @@
                     </span>
                 </li>
             </ul>
-        {/if}
-        <div id="error_websocket" class="snackbar">
-            {$c->__('error.websocket')}
-        </div>
-
+        </section>
     </div>
-    <ul class="thin simple">
-        <li>{$c->__('connected')} {$connected} • {$c->__('population')} {$pop} •
-            <a href="{$c->route('admin')}">
-                {$c->__('page.administration')}
-            </a>
-        </li>
-    </ul>
+</div>
 
+{if="isset($info) && $info != ''"}
+    <div class="message warning">
+        {$info}
+    </div>
+{/if}
+<div id="error_websocket" class="snackbar">
+    {$c->__('error.websocket')}
 </div>
+
+{/if}
+
+
+            <!--<div class="clear"></div>-->
+            <!--
+            <div class="clear"></div>-->
+        
+            <!--<ul id="loginhelp">
+                {if="$whitelist_display == true"}
+                    <li id="whitelist">
+                        <p>{$c->__('whitelist.info')}</p>
+                        <p style="font-weight:bold; text-align:center; margin:0.5em;">{$whitelist}</p>
+                        <p>{$c->__('whitelist.info2', '<a href="http://pod.movim.eu">', '</a>')}</p>
+                    </li>
+                {else}
+                    <li id="jabber">{$c->__('account.jabber')}
+                        <a href="#" onclick="fillExample('demonstration@movim.eu', 'demonstration');">
+                            {$c->__('account.demo')}
+                        </a>
+                    </li>
+                    <li id="gmail">
+                        {$gmail}
+                    </li>
+                    <li id="facebook">
+                        {$facebook}
+                    </li>
+                {/if}
+            </ul>-->
diff --git a/app/widgets/Subscribe/subscribe.css b/app/widgets/Subscribe/subscribe.css
index 878c8a1d0..2b005f97a 100755
--- a/app/widgets/Subscribe/subscribe.css
+++ b/app/widgets/Subscribe/subscribe.css
@@ -1,4 +1,4 @@
-#subscribe .server:hover {
+/*#subscribe .server:hover {
     background-color: #EEE;
     cursor: pointer;
     border-color: #BBB;
@@ -31,3 +31,4 @@
     border: 1px solid #DDD;
     padding: 1em;
 }
+*/
diff --git a/app/widgets/Subscribe/subscribe.tpl b/app/widgets/Subscribe/subscribe.tpl
index 5d07f0f52..617081459 100755
--- a/app/widgets/Subscribe/subscribe.tpl
+++ b/app/widgets/Subscribe/subscribe.tpl
@@ -1,37 +1,48 @@
 <div id="subscribe">
     <h1 class="paddedtopbottom">{$c->__('subscribe.title')}</h1>
 
-    <p class="paddedtopbottom">{$c->__('subscribe.info')}</p>
+    <h4>{$c->__('subscribe.info')}</h4>
 
-    {loop="$servers"}
-    <div
-        class="block"
-        onclick="movim_redirect('{$c->route('accountnext', array($value->fn->text, false))}')">
-        <div class="server {if="$value->checked"}star{/if}">
-            <h1>{$value->fn->text}</h1>
-
-            <img
-                class="flag"
-                title="{$value->adr->country}" 
-                alt="{$value->adr->country}" 
-                src="{$c->flagPath($value->adr->country)}"/>           
-            <p>{$value->note->text}</p>
-
-            <a target="_blank" href="{$value->url->uri}">
-                {$value->url->uri}
-            </a>
-        </div>
-    </div>
-    {/loop}
-
-    <div class="block">
-        <div class="server">
-            <h1>{$c->__('subscribe.server_question')}</h1>
+    <ul class="thick active">
+        {loop="$servers"}
+        <li
+            class="block condensed"
+            onclick="movim_redirect('{$c->route('accountnext', array($value->fn->text, false))}')">
+            <span class="icon bubble color {$value->fn->text|stringToColor}">
+                {if="$value->checked"}
+                    <i class="fa md-star-outline"></i>
+                {else}
+                    {$value->fn->text|firstLetterCapitalize}
+                {/if}
+            </span>
+            <div class="server {if="$value->checked"}star{/if}">
+                <span class="info">
+                <img
+                    class="flag"
+                    title="{$value->adr->country}" 
+                    alt="{$value->adr->country}" 
+                    src="{$c->flagPath($value->adr->country)}"/>  
+                </span>
+                <span>{$value->fn->text}</span>
+         
+                <p>
+                    {$value->note->text}<br />
+                    <a target="_blank" href="{$value->url->uri}">
+                        {$value->url->uri}
+                    </a>
+                </p>
+            </div>
+        </li>
+        {/loop}
 
+        <li class="block condensed">
+            <span class="icon bubble color orange">
+                <i class="md md-add-circle-outline"></i>
+            </span>
+            <span>{$c->__('subscribe.server_question')}</span>
             <p>
                 {$c->__('subscribe.server_contact')} • <a href="http://movim.eu/">http://movim.eu/</a>
             </p>
-        </div>
-    </div>
+        </li>
+    </ul>
 </div>
-
diff --git a/app/widgets/Vcard4/_vcard4_form.tpl b/app/widgets/Vcard4/_vcard4_form.tpl
index 22f509434..d36f6a082 100755
--- a/app/widgets/Vcard4/_vcard4_form.tpl
+++ b/app/widgets/Vcard4/_vcard4_form.tpl
@@ -1,11 +1,6 @@
 <ul>
     <li class="subheader"> {$c->__('vcard.privacy_title')}</li>
     <li class="condensed">
-        <span class="icon bubble color blue">
-            <i class="md md-security"></i>
-        </span>
-
-        <span>{$c->__('vcard.privacy_question')}</span>
         <form>
             <div class="control">
                 <div class="checkbox">
@@ -21,12 +16,19 @@
                 </div>
             </div>
         </form>
+        <span class="icon bubble color blue">
+            <i class="md md-security"></i>
+        </span>
+
+        <span>{$c->__('vcard.privacy_question')}</span>
         <p>{$c->__('vcard.privacy_info')}</p>        
     </li>
 </ul>
 
+<div class="clear padded"></div>
+
 <form name="vcard4" id="vcard4form">
-    <h4>{$c->__('page.profile')}</h4>
+    <h3>{$c->__('page.profile')}</h3>
     <div class="block">
         <input type="text" name="fn" class="content" value="{$me->fn}">
         <label for="fn">{$c->__('vcard.name')}</label>
@@ -45,9 +47,10 @@
 
     <!-- The date picker -->
 
-    <div class="element ">
+    <div>
         <label for="day">{$c->__('vcard.date_of_birth')}</label>
-        <div class="select" style="width: 33%; float: left;">
+
+        <div class="select" style="width: 33.33%; float: left;">
             <select name="day" class="datepicker">
                 <option value="-1">{$c->__('Day')}</option>
                 {loop="$days"}
@@ -59,8 +62,8 @@
                 {/loop}
             </select>
         </div>
-        
-        <div class="select" style="width: 34%; float: left;">
+
+        <div class="select" style="width: 33.33%; float: left;">
             <select name="month" class="datepicker">
                 <option value="-1">{$c->__('Month')}</option>
                 {loop="$months"}
@@ -72,8 +75,8 @@
                 {/loop}
             </select>
         </div>
-                
-        <div class="select" style="width: 33%; float: left;">
+
+        <div class="select" style="width: 33.33%; float: left;">
             <select name="year" class="datepicker">
                 <option value="-1">{$c->__('Year')}</option>
                 {loop="$years"}
@@ -87,7 +90,7 @@
         </div>
     </div>
 
-    <div>
+    <div class="block">
         <label for="gender">{$c->__('vcard.gender')}</label>
         <div class="select">
             <select name="gender">
@@ -102,7 +105,7 @@
         </div>
     </div>
 
-    <div>
+    <div class="block">
         <label for="marital">{$c->__('vcard.marital')}</label>
         <div class="select">
             <select name="marital">
@@ -117,73 +120,82 @@
         </div>
     </div>
 
-    <div class="element large">
+    <div class="clear"></div>
+
+    <div>
         <input type="url" name ="url" class="content" value="{$me->url}">
         <label for="url">{$c->__('vcard.website')}</label>
     </div>
 
-    <div class="element large">
+    <div>
         <textarea name="desc" id="desctext" class="content" onkeyup="movim_textarea_autoheight(this);">{$desc}</textarea>
         <label for="desc">{$c->__('vcard.about')}</label>
     </div>
 
-    <legend><i class="fa fa-compass"></i> {$c->__('vcard.position_title')}</legend>
-        
-    <div>
+    <div class="clear padded"></div>
+
+    <h3>{$c->__('vcard.position_title')}</h3>
+
+    <div class="block">
         <input type="text" type="locality" name ="locality" class="content" value="{$me->adrlocality}" placeholder="{$c->__('Locality')}">
         <label for="url">{$c->__('vcard.locality')}</label>
     </div>
               
-    <div>
-        <label for="country">{$c->__('vcard.country')}</label>
-                <div class="select">
-                    <select name="country">
-                        <option value=""></option>
-                        {loop="$countries"}
-                            <option 
-                            {if="$value == $me->adrcountry"}
-                                selected 
-                            {/if}
-                            value="{$value}">{$value}</option>
-                        {/loop}
-                </select>
+    <div class="block">
+        <div class="select">
+            <select name="country">
+                <option value=""></option>
+                {loop="$countries"}
+                    <option 
+                    {if="$value == $me->adrcountry"}
+                        selected 
+                    {/if}
+                    value="{$value}">{$value}</option>
+                {/loop}
+            </select>
         </div>
+        <label for="country">{$c->__('vcard.country')}</label>
     </div>
 
+    <div class="clear padded"></div>
 
-    <legend><i class="fa fa-circle-thin"></i> {$c->__('vcard.accounts_title')}</legend>
+    <h3>{$c->__('vcard.accounts_title')}</h3>
     
-    <div>
+    <div class="block">
         <input type="text" name="twitter" class="content" value="{$me->twitter}" placeholder="{$c->__('Nickname')}">
         <label for="twitter"><i class="fa fa-twitter"></i> {$c->__('vcard.twitter')}</label>
     </div>
     
-    <div>
+    <div class="block">
         <input type="text" name="skype" class="content" value="{$me->skype}" placeholder="{$c->__('Nickname')}">
         <label for="skype"><i class="fa fa-skype"></i> {$c->__('vcard.skype')}</label>
     </div>
     
-    <div>
+    <div class="block">
         <input type="email" name="yahoo" class="content" value="{$me->yahoo}" placeholder="{$c->__('Yahoo Account')}">
         <label for="skype"><i class="fa fa-yahoo"></i> {$c->__('vcard.yahoo')}</label>
     </div>
 
+    <div class="clear"></div>
+
     <a
         onclick="
             {$submit}
             movim_button_save('#vcard4validate');
             this.value = '{$c->__('Submitting')}'; 
-            this.className='button color orange oppose merged right inactive';" 
-        class="button merged right color green oppose" 
+            this.className='button oppose inactive';" 
+        class="button color oppose" 
         id="vcard4validate"
         >
-        <i class="fa fa-check"></i> {$c->__('Submit')}
+        {$c->__('Submit')}
     </a>
     <a
         onclick="document.querySelector('#vcard4form').reset();"
-        class="button merged left color orange oppose">
-        <i class="fa fa-eraser"></i> {$c->__('Reset')}
+        class="button flat oppose">
+        {$c->__('Reset')}
     </a>
+
+    <div class="clear padded"></div>
 </form>
                 
 
diff --git a/themes/material/css/block.css b/themes/material/css/block.css
index b2d6904e9..d7fa684a8 100644
--- a/themes/material/css/block.css
+++ b/themes/material/css/block.css
@@ -9,7 +9,10 @@
 .block:nth-of-type(even) {
     float: right;
     clear: right;
-    padding-right: 1rem;
+}
+
+.block:nth-of-type(even):not(li) {
+    padding-left: 2rem;
 }
 
 .block.large {
@@ -20,5 +23,10 @@
 @media screen and (max-width: 1024px) {
     .block {
         width: 100%;
+        padding-right: 2rem;
+    }
+
+    .block:nth-of-type(even):not(li) {
+        padding-left: 0;
     }
 }
diff --git a/themes/material/css/color.css b/themes/material/css/color.css
index 11050fc82..70be3209f 100644
--- a/themes/material/css/color.css
+++ b/themes/material/css/color.css
@@ -21,6 +21,24 @@
     color: white;
 }
 
+/* Animations */
+
+@keyframes colorful {
+    0% { background-color: #9E9E9E; }
+    10% { background-color: #607D8B; }
+    20% { background-color: #F44336; }
+    30% { background-color: #9C27B0; }
+    40% { background-color: #3F51B5; }
+    50% { background-color: #2196F3; }
+    60% { background-color: #689F38; }
+    70% { background-color: #FF9800; }
+    80% { background-color: #FDD835; }
+    90% { background-color: #795548; }
+    100% { background-color: #9E9E9E; }
+}
+
+/* Elements */
+
 .bubble.color       , .icon.color          { color: white; background-color: #607D8B; border-color: #607D8B }
 #roster ul#rosterlist ul.contact li.dnd .chat,
 .bubble.color.red   , .icon.color.red      { color: white; background-color: #F44336; border-color: #F44336 }
@@ -78,6 +96,10 @@ body.indigo ul li span.counter,
 body.indigo .oppose .bubble,
 body.indigo main > header { background-color: #3F51B5; color: white; border-color: #3F51B5; }
 
+/* 200 */
+body.indigo .oppose .bubble a,
+body.indigo main > header a { color: #9fa8da; }
+
 body.indigo .tabs,
 body.indigo .button,
 body.indigo input[type=button],
diff --git a/themes/material/css/form.css b/themes/material/css/form.css
index e581cccf5..7c3ea56b7 100644
--- a/themes/material/css/form.css
+++ b/themes/material/css/form.css
@@ -1,6 +1,6 @@
 /* Form */
 
-form > div:not(.clear) {
+form > div:not(.clear):not(.control) {
     min-height: 9rem;
     position: relative;
     box-sizing: border-box;
@@ -24,9 +24,34 @@ form > div > textarea {
     resize: none;
     font-size: 2rem;
     font-family: sans-serif;
+    line-height: 3rem;
     box-sizing: border-box;
 }
 
+form > div > .select {
+    font-size: 2rem;
+    margin-top: 4.2rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    padding-bottom: 1rem;
+    overflow: hidden;
+}
+
+
+form > div > .select:before {
+    font-family: "Material Design Iconic Font";
+    content: "\f295";
+    display: block;
+    font-size: 4rem;
+    margin-bottom: -4rem;
+    float: right;
+    color: #B8B8B8;
+}
+
+form > div > .select select {
+    width: calc(100% + 3rem);
+    background-color: transparent;
+}
+
 form > div > input,
 form > div > textarea {
     display: block;
@@ -35,14 +60,14 @@ form > div > textarea {
     width: 100%;
     background-color: transparent;
     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-    margin-bottom: 1px;
+    margin-bottom: 1rem;
 
     overflow: hidden; /* Fixme */
 }
 
 form > div > input:focus,
 form > div > textarea:focus {
-    margin-bottom: 0;
+    margin-bottom: calc(1rem - 1px);
 }
 
 form > div > input:required {
@@ -146,6 +171,15 @@ form > div .radio > input[type="radio"]:checked + label:hover {
 
 /* Button */
 
+.button.oppose {
+    float: right;
+}
+
+.button.inactive {
+    opacity: 0.5;
+    pointer-events:none;
+}
+
 .button,
 input[type=button] {
     min-width: 8rem;
@@ -172,6 +206,7 @@ input[type=button] {
 input[type=button].flat {
     box-shadow: none;
     background-color: transparent;
+    border: 0;
 }
 
 .button:hover,
diff --git a/themes/material/css/list.css b/themes/material/css/list.css
index d53d95bda..96d126a6d 100644
--- a/themes/material/css/list.css
+++ b/themes/material/css/list.css
@@ -30,6 +30,13 @@ ul.simple > li span.icon {
     display: none;
 }
 
+ul.middle > li {
+    min-height: 7rem;
+    line-height: 5rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
 ul.thin > li {
     min-height: 5rem;
     line-height: 5rem;
@@ -87,7 +94,8 @@ ul li span {
     white-space: nowrap;
 }
 
-ul > li > div.control {
+ul > li > div.control,
+ul > li > form > div.control {
     float: right;
     text-align: right;
     min-width: 5rem;
@@ -95,12 +103,16 @@ ul > li > div.control {
     line-height: 6rem;
 }
 
+ul > li > form > div.control {
+    margin-top: 1.5rem;
+}
+
 ul.thin > li > div.control {
-    line-height: 5rem;
+    line-height: 3rem;
 }
 
 ul.thick > li > div.control {
-    line-height: 7rem;
+    line-height: 5rem;
 }
 
 ul li > div.control > * {
@@ -111,7 +123,7 @@ ul li > div.control.bottom {
     top: auto;
     bottom: 0;
 }
-
+/*
 ul.thick li > div.control.bottom {
     bottom: 2rem;
 }
@@ -120,20 +132,16 @@ ul li > div.control + form,
 ul li > div.control + p {
     padding-right: 6rem;
 }
-
-ul li div.control {
+*/
+ul li > div.control {
     float: right;
     min-height: 0;
 }
-
+/*
 ul li div.control.padded {
     padding-top: 2rem;
 }
-
-ul.thin li div.control {
-    padding-top: 1.5rem;
-}
-
+*/
 ul li span.info {
     float: right;
     margin-left: 1rem;
diff --git a/themes/material/css/style.css b/themes/material/css/style.css
index 2fd326327..817e1da99 100644
--- a/themes/material/css/style.css
+++ b/themes/material/css/style.css
@@ -44,6 +44,10 @@ body {
     clear: both;
 }
 
+.clear.padded {
+    height: 2rem;
+}
+
 body > * {
     display: block;
     height: 100%;
@@ -209,16 +213,16 @@ main > header ul li {
     font-size: 4rem;
 }
 
-main section {
+main > section {
     height: 100%;
     position: relative;
 }
 
-main header + section {
+main > header + section {
     height: calc(100% - 7rem);
 }
 
-main section > div {
+main > section > div {
     overflow-y: auto;
     display: block;
     position: relative;
@@ -228,20 +232,20 @@ main section > div {
     box-sizing: border-box;
 }
 
-main section > div:not(:last-child) {
+main > section > div:not(:last-child) {
     border-right: 1px solid gray;
 }
 
-main section > div > * {
+main > section > div > * {
     max-width: 100rem;
     margin: 0 auto;
 }
 
 /* Two blocks*/
-main section > div:first-child:nth-last-child(2) {
+main > section > div:first-child:nth-last-child(2) {
     width: 25%;
 }
-main section > div:first-child:nth-last-child(2) ~ div {
+main > section > div:first-child:nth-last-child(2) ~ div {
     width: 75%;
     position: absolute;
     top: 0;
@@ -249,7 +253,7 @@ main section > div:first-child:nth-last-child(2) ~ div {
     transition: right 0.2s ease;
 }
 
-main section > div > div.contained { /* Specific behaviour when the scroll need to be inside the block */
+main > section > div > div.contained { /* Specific behaviour when the scroll need to be inside the block */
     height: calc(100% - 9rem);
     overflow-y: scroll;
     position: absolute;
@@ -257,23 +261,24 @@ main section > div > div.contained { /* Specific behaviour when the scroll need
     width: 100%;
 }
 
-main section > div > div.contained > * {
+main > section > div > div.contained > * {
     max-width: 100rem;
     margin: 0 auto;
 }
 
 @media screen and (max-width: 1024px) {
     /* Two blocks*/
-    main section > div:first-child:nth-last-child(2) {
+    main > section > div:first-child:nth-last-child(2) {
         width: 100%;
     }
-    main section > div:first-child:nth-last-child(2) ~ div {
+    main > section > div:first-child:nth-last-child(2) ~ div {
         background-color: white;
         width: 100%;
         right: -100%;
+        z-index: 1;
     }
 
-    main section > div:first-child:nth-last-child(2) ~ div.enabled {
+    main > section > div:first-child:nth-last-child(2) ~ div.enabled {
         right: 0;
     }
 
@@ -402,55 +407,64 @@ header.big p {
 */
 /* Dialog */
 
-.dialog:empty {
-    display: none;
-}
-
 .dialog {
     position: fixed;
-    top: 15%;
+    top: 5%;
     left: 50%;
     background-color: white;
     height: initial;
-    max-height: 70%;
-    width: 40rem;
-    margin-left: -20rem;
+    max-height: 90%;
+    width: 45rem;
+    margin-left: -22.5rem;
+
+    overflow: hidden;
     
     box-shadow: 0 2.5rem 5rem rgba(0,0,0,0.30), 0 2rem 1.5rem rgba(0,0,0,0.22);
     border-radius: 0.25rem;
     z-index: 3;
     box-sizing: border-box;
+}
 
-    height: 100%;
-    
-    padding-top: 3rem;
-    padding-bottom: 7rem;
+.dialog:empty {
+    display: none;
+}
+
+.dialog.scroll {
+    height: 90%;
 }
 
 .dialog > section {
-    margin: 0 3rem;
     height: 100%;
     overflow-y: auto;
     position: relative;
 }
 
-.dialog > section:hover {
+.dialog > section > *:first-child {
+    margin-top: 2rem;
 }
 
-.dialog > section ul li {
+.dialog > section > *:last-child {
+    margin-bottom: 2rem;
+}
+
+.dialog > section > *:not(ul) {
+    padding: 0 2rem;
+}
+/*
+.dialog > div > section ul li {
     padding-right: 0;
     padding-left: 7rem;
 }
 
-.dialog > section ul li.subheader,
-.dialog > section ul.simple li {
+.dialog > div > section ul li.subheader,
+.dialog > div > section ul.simple li {
     padding-left: 0;
 }
 
-.dialog > section ul li .icon {
+.dialog > div > section ul li .icon {
     left: 1rem;
 }
-
+*/
 @media screen and (max-width: 600px) {
     .dialog {
         width: 90%;
@@ -467,10 +481,9 @@ header.big p {
 /* Actions bar */
 
 .actions {
-    margin-bottom: 7rem;
+    padding-bottom: 7rem;
 }
 
-
 .actions > div:last-child {
     background-color: white;
     width: 100%;
@@ -478,7 +491,7 @@ header.big p {
     text-align: right;
     bottom: 0;
     padding: 0.5rem 2rem;
-    position: relative;
+    position: absolute;
     border-top: 1px solid rgba(0, 0, 0, 0.12);
 }
 
@@ -494,6 +507,10 @@ header.big p {
     padding: 0;
 }
 
+.actions.scroll > section {
+    margin-bottom: 10rem;
+}
+
 main section > div:first-child:nth-last-child(2) ~ div .actions.fixed > div:last-child  {
     max-width: calc(75% - 5rem);
 }
@@ -563,6 +580,35 @@ main section > div:first-child:nth-last-child(2) ~ div .actions.fixed > div:last
     }
 }
 
+
+/* Placeholder */
+
+.placeholder {
+    text-align: center;
+    font-size: 1.2em;
+    max-width: 500px;
+    margin: 0 auto;
+}
+
+.placeholder p {
+    text-align: center;
+}
+
+.placeholder.icon {
+    background-image: url(../img/icons/placeholder/chat.png);
+    background-size: 35%;
+    padding-top: 12em;
+    background-repeat: no-repeat;
+    background-position: center 1em;
+}
+
+.placeholder.icon.newspaper { background-image: url(../img/icons/placeholder/newspaper.png); }
+.placeholder.icon.media     { background-image: url(../img/icons/placeholder/media.png); }
+.placeholder.icon.explore   { background-image: url(../img/icons/placeholder/explore.png); }
+.placeholder.icon.plane     { background-image: url(../img/icons/placeholder/plane.png); }
+.placeholder.icon.file      { background-image: url(../img/icons/placeholder/file.png); }
+.placeholder.icon.clipboard { background-image: url(../img/icons/placeholder/clipboard.png); }
+
 /* Definition list */
 
 dl dt,