diff --git a/sources/app/assets/js/movim_tpl.js b/sources/app/assets/js/movim_tpl.js
index 52fd3db..aab8399 100644
--- a/sources/app/assets/js/movim_tpl.js
+++ b/sources/app/assets/js/movim_tpl.js
@@ -57,13 +57,32 @@ var MovimTpl = {
     init : function() {
         if(document.getElementById('back') != null)
             document.getElementById('back').style.display = 'none';
+
+        MovimTpl.scrollHeaders();
+    },
+    scrollHeaders : function() {
+        var headers = document.querySelectorAll('main > section > div > header');
+
+        for(var i = 0, len = headers.length; i < len; ++i ) {
+            var header = headers[i];
+
+            header.parentNode.onscroll = function() {
+                var header = this.querySelector('header');
+                if(this.scrollTop == 0) {
+                    movim_remove_class(header, 'scroll');
+                } else {
+                    movim_add_class(header, 'scroll');
+                }
+            }
+        }
     },
     showPanel : function() {
         movim_add_class('main section > div:first-child:nth-last-child(2) ~ div', 'enabled');
         MovimTpl.scrollPanelTop();
+        //MovimTpl.scrollHeaders();
     },
     hidePanel : function() {
-        Header_ajaxReset(CURRENT_PAGE);
+        //Header_ajaxReset(CURRENT_PAGE);
         var selector = 'main section > div:first-child:nth-last-child(2) ~ div';
         var inner = document.querySelector(selector + ' div');
 
diff --git a/sources/app/assets/js/movim_websocket.js b/sources/app/assets/js/movim_websocket.js
index 4555e8d..7e084b4 100644
--- a/sources/app/assets/js/movim_websocket.js
+++ b/sources/app/assets/js/movim_websocket.js
@@ -174,7 +174,7 @@ var MovimWebsocket = {
         }
 
         // generate the interval to a random number between 0 and the maxInterval determined from above
-        return Math.random() * maxInterval; 
+        return Math.random() * maxInterval;
     }
 }
 
diff --git a/sources/app/helpers/StringHelper.php b/sources/app/helpers/StringHelper.php
index eca5302..29045ee 100644
--- a/sources/app/helpers/StringHelper.php
+++ b/sources/app/helpers/StringHelper.php
@@ -82,7 +82,7 @@ function addHFR($string) {
                 $num = '';
                 if(count($match) == 3)
                     $num = $match[2].'/';
-                return '<img class="hfr" title="'.$match[0].'" alt="'.$match[0].'" src="http://forum-images.hardware.fr/images/perso/'.$num.$match[1].'.gif">';
+                return '<img class="hfr" title="'.$match[0].'" alt="'.$match[0].'" src="http://forum-images.hardware.fr/images/perso/'.$num.$match[1].'.gif"/>';
             }, $string
     );
 }
@@ -335,7 +335,7 @@ function stripTags($string)
 function purifyHTML($string)
 {
     $config = \HTMLPurifier_Config::createDefault();
-    $config->set('HTML.Doctype', 'HTML 4.01 Transitional');
+    $config->set('HTML.Doctype', 'XHTML 1.1');
     $config->set('Cache.SerializerPath', '/tmp');
     $config->set('HTML.DefinitionID', 'html5-definitions');
     $config->set('HTML.DefinitionRev', 1);
diff --git a/sources/app/models/postn/Postn.php b/sources/app/models/postn/Postn.php
index a5088eb..3806193 100644
--- a/sources/app/models/postn/Postn.php
+++ b/sources/app/models/postn/Postn.php
@@ -221,7 +221,7 @@ class Postn extends Model {
     }
 
     private function typeIsPicture($type) {
-        return in_array($type, array('image/jpeg', 'image/png', 'image/jpg'));
+        return in_array($type, array('image/jpeg', 'image/png', 'image/jpg', 'image/gif'));
     }
 
     private function typeIsLink($type) {
diff --git a/sources/app/views/chat.tpl b/sources/app/views/chat.tpl
index 6876e2f..4f27dbc 100644
--- a/sources/app/views/chat.tpl
+++ b/sources/app/views/chat.tpl
@@ -1,6 +1,6 @@
 <nav class="color dark">
-    <?php $this->widget('Navigation');?>
     <?php $this->widget('Presence');?>
+    <?php $this->widget('Navigation');?>
 </nav>
 
 <main>
diff --git a/sources/app/views/conf.tpl b/sources/app/views/conf.tpl
index f7323b2..20e40ca 100644
--- a/sources/app/views/conf.tpl
+++ b/sources/app/views/conf.tpl
@@ -1,6 +1,6 @@
 <nav class="color dark">
-    <?php $this->widget('Navigation');?>
     <?php $this->widget('Presence');?>
+    <?php $this->widget('Navigation');?>
 </nav>
 
 <main>
diff --git a/sources/app/views/contact.tpl b/sources/app/views/contact.tpl
index 66a470a..50aabf8 100644
--- a/sources/app/views/contact.tpl
+++ b/sources/app/views/contact.tpl
@@ -1,16 +1,16 @@
 <nav class="color dark">
-    <?php $this->widget('Navigation');?>
     <?php $this->widget('Presence');?>
+    <?php $this->widget('Navigation');?>
 </nav>
 
 <main>
-    <?php $this->widget('Header'); ?>
+    <?php //$this->widget('Header'); ?>
     <section>
-        <div>
+        <div style="background-color: #EEE;">
             <?php $this->widget('Notifs');?>
             <?php $this->widget('Roster');?>
         </div>
-        <div id="contact_widget" class="card shadow">
+        <div id="contact_widget">
             <?php $this->widget('Contact');?>
         </div>
     </section>
diff --git a/sources/app/views/group.tpl b/sources/app/views/group.tpl
index 30d3d08..7fffd66 100644
--- a/sources/app/views/group.tpl
+++ b/sources/app/views/group.tpl
@@ -1,8 +1,8 @@
 <?php $this->widget('Upload'); ?>
 
 <nav class="color dark">
-    <?php $this->widget('Navigation');?>
     <?php $this->widget('Presence');?>
+    <?php $this->widget('Navigation');?>
 </nav>
 
 <main>
diff --git a/sources/app/views/help.tpl b/sources/app/views/help.tpl
index 471ff7d..f6f61b7 100644
--- a/sources/app/views/help.tpl
+++ b/sources/app/views/help.tpl
@@ -1,6 +1,6 @@
 <nav class="color dark">
-    <?php $this->widget('Navigation');?>
     <?php $this->widget('Presence');?>
+    <?php $this->widget('Navigation');?>
 </nav>
 
 <main>
diff --git a/sources/app/views/login.tpl b/sources/app/views/login.tpl
index 3d0b3e3..a695169 100644
--- a/sources/app/views/login.tpl
+++ b/sources/app/views/login.tpl
@@ -1,6 +1,6 @@
 <?php $this->widget('Presence'); ?>
 <main>
-    <?php $this->widget('Header');?>
+    <?php //$this->widget('Header');?>
     <section>
         <div>
             <?php $this->widget('Login'); ?>
diff --git a/sources/app/views/main.tpl b/sources/app/views/main.tpl
index ec6fd6b..979bc63 100644
--- a/sources/app/views/main.tpl
+++ b/sources/app/views/main.tpl
@@ -1,10 +1,10 @@
 <nav class="color dark">
-    <?php $this->widget('Navigation');?>
     <?php $this->widget('Presence');?>
+    <?php $this->widget('Navigation');?>
 </nav>
 
 <main>
-    <?php $this->widget('Header');?>
+    <?php //$this->widget('Header');?>
     <section>
         <?php $this->widget('Hello');?>
     </section>
diff --git a/sources/app/views/news.tpl b/sources/app/views/news.tpl
index 240a8e5..f797dfa 100644
--- a/sources/app/views/news.tpl
+++ b/sources/app/views/news.tpl
@@ -2,12 +2,12 @@
 <?php $this->widget('Upload');?>
 
 <nav class="color dark">
-    <?php $this->widget('Navigation');?>
     <?php $this->widget('Presence');?>
+    <?php $this->widget('Navigation');?>
 </nav>
 
 <main>
-    <?php $this->widget('Header');?>
+    <?php //$this->widget('Header');?>
     <section>
         <?php $this->widget('Menu');?>
         <?php $this->widget('Post');?>
diff --git a/sources/app/views/page.tpl b/sources/app/views/page.tpl
index f8842e6..2e85a45 100644
--- a/sources/app/views/page.tpl
+++ b/sources/app/views/page.tpl
@@ -19,7 +19,9 @@
 
     <?php
         $this->addCss('style.css');
-        $this->addCss('list.css');
+        $this->addCss('header.css');
+        //$this->addCss('list.css');
+        $this->addCss('listn.css');
         $this->addCss('grid.css');
         $this->addCss('article.css');
         $this->addCss('form.css');
diff --git a/sources/app/widgets/About/about.tpl b/sources/app/widgets/About/about.tpl
index 95995e7..b009161 100644
--- a/sources/app/widgets/About/about.tpl
+++ b/sources/app/widgets/About/about.tpl
@@ -1,31 +1,37 @@
 <div class="tabelem" title="{$c->__('page.about')}" id="about">
     <h2 class="padded_top_bottom">Movim {$version} - {$c->__('page.about')} </h2>
 
-    <ul class="thick divided">
-        <li class="condensed">
-            <span class="icon bubble color green"><i class="zmdi zmdi-info"></i></span>
+    <ul class="list thick divided">
+        <li>
+            <span class="primary icon bubble color green"><i class="zmdi zmdi-info"></i></span>
+            <p>{$c->__('page.about')}</p>
             <p class="all">{$c->__('about.info')} <a href="http://www.gnu.org/licenses/agpl-3.0.html">GNU Affero General Public License v3</a>.</p>
         </li>
-        <li class="subheader">{$c->__('about.thanks')}</li>
-        <li class="condensed">
-            <span class="icon bubble color red"><i class="zmdi zmdi-code"></i></span>
-            <span>{$c->__('about.developers')}</span>
+        <li class="subheader">
+            <p>{$c->__('about.thanks')}</p>
+        </li>
+        <li>
+            <span class="primary icon bubble color red"><i class="zmdi zmdi-code"></i></span>
+            <p>{$c->__('about.developers')}</p>
             <p class="all">
                 <a href="http://edhelas.movim.eu/">Jaussoin Timothée aka edhelas</a><br/>
                 <a href="https://launchpad.net/~nodpounod">Ho Christine aka nodpounod</a><br/>
                 <a href="https://etenil.net/">Pasquet Guillaume aka Etenil</a>
             </p>
         </li>
-        <li class="condensed">
-            <span class="icon bubble color purple"><i class="zmdi zmdi-flag"></i></span>
-            <span>{$c->__('about.translators')}</span>
+        <li>
+            <span class="primary icon bubble color purple"><i class="zmdi zmdi-flag"></i></span>
+            <p>{$c->__('about.translators')}</p>
             <p>
                 {$c->__('about.translators_text')} <a href="https://www.transifex.com/projects/p/movim/">www.transifex.com/projects/p/movim/</a>
             </p>
         </li>
-        <li class="subheader">{$c->__('about.software')}</li>
-        <li class="condensed">
-            <span class="icon bubble color orange"><i class="zmdi zmdi-archive"></i></span>
+        <li class="subheader">
+            <p>{$c->__('about.software')}</p>
+        </li>
+        <li>
+            <span class="primary icon bubble color orange"><i class="zmdi zmdi-archive"></i></span>
+            <p>{$c->__('about.software')}</p>
             <p class="all">
                Modl - Movim DB Layer - <a href="https://github.com/edhelas/modl">GitHub Modl</a> under AGPLv3<br/>
                Moxl - Movim XMPP Library - <a href="https://github.com/edhelas/moxl">GitHub Moxl</a> under AGPLv3<br/>
@@ -39,17 +45,17 @@
                WebSocket and Daemon engine - ReactPHP -  <a href="http://socketo.me/">socketo.me</a> ©Chris Boden<br/>
             </p>
         </li>
-        <li class="condensed">
-            <span class="icon bubble color brown"><i class="zmdi zmdi-mood"></i></span>
-            <span>{$c->__('about.resources')}</span>
+        <li>
+            <span class="primary icon bubble color brown"><i class="zmdi zmdi-mood"></i></span>
+            <p>{$c->__('about.resources')}</p>
             <p class="all">
                 Material Design Iconic Font <a href="http://zavoloklom.github.io/material-design-iconic-font/icons.html">by Google and Sergey Kupletsky</a> under SIL OFL 1.1<br/>
                 Twemoji <a href="http://twitter.github.io/twemoji/">by Twitter</a> under MIT and CC-BY<br/>
             </p>
         </li>
-        <li class="condensed">
-            <span class="icon bubble color indigo"><i class="zmdi zmdi-import-export"></i></span>
-            <span>{$c->__('about.api')}</span>
+        <li>
+            <span class="primary icon bubble color indigo"><i class="zmdi zmdi-import-export"></i></span>
+            <p>{$c->__('about.api')}</p>
             <p class="all">
                 OpenStreetMap - Nominatim <a href="http://nominatim.openstreetmap.org/">nominatim.openstreetmap.org</a><br/>
                 Last.fm API - <a href="http://www.last.fm/api">www.last.fm/api</a><br/>
diff --git a/sources/app/widgets/Account/account.tpl b/sources/app/widgets/Account/account.tpl
index 5f62ed3..02a1e43 100644
--- a/sources/app/widgets/Account/account.tpl
+++ b/sources/app/widgets/Account/account.tpl
@@ -1,25 +1,29 @@
 <div class="tabelem" title="{$c->__('account.title')}" id="account_widget">
     {if="isset($gateway)"}
-    <ul class="active middle divided">
-        <li class="subheader">{$c->__('account.gateway_title')}</li>
+    <ul class="list active middle divided">
+        <li class="subheader">
+            <p>{$c->__('account.gateway_title')}</p>
+        </li>
         {loop="$gateway"}
-        <li class="condensed action" onclick="Account_ajaxGetRegistration('{$value->node}')">
-            <div class="action">
-                <i class="zmdi zmdi-chevron-right"></i>
-            </div>
-            <span class="icon">
+        <li onclick="Account_ajaxGetRegistration('{$value->node}')">
+            <span class="primary icon">
                 <i class="zmdi zmdi-swap"></i>
             </span>
-            <span>{$value->name}</span>
+            <span class="control icon gray">
+                <i class="zmdi zmdi-chevron-right"></i>
+            </span>
+            <p>{$value->name}</p>
             <p>{$value->node}</p>
         </li>
         {/loop}
     </ul>
     {/if}
-    <ul class="middle active divided ">
-        <li class="subheader">{$c->__('account.password_change_title')}</li>
+    <ul class="list middle active divided ">
+        <li class="subheader">
+            <p>{$c->__('account.password_change_title')}</p>
+        </li>
         <li>
-            <span class="icon gray">
+            <span class="primary icon gray">
                 <i class="zmdi zmdi-key"></i>
             </span>
             <form name="password" class="">
@@ -38,15 +42,17 @@
                 </a>
             </form>
         </li>
-        <li class="subheader">{$c->__('account.delete_title')}</li>
-        <li class="action" onclick="Account_ajaxRemoveAccount()">
-            <span class="icon red">
+        <li class="subheader">
+            <p>{$c->__('account.delete_title')}</p>
+        </li>
+        <li onclick="Account_ajaxRemoveAccount()">
+            <span class="primary icon red">
                 <i class="zmdi zmdi-delete"></i>
             </span>
-            <div class="action">
+            <span class="control icon gray">
                 <i class="zmdi zmdi-chevron-right"></i>
-            </div>
-            <span>{$c->__('account.delete')}</span>
+            </span>
+            <p class="normal">{$c->__('account.delete')}</p>
         </li>
     </ul>
 </div>
diff --git a/sources/app/widgets/AdHoc/_adhoc_list.tpl b/sources/app/widgets/AdHoc/_adhoc_list.tpl
index 4c60fec..6b3eff7 100644
--- a/sources/app/widgets/AdHoc/_adhoc_list.tpl
+++ b/sources/app/widgets/AdHoc/_adhoc_list.tpl
@@ -1,14 +1,16 @@
-<ul class="divided active spaced">
-    <li class="subheader">{$c->__('adhoc.title')}</li>
+<ul class="list middle divided active spaced">
+    <li class="subheader">
+        <p>{$c->__('adhoc.title')}</p>
+    </li>
     {loop="$list"}
-        <li class="action" data-node="{$value->attributes()->node}" data-jid="{$value->attributes()->jid}">
-            <span class="icon gray">
+        <li data-node="{$value->attributes()->node}" data-jid="{$value->attributes()->jid}">
+            <span class="primary icon gray">
                 <i class="zmdi {$c->getIcon((string)$value->attributes()->node)}"></i>
             </span>
-            <div class="action">
+            <span class="control icon gray">
                 <i class="zmdi zmdi-chevron-right"></i>
-            </div>
-            <span>{$value->attributes()->name}</span>
+            </span>
+            <p class="normal">{$value->attributes()->name}</p>
         </li>
     {/loop}
 </ul>
diff --git a/sources/app/widgets/AdminDB/admindb.tpl b/sources/app/widgets/AdminDB/admindb.tpl
index 05b1fea..a75b455 100644
--- a/sources/app/widgets/AdminDB/admindb.tpl
+++ b/sources/app/widgets/AdminDB/admindb.tpl
@@ -1,45 +1,47 @@
 <div id="admindb" class="tabelem" title="{$c->__('db.legend')}">
-    <ul class="flex large">
-        <li class="subheader">{$c->__('db.legend')}</li>
+    <ul class="list flex large">
+        <li class="subheader">
+            <p>{$c->__('db.legend')}</p>
+        </li>
 
         {if="!$connected"}
-            <li class="block large condensed">
-                <span class="icon bubble color red">
+            <li class="block large">
+                <span class="primary icon bubble color red">
                     <i class="zmdi zmdi-code-setting"></i>
                 </span>
-                <span>{$c->__('db.connect_error')}</span>
+                <p>{$c->__('db.connect_error')}</p>
                 <p>{$errors}</p>
-            </li> 
+            </li>
         {else}
             <li class="block large">
-                <span class="icon bubble color green">
+                <span class="primary icon bubble color green">
                     <i class="zmdi zmdi-code-setting"></i>
                 </span>
-                <span>{$c->__('db.connect_success')}</span>
+                <p class="normal">{$c->__('db.connect_success')}</p>
             </li>
             {if="null !== $infos"}
-                <li class="block large condensed action">
-                    <div class="action">
-                        <a class="button" onclick="{$db_update}"> {$c->__('button.update')}</a>
-                    </div>
-                    <span class="icon bubble color orange">
+                <li class="block large">
+                    <span class="primary icon bubble color orange">
                         <i class="zmdi zmdi-refresh"></i>
                     </span>
-                    <span>{$c->__('db.update')}</span>
+                    <span class="control">
+                        <a class="button" onclick="{$db_update}"> {$c->__('button.update')}</a>
+                    </span>
+                    <p>{$c->__('db.update')}</p>
                     {loop="$infos"}
                         <p>{$value}</p>
                     {/loop}
                 </li>
             {else}
                 <li class="block large">
-                    <span class="icon bubble color green">
-                        <i class="zmdi zmdi-refresh"></i> 
+                    <span class="primary icon bubble color green">
+                        <i class="zmdi zmdi-refresh"></i>
                     </span>
-                    <span>{$c->__('db.up_to_date')}</span>
+                    <p class="normal">{$c->__('db.up_to_date')}</p>
                 </li>
             {/if}
         {/if}
-    </ul> 
+    </ul>
 
     <form class="flex padded_top_bottom">
         <div class="block">
diff --git a/sources/app/widgets/AdminLogin/adminlogin.tpl b/sources/app/widgets/AdminLogin/adminlogin.tpl
index 5a8f1fa..4c5f98d 100644
--- a/sources/app/widgets/AdminLogin/adminlogin.tpl
+++ b/sources/app/widgets/AdminLogin/adminlogin.tpl
@@ -1,5 +1,5 @@
 <div>
-    <ul class="simple thick">
+    <ul class="list thick">
         <li>
             <form method="post">
                     <div>
@@ -10,11 +10,11 @@
                         <input type="password" name="password" class="content" placeholder="{$c->__('input.password')}">
                         <label for="password">{$c->__('input.password')}</label>
                     </div>
-                    
-                    <input 
-                        class="button oppose color" 
-                        type="submit" 
-                        name="submit" 
+
+                    <input
+                        class="button oppose color"
+                        type="submit"
+                        name="submit"
                         value="{$c->__('button.validate')}" />
             </form>
         </li>
diff --git a/sources/app/widgets/AdminMain/adminmain.tpl b/sources/app/widgets/AdminMain/adminmain.tpl
index 91d63f6..c80f4ac 100644
--- a/sources/app/widgets/AdminMain/adminmain.tpl
+++ b/sources/app/widgets/AdminMain/adminmain.tpl
@@ -68,9 +68,9 @@
         <label for="xmppwhitelist">{$c->__('whitelist.label')}</label>
     </div>
 
-    <ul class="thick">
-        <li class="condensed">
-            <span class="icon bubble color blue">
+    <ul class="list thick">
+        <li>
+            <span class="primary icon bubble color blue">
                 <i class="zmdi zmdi-info"></i>
             </span>
             <p>{$c->__('whitelist.info1')}</p>
@@ -92,12 +92,12 @@
         <label for="info">{$c->__('information.label')}</label>
     </div>
 
-    <ul class="thick">
-        <li class="condensed">
-            <span class="icon bubble color blue">
+    <ul class="list thick">
+        <li>
+            <span class="primary icon bubble color blue">
                 <i class="zmdi zmdi-info"></i>
             </span>
-            <span>{$c->__('information.info1')}</span>
+            <p>{$c->__('information.info1')}</p>
             <p>{$c->__('information.info2')}</p>
         </li>
     </ul>
diff --git a/sources/app/widgets/Api/api.tpl b/sources/app/widgets/Api/api.tpl
index 6dbd95b..561edf0 100644
--- a/sources/app/widgets/Api/api.tpl
+++ b/sources/app/widgets/Api/api.tpl
@@ -1,69 +1,71 @@
 <div id="api" class="tabelem paddedtop" title="{$c->__("api.title")}">
-    <ul>
-        <li class="subheader">{$infos}</li>
+    <ul class="list">
+        <li class="subheader">
+            <p>{$infos}</p>
+        </li>
 
     {if="isset($json)"}
         {if="$json->status == 200"}
             <li>
-                <span class="icon bubble color green">
+                <span class="primary icon bubble color green">
                     <i class="zmdi zmdi-cloud"></i>
                 </span>
                 {if="!$unregister_status"}
-                    <div class="action">
+                    <span class="control">
                         <a class="button oppose" onclick="{$unregister}">
                             {$c->__('button.unregister')}
                         </a>
-                    </div>
+                    </span>
                 {/if}
-                <span>{$c->__('api.registered')}</span>
+                <p class="normal">{$c->__('api.registered')}</p>
             </li>
 
             {if="$json->pod->activated"}
                 <li>
-                    <span class="icon bubble color green">
+                    <span class="primary icon bubble color green">
                         <i class="zmdi zmdi-cloud"></i>
                     </span>
-                    <span>{$c->__('api.validated')}</span>
+                    <p class="normal">{$c->__('api.validated')}</p>
                 </li>
             {else}
                 <li>
-                    <span class="icon bubble color gray">
+                    <span class="primary icon bubble color gray">
                         <i class="zmdi zmdi-cloud-off"></i>
                     </span>
-                    <span>{$c->__('api.wait')}</span>
+                    <p class="normal">{$c->__('api.wait')}</p>
                 </li>
             {/if}
 
             {if="$unregister_status"}
                 <li>
-                    <div class="action">
+                    <span class="control">
                         <a class="button oppose" onclick="{$unregister}">
                             {$c->__('button.reset')}
                         </a>
-                    </div>
-                    <span>{$c->__('api.unregister')}</span>
+                    </span>
+                    <p class="normal">{$c->__('api.unregister')}</p>
                 </li>
             {/if}
             <script type="text/javascript">AdminTest.enableAPI();</script>
         {else}
             <li>
-                <span class="icon bubble color blue">
+                <span class="primary icon bubble color blue">
                     <i class="zmdi zmdi-cloud-off"></i>
                 </span>
-                <div class="action">
+                <span class="control">
                     <a class="button oppose" onclick="{$register}">
                         {$c->__('button.register')}
                     </a>
-                </div>
-                <span>{$c->__('api.register')}</span>
+                </span>
+                <p class="normal">{$c->__('api.register')}</p>
             </li>
         {/if}
     {else}
         <li>
-            <span class="icon bubble color gray">
+            <span class="primary icon bubble color gray">
                 <i class="zmdi zmdi-cloud-off"></i>
             </span>
-            {$c->__('api.error')}
+            <p class="normal">{$c->__('api.error')}</p>
         </li>
     {/if}
     </ul>
diff --git a/sources/app/widgets/Avatar/_avatar_form.tpl b/sources/app/widgets/Avatar/_avatar_form.tpl
index 1233cbd..732557a 100644
--- a/sources/app/widgets/Avatar/_avatar_form.tpl
+++ b/sources/app/widgets/Avatar/_avatar_form.tpl
@@ -24,28 +24,27 @@
         </div>
     </div>
     <div class="block">
-        <ul class="thick divided">
-            <li class="condensed">
-                <span class="icon bubble color green">
+        <ul class="list thick divided">
+            <li>
+                <span class="primary icon bubble color green">
                     <i class="zmdi zmdi-attachment-alt"></i>
                 </span>
-                <span>{$c->__('avatar.file')}</span>
+                <p>{$c->__('avatar.file')}</p>
                 <p><input type="file" onchange="Avatar.file(this.files);"></p>
             </li>
             {if="isset($gravatar)"}
-            <li class="condensed action">
-                <div class="action">
+            <li>
+                <span class="primary icon bubble color blue">
+                    <img src="http://www.gravatar.com/avatar/{$gravatar->entry[0]->hash}?s=50" />
+                </span>
+                <p>Gravatar</p>
+                <p>We found a Gravatar picture<br />
                     <a
                         onclick="Avatar.preview('data:image/jpeg;base64,{$gravatar_bin}')"
                         class="button flat">
                         {$c->__('avatar.use_it')}
                     </a>
-                </div>
-                <span class="icon bubble color blue">
-                    <img src="http://www.gravatar.com/avatar/{$gravatar->entry[0]->hash}?s=50" />
-                </span>
-                <span>Gravatar</span>
-                <p>We found a Gravatar picture</p>
+                </p>
             </li>
             {/if}
         </ul>
diff --git a/sources/app/widgets/Blog/blog.tpl b/sources/app/widgets/Blog/blog.tpl
index 7d6fcfb..c869205 100644
--- a/sources/app/widgets/Blog/blog.tpl
+++ b/sources/app/widgets/Blog/blog.tpl
@@ -1,8 +1,11 @@
 <div class="card shadow" title="{$c->__('page.feed')}" id="blog" >
-    <ul class="thick">
+    <ul class="list thick">
         {if="$mode == 'blog'"}
-        <li class="action {if="isset($contact->description)"}condensed{/if}">
-            <div class="action">
+        <li>
+            <span class="primary icon gray">
+                <i class="zmdi zmdi-edit"></i>
+            </span>
+            <span class="control icon">
                 <a
                     href="{$c->route('feed', array($contact->jid))}"
                     target="_blank"
@@ -10,30 +13,27 @@
                 >
                     <i class="zmdi zmdi-portable-wifi"></i>
                 </a>
-            </div>
-            <span class="icon gray">
-                <i class="zmdi zmdi-edit"></i>
             </span>
             {if="$contact"}
-            <h2>
+            <p>
                 <a href="{$c->route('blog', array($contact->jid))}">
                     {$c->__('blog.title', $contact->getTrueName())}
                 </a>
-            </h2>
+            </p>
             {else}
-            <h2>
+            <p>
                 <a href="{$c->route('blog', array($contact->jid))}">
                     {$c->__('page.blog')}
                 </a>
-            </h2>
+            </p>
             {/if}
             {if="isset($contact->description)"}
                 <p>{$contact->description}</p>
             {/if}
         </li>
         {elseif="$mode == 'tag'"}
-        <li class="condensed">
-            <span class="icon gray">
+        <li>
+            <span class="primary icon gray">
                 <i class="zmdi zmdi-tag"></i>
             </span>
             <h2>
@@ -43,37 +43,37 @@
             </h2>
         </li>
         {else}
-        <li class="condensed action">
-            <div class="action">
-                <a
-                    href="{$c->route('feed', array($server, $node))}"
-                    target="_blank"
-                >
-                    <i class="zmdi zmdi-portable-wifi"></i> Atom
-                </a>
-            </div>
-            <span class="icon gray">
-                <i class="zmdi zmdi-pages"></i>
-            </span>
-            <h2>
-                <a href="{$c->route('node', array($server, $node))}">
-                    {if="$item != null"}
-                        {if="$item->name"}
-                            {$item->name}
-                        {else}
-                            {$item->node}
+            <li>
+                <span class="primary icon gray">
+                    <i class="zmdi zmdi-pages"></i>
+                </span>
+                <span class="control icon">
+                    <a
+                        href="{$c->route('feed', array($server, $node))}"
+                        target="_blank"
+                    >
+                        <i class="zmdi zmdi-portable-wifi"></i>
+                    </a>
+                </span>
+                <p>
+                    <a href="{$c->route('node', array($server, $node))}">
+                        {if="$item != null"}
+                            {if="$item->name"}
+                                {$item->name}
+                            {else}
+                                {$item->node}
+                            {/if}
                         {/if}
-                    {/if}
-                </a>
-            </h2>
-            {if="$item->description"}
-                <h4 title="{$item->description|strip_tags}">
-                    {$item->description|strip_tags}
-                </h4>
-            {else}
-                <h4>{$item->server}</h4>
-            {/if}
-        </li>
+                    </a>
+                </p>
+                {if="$item->description"}
+                    <p title="{$item->description|strip_tags}">
+                        {$item->description|strip_tags}
+                    </p>
+                {else}
+                    <p>{$item->server}</p>
+                {/if}
+            </li>
         {/if}
     </ul>
 
@@ -82,36 +82,34 @@
     {/loop}
     {if="isset($more)"}
         <article>
-            <ul class="active">
+            <ul class="list active">
                 {if="$mode == 'blog'"}
                 <a href="{$c->route('blog', array($contact->jid, $more))}">
                 {else}
                 <a href="{$c->route('group', array($server, $node, $more))}">
                 {/if}
                     <li id="history" class="block large">
-                        <span class="icon"><i class="zmdi zmdi-time-restore"></i></span>
-                        <span>{$c->__('post.older')}</span>
+                        <span class="primary icon"><i class="zmdi zmdi-time-restore"></i></span>
+                        <p class="normal line">{$c->__('post.older')}</p>
                     </li>
                 </a>
             </ul>
         </article>
     {/if}
     {if="$posts == null"}
-        <ul class="simple thick">
+        <ul class="list simple thick">
             <li>
-                <span>{$c->__('blog.empty')}</span>
+                <p>{$c->__('blog.empty')}</p>
             </li>
         </ul>
     {/if}
 
-    <ul>
+    <ul class="list">
         <li>
-            <a target="_blank" href="https://movim.eu">
-                <span class="icon">
-                    <i class="zmdi zmdi-cloud-outline"></i>
-                </span>
-                <span>Powered by Movim</span>
-            </a>
+            <span class="primary icon gray">
+                <i class="zmdi zmdi-cloud-outline"></i>
+            </span>
+            <p class="center normal"><a target="_blank" href="https://movim.eu">Powered by Movim</a></p>
         </li>
     </ul>
 </div>
diff --git a/sources/app/widgets/Chat/_chat.tpl b/sources/app/widgets/Chat/_chat.tpl
index d925384..e3637b0 100644
--- a/sources/app/widgets/Chat/_chat.tpl
+++ b/sources/app/widgets/Chat/_chat.tpl
@@ -1,17 +1,17 @@
 <div id="{$jid}_discussion" class="contained">
     <section id="{$jid}_messages">
-        <ul class="{if="$muc"}thin simple{else}middle{/if}" id="{$jid}_conversation"></ul>
+        <ul class="list {if="$muc"}thin simple{else}thick{/if}" id="{$jid}_conversation"></ul>
     </section>
 </div>
 <div class="chat_box">
-    <ul class="thin">
-        <li class="action">
-            <span class="icon gray emojis_open" onclick="Chat_ajaxSmiley()">
+    <ul class="list thin">
+        <li>
+            <span class="primary icon gray emojis_open" onclick="Chat_ajaxSmiley()">
                 <img alt=":smiley:" class="emoji large" src="{$c->getSmileyPath('1f603')}">
             </span>
-            <div class="action" data-jid="{$jid}" onclick="Chat.sendMessage(this.dataset.jid, {if="$muc"}true{else}false{/if})">
+            <span class="control icon gray" data-jid="{$jid}" onclick="Chat.sendMessage(this.dataset.jid, {if="$muc"}true{else}false{/if})">
                 <i class="zmdi zmdi-mail-send"></i>
-            </div>
+            </span>
             <form>
                 <div>
                      <textarea
diff --git a/sources/app/widgets/Chat/_chat_bubble.tpl b/sources/app/widgets/Chat/_chat_bubble.tpl
index be17652..d99c90e 100644
--- a/sources/app/widgets/Chat/_chat_bubble.tpl
+++ b/sources/app/widgets/Chat/_chat_bubble.tpl
@@ -1,21 +1,21 @@
 <li {if="$me"}class="oppose"{/if}>
     {$url = $contact->getPhoto('s')}
     {if="$url"}
-        {if="$me == null"}<a href="{$c->route('contact', $contact->jid)}">{/if}
-            <span class="icon bubble">
+        <span class="{if="$me"}control{else}primary{/if} icon bubble">
+            {if="$me == null"}<a href="{$c->route('contact', $contact->jid)}">{/if}
                 <img src="{$url}">
-            </span>
-        {if="$me == null"}</a>{/if}
+            {if="$me == null"}</a>{/if}
+        </span>
     {else}
-        {if="$me == null"}<a href="{$c->route('contact', $contact->jid)}">{/if}
-            <span class="icon bubble color {$contact->jid|stringToColor}">
+        <span class="{if="$me"}control{else}primary{/if} icon bubble color {$contact->jid|stringToColor}">
+            {if="$me == null"}<a href="{$c->route('contact', $contact->jid)}">{/if}
                 <i class="zmdi zmdi-account"></i>
-            </span>
-        {if="$me == null"}</a>{/if}
+            {if="$me == null"}</a>{/if}
+        </span>
     {/if}
 
     <div class="bubble">
-        <div></div>
+        <p></p>
         <span class="info"></span>
     </div>
 </li>
diff --git a/sources/app/widgets/Chat/_chat_bubble_room.tpl b/sources/app/widgets/Chat/_chat_bubble_room.tpl
index 9783ff4..e19cff4 100644
--- a/sources/app/widgets/Chat/_chat_bubble_room.tpl
+++ b/sources/app/widgets/Chat/_chat_bubble_room.tpl
@@ -1,5 +1,5 @@
 <li class="room">
+    <p class="user"></p>
     <span class="info"></span>
-    <span class="user"></span>
-    <div></div>
+    <p class="message"></p>
 </li>
diff --git a/sources/app/widgets/Chat/_chat_empty.tpl b/sources/app/widgets/Chat/_chat_empty.tpl
index 12f4a8a..9485c18 100644
--- a/sources/app/widgets/Chat/_chat_empty.tpl
+++ b/sources/app/widgets/Chat/_chat_empty.tpl
@@ -3,31 +3,33 @@
     <h4>{$c->__('chat.empty_text')}</h4>
 </div>
 
-<ul class="flex middle active">
+<ul class="list flex middle active">
     {if="$top"}
-        <li class="subheader block large">{$c->__('chat.frequent')}</li>
+        <li class="subheader block large">
+            <p>{$c->__('chat.frequent')}</p>
+        </li>
     {/if}
     {loop="$top"}
-        <li class="condensed block {if="$value->last > 60"} inactive{/if}"
+        <li class="block {if="$value->last > 60"} inactive{/if}"
             onclick="Chats_ajaxOpen('{$value->jid}'); Chat_ajaxGet('{$value->jid}');">
             {$url = $value->getPhoto('s')}
             {if="$url"}
-                <span class="icon bubble
+                <span class="primary icon bubble
                     {if="$value->value"}
                         status {$presencestxt[$value->value]}
                     {/if}">
                     <img src="{$url}">
                 </span>
             {else}
-                <span class="icon bubble color {$value->jid|stringToColor}
+                <span class="primary icon bubble color {$value->jid|stringToColor}
                     {if="$value->value"}
                         status {$presencestxt[$value->value]}
                     {/if}">
                     <i class="zmdi zmdi-account"></i>
                 </span>
             {/if}
-            <span>{$value->getTrueName()}</span>
-            <p class="wrap">{$value->jid}</p>
+            <p>{$value->getTrueName()}</p>
+            <p>{$value->jid}</p>
         </li>
     {/loop}
 </ul>
diff --git a/sources/app/widgets/Chat/_chat_header.tpl b/sources/app/widgets/Chat/_chat_header.tpl
index 382917a..5482728 100644
--- a/sources/app/widgets/Chat/_chat_header.tpl
+++ b/sources/app/widgets/Chat/_chat_header.tpl
@@ -1,46 +1,40 @@
 <div>
-    <ul class="active">
-        <li onclick="Rooms_ajaxAdd()">
-            <span class="icon">
-                <i class="zmdi zmdi-group-add"></i>
-            </span>
+    <ul class="list middle">
+        <li>
+            <span class="primary on_desktop icon"><i class="zmdi zmdi-comments"></i></span>
+            <p>
+                {$c->__('page.chats')}
+            </p>
         </li>
     </ul>
-    <span class="on_desktop icon"><i class="zmdi zmdi-comments"></i></span>
-    <h2 class="r1">
-        {$c->__('page.chats')}
-    </h2>
 </div>
 <div>
-    <ul class="active">
-        {if="$c->supported('upload')"}
-        <li onclick="Upload_ajaxRequest()">
-            <span class="icon">
-                <i class="zmdi zmdi-attachment-alt"></i>
-            </span>
-        </li>
-        {/if}
-        <li onclick="Chats_ajaxClose('{$jid|echapJS}'); MovimTpl.hidePanel();">
-            <span class="icon">
-                <i class="zmdi zmdi-close"></i>
-            </span>
-        </li>
-    </ul>
-    <div
-        id="chat_header"
-        class="return active {if="$c->supported('upload')"}r2{else}r1{/if} condensed"
-        onclick="
+    <ul class="list middle">
+        <li id="chat_header">
+            <span onclick="
             MovimTpl.hidePanel();
             Notification.current('chat');
-            Chat_ajaxGet();">
-        <span id="back" class="icon"><i class="zmdi zmdi-arrow-back"></i></span>
-        <h2>
-            {if="$contact != null"}
-                {$contact->getTrueName()}
-            {else}
-                {$jid|echapJS}
+            Header_ajaxReset('chat');
+            Chat_ajaxGet();"
+            id="back" class="primary icon active">
+                <i class="zmdi zmdi-arrow-back"></i>
+            </span>
+            <span class="control icon active" onclick="Chats_ajaxClose('{$jid|echapJS}'); MovimTpl.hidePanel();">
+                <i class="zmdi zmdi-close"></i>
+            </span>
+            {if="$c->supported('upload')"}
+                <span class="control icon active" onclick="Upload_ajaxRequest()">
+                    <i class="zmdi zmdi-attachment-alt"></i>
+                </span>
             {/if}
-        </h2>
-        <h4 id="{$jid}_state">{$contact->jid}</h4>
-    </h2>
+            <p class="line">
+                {if="$contact != null"}
+                    {$contact->getTrueName()}
+                {else}
+                    {$jid|echapJS}
+                {/if}
+            </p>
+            <p class="line" id="{$jid}_state">{$contact->jid}</p>
+        </li>
+    </ul>
 </div>
diff --git a/sources/app/widgets/Chat/_chat_header_room.tpl b/sources/app/widgets/Chat/_chat_header_room.tpl
index fb5d766..be41879 100644
--- a/sources/app/widgets/Chat/_chat_header_room.tpl
+++ b/sources/app/widgets/Chat/_chat_header_room.tpl
@@ -1,76 +1,75 @@
 {$anon = $c->supported('anonymous')}
 <div>
     {if="!$anon"}
-        <ul class="active">
+        <!--<ul class="active">
             <li onclick="Rooms_ajaxAdd()">
                 <span class="icon">
                     <i class="zmdi zmdi-group-add"></i>
                 </span>
             </li>
-        </ul>
+        </ul>-->
     {/if}
-    <span class="on_desktop icon"><i class="zmdi zmdi-comments"></i></span>
-    {if="!$anon"}
-        <h2>{$c->__('page.chats')}</h2>
-    {else}
-        <h2>{$c->__('page.room')}</h2>
-    {/if}
-</div>
-<div>
-    <ul class="active">
-        {if="$c->supported('upload')"}
-        <li onclick="Upload_ajaxRequest()">
-            <span class="icon">
-                <i class="zmdi zmdi-attachment-alt"></i>
-            </span>
-        </li>
-        {/if}
-        <li onclick="Rooms_ajaxExit('{$room}'); MovimTpl.hidePanel(); {if="$anon"}Presence_ajaxLogout(){/if}">
-            <span class="icon">
-                <i class="zmdi zmdi-close"></i>
-            </span>
-        </li>
-        <li class="thin show_context_menu">
-            <span class="icon">
-                <i class="zmdi zmdi-more-vert"></i>
-            </span>
+    <ul class="list middle">
+        <li>
+            <span class="primary on_desktop icon"><i class="zmdi zmdi-comments"></i></span>
+            {if="!$anon"}
+                <p>{$c->__('page.chats')}</p>
+            {else}
+                <p>{$c->__('page.room')}</p>
+            {/if}
         </li>
     </ul>
-    <div
-        class="return {if="!$anon"}active{/if} {if="$c->supported('upload')"}r3{else}r2{/if} {if="$subject != null"}condensed{/if}"
-        {if="!$anon"}onclick="MovimTpl.hidePanel(); Chat_ajaxGet();"{/if}>
-        <span id="back" class="icon" >
-            {if="!$anon"}
-                <i class="zmdi zmdi-arrow-back"></i>
-            {else}
-                <i class="zmdi zmdi-comment-text-alt"></i>
-            {/if}
-        </span>
+</div>
+<div>
+    <ul class="list middle active">
+        <li>
+            <span id="back" class="primary icon active" {if="!$anon"}onclick="Header_ajaxReset('chat'); MovimTpl.hidePanel(); Chat_ajaxGet();"{/if}>
+                {if="!$anon"}
+                    <i class="zmdi zmdi-arrow-back"></i>
+                {else}
+                    <i class="zmdi zmdi-comment-text-alt"></i>
+                {/if}
+            </span>
 
-        {if="$conference != null && $conference->name"}
-            <h2 title="{$room}">{$conference->name}</h2>
-        {else}
-            <h2>{$room}</h2>
-        {/if}
-        {if="$subject != null"}
-            <h4 title="{$subject->subject}">{$subject->subject}</h4>
-        {/if}
-    </div>
-    <ul class="simple context_menu active">
+            <span class="control icon show_context_menu active">
+                <i class="zmdi zmdi-more-vert"></i>
+            </span>
+
+            {if="$c->supported('upload')"}
+                <span class="control icon active" onclick="Upload_ajaxRequest()">
+                    <i class="zmdi zmdi-attachment-alt"></i>
+                </span>
+            {/if}
+            <span class="control icon active" onclick="Rooms_ajaxExit('{$room}'); MovimTpl.hidePanel(); {if="$anon"}Presence_ajaxLogout(){/if}">
+                <i class="zmdi zmdi-close"></i>
+            </span>
+
+            {if="$conference != null && $conference->name"}
+                <p class="line" title="{$room}">{$conference->name}</p>
+            {else}
+                <p class="line">{$room}</p>
+            {/if}
+            {if="$subject != null"}
+                <p class="line" title="{$subject->subject}">{$subject->subject}</p>
+            {/if}
+        </li>
+    </ul>
+
+    <ul class="list context_menu active">
         <li onclick="Rooms_ajaxList('{$room}')">
-            <span>{$c->__('chatroom.members')}</span>
+            <p class="normal">{$c->__('chatroom.members')}</p>
         </li>
         {if="!$anon"}
             <li onclick="Rooms_ajaxRemoveConfirm('{$room}')">
-                <span>{$c->__('button.delete')}</span>
+                <p class="normal">{$c->__('button.delete')}</p>
             </li>
         {/if}
         {if="$presence != null && $presence->mucrole == 'moderator' && !$anon"}
             <li onclick="Chat_ajaxGetRoomConfig('{$room}')">
-                <span>{$c->__('chatroom.config')}</span>
+                <p class="normal">{$c->__('chatroom.config')}</p>
             </li>
             <li onclick="Chat_ajaxGetSubject('{$room}')">
-                <span>{$c->__('chatroom.subject')}</span>
+                <p class="normal">{$c->__('chatroom.subject')}</p>
             </li>
         {/if}
     </ul>
diff --git a/sources/app/widgets/Chat/chat.css b/sources/app/widgets/Chat/chat.css
index 815a489..aaf9edb 100644
--- a/sources/app/widgets/Chat/chat.css
+++ b/sources/app/widgets/Chat/chat.css
@@ -23,7 +23,7 @@
 }
 
 #chat_widget .chat_box form {
-    width: calc(100% - 1rem);
+    width: calc(100% - 5rem);
 }
 
 #chat_widget .chat_box form > div {
