diff --git a/app/views/conf.tpl b/app/views/conf.tpl
index 1dc48219b..83b683610 100755
--- a/app/views/conf.tpl
+++ b/app/views/conf.tpl
@@ -13,7 +13,7 @@
             <?php $this->widget('Config');?>
             <?php $this->widget('AdHoc');?>
             <?php //$this->widget('ConfigData');?>
-            <?php $this->widget('PubsubSubscriptionConfig');?>
+            <?php //$this->widget('PubsubSubscriptionConfig');?>
         </div>
     </section>
 </main>
diff --git a/app/views/page.tpl b/app/views/page.tpl
index a211bf659..f56e35a5b 100755
--- a/app/views/page.tpl
+++ b/app/views/page.tpl
@@ -14,8 +14,6 @@
     <script src="<?php echo BASE_URI; ?>app/assets/js/leaflet.js"></script>
     
     <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
-    <!--<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">-->
-    
     <meta name="viewport" content="width=device-width, user-scalable=no">
 
     <?php
@@ -28,55 +26,13 @@
         $this->addCss('block.css');
         $this->addCss('menu.css');
         $this->addCss('material-design-iconic-font.min.css');
-        /*$this->addCss('css/animations.css');
-
-        $this->addCss('css/fonts.css');
-        $this->addCss('css/forms.css');
-        $this->addCss('css/submitform.css');
-
-        $this->addCss('css/nav.css');
 
-        $this->addCss('css/style.css');
-        $this->addCss('css/posts.css');
-
-        $this->addCss('css/template.css');
-        */
         $this->widget('System');
 
         $this->scripts();
-        /*
-        $this->addCss('css/mobile.css');
-         
-        $this->addCss('css/font-awesome.css'); 
-    
-        $user = new User();
-
-        $color = $user->getConfig('color');
-        
-        if(isset($color)) {
-            echo '
-            <style type="text/css">
-                nav {
-                    background-color: #'.$color.';
-                    animation: none;
-                    -webkit-animation: none;
-                }
-            </style>';
-        }
-
-        $size = $user->getConfig('size');    
-        if(isset($size)) {
-            echo '
-            <style type="text/css">
-                body { font-size: '.$size.'px; }
-                @media screen and (max-width: 1024px) {
-                    body { font-size: '.floor($size*1.15).'px; }
-                }
-            </style>';
-        }*/
     ?>
     </head>
-    <body class="<?php $this->color();?>">
+    <body class="<?php //$this->color();?>">
         <noscript>
             <style type="text/css">
                 nav {display:none;} #content {display: none;}
@@ -90,24 +46,6 @@
         <?php $this->widget('Notification');?>
         <?php $this->content();?>
 
-        <!--
-        <nav>
-            <div class="wrapper">
-                <?php //$this->menu();?>
-            </div>
-        </nav>-->
-        
-        <!--<div id="baseline"></div>-->
-
-        <!--
-        <div id="content">
-            <?php //$this->widget('Ack');?>
-            <?php //$this->content();?>
-          
-            <footer>
-                © <a href="http://www.movim.eu">Movim</a> • 2008 - 2014 • Under <a href="http://www.gnu.org/licenses/agpl-3.0.html">GNU Affero General Public License</a>
-            </footer>
-        </div>-->
         <?php 
             $this->displayFooterDebug();
         ?>
diff --git a/app/widgets/Chats/Chats.php b/app/widgets/Chats/Chats.php
index 6f6dfea25..81a6e37ab 100644
--- a/app/widgets/Chats/Chats.php
+++ b/app/widgets/Chats/Chats.php
@@ -92,11 +92,24 @@ class Chats extends WidgetCommon
     {
         $view = $this->tpl();
 
+        $cd = new \Modl\ContactDAO;
+        $view->assign('top', $cd->getTop(10));
+
+        Dialog::fill($view->draw('_chats_add', true), true);
+    }
+
+    /**
+     * @brief Display the extended list
+     */
+    function ajaxAddExtend()
+    {
+        $view = $this->tpl();
+
         $cd = new \Modl\ContactDAO;
         $contacts = $cd->getRosterSimple();
         $view->assign('contacts', $contacts);
 
-        Dialog::fill($view->draw('_chats_add', true), true);
+        RPC::call('movim_fill', 'add_extend', $view->draw('_chats_add_extend', true));
     }
 
     function prepareChats()
