diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index d36956b95..52ea76b63 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -15,9 +15,9 @@ updates:
       patterns:
         - "*fontsource*"
   ignore:
-  - dependency-name: materialize-css
+  - dependency-name: @materializecss/materialize
     versions:
-    - "> 0.98.2"
+    - "> 1.2.2"
 - package-ecosystem: composer
   directory: "/"
   schedule:
diff --git a/assets/index.js b/assets/index.js
index 8fe90fc4e..700ff228b 100755
--- a/assets/index.js
+++ b/assets/index.js
@@ -1,8 +1,8 @@
 import $ from 'jquery';
 
 /* Materialize imports */
-import 'materialize-css/dist/css/materialize.css';
-import 'materialize-css/dist/js/materialize';
+import '@materializecss/materialize/dist/css/materialize.css';
+import '@materializecss/materialize/dist/js/materialize';
 
 /* Annotations */
 import annotator from 'annotator';
@@ -272,22 +272,23 @@ const articleScroll = () => {
 };
 
 $(document).ready(() => {
-  // sideNav
-  $('.button-collapse').sideNav();
-  $('select').material_select();
-  $('.collapsible').collapsible({
+  // sidenav
+  $('.sidenav').sidenav();
+  $('select').formSelect();
+  $('.collapsible[data-collapsible="accordion"]').collapsible();
+  $('.collapsible[data-collapsible="expandable"]').collapsible({
     accordion: false,
   });
-  $('.datepicker').pickadate({
-    selectMonths: true,
-    selectYears: 15,
-    formatSubmit: 'yyyy-mm-dd',
-    hiddenName: false,
-    format: 'yyyy-mm-dd',
-    container: 'body',
-  });
 
   $('.dropdown-trigger').dropdown({ hover: false });
+  $('.dropdown-trigger[data-covertrigger="false"][data-constrainwidth="false"]').dropdown({
+    hover: false,
+    coverTrigger: false,
+    constrainWidth: false,
+  });
+
+  $('.tabs').tabs();
+  $('.tooltipped').tooltip();
 
   initFilters();
   initExport();
@@ -306,7 +307,7 @@ $(document).ready(() => {
     $('.nav-panel-add-tag').toggle(100);
     $('.nav-panel-menu').addClass('hidden');
     if (window.innerWidth < mobileMaxWidth) {
-      $('.side-nav').sideNav('hide');
+      $('.sidenav').sidenav('close');
     }
     $('#tag_label').focus();
     return false;
diff --git a/assets/js/shortcuts/entry.js b/assets/js/shortcuts/entry.js
index e19800bd3..3c15f3d29 100644
--- a/assets/js/shortcuts/entry.js
+++ b/assets/js/shortcuts/entry.js
@@ -5,22 +5,22 @@ $(document).ready(() => {
   if ($('#article').length > 0) {
     /* open original article */
     Mousetrap.bind('o', () => {
-      $('ul.side-nav a.original i')[0].click();
+      $('ul.sidenav a.original i')[0].click();
     });
 
     /* mark as favorite */
     Mousetrap.bind('f', () => {
-      $('ul.side-nav a.favorite i')[0].click();
+      $('ul.sidenav a.favorite i')[0].click();
     });
 
     /* mark as read */
     Mousetrap.bind('a', () => {
-      $('ul.side-nav a.markasread i')[0].click();
+      $('ul.sidenav a.markasread i')[0].click();
     });
 
     /* delete */
     Mousetrap.bind('del', () => {
-      $('ul.side-nav a.delete i')[0].click();
+      $('ul.sidenav a.delete i')[0].click();
     });
   }
 });
diff --git a/assets/js/tools.js b/assets/js/tools.js
index 9567815f3..cd7d1db3b 100644
--- a/assets/js/tools.js
+++ b/assets/js/tools.js
@@ -32,7 +32,7 @@ function initFilters() {
   // no display if filters not available
   if ($('div').is('#filters')) {
     $('#button_filters').show();
-    $('.js-filters-action').sideNav({ edge: 'right' });
+    $('#filters.sidenav').sidenav({ edge: 'right' });
     $('#clear_form_filters').on('click', () => {
       $('#filters input').val('');
       $('#filters :checked').removeAttr('checked');
@@ -46,7 +46,7 @@ function initExport() {
   // no display if export not available
   if ($('div').is('#export')) {
     $('#button_export').show();
-    $('.js-export-action').sideNav({ edge: 'right' });
+    $('#export.sidenav').sidenav({ edge: 'right' });
   }
 }
 
diff --git a/assets/scss/_dark_theme.scss b/assets/scss/_dark_theme.scss
index ac38b566d..612876b09 100644
--- a/assets/scss/_dark_theme.scss
+++ b/assets/scss/_dark_theme.scss
@@ -12,9 +12,9 @@
   .collapsible-header,
   .collection,
   .dropdown-content,
-  .side-nav,
-  .side-nav .collapsible-body,
-  .side-nav.fixed .collapsible-body,
+  .sidenav,
+  .sidenav .collapsible-body,
+  .sidenav.sidenav-fixed .collapsible-body,
   .tabs {
     background-color: #131716;
   }
@@ -59,10 +59,11 @@
   #article article h5,
   #article article h6,
   .dropdown-content li > a,
-  .nav-panels .input-field input:focus,
+  .input-field input,
+  .input-field input:focus,
   .results-item,
-  .side-nav li > a,
-  .side-nav li > a > i.material-icons {
+  .sidenav li > a,
+  .sidenav li > a > i.material-icons {
     color: #dfdfdf;
   }
 
@@ -81,14 +82,14 @@
     color: #dfdfdf !important;
   }
 
-  .side-nav li.active {
+  .sidenav li.active {
     background-color: #2f2f2f;
   }
 
   .mass-action-tags .mass-action-tags-input.mass-action-tags-input,
-  .side-nav li:not(.logo) > a:hover,
-  .side-nav .collapsible-header:hover,
-  .side-nav.fixed .collapsible-header:hover {
+  .sidenav li:not(.logo) > a:hover,
+  .sidenav .collapsible-header:hover,
+  .sidenav.sidenav-fixed .collapsible-header:hover {
     background-color: #1d1d1d;
   }
 
diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss
index a085febd9..798a3a44a 100644
--- a/assets/scss/_nav.scss
+++ b/assets/scss/_nav.scss
@@ -16,7 +16,7 @@ nav {
   }
 }
 
-.nav-panel-item .button-collapse {
+.nav-panel-item .sidenav-trigger {
   margin-left: 0;
   margin-right: 0.5rem;
   padding-left: 0.5rem;
@@ -183,7 +183,7 @@ nav {
     justify-content: end;
   }
 
-  .button-collapse {
+  .sidenav-trigger {
     display: none;
   }
 
diff --git a/assets/scss/_sidenav.scss b/assets/scss/_sidenav.scss
index 00e4c5c2a..d57992063 100644
--- a/assets/scss/_sidenav.scss
+++ b/assets/scss/_sidenav.scss
@@ -1,8 +1,8 @@
 /* ==========================================================================
-   Side-nav
+   Sidenav
    ========================================================================== */
 
-.side-nav {
+.sidenav {
   width: 240px;
 
   li {
@@ -22,14 +22,14 @@
     margin: 0;
   }
 
-  &.fixed a {
+  &.sidenav-fixed a {
     font-size: 13px;
     line-height: 44px;
     height: 44px;
   }
 
   .collapsible-header,
-  &.fixed .collapsible-header {
+  &.sidenav-fixed .collapsible-header {
     height: 45px;
     line-height: 44px;
     padding: 0 20px;
@@ -48,3 +48,8 @@
 .items-number {
   float: right;
 }
+
+.button-filters .sidenav-trigger,
+.button-export .sidenav-trigger {
+  display: block;
+}
diff --git a/package.json b/package.json
index e1ecccb5a..86584256f 100644
--- a/package.json
+++ b/package.json
@@ -80,6 +80,7 @@
     "@fontsource/eb-garamond": "^5.1.2",
     "@fontsource/montserrat": "^5.1.1",
     "@fontsource/oswald": "^5.1.1",
+    "@materializecss/materialize": "^1.2.2",
     "annotator": "wallabag/annotator#master",
     "clipboard": "^2.0.11",
     "hammerjs": "^2.0.8",
@@ -89,7 +90,6 @@
     "jquery.cookie": "^1.4.1",
     "jr-qrcode": "^1.2.1",
     "material-design-icons-iconfont": "^6.7.0",
-    "materialize-css": "^0.100.2",
     "mathjax": "^3.2.2",
     "mousetrap": "^1.6.0",
     "open-dyslexic": "^1.0.3",
diff --git a/templates/Authentication/form.html.twig b/templates/Authentication/form.html.twig
index e3d1f2f6a..e6c896ca5 100644
--- a/templates/Authentication/form.html.twig
+++ b/templates/Authentication/form.html.twig
@@ -21,9 +21,11 @@
             </div>
 
             {% if displayTrustedOption %}
-            <div class="input-field col s12">
-                <input id="_trusted" type="checkbox" name="{{ trustedParameterName }}" />
-                <label for="_trusted">{{ "trusted"|trans({}, 'SchebTwoFactorBundle') }}</label>
+            <div class="input-field col s12 with-checkbox">
+                <label for="_trusted">
+                    <input id="_trusted" type="checkbox" name="{{ trustedParameterName }}"/>
+                    <span>{{ "trusted"|trans({}, 'SchebTwoFactorBundle') }}</span>
+                </label>
             </div>
             {% endif %}
         </div>
diff --git a/templates/Entry/entries.html.twig b/templates/Entry/entries.html.twig
index 1dc4f16fd..22b77a0c3 100644
--- a/templates/Entry/entries.html.twig
+++ b/templates/Entry/entries.html.twig
@@ -86,7 +86,7 @@
     {% endif %}
 
     <!-- Export -->
-    <div id="export" class="side-nav right-aligned">
+    <div id="export" class="sidenav">
     {% set current_tag = null %}
     {% if tag is defined %}
         {% set current_tag = tag.slug %}
@@ -111,7 +111,7 @@
 
     <!-- Filters -->
     {% if form is not null and is_granted('LIST_ENTRIES') %}
-    <div id="filters" class="side-nav right-aligned">
+    <div id="filters" class="sidenav">
         <form action="{{ path('all') }}">
 
             <h4 class="center">{{ 'entry.filters.title'|trans }}</h4>
@@ -128,28 +128,38 @@
                 </div>
 
                 <div class="input-field col s6 with-checkbox">
-                    {{ form_widget(form.isArchived) }}
-                    {{ form_label(form.isArchived) }}
+                    <label for="{{ form.isArchived.vars.id }}">
+                        {{ form_widget(form.isArchived) }}
+                        <span>{{ form.isArchived.vars.label|trans }}</span>
+                    </label>
                 </div>
 
                 <div class="input-field col s6 with-checkbox">
-                    {{ form_widget(form.isStarred) }}
-                    {{ form_label(form.isStarred) }}
+                    <label for="{{ form.isStarred.vars.id }}">
+                        {{ form_widget(form.isStarred) }}
+                        <span>{{ form.isStarred.vars.label|trans }}</span>
+                    </label>
                 </div>
 
                 <div class="input-field col s12 with-checkbox">
-                    {{ form_widget(form.isUnread) }}
-                    {{ form_label(form.isUnread) }}
+                    <label for="{{ form.isUnread.vars.id }}">
+                        {{ form_widget(form.isUnread) }}
+                        <span>{{ form.isUnread.vars.label|trans }}</span>
+                    </label>
                 </div>
 
                 <div class="input-field col s12 with-checkbox">
-                    {{ form_widget(form.isAnnotated) }}
-                    {{ form_label(form.isAnnotated) }}
+                    <label for="{{ form.isAnnotated.vars.id }}">
+                        {{ form_widget(form.isAnnotated) }}
+                        <span>{{ form.isAnnotated.vars.label|trans }}</span>
+                    </label>
                 </div>
 
                 <div class="input-field col s12 with-checkbox">
-                    {{ form_widget(form.isNotParsed) }}
-                    {{ form_label(form.isNotParsed) }}
+                    <label for="{{ form.isNotParsed.vars.id }}">
+                        {{ form_widget(form.isNotParsed) }}
+                        <span>{{ form.isNotParsed.vars.label|trans }}</span>
+                    </label>
                 </div>
 
                 <div class="col s12">
@@ -157,8 +167,10 @@
                 </div>
 
                 <div class="input-field col s12 with-checkbox">
-                    {{ form_widget(form.previewPicture) }}
-                    {{ form_label(form.previewPicture) }}
+                    <label for="{{ form.previewPicture.vars.id }}">
+                        {{ form_widget(form.previewPicture) }}
+                        <span>{{ form.previewPicture.vars.label|trans }}</span>
+                    </label>
                 </div>
 
                 <div class="col s12">
@@ -166,8 +178,10 @@
                 </div>
 
                 <div class="input-field col s12 with-checkbox">
-                    {{ form_widget(form.isPublic) }}
-                    {{ form_label(form.isPublic) }}
+                    <label for="{{ form.isPublic.vars.id }}">
+                        {{ form_widget(form.isPublic) }}
+                        <span>{{ form.isPublic.vars.label|trans }}</span>
+                    </label>
                 </div>
 
                 <div class="col s12">
@@ -209,12 +223,12 @@
                     {{ form_label(form.createdAt) }}
                 </div>
 
-                <div class="input-field col s6">
-                    {{ form_widget(form.createdAt.left_date, {'type': 'date', 'attr': {'class': 'datepicker', 'data-value': form.createdAt.left_date.vars.value}}) }}
+                <div class="input-field col s12">
+                    {{ form_widget(form.createdAt.left_date, {'type': 'date', 'attr': {'data-value': form.createdAt.left_date.vars.value}}) }}
                     <label for="entry_filter_createdAt_left_date" class="active">{{ 'entry.filters.created_at.from'|trans }}</label>
                 </div>
-                <div class="input-field col s6">
-                    {{ form_widget(form.createdAt.right_date, {'type': 'date', 'attr': {'class': 'datepicker', 'data-value': form.createdAt.right_date.vars.value}}) }}
+                <div class="input-field col s12">
+                    {{ form_widget(form.createdAt.right_date, {'type': 'date', 'attr': {'data-value': form.createdAt.right_date.vars.value}}) }}
                     <label for="entry_filter_createdAt_right_date" class="active">{{ 'entry.filters.created_at.to'|trans }}</label>
                 </div>
 
diff --git a/templates/Entry/entry.html.twig b/templates/Entry/entry.html.twig
index d3714acf6..13bb249bc 100644
--- a/templates/Entry/entry.html.twig
+++ b/templates/Entry/entry.html.twig
@@ -14,7 +14,7 @@
         <div class="nav-panel-item cyan darken-1">
             <ul>
                 <li>
-                    <a href="#" data-activates="slide-out" class="button-collapse">
+                    <a href="#" data-target="slide-out" class="sidenav-trigger">
                         <i class="material-icons">menu</i>
                     </a>
                 </li>
@@ -42,7 +42,7 @@
             </ul>
         </div>
     </nav>
-    <ul id="slide-out" class="left-bar collapsible side-nav fixed reader-mode" data-collapsible="accordion">
+    <ul id="slide-out" class="left-bar collapsible sidenav sidenav-fixed reader-mode" data-collapsible="accordion">
         <li class="bold border-bottom hide-on-med-and-down">
             <a class="waves-effect collapsible-header" href="{{ path('homepage') }}">
                 <i class="material-icons small">arrow_back</i>
diff --git a/templates/Import/Chrome/index.html.twig b/templates/Import/Chrome/index.html.twig
index f97aff670..ecf37ec95 100644
--- a/templates/Import/Chrome/index.html.twig
+++ b/templates/Import/Chrome/index.html.twig
@@ -26,10 +26,12 @@
                                     <input class="file-path validate" type="text">
                                 </div>
                             </div>
-                            <div class="input-field col s6 with-checkbox">
-                                <h6>{{ 'import.form.mark_as_read_title'|trans }}</h6>
-                                {{ form_widget(form.mark_as_read) }}
-                                {{ form_label(form.mark_as_read) }}
+                            <h6 class="col s12">{{ 'import.form.mark_as_read_title'|trans }}</h6>
+                            <div class="col s6 with-checkbox">
+                                <label for="{{ form.mark_as_read.vars.id }}">
+                                    {{ form_widget(form.mark_as_read) }}
+                                    <span>{{ form.mark_as_read.vars.label|trans }}</span>
+                                </label>
                             </div>
                         </div>
 
diff --git a/templates/Import/Delicious/index.html.twig b/templates/Import/Delicious/index.html.twig
index 445e1aa6e..e9356f6b9 100644
--- a/templates/Import/Delicious/index.html.twig
+++ b/templates/Import/Delicious/index.html.twig
@@ -26,10 +26,12 @@
                                     <input class="file-path validate" type="text">
                                 </div>
                             </div>
-                            <div class="input-field col s6 with-checkbox">
-                                <h6>{{ 'import.form.mark_as_read_title'|trans }}</h6>
-                                {{ form_widget(form.mark_as_read) }}
-                                {{ form_label(form.mark_as_read) }}
+                            <h6 class="col s12">{{ 'import.form.mark_as_read_title'|trans }}</h6>
+                            <div class="col s6 with-checkbox">
+                                <label for="{{ form.mark_as_read.vars.id }}">
+                                    {{ form_widget(form.mark_as_read) }}
+                                    <span>{{ form.mark_as_read.vars.label|trans }}</span>
+                                </label>
                             </div>
                         </div>
 
diff --git a/templates/Import/Elcurator/index.html.twig b/templates/Import/Elcurator/index.html.twig
index 7236f7be5..d0479a8d0 100644
--- a/templates/Import/Elcurator/index.html.twig
+++ b/templates/Import/Elcurator/index.html.twig
@@ -26,10 +26,12 @@
                                     <input class="file-path validate" type="text">
                                 </div>
                             </div>
-                            <div class="input-field col s6 with-checkbox">
-                                <h6>{{ 'import.form.mark_as_read_title'|trans }}</h6>
-                                {{ form_widget(form.mark_as_read) }}
-                                {{ form_label(form.mark_as_read) }}
+                            <h6 class="col s12">{{ 'import.form.mark_as_read_title'|trans }}</h6>
+                            <div class="col s6 with-checkbox">
+                                <label for="{{ form.mark_as_read.vars.id }}">
+                                    {{ form_widget(form.mark_as_read) }}
+                                    <span>{{ form.mark_as_read.vars.label|trans }}</span>
+                                </label>
                             </div>
                         </div>
 
diff --git a/templates/Import/Firefox/index.html.twig b/templates/Import/Firefox/index.html.twig
index f16604fe3..239b9a3ee 100644
--- a/templates/Import/Firefox/index.html.twig
+++ b/templates/Import/Firefox/index.html.twig
@@ -26,10 +26,12 @@
                                     <input class="file-path validate" type="text">
                                 </div>
                             </div>
-                            <div class="input-field col s6 with-checkbox">
-                                <h6>{{ 'import.form.mark_as_read_title'|trans }}</h6>
-                                {{ form_widget(form.mark_as_read) }}
-                                {{ form_label(form.mark_as_read) }}
+                            <h6 class="col s12">{{ 'import.form.mark_as_read_title'|trans }}</h6>
+                            <div class="col s6 with-checkbox">
+                                <label for="{{ form.mark_as_read.vars.id }}">
+                                    {{ form_widget(form.mark_as_read) }}
+                                    <span>{{ form.mark_as_read.vars.label|trans }}</span>
+                                </label>
                             </div>
                         </div>
 
diff --git a/templates/Import/Instapaper/index.html.twig b/templates/Import/Instapaper/index.html.twig
index 4fdc5ed96..ea9039c22 100644
--- a/templates/Import/Instapaper/index.html.twig
+++ b/templates/Import/Instapaper/index.html.twig
@@ -26,10 +26,12 @@
                                     <input class="file-path validate" type="text">
                                 </div>
                             </div>
-                            <div class="input-field col s6 with-checkbox">
-                                <h6>{{ 'import.form.mark_as_read_title'|trans }}</h6>
-                                {{ form_widget(form.mark_as_read) }}
-                                {{ form_label(form.mark_as_read) }}
+                            <h6 class="col s12">{{ 'import.form.mark_as_read_title'|trans }}</h6>
+                            <div class="col s6 with-checkbox">
+                                <label for="{{ form.mark_as_read.vars.id }}">
+                                    {{ form_widget(form.mark_as_read) }}
+                                    <span>{{ form.mark_as_read.vars.label|trans }}</span>
+                                </label>
                             </div>
                         </div>
 
diff --git a/templates/Import/Omnivore/index.html.twig b/templates/Import/Omnivore/index.html.twig
index 045668321..3aa09e25c 100644
--- a/templates/Import/Omnivore/index.html.twig
+++ b/templates/Import/Omnivore/index.html.twig
@@ -26,10 +26,12 @@
                                     <input class="file-path validate" type="text">
                                 </div>
                             </div>
-                            <div class="input-field col s6 with-checkbox">
-                                <h6>{{ 'import.form.mark_as_read_title'|trans }}</h6>
-                                {{ form_widget(form.mark_as_read) }}
-                                {{ form_label(form.mark_as_read) }}
+                            <h6 class="col s12">{{ 'import.form.mark_as_read_title'|trans }}</h6>
+                            <div class="col s6 with-checkbox">
+                                <label for="{{ form.mark_as_read.vars.id }}">
+                                    {{ form_widget(form.mark_as_read) }}
+                                    <span>{{ form.mark_as_read.vars.label|trans }}</span>
+                                </label>
                             </div>
                         </div>
 
diff --git a/templates/Import/Pinboard/index.html.twig b/templates/Import/Pinboard/index.html.twig
index 458a089f4..58a956d77 100644
--- a/templates/Import/Pinboard/index.html.twig
+++ b/templates/Import/Pinboard/index.html.twig
@@ -26,10 +26,12 @@
                                     <input class="file-path validate" type="text">
                                 </div>
                             </div>
-                            <div class="input-field col s6 with-checkbox">
-                                <h6>{{ 'import.form.mark_as_read_title'|trans }}</h6>
-                                {{ form_widget(form.mark_as_read) }}
-                                {{ form_label(form.mark_as_read) }}
+                            <h6 class="col s12">{{ 'import.form.mark_as_read_title'|trans }}</h6>
+                            <div class="col s6 with-checkbox">
+                                <label for="{{ form.mark_as_read.vars.id }}">
+                                    {{ form_widget(form.mark_as_read) }}
+                                    <span>{{ form.mark_as_read.vars.label|trans }}</span>
+                                </label>
                             </div>
                         </div>
 
diff --git a/templates/Import/Pocket/index.html.twig b/templates/Import/Pocket/index.html.twig
index 11eda98a9..50995941f 100644
--- a/templates/Import/Pocket/index.html.twig
+++ b/templates/Import/Pocket/index.html.twig
@@ -21,10 +21,12 @@
 
             <form method="post" action="{{ path('import_pocket_auth') }}">
                 <div class="row">
-                    <div class="input-field col s6 with-checkbox">
-                        <h6>{{ 'import.form.mark_as_read_title'|trans }}</h6>
-                        {{ form_widget(form.mark_as_read) }}
-                        {{ form_label(form.mark_as_read) }}
+                    <h6 class="col s12">{{ 'import.form.mark_as_read_title'|trans }}</h6>
+                    <div class="col s6 with-checkbox">
+                        <label for="{{ form.mark_as_read.vars.id }}">
+                            {{ form_widget(form.mark_as_read) }}
+                            <span>{{ form.mark_as_read.vars.label|trans }}</span>
+                        </label>
                     </div>
                 </div>
                 <button class="btn waves-effect waves-light" type="submit" name="action" {% if not has_consumer_key %}disabled="disabled"{% endif %}>
diff --git a/templates/Import/PocketHtml/index.html.twig b/templates/Import/PocketHtml/index.html.twig
index bb80e0090..332816fb4 100644
--- a/templates/Import/PocketHtml/index.html.twig
+++ b/templates/Import/PocketHtml/index.html.twig
@@ -26,10 +26,12 @@
                                     <input class="file-path validate" type="text">
                                 </div>
                             </div>
-                            <div class="input-field col s6 with-checkbox">
-                                <h6>{{ 'import.form.mark_as_read_title'|trans }}</h6>
-                                {{ form_widget(form.mark_as_read) }}
-                                {{ form_label(form.mark_as_read) }}
+                            <h6 class="col s12">{{ 'import.form.mark_as_read_title'|trans }}</h6>
+                            <div class="col s6 with-checkbox">
+                                <label for="{{ form.mark_as_read.vars.id }}">
+                                    {{ form_widget(form.mark_as_read) }}
+                                    <span>{{ form.mark_as_read.vars.label|trans }}</span>
+                                </label>
                             </div>
                         </div>
 
diff --git a/templates/Import/Readability/index.html.twig b/templates/Import/Readability/index.html.twig
index 12831e1bf..f97cf77e8 100644
--- a/templates/Import/Readability/index.html.twig
+++ b/templates/Import/Readability/index.html.twig
@@ -26,10 +26,12 @@
                                     <input class="file-path validate" type="text">
                                 </div>
                             </div>
-                            <div class="input-field col s6 with-checkbox">
-                                <h6>{{ 'import.form.mark_as_read_title'|trans }}</h6>
-                                {{ form_widget(form.mark_as_read) }}
-                                {{ form_label(form.mark_as_read) }}
+                            <h6 class="col s12">{{ 'import.form.mark_as_read_title'|trans }}</h6>
+                            <div class="col s6 with-checkbox">
+                                <label for="{{ form.mark_as_read.vars.id }}">
+                                    {{ form_widget(form.mark_as_read) }}
+                                    <span>{{ form.mark_as_read.vars.label|trans }}</span>
+                                </label>
                             </div>
                         </div>
 
diff --git a/templates/Import/Shaarli/index.html.twig b/templates/Import/Shaarli/index.html.twig
index 2091d6838..6cbf5049f 100644
--- a/templates/Import/Shaarli/index.html.twig
+++ b/templates/Import/Shaarli/index.html.twig
@@ -26,10 +26,12 @@
                                     <input class="file-path validate" type="text">
                                 </div>
                             </div>
-                            <div class="input-field col s6 with-checkbox">
-                                <h6>{{ 'import.form.mark_as_read_title'|trans }}</h6>
-                                {{ form_widget(form.mark_as_read) }}
-                                {{ form_label(form.mark_as_read) }}
+                            <h6 class="col s12">{{ 'import.form.mark_as_read_title'|trans }}</h6>
+                            <div class="col s6 with-checkbox">
+                                <label for="{{ form.mark_as_read.vars.id }}">
+                                    {{ form_widget(form.mark_as_read) }}
+                                    <span>{{ form.mark_as_read.vars.label|trans }}</span>
+                                </label>
                             </div>
                         </div>
 
diff --git a/templates/Import/WallabagV1/index.html.twig b/templates/Import/WallabagV1/index.html.twig
index d9a87a73c..e48f797d5 100644
--- a/templates/Import/WallabagV1/index.html.twig
+++ b/templates/Import/WallabagV1/index.html.twig
@@ -26,10 +26,12 @@
                                     <input class="file-path validate" type="text">
                                 </div>
                             </div>
-                            <div class="input-field col s6 with-checkbox">
-                                <h6>{{ 'import.form.mark_as_read_title'|trans }}</h6>
-                                {{ form_widget(form.mark_as_read) }}
-                                {{ form_label(form.mark_as_read) }}
+                            <h6 class="col s12">{{ 'import.form.mark_as_read_title'|trans }}</h6>
+                            <div class="col s6 with-checkbox">
+                                <label for="{{ form.mark_as_read.vars.id }}">
+                                    {{ form_widget(form.mark_as_read) }}
+                                    <span>{{ form.mark_as_read.vars.label|trans }}</span>
+                                </label>
                             </div>
                         </div>
 
diff --git a/templates/bundles/CraueConfigBundle/Settings/modify.html.twig b/templates/bundles/CraueConfigBundle/Settings/modify.html.twig
index 809c6dff1..438b36e03 100644
--- a/templates/bundles/CraueConfigBundle/Settings/modify.html.twig
+++ b/templates/bundles/CraueConfigBundle/Settings/modify.html.twig
@@ -22,9 +22,13 @@
                             <div id="set-{{ section }}" class="col s12">
                                 {% for setting in form.settings %}
                                     {% if setting.vars.value.section == section %}
-                                        {{ form_row(setting.value, {
-                                            'label': setting.vars.value.name|trans({}, 'CraueConfigBundle'),
-                                        }) }}
+                                        <div class="row">
+                                            <div class="input-field col s12">
+                                                {{ form_row(setting.value, {
+                                                    'label': setting.vars.value.name|trans({}, 'CraueConfigBundle'),
+                                                }) }}
+                                            </div>
+                                        </div>
                                     {% endif %}
                                 {% endfor %}
                             </div>
diff --git a/templates/bundles/FOSUserBundle/Security/login.html.twig b/templates/bundles/FOSUserBundle/Security/login.html.twig
index 291a0a428..870e4c829 100644
--- a/templates/bundles/FOSUserBundle/Security/login.html.twig
+++ b/templates/bundles/FOSUserBundle/Security/login.html.twig
@@ -24,9 +24,11 @@
                 <input type="password" id="password" name="_password" />
             </div>
 
-            <div class="input-field col s12">
-                <input type="checkbox" id="remember_me" name="_remember_me" checked />
-                <label for="remember_me">{{ 'security.login.keep_logged_in'|trans }}</label>
+            <div class="input-field col s12 with-checkbox">
+                <label for="remember_me">
+                    <input type="checkbox" id="remember_me" name="_remember_me" checked/>
+                    <span>{{ 'security.login.keep_logged_in'|trans }}</span>
+                </label>
             </div>
 
         </div>
diff --git a/templates/layout.html.twig b/templates/layout.html.twig
index a1949ae0d..23b433c0c 100644
--- a/templates/layout.html.twig
+++ b/templates/layout.html.twig
@@ -27,7 +27,7 @@
 
 {% block menu %}
     <nav class="cyan darken-1">
-        <ul id="slide-out" class="left-bar side-nav fixed">
+        <ul id="slide-out" class="left-bar sidenav sidenav-fixed">
             {% block logo %}
                 <li class="logo border-bottom">
                     {% if is_granted('LIST_ENTRIES') %}
@@ -82,7 +82,7 @@
         <div class="nav-panels">
             <div class="nav-panel-actions nav-panel-item">
                 <div class="nav-panel-top">
-                    <button data-activates="slide-out" class="nav-panel-menu button-collapse"><i class="material-icons">menu</i></button>
+                    <a href="#" data-target="slide-out" class="nav-panel-menu sidenav-trigger"><i class="material-icons">menu</i></a>
                     <h1 class="left action">
                         {% block title %}
                         {% endblock %}
@@ -107,17 +107,17 @@
                     </li>
                     {% endif %}
                     <li id="button_filters" class="button-filters">
-                        <a class="nav-panel-menu button-collapse-right tooltipped js-filters-action" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.filter_entries'|trans }}" href="#" data-activates="filters">
+                        <a class="nav-panel-menu sidenav-trigger tooltipped js-filters-action" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.filter_entries'|trans }}" href="#" data-target="filters">
                             <i class="material-icons">filter_list</i>
                         </a>
                     </li>
                     <li id="button_export" class="button-export">
-                        <a class="nav-panel-menu button-collapse-right tooltipped js-export-action" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.export'|trans }}" href="#" data-activates="export">
+                        <a class="nav-panel-menu sidenav-trigger tooltipped js-export-action" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.export'|trans }}" href="#" data-target="export">
                             <i class="material-icons">file_download</i>
                         </a>
                     </li>
                     <li class="bold">
-                        <a class="wave-effect tooltipped dropdown-button" data-beloworigin="true" data-constrainwidth="false" data-activates="dropdown-account" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.account'|trans }}" href="#" id="news_menu">
+                        <a class="wave-effect tooltipped dropdown-trigger" data-covertrigger="false" data-constrainwidth="false" data-target="dropdown-account" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.account'|trans }}" href="#" id="news_menu">
                             <i class="material-icons" id="news_link">account_circle</i>
                         </a>
                     </li>
diff --git a/yarn.lock b/yarn.lock
index f1427235c..ed2fae493 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1003,6 +1003,11 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@materializecss/materialize@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@materializecss/materialize/-/materialize-1.2.2.tgz#3308e76806a8f6d14b7838656fbf24e0bf3496c8"
+  integrity sha512-+zp/myqWFywj/F64byUM+H3iiuDmVjKBHZ0lj3b07QiaLVaNoUBCcsS0nkdwB9YsebzFpZLWeASPkmolu3yA+Q==
+
 "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
   version "5.1.1-v1"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
@@ -3364,7 +3369,7 @@ jquery@^1.11.3:
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-1.12.4.tgz#01e1dfba290fe73deba77ceeacb0f9ba2fec9e0c"
   integrity sha512-UEVp7PPK9xXYSk8xqXCJrkXnKZtlgWkd2GsAQbMRFK6S/ePU2JN5G2Zum8hIVjzR3CpdfSqdqAzId/xd4TJHeg==
 
-"jquery@^3.0.0 || ^2.1.4", jquery@^3.7.1:
+jquery@^3.7.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de"
   integrity sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==
@@ -3572,14 +3577,6 @@ material-design-icons-iconfont@^6.7.0:
   resolved "https://registry.yarnpkg.com/material-design-icons-iconfont/-/material-design-icons-iconfont-6.7.0.tgz#55cf0f3d7e4c76e032855b7e810b6e30535eff3c"
   integrity sha512-lSj71DgVv20kO0kGbs42icDzbRot61gEDBLQACzkUuznRQBUYmbxzEkGU6dNBb5fRWHMaScYlAXX96HQ4/cJWA==
 
-materialize-css@^0.100.2:
-  version "0.100.2"
-  resolved "https://registry.yarnpkg.com/materialize-css/-/materialize-css-0.100.2.tgz#9ca32b24904c9a04491fc7d0a2e9402e7b1dae07"
-  integrity sha512-Bf4YeoJCIdk4dlpnmVX+DIOJBbqOKwfBPD+tT5bxwXNFMLk649CGbldqtnctkkfMp+fGgSAsdYu9lo1ZolZqgA==
-  dependencies:
-    hammerjs "^2.0.8"
-    jquery "^3.0.0 || ^2.1.4"
-
 mathjax@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/mathjax/-/mathjax-3.2.2.tgz#c754d7b46a679d7f3fa03543d6b8bf124ddf9f6b"