@@ -35,25 +35,32 @@
     padding: 3rem 0px 1rem;
 }
 
-#chat_widget .chat_box div.action {
+#chat_widget .chat_box span.control {
     font-size: 4rem;
     color: gray;
 }
 
-#chat_widget .chat_box div.action:hover {
+#chat_widget .chat_box span.control:hover {
     cursor: pointer;
     color: #333;
 }
 
 #chat_widget section {
-    margin-bottom: 1rem;
+    padding-bottom: 2rem;
+}
+
+#chat_widget li.oppose span.control {
+    right: 2rem;
 }
 
 /* Chatroom */
 
-#chat_widget li span.icon {
-    top: 0%;
-    margin-top: 0.85rem;
+#chat_widget ul.simple {
+    padding-left: 2rem;
+}
+
+#chat_widget div:not(.chat_box) li span.icon {
+    top: 4rem;
 }
 
 #chat_widget li img:not(.emoji):not(.hfr) {
@@ -61,11 +68,51 @@
     max-width: 100%;
     display: block;
 }
+
+#chat_widget li.room {
+    padding: 0.25rem 0;
+}
+
+#chat_widget li.room > p {
+    font-size: 2rem;
+    display: inline;
+}
+
+#chat_widget li.room span.info {
+    float: right;
+    width: auto;
+    margin-top: 0.5rem;
+}
+
+#chat_widget li.room:first-child {
+    margin-top: 1rem;
+}
+
+#chat_widget li.room p.user {
+    font-weight: 700;
+    padding: 0;
+}
+
+#chat_widget li.room > p.message {
+    color: black;
+    padding-left: 1rem;
+}
+
+#chat_widget li.room p.user:hover {
+    cursor: pointer;
+}
+
+#chat_widget ul:after {
+    content: " ";
+    display: block;
+    clear: both;
+}
 /*
 #chat_widget li img.emoji {
     padding: 0.25rem;
 }
 */
+/*
 #chat_widget li.room {
     min-height: 3rem;
     margin-bottom: 0.5rem;
@@ -93,6 +140,7 @@
 #chat_widget li.room span.user:hover {
     cursor: pointer;
 }
+*/
 
 #chat_widget .placeholder {
     padding-top: 37em;
