diff --git a/src/Wallabag/CoreBundle/Resources/views/base.html.twig b/src/Wallabag/CoreBundle/Resources/views/base.html.twig
index 223e8433c..162fb463d 100644
--- a/src/Wallabag/CoreBundle/Resources/views/base.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/base.html.twig
@@ -90,20 +90,22 @@
                 </ul>
             {% endblock %}
 
-            {% block precontent %}{% endblock %}
+            <main>
+                {% block precontent %}{% endblock %}
 
-            {% block messages %}
-                {% for flashMessage in app.session.flashbag.get('notice') %}
-                    <div class="messages success">
-                        <a href="#" class="closeMessage">×</a>
-                        <p>{{ flashMessage }}</p>
-                    </div>
-                {% endfor %}
-            {% endblock %}
+                {% block messages %}
+                    {% for flashMessage in app.session.flashbag.get('notice') %}
+                        <div class="messages success">
+                            <a href="#" class="closeMessage">×</a>
+                            <p>{{ flashMessage }}</p>
+                        </div>
+                    {% endfor %}
+                {% endblock %}
 
-            <div id="content" class="w600p center">
-                {% block content %}{% endblock %}
-            </div>
+                <div id="content" class="w600p">
+                    {% block content %}{% endblock %}
+                </div>
+            </main>
         </div>
 
         {% block footer %}
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/base.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/base.html.twig
deleted file mode 100644
index 8c9421656..000000000
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/base.html.twig
+++ /dev/null
@@ -1,134 +0,0 @@
-<!DOCTYPE html>
-<!--[if lte IE 6]><html class="no-js ie6 ie67 ie678" lang="en"><![endif]-->
-<!--[if lte IE 7]><html class="no-js ie7 ie67 ie678" lang="en"><![endif]-->
-<!--[if IE 8]><html class="no-js ie8 ie678" lang="en"><![endif]-->
-<!--[if gt IE 8]><html class="no-js" lang="en"><![endif]-->
-<html lang="fr">
-    <head>
-        {% block head %}
-            <meta name="viewport" content="initial-scale=1.0">
-            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-            <!--[if IE]>
-            <meta http-equiv="X-UA-Compatible" content="IE=10">
-            <![endif]-->
-
-            <link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-152.png') }}" sizes="152x152">
-            <link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-152.png') }}" sizes="152x152">
-
-            <link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-144.png') }}" sizes="144x144">
-            <link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-144.png') }}" sizes="144x144">
-
-            <link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-120.png') }}" sizes="120x120">
-            <link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-120.png') }}" sizes="120x120">
-
-            <link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-114.png') }}" sizes="114x114">
-            <link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-114.png') }}" sizes="114x114">
-
-            <link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-76.png') }}" sizes="76x76">
-            <link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-76.png') }}" sizes="76x76">
-
-            <link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-72.png') }}" sizes="72x72">
-            <link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-72.png') }}" sizes="72x72">
-
-            <link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-57.png') }}" sizes="57x57">
-            <link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-57.png') }}" sizes="57x57">
-
-            <link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon.png') }}">
-            <link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon.png') }}">
-
-            <link rel="shortcut icon" type="image/x-icon" href="{{ asset('themes/_global/img/appicon/favicon.ico') }}">
-
-            {% block css %}{% endblock %}
-            {% block scripts %}
-                <script src="{{ asset('themes/_global/js/jquery-2.0.3.min.js') }}"></script>
-                <script src="{{ asset('themes/_global/js/autoClose.js') }}"></script>
-                <script src="{{ asset('themes/_global/js/saveLink.js') }}"></script>
-                <script src="{{ asset('themes/_global/js/popupForm.js') }}"></script>
-                <script src="{{ asset('themes/_global/js/jquery.cookie.js') }}"></script>
-                <script src="{{ asset('themes/_global/js/bookmarklet.js') }}"></script>
-                <script src="{{ asset('themes/_global/js/closeMessage.js') }}"></script>
-            {% endblock %}
-
-            <title>{% block title %}{% endblock %} - wallabag</title>
-        {% endblock %}
-    </head>
-
-    <body class="{% block body_class %}{% endblock %}">
-        {% block header %}
-        {% endblock %}
-
-        <div id="main">
-            {% block menu %}
-                <nav class="cyan darken-1">
-                    <ul id="slide-out" class="side-nav fixed">
-                        {% block logo %}
-                            <li class="logo border-bottom">
-                                <a class="waves-effect" title="{% trans %}Back to unread articles{% endtrans %}" href="{{ path('unread') }}">
-                                    <img src="{{ asset('themes/baggy/img/logo-other_themes.png') }}" alt="wallabag logo" />
-                                </a>
-                            </li>
-                        {% endblock %}
-
-                        {% set currentRoute = app.request.attributes.get('_route') %}
-
-                        <li class="bold {% if currentRoute == 'unread' or currentRoute == 'homepage' %}active{% endif %}"><a class="waves-effect" href="{{ path('unread') }}">{% trans %}unread{% endtrans %}</a></li>
-                        <li class="bold {% if currentRoute == 'starred' %}active{% endif %}"><a class="waves-effect" href="{{ path('starred') }}">{% trans %}starred{% endtrans %}</a></li>
-                        <li class="bold {% if currentRoute == 'archive' %}active{% endif %}"><a class="waves-effect" href="{{ path('archive') }}">{% trans %}archive{% endtrans %}</a></li>
-                        <li class="bold border-bottom {% if currentRoute == 'tags' %}active{% endif %}"><a class="waves-effect" href="{{ path('tag') }}">{% trans %}tags{% endtrans %}</a></li>
-                        <li class="bold {% if currentRoute == 'config' %}active{% endif %}"><a class="waves-effect" href="{{ path('config') }}">{% trans %}config{% endtrans %}</a></li>
-                        <li class="bold {% if currentRoute == 'howto' %}active{% endif %}"><a class="waves-effect" href="{{ path('howto') }}">{% trans %}howto{% endtrans %}</a></li>
-                        <li class="bold"><a class="waves-effect" class="icon icon-power" href="{{ path('logout') }}" title="{% trans %}logout{% endtrans %}">{% trans %}logout{% endtrans %}</a></li>
-                    </ul>
-                    <div class="nav-wrapper nav-panels">
-                        <a href="#" data-activates="slide-out" class="nav-panel-menu button-collapse"><i class="mdi-navigation-menu"></i></a>
-                        <div class="input-field nav-panel-buttom">
-                            <ul>
-                                <li class="bold"><a class="waves-effect" href="{{ path('new_entry') }}" id="nav-btn-add"><i class="mdi-content-add"></i></a></li>
-                                <li><a class="waves-effect" href="javascript: void(null);" id="nav-btn-search"><i class="mdi-action-search"></i></a>
-                            </ul>
-                        </div>
-                        <form method="get" action="index.php">
-                            <div class="input-field nav-panel-search" style="display: none">
-                                <input name="search" id="searchfield" type="search" required placeholder="{% trans %}Enter your search here{% endtrans %}">
-                                <label for="search"><i class="mdi-action-search"></i></label>
-                                <i class="mdi-navigation-close"></i>
-                            </div>
-                        </form>
-                        <!--<form name="entry" method="post" action="{{ path('new_entry') }}">
-                            <div class="input-field nav-panel-add" style="display: none">
-                                <input id="add entry_url" name="entry[url]" type="search" required placeholder="{% trans %}Enter your link here{% endtrans %}">
-                                <label for="add"><i class="mdi-content-add"></i></label>
-                                <i class="mdi-navigation-close"></i>
-                            </div>
-                        </form>-->
-                    </div>
-                </nav>
-            {% endblock %}
-
-            <main>
-
-                {% block precontent %}{% endblock %}
-
-                {% block messages %}
-                    {% for flashMessage in app.session.flashbag.get('notice') %}
-                        <div class="messages success">
-                            <a href="#" class="closeMessage">×</a>
-                            <p>{{ flashMessage }}</p>
-                        </div>
-                    {% endfor %}
-                {% endblock %}
-
-                <div id="content" class="w600p">
-                    {% block content %}{% endblock %}
-                </div>
-
-            </main>
-        </div>
-
-        {% block footer %}
-            <footer class="w600p center mt3 mb3 smaller txtright">
-                <p>{% trans %}powered by{% endtrans %} <a href="http://wallabag.org">wallabag</a></p>
-            </footer>
-        {% endblock %}
-    </body>
-</html>
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
index 54bba9a6a..2b32c2f9d 100644
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/layout.html.twig
@@ -18,6 +18,68 @@
 {% block header %}
 {% endblock %}
 