diff --git a/app/widgets/Chats/_chats_add.tpl b/app/widgets/Chats/_chats_add.tpl
index e66590cb6..38a6b2157 100644
--- a/app/widgets/Chats/_chats_add.tpl
+++ b/app/widgets/Chats/_chats_add.tpl
@@ -1,11 +1,8 @@
 <section class="scroll">
     <h3>{$c->__('chats.add')}</h3>
-    <br />
-    <ul class="active">
-        {loop="$contacts"}
-            {if="$group != $value->groupname"}
-                <li class="subheader">{$value->groupname}</li>
-            {/if}
+    <ul class="active" id="add_extend">
+        <li class="subheader">{$c->__('chats.frequent')}</li>
+        {loop="$top"}
             <li onclick="Chats_ajaxOpen('{$value->jid}'); Dialog.clear()">
                 <span class="icon bubble">
                     <img
@@ -16,9 +13,15 @@
                 </span>
                 <span>{$value->getTrueName()}</span>
             </li>
-            {$group = $value->groupname}
         {/loop}
+        <li onclick="Chats_ajaxAddExtend()">
+            <span class="icon">
+                <i class="md md-add"></i>
+            </span>
+            <span>{$c->__('chats.more')}</span>
+        </li>
     </ul>
+    <br />
     <!--<div id="search_results">
 
     </div>-->
diff --git a/app/widgets/Chats/_chats_add_extend.tpl b/app/widgets/Chats/_chats_add_extend.tpl
new file mode 100644
index 000000000..46c8049de
--- /dev/null
+++ b/app/widgets/Chats/_chats_add_extend.tpl
@@ -0,0 +1,17 @@
+<br />
+{loop="$contacts"}
+    {if="$group != $value->groupname"}
+        <li class="subheader">{$value->groupname}</li>
+    {/if}
+    <li onclick="Chats_ajaxOpen('{$value->jid}'); Dialog.clear()">
+        <span class="icon bubble">
+            <img
+                class="avatar"
+                src="{$value->getPhoto('s')}"
+                alt="avatar"
+            />
+        </span>
+        <span>{$value->getTrueName()}</span>
+    </li>
+    {$group = $value->groupname}
+{/loop}
diff --git a/app/widgets/Chats/locales.ini b/app/widgets/Chats/locales.ini
index c58cd2a8a..64f8f451b 100644
--- a/app/widgets/Chats/locales.ini
+++ b/app/widgets/Chats/locales.ini
@@ -1,6 +1,8 @@
 [chats]
 chats.empty             = 'Open a new conversation by clicking on the plus button bellow'
 chats.add               = 'Chat with a contact'
+chats.frequent          = 'Frequent contacts'
+chats.more              = 'Load more contacts'
 
 [message]
 message.encrypted       = 'Encrypted message'
diff --git a/app/widgets/Hello/hello.tpl b/app/widgets/Hello/hello.tpl
index d432a2f81..831418986 100644
--- a/app/widgets/Hello/hello.tpl
+++ b/app/widgets/Hello/hello.tpl
@@ -22,7 +22,7 @@
     </ul>
     {if="$c->supported('pubsub')"}
     <div class="card active">
-        <ul id="news" class="flex thick" onclick="movim_reload('{$c->route('news')}')">
+        <ul id="news" class="flex medium" onclick="movim_reload('{$c->route('news')}')">
             <li class="subheader block large">News</li>
             {loop="$news"}
                 <li class="block condensed" data-id="{$value->nodeid}"