@@ -117,6 +165,7 @@ table.emojis td:hover {
 @media screen and (max-width: 1024px) {
     #chat_widget .chat_box {
         width: 100%;
+        left: 0;
     }
 
     #chat_widget .chat_box ul {
diff --git a/sources/app/widgets/Chat/chat.js b/sources/app/widgets/Chat/chat.js
index 7931755..e1f5fdf 100644
--- a/sources/app/widgets/Chat/chat.js
+++ b/sources/app/widgets/Chat/chat.js
@@ -88,23 +88,23 @@ var Chat = {
                 message.body = message.body.substr(4);
             }
 
-            bubble.querySelector('div').innerHTML = message.body;
+            bubble.querySelector('p.message').innerHTML = message.body;
             bubble.querySelector('span.info').innerHTML = message.publishedPrepared;
-            bubble.querySelector('span.user').className = 'user ' + message.color;
+            bubble.querySelector('p.user').className = 'user ' + message.color;
 
-            bubble.querySelector('span.user').onclick = function(n) {
+            bubble.querySelector('p.user').onclick = function(n) {
                 var textarea = document.querySelector('#chat_textarea');
                 textarea.value = this.innerHTML + ', ' + textarea.value;
                 textarea.focus();
             };
 
-            bubble.querySelector('span.user').innerHTML = message.resource;
+            bubble.querySelector('p.user').innerHTML = message.resource;
             var conversation = document.getElementById(id);
             if(conversation) {
                 conversation.appendChild(bubble);
             }
 
-            bubble.querySelector('div').className = '';
+            //bubble.querySelector('p.message').className = '';
         } else if(Chat.left != null) {
             if(message.session == message.jidfrom) {
                 bubble = Chat.right.cloneNode(true);
@@ -130,9 +130,9 @@ var Chat = {
             }
 
             if(bubble) {
-                bubble.querySelector('div.bubble div').innerHTML = message.body;
+                bubble.querySelector('div.bubble > p').innerHTML = message.body;
 
-                bubble.querySelector('div.bubble span.info').innerHTML = message.publishedPrepared;
+                bubble.querySelector('div.bubble > span.info').innerHTML = message.publishedPrepared;
 
                 if(prepend) {
                     Chat.date = message.published;
diff --git a/sources/app/widgets/Chat/chat.tpl b/sources/app/widgets/Chat/chat.tpl
index f7eadeb..090329d 100644
--- a/sources/app/widgets/Chat/chat.tpl
+++ b/sources/app/widgets/Chat/chat.tpl
@@ -1,4 +1,4 @@
-<div id="chat_widget" {if="$jid"}data-jid="{$jid}"{/if}>
+<div id="chat_widget" {if="$jid"}data-jid="{$jid}"{/if} style="background-color: #EEE;">
     {if="$jid"}
         {$c->prepareChat($jid)}
     {else}
diff --git a/sources/app/widgets/Chats/_chats_add.tpl b/sources/app/widgets/Chats/_chats_add.tpl
index 3ae290c..b00890e 100644
--- a/sources/app/widgets/Chats/_chats_add.tpl
+++ b/sources/app/widgets/Chats/_chats_add.tpl
@@ -1,37 +1,39 @@
 <section class="scroll">
     <h3>{$c->__('chats.add')}</h3>
-    <ul class="active" id="add_extend">
-        <li class="subheader">{$c->__('chats.frequent')}</li>
+    <ul class="list active" id="add_extend">
+        <li class="subheader">
+            <p>{$c->__('chats.frequent')}</p>
+        </li>
         {loop="$top"}
             {if="!in_array($value->jid, $chats)"}
-                <li class="condensed {if="$value->last > 60"} inactive{/if}"
+                <li class="{if="$value->last > 60"} inactive{/if}"
                         onclick="Chats_ajaxOpen('{$value->jid}'); Dialog.clear()">
                         {$url = $value->getPhoto('s')}
                         {if="$url"}
-                            <span class="icon bubble
+                            <span class="primary icon bubble
                                 {if="$value->value"}
                                     status {$presencestxt[$value->value]}
                                 {/if}">
                                 <img src="{$url}">
                             </span>
                         {else}
-                            <span class="icon bubble color {$value->jid|stringToColor}
+                            <span class="primary icon bubble color {$value->jid|stringToColor}
                                 {if="$value->value"}
                                     status {$presencestxt[$value->value]}
                                 {/if}">
                                 <i class="zmdi zmdi-account"></i>
                             </span>
                         {/if}
-                        <span>{$value->getTrueName()}</span>
-                        <p class="wrap">{$value->jid}</p>
+                        <p class="line">{$value->getTrueName()}</p>
+                        <p class="line">{$value->jid}</p>
                     </li>
             {/if}
         {/loop}
         <li onclick="Chats_ajaxAddExtend()">
-            <span class="icon">
+            <span class="primary icon">
                 <i class="zmdi zmdi-plus"></i>
             </span>
-            <span>{$c->__('chats.more')}</span>
+            <p class="normal">{$c->__('chats.more')}</p>
         </li>
     </ul>
     <br />
diff --git a/sources/app/widgets/Chats/_chats_add_extend.tpl b/sources/app/widgets/Chats/_chats_add_extend.tpl
index e160743..9edb1e2 100644
--- a/sources/app/widgets/Chats/_chats_add_extend.tpl
+++ b/sources/app/widgets/Chats/_chats_add_extend.tpl
@@ -2,21 +2,23 @@
 {$group = ''}
 {loop="$contacts"}
     {if="$group != $value->groupname"}
-        <li class="subheader">{$value->groupname}</li>
+        <li class="subheader">
+            <p>{$value->groupname}</p>
+        </li>
     {/if}
-    <li class="condensed" onclick="Chats_ajaxOpen('{$value->jid}'); Dialog.clear()">
+    <li onclick="Chats_ajaxOpen('{$value->jid}'); Dialog.clear()">
         {$url = $value->getPhoto('s')}
         {if="$url"}
-            <span class="icon bubble">
+            <span class="primary icon bubble">
                 <img src="{$url}">
             </span>
         {else}
-            <span class="icon bubble color {$value->jid|stringToColor}">
+            <span class="primary icon bubble color {$value->jid|stringToColor}">
                 <i class="zmdi zmdi-account"></i>
             </span>
         {/if}
-        <span>{$value->getTrueName()}</span>
-        <p class="wrap">{$value->jid}</p>
+        <p class="line">{$value->getTrueName()}</p>
+        <p class="line">{$value->jid}</p>
     </li>
     {$group = $value->groupname}
 {/loop}
diff --git a/sources/app/widgets/Chats/_chats_item.tpl b/sources/app/widgets/Chats/_chats_item.tpl
index 6c49123..1703daa 100644
--- a/sources/app/widgets/Chats/_chats_item.tpl
+++ b/sources/app/widgets/Chats/_chats_item.tpl
@@ -9,36 +9,39 @@
         {/if}
         "
     title="{$contact->jid}">
-    {if="$caps && in_array($caps->type, array('handheld', 'phone'))"}
-        <div class="action">
-            <i class="zmdi zmdi-smartphone"></i>
-        </div>
-    {/if}
-    {if="$caps && $caps->type == 'web'"}
-        <div class="action">
-            <i class="zmdi zmdi-globe-alt"></i>
-        </div>
-    {/if}
-    <span data-key="chat|{$contact->jid}" class="counter bottom"></span>
     {$url = $contact->getPhoto('s')}
     {if="$url"}
-        <span class="icon bubble {if="isset($presence)"}status {$presence}{/if}">
+        <span class="primary icon bubble {if="isset($presence)"}status {$presence}{/if}">
             <img src="{$url}">
         </span>
     {else}
-        <span class="icon bubble color {$contact->jid|stringToColor} {if="isset($presence)"}status {$presence}{/if}">
+        <span class="primary icon bubble color {$contact->jid|stringToColor} {if="isset($presence)"}status {$presence}{/if}">
             <i class="zmdi zmdi-account"></i>
         </span>
     {/if}
-    <span>{$contact->getTrueName()}</span>
+
+    {if="$caps && in_array($caps->type, array('handheld', 'phone'))"}
+        <span class="control icon gray">
+            <i class="zmdi zmdi-smartphone"></i>
+        </span>
+    {/if}
+    {if="$caps && $caps->type == 'web'"}
+        <span class="control icon gray">
+            <i class="zmdi zmdi-globe-alt"></i>
+        </span>
+    {/if}
+    <span data-key="chat|{$contact->jid}" class="counter bottom"></span>
+    <p class="normal">
+        <span class="info">{$message->published|strtotime|prepareDate}</span>
+        {$contact->getTrueName()}
+    </p>
     {if="isset($status)"}
         <p>{$status}</p>
     {else}
         {if="isset($message)"}
-            <span class="info">{$message->published|strtotime|prepareDate}</span>
             {if="preg_match('#^\?OTR#', $message->body)"}
                 <p><i class="zmdi zmdi-lock"></i> {$c->__('message.encrypted')}</p>
-            {else}
+            {elseif="stripTags(prepareString($message->body)) != ''"}
                 <p>{$message->body|prepareString|stripTags}</p>
             {/if}
         {/if}
diff --git a/sources/app/widgets/Chats/chats.tpl b/sources/app/widgets/Chats/chats.tpl
index 3439489..3e20d10 100644
--- a/sources/app/widgets/Chats/chats.tpl
+++ b/sources/app/widgets/Chats/chats.tpl
@@ -1,4 +1,4 @@
-<ul id="chats_widget_list" class="middle active divided spaced">{$list}</ul>
+<ul id="chats_widget_list" class="list middle active divided spaced">{$list}</ul>
 
 <div class="placeholder icon">
     <h1>{$c->__('chats.empty_title')}</h1>
diff --git a/sources/app/widgets/Contact/Contact.php b/sources/app/widgets/Contact/Contact.php
index fc1eff1..4d4277f 100644
--- a/sources/app/widgets/Contact/Contact.php
+++ b/sources/app/widgets/Contact/Contact.php
@@ -38,11 +38,12 @@ class Contact extends WidgetBase
         if(!$this->validateJid($jid)) return;
 
         $html = $this->prepareContact($jid);
-        $header = $this->prepareHeader($jid, $page);
+        //$header = $this->prepareHeader($jid, $page);
 
         Header::fill($header);
         RPC::call('movim_fill', 'contact_widget', $html);
         RPC::call('MovimTpl.showPanel');
+        RPC::call('MovimTpl.scrollHeaders');
     }
 
     function ajaxEditSubmit($form)
@@ -122,6 +123,7 @@ class Contact extends WidgetBase
         Dialog::fill($view->draw('_contact_delete', true));
     }
 
+    /*
     function prepareHeader($jid, $page = 0)
     {
         if(!$this->validateJid($jid)) return;
@@ -156,6 +158,7 @@ class Contact extends WidgetBase
 
         return $view->draw('_contact_header', true);
     }
+    */
 
     function prepareEmpty($page = 0, $jid = null)
     {
@@ -226,6 +229,15 @@ class Contact extends WidgetBase
 
         $presencestxt = getPresencesTxt();
 
+        $view->assign('edit',
+            $this->call(
+                'ajaxEditContact',
+                "'".echapJS($jid)."'"));
+        $view->assign('delete',
+            $this->call(
+                'ajaxDeleteContact',
+                "'".echapJS($jid)."'"));
+
         if(isset($c)) {
             $view->assign('mood', getMood());
 
diff --git a/sources/app/widgets/Contact/_contact.tpl b/sources/app/widgets/Contact/_contact.tpl
index 7bca2ba..b6a2228 100644
--- a/sources/app/widgets/Contact/_contact.tpl
+++ b/sources/app/widgets/Contact/_contact.tpl
@@ -1,95 +1,124 @@
 {if="$contact != null"}
     {$url = $contact->getPhoto('s')}
-<div class="block">
-    <header class="big"
-        {if="$url"}
-            style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%), url('{$contact->getPhoto('xxl')}');"
-        {else}
-            style="background-color: rgba(62,81,181,1);"
-        {/if}
-        >
-        <ul class="thick">
-            <li class="condensed">
-                {if="$url"}
-                    <span class="icon bubble color {if="isset($presence)"}status {$presence}{/if}">
-                        <img src="{$url}">
-                    </span>
-                {else}
-                    <span class="icon bubble color {$contact->jid|stringToColor} {if="isset($presence)"}status {$presence}{/if}">
-                        <i class="zmdi zmdi-account"></i>
-                    </span>
-                {/if}
-                <span>
-                    <h2>{$contact->getTrueName()}</h2>
+
+<header class="big"
+    {if="$url"}
+        style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%), url('{$contact->getPhoto('xxl')}');"
+    {else}
+        style="background-color: rgba(62,81,181,1);"
+    {/if}
+    >
+    <ul class="list middle">
+        <li>
+            <span class="primary icon active" onclick="MovimTpl.hidePanel(); Contact_ajaxClear({$page});">
+                <i class="zmdi zmdi-arrow-back"></i>
+            </span>
+            {if="$contactr != null"}
+                <span class="control icon active" onclick="{$edit}">
+                    <i class="zmdi zmdi-edit"></i>
                 </span>
-                <p>{$contact->jid}</p>
-            </li>
-            {if="$caps"}
-                <li>
-                    <span class="icon">
-                        <i class="zmdi
-                            {if="$caps->type == 'handheld' || $caps->type == 'phone'"}
-                                zmdi-smartphone-android
-                            {elseif="$caps->type == 'bot'"}
-                                zmdi-memory
-                            {else}
-                                zmdi-laptop
-                            {/if}
-                        ">
-                        </i>
-                    </span>
-                    <span>
-                        {$caps->name}
-                        {if="isset($clienttype[$caps->type])"}
-                            - {$clienttype[$caps->type]}
-                        {/if}
-                    </span>
-                </li>
+                <span class="control icon active" onclick="{$delete}">
+                    <i class="zmdi zmdi-delete"></i>
+                </span>
+
+                <p class="line">{$contactr->getTrueName()}</p>
+            {else}
+                <span class="control icon active" onclick="Roster_ajaxDisplaySearch('{$contact->jid}')">
+                    <i class="zmdi zmdi-account-add"></i>
+                </span>
+                {if="$contact != null"}
+                    <p class="line">{$contact->getTrueName()}</p>
+                {else}
+
+                    <p class="line">{$jid}</p>
+                {/if}
             {/if}
-        </ul>
-    </header>
+        </li>
+    </ul>
+
+    <ul class="list thick">
+        <li>
+            {if="$url"}
+                <span class="primary icon bubble color {if="isset($presence)"}status {$presence}{/if}">
+                    <img src="{$url}">
+                </span>
+            {else}
+                <span class="primary icon bubble color {$contact->jid|stringToColor} {if="isset($presence)"}status {$presence}{/if}">
+                    <i class="zmdi zmdi-account"></i>
+                </span>
+            {/if}
+            <p class="line">{$contact->getTrueName()}</p>
+            <p class="line">{$contact->jid}</p>
+        </li>
+        <!--
+        {if="$caps"}
+            <li>
+                <span class="icon">
+                    <i class="zmdi
+                        {if="$caps->type == 'handheld' || $caps->type == 'phone'"}
+                            zmdi-smartphone-android
+                        {elseif="$caps->type == 'bot'"}
+                            zmdi-memory
+                        {else}
+                            zmdi-laptop
+                        {/if}
+                    ">
+                    </i>
+                </span>
+                <span>
+                    {$caps->name}
+                    {if="isset($clienttype[$caps->type])"}
+                        - {$clienttype[$caps->type]}
+                    {/if}
+                </span>
+            </li>
+        {/if}-->
+    </ul>
+</header>
+
+<div class="block">
     <a onclick="{$chat}" class="button action color red">
         <i class="zmdi zmdi-comment-text-alt"></i>
     </a>
 
-    <ul class="flex">
+    <ul class="list flex">
         {if="$contact->delay != null"}
-        <li class="condensed block">
+        <li class="block">
             <span class="icon brown"><i class="zmdi zmdi-restore"></i></span>
-            <span>{$c->__('last.title')}</span>
+            <p>{$c->__('last.title')}</p>
             <p>{$contact->delay}</p>
         </li>
         {/if}
 
         {if="$contact->fn != null"}
-        <li class="condensed block">
-            <span class="icon gray">{$contact->fn|firstLetterCapitalize}</span>
-            <span>{$c->__('general.name')}</span>
+        <li class="block">
+            <span class="primary icon gray">{$contact->fn|firstLetterCapitalize}</span>
+            <p>{$c->__('general.name')}</p>
             <p>{$contact->fn}</p>
         </li>
         {/if}
 
         {if="$contact->nickname != null"}
-        <li class="condensed block">
-            <span class="icon gray">{$contact->nickname|firstLetterCapitalize}</span>
-            <span>{$c->__('general.nickname')}</span>
+        <li class="block">
+            <span class="primary icon gray">{$contact->nickname|firstLetterCapitalize}</span>
+            <p>{$c->__('general.nickname')}</p>
             <p>{$contact->nickname}</p>
         </li>
         {/if}
 
         {if="strtotime($contact->date) != 0"}
-        <li class="condensed block">
-            <span class="icon gray"><i class="zmdi zmdi-cake"></i></span>
-            <span>{$c->__('general.date_of_birth')}</span>
+        <li class="block">
+            <span class="primary icon gray"><i class="zmdi zmdi-cake"></i></span>
+            <p>{$c->__('general.date_of_birth')}</p>
             <p>{$contact->date|strtotime|prepareDate:false}</p>
         </li>
         {/if}
 
         {if="$contact->url != null"}
-        <li class="condensed block">
-            <span class="icon gray"><i class="zmdi zmdi-link"></i></span>
-            <span>{$c->__('general.website')}</span>
-            <p class="wrap">
+        <li class="block">
+            <span class="primary icon gray"><i class="zmdi zmdi-link"></i></span>
+            <p>{$c->__('general.website')}</p>
+            <p>
                 {if="filter_var($contact->url, FILTER_VALIDATE_URL)"}
                     <a href="{$contact->url}" target="_blank">{$contact->url}</a>
                 {else}
@@ -100,42 +129,42 @@
         {/if}
 
         {if="$contact->email != null"}
-        <li class="condensed block">
-            <span class="icon gray"><i class="zmdi zmdi-email"></i></span>
-            <span>{$c->__('general.email')}</span>
+        <li class="block">
+            <span class="primary icon gray"><i class="zmdi zmdi-email"></i></span>
+            <p>{$c->__('general.email')}</p>
             <p><img src="{$contact->getPhoto('email')}"/></p>
         </li>
         {/if}
 
         {if="$contact->getMarital() != null"}
-        <li class="condensed block">
-            <span class="icon gray"><i class="zmdi zmdi-accounts"></i></span>
-            <span>{$c->__('general.marital')}</span>
+        <li class="block">
+            <span class="primary icon gray"><i class="zmdi zmdi-accounts"></i></span>
+            <p>{$c->__('general.marital')}</p>
             <p>{$contact->getMarital()}</p>
         </li>
         {/if}
 
         {if="$contact->getGender() != null"}
-        <li class="condensed block">
-            <span class="icon gray"><i class="zmdi zmdi-face"></i></span>
-            <span>{$c->__('general.gender')}</span>
+        <li class="block">
+            <span class="primary icon gray"><i class="zmdi zmdi-face"></i></span>
+            <p>{$c->__('general.gender')}</p>
             <p>{$contact->getGender()}</p>
         </li>
         {/if}
 
         {if="$contactr->delay != null"}
-        <li class="condensed block">
-            <span class="icon gray"><i class="zmdi zmdi-time-countdown"></i></span>
-            <span>{$c->__('last.title')}</span>
+        <li class="block">
+            <span class="primary icon gray"><i class="zmdi zmdi-time-countdown"></i></span>
+            <p>{$c->__('last.title')}</p>
             <p>{$contactr->delay|strtotime|prepareDate}</p>
         </li>
         {/if}
 
         {if="$contact->mood != null"}
         {$moods = unserialize($contact->mood)}
-        <li class="condensed block">
-            <span class="icon gray"><i class="zmdi zmdi-mood"></i></span>
-            <span>{$c->__('mood.title')}</span>
+        <li class="block">
+            <span class="primary icon gray"><i class="zmdi zmdi-mood"></i></span>
+            <p>{$c->__('mood.title')}</p>
             <p>{loop="$moods"}
                 {$mood[$value]}
                 {/loop}
@@ -144,9 +173,9 @@
         {/if}
 
         {if="$contact->description != null && trim($contact->description) != ''"}
-        <li class="condensed block large">
-            <span class="icon gray"><i class="zmdi zmdi-format-align-justify"></i></span>
-            <span>{$c->__('general.about')}</span>
+        <li class="pblock large">
+            <span class="primary icon gray"><i class="zmdi zmdi-format-align-justify"></i></span>
+            <p>{$c->__('general.about')}</p>
             <p class="all">{$contact->description}</p>
         </li>
         {/if}
@@ -154,37 +183,39 @@
     <br />
 
     {if="$blog != null"}
-        <ul class="active block flex">
-            <li class="block large subheader">{$c->__('blog.last')}</li>
+        <ul class="list middle active block flex">
+            <li class="block large subheader">
+                <p>{$c->__('blog.last')}</p>
+            </li>
             {loop="$blog"}
-                <li class="block condensed" onclick="movim_reload('{$c->route('news', $value->nodeid)}')">
+                <li class="block" onclick="movim_reload('{$c->route('news', $value->nodeid)}')">
                     {$url = $value->getContact()->getPhoto('l')}
                     {if="$url"}
-                        <span class="icon bubble" style="background-image: url({$url});">
+                        <span class="primary icon bubble" style="background-image: url({$url});">
                         </span>
                     {else}
-                        <span class="icon thumb color {$value->getContact()->jid|stringToColor}">
+                        <span class="primary icon thumb color {$value->getContact()->jid|stringToColor}">
                             <i class="zmdi zmdi-account"></i>
                         </span>
                     {/if}
                     {if="$value->title != null"}
-                        <span>{$value->title}</span>
+                        <p class="line">{$value->title}</p>
                     {else}
-                        <span>{$c->__('hello.contact_post')}</span>
+                        <p class="line">{$c->__('hello.contact_post')}</p>
                     {/if}
+                    <p>{$value->published|strtotime|prepareDate}</p>
                     <p>{$value->contentcleaned|strip_tags}</p>
-                    <span class="info">{$value->published|strtotime|prepareDate}</span>
                 </li>
             {/loop}
             <a href="{$c->route('blog', array($contact->jid))}" target="_blank" class="block large">
-                <li class="action">
-                    <div class="action">
-                        <i class="zmdi zmdi-chevron-right"></i>
-                    </div>
-                    <span class="icon">
+                <li>
+                    <span class="primary icon">
                         <i class="zmdi zmdi-portable-wifi"></i>
                     </span>
-                    <span>{$c->__('blog.visit')}</span>
+                    <span class="control icon">
+                        <i class="zmdi zmdi-chevron-right"></i>
+                    </span>
+                    <p class="normal">{$c->__('blog.visit')}</p>
                 </li>
             </a>
         </ul>
@@ -192,35 +223,36 @@
 
     {$album = $contact->getAlbum()}
     {if="$album"}
-    <ul class="flex">
-        <li class="subheader block large">{$c->__('general.tune')}</li>
+    <ul class="list flex">
+        <li class="subheader block large">
+            <p>{$c->__('general.tune')}</p>
+        </li>
 
         <li class="
             block
-            {if="$contact->tunetitle"}condensed{/if}
             action
             ">
-            
-            <div class="action">
-                <a href="{$album->url}" target="_blank">
-                    <i class="zmdi zmdi-radio"></i>
-                </a>
-            </div>
-            <span class="icon bubble">
+
+            <span class="primary icon bubble">
                 {if="isset($album->url)"}
                     <img src="{$album->url}"/>
                 {else}
                     <i class="zmdi zmdi-play-circle-fill"></i>
                 {/if}
             </span>
-            <span>
+            <span class="control icon">
+                <a href="{$album->url}" target="_blank">
+                    <i class="zmdi zmdi-radio"></i>
+                </a>
+            </span>
+            <p>
                 {if="$contact->tuneartist"}
                     {$contact->tuneartist} -
                 {/if}
                 {if="$contact->tunesource"}
                     {$contact->tunesource}
                 {/if}
-            </span>
+            </p>
             {if="$contact->tunetitle"}
                 <p>{$contact->tunetitle}</p>
             {/if}
@@ -230,25 +262,23 @@
     {/if}
 
     {if="$contact->adrlocality != null || $contact->adrcountry != null"}
-    <ul class="flex">
-        <li class="subheader block large">{$c->__('position.legend')}</li>
+    <ul class="list flex">
+        <li class="subheader block large">
+            <p>{$c->__('position.legend')}</p>
+        </li>
 
         {if="$contact->adrlocality != null"}
-        <li class="condensed block">
-            <span class="icon gray"><i class="zmdi zmdi-city"></i></span>
-            <span>{$c->__('position.locality')}</span>
-            <p>
-                {$contact->adrlocality}
-            </p>
+        <li class="block">
+            <span class="primary icon gray"><i class="zmdi zmdi-city"></i></span>
+            <p>{$c->__('position.locality')}</p>
+            <p>{$contact->adrlocality}</p>
         </li>
         {/if}
         {if="$contact->adrcountry != null"}
-        <li class="condensed block">
-            <span class="icon gray"><i class="zmdi zmdi-pin"></i></span>
-            <span>{$c->__('position.country')}</span>
-            <p>
-                {$contact->adrcountry}
-            </p>
+        <li class="block">
+            <span class="primary icon gray"><i class="zmdi zmdi-pin"></i></span>
+            <p>{$c->__('position.country')}</p>
+            <p>{$contact->adrcountry}</p>
         </li>
         {/if}
     </ul>
@@ -257,15 +287,17 @@
 
     <div class="clear"></div>
     {if="$contact->twitter != null || $contact->skype != null || $contact->yahoo != null"}
-    <ul class="flex">
-        <li class="subheader block large">{$c->__('general.accounts')}</li>
+    <ul class="list flex">
+        <li class="subheader block large">
+            <p>{$c->__('general.accounts')}</p>
+        </li>
 
         {if="$contact->twitter != null"}
-        <li class="condensed block">
-            <span class="icon gray">
+        <li class="block">
+            <span class="primary icon gray">
                 <i class="zmdi zmdi-twitter"></i>
             </span>
-            <span>Twitter</span>
+            <p>Twitter</p>
             <p>
                 <a
                     target="_blank"
@@ -276,9 +308,9 @@
         </li>
         {/if}
         {if="$contact->skype != null"}
-        <li class="condensed block">
-            <span class="icon gray">S</span>
-            <span>Skype</span>
+        <li class="block">
+            <span class="primary icon gray">S</span>
+            <p>Skype</p>
             <p>
                 <a
                     target="_blank"
@@ -289,9 +321,9 @@
         </li>
         {/if}
         {if="$contact->yahoo != null"}
-        <li class="condensed block">
-            <span class="icon gray">Y</span>
-            <span>Yahoo!</span>
+        <li class="block">
+            <span class="primary icon gray">Y</span>
+            <p>Yahoo!</p>
             <p>
                 <a
                     target="_blank"
@@ -306,8 +338,10 @@
     {/if}
 
     {if="isset($gallery)"}
-        <ul>
-            <li class="subheader">{$c->__('page.gallery')}</li>
+        <ul class="list">
+            <li class="subheader">
+                <p>{$c->__('page.gallery')}</p>
+            </li>
         </ul>
         <ul class="grid active padded">
             {loop="$gallery"}
@@ -324,38 +358,44 @@
 
     {if="$contactr && $contactr->rostersubscription != 'both'"}
         <div class="card">
-            <ul class="middle">
-                <li class="condensed">
+            <ul class="list middle">
+                <li>
                     {if="$contactr->rostersubscription == 'to'"}
-                        <span class="icon gray">
+                        <span class="primary icon gray">
                             <i class="zmdi zmdi-arrow-in"></i>
                         </span>
-                        <span>{$c->__('subscription.to')}</span>
+                        <p>{$c->__('subscription.to')}</p>
                         <p>{$c->__('subscription.to_text')}</p>
-                        <a class="button flat" onclick="Notifs_ajaxAccept('{$contactr->jid}')">
-                            {$c->__('subscription.to_button')}
-                        </a>
+                        <p>
+                            <a class="button flat" onclick="Notifs_ajaxAccept('{$contactr->jid}')">
+                                {$c->__('subscription.to_button')}
+                            </a>
+                        </p>
                     {/if}
                     {if="$contactr->rostersubscription == 'from'"}
-                        <span class="icon gray">
+                        <span class="primary icon gray">
                             <i class="zmdi zmdi-arrow-out"></i>
                         </span>
-                        <span>{$c->__('subscription.from')}</span>
+                        <p>{$c->__('subscription.from')}</p>
                         <p>{$c->__('subscription.from_text')}</p>
-                        <a class="button flat" onclick="Notifs_ajaxAsk('{$contactr->jid}')">
-                            {$c->__('subscription.from_button')}
-                        </a>
+                        <p>
+                            <a class="button flat" onclick="Notifs_ajaxAsk('{$contactr->jid}')">
+                                {$c->__('subscription.from_button')}
+                            </a>
+                        </p>
                     {/if}
                     {if="$contactr->rostersubscription == 'none'"}
-                        <span class="icon gray">
+                        <span class="primary icon gray">
                             <i class="zmdi zmdi-block"></i>
                         </span>
 
-                        <span>{$c->__('subscription.nil')}</span>
+                        <p>{$c->__('subscription.nil')}</p>
                         <p>{$c->__('subscription.nil_text')}</p>
-                        <a class="button flat" onclick="Notifs_ajaxAsk('{$contactr->jid}')">
-                            {$c->__('subscription.nil_button')}
-                        </a>
+                        <p>
+                            <a class="button flat" onclick="Notifs_ajaxAsk('{$contactr->jid}')">
+                                {$c->__('subscription.nil_button')}
+                            </a>
+                        </p>
                     {/if}
                 </li>
             </ul>
diff --git a/sources/app/widgets/Contact/_contact_empty.tpl b/sources/app/widgets/Contact/_contact_empty.tpl
index 6195f58..ef19362 100644
--- a/sources/app/widgets/Contact/_contact_empty.tpl
+++ b/sources/app/widgets/Contact/_contact_empty.tpl
@@ -1,6 +1,6 @@
-<ul class="thick">
+<ul class="list thick">
     <li>
-        <span class="icon bubble color {$jid|stringToColor}">{$jid|firstLetterCapitalize}</span>
-        <h2>{$jid}</h2>
+        <span class="primary icon bubble color {$jid|stringToColor}">{$jid|firstLetterCapitalize}</span>
+        <p class="normal">{$jid}</p>
     </li>
 </ul>
diff --git a/sources/app/widgets/Contact/_contact_explore.tpl b/sources/app/widgets/Contact/_contact_explore.tpl
index f596d2c..d55d2ba 100644
--- a/sources/app/widgets/Contact/_contact_explore.tpl
+++ b/sources/app/widgets/Contact/_contact_explore.tpl
@@ -1,6 +1,6 @@
 <br />
 <h2>{$c->__('explore.explore')}</h2>
 
-<ul id="public_list" class="flex card shadow active middle">
+<ul id="public_list" class="list flex card shadow active middle">
     {$users}
 </ul>
diff --git a/sources/app/widgets/Contact/_contact_public.tpl b/sources/app/widgets/Contact/_contact_public.tpl
index 440054d..d978a65 100644
--- a/sources/app/widgets/Contact/_contact_public.tpl
+++ b/sources/app/widgets/Contact/_contact_public.tpl
@@ -1,24 +1,25 @@
 {loop="$users"}
-    <li class="{if="$value->description != ''"}condensed{/if} block" style="background-image: url();" onclick="Contact_ajaxGetContact('{$value->jid}', {$page});">
+    <li class="block" style="background-image: url();" onclick="Contact_ajaxGetContact('{$value->jid}', {$page});">
         {$url = $value->getPhoto('s')}
         {if="$url"}
-            <span class="icon bubble">
+            <span class="primary icon bubble">
                 <img src="{$url}">
             </span>
         {else}
-            <span class="icon bubble color {$value->jid|stringToColor}">
+            <span class="primary icon bubble color {$value->jid|stringToColor}">
                 <i class="zmdi zmdi-account"></i>
             </span>
         {/if}
 
-        <span>{$value->getTrueName()}</span>
-
-        {if="$value->getAge()"}
-            <span class="info">{$c->__('age.years', $value->getAge())}</span>
-        {/if}
-        {if="$value->getGender()"}
-            <span class="info">{$value->getGender()}</span>
-        {/if}
+        <p class="normal">
+            {if="$value->getAge()"}
+                <span class="info">{$c->__('age.years', $value->getAge())}</span>
+            {/if}
+            {if="$value->getGender()"}
+                <span class="info">{$value->getGender()}</span>
+            {/if}
+            {$value->getTrueName()}
+        </p>
 
         {if="$value->description != ''"}
         <p>
@@ -28,12 +29,14 @@
     </li>
 {/loop}
 {if="$pages"}
-    <li class="block condensed">
-        <span class="icon gray">
-            <i class="zmdi zmdi-my-library-books"></i>
+    <li class="block">
+        <span class="primary icon gray">
+            <i class="zmdi zmdi-book"></i>
         </span>
         {loop="$pages"}
-            <a onclick="Contact_ajaxPublic('{$key}');" class="button flat {if="$key == $page"}on{/if}">{$key+1}</a>
+            <p>
+                <a onclick="Contact_ajaxPublic('{$key}');" class="button flat {if="$key == $page"}on{/if}">{$key+1}</a>
+            </p>
         {/loop}
     </li>
 {/if}
diff --git a/sources/app/widgets/Group/_group_empty.tpl b/sources/app/widgets/Group/_group_empty.tpl
index 4d5e8a6..2ecd009 100644
--- a/sources/app/widgets/Group/_group_empty.tpl
+++ b/sources/app/widgets/Group/_group_empty.tpl
@@ -2,34 +2,38 @@
     <h1>{$c->__('group.empty_title')}</h1>
     <h4>{$c->__('group.empty_text')}</h4>
 </div>
-<ul class="card thick">
+<ul class="list card thick">
     <li class="block">
-        <span class="icon gray">
+        <span class="primary icon gray">
             <i class="zmdi zmdi-help"></i>
         </span>
         <p class="all">
-            {$c->__('group.help_info1')}<br />
-            <br />
+            {$c->__('group.help_info1')}
+        </p>
+        <p>
             {$c->___('group.help_info2', '<i class="zmdi zmdi-bookmark"></i>', '<i class="zmdi zmdi-plus"></i> ')}<br />
             {$c->___('group.help_info3', '<i class="zmdi zmdi-edit"></i>')}<br />
-            <br />
+        </p>
+        <p>
             {$c->___('group.help_info4', '<a href="'.$c->route('news').'"><i class="zmdi zmdi-receipt"></i> ','</a>')}
         </p>
     </li>
 </ul>
 <h2>{$c->__('group.servers')}</h2>
-<ul class="flex middle active">
+<ul class="list flex middle active">
     {loop="$servers"}
         {if="!filter_var($value->server, FILTER_VALIDATE_EMAIL)"}
-            <li class="block condensed" onclick="Groups_ajaxDisco('{$value->server}')">
-                <span class="icon bubble color {$value->server|stringToColor}">{$value->server|firstLetterCapitalize}</span>
-                <span title="{$value->server} - {$value->name}">{$value->server} - {$value->name}</span>
+            <li class="block" onclick="Groups_ajaxDisco('{$value->server}')">
+                <span class="primary icon bubble color {$value->server|stringToColor}">
+                    {$value->server|firstLetterCapitalize}
+                </span>
+                <p title="{$value->server} - {$value->name}">{$value->server} - {$value->name}</p>
                 <p>{$c->__('group.counter', $value->number)}</p>
             </li>
         {/if}
     {/loop}
     <li class="block large">
-        <span class="icon">
+        <span class="primary icon">
             <i class="zmdi zmdi-search-for"></i>
         </span>
         <form>
diff --git a/sources/app/widgets/Group/_group_header.tpl b/sources/app/widgets/Group/_group_header.tpl
index 51c9ecf..c962837 100644
--- a/sources/app/widgets/Group/_group_header.tpl
+++ b/sources/app/widgets/Group/_group_header.tpl
@@ -1,64 +1,64 @@
 <div>
-    <span class="on_desktop icon"><i class="zmdi zmdi-pages"></i></span>
-    <h2>
-        {$c->__('page.groups')}
-    </h2>
+    <ul class="list middle">
+        <li>
+            <span class="primary on_desktop icon"><i class="zmdi zmdi-pages"></i></span>
+            <p>
+                {$c->__('page.groups')}
+            </p>
+        </li>
+    </ul>
 </div>
 <div>
-    <ul class="active">
-        {if="$subscription == null"}
-            <li title="{$c->__('group.subscribe')}"
-                onclick="Group_ajaxAskSubscribe('{$item->server}', '{$item->node}')">
-                <span class="icon">
-                    <i class="zmdi zmdi-bookmark-outline"></i>
-                </span>
-            </li>
-        {else}
-            <li title="{$c->__('group.unsubscribe')}"
-                onclick="Group_ajaxAskUnsubscribe('{$item->server}', '{$item->node}')">
-                <span class="icon">
-                    <i class="zmdi zmdi-bookmark"></i>
-                </span>
-            </li>
-        {/if}
-        {if="$role == 'owner'"}
-            <li class="thin show_context_menu">
-                <span class="icon">
+    <ul class="list middle">
+        <li>
+            <span id="back" class="primary icon active" onclick="MovimTpl.hidePanel(); Group_ajaxClear(); Groups_ajaxHeader();">
+                <i class="zmdi zmdi-arrow-back"></i>
+            </span>
+            {if="$role == 'owner'"}
+                <span class="control show_context_menu icon active">
                     <i class="zmdi zmdi-more-vert"></i>
                 </span>
-            </li>
-        {/if}
-    </ul>
-    <div class="return active condensed {if="$role == 'owner'"}r2{else}r1{/if}"
-        onclick="MovimTpl.hidePanel(); Group_ajaxClear(); Groups_ajaxHeader();">
-        <span id="back" class="icon"><i class="zmdi zmdi-arrow-back"></i></span>
-        <h2>
-            {if="$item != null"}
-                {if="$item->name"}
-                    {$item->name}
-                {else}
-                    {$item->node}
-                {/if}
             {/if}
-        </h2>
-        {if="$item->description"}
-            <h4 title="{$item->description|strip_tags}">
-                {$item->description|strip_tags}
-            </h4>
-        {else}
-            <h4>{$item->server}</h4>
-        {/if}
-    </div>
+            {if="$subscription == null"}
+                <span class="control icon active" title="{$c->__('group.subscribe')}"
+                onclick="Group_ajaxAskSubscribe('{$item->server}', '{$item->node}')">
+                    <i class="zmdi zmdi-bookmark-outline"></i>
+                </span>
+            {else}
+                <span class="control icon active" title="{$c->__('group.unsubscribe')}"
+                onclick="Group_ajaxAskUnsubscribe('{$item->server}', '{$item->node}')">
+                    <i class="zmdi zmdi-bookmark"></i>
+                </span>
+            {/if}
+            <p class="line">
+                {if="$item != null"}
+                    {if="$item->name"}
+                        {$item->name}
+                    {else}
+                        {$item->node}
+                    {/if}
+                {/if}
+            </p>
+            {if="$item->description"}
+                <p class="line" title="{$item->description|strip_tags}">
+                    {$item->description|strip_tags}
+                </p>
+            {else}
+                <p class="line">{$item->server}</p>
+            {/if}
+        </li>
+    </ul>
+
     {if="$role == 'owner'"}
-        <ul class="simple context_menu active">
+        <ul class="list context_menu active">
             <li onclick="Group_ajaxGetConfig('{$item->server}', '{$item->node}')">
-                <span>{$c->__('group.configuration')}</span>
+                <p class="normal">{$c->__('group.configuration')}</p>
             </li>
             <li onclick="Group_ajaxGetSubscriptions('{$item->server}', '{$item->node}', true)">
-                <span>{$c->__('group.subscriptions')}</span>
+                <p class="normal">{$c->__('group.subscriptions')}</p>
             </li>
             <li onclick="Group_ajaxDelete('{$item->server}', '{$item->node}')">
-                <span>{$c->__('button.delete')}</span>
+                <p class="normal">{$c->__('button.delete')}</p>
             </li>
         </ul>
     {/if}
diff --git a/sources/app/widgets/Group/_group_posts.tpl b/sources/app/widgets/Group/_group_posts.tpl
index 8f8f6ed..e46f9a7 100644
--- a/sources/app/widgets/Group/_group_posts.tpl
+++ b/sources/app/widgets/Group/_group_posts.tpl
@@ -1,203 +1,13 @@
 {loop="$posts"}
     {$c->preparePost($value)}
-    <!--
-    {$attachements = $value->getAttachements()}
-    <article id="{$value->nodeid}" class="block">
-        {if="isset($attachements.pictures)"}
-        <header
-            class="big"
-            style="
-                background-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 100%), url('{$attachements['pictures'][0]['href']}');">
-        {else}
-        <header>
-        {/if}
-            <ul class="thick">
-                <li class="condensed">
-                    {$url = $value->getContact()->getPhoto('s')}
-                    {if="$url"}
-                        <span class="icon bubble">
-                            <img src="{$url}">
-                        </span>
-                    {else}
-                        <span class="icon bubble color {$value->node|stringToColor}">{$value->node|firstLetterCapitalize}</span>
-                    {/if}
-                    <h2>
-                        <a href="{$c->route('news', $value->nodeid)}">
-                            {if="$value->title != null"}
-                                {$value->title}
-                            {else}
-                                {$c->__('post.default_title')}
-                            {/if}
-                        </a>
-                    </h2>
-                    <p>
-                        {if="$value->getContact()->getTrueName() != ''"}
-                            <a href="{$c->route('contact', $value->getContact()->jid)}">
-                                {$value->getContact()->getTrueName()}
-                            </a>
-                             -
-                        {/if}
-                        {$value->published|strtotime|prepareDate}
-                        {if="$value->published != $value->updated"}
-                            - <i class="zmdi zmdi-edit"></i> {$value->updated|strtotime|prepareDate}
-                        {/if}
-                    </p>
-                </li>
-            </ul>
-        </header>
-        <section>
-            <content>
-                {if="$value->isShort() && isset($attachements.pictures)"}
-                    {loop="$attachements.pictures"}
-                        <a href="{$value.href}" class="alternate" target="_blank">
-                            <img class="big_picture" type="{$value.type}" src="{$value.href|urldecode}"/>
-                        </a>
-                    {/loop}
-                {/if}
-                {$value->contentcleaned}
-            </content>
-        </section>
-        <footer>
-            {$tags = $value->getTags()}
-            {if="isset($tags)"}
-                <ul class="middle">
-                    <li>
-                        <span class="icon zmdi zmdi-tag gray"></span>
-                        <span>
-                            {loop="$tags"}
-                                <a target="_blank" href="{$c->route('tag', array($value))}">#{$value}</a>
-                            {/loop}
-                        </span>
-                    </li>
-                </ul>
-            {/if}
-            <ul class="thin">
-                {if="isset($attachements.links)"}
-                    {loop="$attachements.links"}
-                        {if="substr($value.href, 0, 5) != 'xmpp:' && filter_var($value.href, FILTER_VALIDATE_URL)"}
-                        <li>
-                            <span class="icon small"><img src="https://icons.duckduckgo.com/ip2/{$value.url.host}.ico"/></span>
-                            <a href="{$value.href}" class="alternate" target="_blank">
-                                <span>{$value.href|urldecode}</span>
-                            </a>
-                        </li>
-                        {/if}
-                    {/loop}
-                {/if}
-                {if="isset($attachements.files)"}
-                    {loop="$attachements.files"}
-                        <li>
-                            <a
-                                href="{$value.href}"
-                                class="enclosure"
-                                type="{$value.type}"
-                                target="_blank">
-                                <span class="icon small gray">
-                                    <span class="zmdi zmdi-attachment-alt"></span>
-                                </span>
-                                <span>{$value.href|urldecode}</span>
-                            </a>
-                        </li>
-                    {/loop}
-                {/if}
-            </ul>
-            {if="!$value->isShort() && isset($attachements.pictures)"}
-                <ul class="flex middle">
-                {loop="$attachements.pictures"}
-                    <li class="block pic">
-                        <span class="icon small gray">
-                            <i class="zmdi zmdi-image"></i>
-                        </span>
-                        <a href="{$value.href}" class="alternate" target="_blank">
-                            <img type="{$value.type}" src="{$value.href|urldecode}"/>
-                        </a>
-                    </li>
-                {/loop}
-                </ul>
-            {/if}
-            {if="$value->isMine()"}
-                <ul class="middle">
-                    <li class="action">
-                        <form>
-                            <div class="action">
-                                <div class="checkbox">
-                                    <input
-                                        type="checkbox"
-                                        id="privacy_{$value->nodeid}"
-                                        name="privacy_{$value->nodeid}"
-                                        {if="$value->isPublic()"}
-                                            checked
-                                        {/if}
-                                        onclick="Group_ajaxTogglePrivacy('{$value->nodeid}')">
-                                    <label for="privacy_{$value->nodeid}"></label>
-                                </div>
-                            </div>
-                        </form>
-                        <span class="icon gray">
-                            <i class="zmdi zmdi-portable-wifi"></i>
-                        </span>
-                        <span>
-                            <a target="_blank" href="{$value->getPublicUrl()}">
-                                {$c->__('post.public')}
-                            </a>
-                        </span>
-                    </li>
-                </ul>
-            {/if}
-        </footer>
-        {$comments = $c->getComments($value)}
-        {if="$comments"}
-            <ul class="divided spaced middle">
-                <li class="subheader">
-                    {$c->__('post.comments')}
-                    <span class="info">{$comments|count}</span>
-                </li>
-                {loop="$comments"}
-                    <li class="condensed">
-                        {$url = $value->getContact()->getPhoto('s')}
-                        {if="$url"}
-                            <span class="icon bubble">
-                                <img src="{$url}">
-                            </span>
-                        {else}
-                            <span class="icon bubble color {$value->getContact()->jid|stringToColor}">
-                                <i class="zmdi zmdi-account"></i>
-                            </span>
-                        {/if}
-                        <span class="info">{$value->published|strtotime|prepareDate}</span>
-                        <span>
-                            <a href="{$c->route('contact', $value->getContact()->jid)}">
-                                {$value->getContact()->getTrueName()}
-                            </a>
-                        </span>
-                        <p class="all">
-                            {$value->contentraw}
-                        </p>
-                    </li>
-                {/loop}
-                <a href="{$c->route('news', $value->nodeid)}">
-                    <li class="action">
-                        <div class="action">
-                            <i class="zmdi zmdi-chevron-right"></i>
-                        </div>
-                        <span class="icon">
-                            <i class="zmdi zmdi-comment"></i>
-                        </span>
-                        <span>{$c->__('post.comment_add')}</span>
-                    </li>
-                </a>
-            </ul>
-        {/if}
-        <br />
-    </article>-->
 {/loop}
 {if="$posts != null && count($posts) >= $paging-1"}
-<ul class="active thick">
+<ul class="list active thick">
     <li onclick="Group_ajaxGetHistory('{$server}', '{$node}', {$page+1}); this.parentNode.parentNode.removeChild(this.parentNode);">
-        <span class="icon">
+        <span class="primary icon">
             <i class="zmdi zmdi-time-restore"></i>
         </span>
-        {$c->__('post.older')}
+        <p class="normal line">{$c->__('post.older')}</p>
     </li>
 </ul>
 {/if}
diff --git a/sources/app/widgets/Group/_group_subscriptions.tpl b/sources/app/widgets/Group/_group_subscriptions.tpl
index 99d5853..9109c8a 100644
--- a/sources/app/widgets/Group/_group_subscriptions.tpl
+++ b/sources/app/widgets/Group/_group_subscriptions.tpl
@@ -1,14 +1,15 @@
 <section class="scroll">
-    <ul class="thin divided simple">
+    <ul class="list thin divided simple">
         <li class="subheader">
-            {$c->__('group.subscriptions')}
-            <span class="info">{$subscriptions|count}</span>
+            <p><span class="info">{$subscriptions|count}</span>{$c->__('group.subscriptions')}</p>
         </li>
         {loop="$subscriptions"}
             <li>
-                <a href="{$c->route('contact', $value.jid)}">
-                    {$value.jid}
-                </a>
+                <p class="normal">
+                    <a href="{$c->route('contact', $value.jid)}">
+                        {$value.jid}
+                    </a>
+                </p>
             </li>
         {/loop}
     </ul>
diff --git a/sources/app/widgets/Group/group.tpl b/sources/app/widgets/Group/group.tpl
index 205e1ec..e1a4e14 100644
--- a/sources/app/widgets/Group/group.tpl
+++ b/sources/app/widgets/Group/group.tpl
@@ -1,4 +1,4 @@
-<div id="group_widget" class="card shadow spinner">
+<div id="group_widget" class="card shadow spinner" style="background-color: #EEE;">
     {$c->prepareEmpty()}
     {if="$server && $node"}
         <script type="text/javascript">
diff --git a/sources/app/widgets/Groups/_groups_header.tpl b/sources/app/widgets/Groups/_groups_header.tpl
index 5ffd813..01c452c 100644
--- a/sources/app/widgets/Groups/_groups_header.tpl
+++ b/sources/app/widgets/Groups/_groups_header.tpl
@@ -1,18 +1,22 @@
 <div>
-    <span id="menu" class="on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
-    <span class="on_desktop icon"><i class="zmdi zmdi-pages"></i></span>
-    <form>
-        <div>
-            <div class="select">
-                <select onchange="window[this.value].apply(this, [this.options[this.selectedIndex].dataset['server']]);" name="language" id="language">
-                    <option value="Groups_ajaxSubscriptions" selected="selected">{$c->__('groups.subscriptions')}</option>
-                    {loop="$servers"}
-                        {if="!filter_var($value->server, FILTER_VALIDATE_EMAIL)"}
-                            <option value="Groups_ajaxDisco" data-server="{$value->server}">{$value->server} - {$value->name} ({$value->number})</option>
-                        {/if}
-                    {/loop}
-                </select>
-            </div>
-        </div>
-    </form>
+    <ul class="list middle">
+        <li>
+            <span id="menu" class="primary on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
+            <span class="primary on_desktop icon"><i class="zmdi zmdi-pages"></i></span>
+            <form>
+                <div>
+                    <div class="select">
+                        <select onchange="window[this.value].apply(this, [this.options[this.selectedIndex].dataset['server']]);" name="language" id="language">
+                            <option value="Groups_ajaxSubscriptions" selected="selected">{$c->__('groups.subscriptions')}</option>
+                            {loop="$servers"}
+                                {if="!filter_var($value->server, FILTER_VALIDATE_EMAIL)"}
+                                    <option value="Groups_ajaxDisco" data-server="{$value->server}">{$value->server} - {$value->name} ({$value->number})</option>
+                                {/if}
+                            {/loop}
+                        </select>
+                    </div>
+                </div>
+            </form>
+        </li>
+    </ul>
 </div>
diff --git a/sources/app/widgets/Groups/_groups_server.tpl b/sources/app/widgets/Groups/_groups_server.tpl
index 56a664d..44927be 100644
--- a/sources/app/widgets/Groups/_groups_server.tpl
+++ b/sources/app/widgets/Groups/_groups_server.tpl
@@ -1,4 +1,8 @@
-<ul class="middle divided spaced active">
+<ul class="list middle divided spaced active all">
+    <li class="subheader" onclick="Groups_ajaxSubscriptions()">
+        <span class="primary icon"><i class="zmdi zmdi-arrow-back"></i></span>
+        <p class="normal"><span class="info">{$nodes|count}</span>{$server}</p>
+    </li>
     {loop="$nodes"}
         <li
             class="
@@ -10,33 +14,36 @@
             title="{$value->server} - {$value->node}"
         >
             {if="$value->subscription == 'subscribed'"}
-                <div class="action">
+                <span class="control icon gray">
                     <i class="zmdi zmdi-bookmark"></i>
-                </div>
+                </span>
             {/if}
-            <span class="icon bubble color {$value->node|stringToColor}">{$value->node|firstLetterCapitalize}</span>
-            <span>
+            <span class="primary icon bubble color {$value->node|stringToColor}">{$value->node|firstLetterCapitalize}</span>
+            <p class="line">
                 {if="$value->name"}
                     {$value->name}
                 {else}
                     {$value->node}
                 {/if}
-                
-                {if="$value->description"}
                 <span class="second">
-                    {$value->description|strip_tags}
+                    {if="$value->description"}
+                        {$value->description|strip_tags}
+                    {/if}
                 </span>
-                {/if}                
-            </span>
-            <p class="wrap">
-                {if="$value->sub > 0"}
-                    {$c->__('groups.sub', $value->sub)}
-                {/if}
-                {if="$value->sub > 0 && $value->num > 0"}
-                  - 
-                {/if}
-                {if="$value->num > 0"}
-                     {$c->__('groups.num', $value->num)}
+            </p>
+            <p>
+                {if="isset($value->sub)"}
+                    {if="$value->sub > 0"}
+                        {$c->__('groups.sub', $value->sub)}
+                    {/if}
+                    {if="$value->sub > 0 && $value->num > 0"}
+                      -
+                    {/if}
+                    {if="$value->num > 0"}
+                         {$c->__('groups.num', $value->num)}
+                    {/if}
+                {else}
+                    {$value->node}
                 {/if}
             </p>
         </li>
diff --git a/sources/app/widgets/Groups/_groups_subscriptions.tpl b/sources/app/widgets/Groups/_groups_subscriptions.tpl
index 397198a..27b2621 100644
--- a/sources/app/widgets/Groups/_groups_subscriptions.tpl
+++ b/sources/app/widgets/Groups/_groups_subscriptions.tpl
@@ -7,29 +7,31 @@
         </li>
     </ul>
 {else}
-    <ul class="divided spaced middle active">
+    <ul class="list divided spaced middle active all">
         {loop="$subscriptions"}
             {if="$c->checkNewServer($value)"}
-                <li class="subheader">
-                    <a href="#" onclick="Groups_ajaxDisco('{$value->server}')">{$value->server} - {$value->servicename}</a>
+                <li class="subheader" onclick="Groups_ajaxDisco('{$value->server}')">
+                    <span class="control icon gray"><i class="zmdi zmdi-chevron-right"></i></span>
+                    <p>
+                        {$value->server} - {$value->servicename}
+                    </p>
                 </li>
             {/if}
             <li
-                {if="$value->description"}class="condensed"{/if}
                 data-server="{$value->server}"
                 data-node="{$value->node}"
                 title="{$value->server} - {$value->node}"
             >
-                <span class="icon bubble color {$value->node|stringToColor}">{$value->node|firstLetterCapitalize}</span>
-                <span>
+                <span class="primary icon bubble color {$value->node|stringToColor}">{$value->node|firstLetterCapitalize}</span>
+                <p class="line normal">
                     {if="$value->name"}
                         {$value->name}
                     {else}
                         {$value->node}
                     {/if}
-                </span>
+                </p>
                 {if="$value->description"}
-                    <p class="wrap">{$value->description|strip_tags}</p>
+                    <p class="line">{$value->description|strip_tags}</p>
                 {/if}
             </li>
         {/loop}
diff --git a/sources/app/widgets/Header/_header_admin.tpl b/sources/app/widgets/Header/_header_admin.tpl
index 82e595a..b0be03a 100644
--- a/sources/app/widgets/Header/_header_admin.tpl
+++ b/sources/app/widgets/Header/_header_admin.tpl
@@ -1,6 +1,9 @@
 <div>
-    <a href="{$c->route('main')}" class="classic">
-        <span id="menu" class="icon"><i class="zmdi zmdi-home"></i></span>
-    </a>
-    <h2>{$c->__('page.administration')}</h2>
+    <ul class="list middle">
+        <li>
+            <a href="{$c->route('main')}" class="active classic">
+                <span id="menu" class="icon"><i class="zmdi zmdi-home"></i></span>
+            </a>
+        </li>
+    </ul>
 </div>
diff --git a/sources/app/widgets/Header/_header_chat.tpl b/sources/app/widgets/Header/_header_chat.tpl
index 936e5b4..2007332 100644
--- a/sources/app/widgets/Header/_header_chat.tpl
+++ b/sources/app/widgets/Header/_header_chat.tpl
@@ -1,5 +1,9 @@
 <div>
-    <span id="menu" class="on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
-    <span class="on_desktop icon"><i class="zmdi zmdi-comments"></i></span>
-    <h2>{$c->__('page.chats')}</h2>
+    <ul class="list middle">
+        <li>
+            <span id="menu" class="primary on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
+            <span class="primary icon on_desktop icon"><i class="zmdi zmdi-comments"></i></span>
+            <p>{$c->__('page.chats')}</p>
+        </li>
+    </ul>
 </div>
diff --git a/sources/app/widgets/Header/_header_conf.tpl b/sources/app/widgets/Header/_header_conf.tpl
index 0b697cd..1beee9e 100644
--- a/sources/app/widgets/Header/_header_conf.tpl
+++ b/sources/app/widgets/Header/_header_conf.tpl
@@ -1,5 +1,9 @@
 <div>
-    <span id="menu" class="on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
-    <span class="on_desktop icon"><i class="zmdi zmdi-settings"></i></span>
-    <h2>{$c->__('page.configuration')}</h2>
+    <ul class="list middle">
+        <li>
+            <span id="menu" class="primary on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
+            <span class="primary on_desktop icon"><i class="zmdi zmdi-settings"></i></span>
+            <p>{$c->__('page.configuration')}</p>
+        </li>
+    </ul>
 </div>
diff --git a/sources/app/widgets/Header/_header_group.tpl b/sources/app/widgets/Header/_header_group.tpl
index 91d21bf..88a4597 100644
--- a/sources/app/widgets/Header/_header_group.tpl
+++ b/sources/app/widgets/Header/_header_group.tpl
@@ -1,5 +1,9 @@
 <div>
-    <span id="menu" class="on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
-    <span class="on_desktop icon"><i class="zmdi zmdi-pages"></i></span>
-    <h2>{$c->__('page.groups')}</h2>
+    <ul class="list middle">
+        <li>
+            <span id="menu" class="primary on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
+            <span class="primary on_desktop icon"><i class="zmdi zmdi-pages"></i></span>
+            <p>{$c->__('page.groups')}</p>
+        </li>
+    </ul>
 </div>
diff --git a/sources/app/widgets/Header/_header_help.tpl b/sources/app/widgets/Header/_header_help.tpl
index 64b4367..09fe6f0 100644
--- a/sources/app/widgets/Header/_header_help.tpl
+++ b/sources/app/widgets/Header/_header_help.tpl
@@ -1,5 +1,9 @@
 <div>
-    <span id="menu" class="on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
-    <span class="on_desktop icon"><i class="zmdi zmdi-help"></i></span>
-    <h2>{$c->__('page.help')}</h2>
+    <ul class="list middle">
+        <li>
+            <span id="menu" class="primary on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
+            <span class="primary on_desktop icon active"><i class="zmdi zmdi-help"></i></span>
+            <p>{$c->__('page.help')}</p>
+        </li>
+    </ul>
 </div>
diff --git a/sources/app/widgets/Header/_header_login.tpl b/sources/app/widgets/Header/_header_login.tpl
index 051648d..90fadf2 100644
--- a/sources/app/widgets/Header/_header_login.tpl
+++ b/sources/app/widgets/Header/_header_login.tpl
@@ -1,9 +1,11 @@
-<div></div>
 <div>
-    <ul class="active">
+    <ul class="list"><li></li></ul>
+</div>
+<div>
+    <ul class="list medium">
         <a class="classic" href="{$c->route('pods')}">
             <li>
-                <span class="icon">
+                <span class="control icon">
                     <i class="zmdi zmdi-apps"></i>
                 </span>
             </li>
diff --git a/sources/app/widgets/Header/locales.ini b/sources/app/widgets/Header/locales.ini
index 1f4ddc5..cbc8686 100644
--- a/sources/app/widgets/Header/locales.ini
+++ b/sources/app/widgets/Header/locales.ini
@@ -1,9 +1,2 @@
-[menu]
-all        = All
-groups     = Groups
-contacts   = Contacts
-refresh    = Refresh all the streams
-me         = My publications
-
 [roster]
 search   = Search in your contacts
diff --git a/sources/app/widgets/Hello/hello.tpl b/sources/app/widgets/Hello/hello.tpl
index 48e44fd..4a424d2 100644
--- a/sources/app/widgets/Hello/hello.tpl
+++ b/sources/app/widgets/Hello/hello.tpl
@@ -1,40 +1,52 @@
+<header>
+    <ul class="list middle">
+        <li>
+            <span id="menu" class="primary on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
+            <span class="primary on_desktop icon gray"><i class="zmdi zmdi-home"></i></span>
+            <p class="center">{$c->__('page.home')}</p>
+        </li>
+    </ul>
+</header>
+
 <div id="hello_widget" class="divided">
     {if="!isset($top) || !isset($news)"}
-        <ul class="simple thick">
+        <ul class="list thick">
             {$a = '1f600'}
             <li>
-                <h2>{$c->__('hello.enter_title')}</h2>
-                <p class="all">{$c->__('hello.enter_paragraph')} <img alt=":smiley:" class="emoji" src="{$a|getSmileyPath}"></p>
+                <p>{$c->__('hello.enter_title')}</p>
+                <p>{$c->__('hello.enter_paragraph')} <img alt=":smiley:" class="emoji" src="{$a|getSmileyPath}"></p>
             </li>
         </ul>
-        <ul class="middle">
-            <li class="condensed">
-                <span class="icon gray">
+        <ul class="list middle">
+            <li>
+                <span class="primary icon gray">
                     <i class="zmdi zmdi-menu on_mobile"></i>
                     <i class="zmdi zmdi-cloud-outline on_desktop"></i>
                 </span>
-                <span>{$c->__('hello.menu_title')}</span>
-                <p class="all">{$c->__('hello.menu_paragraph')}</p>
+                <p>{$c->__('hello.menu_title')}</p>
+                <p>{$c->__('hello.menu_paragraph')}</p>
             </li>
         </ul>
     {/if}
-    <ul class="flex active middle">
-        <li class="subheader block large">{$c->__('chat.frequent')}</li>
+    <ul class="list flex active middle">
+        <li class="subheader block large">
+            <p>{$c->__('chat.frequent')}</p>
+        </li>
         {if="empty($top)"}
             <li>
-                <span class="icon gray">
+                <span class="primary icon gray">
                     <i class="zmdi zmdi-info-outline"></i>
                 </span>
-                <span>{$c->__('chats.empty_title')}</span>
+                <p class="normal">{$c->__('chats.empty_title')}</p>
             </li>
         {/if}
         {loop="$top"}
-            <li tabindex="{$key+1}" class="block action {if="$value->status"}condensed{/if}"
+            <li tabindex="{$key+1}" class="block"
                 onclick="Hello_ajaxChat('{$value->jid}')">
                 {$url = $value->getPhoto('s')}
                 {if="$url"}
                     <span
-                        class="icon bubble
+                        class="primary icon bubble
                         {if="$value->value"}
                             status {$presencestxt[$value->value]}
                         {/if}">
@@ -42,7 +54,7 @@
                     </span>
                 {else}
                     <span
-                        class="icon bubble color {$value->jid|stringToColor}
+                        class="primary icon bubble color {$value->jid|stringToColor}
                         {if="$value->value"}
                             status {$presencestxt[$value->value]}
                         {/if}">
@@ -50,35 +62,41 @@
                     </span>
                 {/if}
 
-                <span>{$value->getTrueName()}</span>
-                <p class="wrap">{$value->status}</p>
+                <p>{$value->getTrueName()}</p>
+                <p>
+                    {if="isset($value->status)"}
+                        {$value->status}
+                    {else}
+                        {$value->jid}
+                    {/if}
+                </p>
             </li>
         {/loop}
         <a class="block large" href="{$c->route('chat')}">
-            <li class="action">
-                <div class="action">
-                    <i class="zmdi zmdi-chevron-right"></i>
-                </div>
-                <span class="icon">
+            <li>
+                <span class="primary icon">
                     <i class="zmdi zmdi-comments"></i>
                 </span>
-                <span>{$c->__('hello.chat')}</span>
+                <span class="control icon">
+                    <i class="zmdi zmdi-chevron-right"></i>
+                </span>
+                <p class="normal">{$c->__('hello.chat')}</p>
             </li>
         </a>
     </ul>
     {if="$c->supported('pubsub')"}
-        <ul id="news" class="card shadow flex active">
+        <ul id="news" class="list card shadow flex active">
             {if="empty($news)"}
                 <li>
-                    <span class="icon gray">
+                    <span class="control icon gray">
                         <i class="zmdi zmdi-info-outline"></i>
                     </span>
-                    <span>{$c->__('menu.empty_title')}</span>
+                    <p>{$c->__('menu.empty_title')}</p>
                 </li>
             {/if}
             {loop="$news"}
                 {$attachements = $value->getAttachements()}
-                <li class="block condensed"
+                <li class="block "
                     data-id="{$value->nodeid}"
                     {if="$value->title != null"}
                         title="{$value->title|strip_tags}"
@@ -89,29 +107,34 @@
                 >
                     {$picture = $value->getPicture()}
                     {if="current(explode('.', $value->origin)) == 'nsfw'"}
-                        <span class="icon thumb color red tiny">
+                        <span class="primary icon thumb color red tiny">
                             +18
                         </span>
                     {elseif="$picture != null"}
-                        <span class="icon thumb" style="background-image: url({$picture});"></span>
+                        <span class="primary icon thumb" style="background-image: url({$picture});"></span>
                     {elseif="$value->node == 'urn:xmpp:microblog:0'"}
                         {$url = $value->getContact()->getPhoto('l')}
                         {if="$url"}
-                            <span class="icon thumb" style="background-image: url({$url});">
+                            <span class="primary icon thumb" style="background-image: url({$url});">
                             </span>
                         {else}
-                            <span class="icon thumb color {$value->getContact()->jid|stringToColor}">
+                            <span class="primary icon thumb color {$value->getContact()->jid|stringToColor}">
                                 <i class="zmdi zmdi-account"></i>
                             </span>
                         {/if}
                     {else}
-                        <span class="icon thumb color {$value->node|stringToColor}">{$value->node|firstLetterCapitalize}</span>
+                        <span class="primary icon thumb color {$value->node|stringToColor}">{$value->node|firstLetterCapitalize}</span>
+                    {/if}
+                    {if="$value->privacy"}
+                        <span class="control icon gray" title="{$c->__('menu.public')}">
+                            <i class="zmdi zmdi-portable-wifi"></i>
+                        </span>
                     {/if}
 
                     {if="$value->title != null"}
-                        <span>{$value->title}</span>
+                        <p class="line">{$value->title}</p>
                     {else}
-                        <span>{$c->__('hello.contact_post')}</span>
+                        <p class="line">{$c->__('hello.contact_post')}</p>
                     {/if}
                     <p>
                         {if="$value->node == 'urn:xmpp:microblog:0'"}
@@ -126,50 +149,44 @@
                         {/if}
                         {$value->published|strtotime|prepareDate}
                     </p>
-
-                    {if="$value->privacy"}
-                        <span class="info" title="{$c->__('menu.public')}">
-                            <i class="zmdi zmdi-portable-wifi"></i>
-                        </span>
-                    {/if}
                     <p>{$value->contentcleaned|strip_tags}</p>
 
                 </li>
             {/loop}
             <a href="{$c->route('news')}">
-                <li class="action">
-                    <div class="action">
-                        <i class="zmdi zmdi-chevron-right"></i>
-                    </div>
-                    <span class="icon">
+                <li>
+                    <span class="primary icon">
                         <i class="zmdi zmdi-receipt"></i>
                     </span>
-                    <span>{$c->__('hello.news_page')}</span>
+                    <span class="control icon">
+                        <i class="zmdi zmdi-chevron-right"></i>
+                    </span>
+                    <p class="normal line">{$c->__('hello.news_page')}</p>
                 </li>
             </a>
         </ul>
         <br />
-        <ul class="active thick on_desktop">
+        <ul class="list active on_desktop">
             <a href="{$c->route('blog', array($jid))}" target="_blank">
-                <li class="condensed action">
-                    <div class="action">
-                        <i class="zmdi zmdi-chevron-right"></i>
-                    </div>
-                    <span class="icon">
+                <li>
+                    <span class="primary icon">
                         <i class="zmdi zmdi-portable-wifi"></i>
                     </span>
-                    <span>{$c->__('hello.blog_title')}</span>
+                    <span class="control icon">
+                        <i class="zmdi zmdi-chevron-right"></i>
+                    </span>
+                    <p class="list">{$c->__('hello.blog_title')}</p>
                     <p>{$c->__('hello.blog_text')}</p>
                 </li>
                 <br/>
             </a>
         </ul>
-        <ul class="thick flex on_desktop">
-            <li class="condensed block">
-                <span class="icon bubble color blue">
+        <ul class="list thick flex on_desktop">
+            <li class="block">
+                <span class="primary icon bubble color blue">
                     <i class="zmdi zmdi-share"></i>
                 </span>
-                <span>{$c->__('hello.share_title')}</span>
+                <p class="line">{$c->__('hello.share_title')}</p>
                 <p>{$c->__('hello.share_text')}</p>
             </li>
             <li class="block">
diff --git a/sources/app/widgets/Help/help.tpl b/sources/app/widgets/Help/help.tpl
index d929ab6..7c30a8b 100644
--- a/sources/app/widgets/Help/help.tpl
+++ b/sources/app/widgets/Help/help.tpl
@@ -1,45 +1,41 @@
 <div class="tabelem" title="{$c->__('page.help')}" id="help_widget">
-    <ul class="thick active">
-        <li class="condensed action">
-            <a href="https://github.com/edhelas/movim/wiki" target="_blank">
-                <span class="icon bubble color blue">
-                    <i class="zmdi zmdi-github-alt"></i>
-                </span>
-                <span>{$c->__('wiki.question')}</span>
-                <p>{$c->__('wiki.button')}</p>
-            </a>
-            <div class="action">
+    <ul class="list thick active">
+        <li>
+            <span class="primary icon bubble color blue">
+                <i class="zmdi zmdi-github-alt"></i>
+            </span>
+            <span class="control icon gray">
                 <i class="zmdi zmdi-chevron-right"></i>
-            </div>
+            </span>
+            <p>{$c->__('wiki.question')}</p>
+            <p><a href="https://github.com/edhelas/movim/wiki" target="_blank">{$c->__('wiki.button')}</a></p>
         </li>
-        <li class="condensed action">
-            <a href="https://github.com/edhelas/movim/wiki/Mailing-List" target="_blank">
-                <span class="icon bubble color orange">
-                    <i class="zmdi zmdi-email"></i>
-                </span>
-                <span>{$c->__('ml.question')}</span>
-                <p>{$c->__('ml.button')}</p>
-            </a>
-            <div class="action">
+        <li>
+            <span class="primary icon bubble color orange">
+                <i class="zmdi zmdi-email"></i>
+            </span>
+            <span class="control icon gray">
                 <i class="zmdi zmdi-chevron-right"></i>
-            </div>
+            </span>
+            <p>{$c->__('ml.question')}</p>
+            <p><a href="https://github.com/edhelas/movim/wiki/Mailing-List" target="_blank">{$c->__('ml.button')}</a></p>
         </li>
         <li class="condensed action" onclick="Help_ajaxAddChatroom()">
-            <span class="icon bubble color green">
+            <span class="primary icon bubble color green">
                 <i class="zmdi zmdi-comment-text-alt"></i>
             </span>
-            <span>{$c->__('chatroom.question')}</span>
-            <p>{$c->__('chatroom.button')}<br/>movim@conference.movim.eu</p>
-            <div class="action">
+            <span class="control icon gray">
                 <i class="zmdi zmdi-accounts-add"></i>
-            </div>
+            </span>
+            <p>{$c->__('chatroom.question')}</p>
+            <p>{$c->__('chatroom.button')}<br/>movim@conference.movim.eu</p>
         </li>
     </ul>
     <!--
     <div class="clear spacetop"></div>
 
     <h2 class="padded_top_bottom">{$c->__('help.faq')}</h2>
-    
+
     <div class="card">
         <article>
             <header>
diff --git a/sources/app/widgets/Login/_login_sessions.tpl b/sources/app/widgets/Login/_login_sessions.tpl
index 1cc0469..aafe537 100644
--- a/sources/app/widgets/Login/_login_sessions.tpl
+++ b/sources/app/widgets/Login/_login_sessions.tpl
@@ -1,24 +1,24 @@
 <section>
     <h3>{$c->__('account.title')}</h3>
     <br />
-    <ul class="active">
+    <ul class="list active middle">
         {loop="$sessions"}
-        <li id="{$value->jid}" class="action condensed" title="{$value->jid}">
-            <div class="action">
-                <i class="zmdi zmdi-close"></i>
-            </div>
+        <li id="{$value->jid}" title="{$value->jid}">
             {$url = $value->getPhoto('s')}
             {if="$url"}
-                <span class="icon bubble">
+                <span class="primary icon bubble">
                     <img src="{$url}">
                 </span>
             {else}
-                <span class="icon bubble color {$value->jid|stringToColor}">
+                <span class="primary icon bubble color {$value->jid|stringToColor}">
                     <i class="zmdi zmdi-account"></i>
                 </span>
             {/if}
-            <span>{$value->getTrueName()}</span>
-            <p>{$value->jid}</p>
+            <span class="control icon gray">
+                <i class="zmdi zmdi-close"></i>
+            </span>
+            <p class="line">{$value->getTrueName()}</p>
+            <p class="line">{$value->jid}</p>
         </li>
         {/loop}
     </ul>
diff --git a/sources/app/widgets/Login/login.css b/sources/app/widgets/Login/login.css
index dc08f2d..7dc0f5c 100644
--- a/sources/app/widgets/Login/login.css
+++ b/sources/app/widgets/Login/login.css
@@ -7,14 +7,8 @@ body main {
     background-size: 30rem auto, 100% 100%;
 }
 
-body main > header {
-    box-shadow: none;
-    background-color: transparent;
-}
-
 @media screen and (max-width: 600px) {
     body main {
-        /*background-image: none;*/
         background-image: url(img/logo_cloud.svg);
         background-size: auto 2.6rem, 100% 100%;
         background-position: center 2.25rem;
@@ -27,14 +21,6 @@ body main > header {
     }
 }
 
-#login_widget li.new_account {
-    text-align: center;
-}
-
-#login_widget li.info {
-    padding: 1rem;
-}
-
 #login_widget > div {
     display: none;
 }