+{% block messages %}
+    {% for flashMessage in app.session.flashbag.get('notice') %}
+        <script>
+            Materialize.toast('{{ flashMessage }}', 4000);
+        </script>
+    {% endfor %}
+{% endblock %}
+
+{% block menu %}
+    <nav class="cyan darken-1">
+        <ul id="slide-out" class="side-nav fixed">
+            {% block logo %}
+                <li class="logo border-bottom">
+                    <a class="waves-effect" title="{% trans %}Back to unread articles{% endtrans %}" href="{{ path('unread') }}">
+                        <img src="{{ asset('themes/baggy/img/logo-other_themes.png') }}" alt="wallabag logo" />
+                    </a>
+                </li>
+            {% endblock %}
+
+            {% set currentRoute = app.request.attributes.get('_route') %}
+
+            <li class="bold {% if currentRoute == 'unread' or currentRoute == 'homepage' %}active{% endif %}"><a class="waves-effect" href="{{ path('unread') }}">{% trans %}unread{% endtrans %}</a></li>
+            <li class="bold {% if currentRoute == 'starred' %}active{% endif %}"><a class="waves-effect" href="{{ path('starred') }}">{% trans %}starred{% endtrans %}</a></li>
+            <li class="bold {% if currentRoute == 'archive' %}active{% endif %}"><a class="waves-effect" href="{{ path('archive') }}">{% trans %}archive{% endtrans %}</a></li>
+            <li class="bold border-bottom {% if currentRoute == 'tags' %}active{% endif %}"><a class="waves-effect" href="{{ path('tag') }}">{% trans %}tags{% endtrans %}</a></li>
+            <li class="bold {% if currentRoute == 'config' %}active{% endif %}"><a class="waves-effect" href="{{ path('config') }}">{% trans %}config{% endtrans %}</a></li>
+            <li class="bold {% if currentRoute == 'howto' %}active{% endif %}"><a class="waves-effect" href="{{ path('howto') }}">{% trans %}howto{% endtrans %}</a></li>
+            <li class="bold"><a class="waves-effect" class="icon icon-power" href="{{ path('logout') }}" title="{% trans %}logout{% endtrans %}">{% trans %}logout{% endtrans %}</a></li>
+        </ul>
+        <div class="nav-wrapper nav-panels">
+            <a href="#" data-activates="slide-out" class="nav-panel-menu button-collapse"><i class="mdi-navigation-menu"></i></a>
+            <div class="left action">
+                {% if currentRoute == 'unread' or currentRoute == 'homepage' %}{% trans %}Unread{% endtrans %}{% endif %}
+                {% if currentRoute == 'starred' %}{% trans %}Starred{% endtrans %}{% endif %}
+                {% if currentRoute == 'archive' %}{% trans %}Archive{% endtrans %}{% endif %}
+                {% if currentRoute == 'tags' %}{% trans %}Tags{% endtrans %}{% endif %}
+                {% if currentRoute == 'config' %}{% trans %}Config{% endtrans %}{% endif %}
+            </div>
+            <div class="input-field nav-panel-buttom">
+                <ul>
+                    <li class="bold"><a class="waves-effect" href="{{ path('new_entry') }}" id="nav-btn-add"><i class="mdi-content-add"></i></a></li>
+                    <li><a class="waves-effect" href="javascript: void(null);" id="nav-btn-search"><i class="mdi-action-search"></i></a>
+                </ul>
+            </div>
+            <form method="get" action="index.php">
+                <div class="input-field nav-panel-search" style="display: none">
+                    <input name="search" id="searchfield" type="search" required placeholder="{% trans %}Enter your search here{% endtrans %}">
+                    <label for="search"><i class="mdi-action-search"></i></label>
+                    <i class="mdi-navigation-close"></i>
+                </div>
+            </form>
+            <!--<form name="entry" method="post" action="{{ path('new_entry') }}">
+                <div class="input-field nav-panel-add" style="display: none">
+                    <input id="add entry_url" name="entry[url]" type="search" required placeholder="{% trans %}Enter your link here{% endtrans %}">
+                    <label for="add"><i class="mdi-content-add"></i></label>
+                    <i class="mdi-navigation-close"></i>
+                </div>
+            </form>-->
+        </div>
+    </nav>
+{% endblock %}
+
 {% block footer %}
     <footer class="page-footer cyan darken-2">
         <div class="container">
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
index 8ec83f899..25ec0bfcb 100755
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
@@ -69,7 +69,7 @@ nav, main, footer {
 }
 
 .nav-panels {
-    overflov: hidden;
+    overflow: hidden;
 }
 
 .nav-panel-buttom li {
@@ -80,6 +80,22 @@ nav, main, footer {
     float: right;
 }
 
+.nav-panels {
+    transition: background 0.2s ease;
+}
+
+.nav-panel-add .mdi-content-add,
+.nav-panel-search .mdi-action-search,
+.nav-panels .mdi-navigation-close {
+    color: #444 !important;
+}
+
+.nav-panels .action {
+    padding-left: 0.75rem;
+    font-size: 2.1rem;
+    white-space: nowrap;
+}
+
 /* ==========================================================================
    2 = Side-nav
    ========================================================================== */
@@ -129,7 +145,8 @@ main ul.row {
 }
 
 .data .card .card-content {
-    min-height: 25em;
+    height: 22em;
+    overflow: hidden;
 }
 
 .card .card-content .card-title {
diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js
index b0f82c4bc..eee3903e8 100755
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js
@@ -10,19 +10,26 @@ $(document).ready(function(){
     //    $(".nav-panel-buttom").hide(100);
     //    $(".nav-panel-add").show(100);
     //    $(".nav-panel-menu").hide(100);
+    //    $(".nav-panels .action").hide(100);
+    //    $(".nav-panel-menu").addClass('hidden');
+    //    $(".nav-panels").css('background', 'white');
     //    return false;
     //});
     $('#nav-btn-search').click(function(){
         $(".nav-panel-buttom").hide(100);
         $(".nav-panel-search").show(100);
+        $(".nav-panels .action").hide(100);
         $(".nav-panel-menu").addClass('hidden');
+        $(".nav-panels").css('background', 'white');
         return false;
     });
     $('.mdi-navigation-close').click(function(){
         $(".nav-panel-add").hide(100);
         $(".nav-panel-search").hide(100);
         $(".nav-panel-buttom").show(100);
+        $(".nav-panels .action").show(100);
         $(".nav-panel-menu").removeClass('hidden');
+        $(".nav-panels").css('background', 'transparent');
         return false;
     });
 });
\ No newline at end of file