diff --git a/app/widgets/Login/login.css b/app/widgets/Login/login.css
index 87a8a86af..00e2363d3 100755
--- a/app/widgets/Login/login.css
+++ b/app/widgets/Login/login.css
@@ -1,5 +1,5 @@
 body main {
-    background-color: #32434D;
+    background-color: #212121;
 
     background-image: url(img/logo.svg);
     background-repeat: no-repeat;
@@ -7,13 +7,6 @@ body main {
     background-size: 30rem auto;
 }
 
-@media screen and (min-width: 600px) {
-    body main {
-        -webkit-animation: 60s infinite colorful;
-        animation: 60s infinite colorful;
-    }
-}
-
 @media screen and (max-width: 600px) {
     body main {
         background-image: none;
diff --git a/app/widgets/Menu/_menu_add.tpl b/app/widgets/Menu/_menu_add.tpl
index 1586e8e41..2f8bf1eb4 100644
--- a/app/widgets/Menu/_menu_add.tpl
+++ b/app/widgets/Menu/_menu_add.tpl
@@ -1,3 +1,3 @@
 <a onclick="Post_ajaxCreate(); MovimTpl.showPanel();" class="button action color red">
-    <i class="md md-add"></i>
+    <i class="md md-create"></i>
 </a>
diff --git a/app/widgets/Navigation/navigation.tpl b/app/widgets/Navigation/navigation.tpl
index ba59b1e40..a5fb72ee4 100644
--- a/app/widgets/Navigation/navigation.tpl
+++ b/app/widgets/Navigation/navigation.tpl
@@ -1,4 +1,4 @@
-<ul class="active divided">
+<ul class="active">
     <a class="classic" href="{$c->route('root')}">
         <li class="action {if="$page == 'main'"}active{/if}">
             <!--<div class="action on_mobile">
diff --git a/themes/material/css/color.css b/themes/material/css/color.css
index a67392a5d..c7dc62b80 100644
--- a/themes/material/css/color.css
+++ b/themes/material/css/color.css
@@ -10,7 +10,7 @@
 }
 
 .color.dark {
-    background-color: #1F1F1F;
+    background-color: #212121;
 }
 
 .color.dark *.divided > *:not(:last-child) {
@@ -78,16 +78,7 @@ label.orange, .icon.orange   { color: #FF9800; }
 label.yellow, .icon.yellow   { color: #FFEB3B; }
 label.brown , .icon.brown    { color: #795548; }
 label.gray  , .icon.gray     { color: #9E9E9E; }
-/*
-form input:focus,
-form textarea:focus {
-    border-bottom: 2px solid #2196F3;
-}
-form input:focus + label,
-form textarea:focus + label {
-    color: #2196F3;
-}
-*/
+
 form input:focus:invalid,
 form textarea:focus:invalid {
     border-bottom-color: #F44336;
@@ -96,6 +87,46 @@ form input:focus:invalid + label,
 form textarea:focus:invalid + label {
     color: #F44336;
 }
+
+/* Default color : gray */
+
+.button.color,
+input[type=button].color,
+ul li span.counter,
+main > header { background-color: #3F51B5; color: white; border-color: #3F51B5; }
+
+.tabs,
+.tabs a:not(.classic) {
+    border-color: #3F51B5;
+    color: #3F51B5;
+}
+
+/* Gray accent : orange */
+
+.button,
+input[type=button],
+a:not(.classic) { color: #FF5722; border-color: #FF5722; }
+
+form > div .checkbox:before { background-color: #FFE0B2; }
+form > div .checkbox > input[type="checkbox"]:checked + label { background-color: #FF9800; }
+
+.button.color,
+ul li span.counter,
+form > div .radio > input[type="radio"]:checked + label {
+    border-color: #FF5722;
+    background-color: #FF5722;
+}
+
+form input:focus:not(:invalid) + label,
+form textarea:focus:not(:invalid) + label {
+    color: #FF5722;
+}
+
+form input:focus:not(:invalid),
+form textarea:focus:not(:invalid) {
+    border-bottom-color: #FF5722;
+}
+
 /*
 form input:focus:valid {
     border-bottom: 2px solid #4CAF50;
@@ -107,20 +138,23 @@ form input:focus:valid + label {
 /* Global color palette */
 
 /* Indigo */
+/*
 body.indigo .button.color,
 body.indigo input[type=button].color,
 body.indigo ul li span.counter,
 body.indigo main > header { background-color: #3F51B5; color: white; border-color: #3F51B5; }
-
+*/
 /* 200 */
+/*
 body.indigo main > header a { color: #9fa8da; }
 
 body.indigo .tabs,
 body.indigo .button,
 body.indigo input[type=button],
 body.indigo a:not(.classic) { color: #303F9F; border-color: #303F9F; }
-
+*/
 /* Indigo accent : pink */
+/*
 body.indigo form > div .checkbox:before { background-color: #FF80AB; }
 body.indigo form > div .checkbox > input[type="checkbox"]:checked + label { background-color: #F50057; }
 
@@ -138,9 +172,9 @@ body.indigo form input:focus:not(:invalid),
 body.indigo form textarea:focus:not(:invalid) {
     border-bottom-color: #F50057;
 }
-
+*/
 /* Gray */
-
+/*
 body.gray .button.color,
 body.gray input[type=button].color,
 body.gray ul li span.counter,
@@ -150,9 +184,9 @@ body.gray .tabs,
 body.gray .button,
 body.gray input[type=button],
 body.gray a:not(.classic) { color: #616161; border-color: #616161; }
-
+*/
 /* Gray accent : orange */
-
+/*
 body.gray form > div .checkbox:before { background-color: #FFE0B2; }
 body.gray form > div .checkbox > input[type="checkbox"]:checked + label { background-color: #FF9800; }
 
@@ -170,25 +204,27 @@ body.gray form input:focus:not(:invalid),
 body.gray form textarea:focus:not(:invalid) {
     border-bottom-color: #FF9800;
 }
-
+*/
 /* Green */
-
+/*
 body.green .button.color,
 body.green input[type=button].color,
 body.green ul li span.counter,
 body.green main > header { background-color: #689F38; color: white; border-color: #689F38; }
-
+*/
 /* 200 */
+/*
 body.green main > header a { color: #DCEDC8; }
 
 body.green .tabs,
 body.green .button,
 body.green input[type=button],
 body.green a:not(.classic) { color: #388E3C; border-color: #388E3C; }
-
+*/
 /* green accent : purple */
 
 /*body.green form > div .checkbox:before { background-color: #BBDEFB; }*/
+/*
 body.green form > div .checkbox > input[type="checkbox"]:checked + label { background-color: #2196F3; }
 
 body.green form > div .radio > input[type="radio"]:checked + label {
@@ -205,9 +241,9 @@ body.green form input:focus:not(:invalid),
 body.green form textarea:focus:not(:invalid) {
     border-bottom-color: #2196F3;
 }
-
+*/
 /* Orange */
-
+/*
 body.orange .button.color, 
 body.orange input[type=button].color,
 body.orange ul li span.counter,
@@ -217,9 +253,9 @@ body.orange .tabs,
 body.orange .button,
 body.orange input[type=button],
 body.orange a:not(.classic) { color: #F57C00; border-color: #F57C00; }
-
+*/
 /* orange accent : blue */
-
+/*
 body.orange form > div .checkbox:before { background-color: #BBDEFB; }
 body.orange form > div .checkbox > input[type="checkbox"]:checked + label { background-color: #2196F3; }
 
@@ -237,24 +273,25 @@ body.orange form input:focus:not(:invalid),
 body.orange form textarea:focus:not(:invalid) {
     border-bottom-color: #2196F3;
 }
-
+*/
 /* Blue */
-
+/*
 body.blue .button.color, 
 body.blue input[type=button].color,
 body.blue ul li span.counter,
 body.blue main > header { background-color: #2196F3; color: white; border-color: #2196F3; }
-
+*/
 /* 200 */
+/*
 body.blue main > header a { color: #90caf9; }
 
 body.blue .tabs,
 body.blue .button,
 body.blue input[type=button],
 body.blue a:not(.classic) { color: #1976D2; border-color: #1976D2; }
-
+*/
 /* blue accent : deep purple */
-
+/*
 body.blue form > div .checkbox:before { background-color: #B388FF; }
 body.blue form > div .checkbox > input[type="checkbox"]:checked + label { background-color: #651FFF; }
 
@@ -272,24 +309,25 @@ body.blue form input:focus:not(:invalid),
 body.blue form textarea:focus:not(:invalid) {
     border-bottom-color: #651FFF;
 }
-
+*/
 /* Red */
-
+/*
 body.red .button.color, 
 body.red input[type=button].color,
 body.red ul li span.counter,
 body.red main > header { background-color: #DB4336; color: white; border-color: #DB4336; }
-
+*/
 /* 200 */
+/*
 body.red main > header a { color: #EF9A9A; }
 
 body.red .tabs,
 body.red .button,
 body.red input[type=button],
 body.red a:not(.classic) { color: #D32F2F; border-color: #D32F2F; }
-
+*/
 /* red accent : blue */
-
+/*
 body.red form > div .checkbox:before { background-color: #82B1FF; }
 body.red form > div .checkbox > input[type="checkbox"]:checked + label { background-color: #2979FF; }
 
@@ -307,3 +345,4 @@ body.red form input:focus:not(:invalid),
 body.red form textarea:focus:not(:invalid) {
     border-bottom-color: #2979FF;
 }
+*/
diff --git a/themes/material/css/form.css b/themes/material/css/form.css
index 4d4b58c2b..cb4aeba5e 100644
--- a/themes/material/css/form.css
+++ b/themes/material/css/form.css
@@ -131,32 +131,40 @@ form > div .radio > input[type="radio"] {
 
 form > div .checkbox {
     position: relative;
-    height: 2.25rem;
-    border-radius: 2rem;
-    margin-left: 1rem;
-    width: 5rem;
-    background-color: rgba(0, 0, 0, 0.5);
-    margin: 1.5rem 0;
+    width: 4.5rem;
+    height: 5rem;
+    top: 1rem;
 }
 
-form > div .checkbox:before {
+form > div .checkbox:before,
+form > div .checkbox:after {
     content: '';
     display: block;
     position: absolute;
     height: 2.25rem;
+    width: 2.25rem;
+}
+
+form > div .checkbox:before {
     border-radius: 2rem 0 0 2rem;
-    width: 2.7rem;
-    background-color: rgba(255, 255, 255, 0.5);
+}
+
+form > div .checkbox:after {
+    border-radius: 0 2rem 2rem 0;
+    background-color: rgba(0, 0, 0, 0.25);
+    right: 0;
+    top: 0;
 }
 
 form > div .checkbox > input[type="checkbox"] + label {
+    z-index: 1;
     display: block;
     background-color: #FAFAFA;
     box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.5);
-    width: 3.5rem;
-    height: 3.5rem;
+    width: 3rem;
+    height: 3rem;
     border-radius: 2rem;
-    top: -0.65rem;
+    top: -0.5rem;
     left: -0.2rem;
     position: relative;
     font-size: 2rem;
@@ -165,18 +173,15 @@ form > div .checkbox > input[type="checkbox"] + label {
     transition: left 0.3s ease, box-shadow 0.1s ease;
 }
 
-form > div .checkbox > input[type="checkbox"] + label:hover {
+form > div .checkbox > input[type="checkbox"] + label:hover,
+form > div .checkbox > input[type="checkbox"]:checked + label:hover {
     cursor: pointer;
-    box-shadow: 0  0 0 1.5rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.5rem rgba(0, 0, 0, 0.5);
+    box-shadow: 0  0 0 1.75rem rgba(0, 0, 0, 0.05), 0 0.2rem 0.5rem rgba(0, 0, 0, 0.5);
 }
 
 form > div .checkbox > input[type="checkbox"]:checked + label {
     background-color: #009587;
-    left: 1.1em;
-}
-
-form > div .checkbox > input[type="checkbox"]:checked + label:hover {
-    box-shadow: 0  0 0 1.5rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.5rem rgba(0, 0, 0, 0.5);
+    left: 0.8em;
 }
 
 /* Radio */
@@ -242,11 +247,15 @@ input[type=button] {
 
     border: 0;
 
-    transition: background 0.3s ease;
+    transition: background 0.3s ease, box-shadow 0.3s ease;
 
     box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.5);
 }
 
+.button:active {
+    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.23), 0 0.5rem 1.25rem rgba(0, 0, 0, 0.16);
+}
+
 .button.flat,
 input[type=button].flat {
     box-shadow: none;
@@ -279,13 +288,15 @@ input[type=button].flat:focus {
     bottom: 2rem;
     right: 2rem;
     border-radius: 10rem;
-    width: 3rem;
     min-height: 0rem;
-    line-height: 6rem;
-    padding: 1rem;
-    height: 8rem;
+    min-width: 0rem;
+    line-height: 7rem;
+    height: 7rem;
+    width: 7rem;
     z-index: 1;
-    font-size: 3rem;
+    font-size: 3.5rem;
+
+    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.23), 0 0.5rem 1.25rem rgba(0, 0, 0, 0.16);
 }
 
 .button.action:hover {
@@ -303,6 +314,6 @@ li.action div.action .button {
 
 @media screen and (min-width: 1024px) {
     main > section > div:first-child:nth-last-child(2) .button.action {
-        right: calc(75% + 3rem);
+        right: calc(70% + 3rem);
     }
 }
diff --git a/themes/material/css/style.css b/themes/material/css/style.css
index c6051787f..ea5e89083 100644
--- a/themes/material/css/style.css
+++ b/themes/material/css/style.css
@@ -98,8 +98,8 @@ h4.gray {
 
 article section content ul li, /* Body 1 */
 article section content p {
-    font-size: 1.75rem;
-    font-weight: 400;
+    font-size: 2rem;
+    font-weight: 300;
 }
 
 .snackbar, /* Body 2 */
@@ -220,14 +220,14 @@ main > header {
     position: relative;
     height: 7rem;
     overflow: hidden;
-    box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
     z-index: 2;
 }
 
 main > header > div {
     padding-left: 9rem;
     position: relative;
-    width: 25%;
+    width: 30%;
     display: inline-block;
     overflow: hidden;
     box-sizing: border-box;
@@ -258,7 +258,7 @@ main > header > div > ul.active li span.icon {
 }
 
 main > header > div:first-child:nth-last-child(2) ~ div {
-    width: 75%;
+    width: 70%;
     position: absolute;
     top: 0;
     right: 0;
@@ -333,10 +333,10 @@ main > section > div > * {
 
 /* Two blocks*/
 main > section > div:first-child:nth-last-child(2) {
-    width: 25%;
+    width: 30%;
 }
 main > section > div:first-child:nth-last-child(2) ~ div {
-    width: 75%;
+    width: 70%;
     position: absolute;
     top: 0;
     right: 0;
@@ -748,7 +748,7 @@ dl dd {
 
 @media screen and (max-width: 800px) {
     .padded {
-        padding-left: 2rem;
+        padding: 2rem;
         box-sizing: border-box;
     }
 