@@ -60,7 +46,6 @@ body main > header {
 
 #login_widget form ul input {
     margin: 0;
-    display: block;
     height: 5rem;
 }
 
diff --git a/sources/app/widgets/Login/login.tpl b/sources/app/widgets/Login/login.tpl
index 37cc397..8065ed8 100644
--- a/sources/app/widgets/Login/login.tpl
+++ b/sources/app/widgets/Login/login.tpl
@@ -30,47 +30,48 @@
                     <label for="pass">{$c->__('form.password')}</label>
                 </div>
                 <div>
-                    <ul class="simple thin">
-                        <li class="action">
-                            <div class="action">
+                    <ul class="list thin">
+                        <li>
+                            <p class="center">
+                                <a id="return_sessions" class="button flat" href="#" onclick="Login.toChoose()">
+                                    {$c->__('account.title')}
+                                </a>
                                 <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.toChoose()">
-                                {$c->__('account.title')}
-                            </a>
+                            </p>
                         </li>
                     </ul>
                 </div>
             </form>
 
             {if="isset($info) && $info != ''"}
-            <ul class="thin simple card">
+            <ul class="list thin card">
                 <li class="info">
-                    <p>{$info}</p>
+                    <p class="normal">{$info}</p>
                 </li>
             </ul>
             {/if}
 
             {if="isset($whitelist) && $whitelist != ''"}
-            <ul class="thin simple card">
+            <ul class="list thin card">
                 <li class="info">
-                    <p>{$c->__('whitelist.info')} : {$whitelist}</p>
+                    <p class="normal">{$c->__('whitelist.info')} : {$whitelist}</p>
                 </li>
             </ul>
             {/if}
 
-            <ul class="thin simple">
-                <li class="new_account">
-                    <span>{$c->__('form.no_account')}<br />
+            <ul class="list thin">
+                <li>
+                    <p class="normal center">
+                        {$c->__('form.no_account')}
                         <a class="button flat" href="{$c->route('account')}">
                             {$c->__('form.create_one')}
                         </a>
-                    </span>
+                    </p>
                 </li>
             </ul>
         </section>
diff --git a/sources/app/widgets/Menu/Menu.php b/sources/app/widgets/Menu/Menu.php
index ff7c9b0..4f0c978 100644
--- a/sources/app/widgets/Menu/Menu.php
+++ b/sources/app/widgets/Menu/Menu.php
@@ -108,6 +108,7 @@ class Menu extends WidgetBase
             RPC::call('movim_posts_unread', 0);
         }
         RPC::call('Menu.refresh');
+        //RPC::call('MovimTpl.scrollTop');
     }
 
     function ajaxRefresh()
@@ -162,6 +163,7 @@ class Menu extends WidgetBase
         }
 
         $view->assign('items', $items);
+        $view->assign('type', $type);
         $view->assign('page', $page);
         $view->assign('paging', $this->_paging);
 
diff --git a/sources/app/widgets/Menu/_menu_list.tpl b/sources/app/widgets/Menu/_menu_list.tpl
index 1d36244..64e1975 100644
--- a/sources/app/widgets/Menu/_menu_list.tpl
+++ b/sources/app/widgets/Menu/_menu_list.tpl
@@ -1,7 +1,29 @@
+{if="$page == 0"}
+    <header>
+        <ul class="list middle">
+            <li>
+                <span id="menu" class="primary on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
+                <span class="primary on_desktop icon gray"><i class="zmdi zmdi-filter-list"></i></span>
+                <p class="center line">{$c->__('page.news')}</p>
+            </li>
+        </ul>
+        <ul>
+            <li>
+                <ul class="tabs wide">
+                    <li {if="$type == 'all'"}class="active"{/if}><a href="#" onclick="Menu_ajaxGetAll()">{$c->__('menu.all')}</a></li>
+                    <li {if="$type == 'news'"}class="active"{/if} ><a href="#" onclick="Menu_ajaxGetNews()"><i class="zmdi zmdi-pages"></i></a></li>
+                    <li {if="$type == 'feed'"}class="active"{/if}><a href="#" onclick="Menu_ajaxGetFeed()"><i class="zmdi zmdi-accounts"></i></a></li>
+                    <li {if="$type == 'me'"}class="active"{/if}><a href="#" onclick="Menu_ajaxGetMe()"><i class="zmdi zmdi-portable-wifi"></i></a></li>
+                </ul>
+            </li>
+        </ul>
+    </header>
+{/if}
+
 {if="$items"}
     {if="$page == 0"}
         <div id="menu_refresh"></div>
-        <ul class="card shadow active flex stacked" id="menu_wrapper">
+        <ul class="list card shadow active flex stacked" id="menu_wrapper">
     {/if}
 
     {loop="$items"}
@@ -24,25 +46,31 @@
                     +18
                 </span>
             {elseif="$picture != null"}
-                <span class="icon thumb" style="background-image: url({$picture});"></span>
+                <span class="primary icon thumb" style="background-image: url({$picture});"></span>
             {elseif="$value->node == 'urn:xmpp:microblog:0'"}
                 {$url = $value->getContact()->getPhoto('l')}
                 {if="$url"}
-                    <span class="icon thumb" style="background-image: url({$url});">
+                    <span class="primary icon thumb" style="background-image: url({$url});">
                     </span>
                 {else}
-                    <span class="icon thumb color {$value->getContact()->jid|stringToColor}">
+                    <span class="primary icon thumb color {$value->getContact()->jid|stringToColor}">
                         <i class="zmdi zmdi-account"></i>
                     </span>
                 {/if}
             {else}
-                <span class="icon thumb color {$value->node|stringToColor}">{$value->node|firstLetterCapitalize}</span>
+                <span class="primary icon thumb color {$value->node|stringToColor}">{$value->node|firstLetterCapitalize}</span>
+            {/if}
+
+            {if="$value->privacy"}
+                <span class="control icon gray" title="{$c->__('menu.public')}">
+                    <i class="zmdi zmdi-portable-wifi"></i>
+                </span>
             {/if}
 
             {if="$value->title != null"}
-                <span>{$value->title}</span>
+                <p class="line">{$value->title}</p>
             {else}
-                <span>{$c->__('menu.contact_post')}</span>
+                <p class="line">{$c->__('menu.contact_post')}</p>
             {/if}
             <p>
                 {if="$value->node == 'urn:xmpp:microblog:0'"}
@@ -58,19 +86,13 @@
                 {$value->published|strtotime|prepareDate}
                 {if="$value->published != $value->updated"}<i class="zmdi zmdi-edit"></i>{/if}
             </p>
-
-            {if="$value->privacy"}
-                <span class="info" title="{$c->__('menu.public')}">
-                    <i class="zmdi zmdi-portable-wifi"></i>
-                </span>
-            {/if}
             <p>{$value->contentcleaned|stripTags}</p>
         </li>
     {/loop}
     {if="count($items) == $paging"}
     <li id="history" class="block large" onclick="{$history} this.parentNode.removeChild(this);">
-        <span class="icon"><i class="zmdi zmdi-time-restore"></i></span>
-        <span>{$c->__('post.older')}</span>
+        <span class="icon primary"><i class="zmdi zmdi-time-restore"></i></span>
+        <p class="normal center">{$c->__('post.older')}</p>
     </li>
     {/if}
 
diff --git a/sources/app/widgets/Menu/_menu_refresh.tpl b/sources/app/widgets/Menu/_menu_refresh.tpl
index 5e9b9f9..3e9b3df 100644
--- a/sources/app/widgets/Menu/_menu_refresh.tpl
+++ b/sources/app/widgets/Menu/_menu_refresh.tpl
@@ -1,7 +1,7 @@
-<ul class="card thin shadow flex stacked active">
-    <li class="block condensed" onclick="{$refresh} Notification_ajaxClear('news');">
-        <span class="icon"><i class="zmdi zmdi-refresh-sync"></i></span>
-        <span> {$c->__('button.refresh')}</span>
+<ul class="list card thin shadow flex stacked active">
+    <li class="block" onclick="{$refresh} Notification_ajaxClear('news');">
+        <span class="primary icon"><i class="zmdi zmdi-refresh-sync"></i></span>
+        <p>{$c->__('button.refresh')}</p>
         <p>{$c->__('post.new_items', $count)}</p>
     </li>
 </ul>
diff --git a/sources/app/widgets/Menu/locales.ini b/sources/app/widgets/Menu/locales.ini
index da24229..e4d315d 100644
--- a/sources/app/widgets/Menu/locales.ini
+++ b/sources/app/widgets/Menu/locales.ini
@@ -4,3 +4,8 @@ contact_post   = Contact post
 empty          = Welcome on your news feed, here you will see all the posts published by your contacts and in the groups you have subscribed.
 refresh        = Refreshing all the streams
 public         = This post is public
+
+all        = All
+groups     = Groups
+contacts   = Contacts
+refresh    = Refresh all the streams
diff --git a/sources/app/widgets/Navigation/navigation.tpl b/sources/app/widgets/Navigation/navigation.tpl
index efd6f20..2699da5 100644
--- a/sources/app/widgets/Navigation/navigation.tpl
+++ b/sources/app/widgets/Navigation/navigation.tpl
@@ -1,48 +1,49 @@
-<ul class="active">
+<ul class="list active">
     <a class="classic on_mobile" href="#">
-        <li class="action" onclick="MovimTpl.toggleMenu()">
-            <span class="icon bubble on_mobile"><i class="zmdi zmdi-menu"></i></span>
-            <span>Movim</span>
+        <li onclick="MovimTpl.toggleMenu()">
+            <span class="primary icon bubble on_mobile"><i class="zmdi zmdi-menu"></i></span>
+            <span class="control icon bubble"><i class="zmdi zmdi-arrow-back"></i></span>
+            <p class="normal">Movim</p>
         </li>
     </a>
     <a class="classic on_desktop" href="{$c->route('root')}">
-        <li class="action {if="$page == 'main'"}active{/if}">
-            <span class="icon bubble"><i class="zmdi zmdi-cloud-outline"></i></span>
-            <span>{$c->__('page.home')}</span>
+        <li class="{if="$page == 'main'"}active{/if}">
+            <span class="primary icon bubble"><i class="zmdi zmdi-cloud-outline"></i></span>
+            <p class="normal">{$c->__('page.home')}</p>
         </li>
     </a>
     <a class="classic on_mobile" href="{$c->route('root')}">
-        <li class="action {if="$page == 'main'"}active{/if}">
-            <span class="icon bubble"><i class="zmdi zmdi-home"></i></span>
-            <span>{$c->__('page.home')}</span>
+        <li class="{if="$page == 'main'"}active{/if}">
+            <span class="primary icon bubble"><i class="zmdi zmdi-home"></i></span>
+            <p class="normal">{$c->__('page.home')}</p>
         </li>
     </a>
     <a class="classic {if="!$c->supported('pubsub')"}disabled{/if}" href="{$c->route('news')}">
         <li {if="$page == 'news'"}class="active"{/if}>
-            <span class="icon"><i class="zmdi zmdi-receipt"></i></span>
+            <span class="primary icon"><i class="zmdi zmdi-receipt"></i></span>
             <span data-key="news" class="counter"></span>
-            <span>{$c->__('page.news')}</span>
+            <p class="normal">{$c->__('page.news')}</p>
         </li>
     </a>
     <a class="classic" href="{$c->route('contact')}">
         <li {if="$page == 'contact'"}class="active"{/if}>
-            <span class="icon"><i class="zmdi zmdi-accounts"></i></span>
+            <span class="primary icon"><i class="zmdi zmdi-accounts"></i></span>
             <span data-key="invite" class="counter"></span>
-            <span>{$c->__('page.contacts')}</span>
+            <p class="normal">{$c->__('page.contacts')}</p>
         </li>
     </a>
     <a class="classic {if="!$c->supported('pubsub')"}disabled{/if}" href="{$c->route('group')}">
         <li {if="$page == 'group'"}class="active"{/if}>
-            <span class="icon"><i class="zmdi zmdi-pages"></i></span>
+            <span class="primary icon"><i class="zmdi zmdi-pages"></i></span>
             <span class="counter"></span>
-            <span>{$c->__('page.groups')}</span>
+            <p class="normal">{$c->__('page.groups')}</p>
         </li>
     </a>
     <a class="classic" href="{$c->route('chat')}">
         <li {if="$page == 'chat'"}class="active"{/if}>
-            <span class="icon"><i class="zmdi zmdi-comments"></i></span>
+            <span class="primary icon"><i class="zmdi zmdi-comments"></i></span>
             <span data-key="chat" class="counter"></span>
-            <span>{$c->__('page.chats')}</span>
+            <p class="normal">{$c->__('page.chats')}</p>
         </li>
     </a>
     <!--
@@ -54,3 +55,22 @@
         </li>
     </a>-->
 </ul>
+
+<ul class="list oppose active">
+    <a class="classic {if="!$c->supported('pubsub')"}disabled{/if}" href="{$c->route('conf')}">
+        <li>
+            <span class="primary icon">
+                <i class="zmdi zmdi-settings"></i>
+            </span>
+            <p class="normal">{$c->__('page.configuration')}</p>
+        </li>
+    </a>
+    <a class="classic" href="{$c->route('help')}">
+        <li>
+            <span class="primary icon">
+                <i class="zmdi zmdi-help"></i>
+            </span>
+            <p class="normal">{$c->__('page.help')}</p>
+        </li>
+    </a>
+</ul>
diff --git a/sources/app/widgets/Notification/_notification.tpl b/sources/app/widgets/Notification/_notification.tpl
index 6eb151d..4582cd6 100644
--- a/sources/app/widgets/Notification/_notification.tpl
+++ b/sources/app/widgets/Notification/_notification.tpl
@@ -1,12 +1,12 @@
 {if="isset($action)"}
 <a href="{$action}">
 {/if}
-    <ul class="{if="!isset($picture)"}simple{/if}">
-        <li class="{if="isset($body)"}condensed{/if}">
+    <ul class="list">
+        <li>
         {if="isset($picture)"}
-            <span class="icon bubble"><img src="{$picture}"></span>
+            <span class="primary icon bubble"><img src="{$picture}"></span>
         {/if}
-        <span>{$title}</span>
+        <p>{$title}</p>
         {if="isset($body)"}
             <p>{$body}</p>
         {/if}
diff --git a/sources/app/widgets/Notification/notification.js b/sources/app/widgets/Notification/notification.js
index 2a35d36..7e73444 100644
--- a/sources/app/widgets/Notification/notification.js
+++ b/sources/app/widgets/Notification/notification.js
@@ -77,7 +77,7 @@ var Notification = {
 
             if(Notification.favicon != null)
                 Notification.favicon.badge(Notification.tab_counter1 + Notification.tab_counter2);
-            
+
             if(Notification.electron != null)
                 Notification.electron.notification(Notification.tab_counter1 + Notification.tab_counter2);
         }
diff --git a/sources/app/widgets/Notifs/_notifs_confirm.tpl b/sources/app/widgets/Notifs/_notifs_confirm.tpl
index 8ff2dd0..fd4e8ba 100644
--- a/sources/app/widgets/Notifs/_notifs_confirm.tpl
+++ b/sources/app/widgets/Notifs/_notifs_confirm.tpl
@@ -2,18 +2,18 @@
     <h3>{$c->__('notifs.manage')}</h3>
     <br />
     <h4 class="gray">{$c->__('notifs.wants_to_talk', $jid)}</h4>
-    <ul class="active">
+    <ul class="list active">
         <li onclick="Notifs_ajaxAccept('{$jid|echapJS}'); Dialog.clear();">
-            <span class="icon green">
+            <span class="icon control green">
                 <i class="zmdi zmdi-account-add"></i>
             </span>
-            {$c->__('button.accept')}
+            <p class="normal">{$c->__('button.accept')}</p>
         </li>
         <li onclick="Notifs_ajaxRefuse('{$jid|echapJS}'); Dialog.clear();">
-            <span class="icon red">
+            <span class="control icon red">
                 <i class="zmdi zmdi-close"></i>
             </span>
-            {$c->__('button.refuse')}
+            <p class="normal">{$c->__('button.refuse')}</p>
         </li>
     </ul>
 
diff --git a/sources/app/widgets/Notifs/_notifs_from.tpl b/sources/app/widgets/Notifs/_notifs_from.tpl
index 041d7da..5845291 100644
--- a/sources/app/widgets/Notifs/_notifs_from.tpl
+++ b/sources/app/widgets/Notifs/_notifs_from.tpl
@@ -1,31 +1,31 @@
-<ul class="active all">
+<ul class="list active middle">
     {if="$invitations"}
     <li class="subheader">
-        {$c->__('notifs.title')}
-        <span class="info">{$invitations|count}</span>
+        <p>
+            <span class="info">{$invitations|count}</span>
+            {$c->__('notifs.title')}
+        </p>
     </li>
     {/if}
     {loop="$invitations"}
         {if="isset($value)"}
         <li data-jid="{$value->jid}" class="action">
-            <div class="action">
-                <a class="button flat" data-jid="{$value->jid}">
-                    {$c->__('notifs.manage')}
-                </a>
-            </div>
             {$url = $value->getPhoto('s')}
             {if="$url"}
-                <span class="icon bubble">
+                <span class="primary icon bubble">
                     <img src="{$url}">
                 </span>
             {else}
-                <span class="icon bubble color {$value->jid|stringToColor}">
+                <span class="primary icon bubble color {$value->jid|stringToColor}">
                     <i class="zmdi zmdi-account"></i>
                 </span>
             {/if}
-            <span href="{$c->route('contact', $value->jid)}">
-                {$value->getTrueName()}
+            <span class="control icon active green" data-jid="{$value->jid}">
+                <i class="zmdi zmdi-settings"></i>
             </span>
+            <p class="normal line">
+                {$value->getTrueName()}
+            </p>
         </li>
         {/if}
     {/loop}
diff --git a/sources/app/widgets/Notifs/locales.ini b/sources/app/widgets/Notifs/locales.ini
index 4380b4b..3d59e2f 100644
--- a/sources/app/widgets/Notifs/locales.ini
+++ b/sources/app/widgets/Notifs/locales.ini
@@ -1,4 +1,3 @@
 [notifs]
 title        = Pending Invitations
 wants_to_talk= %s wants to talk with you
-manage       = Manage
diff --git a/sources/app/widgets/Notifs/notifs.js b/sources/app/widgets/Notifs/notifs.js
index 68366f4..c9fa30f 100644
--- a/sources/app/widgets/Notifs/notifs.js
+++ b/sources/app/widgets/Notifs/notifs.js
@@ -17,7 +17,7 @@ var Notifs = {
                 movim_add_class(this, 'active');
             }
 
-            items[i].querySelector('a.button.flat').onclick = function(e) {
+            items[i].querySelector('span.control.icon').onclick = function(e) {
                 Notifs_ajaxAsk(this.dataset.jid);
             }
             i++;
diff --git a/sources/app/widgets/Post/Post.php b/sources/app/widgets/Post/Post.php
index 7b899a6..aa47fc0 100644
--- a/sources/app/widgets/Post/Post.php
+++ b/sources/app/widgets/Post/Post.php
@@ -31,7 +31,6 @@ class Post extends WidgetBase
 {
     function load()
     {
-        $this->addcss('post.css');
         $this->addjs('post.js');
         $this->registerEvent('microblog_commentsget_handle', 'onComments');
         $this->registerEvent('microblog_commentpublish_handle', 'onCommentPublished');
@@ -107,10 +106,11 @@ class Post extends WidgetBase
            ->request();
 
         $html = $this->preparePost($p);
-        $header = $this->prepareHeader($id);
+        //$header = $this->prepareHeader($id);
 
-        Header::fill($header);
+        //Header::fill($header);
         RPC::call('movim_fill', 'post_widget', $html);
+        RPC::call('MovimTpl.scrollHeaders');
     }
 
     function ajaxDelete($to, $node, $id)
@@ -172,6 +172,7 @@ class Post extends WidgetBase
         return $view->draw('_post_empty', true);
     }
 
+    /*
     function prepareHeader($id)
     {
         $pd = new \Modl\PostnDAO;
@@ -187,7 +188,7 @@ class Post extends WidgetBase
 
         return $view->draw('_post_header', true);
     }
-
+    */
     function preparePost($p, $external = false, $public = false)
     {
         $view = $this->tpl();
diff --git a/sources/app/widgets/Post/_post.tpl b/sources/app/widgets/Post/_post.tpl
index 6d388a6..92627b1 100644
--- a/sources/app/widgets/Post/_post.tpl
+++ b/sources/app/widgets/Post/_post.tpl
@@ -1,89 +1,128 @@
+{if="$external || $public"}
 <article class="block">
-    {if="isset($attachements.pictures)"}
-        {if="($public && $post->isPublic()) || !$public"}
-            <header
-                class="big"
-                style="
-                    background-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 100%), url('{$attachements['pictures'][0]['href']}');">
-        {/if}
-    {else}
-    <header>
+{/if}
+
+{if="isset($attachements.pictures)"}
+    {if="($public && $post->isPublic()) || !$public"}
+        <header
+            class="big"
+            style="
+                background-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 100%), url('{$attachements['pictures'][0]['href']}');">
     {/if}
-        <ul class="thick">
-            <li class="condensed">
-                {if="$recycled"}
-                    {$contact = $recycled}
-                {else}
-                    {$contact = $post->getContact()}
+{else}
+<header>
+{/if}
+    {if="!$external && !$public"}
+        <ul class="list middle">
+            <li>
+                <span class="primary icon active" onclick="MovimTpl.hidePanel(); Post_ajaxClear();">
+                    <i class="zmdi zmdi-arrow-back"></i>
+                </span>
+
+                {if="$post->isMine() && !$public"}
+                    {if="$post->isEditable()"}
+                        <span class="control icon active" onclick="Publish_ajaxCreate('{$post->origin}', '{$post->node}', '{$post->nodeid}')" title="{$c->__('button.edit')}">
+                            <i class="zmdi zmdi-edit"></i>
+                        </span>
+                    {/if}
+                    <span class="control icon active" onclick="Post_ajaxDelete('{$post->origin}', '{$post->node}', '{$post->nodeid}')" title="{$c->__('button.delete')}">
+                        <i class="zmdi zmdi-delete"></i>
+                    </span>
                 {/if}
 
-                {if="$post->node == 'urn:xmpp:microblog:0'"}
-                    <a href="{$c->route('contact', $contact->jid)}">
-                        {$url = $contact->getPhoto('s')}
-                        {if="$url"}
-                            <span class="icon bubble">
-                                <img src="{$url}">
-                            </span>
-                        {else}
-                            <span class="icon bubble color {$contact->jid|stringToColor}">
-                                <i class="zmdi zmdi-account"></i>
-                            </span>
-                        {/if}
-                    </a>
-                {else}
-                    <a href="{$c->route('group', array($post->origin, $post->node))}">
-                        <span class="icon bubble color {$post->node|stringToColor}">{$post->node|firstLetterCapitalize}</span>
-                    </a>
-                {/if}
-                <h2 {if="$post->title != null"}title="{$post->title|strip_tags}"{/if}>
-                    <a  {if="$public"}
-                            {if="$post->isMicroblog()"}
-                            href="{$c->route('blog', array($post->origin, $post->nodeid))}"
-                            {else}
-                            href="{$c->route('node', array($post->origin, $post->node, $post->nodeid))}"
-                            {/if}
-                        {else}
-                            href="{$c->route('news', $post->nodeid)}"
-                        {/if}
-                        >
-                        {if="$post->title != null"}
-                            {$post->title}
-                        {else}
-                            {$c->__('post.default_title')}
-                        {/if}
-                    </a>
-                </h2>
-                <p>
-                    {if="$contact->getTrueName() != ''"}
-                        {if="!$public"}
-                        <a href="{$c->route('contact', $contact->jid)}">
-                        {/if}
-                            <i class="zmdi zmdi-account"></i> {$contact->getTrueName()}
-                        {if="!$public"}</a>{/if} –
-                    {/if}
-                    {if="$post->node != 'urn:xmpp:microblog:0'"}
-                        {$post->origin} /
-                        {if="!$public"}
-                        <a href="{$c->route('group', array($post->origin, $post->node))}">
-                        {/if}
-                            <i class="zmdi zmdi-pages"></i> {$post->node}
-                        {if="!$public"}</a>{/if} –
-                    {/if}
-                    {$post->published|strtotime|prepareDate}
-                    {if="$post->published != $post->updated"}
-                        - <i class="zmdi zmdi-edit"></i> {$post->updated|strtotime|prepareDate}
+                <p class="line">
+                    {if="$post->title != null"}
+                        {$post->title}
+                    {else}
+                        {$c->__('post.default_title')}
                     {/if}
                 </p>
             </li>
-        </ul>
-    </header>
+        </div>
+    {/if}
+
+    <ul class="list thick">
+        <li>
+            {if="$recycled"}
+                {$contact = $recycled}
+            {else}
+                {$contact = $post->getContact()}
+            {/if}
+
+            {if="$post->node == 'urn:xmpp:microblog:0'"}
+                {$url = $contact->getPhoto('s')}
+                {if="$url"}
+                    <span class="icon primary bubble">
+                        <a href="{$c->route('contact', $contact->jid)}">
+                            <img src="{$url}">
+                        </a>
+                    </span>
+                {else}
+                    <span class="icon primary bubble color {$contact->jid|stringToColor}">
+                        <a href="{$c->route('contact', $contact->jid)}">
+                            <i class="zmdi zmdi-account"></i>
+                        </a>
+                    </span>
+                {/if}
+            {else}
+                <span class="icon primary bubble color {$post->node|stringToColor}">
+                    {$post->node|firstLetterCapitalize}
+                </span>
+            {/if}
+            <p {if="$post->title != null"}title="{$post->title|strip_tags}"{/if}>
+                <a  {if="$public"}
+                        {if="$post->isMicroblog()"}
+                        href="{$c->route('blog', array($post->origin, $post->nodeid))}"
+                        {else}
+                        href="{$c->route('node', array($post->origin, $post->node, $post->nodeid))}"
+                        {/if}
+                    {else}
+                        href="{$c->route('news', $post->nodeid)}"
+                    {/if}
+                    >
+                    {if="$post->title != null"}
+                        {$post->title}
+                    {else}
+                        {$c->__('post.default_title')}
+                    {/if}
+                </a>
+            </p>
+            <p>
+                {if="$contact->getTrueName() != ''"}
+                    {if="!$public"}
+                    <a href="{$c->route('contact', $contact->jid)}">
+                    {/if}
+                        <i class="zmdi zmdi-account"></i> {$contact->getTrueName()}
+                    {if="!$public"}</a>{/if} –
+                {/if}
+                {if="$post->node != 'urn:xmpp:microblog:0'"}
+                    {$post->origin} /
+                    {if="!$public"}
+                    <a href="{$c->route('group', array($post->origin, $post->node))}">
+                    {/if}
+                        <i class="zmdi zmdi-pages"></i> {$post->node}
+                    {if="!$public"}</a>{/if} –
+                {/if}
+                {$post->published|strtotime|prepareDate}
+                {if="$post->published != $post->updated"}
+                    - <i class="zmdi zmdi-edit"></i> {$post->updated|strtotime|prepareDate}
+                {/if}
+            </p>
+
+        </li>
+    </ul>
+</header>
+
+{if="!$external && !$public"}
+<article class="block">
+{/if}
     {if="$public && !$post->isPublic()"}
-        <ul class="thick">
+        <ul class="list thick">
             <li>
-                <span class="icon color gray bubble">
+                <span class="primary icon color gray bubble">
                     <i class="zmdi zmdi-lock"></i>
                 </span>
-                <p class="center"> {$c->__('blog.private')} - <a href="{$c->route('main')}">{$c->__('page.login')}</a></p>
+                <p class="line center normal"> {$c->__('blog.private')} - <a href="{$c->route('main')}">{$c->__('page.login')}</a></p>
             </li>
         </ul>
         <br />
@@ -108,28 +147,30 @@
         <footer>
             {$tags = $post->getTags()}
             {if="isset($tags)"}
-                <ul class="middle">
+                <ul class="list middle">
                     <li>
-                        <span class="icon zmdi zmdi-tag gray"></span>
-                        <span>
+                        <span class="primary icon zmdi zmdi-tag gray"></span>
+                        <p class="normal">
                             {loop="$tags"}
                                 <a target="_blank" href="{$c->route('tag', array($value))}">#{$value}</a>
                             {/loop}
-                        </span>
+                        </p>
                     </li>
                 </ul>
             {/if}
-            <ul class="middle divided spaced">
+            <ul class="list middle divided spaced">
                 {if="isset($attachements.links)"}
                     {loop="$attachements.links"}
                         {if="substr($value.href, 0, 5) != 'xmpp:' && filter_var($value.href, FILTER_VALIDATE_URL)"}
                             <li>
-                                <span class="icon">
+                                <span class="primary icon">
                                     <img src="https://icons.duckduckgo.com/ip2/{$value.url.host}.ico"/>
                                 </span>
-                                <a href="{$value.href}" class="alternate" target="_blank">
-                                    <span>{$value.href|urldecode}</span>
-                                </a>
+                                <p class="normal line">
+                                    <a href="{$value.href}" class="alternate" target="_blank">
+                                        {$value.href|urldecode}
+                                    </a>
+                                </p>
                             </li>
                         {/if}
                     {/loop}
@@ -137,25 +178,27 @@
                 {if="isset($attachements.files)"}
                     {loop="$attachements.files"}
                         <li>
-                            <a
-                                href="{$value.href}"
-                                class="enclosure"
-                                type="{$value.type}"
-                                target="_blank">
-                                <span class="icon gray">
-                                    <span class="zmdi zmdi-attachment-alt"></span>
-                                </span>
-                                <span>{$value.href|urldecode}</span>
-                            </a>
+                            <span class="primary icon gray">
+                                <span class="zmdi zmdi-attachment-alt"></span>
+                            </span>
+                            <p class="normal line">
+                                <a
+                                    href="{$value.href}"
+                                    class="enclosure"
+                                    type="{$value.type}"
+                                    target="_blank">
+                                {$value.href|urldecode}
+                                </a>
+                            </p>
                         </li>
                     {/loop}
                 {/if}
             </ul>
             {if="!$post->isShort() && isset($attachements.pictures)"}
-                <ul class="flex middle">
+                <ul class="list flex middle">
                 {loop="$attachements.pictures"}
                     <li class="block pic">
-                        <span class="icon gray">
+                        <span class="primary icon gray">
                             <i class="zmdi zmdi-image"></i>
                         </span>
                         <a href="{$value.href}" class="alternate" target="_blank">
@@ -166,36 +209,38 @@
                 </ul>
             {/if}
             {if="$post->isMine() && !$public"}
-                <ul class="middle">
-                    <li class="action">
-                        <form>
-                            <div class="action">
-                                <div class="checkbox">
-                                    <input
-                                        type="checkbox"
-                                        id="privacy"
-                                        name="privacy"
-                                        {if="$post->privacy"}
-                                            checked
-                                        {/if}
-                                        {if="$external"}
-                                            onclick="Group_ajaxTogglePrivacy('{$post->nodeid}')"
-                                        {else}
-                                            onclick="Post_ajaxTogglePrivacy('{$post->nodeid}')"
-                                        {/if}
-                                    >
-                                    <label for="privacy"></label>
-                                </div>
-                            </div>
-                        </form>
-                        <span class="icon gray">
+                <ul class="list middle">
+                    <li>
+                        <span class="primary icon gray">
                             <i class="zmdi zmdi-portable-wifi"></i>
                         </span>
-                        <span>
+                        <span class="control">
+                            <form>
+                                <div class="action">
+                                    <div class="checkbox">
+                                        <input
+                                            type="checkbox"
+                                            id="privacy"
+                                            name="privacy"
+                                            {if="$post->privacy"}
+                                                checked
+                                            {/if}
+                                            {if="$external"}
+                                                onclick="Group_ajaxTogglePrivacy('{$post->nodeid}')"
+                                            {else}
+                                                onclick="Post_ajaxTogglePrivacy('{$post->nodeid}')"
+                                            {/if}
+                                        >
+                                        <label for="privacy"></label>
+                                    </div>
+                                </div>
+                            </form>
+                        </span>
+                        <p class="line normal">
                             <a target="_blank" href="{$post->getPublicUrl()}">
                                 {$c->__('post.public')}
                             </a>
-                        </span>
+                        </p>
                     </li>
                 </ul>
             {/if}
@@ -203,23 +248,24 @@
 
         {if="$recycled"}
             <a href="{$c->route('contact', $post->getContact()->jid)}">
-                <ul class="active middle">
-                    <li class="condensed action">
-                        <div class="action">
-                            <i class="zmdi zmdi-chevron-right"></i>
-                        </div>
+                <ul class="list active middle">
+                    <li>
                         {$url = $post->getContact()->getPhoto('s')}
                         {if="$url"}
-                            <span class="icon bubble" style="background-image: url('{$url}');">
+                            <span class="primary icon bubble" style="background-image: url('{$url}');">
                                 <i class="zmdi zmdi-loop"></i>
                             </span>
                         {else}
-                            <span class="icon bubble color {$post->getContact()->jid|stringToColor}">
+                            <span class="primary icon bubble color {$post->getContact()->jid|stringToColor}">
                                 <i class="zmdi zmdi-loop"></i>
                             </span>
                         {/if}
 
-                        <span>{$c->__('post.repost', $post->getContact()->getTrueName())}</span>
+                        <div class="control">
+                            <i class="zmdi zmdi-chevron-right"></i>
+                        </div>
+
+                        <p>{$c->__('post.repost', $post->getContact()->getTrueName())}</p>
                         <p>{$c->__('post.repost_profile', $post->getContact()->getTrueName())}</p>
                     </li>
                 </ul>
@@ -229,28 +275,30 @@
         {if="$external"}
             {$comments = $c->getComments($post)}
             {if="$comments"}
-                <ul class="spaced middle">
+                <ul class="list spaced middle">
                     <li class="subheader">
-                        {$c->__('post.comments')}
-                        <span class="info">{$comments|count}</span>
+                        <p>
+                            <span class="info">{$comments|count}</span>
+                            {$c->__('post.comments')}
+                        </p>
                     </li>
                     {loop="$comments"}
-                        <li class="condensed">
+                        <li>
                             {$url = $value->getContact()->getPhoto('s')}
                             {if="$url"}
-                                <span class="icon bubble">
+                                <span class="primary icon bubble">
                                     <img src="{$url}">
                                 </span>
                             {else}
-                                <span class="icon bubble color {$value->getContact()->jid|stringToColor}">
+                                <span class="primary icon bubble color {$value->getContact()->jid|stringToColor}">
                                     <i class="zmdi zmdi-account"></i>
                                 </span>
                             {/if}
-                            <span class="info">{$value->published|strtotime|prepareDate}</span>
-                            <span>
+                            <p>
                                 {$value->getContact()->getTrueName()}
-                            </span>
-                            <p class="all">
+                            </p>
+                            <p>
+                                <span class="info">{$value->published|strtotime|prepareDate}</span>
                                 {if="$value->title"}
                                     {$value->title}
                                 {else}
diff --git a/sources/app/widgets/Post/_post_comments.tpl b/sources/app/widgets/Post/_post_comments.tpl
index d772225..461debf 100644
--- a/sources/app/widgets/Post/_post_comments.tpl
+++ b/sources/app/widgets/Post/_post_comments.tpl
@@ -1,33 +1,35 @@
-<ul class="divided spaced middle">
+<ul class="list divided spaced middle">
     <li class="subheader">
-        {$c->__('post.comments')}
-        <span class="info">{$comments|count}</span>
+        <p><span class="info">{$comments|count}</span> {$c->__('post.comments')}</p>
     </li>
     {loop="$comments"}
-        <li class="condensed {if="$value->isMine()"}action{/if}">
+        <li>
             {if="$value->isMine()"}
-                <div class="action" onclick="Post_ajaxDelete('{$value->origin}', '{$value->node}', '{$value->nodeid}')">
+                <span class="control icon gray active" onclick="Post_ajaxDelete('{$value->origin}', '{$value->node}', '{$value->nodeid}')">
                     <i class="zmdi zmdi-delete"></i>
-                </div>
+                </span>
             {/if}
-            <a href="{$c->route('contact', $value->getContact()->jid)}">
-                {$url = $value->getContact()->getPhoto('s')}
-                {if="$url"}
-                    <span class="icon bubble">
+
+            {$url = $value->getContact()->getPhoto('s')}
+            {if="$url"}
+                <span class="primary icon bubble">
+                    <a href="{$c->route('contact', $value->getContact()->jid)}">
                         <img src="{$url}">
-                    </span>
-                {else}
-                    <span class="icon bubble color {$value->getContact()->jid|stringToColor}">
+                    </a>
+                </span>
+            {else}
+                <span class="primary icon bubble color {$value->getContact()->jid|stringToColor}">
+                    <a href="{$c->route('contact', $value->getContact()->jid)}">
                         <i class="zmdi zmdi-account"></i>
-                    </span>
-                {/if}
-            </a>
-            <span class="info">{$value->published|strtotime|prepareDate}</span>
-            <span>
+                    </a>
+                </span>
+            {/if}
+            <p>
+                <span class="info">{$value->published|strtotime|prepareDate}</span>
                 <a href="{$c->route('contact', $value->getContact()->jid)}">
                     {$value->getContact()->getTrueName()}
                 </a>
-            </span>
+            </p>
             <p class="all">
                 {if="$value->contentraw"}
                     {$value->contentraw}
@@ -37,13 +39,13 @@
             </p>
         </li>
     {/loop}
-    <li class="action">
-        <div class="action" onclick="Post_ajaxPublishComment(movim_form_to_json('comment'),'{$server}', '{$node}', '{$id}')">
-            <i class="zmdi zmdi-mail-send"></i>
-        </div>
-        <span class="icon gray">
+    <li>
+        <span class="primary icon gray">
             <i class="zmdi zmdi-comment"></i>
         </span>
+        <span class="control icon gray" onclick="Post_ajaxPublishComment(movim_form_to_json('comment'),'{$server}', '{$node}', '{$id}')">
+            <i class="zmdi zmdi-mail-send"></i>
+        </span>
         <form name="comment">
             <div>
                 <textarea
diff --git a/sources/app/widgets/Post/_post_comments_error.tpl b/sources/app/widgets/Post/_post_comments_error.tpl
index f0bb219..46bf3d9 100644
--- a/sources/app/widgets/Post/_post_comments_error.tpl
+++ b/sources/app/widgets/Post/_post_comments_error.tpl
@@ -1,10 +1,10 @@
-<ul class="middle">
+<ul class="list middle">
     <li>
-        <span class="icon gray">
+        <span class="primary icon gray">
             <i class="zmdi zmdi-comment"></i>
         </span>
-        <span>
+        <p class="normal">
             {$c->__('post.comments_disabled')}
-        </span>
+        </p>
     </li>
 </ul>
diff --git a/sources/app/widgets/Post/_post_empty.tpl b/sources/app/widgets/Post/_post_empty.tpl
index beb5770..dd30c3f 100644
--- a/sources/app/widgets/Post/_post_empty.tpl
+++ b/sources/app/widgets/Post/_post_empty.tpl
@@ -1,6 +1,7 @@
+<br />
 <h2 class="thin">{$c->__('post.hot')}</h2>
 <h4 class="gray">{$c->__('post.hot_text')}</h4><br />
-<ul class="flex card shadow active">
+<ul class="list flex card shadow active">
 {loop="$posts"}
     {if="!filter_var($value->origin, FILTER_VALIDATE_EMAIL)"}
         {$attachements = $value->getAttachements()}
@@ -11,23 +12,23 @@
             data-node="{$value->node}">
             {$picture = $value->getPicture()}
             {if="current(explode('.', $value->origin)) == 'nsfw'"}
-                <span class="icon thumb color red tiny">
+                <span class="primary icon thumb color red tiny">
                     +18
                 </span>
             {elseif="$picture != null"}
-                <span class="icon thumb" style="background-image: url({$picture});"></span>
+                <span class="primary icon thumb" style="background-image: url({$picture});"></span>
             {else}
-                <span class="icon thumb color {$value->node|stringToColor}">
+                <span class="primary icon thumb color {$value->node|stringToColor}">
                     {$value->node|firstLetterCapitalize}
                 </span>
             {/if}
-            <span>
+            <p class="line">
             {if="isset($value->title)"}
                 {$value->title}
             {else}
                 {$value->node}
             {/if}
-            </span>
+            </p>
             <p>
                 {$value->origin} /
                 <a href="{$c->route('group', array($value->origin, $value->node))}">
@@ -45,14 +46,14 @@
     {/if}
 {/loop}
 </ul>
-<ul class="active thick">
+<ul class="list active thick">
     <a href="{$c->route('group')}">
-        <li class="action">
-            <div class="action">
+        <li>
+            <span class="primary icon"><i class="zmdi zmdi-pages"></i></span>
+            <span class="control icon">
                 <i class="zmdi zmdi-chevron-right"></i>
-            </div>
-            <span class="icon"><i class="zmdi zmdi-pages"></i></span>
-            <span>Discover more articles on the Groups page</span>
+            </span>
+            <p class="normal">{$c->__('post.discover')}</p>
         </li>
     </a>
 </ul>
diff --git a/sources/app/widgets/Post/locales.ini b/sources/app/widgets/Post/locales.ini
index 77b46a9..45d5564 100644
--- a/sources/app/widgets/Post/locales.ini
+++ b/sources/app/widgets/Post/locales.ini
@@ -17,5 +17,7 @@ public_no      = This post is now private
 delete_title   = Delete this post
 delete_text    = You are going to delete this post, please confirm your action
 
+discover       = Discover more articles on the Groups page
+
 comments_disabled = Comments disabled
 comment_published = Comment published
diff --git a/sources/app/widgets/Post/post.tpl b/sources/app/widgets/Post/post.tpl
index 6877ebd..6e861d5 100644
--- a/sources/app/widgets/Post/post.tpl
+++ b/sources/app/widgets/Post/post.tpl
@@ -1,4 +1,4 @@
-<div id="post_widget" class="card shadow">
+<div id="post_widget">
     {$c->prepareEmpty()}
     {if="$nodeid"}
         <script type="text/javascript">
diff --git a/sources/app/widgets/Presence/_presence.tpl b/sources/app/widgets/Presence/_presence.tpl
index e0ff5ff..9a5e4d7 100644
--- a/sources/app/widgets/Presence/_presence.tpl
+++ b/sources/app/widgets/Presence/_presence.tpl
@@ -1,34 +1,19 @@
-<li onclick="{$dialog} MovimTpl.hideMenu()" class="condensed action">
-    <div class="action">
-        <i class="zmdi zmdi-edit"></i>
-    </div>
+<li onclick="{$dialog} MovimTpl.hideMenu()">
     {$url = $me->getPhoto('s')}
     {if="$url"}
         <span
-            class="icon bubble status {if="$presence->value != null"}{$presencetxt[$presence->value]}{/if}"
+            class="primary icon bubble status {if="$presence->value != null"}{$presencetxt[$presence->value]}{/if}"
             style="background-image: url({$me->getPhoto('m')})">
         </span>
     {else}
-        <span class="icon bubble color {$me->jid|stringToColor} status {if="$presence->value != null"}{$presencetxt[$presence->value]}{/if}">
+        <span class="primary icon bubble color {$me->jid|stringToColor} status {if="$presence->value != null"}{$presencetxt[$presence->value]}{/if}">
             <i class="zmdi zmdi-account"></i>
         </span>
     {/if}
-    <span>{$me->getTrueName()}</span>
-    <p class="wrap">{$presence->status}</p>
+    <!--
+    <span class="control icon gray">
+        <i class="zmdi zmdi-edit"></i>
+    </span>-->
+    <p class="line">{$me->getTrueName()}</p>
+    <p class="line">{$presence->status}</p>
 </li>
-<a class="classic {if="!$c->supported('pubsub')"}disabled{/if}" href="{$c->route('conf')}">
-    <li>
-        <span class="icon">
-            <i class="zmdi zmdi-settings"></i>
-        </span>
-        <span>{$c->__('page.configuration')}</span>
-    </li>
-</a>
-<a class="classic" href="{$c->route('help')}">
-    <li>
-        <span class="icon">
-            <i class="zmdi zmdi-help"></i>
-        </span>
-        <span>{$c->__('page.help')}</span>
-    </li>
-</a>
diff --git a/sources/app/widgets/Presence/_presence_list.tpl b/sources/app/widgets/Presence/_presence_list.tpl
index d4e8b84..7f7bda5 100644
--- a/sources/app/widgets/Presence/_presence_list.tpl
+++ b/sources/app/widgets/Presence/_presence_list.tpl
@@ -3,7 +3,7 @@
         <h3>{$c->__('status.status')}</h3>
 
         <div>
-            <textarea 
+            <textarea
                 spellcheck="false"
                 name="status"
                 placeholder="{$c->__('status.here')}"
@@ -12,55 +12,57 @@
         </div>
 
         <div>
-            <ul class="active">
-                <li class="action">
-                    <span class="icon bubble color small green"></span>
-                    <div class="action">
+            <ul class="list active">
+                <li>
+                    <span class="primary icon bubble color small green"></span>
+                    <span class="control">
                         <div class="radio">
                             <input type="radio" name="value" id="chat" value="chat" {if="isset($p) && $p->value == 1"}checked="checked"{/if}/>
                             <label for="chat"></label>
                         </div>
-                    </div>
-                    <span>{$txt[1]}</span>
+                    </span>
+                    <p class="normal">{$txt[1]}</p>
                 </li>
-                <li class="action">
-                    <span class="icon bubble color small orange"></span>
-                    <div class="action">
+                <li>
+                    <span class="primary icon bubble color small orange"></span>
+                    <span class="control">
                         <div class="radio">
                             <input type="radio" name="value" id="away" value="away" {if="isset($p) && $p->value == 2"}checked="checked"{/if}/>
                             <label for="away"></label>
                         </div>
-                    </div>
-                    <span>{$txt[2]}</span>
+                    </span>
+                    <p class="normal">{$txt[2]}</p>
                 </li>
-                <li class="action">
-                    <span class="icon bubble color small red"></span>
-                    <div class="action">
+                <li>
+                    <span class="primary icon bubble color small red"></span>
+                    <span class="control">
                         <div class="radio">
                             <input type="radio" name="value" id="dnd" value="dnd" {if="isset($p) && $p->value == 3"}checked="checked"{/if}/>
                             <label for="dnd"></label>
                         </div>
-                    </div>
-                    <span>{$txt[3]}</span>
+                    </span>
+                    <p class="normal">{$txt[3]}</p>
                 </li>
-                <li class="action">
-                    <span class="icon bubble color small purple"></span>
-                    <div class="action">
+                <li>
+                    <span class="primary icon bubble color small purple"></span>
+                    <span class="control">
                         <div class="radio">
                             <input type="radio" name="value" id="xa" value="xa" {if="isset($p) && $p->value == 4"}checked="checked"{/if}/>
                             <label for="xa"></label>
                         </div>
-                    </div>
-                    <span>{$txt[4]}</span>
+                    </span>
+                    <p class="normal">{$txt[4]}</p>
                 </li>
             </ul>
         </div>
     </form>
-    <ul class="active">
-        <li class="subheader">{$c->__('status.disconnect')}</li>
+    <ul class="list active">
+        <li class="subheader">
+            <p class="normal">{$c->__('status.disconnect')}</p>
+        </li>
         <li onclick="{$calllogout}">
-            <span class="icon"><i class="zmdi zmdi-sign-in"></i></span>
-            <span>{$c->__('status.disconnect')}</span>
+            <span class="primary icon"><i class="zmdi zmdi-sign-in"></i></span>
+            <p class="normal">{$c->__('status.disconnect')}</p>
         </li>
     </ul>
                 <!--
diff --git a/sources/app/widgets/Presence/presence.tpl b/sources/app/widgets/Presence/presence.tpl
index 6ddc74e..26de019 100644
--- a/sources/app/widgets/Presence/presence.tpl
+++ b/sources/app/widgets/Presence/presence.tpl
@@ -1,3 +1,3 @@
-<ul id="presence_widget" class="active oppose thick">
+<ul id="presence_widget" class="list active thick">
     {$presence}
 </ul>
diff --git a/sources/app/widgets/Publish/Publish.php b/sources/app/widgets/Publish/Publish.php
index 6605847..7776ae0 100644
--- a/sources/app/widgets/Publish/Publish.php
+++ b/sources/app/widgets/Publish/Publish.php
@@ -126,7 +126,7 @@ class Publish extends WidgetBase
     {
         if($form->content->value != '') {
             $view = $this->tpl();
-            $view->assign('content', Markdown::defaultTransform($form->content->value));
+            $view->assign('content', addHFR(Markdown::defaultTransform($form->content->value)));
 
             Dialog::fill($view->draw('_publish_preview', true), true);
         } else {
@@ -175,7 +175,7 @@ class Publish extends WidgetBase
 
             if($form->content->value != '') {
                 $content = $form->content->value;
-                $content_xhtml = Markdown::defaultTransform($content);
+                $content_xhtml = addHFR(Markdown::defaultTransform($content));
             }
 
             if($form->id->value != '') {
diff --git a/sources/app/widgets/Publish/_publish_create.tpl b/sources/app/widgets/Publish/_publish_create.tpl
index 5ccccfe..f4502ee 100644
--- a/sources/app/widgets/Publish/_publish_create.tpl
+++ b/sources/app/widgets/Publish/_publish_create.tpl
@@ -1,4 +1,42 @@
-<form name="post" class="block">
+<header>
+    <ul class="list middle">
+        <li>
+            <span class="primary icon active" onclick="Publish.headerBack('{$server}', '{$node}', false);">
+                <i class="zmdi zmdi-arrow-back"></i>
+            </span>
+
+            <span id="button_send" class="control icon active" onclick="Publish.disableSend(); Publish_ajaxPublish(movim_form_to_json('post'));">
+                <i class="zmdi zmdi-mail-send"></i>
+            </span>
+            <span class="control icon active" onclick="Publish_ajaxHelp()">
+                <i class="zmdi zmdi-help"></i>
+            </span>
+            <span class="control icon active" onclick="Publish_ajaxPreview(movim_form_to_json('post'))">
+                <i class="zmdi zmdi-eye"></i>
+            </span>
+
+            {if="$item != false"}
+                <p class="line">{$c->__('publish.edit')}</p>
+            {else}
+                <p class="line">{$c->__('publish.new')}</p>
+            {/if}
+            <!--
+            <p>
+                {if="$item != null && $item->node != 'urn:xmpp:microblog:0'"}
+                    {if="$item->name"}
+                        {$item->name}
+                    {else}
+                        {$item->node}
+                    {/if}
+                {else}
+                    {$c->__('page.blog')}
+                {/if}
+            </p>-->
+        </li>
+    </ul>
+</header>
+
+<form name="post" class="block padded">
     <input type="hidden" name="to" value="{$to}">
     <input type="hidden" name="node" value="{$node}">
     <input type="hidden" name="id" value="{if="$item != false"}{$item->nodeid}{/if}">
@@ -38,13 +76,13 @@
         <label for="content">{$c->__('post.content_label')}</label>
     </div>
 
-    <ul class="middle flex active">
+    <ul class="list middle flex active">
         {if="$c->supported('upload')"}
         <li class="block large" onclick="Upload_ajaxRequest()">
-            <span class="icon">
+            <span class="primary icon">
                 <i class="zmdi zmdi-attachment-alt"></i>
             </span>
-            <span>{$c->__('publish.attach')}</span>
+            <p class="normal line">{$c->__('publish.attach')}</p>
         </li>
         {/if}
     </ul>
diff --git a/sources/app/widgets/Publish/_publish_gallery.tpl b/sources/app/widgets/Publish/_publish_gallery.tpl
index b425e8c..cf77c3a 100644
--- a/sources/app/widgets/Publish/_publish_gallery.tpl
+++ b/sources/app/widgets/Publish/_publish_gallery.tpl
@@ -1,10 +1,10 @@
-<ul class="thick">
-    <li class="condensed">
-        <span class="icon bubble" style="background-image: url({$embed->images[0]['value']|htmlspecialchars});">
+<ul class="list thick">
+    <li>
+        <span class="primary icon bubble" style="background-image: url({$embed->images[0]['value']|htmlspecialchars});">
             <i class="zmdi zmdi-image"></i>
         </span>
-        <span>{$c->__('post.gallery')}</span>
-        <p>
+        <p>{$c->__('post.gallery')}</p>
+        <p class="list">
             <a href="{$embed->images[0]['value']|htmlspecialchars}" target="_blank">
                 {$embed->images[0]['value']|htmlspecialchars}
             </a>
diff --git a/sources/app/widgets/Publish/_publish_header.tpl b/sources/app/widgets/Publish/_publish_header.tpl
index 2baa9e6..e5d327b 100644
--- a/sources/app/widgets/Publish/_publish_header.tpl
+++ b/sources/app/widgets/Publish/_publish_header.tpl
@@ -1,44 +1,44 @@
 <div>
-    <span class="on_desktop icon"><i class="zmdi zmdi-edit"></i></span>
-    <h2>{$c->__('publish.title')}</h2>
-</div>
-<div>
-    <div class="return active r3 condensed"
-        onclick="Publish.headerBack('{$server}', '{$node}', false)">
-        <span id="back" class="icon" ><i class="zmdi zmdi-arrow-back"></i></span>
-        {if="$post != false"}
-            <h2>{$c->__('publish.edit')}</h2>
-        {else}
-            <h2>{$c->__('publish.new')}</h2>
-        {/if}
-        <h4>
-            {if="$item != null && $item->node != 'urn:xmpp:microblog:0'"}
-                {if="$item->name"}
-                    {$item->name}
-                {else}
-                    {$item->node}
-                {/if}
-            {else}
-                {$c->__('page.blog')}
-            {/if}
-        </h4>
-    </div>
-    <ul class="active">
-        <li onclick="Publish_ajaxHelp()">
-            <span class="icon">
-                <i class="zmdi zmdi-help"></i>
-            </span>
-        </li>
-        <li onclick="Publish_ajaxPreview(movim_form_to_json('post'))">
-            <span class="icon">
-                <i class="zmdi zmdi-eye"></i>
-            </span>
-        </li>
-        <li id="button_send"
-            onclick="Publish.disableSend(); Publish_ajaxPublish(movim_form_to_json('post'));">
-            <span class="icon">
-                <i class="zmdi zmdi-mail-send"></i>
-            </span>
+    <ul class="list middle">
+        <li>
+            <span class="primary on_desktop icon"><i class="zmdi zmdi-edit"></i></span>
+            <p>{$c->__('publish.title')}</p>
+        </li>
+    </ul>
+</div>
+<div>
+    <ul class="list middle active">
+        <li>
+            <span id="back" class="primary icon" onclick="Publish.headerBack('{$server}', '{$node}', false)">
+                <i class="zmdi zmdi-arrow-back"></i>
+            </span>
+            <span class="control icon" onclick="Publish_ajaxHelp()">
+                <i class="zmdi zmdi-help"></i>
+            </span>
+            <span class="control icon" onclick="Publish_ajaxPreview(movim_form_to_json('post'))">
+                <i class="zmdi zmdi-eye"></i>
+            </span>
+            <span class="control icon" id="button_send"
+            onclick="Publish.disableSend(); Publish_ajaxPublish(movim_form_to_json('post'));">
+                <i class="zmdi zmdi-mail-send"></i>
+            </span>
+
+            {if="$post != false"}
+                <p>{$c->__('publish.edit')}</p>
+            {else}
+                <p>{$c->__('publish.new')}</p>
+            {/if}
+            <p>
+                {if="$item != null && $item->node != 'urn:xmpp:microblog:0'"}
+                    {if="$item->name"}
+                        {$item->name}
+                    {else}
+                        {$item->node}
+                    {/if}
+                {else}
+                    {$c->__('page.blog')}
+                {/if}
+            </p>
         </li>
     </ul>
 </div>
diff --git a/sources/app/widgets/Publish/_publish_help.tpl b/sources/app/widgets/Publish/_publish_help.tpl
index d849e8b..a0b3296 100644
--- a/sources/app/widgets/Publish/_publish_help.tpl
+++ b/sources/app/widgets/Publish/_publish_help.tpl
@@ -1,81 +1,86 @@
 <section>
     <h3>{$c->__('post.help')}</h3>
-    <ul class="thick flex">
+    <ul class="list thick flex">
         <li class="block">
-            <span class="icon">
+            <span class="primary icon">
                 <i class="zmdi zmdi-format-size"></i>
             </span>
             <p># Title H1</p>
             <p>## Title H2…</p>
         </li>
         <li class="block">
-            <span class="icon">
+            <span class="primary icon">
                 <i class="zmdi zmdi-format-bold"></i>
             </span>
             <p>**bolded**</p>
             <p>__bolded__</p>
         </li>
         <li class="block">
-            <span class="icon">
+            <span class="primary icon">
                 <i class="zmdi zmdi-format-italic"></i>
             </span>
             <p>*emphasis*</p>
             <p>_emphasis_</p>
         </li>
         <li class="block">
-            <span class="icon">
+            <span class="primary icon">
                 <i class="zmdi zmdi-format-quote"></i>
             </span>
             <p>> Quoted line</p>
             <p>> Quoted line</p>
         </li>
         <li class="block">
-            <span class="icon">
+            <span class="primary icon">
                 <i class="zmdi zmdi-format-list-bulleted"></i>
             </span>
             <p>* Item 1</p>
             <p>* Item 2</p>
         </li>
         <li class="block">
-            <span class="icon">
+            <span class="primary icon">
                 <i class="zmdi zmdi-format-list-numbered"></i>
             </span>
             <p>1. Item 1</p>
             <p>2. Item 2</p>
         </li>
         <li class="block">
-            <span class="icon">
+            <span class="primary icon">
                 <i class="zmdi zmdi-functions"></i>
             </span>
-            <p>`Sourcecode`</p>
+            <p class="normal">`Sourcecode`</p>
         </li>
         <li class="block large">
-            <span class="icon">
+            <span class="primary icon">
                 <i class="zmdi zmdi-link"></i>
             </span>
-            <p>[my text](http://my_url/)</p>
+            <p class="normal">[my text](http://my_url/)</p>
         </li>
         <li class="block large">
-            <span class="icon">
+            <span class="primary icon">
                 <i class="zmdi zmdi zmdi-image"></i>
             </span>
-            <p>![Alt text](http://my_image_url/)</p>
+            <p class="normal">![Alt text](http://my_image_url/)</p>
         </li>
     </ul>
-    <ul class="active">
-        <li class="subheader">{$c->__('post.help_more')}</li>
-        <a href="http://daringfireball.net/projects/markdown/syntax" target="_blank">
-            <li class="condensed action">
-                <div class="action">
-                    <i class="zmdi zmdi-chevron-right"></i>
-                </div>
-                <span class="icon color bubble blue">
+    <ul class="list">
+        <li class="subheader">
+            <p>{$c->__('post.help_more')}</p>
+        </li>
+            <li>
+                <span class="primary icon color bubble blue">
                     <i class="zmdi zmdi-star"></i>
                 </span>
-                <span>
-                    {$c->__('post.help_manual')}
+                <span class="control icon gray">
+                    <i class="zmdi zmdi-chevron-right"></i>
                 </span>
-                <p>http://daringfireball.net/projects/markdown/syntax</p>
+                <p class="line">
+                    {$c->__('post.help_manual')}
+                </p>
+                <p class="line">
+                    <a href="http://daringfireball.net/projects/markdown/syntax" target="_blank">
+                        http://daringfireball.net/projects/markdown/syntax
+                    </a>
+                </p>
             </li>
         </a>
     </ul>
diff --git a/sources/app/widgets/Publish/publish.js b/sources/app/widgets/Publish/publish.js
index 70f0991..75819a2 100644
--- a/sources/app/widgets/Publish/publish.js
+++ b/sources/app/widgets/Publish/publish.js
@@ -38,7 +38,7 @@ var Publish = {
         // We are on the news page
         if(typeof Post_ajaxClear === 'function') {
             Post_ajaxClear();
-            Header_ajaxReset('news');
+            //Header_ajaxReset('news');
             MovimTpl.hidePanel();
         } else {
             Group_ajaxGetItems(server, node);
diff --git a/sources/app/widgets/Rooms/_rooms.tpl b/sources/app/widgets/Rooms/_rooms.tpl
index ac4a703..481e660 100644
--- a/sources/app/widgets/Rooms/_rooms.tpl
+++ b/sources/app/widgets/Rooms/_rooms.tpl
@@ -1,30 +1,32 @@
 {if="!$c->supported('anonymous') && $c->getView() != 'room'"}
-    <ul class="thin divided spaced active">
+    <ul class="list divided spaced active">
         <li class="subheader">
-            {$c->__('chatrooms.title')}
-            <span class="info">{$conferences|count}</span>
+            <p>
+                <span class="info">{$conferences|count}</span>
+                {$c->__('chatrooms.title')}
+            </p>
         </li>
         {loop="$conferences"}
             <li data-jid="{$value->conference}"
                 {if="$value->nick != null"} data-nick="{$value->nick}" {/if}
                 class="room {if="$value->connected"}online{/if}">
                 {if="$value->connected"}
-                    <span class="icon small bubble color {$value->name|stringToColor}"><i class="zmdi zmdi-accounts"></i></span>
+                    <span class="primary icon small bubble color {$value->name|stringToColor}"><i class="zmdi zmdi-accounts"></i></span>
                 {else}
-                    <span class="disabled icon small bubble color {$value->name|stringToColor}"><i class="zmdi zmdi-accounts-outline"></i></span>
+                    <span class="primary disabled icon small bubble color {$value->name|stringToColor}"><i class="zmdi zmdi-accounts-outline"></i></span>
                 {/if}
-                <span>{$value->name}</span>
-                <span class="second">{$value->conference}</span>
+                <p class="normal line">{$value->name} <span class="second">{$value->conference}</span></p>
             </li>
         {/loop}
     </ul>
     {if="$conferences == null"}
-    <ul class="thick spaced">
-        <li class="condensed">
-            <span class="icon green">
+    <ul class="list thick spaced">
+        <li>
+            <span class="primary icon green">
                 <i class="zmdi zmdi-accounts-outline"></i>
             </span>
-            <p>{$c->__('rooms.empty_text1')} {$c->__('rooms.empty_text2')}</p>
+            <p>{$c->__('rooms.empty_text1')}</p>
+            <p>{$c->__('rooms.empty_text2')}</p>
         </li>
     </ul>
     {/if}
diff --git a/sources/app/widgets/Rooms/_rooms_list.tpl b/sources/app/widgets/Rooms/_rooms_list.tpl
index 28584bb..aa70f75 100644
--- a/sources/app/widgets/Rooms/_rooms_list.tpl
+++ b/sources/app/widgets/Rooms/_rooms_list.tpl
@@ -1,38 +1,35 @@
 <section class="scroll">
     <h3>{$c->__('chatrooms.users')}</h3>
     <br />
-    <ul>
+    <ul class="list middle">
         {$presence = getPresencesTxt()}
         {loop="$list"}
-            <li class="
-                    action
-                    {if="$value->last > 60"} inactive{/if}
-                    {if="$value->status"}condensed{/if}"
+            <li class="{if="$value->last > 60"} inactive{/if}"
                 title="{$value->resource}">
                 {$url = $value->getPhoto('s')}
                 {if="$url"}
-                    <span class="icon bubble status {$presence[$value->value]}">
+                    <span class="primary icon bubble status {$presence[$value->value]}">
                         <img src="{$url}">
                     </span>
                 {else}
-                    <span class="icon bubble color {$value->resource|stringToColor} status {$presence[$value->value]}">
+                    <span class="primary icon bubble color {$value->resource|stringToColor} status {$presence[$value->value]}">
                         <i class="zmdi zmdi-account"></i>
-                    </span>        
+                    </span>
                 {/if}
                 {if="$value->mucaffiliation =='owner'"}
-                    <div class="action">
+                    <div class="control">
                         <i class="zmdi zmdi-beenhere"></i>
                     </div>
                 {/if}
                 {if="$value->mucjid && strpos($value->mucjid, '/') == false && !$c->supported('anonymous')"}
-                    <a href="{$c->route('contact', $value->mucjid)}">
-                        <span>{$value->resource}</span>
-                    </a>
+                    <p class="line normal">
+                        <a href="{$c->route('contact', $value->mucjid)}">{$value->resource}</a>
+                    </p>
                 {else}
-                    <span>{$value->resource}</span>
+                    <p class="line normal">{$value->resource}</p>
                 {/if}
                 {if="$value->status"}
-                    <p class="wrap">{$value->status}</p>
+                    <p class="line">{$value->status}</p>
                 {/if}
             </li>
         {/loop}
diff --git a/sources/app/widgets/Roster/_roster_search.tpl b/sources/app/widgets/Roster/_roster_search.tpl
index 915e693..7ff4c4b 100644
--- a/sources/app/widgets/Roster/_roster_search.tpl
+++ b/sources/app/widgets/Roster/_roster_search.tpl
@@ -1,11 +1,11 @@
 <section>
     <h3>{$c->__('roster.search')}</h3>
-    <ul class="simple">
+    <ul class="list">
         <li>
             <form name="add">
                 <div>
-                    <input 
-                        name="searchjid" 
+                    <input
+                        name="searchjid"
                         type="email"
                         title="{$c->__('roster.jid')}"
                         placeholder="user@server.tld"
diff --git a/sources/app/widgets/Roster/_roster_search_results.tpl b/sources/app/widgets/Roster/_roster_search_results.tpl
index 89edebc..f6339a6 100644
--- a/sources/app/widgets/Roster/_roster_search_results.tpl
+++ b/sources/app/widgets/Roster/_roster_search_results.tpl
@@ -1,17 +1,17 @@
-<ul class="active">
+<ul class="list active middle">
     {loop="$contacts"}
-        <li class="condensed" onclick="Roster.setFound('{$value->jid}')">
+        <li onclick="Roster.setFound('{$value->jid}')">
             {$url = $value->getPhoto('s')}
             {if="$url"}
-                <span class="icon bubble">
+                <span class="primary icon bubble">
                     <img src="{$url}">
                 </span>
             {else}
-                <span class="icon bubble color {$value->jid|stringToColor}">
+                <span class="primary icon bubble color {$value->jid|stringToColor}">
                     <i class="zmdi zmdi-account"></i>
                 </span>
             {/if}
-            <span>{$value->getTrueName()}</span>
+            <p>{$value->getTrueName()}</p>
             <p>{$value->jid}</p>
         </li>
     {/loop}
diff --git a/sources/app/widgets/Roster/roster.css b/sources/app/widgets/Roster/roster.css
index 5f0211e..00adfd1 100644
--- a/sources/app/widgets/Roster/roster.css
+++ b/sources/app/widgets/Roster/roster.css
@@ -1,5 +1,10 @@
-#roster form {
-    padding: 0 2rem;
+#roster form div {
+    min-height: 0;
+    top: 0;
+}
+
+#roster form div input {
+    padding-top: 2rem;
 }
 
 #roster ul#rosterlist > div > li {
@@ -16,16 +21,17 @@
     overflow: hidden;
 }
 
-#roster ul#rosterlist > div li:first-child:before {
+#roster ul#rosterlist > div li:first-child p:before {
     font-family: "Material-Design-Iconic-Font";
     content: "\f2fb";
     display: inline-block;
+    float: left;
+    margin-right: 1rem;
 }
 
-#roster ul#rosterlist > div.groupshown li:first-child:before {
+#roster ul#rosterlist > div.groupshown li:first-child p:before {
     font-family: "Material-Design-Iconic-Font";
     content: "\f2f9";
-    display: inline-block;
 }
 
 #roster ul#rosterlist > div.groupshown {
diff --git a/sources/app/widgets/Roster/roster.tpl b/sources/app/widgets/Roster/roster.tpl
index e37c0fa..4720d14 100644
--- a/sources/app/widgets/Roster/roster.tpl
+++ b/sources/app/widgets/Roster/roster.tpl
@@ -1,15 +1,30 @@
 <div id="roster" ng-controller="RosterController as rosterCtrl">
-    <ul id="rosterlist" class="{if="isset($conf) && isset($conf.roster) && $conf.roster == 'show'"}offlineshown{/if} active all">
+    <header>
+        <ul class="list">
+            <li>
+                <span id="menu" class="primary on_mobile icon active" onclick="MovimTpl.toggleMenu()"><i class="zmdi zmdi-menu"></i></span>
+                <span class="primary on_desktop icon gray"><i class="zmdi zmdi-search"></i></span>
+                <form>
+                    <div onclick="Roster.init();">
+                        <input type="text" name="search" id="rostersearch" autocomplete="off" placeholder="{$c->__('roster.search');}"/>
+                    </div>
+                </form>
+            </li>
+        </ul>
+    </header>
+    <ul id="rosterlist" class="list {if="isset($conf) && isset($conf.roster) && $conf.roster == 'show'"}offlineshown{/if} active all">
         <div ng-if="contacts == null" class="empty placeholder icon contacts">
             <h1>{$c->__('roster.no_contacts_title')}</h1>
             <h4>{$c->__('roster.no_contacts_text')}</h4>
         </div>
 
-        <li class="subheader search">{$c->__('roster.results')}</li>
+        <li class="subheader search">
+            <p>{$c->__('roster.results')}</p>
+        </li>
 
-            <div id="spinner">
-                <img src="{$base_uri}/app/widgets/Roster/img/movim_cloud.svg"/>
-            </div>
+        <div id="spinner">
+            <img src="{$base_uri}/app/widgets/Roster/img/movim_cloud.svg"/>
+        </div>
 
         <div
             ng-if="contacts != null && !group.tombstone"
@@ -18,8 +33,10 @@
             ng-class="{groupshown: rosterCtrl.groupIsShown(group.agroup)}" >
 
             <li class="subheader" ng-click="rosterCtrl.showHideGroup(group.agroup)">
-                {{::group.agroup}}
-                <span class="info">{{rosterCtrl.getOnlineCount(group.agroupitems)}}/{{group.agroupitems.length}}</span>
+                <p>
+                    <span class="info">{{rosterCtrl.getOnlineCount(group.agroupitems)}}/{{group.agroupitems.length}}</span>
+                    {{::group.agroup}}
+                </p>
             </li>
             <li
                 ng-repeat="myjid in group.agroupitems track by myjid.ajid"
@@ -28,9 +45,20 @@
                 class="{{myjid.ajiditems.rosterview.inactive}} action {{myjid.ajiditems.rosterview.presencetxt}}"
                 ng-attr-title="{{rosterCtrl.getContactTitle(myjid.ajiditems)}}"
                 ng-class="{condensed: myjid.ajiditems.status != '' && myjid.ajiditems.status != null }">
-                <!--ng-class="rosterCtrl.getContactClient(myjid.ajiditems)"-- >-->
-                <div
-                    class="action"
+                <span
+                    ng-if="::myjid.ajiditems.rosterview.avatar != false"
+                    class="primary icon bubble status {{myjid.ajiditems.rosterview.presencetxt}}"
+                    style="background-image: url({{::myjid.ajiditems.rosterview.avatar}})">
+                </span>
+
+                <span
+                    ng-if="::myjid.ajiditems.rosterview.avatar== false"
+                    class="primary icon bubble status {{myjid.ajiditems.rosterview.presencetxt}} color {{myjid.ajiditems.rosterview.color}}">
+                    <i class="zmdi zmdi-account"></i>
+                </span>
+
+                <span
+                    class="control icon gray"
                     ng-if="myjid.ajiditems.rosterview.tune || myjid.ajiditems.rosterview.type != '' || myjid.ajiditems.rosterview.subscription != 'both'"
                     ng-switch on="myjid.ajiditems.rosterview.type">
                     <i ng-switch-when="handheld" class="zmdi zmdi-smartphone"></i>
@@ -41,23 +69,12 @@
                     <i ng-if="myjid.ajiditems.rosterview.subscription == 'to'" class="zmdi zmdi-arrow-in"></i>
                     <i ng-if="myjid.ajiditems.rosterview.subscription == 'from'" class="zmdi zmdi-arrow-out"></i>
                     <i ng-if="myjid.ajiditems.rosterview.subscription == 'none'" class="zmdi zmdi-block"></i>
-                </div>
-                
-                <span
-                    ng-if="::myjid.ajiditems.rosterview.avatar != false"
-                    class="icon bubble status {{myjid.ajiditems.rosterview.presencetxt}}"
-                    style="background-image: url({{::myjid.ajiditems.rosterview.avatar}})">
                 </span>
 
-                <span
-                    ng-if="::myjid.ajiditems.rosterview.avatar== false"
-                    class="icon bubble status {{myjid.ajiditems.rosterview.presencetxt}} color {{myjid.ajiditems.rosterview.color}}">
-                    <i class="zmdi zmdi-account"></i>
-                </span>
 
-                <span>{{myjid.ajiditems.rosterview.name}}</span>
-                <p ng-if="myjid.ajiditems.status != ''" class="wrap">
-                    <span>{{myjid.ajiditems.status}}</span>
+                <p class="normal">{{myjid.ajiditems.rosterview.name}}</p>
+                <p ng-if="myjid.ajiditems.status && myjid.ajiditems.status != ''">
+                    {{myjid.ajiditems.status}}
                 </p>
             </li>
         </div>
diff --git a/sources/app/widgets/Statistics/statistics.tpl b/sources/app/widgets/Statistics/statistics.tpl
index 350ae17..b3591d6 100644
--- a/sources/app/widgets/Statistics/statistics.tpl
+++ b/sources/app/widgets/Statistics/statistics.tpl
@@ -1,22 +1,22 @@
 <div id="statistics" class="tabelem" title="{$c->__("statistics.title")}">
-    <ul class="divided thick">
+    <ul class="list divided thick">
         <li class="subheader">
-            {$c->__('statistics.sessions')} - {$sessions|count}
+            <p>{$c->__('statistics.sessions')} - {$sessions|count}</p>
         </li>
         {loop="$sessions"}
             {$user = $c->getContact($value->username, $value->host)}
-            <li class="condensed">
+            <li>
                 {$url = $user->getPhoto('s')}
                 {if="$url"}
-                    <span class="icon bubble">
+                    <span class="primary icon bubble">
                         <img src="{$url}">
                     </span>
                 {else}
-                    <span class="icon bubble color {$user->jid|stringToColor}">
+                    <span class="primary icon bubble color {$user->jid|stringToColor}">
                         <i class="zmdi zmdi-account"></i>
                     </span>
                 {/if}
-                <span>{$user->getTrueName()} - {$value->username}@{$value->host} - {$value->domain}</span>
+                <p>{$user->getTrueName()} - {$value->username}@{$value->host} - {$value->domain}</p>
                 <p>
                     {if="isset($value->start)"}
                         {$c->getTime($value->start)}
diff --git a/sources/app/widgets/Syndication/Syndication.php b/sources/app/widgets/Syndication/Syndication.php
index 08f995b..043563a 100644
--- a/sources/app/widgets/Syndication/Syndication.php
+++ b/sources/app/widgets/Syndication/Syndication.php
@@ -96,8 +96,6 @@ class Syndication extends WidgetBase
             $f->appendXML($message->contentcleaned);
             $div->appendChild($f);
 
-            //$div->appendChild($dom->createCDATASection($message->contentcleaned));
-
             $attachements = $message->getAttachements();
 
             if(isset($attachements['pictures'])) {
@@ -119,7 +117,7 @@ class Syndication extends WidgetBase
             }
 
             if(isset($attachements['links'])) {
-                foreach($attachements['files'] as $value) {
+                foreach($attachements['links'] as $value) {
                     $entry->appendChild($link = $dom->createElement('link'));
                     $link->setAttribute('rel', 'alternate');
                     $link->setAttribute('href', $value['href']);
diff --git a/sources/app/widgets/Upload/_upload.tpl b/sources/app/widgets/Upload/_upload.tpl
index fb76bbf..c494ff1 100644
--- a/sources/app/widgets/Upload/_upload.tpl
+++ b/sources/app/widgets/Upload/_upload.tpl
@@ -1,11 +1,11 @@
 <section>
     <h3>{$c->__('upload.title')}</h3>
-    <ul class="thick">
-        <li class="condensed">
-            <span class="icon bubble color green">
+    <ul class="list thick">
+        <li>
+            <span class="primary icon bubble color green">
                 <i class="zmdi zmdi-upload"></i>
             </span>
-            <span>{$c->__('upload.choose')}</span>
+            <p>{$c->__('upload.choose')}</p>
             <p>
                 <input type="file" id="file" />
             </p>
diff --git a/sources/app/widgets/Vcard4/_vcard4_form.tpl b/sources/app/widgets/Vcard4/_vcard4_form.tpl
index 334468b..52309ff 100644
--- a/sources/app/widgets/Vcard4/_vcard4_form.tpl
+++ b/sources/app/widgets/Vcard4/_vcard4_form.tpl
@@ -1,26 +1,30 @@
-<ul>
-    <li class="subheader"> {$c->__('privacy.privacy_title')}</li>
-    <li class="condensed action">
-        <form>
-            <div class="control action">
-                <div class="checkbox">
-                    <input
-                        type="checkbox"
-                        id="privacy"
-                        name="privacy"
-                        {if="$me->privacy"}
-                            checked
-                        {/if}
-                        onchange="{$privacy}">
-                    <label for="privacy"></label>
-                </div>
-            </div>
-        </form>
-        <span class="icon bubble color blue">
+<ul class="list middle">
+    <li class="subheader">
+        <p>{$c->__('privacy.privacy_title')}</p>
+    </li>
+    <li>
+        <span class="primary icon bubble color blue">
             <i class="zmdi zmdi-shield-security"></i>
         </span>
+        <span class="control">
+            <form>
+                <div class="control action">
+                    <div class="checkbox">
+                        <input
+                            type="checkbox"
+                            id="privacy"
+                            name="privacy"
+                            {if="$me->privacy"}
+                                checked
+                            {/if}
+                            onchange="{$privacy}">
+                        <label for="privacy"></label>
+                    </div>
+                </div>
+            </form>
+        </span>
 
-        <span>{$c->__('privacy.privacy_question')}</span>
+        <p>{$c->__('privacy.privacy_question')}</p>
         <p class="all">{$c->__('privacy.privacy_info')}</p>
     </li>
 </ul>
diff --git a/sources/lib/XMPPtoForm.php b/sources/lib/XMPPtoForm.php
index f7f90e0..86f42cf 100644
--- a/sources/lib/XMPPtoForm.php
+++ b/sources/lib/XMPPtoForm.php
@@ -102,7 +102,7 @@ class XMPPtoForm{
         $input->setAttribute('id', $s);
         $input->setAttribute('name', 'generic_'.$s);
         $input->setAttribute('required', 'required');
-        
+
         $div->appendChild($input);
 
         $label = $this->html->createElement('label', $s);
@@ -111,24 +111,28 @@ class XMPPtoForm{
     }
     private function outTitle($s){
         $ul = $this->html->createElement('ul');
-        $ul->setAttribute('class', 'thin simple');
+        $ul->setAttribute('class', 'list thin');
         $this->html->appendChild($ul);
 
         $li = $this->html->createElement('li');
-        $li->appendChild($this->html->createElement('span', $s));
+        $title = $this->html->createElement('p', $s);
+        $title->setAttribute('class', 'normal line');
+        $li->appendChild($title);
 
         $ul->appendChild($li);
     }
 
     private function outP($s){
         $ul = $this->html->createElement('ul');
-        $ul->setAttribute('class', 'thin simple');
+        $ul->setAttribute('class', 'list thin');
         $this->html->appendChild($ul);
 
         $li = $this->html->createElement('li');
         $ul->appendChild($li);
 
-        $li->appendChild($this->html->createElement('p', $s));
+        $title = $this->html->createElement('p', $s);
+        $title->setAttribute('class', 'normal line');
+        $li->appendChild($title);
     }
 
     private function outUrl($s) {
@@ -161,7 +165,7 @@ class XMPPtoForm{
 
         if($s->required)
             $select->setAttribute('required', 'required');
-        
+
         $div->appendChild($select);
 
         $option = $this->html->createElement('option', __('button.bool_yes'));
@@ -203,7 +207,7 @@ class XMPPtoForm{
         if(empty($textarea->nodeValue)) {
             $textarea->nodeValue = ' ';
         }
-        
+
         $container->appendChild($textarea);
 
         $label = $this->html->createElement('label', $s['label']);
@@ -214,7 +218,7 @@ class XMPPtoForm{
     private function outInput($s, $type, $multiple){
         $container = $this->html->createElement('div');
         $this->html->appendChild($container);
-        
+
         $input = $this->html->createElement('input');
         $input->setAttribute('id', $s['var']);
         $input->setAttribute('name', $s['var']);
@@ -234,7 +238,7 @@ class XMPPtoForm{
 
         if($s['var'] == 'username')
             $input->setAttribute('pattern', '[a-z0-9_-]*');
-        
+
         $container->appendChild($input);
 
         $label = $this->html->createElement('label', $s['label']);
@@ -267,7 +271,7 @@ class XMPPtoForm{
 
         if($s->required)
             $select->setAttribute('required', 'required');
-        
+
         $div->appendChild($select);
 
         if(count($s->xpath('option')) > 0){
@@ -326,7 +330,7 @@ class FormtoXMPP
     {
         $fields = $this->_form->getElementsByTagName('field');
         $list = $dom->getElementsByTagName('x');
-            
+
         foreach($fields as $field) {
             $field = $dom->importNode($field, true);
             $list[0]->appendChild($field);
@@ -338,7 +342,7 @@ class FormtoXMPP
         foreach($this->_inputs as $key => $value) {
             $container = $this->_form->createElement('container');
             $this->_form->appendChild($container);
-           
+
             $field = $this->_form->createElement('field');
             $container->appendChild($field);
 
@@ -348,7 +352,7 @@ class FormtoXMPP
             if($value === 'true') {
                 $val->nodeValue = '1';
             }
-            
+
             if($value === 'false') {
                 $val->nodeValue = '0';
             }
@@ -362,7 +366,7 @@ class FormtoXMPP
             ) {
                 $val->nodeValue = trim($value);
             }
-            
+
             $field->setAttribute('var', trim($key));
         }
 
diff --git a/sources/system/UtilsPicture.php b/sources/system/UtilsPicture.php
index 7bb1744..d93cec8 100644
--- a/sources/system/UtilsPicture.php
+++ b/sources/system/UtilsPicture.php
@@ -8,16 +8,20 @@ function createEmailPic($jid, $email) {
         unlink(DOCUMENT_ROOT.'/cache/'.$jid.'_email.png');
 
     $draw = new ImagickDraw();
-    $draw->setFontSize(13);
-    $draw->setGravity(Imagick::GRAVITY_CENTER);
+    try {
+        $draw->setFontSize(13);
+        $draw->setGravity(Imagick::GRAVITY_CENTER);
 
-    $canvas = new Imagick();
+        $canvas = new Imagick();
 
-    $metrics = $canvas->queryFontMetrics($draw, $email);
+        $metrics = $canvas->queryFontMetrics($draw, $email);
 
-    $canvas->newImage($metrics['textWidth'], $metrics['textHeight'], "transparent", "png");
-    $canvas->annotateImage($draw, 0, 0, 0, $email);
+        $canvas->newImage($metrics['textWidth'], $metrics['textHeight'], "transparent", "png");
+        $canvas->annotateImage($draw, 0, 0, 0, $email);
 
-    $canvas->setImageFormat('PNG');
-    $canvas->writeImage($cachefile);
+        $canvas->setImageFormat('PNG');
+        $canvas->writeImage($cachefile);
+    } catch (ImagickException $e) {
+        error_log($e->getMessage());
+    }
 }
diff --git a/sources/themes/material/css/article.css b/sources/themes/material/css/article.css
index 046fcfa..453ccc0 100644
--- a/sources/themes/material/css/article.css
+++ b/sources/themes/material/css/article.css
@@ -10,6 +10,7 @@ article header {
 }
 
 /* We hide the main title because it's already here ? */
+/*
 article section h1 {
     display: none;
 }
@@ -23,12 +24,13 @@ article header h2,
 li.condensed h2 {
     line-height: 3.75rem;
 }
-
+*/
 article section {
     font-size: 2rem;
     line-height: 3rem;
     font-weight: 500;
     padding: 0 2rem;
+    padding-top: 2rem;
 }
 
 article img,
@@ -77,6 +79,14 @@ article section content pre {
     font-family: monospace;
 }
 
+article section content pre {
+    color: white;
+    padding: 1rem;
+    font-size: 1.5rem;
+    margin: 1rem 0;
+    background-color: #333;
+}
+
 article section content cite,
 article section content blockquote {
     padding-left: 4rem;
diff --git a/sources/themes/material/css/block.css b/sources/themes/material/css/block.css
index a31834e..0b08dd4 100644
--- a/sources/themes/material/css/block.css
+++ b/sources/themes/material/css/block.css
@@ -19,7 +19,7 @@
 .flex.card .block {
     margin: 1rem;
     flex: 1 calc(50% - 2rem);
-    min-height: 8rem;
+    min-height: 5rem;
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
 }
@@ -33,5 +33,6 @@
     .flex .block {
         margin-bottom: 0;
         flex: 1 100%;
+        max-width: 100%;
     }
 }
diff --git a/sources/themes/material/css/color.css b/sources/themes/material/css/color.css
index f3ffaa8..c0c4ff6 100644
--- a/sources/themes/material/css/color.css
+++ b/sources/themes/material/css/color.css
@@ -19,40 +19,11 @@
 }
 
 main > header a,
+.icon a,
 .color input {
     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; }
-}
-
-@-webkit-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 }
@@ -72,18 +43,18 @@ span.icon.status.away:after,
 .bubble.color.gray  , .icon.color.gray     { color: white; background-color: #9E9E9E; border-color: #9E9E9E }
 .bubble.color.black , .icon.color.black    { color: white; background-color: #000;    border-color: #000 }
 
-label.red   , .icon.red   , span.user.red      { color: #F44336; }
-label.purple, .icon.purple, span.user.purple   { color: #9C27B0; }
-label.indigo, .icon.indigo, span.user.indigo   { color: #3F51B5; }
-label.blue  , .icon.blue  , span.user.blue     { color: #2196F3; }
-label.green , .icon.green , span.user.green    { color: #689F38; }
-label.orange, .icon.orange, span.user.orange   { color: #FF9800; }
-label.yellow, .icon.yellow, span.user.yellow   { color: #FBC02D; }
-label.brown , .icon.brown , span.user.brown    { color: #795548; }
+.icon.red   , p.user.red      { color: #F44336; }
+.icon.purple, p.user.purple   { color: #9C27B0; }
+.icon.indigo, p.user.indigo   { color: #3F51B5; }
+.icon.blue  , p.user.blue     { color: #2196F3; }
+.icon.green , p.user.green    { color: #689F38; }
+.icon.orange, p.user.orange   { color: #FF9800; }
+.icon.yellow, p.user.yellow   { color: #FBC02D; }
+.icon.brown , p.user.brown    { color: #795548; }
 ul li.action > div.action,
 ul li.action > form > div.action,
-label.gray  , .icon.gray  , span.user.gray     { color: #9E9E9E; }
-label.black , .icon.black , span.user.black    { color: #000; }
+.icon.gray  , p.user.gray     { color: #9E9E9E; }
+.icon.black , p.user.black    { color: #000; }
 
 form input:focus:invalid,
 form textarea:focus:invalid {
@@ -94,24 +65,49 @@ form textarea:focus:invalid + label {
     color: #F44336;
 }
 
+ul.list li > p:nth-last-of-type(3) + p,
+ul.list li > p:nth-last-of-type(2) + p {
+    color: rgba(0, 0, 0, 0.60);
+}
+
 /* Default color : violet */
 
 .button.color,
 input[type=button].color,
 ul li span.counter,
+/*main > section > div > header,*/
 main > header { background-color: #3F51B5; color: white; border-color: #3F51B5; }
 
 .tabs,
-.tabs a:not(.classic) {
+.tabs a:not(.classic):not(.activity):not(.action) {
     border-color: #3F51B5;
     color: #3F51B5;
 }
 
+main > section > div > header.scroll {
+    background-color: #EEE;
+}
+
+main > section > div > header.big *,
+.snackbar ul.list li > p:nth-last-of-type(2) + p,
+main > header ul.list li > p:nth-last-of-type(2) + p,
+header.big ul.list li > p:nth-last-of-type(2) + p {
+    color: white;
+}
+/*
+.button.activity,
+main > section > div > header ul.tabs > li,
+main > section > div > header a:not(.classic):not(.activity):not(.action) {
+    border-color: white;
+    color: white;
+}
+*/
 /* Gray accent : orange */
 
-.button,
+.button:not(.color),
 input[type=button],
-a:not(.classic) { color: #FF5722; border-color: #FF5722; }
+a/*,
+a:not(.classic):not(.activity):not(.action):not(.button)*/ { color: #FF5722; border-color: #FF5722; }
 
 form > div .checkbox:before { background-color: #FFE0B2; }
 form > div .checkbox > input[type="checkbox"]:checked + label { background-color: #FF5722; }
@@ -121,6 +117,7 @@ ul li span.counter,
 form > div .radio > input[type="radio"]:checked + label {
     border-color: #FF5722;
     background-color: #FF5722;
+    color: white;
 }
 
 form input:focus:not(:invalid) + label,
diff --git a/sources/themes/material/css/form.css b/sources/themes/material/css/form.css
index 4eeb3ff..08fad91 100644
--- a/sources/themes/material/css/form.css
+++ b/sources/themes/material/css/form.css
@@ -71,10 +71,13 @@ main > header form > div:not(.clear):not(.control) {
     min-height: 0;
 }
 
+main > header li > form > div:not(.clear):not(.control) {
+    top: 1rem;
+}
+
 main > header form > div:not(.clear):not(.control) > input,
 main > header form > div:not(.clear):not(.control) > .select {
-    margin-top: 1.5rem;
-    padding-top: 0.4rem;
+    padding-top: 0;
 }
 
 main > header form > div:not(.clear):not(.control) > .select option {
@@ -389,6 +392,15 @@ header.big ~ .button.action {
     background-color: white;
 }
 
+.button.activity {
+    display: inline-block;
+    margin: 0;
+    font-size: 3rem;
+    line-height: 7rem;
+    height: auto;
+    width: 7rem;
+}
+
 /* The textarea hidden div */
 #hiddendiv {
     position: fixed;
diff --git a/sources/themes/material/css/grid.css b/sources/themes/material/css/grid.css
index a181436..5e4703a 100644
--- a/sources/themes/material/css/grid.css
+++ b/sources/themes/material/css/grid.css
@@ -12,17 +12,23 @@ ul.grid > li {
     margin: 0.1em;
 }
 
+ul.grid.active > li:hover {
+    cursor: pointer;
+}
+
 ul.grid > li > nav {
     position: absolute;
     bottom: 0;
     color: white;
     background-color: rgba(0, 0, 0, 0.5);
     width: 100%;
-    padding: 0 2rem;
+    padding: 0 1rem;
     box-sizing: border-box;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    font-size: 2rem;
+    line-height: 5rem;
 }
 
 @media screen and (max-width: 1024px) {
diff --git a/sources/themes/material/css/header.css b/sources/themes/material/css/header.css
new file mode 100644
index 0000000..7bf80eb
--- /dev/null
+++ b/sources/themes/material/css/header.css
@@ -0,0 +1,118 @@
+/* Header */
+header.big {
+    background-size: cover, cover;
+    background-position: center center;
+    width: 100%;
+    max-width: 100%;
+    color: white;
+    position: relative;
+    margin-bottom: 2rem;
+}
+
+
+/*
+header.big {
+    background-size: cover, cover;
+    background-position: center center;
+    width: 100%;
+    max-width: 100%;
+    color: white;
+    position: relative;
+    margin-bottom: 2rem;
+}
+
+header.big p {
+    color: white;
+}*/
+/*
+main > section > div > header,
+main > section > div:first-child:nth-last-child(2) ~ div > header {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    z-index: 1;
+    display: block;
+    overflow: hidden;
+    max-height: 50rem;
+    transition: max-height 0.3s cubic-bezier(.4,0,.2,1);
+}
+
+main > section > div > header.scroll,
+main > section > div:first-child:nth-last-child(2) ~ div > header.scroll {
+    max-height: 7rem;
+    position: fixed;
+    top: 0;
+    transition: max-height 0.3s cubic-bezier(.4,0,.2,1);
+}
+
+main > section > div:first-child:nth-last-child(2) ~ div > header.scroll  {
+    width: 65%;
+}
+
+main > section > div > header.scroll:not(.big) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+main > section > div:first-child:nth-last-child(2) > header.scroll {
+    width: 35%;
+}
+
+@media screen and (max-width: 1024px) {
+    main > section > div:first-child:nth-last-child(2) > header.scroll,
+    main > section > div:first-child:nth-last-child(2) ~ div > header.scroll {
+        width: 100%;
+    }
+}
+
+main > section > div > header > div > h2 {
+    display: inline-block;
+    margin-left: 1rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: calc(100% - 10rem);
+    opacity: 0;
+    transition: opacity 0.3s cubic-bezier(.4,0,.2,1);
+    transition-delay: 0.3s;
+}
+
+main > section > div > header.scroll > div > h2 {
+    opacity: 1;
+}
+
+main > section > div > header ul.tabs,
+main > section > div > header form {
+    margin-top: 1rem;
+    width: calc(100% - 8rem);
+    box-sizing: border-box;
+    float: right;
+    border: 0;
+}
+
+main > section > div > header form {
+    padding: 0 1rem;
+    margin-top: 2rem;
+}
+
+main > section > div > header form > div:not(.clear):not(.control) {
+    min-height: 0;
+}
+
+main > section > div > header form > div > input:not([type=submit]) {
+    padding-top: 0rem;
+}
+
+header.big h2,
+header.big p {
+    color: white;
+}
+
+
+main > section > div > header.scroll + * {
+    margin-top: 7rem;
+}*/
+
+/*
+main > section > div > header + article {
+    margin-bottom: 2rem;
+}
+*/
diff --git a/sources/themes/material/css/listn.css b/sources/themes/material/css/listn.css
new file mode 100644
index 0000000..0dc83f7
--- /dev/null
+++ b/sources/themes/material/css/listn.css
@@ -0,0 +1,400 @@
+ul.list {
+    list-style-type: none;
+    padding: 0;
+}
+
+ul.list.middle li:not(.subheader) {
+    padding: 0.75rem 0;
+}
+
+ul.list.thick li:not(.subheader) {
+    padding: 1.5rem 0;
+}
+
+ul.list li {
+    clear: both;
+    position: relative;
+}
+
+ul.list li > *:not(p) {
+    display: inline-block;
+    top: 0;
+}
+
+/* Active list */
+
+
+ul.list.active li:hover:not(.subheader),
+ul.list.active.all li:hover,
+ul.list.active li.active:not(.subheader) {
+    background-color: rgba(0, 0, 0, 0.03);
+    cursor: pointer;
+}
+
+/* Divided list */
+/*
+ul.list.divided:not(.spaced) > li:not(:last-child),
+ul.list.divided.spaced > li:not(:last-child).subheader,
+ul.list.divided.spaced > li:not(:last-child):not(.subheader):after {
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+}
+
+ul.list.divided.spaced > *:not(:last-child):after {
+    position: absolute;
+    right: 0;
+    bottom: 0rem;
+    content: "";
+    display: block;
+    width: calc(100% - 9rem);
+}
+*/
+
+/* Main elements */
+
+ul.list li > .control,
+ul.list li > .primary {
+    width: 5rem;
+    height: 5rem;
+    top: 50%;
+    margin-top: -2.5rem;
+    position: absolute;
+}
+ul.list li > .control.active,
+ul.list li > .primary.active {
+    width: 7rem;
+    height: 7rem;
+    margin-top: -3.5rem;
+    line-height: 7rem;
+}
+
+ul.list li > .primary.active {
+    left: 0;
+}
+
+ul.list li > .control.small,
+ul.list li > .primary.small {
+    width: 3rem;
+    height: 3rem;
+    margin-top: -1.5rem;
+}
+
+ul.list > li > *:not(.counter):not(span):not(.bubble),
+ul.list li.subheader p {
+    width: 100%;
+    box-sizing: border-box;
+    padding-right: 2rem;
+    padding-left: 2rem;
+}
+
+/* Truncated content */
+
+ul.list li.subheader > p,
+ul.list li > p.line {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Not sure */
+/*ul.list li > p > span {
+    float: right;
+    font-size: 1.5rem;
+    color: gray;
+}
+*/
+
+ul.list li > span.active {
+    transition: background-color 0.25s ease;
+}
+
+ul.list li > span.active:hover {
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.1);
+}
+/*
+ul.list li > span.active {
+    overflow: hidden;
+    margin: -1rem;
+    padding: 1rem;
+    top: 1rem;
+}
+
+ul.list li > span.active:hover {
+    cursor: pointer;
+}
+
+ul.list li > span.active:after {
+    content: "";
+    background: rgba(255,255,255,0.3);
+    display: block;
+    position: absolute;
+    border-radius: 50%;
+    padding-top: 240%;
+    padding-left: 240%;
+    margin-top: -120%;
+    margin-left: -120%;
+    opacity: 0;
+    transition: all 1s;
+}
+
+ul.list li > span.active:active:after {
+    padding-top: 0;
+    padding-left: 0;
+    margin-top: 0;
+    margin-left: 0;
+    opacity: 1;
+    transition: 0s;
+}
+*/
+ul.list li > p > span.second {
+    color: gray;
+}
+
+ul.list li > p > span.info {
+    float: right;
+    font-size: 1.5rem;
+    color: gray;
+}
+
+/* Size automagicaly the content */
+
+ul.list li > p:first-of-type {
+    line-height: 5.5rem;
+    font-size: 3rem;
+}
+
+ul.list li > p.normal {
+    font-size: 2rem;
+}
+
+ul.list li > p.center {
+    text-align: center;
+}
+
+ul.list li > p:nth-last-of-type(3),
+ul.list li > p:nth-last-of-type(2) {
+    line-height: 3rem;
+    font-size: 2rem;
+}
+
+ul.list li > p:nth-last-of-type(3) + p,
+ul.list li > p:nth-last-of-type(2) + p {
+    line-height: 2.5rem;
+    font-size: 1.75rem;
+    max-height: 7.5rem;
+    overflow: hidden;
+}
+
+ul.list li > p:nth-last-of-type(3) + p.all,
+ul.list li > p:nth-last-of-type(2) + p.all {
+    max-height: auto;
+}
+
+/* Subheader */
+
+ul.list li.subheader > p {
+    font-size: 1.75rem;
+    line-height: 5rem;
+    font-weight: 600;
+    padding: 0 2rem;
+}
+
+/* If we have a primary control */
+
+
+ul.list li > .primary {
+    left: 2rem;
+}
+
+ul.list li > .primary ~ *:not(.primary):not(.counter):not(.bubble):not(.control) {
+    padding-left: 9rem;
+}
+
+/* Place the other controls */
+
+ul.list li > .control {
+    right: 0;
+}
+
+ul.list li > .control ~ .control {
+    right: 8rem;
+}
+
+ul.list li > .control ~ .control ~ .control {
+    right: 16rem;
+}
+
+/* Limit the size of the main content */
+
+ul.list li > .control ~ *:not(.control):not(.bubble):not(.counter) {
+    width: calc(100% - 8rem);
+}
+
+ul.list li > .control ~ .control ~ *:not(.control):not(.bubble):not(.counter) {
+    width: calc(100% - 16rem);
+}
+
+ul.list li > .control ~ .control ~ .control ~ *:not(.control):not(.bubble):not(.counter) {
+    width: calc(100% - 24rem);
+}
+
+/* Tabs */
+
+ul.tabs {
+    text-align: center;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    overflow: hidden;
+    white-space: nowrap;
+    height: 6rem;
+    line-height: 6rem;
+}
+
+ul.tabs.wide > li {
+    width: 25%;
+    float: left;
+}
+
+ul.tabs:hover {
+    overflow-x: auto;
+}
+
+ul.tabs > li {
+    display: inline-block;
+    white-space: nowrap;
+    text-transform: uppercase;
+    font-size: 1.75rem;
+    font-weight: 600;
+    opacity: 0.6;
+    height: 6rem;
+    box-sizing: border-box;
+}
+
+ul.tabs > li > a {
+    /*padding: 1.5rem 3rem;*/
+    box-sizing: border-box;
+    padding: 0 3rem;
+    display: block;
+}
+
+ul.tabs > li:hover {
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+ul.tabs > li.active {
+    opacity: 1;
+    border-bottom-width: 2px;
+    border-bottom-style: solid;
+}
+
+/* Counter */
+
+ul li span.counter:empty {
+    display: none;
+}
+
+ul li span.counter {
+    position: absolute;
+    right: 1rem;
+    top: calc(50% - 1.5rem);
+    line-height: 2rem;
+    border-radius: 3rem;
+    padding: 0.5rem;
+    text-align: center;
+    min-width: 2rem;
+    font-size: 2rem;
+}
+
+ul li span.counter.bottom {
+    top: calc(50%);
+}
+
+/* Bubble */
+
+ul li div.bubble {
+    padding: 1rem 2rem;
+    border-radius: 0.25rem;
+    line-height: 2.75rem;
+    position: relative;
+    box-sizing: border-box;
+    display: block;
+    font-size: 1.75rem;
+    background-color: white;
+    border-color: white;
+    max-width: calc(100% - 11rem);
+    float: left;
+
+    left: 9rem;
+    padding-left: 2rem;
+    width: auto;
+}
+
+ul li div.bubble > p {
+    display: inline;
+}
+
+ul li.oppose div.bubble {
+    margin-right: 9rem;
+    float: right;
+    position: initial;
+}
+
+ul li div.bubble span.info {
+    float: right;
+    padding-left: 1rem;
+}
+
+ul li.same span.icon {
+    display: none;
+}
+
+ul li div.bubble:after {
+     visibility: hidden;
+     display: block;
+     font-size: 0;
+     content: " ";
+     clear: both;
+     height: 0;
+}
+
+ul li div.quote {
+    font-style: italic;
+}
+
+ul li:not(.same) div.bubble:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -1.5rem;
+    border-top: 1.5rem solid black;
+    border-top-color: inherit;
+    border-left: 1.5rem solid transparent;
+    border-right: 1.5rem solid transparent;
+}
+
+ul li.oppose:not(.same) div.bubble:before {
+    left: calc(100% - 10.5rem);
+    top: 1.5rem;
+}
+
+/* Menu */
+
+ul.context_menu {
+    border-radius: 0.25rem;
+    overflow: hidden;
+    background-color: white;
+    color: #333;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0.5rem;
+    z-index: 3;
+    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.26), 0px 2px 10px 0px rgba(0, 0, 0, 0.16);
+    display: none;
+}
+
+ul.context_menu.shown {
+    display: block;
+}
+
diff --git a/sources/themes/material/css/menu.css b/sources/themes/material/css/menu.css
index 6dde255..8be716e 100644
--- a/sources/themes/material/css/menu.css
+++ b/sources/themes/material/css/menu.css
@@ -1,27 +1,37 @@
 /* Menu */
 
-body > nav > ul span.icon {
+body > nav > ul.list li > .primary {
     left: 1rem;
 }
-
+/*
 body > nav > ul:first-child > a:first-child > li,
 body > nav > ul:first-child > a:nth-child(2) > li {
-    height: 7rem;
-    line-height: 7rem;
+    height: 8rem;
+    line-height: 8rem;
 }
-
+*/
+body > nav > ul:nth-child(2) li p.normal,
+body > nav > ul:nth-child(3) li p.normal {
+    height: 6rem;
+    line-height: 6rem;
+}
+/*
 body > nav > ul:first-child > a:first-child > li div.control {
-    line-height: 7rem;
+    line-height: 8rem;
 }
-
+*/
 body > nav > ul a {
     color: white;
 }
-
-body > nav > ul p {
+body > nav > ul.list li > p:nth-last-of-type(2) + p {
     color: gray;
 }
 
+body > nav > ul.list.active li:hover:not(.subheader),
+body > nav > ul.list.active li.active:not(.subheader) {
+    background-color: rgba(255, 255, 255, 0.035);
+}
+/*
 body > nav > header.big {
     overflow: hidden;
     height: 7rem;
@@ -40,6 +50,7 @@ body > nav > header.big ul li .icon {
 body > nav > header.big ul li .control {
     line-height: 5rem;
 }
+*/
 
 ul.oppose {
     position: absolute;
@@ -47,3 +58,4 @@ ul.oppose {
     width: 100%;
     min-width: 10rem;
 }
+
diff --git a/sources/themes/material/css/style.css b/sources/themes/material/css/style.css
index 840b60e..edfc6bb 100644
--- a/sources/themes/material/css/style.css
+++ b/sources/themes/material/css/style.css
@@ -247,22 +247,22 @@ main > header {
 }
 
 main > header > div {
-    padding-left: 9rem;
+    /*padding-left: 9rem;*/
     position: relative;
     width: 35%;
     display: inline-block;
     /*overflow: hidden;*/
     box-sizing: border-box;
-    padding-right: 1rem;
+    /*padding-right: 1rem;*/
 }
-
+/*
 main > header > div > .return > * {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
 }
-
-main > header > div > ul.active:not(.context_menu) {
+*/
+/*main > header > div > ul.active:not(.context_menu) {
     float: right;
     margin-right: -1rem;
 }
@@ -288,14 +288,14 @@ main > header > div > ul.active:not(.context_menu) li span.icon {
 main > header > div > ul.active:not(.context_menu) li.thin span.icon {
     width: 3rem;
 }
-
+*/
 main > header > div:first-child:nth-last-child(2) ~ div {
     width: 65%;
     position: absolute;
     top: 0;
     right: 0;
 }
-
+/*
 main > header > div > span.icon {
     line-height: 7rem;
     left: 0;
@@ -320,15 +320,17 @@ main > header > div > form.return {
     padding-right: 0;
     padding-left: 9rem;
 }
-
+*/
 /* Not very beautiful… */
+/*
 main > header > div > .return.condensed > h2 {
     line-height: 3.5rem;
     font-size: 2.75rem;
     margin-top: 0.7rem;
     margin-bottom: -0.5rem;
 }
-
+*/
+/*
 main > header > div > .return > h4 {
     line-height: 2.5rem;
     font-size: 1.75rem;
@@ -343,7 +345,7 @@ main > header > div > span.active:hover {
     background-color: rgba(0, 0, 0, 0.05);
     cursor: pointer;
 }
-
+*/
 @media screen and (max-width: 1024px) {
     main > header > div,
     main > header > div:first-child:nth-last-child(2) ~ div {
@@ -392,10 +394,12 @@ main > section > div:first-child:nth-last-child(2) ~ div {
     position: absolute;
     top: 0;
     right: 0;
-    /*transition: right 0.2s ease;*/
-    -webkit-transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1);
-    transition: transform .3s cubic-bezier(.4,0,.2,1);
-    background-color: #EEE;
+    -webkit-transition: left .3s cubic-bezier(.4,0,.2,1);
+    transition: left .3s cubic-bezier(.4,0,.2,1);
+}
+
+main > section > div:first-child:nth-last-child(2) ~ div {
+    background-color: white;
 }
 
 main > section > div > div.contained { /* Specific behaviour when the scroll need to be inside the block */
@@ -418,15 +422,13 @@ main > section > div > div.contained > * {
     }
     main > section > div:first-child:nth-last-child(2) ~ div {
         width: 100%;
-        -webkit-transform: translateX(100%);
-        transform: translateX(100%);
+        left: 100%;
         z-index: 1;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.23), 0 0 10px rgba(0, 0, 0, 0.16);
     }
 
     main > section > div:first-child:nth-last-child(2) ~ div.enabled {
-        -webkit-transform: translateX(0);
-        transform: translateX(0);
+        left: 0%;
     }
 
     main,
@@ -445,15 +447,15 @@ main footer {
 
 /* Icon */
 span.icon {
-    width: 5rem;
+    /*width: 5rem;
     height: 5rem;
-    position: absolute;
+    position: absolute;*/
     font-size: 3rem;
     line-height: 5rem;
-    top: 50%;
-    left: 2rem;
+    /*top: 50%;
+    left: 2rem;*/
     text-align: center;
-    margin-top: -2.5rem;
+    /*margin-top: -2.5rem;*/
     background-size: cover;
     background-position: center;
 }
@@ -463,7 +465,7 @@ span.icon img {
     max-height: 100%;
 }
 
-span.icon.thumb {
+span.icon.primary.thumb {
     left: 0;
     width: 7rem;
     top: 0;
@@ -499,7 +501,7 @@ span.icon.small {
     line-height: 3rem;
     margin-top: -1.5rem;
 }
-
+/*
 span.icon.tiny {
     font-size: 1.8rem;
     font-weight: 600;
@@ -511,7 +513,7 @@ span.icon.large {
     line-height: 7rem;
     margin-top: -3.5rem;
 }
-
+*/
 span.icon.small.bubble:first-letter,
 span.icon.small.bubble i {
     font-size: 2rem;
@@ -561,22 +563,6 @@ main ul li .control > i {
     border: none;
 }
 
-/* Header */
-
-header.big {
-    background-size: cover, cover;
-    background-position: center center;
-    width: 100%;
-    max-width: 100%;
-    color: white;
-    position: relative;
-    margin-bottom: 2rem;
-}
-
-header.big p {
-    color: white;
-}
-
 /* Dialog */
 
 .dialog {
@@ -966,34 +952,3 @@ dl dd {
     opacity: 0.5;
     pointer-events: none;
 }
-
-/* Animation */
-.background_fade {
-    background-color: #CCC;
-    animation: fadeout 1s forwards;
-    -moz-animation: fadeout 1s forwards;
-    -webkit-animation: fadeout 1s forwards;
-    -o-animation: fadeout 1s forwards;
-}
-
-@keyframes fadeout {
-    to {
-        background-color:#fff;
-    }
-
-}
-@-moz-keyframes fadeout {
-    to {
-        background-color: #ffffff;
-    }
-}
-@-webkit-keyframes fadeout {
-    to {
-        background-color: #ffffff;
-    }
-}
-@-o-keyframes fadeout {
-    to {
-        background-color: #ffffff;
-    }
-}