diff --git a/.gitignore b/.gitignore
index a74536c95c84dedbf6b7a43c30b86e7490732443..ec8b50c64d9d2dccbb75b4424fbe4a02d4ce817e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,6 +47,7 @@ ENV/
 *~
 DEADJOE
 \#*#
+.idea/
 
 # Database
 db.sqlite3
@@ -57,6 +58,7 @@ docs/_build/
 # Generated files
 biscuit/static/
 biscuit/node_modules/
+biscuit/media/
 
 .coverage
 .tox/
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index a1be1e5ec7c2ec8812cb822e62747ece3917a3dd..c10ca191a8ab442025575b0636d42812ccb5d0e6 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -28,7 +28,7 @@ test:
     - adduser --disabled-password --gecos "Test User" testuser
     - chown -R testuser .
   script:
-    - sudo -u testuser 
+    - sudo -u testuser
       env TEST_SELENIUM_HUB=http://selenium:4444/wd/hub
           TEST_SELENIUM_BROWSERS=firefox
           TEST_HOST=build
@@ -92,7 +92,7 @@ deploy_demo-master:
   stage: deploy
   environment:
     name: demo/master
-    url: http://demo-master.biscuit-sis.org  
+    url: http://demo-master.biscuit-sis.org
   before_script:
     - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )'
     - eval $(ssh-agent -s)
diff --git a/apps/official/BiscuIT-App-Alsijil b/apps/official/BiscuIT-App-Alsijil
index 3973b529e0f0889376159fd83c7d6e49bef6d767..a52358af2722329ae43916adee4b93208991ebc6 160000
--- a/apps/official/BiscuIT-App-Alsijil
+++ b/apps/official/BiscuIT-App-Alsijil
@@ -1 +1 @@
-Subproject commit 3973b529e0f0889376159fd83c7d6e49bef6d767
+Subproject commit a52358af2722329ae43916adee4b93208991ebc6
diff --git a/apps/official/BiscuIT-App-Chronos b/apps/official/BiscuIT-App-Chronos
index 51f8b6f703cbbeda26b64b45a2860c5e4921b1ba..c3dffaa6d1cd91af1f79103e71286e11daf4d62d 160000
--- a/apps/official/BiscuIT-App-Chronos
+++ b/apps/official/BiscuIT-App-Chronos
@@ -1 +1 @@
-Subproject commit 51f8b6f703cbbeda26b64b45a2860c5e4921b1ba
+Subproject commit c3dffaa6d1cd91af1f79103e71286e11daf4d62d
diff --git a/apps/official/BiscuIT-App-Exlibris b/apps/official/BiscuIT-App-Exlibris
index d76afcbcabf7e93a48f4710a779fa8f06c959577..f18823b68731884e9ed661ce92474a54708a6f72 160000
--- a/apps/official/BiscuIT-App-Exlibris
+++ b/apps/official/BiscuIT-App-Exlibris
@@ -1 +1 @@
-Subproject commit d76afcbcabf7e93a48f4710a779fa8f06c959577
+Subproject commit f18823b68731884e9ed661ce92474a54708a6f72
diff --git a/apps/official/BiscuIT-App-SchILD-NRW b/apps/official/BiscuIT-App-SchILD-NRW
index 679baee78cfe182f41536b061b8d0f3e2dc8d0bb..d3503372579bb067e80c72d0c168ac6e998b8d56 160000
--- a/apps/official/BiscuIT-App-SchILD-NRW
+++ b/apps/official/BiscuIT-App-SchILD-NRW
@@ -1 +1 @@
-Subproject commit 679baee78cfe182f41536b061b8d0f3e2dc8d0bb
+Subproject commit d3503372579bb067e80c72d0c168ac6e998b8d56
diff --git a/apps/official/BiscuIT-App-Untis b/apps/official/BiscuIT-App-Untis
index 7b4f67f723c52fad8e4a58f4571a67b2f05c1363..f216d0e9da645cfbd3d4e1d865bb16dc4de7946f 160000
--- a/apps/official/BiscuIT-App-Untis
+++ b/apps/official/BiscuIT-App-Untis
@@ -1 +1 @@
-Subproject commit 7b4f67f723c52fad8e4a58f4571a67b2f05c1363
+Subproject commit f216d0e9da645cfbd3d4e1d865bb16dc4de7946f
diff --git a/biscuit/core/locale/de_DE/LC_MESSAGES/django.po b/biscuit/core/locale/de_DE/LC_MESSAGES/django.po
index 3a382fa71fe86baa649066c8f359201808a9b6d0..2e8ed88584b0d7f536a93643ddcb9f47d53af293 100644
--- a/biscuit/core/locale/de_DE/LC_MESSAGES/django.po
+++ b/biscuit/core/locale/de_DE/LC_MESSAGES/django.po
@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: BiscuIT - School Information System (SIS)\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2019-11-23 10:06+0100\n"
+"POT-Creation-Date: 2020-01-01 20:19+0000\n"
 "PO-Revision-Date: 2019-09-17 21:08+0000\n"
 "Last-Translator: Tom Teichler <tom.teichler@teckids.org>\n"
 "Language-Team: German <https://translate.edugit.org/projects/biscuit-sis/"
@@ -19,248 +19,241 @@ msgstr ""
 "Plural-Forms: nplurals=2; plural=n != 1;\n"
 "X-Generator: Weblate 3.8\n"
 
-#: forms.py:30 forms.py:66
+#: biscuit/core/forms.py:30 biscuit/core/forms.py:85
 msgid "You cannot set a new username when also selecting an existing user."
 msgstr ""
 "Sie können keine neuen Benutzer erstellen, wenn Sie gleichzeitig einen "
 "existierenden Benutzer auswählen."
 
-#: forms.py:32 forms.py:68
+#: biscuit/core/forms.py:33 biscuit/core/forms.py:88
 msgid "This username is already in use."
 msgstr "Dieser Benutzername wird bereits genutzt."
 
-#: forms.py:57
+#: biscuit/core/forms.py:75
 msgid "New user"
 msgstr "Neuer Benutzer"
 
-#: forms.py:58
+#: biscuit/core/forms.py:75
 msgid "Create a new account"
 msgstr "Neues Benutzerkonto erstellen"
 
-#: menus.py:6
+#: biscuit/core/menus.py:7 biscuit/core/templates/registration/login.html:21
+#: biscuit/core/templates/two_factor/core/login.html:6
+#: biscuit/core/templates/two_factor/core/login.html:59
+msgid "Login"
+msgstr "Anmelden"
+
+#: biscuit/core/menus.py:13
 msgid "Account"
 msgstr "Konto"
 
-#: menus.py:11
+#: biscuit/core/menus.py:20
 msgid "Stop impersonation"
 msgstr "Verkleidung beenden"
 
-#: menus.py:16 templates/registration/login.html:21
-msgid "Login"
-msgstr "Anmelden"
-
-#: menus.py:21
+#: biscuit/core/menus.py:29 biscuit/core/templates/core/base.html:49
 msgid "Logout"
 msgstr "Abmelden"
 
-#: menus.py:28
+#: biscuit/core/menus.py:35
+msgid "Two factor auth"
+msgstr ""
+
+#: biscuit/core/menus.py:46
 msgid "Admin"
 msgstr "Admin"
 
-#: menus.py:33 templates/core/data_management.html:5
-#: templates/core/data_management.html:7
+#: biscuit/core/menus.py:55 biscuit/core/templates/core/data_management.html:6
 msgid "Data management"
 msgstr "Datenverwaltung"
 
-#: menus.py:38 templates/core/system_status.html:5
-#: templates/core/system_status.html:7
+#: biscuit/core/menus.py:64 biscuit/core/templates/core/system_status.html:7
 msgid "System status"
 msgstr "System-Status"
 
-#: menus.py:43
+#: biscuit/core/menus.py:73
 msgid "Impersonation"
 msgstr "Verkleidung"
 
-#: menus.py:48
+#: biscuit/core/menus.py:82
 msgid "Manage school"
 msgstr "Schulverwaltung"
 
-#: menus.py:55
+#: biscuit/core/menus.py:93
 msgid "People"
 msgstr "Leute"
 
-#: menus.py:61 templates/core/persons.html:8 templates/core/persons.html:10
+#: biscuit/core/menus.py:102 biscuit/core/templates/core/persons.html:8
+#: biscuit/core/templates/core/persons.html:10
 msgid "Persons"
 msgstr "Personen"
 
-#: menus.py:66 templates/core/groups.html:8 templates/core/groups.html:10
-#: templates/core/person_full.html:66
+#: biscuit/core/menus.py:107 biscuit/core/templates/core/groups.html:8
+#: biscuit/core/templates/core/groups.html:10
+#: biscuit/core/templates/core/person_full.html:66
 msgid "Groups"
 msgstr "Gruppen"
 
-#: menus.py:71
+#: biscuit/core/menus.py:112
 msgid "Persons and accounts"
 msgstr "Personen und Konten"
 
-#: menus.py:80
-msgid "BiscuIT Software"
-msgstr "BiscuIT-Software"
-
-#: menus.py:84
+#: biscuit/core/menus.py:123
 msgid "Website"
 msgstr "Website"
 
-#: menus.py:94
-msgid "Support"
-msgstr "Unterstützung"
-
-#: menus.py:98 templates/contact_form/contact_form.html:8
-msgid "Get support"
-msgstr "Unterstützung erhalten"
-
-#: menus.py:108
+#: biscuit/core/menus.py:129
 msgid "Edit school information"
 msgstr "Schulinformationen bearbeiten"
 
-#: menus.py:112 templates/core/edit_schoolterm.html:7
-#: templates/core/edit_schoolterm.html:9
+#: biscuit/core/menus.py:130 biscuit/core/templates/core/edit_schoolterm.html:8
 msgid "Edit school term"
 msgstr "Schuljahr bearbeiten"
 
-#: migrations/0001_initial.py:15
+#: biscuit/core/migrations/0001_initial.py:15
 msgid "Default school"
 msgstr "Standardschule"
 
-#: migrations/0002_school_term.py:16
+#: biscuit/core/migrations/0002_school_term.py:15
 msgid "Default term"
 msgstr "Standardschuljahr"
 
-#: models.py:20
+#: biscuit/core/models.py:35
 msgid "Name"
 msgstr "Name"
 
-#: models.py:21
+#: biscuit/core/models.py:37
 msgid "Official name"
 msgstr "Offizieller Name"
 
-#: models.py:22
+#: biscuit/core/models.py:39
 msgid "Official name of the school, e.g. as given by supervisory authority"
 msgstr ""
 "Offizieller Name der Schule, wie er z.B. von der Behörde vorgegeben ist"
 
-#: models.py:24
+#: biscuit/core/models.py:42
 msgid "School logo"
 msgstr "Schullogo"
 
-#: models.py:38
+#: biscuit/core/models.py:58
 msgid "Visible caption of the term"
 msgstr "Sichtbare Beschriftung des Schuljahres"
 
-#: models.py:42
+#: biscuit/core/models.py:60
 msgid "Effective start date of term"
 msgstr "Startdatum des Schuljahres"
 
-#: models.py:44
+#: biscuit/core/models.py:61
 msgid "Effective end date of term"
 msgstr "Enddatum des Schuljahres"
 
-#: models.py:57
+#: biscuit/core/models.py:79
 msgid "female"
 msgstr "weiblich"
 
-#: models.py:58
+#: biscuit/core/models.py:79
 msgid "male"
 msgstr "männlich"
 
-#: models.py:65
+#: biscuit/core/models.py:84
 msgid "Is person active?"
 msgstr "Ist die Person aktiv?"
 
-#: models.py:67
+#: biscuit/core/models.py:86
 msgid "First name"
 msgstr "Vorname"
 
-#: models.py:68
+#: biscuit/core/models.py:87
 msgid "Last name"
 msgstr "Nachname"
 
-#: models.py:70
+#: biscuit/core/models.py:89
 msgid "Additional name(s)"
 msgstr "Zusätzliche Namen"
 
-#: models.py:73
+#: biscuit/core/models.py:93
 msgid "Short name"
 msgstr "Kurzname"
 
-#: models.py:76
+#: biscuit/core/models.py:96
 msgid "Street"
 msgstr "Straße"
 
-#: models.py:78
+#: biscuit/core/models.py:97
 msgid "Street number"
 msgstr "Hausnummer"
 
-#: models.py:80
+#: biscuit/core/models.py:98
 msgid "Postal code"
 msgstr "Postleitzahl"
 
-#: models.py:82
+#: biscuit/core/models.py:99
 msgid "Place"
 msgstr "Ort"
 
-#: models.py:84
+#: biscuit/core/models.py:101
 msgid "Home phone"
 msgstr "Festnetz"
 
-#: models.py:86
+#: biscuit/core/models.py:102
 msgid "Mobile phone"
 msgstr "Handy"
 
-#: models.py:88
+#: biscuit/core/models.py:104
 msgid "E-mail address"
 msgstr "E-Mail-Adresse"
 
-#: models.py:91
+#: biscuit/core/models.py:106
 msgid "Date of birth"
 msgstr "Geburtsdatum"
 
-#: models.py:93
+#: biscuit/core/models.py:107
 msgid "Sex"
 msgstr "Geschlecht"
 
-#: models.py:95
+#: biscuit/core/models.py:109
 msgid "Photo"
 msgstr "Foto"
 
-#: models.py:99
+#: biscuit/core/models.py:113
 msgid "Reference ID of import source"
 msgstr "Referenz-ID der Import-Quelle"
 
-#: models.py:101
+#: biscuit/core/models.py:122
 msgid "Guardians / Parents"
 msgstr "Erziehungsberechtigte / Eltern"
 
-#: models.py:145
+#: biscuit/core/models.py:163
 msgid "Long name of group"
 msgstr "Langer Name der Gruppe"
 
-#: models.py:147
+#: biscuit/core/models.py:164
 msgid "Short name of group"
 msgstr "Kurzer Name der Gruppe"
 
-#: models.py:153
+#: biscuit/core/models.py:173
 msgid "Parent groups"
 msgstr "Ãœbergeordnete Gruppen"
 
-#: settings.py:218
+#: biscuit/core/settings.py:213
 msgid "German"
 msgstr "Deutsch"
 
-#: settings.py:219
+#: biscuit/core/settings.py:214
 msgid "English"
 msgstr "Englisch"
 
-#: templates/403.html:5
+#: biscuit/core/templates/403.html:5
 msgid "Forbidden"
 msgstr "Verboten"
 
-#: templates/403.html:12
+#: biscuit/core/templates/403.html:12
 msgid "You are not allowed to access the requested page or object."
 msgstr ""
 "Es ist Ihnen nicht erlaubt, auf die angefragte Seite oder das angefragte "
 "Objekt zuzugreifen."
 
-#: templates/403.html:16 templates/404.html:20
+#: biscuit/core/templates/403.html:16 biscuit/core/templates/404.html:20
 msgid ""
 "\n"
 "     If you think this is an error in BiscuIT, please contact your site\n"
@@ -273,15 +266,15 @@ msgstr ""
 "     Systemadministratoren:\n"
 "    "
 
-#: templates/404.html:5
+#: biscuit/core/templates/404.html:5
 msgid "Not found"
 msgstr "Nicht gefunden"
 
-#: templates/404.html:12
+#: biscuit/core/templates/404.html:12
 msgid "The requested page or object was not found."
 msgstr "Die angefragte Seite oder das angefragte Objekt wurde nicht gefunden."
 
-#: templates/404.html:16
+#: biscuit/core/templates/404.html:16
 msgid ""
 "\n"
 "     If you were redirected by a link on an external page,\n"
@@ -293,11 +286,11 @@ msgstr ""
 "ist es möglich, dass dieser veraltet war.\n"
 "    "
 
-#: templates/500.html:5
+#: biscuit/core/templates/500.html:5
 msgid "Internal Server Error"
 msgstr "Interner Serverfehler"
 
-#: templates/500.html:12
+#: biscuit/core/templates/500.html:12
 msgid ""
 "\n"
 "      An unexpected error has occured.\n"
@@ -307,7 +300,7 @@ msgstr ""
 "      Ein unerwarteter Fehler ist aufgetreten.\n"
 "     "
 
-#: templates/500.html:18
+#: biscuit/core/templates/500.html:18
 msgid ""
 "\n"
 "     Your site administrators will automatically be notified about this\n"
@@ -318,11 +311,11 @@ msgstr ""
 "     Ihre Administratoren werden automatisch über diesen Fehler informiert.\n"
 "    "
 
-#: templates/503.html:5
+#: biscuit/core/templates/503.html:5
 msgid "Maintenance mode"
 msgstr "Wartungsmodus"
 
-#: templates/503.html:12
+#: biscuit/core/templates/503.html:12
 msgid ""
 "\n"
 "     The maintenance mode is currently enabled. Please try again later.\n"
@@ -333,64 +326,45 @@ msgstr ""
 "erneut.\n"
 "    "
 
-#: templates/contact_form/contact_form.html:14
-msgid "Send"
-msgstr "Absenden"
-
-#: templates/contact_form/contact_form_sent.html:9
-msgid ""
-"\n"
-"   The message was successfully submitted.\n"
-"  "
+#: biscuit/core/templates/core/base.html:47
+msgid "Logged in as"
 msgstr ""
-"\n"
-"   Die Nachricht wurde erfolgreich übermittelt.\n"
-"  "
 
-#: templates/core/edit_group.html:16 templates/core/edit_group.html:18
-#: templates/core/group_full.html:16
+#: biscuit/core/templates/core/edit_group.html:16
+#: biscuit/core/templates/core/edit_group.html:18
 msgid "Edit group"
 msgstr "Gruppe editieren"
 
-#: templates/core/edit_group.html:26 templates/core/edit_person.html:28
-#: templates/core/edit_school.html:22 templates/core/edit_schoolterm.html:22
-msgid "Edit"
-msgstr "Bearbeiten"
-
-#: templates/core/edit_person.html:7 templates/core/edit_person.html:9
-#: templates/core/person_full.html:16
+#: biscuit/core/templates/core/edit_person.html:7
+#: biscuit/core/templates/core/edit_person.html:9
 msgid "Edit person"
 msgstr "Person editieren"
 
-#: templates/core/edit_school.html:7 templates/core/edit_school.html:9
+#: biscuit/core/templates/core/edit_school.html:8
 msgid "Edit school"
 msgstr "Schule bearbeiten"
 
-#: templates/core/footer-menu.html:26
-msgid "Assorted"
-msgstr "Unsortiert"
-
-#: templates/core/group_full.html:8
+#: biscuit/core/templates/core/group_full.html:8
 msgid "Group"
 msgstr "Gruppe"
 
-#: templates/core/group_full.html:19
+#: biscuit/core/templates/core/group_full.html:19
 msgid "Details"
 msgstr "Details"
 
-#: templates/core/group_full.html:28
+#: biscuit/core/templates/core/group_full.html:28
 msgid "Owners"
 msgstr "Leiter/-innen"
 
-#: templates/core/group_full.html:31
+#: biscuit/core/templates/core/group_full.html:31
 msgid "Members"
 msgstr "Mitglieder"
 
-#: templates/core/group_full.html:35
+#: biscuit/core/templates/core/group_full.html:35
 msgid "Group not found"
 msgstr "Gruppe nicht gefunden"
 
-#: templates/core/group_full.html:38
+#: biscuit/core/templates/core/group_full.html:38
 msgid ""
 "\n"
 "          There is no group with this id.\n"
@@ -400,7 +374,7 @@ msgstr ""
 "          Es existiert keine Gruppe mit dieser ID.\n"
 "        "
 
-#: templates/core/index.html:8
+#: biscuit/core/templates/core/index.html:8
 msgid ""
 "\n"
 "    BiscuIT School Information System (SIS)\n"
@@ -410,7 +384,7 @@ msgstr ""
 "    BiscuIT Schulinformationssystem (SIS)\n"
 "  "
 
-#: templates/core/index.html:16
+#: biscuit/core/templates/core/index.html:16
 msgid ""
 "\n"
 "        BiscuIT is a web-based school information system (SIS) which can be "
@@ -425,27 +399,20 @@ msgstr ""
 "verwalten oder zu publizieren.\n"
 "      "
 
-#: templates/core/language_form.html:5
-msgid "Language"
-msgstr "Sprache"
-
-#: templates/core/no_person.html:8
-msgid ""
-"\n"
-"        You are not linked to a person\n"
-"      "
-msgstr ""
-"\n"
-"        Sie sind nicht mit einer Person verknüpft\n"
-"      "
-
-#: templates/core/no_person.html:13
+#: biscuit/core/templates/core/no_person.html:11
+#, fuzzy
+#| msgid ""
+#| "\n"
+#| "        Your user account is not linked to a person. This means you\n"
+#| "        cannot access any school-related information. Please contact\n"
+#| "        the managers of BiscuIT at your school.\n"
+#| "      "
 msgid ""
 "\n"
-"        Your user account is not linked to a person. This means you\n"
-"        cannot access any school-related information. Please contact\n"
-"        the managers of BiscuIT at your school.\n"
-"      "
+"          Your user account is not linked to a person. This means you\n"
+"          cannot access any school-related information. Please contact\n"
+"          the managers of BiscuIT at your school.\n"
+"        "
 msgstr ""
 "\n"
 "        Ihr Benutzerkonto ist nicht mit einer Person verknüpft. Das "
@@ -455,19 +422,20 @@ msgstr ""
 "       die Verwaltenden von BiscuIT an Ihrer Schule.\n"
 "      "
 
-#: templates/core/person_full.html:8 templates/core/persons_accounts.html:41
+#: biscuit/core/templates/core/person_full.html:8
+#: biscuit/core/templates/core/persons_accounts.html:41
 msgid "Person"
 msgstr "Person"
 
-#: templates/core/person_full.html:19
+#: biscuit/core/templates/core/person_full.html:19
 msgid "Contact details"
 msgstr "Kontaktdetails"
 
-#: templates/core/person_full.html:70
+#: biscuit/core/templates/core/person_full.html:70
 msgid "Person not found"
 msgstr "Person nicht gefunden"
 
-#: templates/core/person_full.html:73
+#: biscuit/core/templates/core/person_full.html:73
 msgid ""
 "\n"
 "          There is no person with this id.\n"
@@ -477,12 +445,12 @@ msgstr ""
 "          Es existiert keine Person mit dieser ID.\n"
 "        "
 
-#: templates/core/persons_accounts.html:17
-#: templates/core/persons_accounts.html:20
+#: biscuit/core/templates/core/persons_accounts.html:17
+#: biscuit/core/templates/core/persons_accounts.html:20
 msgid "Link persons to accounts"
 msgstr "Personen mit Benutzerkonten verknüpfen"
 
-#: templates/core/persons_accounts.html:26
+#: biscuit/core/templates/core/persons_accounts.html:26
 msgid ""
 "\n"
 "        You can use this form to assign user accounts to persons. Use the\n"
@@ -501,91 +469,490 @@ msgstr ""
 "    eingegebenen Benutzernamen und kopiert alle anderen Daten der Person.\n"
 "      "
 
-#: templates/core/persons_accounts.html:42
+#: biscuit/core/templates/core/persons_accounts.html:42
 msgid "Existing account"
 msgstr "Existierendes Konto"
 
-#: templates/core/persons_accounts.html:43
+#: biscuit/core/templates/core/persons_accounts.html:43
 msgid "New account"
 msgstr "Neues Konto"
 
-#: templates/core/persons_accounts.html:59
+#: biscuit/core/templates/core/persons_accounts.html:59
 msgid "Update"
 msgstr "Aktualisieren"
 
-#: templates/core/school_management.html:5
-#: templates/core/school_management.html:7
+#: biscuit/core/templates/core/save_button.html:3
+msgid "Save"
+msgstr ""
+
+#: biscuit/core/templates/core/school_management.html:6
 msgid "School management"
 msgstr "Schulverwaltung"
 
-#: templates/core/system_status.html:12
+#: biscuit/core/templates/core/system_status.html:12
 msgid "System checks"
 msgstr "Systemprüfungen"
 
-#: templates/core/system_status.html:18
+#: biscuit/core/templates/core/system_status.html:21
 msgid "Maintenance mode enabled"
 msgstr "Wartungsmodus aktiviert"
 
-#: templates/core/system_status.html:19
-msgid "Only admin and visitors from internal IPs can access the site."
+#: biscuit/core/templates/core/system_status.html:23
+#, fuzzy
+#| msgid "Only admin and visitors from internal IPs can access the site."
+msgid ""
+"\n"
+"                Only admin and visitors from internal IPs can access "
+"thesite.\n"
+"              "
 msgstr ""
 "Nur Administratoren und Besucher von internen IP-Adressen können die Seite "
 "aufrufen."
 
-#: templates/core/system_status.html:24
+#: biscuit/core/templates/core/system_status.html:34
 msgid "Maintenance mode disabled"
 msgstr "Wartungsmodus deaktiviert"
 
-#: templates/core/system_status.html:25
+#: biscuit/core/templates/core/system_status.html:35
 msgid "Everyone can access the site."
 msgstr "Jeder kann die Seite aufrufen."
 
-#: templates/core/system_status.html:33
+#: biscuit/core/templates/core/system_status.html:45
 msgid "Debug mode enabled"
 msgstr "Debug-Modus aktiviert"
 
-#: templates/core/system_status.html:34
+#: biscuit/core/templates/core/system_status.html:47
+#, fuzzy
+#| msgid ""
+#| "The web server throws back debug information on errors. Do not use in "
+#| "production!"
 msgid ""
-"The web server throws back debug information on errors. Do not use in "
-"production!"
+"\n"
+"                The web server throws back debug information on errors. Do "
+"not use in production!\n"
+"              "
 msgstr ""
 "Der Server gibt Debug-Informationen bei Fehlern zurück. Nicht im "
 "Produktivbetrieb nutzen!"
 
-#: templates/core/system_status.html:39
+#: biscuit/core/templates/core/system_status.html:54
 msgid "Debug mode disabled"
 msgstr "Debug-Modus deaktivert"
 
-#: templates/core/system_status.html:40
-msgid "Debug mode is disabled. Default error pages are displayed on errors."
+#: biscuit/core/templates/core/system_status.html:56
+#, fuzzy
+#| msgid "Debug mode is disabled. Default error pages are displayed on errors."
+msgid ""
+"\n"
+"                Debug mode is disabled. Default error pages are displayed on "
+"errors.\n"
+"              "
 msgstr ""
 "Debug-Modus ist deaktiviert. Standard-Fehlerseiten werden bei Fehlern "
 "angezeigt."
 
-#: templates/core/system_status.html:50
+#: biscuit/core/templates/core/system_status.html:69
 msgid "Recent backup cron jobs"
 msgstr "Letzte Backup-Cron-Jobs"
 
-#: templates/impersonate/list_users.html:8
+#: biscuit/core/templates/impersonate/list_users.html:8
 msgid "Impersonate user"
 msgstr "Als Benutzer verkleiden"
 
-#: views.py:143
+#: biscuit/core/templates/two_factor/_wizard_actions.html:6
+msgid "Cancel"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/_wizard_actions.html:14
+#: biscuit/core/templates/two_factor/_wizard_actions.html:19
+msgid "Back"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/_wizard_actions.html:24
+msgid "Next"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/backup_tokens.html:5
+#: biscuit/core/templates/two_factor/profile/profile.html:42
+msgid "Backup Tokens"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/backup_tokens.html:10
+msgid ""
+"\n"
+"        Backup tokens can be used when your primary and backup\n"
+"        phone numbers aren't available. The backup tokens below can be used\n"
+"        for login verification. If you've used up all your backup tokens, "
+"you\n"
+"        can generate a new set of backup tokens. Only the backup tokens "
+"shown\n"
+"        below will be valid.\n"
+"      "
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/backup_tokens.html:29
+#, fuzzy
+#| msgid ""
+#| "\n"
+#| "          There is no person with this id.\n"
+#| "        "
+msgid ""
+"\n"
+"          Print these tokens and keep them somewhere safe.\n"
+"        "
+msgstr ""
+"\n"
+"          Es existiert keine Person mit dieser ID.\n"
+"        "
+
+#: biscuit/core/templates/two_factor/core/backup_tokens.html:35
+msgid "You don't have any backup codes yet."
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/backup_tokens.html:41
+msgid "Back to Account Security"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/backup_tokens.html:45
+msgid "Generate Tokens"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/login.html:13
+msgid "Enter your credentials."
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/login.html:16
+msgid ""
+"We are calling your phone right now, please enter the\n"
+"            digits you hear."
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/login.html:19
+msgid ""
+"We sent you a text message, please enter the tokens we\n"
+"            sent."
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/login.html:22
+msgid ""
+"Please enter the tokens generated by your token\n"
+"            generator."
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/login.html:26
+msgid ""
+"Use this form for entering backup tokens for logging in.\n"
+"          These tokens have been generated for you to print and keep safe. "
+"Please\n"
+"          enter one of these backup tokens to login to your account."
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/login.html:42
+msgid "Or, alternatively, use one of your backup phones:"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/login.html:52
+msgid "As a last resort, you can use a backup token:"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/login.html:55
+msgid "Use Backup Token"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/otp_required.html:5
+msgid "Permission Denied"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/otp_required.html:7
+msgid ""
+"The page you requested, enforces users to verify using\n"
+"    two-factor authentication for security reasons. You need to enable "
+"these\n"
+"    security features in order to access this page."
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/otp_required.html:11
+msgid ""
+"Two-factor authentication is not enabled for your\n"
+"    account. Enable two-factor authentication for enhanced account\n"
+"    security."
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/otp_required.html:16
+msgid "Go back"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/otp_required.html:18
+#: biscuit/core/templates/two_factor/core/setup.html:5
+#: biscuit/core/templates/two_factor/core/setup_complete.html:5
+#: biscuit/core/templates/two_factor/profile/profile.html:82
+msgid "Enable Two-Factor Authentication"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/phone_register.html:5
+msgid "Add Backup Phone"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/phone_register.html:8
+msgid ""
+"You'll be adding a backup phone number to your\n"
+"        account. This number will be used if your primary method of\n"
+"        registration is not available."
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/phone_register.html:12
+msgid ""
+"We've sent a token to your phone number. Please\n"
+"        enter the token you've received."
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/setup.html:8
+msgid ""
+"\n"
+"        You are about to take your account security to the\n"
+"        next level. Follow the steps in this wizard to enable two-factor\n"
+"        authentication.\n"
+"      "
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/setup.html:16
+msgid ""
+"\n"
+"        Please select which authentication method you would like to use.\n"
+"      "
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/setup.html:22
+msgid ""
+"\n"
+"        To start using a token generator, please use your\n"
+"        smartphone to scan the QR code below. For example, use Google\n"
+"        Authenticator. Then, enter the token generated by the app.\n"
+"      "
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/setup.html:33
+msgid ""
+"\n"
+"        Please enter the phone number you wish to receive the\n"
+"        text messages on. This number will be validated in the next step.\n"
+"      "
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/setup.html:40
+msgid ""
+"\n"
+"        Please enter the phone number you wish to be called on.\n"
+"        This number will be validated in the next step.\n"
+"      "
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/setup.html:49
+msgid ""
+"\n"
+"            We are calling your phone right now, please enter the digits you "
+"hear.\n"
+"          "
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/setup.html:55
+msgid ""
+"\n"
+"            We sent you a text message, please enter the tokens we sent.\n"
+"          "
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/setup.html:62
+msgid ""
+"\n"
+"          We've encountered an issue with the selected authentication "
+"method. Please\n"
+"          go back and verify that you entered your information correctly, "
+"try\n"
+"          again, or use a different authentication method instead. If the "
+"issue\n"
+"          persists, contact the site administrator.\n"
+"        "
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/setup.html:72
+msgid ""
+"\n"
+"        To identify and verify your YubiKey, please insert a\n"
+"        token in the field below. Your YubiKey will be linked to your\n"
+"        account.\n"
+"      "
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/setup_complete.html:10
+msgid ""
+"\n"
+"        Congratulations, you've successfully enabled two-factor "
+"authentication.\n"
+"      "
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/setup_complete.html:20
+#: biscuit/core/templates/two_factor/core/setup_complete.html:40
+msgid "Back to Profile"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/setup_complete.html:24
+#: biscuit/core/templates/two_factor/core/setup_complete.html:44
+#, fuzzy
+#| msgid "Recent backup cron jobs"
+msgid "Generate backup codes"
+msgstr "Letzte Backup-Cron-Jobs"
+
+#: biscuit/core/templates/two_factor/core/setup_complete.html:30
+msgid ""
+"\n"
+"          However, it might happen that you don't have access to\n"
+"          your primary token device. To enable account recovery, generate "
+"backup codes\n"
+"          or add a phone number.\n"
+"        "
+msgstr ""
+
+#: biscuit/core/templates/two_factor/core/setup_complete.html:48
+#: biscuit/core/templates/two_factor/profile/profile.html:37
+msgid "Add Phone Number"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/profile/profile.html:6
+#, fuzzy
+#| msgid "Account"
+msgid "Account Security"
+msgstr "Konto"
+
+#: biscuit/core/templates/two_factor/profile/profile.html:11
+msgid "Tokens will be generated by your token generator."
+msgstr ""
+
+#: biscuit/core/templates/two_factor/profile/profile.html:13
+#, python-format
+msgid "Primary method: %(primary)s"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/profile/profile.html:15
+msgid "Tokens will be generated by your YubiKey."
+msgstr ""
+
+#: biscuit/core/templates/two_factor/profile/profile.html:19
+msgid "Backup Phone Numbers"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/profile/profile.html:20
+msgid ""
+"If your primary method is not available, we are able to\n"
+"        send backup tokens to the phone numbers listed below."
+msgstr ""
+
+#: biscuit/core/templates/two_factor/profile/profile.html:29
+msgid "Unregister"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/profile/profile.html:44
+msgid ""
+"If you don't have any device with you, you can access\n"
+"        your account using backup tokens."
+msgstr ""
+
+#: biscuit/core/templates/two_factor/profile/profile.html:46
+#, fuzzy, python-format
+#| msgid ""
+#| "\n"
+#| "        You are not linked to a person\n"
+#| "      "
+msgid ""
+"\n"
+"        You have only one backup token remaining.\n"
+"      "
+msgid_plural ""
+"\n"
+"        You have %(counter)s backup tokens remaining.\n"
+"      "
+msgstr[0] ""
+"\n"
+"        Sie sind nicht mit einer Person verknüpft\n"
+"      "
+msgstr[1] ""
+"\n"
+"        Sie sind nicht mit einer Person verknüpft\n"
+"      "
+
+#: biscuit/core/templates/two_factor/profile/profile.html:55
+msgid "Show Codes"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/profile/profile.html:59
+#: biscuit/core/templates/two_factor/profile/profile.html:69
+msgid "Disable Two-Factor Authentication"
+msgstr ""
+
+#: biscuit/core/templates/two_factor/profile/profile.html:61
+msgid ""
+"\n"
+"        However we strongly discourage you to do so, you can\n"
+"        also disable two-factor authentication for your account.\n"
+"      "
+msgstr ""
+
+#: biscuit/core/templates/two_factor/profile/profile.html:74
+msgid ""
+"\n"
+"        Two-factor authentication is not enabled for your\n"
+"        account. Enable two-factor authentication for enhanced account\n"
+"        security.\n"
+"      "
+msgstr ""
+
+#: biscuit/core/views.py:148
 msgid "The person has been saved."
 msgstr "Die Person wurde gespeichert."
 
-#: views.py:166
+#: biscuit/core/views.py:171
 msgid "The group has been saved."
 msgstr "Die Gruppe wurde gespeichert."
 
-#: views.py:211
+#: biscuit/core/views.py:216
 msgid "The school has been saved."
 msgstr "Die Schule wurde gespeichert."
 
-#: views.py:230
+#: biscuit/core/views.py:235
 msgid "The term has been saved."
 msgstr "Das Schuljahr wurde gespeichert."
 
+#~ msgid "BiscuIT Software"
+#~ msgstr "BiscuIT-Software"
+
+#~ msgid "Support"
+#~ msgstr "Unterstützung"
+
+#~ msgid "Get support"
+#~ msgstr "Unterstützung erhalten"
+
+#~ msgid "Send"
+#~ msgstr "Absenden"
+
+#~ msgid ""
+#~ "\n"
+#~ "   The message was successfully submitted.\n"
+#~ "  "
+#~ msgstr ""
+#~ "\n"
+#~ "   Die Nachricht wurde erfolgreich übermittelt.\n"
+#~ "  "
+
+#~ msgid "Edit"
+#~ msgstr "Bearbeiten"
+
+#~ msgid "Assorted"
+#~ msgstr "Unsortiert"
+
+#~ msgid "Language"
+#~ msgstr "Sprache"
+
 #~ msgid "Administration"
 #~ msgstr "Verwaltung"
 
diff --git a/biscuit/core/menus.py b/biscuit/core/menus.py
index 50b2c3d73abe86321a8935ece2399393a2c2915c..016af45b8b5bceb139dc8b06aae54c40c6e78220 100644
--- a/biscuit/core/menus.py
+++ b/biscuit/core/menus.py
@@ -3,32 +3,38 @@ from django.utils.translation import ugettext_lazy as _
 
 MENUS = {
     "NAV_MENU_CORE": [
+        {
+            "name": _("Login"),
+            "url": settings.LOGIN_URL,
+            "icon": "lock_open",
+            "validators": ["menu_generator.validators.is_anonymous"],
+        },
         {
             "name": _("Account"),
             "url": "#",
+            "icon": "person",
             "root": True,
+            "validators": ["menu_generator.validators.is_authenticated"],
             "submenu": [
                 {
                     "name": _("Stop impersonation"),
                     "url": "impersonate-stop",
+                    "icon": "stop",
                     "validators": [
                         "menu_generator.validators.is_authenticated",
                         "biscuit.core.util.core_helpers.is_impersonate",
                     ],
                 },
-                {
-                    "name": _("Login"),
-                    "url": settings.LOGIN_URL,
-                    "validators": ["menu_generator.validators.is_anonymous"],
-                },
                 {
                     "name": _("Logout"),
                     "url": "logout",
+                    "icon": "exit_to_app",
                     "validators": ["menu_generator.validators.is_authenticated"],
                 },
                 {
                     "name": _("Two factor auth"),
                     "url": "two_factor:profile",
+                    "icon": "phonelink_lock",
                     "validators": [
                         "menu_generator.validators.is_authenticated",
                         lambda request: "two_factor" in settings.INSTALLED_APPS,
@@ -39,6 +45,7 @@ MENUS = {
         {
             "name": _("Admin"),
             "url": "#",
+            "icon": "security",
             "validators": [
                 "menu_generator.validators.is_authenticated",
                 "menu_generator.validators.is_superuser",
@@ -47,6 +54,7 @@ MENUS = {
                 {
                     "name": _("Data management"),
                     "url": "data_management",
+                    "icon": "view_list",
                     "validators": [
                         "menu_generator.validators.is_authenticated",
                         "menu_generator.validators.is_superuser",
@@ -55,6 +63,7 @@ MENUS = {
                 {
                     "name": _("System status"),
                     "url": "system_status",
+                    "icon": "power_settings_new",
                     "validators": [
                         "menu_generator.validators.is_authenticated",
                         "menu_generator.validators.is_superuser",
@@ -63,6 +72,7 @@ MENUS = {
                 {
                     "name": _("Impersonation"),
                     "url": "impersonate-list",
+                    "icon": "people",
                     "validators": [
                         "menu_generator.validators.is_authenticated",
                         "menu_generator.validators.is_superuser",
@@ -71,6 +81,7 @@ MENUS = {
                 {
                     "name": _("Manage school"),
                     "url": "school_management",
+                    "icon": "school",
                     "validators": [
                         "menu_generator.validators.is_authenticated",
                         "menu_generator.validators.is_superuser",
@@ -118,18 +129,12 @@ MENUS = {
         },
     ],
     "FOOTER_MENU_CORE": [
-        {
-            "name": _("BiscuIT Software"),
-            "url": "#",
-            "submenu": [
-                {"name": _("Website"), "url": "https://biscuit.edugit.io/"},
-                {"name": "Teckids e.V.", "url": "https://www.teckids.org/"},
-            ],
-        },
+        {"name": _("Website"), "url": "https://biscuit.edugit.org/"},
+        {"name": "Teckids e.V.", "url": "https://www.teckids.org/"},
     ],
     "DATA_MANAGEMENT_MENU": [],
     "SCHOOL_MANAGEMENT_MENU": [
-        {"name": _("Edit school information"), "url": "edit_school_information",},
-        {"name": _("Edit school term"), "url": "edit_school_term",},
+        {"name": _("Edit school information"), "url": "edit_school_information", },
+        {"name": _("Edit school term"), "url": "edit_school_term", },
     ],
 }
diff --git a/biscuit/core/models.py b/biscuit/core/models.py
index eab46395fcea5d7681ae5fa1a2c90ba99437c72e..aeb7131562a2c1978bd85966ae92dec543730280 100644
--- a/biscuit/core/models.py
+++ b/biscuit/core/models.py
@@ -13,13 +13,7 @@ from .mixins import ExtensibleModel
 
 class ThemeSettings(dbsettings.Group):
     colour_primary = dbsettings.StringValue(default="#007bff")
-    colour_secondary = dbsettings.StringValue(default="#6c757d")
-    colour_success = dbsettings.StringValue(default="#28a745")
-    colour_info = dbsettings.StringValue(default="#17a2b8")
-    colour_warning = dbsettings.StringValue(default="#ffc107")
-    colour_danger = dbsettings.StringValue(default="#dc3545")
-    colour_light = dbsettings.StringValue(default="#f8f9fa")
-    colour_dark = dbsettings.StringValue(default="#343a40")
+    colour_secondary = dbsettings.StringValue(default="#007bff")
 
 
 theme_settings = ThemeSettings("Global theme settings")
diff --git a/biscuit/core/settings.py b/biscuit/core/settings.py
index 4fc0d356929ae656df00a885194cefbb6ee696bb..ba183e461853eba7e767992ace1efc1c67d94b1d 100644
--- a/biscuit/core/settings.py
+++ b/biscuit/core/settings.py
@@ -54,7 +54,6 @@ INSTALLED_APPS = [
     "sass_processor",
     "easyaudit",
     "dbsettings",
-    "bootstrap4",
     "django_any_js",
     "django_yarnpkg",
     "django_tables2",
@@ -73,6 +72,7 @@ INSTALLED_APPS = [
     "biscuit.core",
     "impersonate",
     "two_factor",
+    "material"
 ]
 
 INSTALLED_APPS += get_app_packages()
@@ -230,32 +230,20 @@ STATIC_ROOT = _settings.get("static.root", os.path.join(BASE_DIR, "static"))
 MEDIA_ROOT = _settings.get("media.root", os.path.join(BASE_DIR, "media"))
 NODE_MODULES_ROOT = _settings.get("node_modules.root", os.path.join(BASE_DIR, "node_modules"))
 
-YARN_INSTALLED_APPS = ["@mdi/font", "bootstrap", "datatables", "highlight.js", "jquery", "manup", "materialize-css", "moment", "popper.js", "prop-types", "react", "react-dom", "select2"]
+YARN_INSTALLED_APPS = ["datatables", "highlight.js", "jquery", "manup", "materialize-css", "moment", "popper.js", "prop-types", "react", "react-dom", "material-design-icons-iconfont", "select2"]
 
 JS_URL = _settings.get("js_assets.url", STATIC_URL)
 JS_ROOT = _settings.get("js_assets.root", NODE_MODULES_ROOT + "/node_modules")
 
-BOOTSTRAP4 = {
-    "css_url": JS_URL + "/bootstrap/dist//css/bootstrap.min.css",
-    "javascript_url": JS_URL + "/bootstrap/dist/js/bootstrap.min.js",
-    "jquery_url": JS_URL + "/jquery/dist/jquery.min.js",
-    "popper_url": JS_URL + "/popper.js/dist/umd/popper.min.js",
-    "include_jquery": True,
-    "include_popper": True,
-    "javascript_in_head": True,
-}
-
 SELECT2_CSS = JS_URL + "/select2/dist/css/select2.min.css"
 SELECT2_JS = JS_URL + "/select2/dist/js/select2.min.js"
 SELECT2_I18N_PATH = JS_URL + "/select2/dist/js/i18n"
 
 ANY_JS = {
     "DataTables": {"js_url": JS_URL + "/datatables/media/js/jquery.dataTables.min.js"},
-    "DataTables-Bootstrap4": {
-        "css_url": JS_URL + "/datatables/media/css/jquery.dataTables.min.css",
-        "js_url": JS_URL + "/datatables/media/js/jquery.dataTables.min.js",
-    },
-    "material-design-icons": {"css_url": JS_URL + "@mdi/font/css/materialdesignicons.css"},
+    "materialize": {"js_url": JS_URL + "/materialize-css/dist/js/materialize.min.js"},
+    "jQuery": {"js_url": JS_URL + "/jquery/dist/jquery.min.js"},
+    "material-design-icons": {"css_url": JS_URL + "/material-design-icons-iconfont/dist/material-design-icons.css"},
 }
 
 SASS_PROCESSOR_AUTO_INCLUDE = False
@@ -263,7 +251,7 @@ SASS_PROCESSOR_CUSTOM_FUNCTIONS = {
     "get-colour": "biscuit.core.util.sass_helpers.get_colour",
     "get-theme-setting": "biscuit.core.util.sass_helpers.get_theme_setting",
 }
-SASS_PROCESSOR_INCLUDE_DIRS = [_settings.get("bootstrap.sass_path", JS_ROOT + "/bootstrap/scss/")]
+SASS_PROCESSOR_INCLUDE_DIRS = [_settings.get("materialize.sass_path", JS_ROOT + "/materialize-css/sass/"), STATIC_ROOT]
 
 ADMINS = _settings.get("contact.admins", [])
 SERVER_EMAIL = _settings.get("contact.from", "root@localhost")
diff --git a/biscuit/core/static/bootstrap_modified.scss b/biscuit/core/static/bootstrap_modified.scss
deleted file mode 100644
index a1e918db91287ca16e560ac3851790ba90fb6891..0000000000000000000000000000000000000000
--- a/biscuit/core/static/bootstrap_modified.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-$theme-colors: (
-    "primary":    adjust-color(get-colour(get-theme-setting(colour_primary)), $alpha: 1),
-    "secondary":  adjust-color(get-colour(get-theme-setting(colour_secondary)), $alpha: 1),
-    "success":    adjust-color(get-colour(get-theme-setting(colour_success)), $alpha: 1),
-    "info":       adjust-color(get-colour(get-theme-setting(colour_info)), $alpha: 1),
-    "warning":    adjust-color(get-colour(get-theme-setting(colour_warning)), $alpha: 1),
-    "danger":     adjust-color(get-colour(get-theme-setting(colour_danger)), $alpha: 1),
-    "light":      adjust-color(get-colour(get-theme-setting(colour_light)), $alpha: 1),
-    "dark":       adjust-color(get-colour(get-theme-setting(colour_dark)), $alpha: 1),
-);
-
-@import "bootstrap";
diff --git a/biscuit/core/static/css/style.css b/biscuit/core/static/css/style.css
deleted file mode 100644
index 8020abd7c0e5e457da7c0bc9d41e555e9b977d84..0000000000000000000000000000000000000000
--- a/biscuit/core/static/css/style.css
+++ /dev/null
@@ -1,29 +0,0 @@
-html {
-  height: 100%;
-}
-
-body {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding-top: 70px;
-}
-
-main {
-  margin-bottom: 2em;
-}
-
-footer {
-  width: 100%;
-  margin-top: auto;
-  padding: 2em 0;
-}
-
-img.person-img {
-        max-height: 300px;
-}
-
-.dropdown:hover>.dropdown-menu {
-        display: block;
-        margin-top:0px;
-}
diff --git a/biscuit/core/static/js/main.js b/biscuit/core/static/js/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..c353ea6500ba0f57f414545f5bc59ae647b52ab4
--- /dev/null
+++ b/biscuit/core/static/js/main.js
@@ -0,0 +1,67 @@
+$(document).ready( function () {
+    $("dmc-datetime input").addClass("datepicker");
+    $("[data-form-control='date']").addClass("datepicker");
+    $("[data-form-control='time']").addClass("timepicker");
+
+    // Initialize sidenav [MAT]
+    $(".sidenav").sidenav();
+
+    // Initialize datepicker [MAT]
+    $('.datepicker').datepicker({
+        format: 'dd.mm.yyyy',
+        // Translate to German
+        i18n: {
+            months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
+            monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+            weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+            weekdaysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+            weekdaysAbbrev: ['S', 'M', 'D', 'M', 'D', 'F', 'S'],
+
+            // Buttons
+            today: 'Heute',
+            cancel: 'Abbrechen',
+            done: 'OK',
+        },
+
+        // Set monday as first day of week
+        firstDay: 1,
+        autoClose: true
+    });
+
+    // Initialize timepicker [MAT]
+    $('.timepicker').timepicker({
+        twelveHour: false,
+        autoClose: true,
+        i18n: {
+            cancel: 'Abbrechen',
+            clear: 'Löschen',
+            done: 'OK'
+        },
+    });
+
+    // Initialize tooltip [MAT]
+    $('.tooltipped').tooltip();
+
+    // Initialize select [MAT]
+    $('select').formSelect();
+
+    // Initalize print button
+    $("#print").click(function () {
+        window.print();
+    });
+
+    // Initialize Collapsible [MAT]
+    $('.collapsible').collapsible();
+
+    // Initialize FABs [MAT]
+    $('.fixed-action-btn').floatingActionButton();
+
+    // Initialize Modals [MAT]
+    $('.modal').modal();
+
+    $('table.datatable').each(function (index) {
+        $(this).DataTable({
+            "paging": false
+        });
+    });
+});
diff --git a/biscuit/core/static/materialize.scss b/biscuit/core/static/materialize.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e6f0e5b968a8358d7648431d77a319374a1c3805
--- /dev/null
+++ b/biscuit/core/static/materialize.scss
@@ -0,0 +1,41 @@
+@charset "UTF-8";
+
+// Color
+@import "components/color-variables";
+@import "components/color-classes";
+
+// Variables;
+@import "theme";
+
+// Reset
+@import "components/normalize";
+
+// components
+@import "components/global";
+@import "components/badges";
+@import "components/icons-material-design";
+@import "components/grid";
+@import "components/navbar";
+@import "components/typography";
+@import "components/transitions";
+@import "components/cards";
+@import "components/toast";
+@import "components/tabs";
+@import "components/tooltip";
+@import "components/buttons";
+@import "components/dropdown";
+@import "components/waves";
+@import "components/modal";
+@import "components/collapsible";
+@import "components/chips";
+@import "components/materialbox";
+@import "components/forms/forms";
+@import "components/table_of_contents";
+@import "components/sidenav";
+@import "components/preloader";
+@import "components/slider";
+@import "components/carousel";
+@import "components/tapTarget";
+@import "components/pulse";
+@import "components/datepicker";
+@import "components/timepicker";
diff --git a/biscuit/core/static/style.scss b/biscuit/core/static/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..207b1652d5dada75dd17c464a92946b57f5959ed
--- /dev/null
+++ b/biscuit/core/static/style.scss
@@ -0,0 +1,456 @@
+@import "materialize";
+
+.primary-color {
+  background-color: $primary-color !important;
+}
+
+.primary-color-text, .primary-color-text a {
+  color: $primary-color !important;
+}
+
+.waves-effect.waves-primary .waves-ripple {
+  background-color: lighten($primary-color, 5%);
+}
+
+// used in sidenav
+
+/**********/
+/* COMMON */
+/**********/
+
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+header, main, footer {
+  margin-left: 300px;
+}
+
+@media only screen and (max-width: 992px) {
+  header, main, footer {
+    margin-left: 0;
+  }
+}
+
+/**********/
+/* HEADER */
+/**********/
+
+.brand-logo {
+  margin-left: 10px;
+}
+
+@media only screen and (max-width: 993px) {
+  header div.nav-wrapper {
+    z-index: -5;
+  }
+}
+
+
+/********/
+/* MAIN */
+/********/
+
+main {
+  padding: 10px 20px;
+  flex: 1 0 auto;
+}
+
+/***********/
+/* SIDENAV */
+/***********/
+
+ul.sidenav.sidenav-fixed li.logo {
+  margin-top: 32px;
+  margin-bottom: 50px;
+}
+
+ul.sidenav.sidenav-fixed .brand-logo {
+  margin: 0;
+}
+
+.logo img {
+  width: 250px;
+}
+
+.sidenav a:not(.collapsible-header) {
+  padding: 0 16px;
+}
+
+ul.sidenav li.logo > a:hover {
+  background: none !important;
+}
+
+.sidenav .collapsible-body > ul:not(.collapsible) > li.active a > i, .sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active a > i {
+  color: #fff;
+}
+
+.sidenav .collapsible-body > ul:not(.collapsible) > li.active, .sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active {
+  background-color: lighten($primary-color, 5%);
+}
+
+li.active > a > .sidenav-badge {
+  background-color: whitesmoke !important;
+  color: $primary-color !important;
+}
+
+
+// Sidenav trigger
+
+header a.sidenav-trigger {
+  position: absolute;
+  left: 7.5%;
+  top: 0;
+
+  height: 64px;
+  font-size: 38px;
+
+  float: none;
+
+  text-align: center;
+  color: white;
+
+  z-index: 2;
+}
+
+
+// Footer
+
+.footer-icon {
+  font-size: 22px !important;
+  vertical-align: middle;
+}
+
+
+@media only screen and (min-width: 1384px) {
+  .footer-row-large {
+    display: flex;
+    align-items: center;
+  }
+
+  .footer-row-small {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 1383px) {
+  .footer-row-large {
+    display: none;
+  }
+
+  .footer-row-small {
+    display: block;
+  }
+}
+
+ul.footer-ul {
+  display: inline-block;
+  text-align: right;
+  float: right;
+}
+
+.make-it-higher {
+  vertical-align: middle;
+  line-height: 36px;
+}
+
+
+/* Collections */
+
+ul.collection .collection-item .title {
+  font-weight: bold;
+}
+
+
+// Forms
+
+form .row {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+// Badges
+
+span.badge.new::after {
+  content: "";
+}
+
+span.badge.new {
+  font-size: 1rem;
+  line-height: 26px;
+  height: 26px;
+}
+
+span.badge.new.no-float {
+  float: none;
+  padding: 3px 6px;
+}
+
+span.badge .material-icons {
+  font-size: 0.9rem;
+}
+
+
+/*+++++++++*/
+/* Buttons */
+/*+++++++++*/
+
+.btn-flat-large {
+  line-height: 60px;
+  height: 60px;
+}
+
+.btn-flat-large i {
+  font-size: 4rem;
+}
+
+.btn-flat-medium {
+  line-height: 40px;
+  height: 40px;
+}
+
+.btn-flat-medium i {
+  font-size: 2rem;
+}
+
+.btn.primary, .btn-large.primary, .btn-small.primary {
+  background-color: rgba(0, 0, 0, 0.05) !important;
+  color: black !important;
+}
+
+.btn.primary:hover, .btn-large.primary:hover, .btn-small.primary {
+  background-color: $primary-color !important;
+  color: whitesmoke !important;
+}
+
+
+/* Table*/
+
+table.striped > tbody > tr:nth-child(odd) {
+  background-color: rgba(208, 208, 208, 0.5);
+}
+
+/*+++++++*/
+/* Print */
+/*+++++++*/
+#print-header {
+  display: none;
+}
+
+.print-icon {
+  margin-top: 1.52rem;
+}
+
+@media print {
+  body {
+    font-size: 15px;
+  }
+
+  header, main, footer {
+    margin-left: 0;
+  }
+
+  ul.sidenav {
+    display: none !important;
+    transform: translateX(-105%) !important;
+  }
+
+  nav {
+    display: none;
+  }
+
+  .sidenav-trigger {
+    display: none;
+  }
+
+  #print-header {
+    display: block;
+    border-bottom: 1px solid;
+    margin-bottom: 0;
+  }
+
+  #print-header .col.right-align {
+    padding: 15px;
+  }
+
+  main, header {
+    padding: 0;
+  }
+
+  footer, footer .footer-copyright, footer .container {
+    background-color: white !important;
+    color: black !important;
+  }
+
+  footer a {
+    display: none;
+  }
+
+  .footer-copyright, .footer-copyright .container {
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  .no-print {
+    display: none;
+  }
+}
+
+// Alerts
+
+.alert ul, .alert p {
+  margin: 0;
+}
+
+.alert > p, .alert > div {
+  margin: 10px;
+  padding: 10px;
+  border-left: 5px solid;
+}
+
+.alert.success > p, .alert.success > div {
+  background-color: #c5e1a5;
+  border-color: #4caf50;
+}
+
+.alert.error > p, .alert.error > div {
+  background-color: #ef9a9a;
+  border-color: #b71c1c;
+}
+
+.alert.primary > p, .alert.primary > div, .alert.info > p, .alert.info > div {
+  background-color: #ececec;
+  border-color: $primary-color;
+}
+
+.alert.warning p, .alert.warning div {
+  background-color: #ffb74d;
+  border-color: #e65100;
+}
+
+main .alert p:first-child, main .alert div:first-child {
+  margin-left: -10px;
+  margin-right: -10px;
+}
+
+
+// Helpers
+
+.no-margin {
+  margin: 0 !important;
+}
+
+.no-padding {
+  padding: 0 !important;
+}
+
+.no-pad-left {
+  padding-left: 0 !important;
+}
+
+.no-pad-right {
+  padding-right: 0 !important;
+}
+
+.valign-middle {
+  vertical-align: middle;
+}
+
+.valign-top {
+  vertical-align: top;
+}
+
+.valign-bot {
+  vertical-align: bottom;
+}
+
+.height-inherit {
+  height: 100%;
+}
+
+
+/* Dashboard */
+
+.card-action-badge {
+  float: left !important;
+  margin-left: 0 !important;
+  margin-top: -3px;
+  margin-right: 10px;
+}
+
+.event-card {
+  padding: 10px;
+}
+
+.event-card .title {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+
+.flex-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.hundred-percent {
+  width: 100%;
+}
+
+.badge-image {
+  position: absolute;
+  left: 0;
+  top: 10px;
+  z-index: 1;
+  background-color: $primary-color;
+  color: white;
+  padding: 2px 10px;
+  border-radius: 0 3px 3px 0;
+  text-transform: uppercase;
+  font-weight: 300;
+}
+
+.center-via-flex {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.center2-via-flex {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.spinner-primary {
+  border-color: $primary-color;
+}
+
+.dashboard-cards {
+  -webkit-column-break-inside: avoid;
+  column-count: 3;
+}
+
+@media (min-width: 800px) and (max-width: 1460px) {
+  .dashboard-cards {
+    column-count: 2;
+  }
+}
+
+@media (max-width: 800px) {
+  .dashboard-cards {
+    column-count: 1;
+  }
+}
+
+
+.dashboard-cards .card {
+  display: inline-block;
+  overflow: visible;
+  width: 100%;
+}
+
diff --git a/biscuit/core/static/theme.scss b/biscuit/core/static/theme.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6cb2c96081bad9721be4e4a6bee006c698cf4ea2
--- /dev/null
+++ b/biscuit/core/static/theme.scss
@@ -0,0 +1,349 @@
+// ==========================================================================
+// Materialize variables
+// ==========================================================================
+//
+// Table of Contents:
+//
+//  1. Colors
+//  2. Badges
+//  3. Buttons
+//  4. Cards
+//  5. Carousel
+//  6. Collapsible
+//  7. Chips
+//  8. Date + Time Picker
+//  9. Dropdown
+//  10. Forms
+//  11. Global
+//  12. Grid
+//  13. Navigation Bar
+//  14. Side Navigation
+//  15. Photo Slider
+//  16. Spinners | Loaders
+//  17. Tabs
+//  18. Tables
+//  19. Toasts
+//  20. Typography
+//  21. Footer
+//  22. Flow Text
+//  23. Collections
+//  24. Progress Bar
+
+
+
+// 1. Colors
+// ==========================================================================
+
+$primary-color: adjust-color(get-colour(get-theme-setting(colour_primary)), $alpha: 1);
+$primary-color-light: lighten($primary-color, 15%) !default;
+$primary-color-dark: darken($primary-color, 15%) !default;
+
+$secondary-color: adjust-color(get-colour(get-theme-setting(colour_secondary)), $alpha: 1);
+$success-color: color("green", "base") !default;
+$error-color: color("red", "base") !default;
+$link-color: color("light-blue", "darken-1") !default;
+
+
+// 2. Badges
+// ==========================================================================
+
+$badge-bg-color: $secondary-color !default;
+$badge-height: 22px !default;
+
+
+// 3. Buttons
+// ==========================================================================
+
+// Shared styles
+$button-border: none !default;
+$button-background-focus: lighten($secondary-color, 4%) !default;
+$button-font-size: 14px !default;
+$button-icon-font-size: 1.3rem !default;
+$button-height: 36px !default;
+$button-padding: 0 16px !default;
+$button-radius: 2px !default;
+
+// Disabled styles
+$button-disabled-background: #DFDFDF !default;
+$button-disabled-color: #9F9F9F !default;
+
+// Raised buttons
+$button-raised-background: $secondary-color !default;
+$button-raised-background-hover: lighten($button-raised-background, 5%) !default;
+$button-raised-color: #fff !default;
+
+// Large buttons
+$button-large-font-size: 15px !default;
+$button-large-icon-font-size: 1.6rem !default;
+$button-large-height: $button-height * 1.5 !default;
+$button-floating-large-size: 56px !default;
+
+// Small buttons
+$button-small-font-size: 13px !default;
+$button-small-icon-font-size: 1.2rem !default;
+$button-small-height: $button-height * .9 !default;
+$button-floating-small-size: $button-height * .9 !default;
+
+// Flat buttons
+$button-flat-color: #343434 !default;
+$button-flat-disabled-color: lighten(#999, 10%) !default;
+
+// Floating buttons
+$button-floating-background: $secondary-color !default;
+$button-floating-background-hover: $button-floating-background !default;
+$button-floating-color: #fff !default;
+$button-floating-size: 40px !default;
+$button-floating-radius: 50% !default;
+
+
+// 4. Cards
+// ==========================================================================
+
+$card-padding: 24px !default;
+$card-bg-color: #fff !default;
+$card-link-color: $primary-color !default;
+$card-link-color-light: lighten($card-link-color, 20%) !default;
+
+
+// 5. Carousel
+// ==========================================================================
+
+$carousel-height: 400px !default;
+$carousel-item-height: $carousel-height / 2 !default;
+$carousel-item-width: $carousel-item-height !default;
+
+
+// 6. Collapsible
+// ==========================================================================
+
+$collapsible-height: 3rem !default;
+$collapsible-line-height: $collapsible-height !default;
+$collapsible-header-color: #fff !default;
+$collapsible-border-color: #ddd !default;
+
+
+// 7. Chips
+// ==========================================================================
+
+$chip-bg-color: #e4e4e4 !default;
+$chip-border-color: #9e9e9e !default;
+$chip-selected-color: #26a69a !default;
+$chip-margin: 5px !default;
+
+
+// 8. Date + Time Picker
+// ==========================================================================
+
+$datepicker-display-font-size: 2.8rem;
+$datepicker-calendar-header-color: #999;
+$datepicker-weekday-color: rgba(0, 0, 0, .87) !default;
+$datepicker-weekday-bg: darken($secondary-color, 7%) !default;
+$datepicker-date-bg: $secondary-color !default;
+$datepicker-year: rgba(255, 255, 255, .7) !default;
+$datepicker-focus: rgba(0,0,0, .05) !default;
+$datepicker-selected: $secondary-color !default;
+$datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%) !default;
+$datepicker-day-focus: transparentize(desaturate($secondary-color, 5%), .75) !default;
+$datepicker-disabled-day-color: rgba(0, 0, 0, .3) !default;
+
+$timepicker-clock-color: rgba(0, 0, 0, .87) !default;
+$timepicker-clock-plate-bg: #eee !default;
+
+
+// 9. Dropdown
+// ==========================================================================
+
+$dropdown-bg-color: #fff !default;
+$dropdown-hover-bg-color: #eee !default;
+$dropdown-color: $secondary-color !default;
+$dropdown-item-height: 50px !default;
+
+
+// 10. Forms
+// ==========================================================================
+
+// Text Inputs + Textarea
+$input-height: 3rem !default;
+$input-border-color: color("grey", "base") !default;
+$input-border: 1px solid $input-border-color !default;
+$input-background: #fff !default;
+$input-error-color: $error-color !default;
+$input-success-color: $success-color !default;
+$input-focus-color: $secondary-color !default;
+$input-font-size: 16px !default;
+$input-margin-bottom: 8px;
+$input-margin: 0 0 $input-margin-bottom 0 !default;
+$input-padding: 0 !default;
+$label-font-size: .8rem !default;
+$input-disabled-color: rgba(0,0,0, .42) !default;
+$input-disabled-solid-color: #949494 !default;
+$input-disabled-border: 1px dotted $input-disabled-color !default;
+$input-invalid-border: 1px solid $input-error-color !default;
+$input-icon-size: 2rem;
+$placeholder-text-color: lighten($input-border-color, 20%) !default;
+
+// Radio Buttons
+$radio-fill-color: $secondary-color !default;
+$radio-empty-color: #5a5a5a !default;
+$radio-border: 2px solid $radio-fill-color !default;
+
+// Range
+$range-height: 14px !default;
+$range-width: 14px !default;
+$track-height: 3px !default;
+
+// Select
+$select-border: 1px solid #f2f2f2 !default;
+$select-background: rgba(255, 255, 255, 0.90) !default;
+$select-focus: 1px solid lighten($secondary-color, 47%) !default;
+$select-option-hover: rgba(0,0,0,.08) !default;
+$select-option-focus: rgba(0,0,0,.08) !default;
+$select-option-selected: rgba(0,0,0,.03) !default;
+$select-padding: 5px !default;
+$select-radius: 2px !default;
+$select-disabled-color: rgba(0,0,0,.3) !default;
+
+// Switches
+$switch-bg-color: $secondary-color !default;
+$switch-checked-lever-bg: desaturate(lighten($switch-bg-color, 25%), 25%) !default;
+$switch-unchecked-bg: #F1F1F1 !default;
+$switch-unchecked-lever-bg: rgba(0,0,0,.38) !default;
+$switch-radius: 15px !default;
+
+
+// 11. Global
+// ==========================================================================
+
+// Media Query Ranges
+$small-screen-up: 601px !default;
+$medium-screen-up: 993px !default;
+$large-screen-up: 1201px !default;
+$small-screen: 600px !default;
+$medium-screen: 992px !default;
+$large-screen: 1200px !default;
+
+$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
+$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
+$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default;
+$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
+$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
+$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
+
+
+// 12. Grid
+// ==========================================================================
+
+$num-cols: 12 !default;
+$gutter-width: 1.5rem !default;
+$element-top-margin: $gutter-width/3 !default;
+$element-bottom-margin: ($gutter-width*2)/3 !default;
+
+
+// 13. Navigation Bar
+// ==========================================================================
+
+$navbar-height: 64px !default;
+$navbar-line-height: $navbar-height !default;
+$navbar-height-mobile: 56px !default;
+$navbar-line-height-mobile: $navbar-height-mobile !default;
+$navbar-font-size: 1rem !default;
+$navbar-font-color: #fff !default;
+$navbar-brand-font-size: 2.1rem !default;
+
+// 14. Side Navigation
+// ==========================================================================
+
+$sidenav-width: 300px !default;
+$sidenav-font-size: 14px !default;
+$sidenav-font-color: rgba(0,0,0,.87) !default;
+$sidenav-bg-color: #fff !default;
+$sidenav-padding: 16px !default;
+$sidenav-item-height: 48px !default;
+$sidenav-line-height: $sidenav-item-height !default;
+
+
+// 15. Photo Slider
+// ==========================================================================
+
+$slider-bg-color: color('grey', 'base') !default;
+$slider-bg-color-light: color('grey', 'lighten-2') !default;
+$slider-indicator-color: color('green', 'base') !default;
+
+
+// 16. Spinners | Loaders
+// ==========================================================================
+
+$spinner-default-color: $secondary-color !default;
+
+
+// 17. Tabs
+// ==========================================================================
+
+$tabs-underline-color: $primary-color-light !default;
+$tabs-text-color: $primary-color !default;
+$tabs-bg-color: #fff !default;
+
+
+// 18. Tables
+// ==========================================================================
+
+$table-border-color: rgba(0,0,0,.12) !default;
+$table-striped-color: rgba(242, 242, 242, 0.5) !default;
+
+
+// 19. Toasts
+// ==========================================================================
+
+$toast-height: 48px !default;
+$toast-color: #323232 !default;
+$toast-text-color: #fff !default;
+$toast-action-color: #eeff41;
+
+
+// 20. Typography
+// ==========================================================================
+
+$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
+$off-black: rgba(0, 0, 0, 0.87) !default;
+// Header Styles
+$h1-fontsize: 4.2rem !default;
+$h2-fontsize: 3.56rem !default;
+$h3-fontsize: 2.92rem !default;
+$h4-fontsize: 2.28rem !default;
+$h5-fontsize: 1.64rem !default;
+$h6-fontsize: 1.15rem !default;
+
+
+// 21. Footer
+// ==========================================================================
+
+$footer-font-color: #fff !default;
+$footer-bg-color: $primary-color !default;
+$footer-copyright-font-color: rgba(255,255,255,.8) !default;
+$footer-copyright-bg-color: rgba(51,51,51,.08) !default;
+
+
+// 22. Flow Text
+// ==========================================================================
+
+$range : $large-screen - $small-screen !default;
+$intervals: 20 !default;
+$interval-size: $range / $intervals !default;
+
+
+// 23. Collections
+// ==========================================================================
+
+$collection-border-color: #e0e0e0 !default;
+$collection-bg-color: #fff !default;
+$collection-active-bg-color: $secondary-color !default;
+$collection-active-color: lighten($secondary-color, 55%) !default;
+$collection-hover-bg-color: #ddd !default;
+$collection-link-color: $secondary-color !default;
+$collection-line-height: 1.5rem !default;
+
+
+// 24. Progress Bar
+// ==========================================================================
+
+$progress-bar-color: $secondary-color !default;
diff --git a/biscuit/core/templates/core/base.html b/biscuit/core/templates/core/base.html
index 477168e381033798d18429c638669a923bee22cb..01a869bbfecbf41c711af161d7f815369d2db295 100644
--- a/biscuit/core/templates/core/base.html
+++ b/biscuit/core/templates/core/base.html
@@ -1,63 +1,134 @@
 {# -*- engine:django -*- #}
 
-{% extends "bootstrap4/bootstrap4.html" %}
 
-{% load bootstrap4 i18n menu_generator static any_js sass_tags %}
+{% load i18n menu_generator static sass_tags %}
+
+
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="description" content="Selbst programmierte Anwendungen für den Schullaltag am Katharineum zu Lübeck">
+
+  <title>School Information System</title>
 
-{% block bootstrap4_extra_head %}
-  {% include_css "DataTables-Bootstrap4" %}
-  {% include_css "material-design-icons"%}
   {% include 'core/icons.html' %}
-  <link rel="stylesheet" href="{% sass_src 'bootstrap_modified.scss' %}" />
-  <link rel="stylesheet" href="{% static 'css/style.css' %}" />
-{% endblock %}
-
-{% block bootstrap4_title %}BiscuIT School Information System{% endblock %}
-
-{% block bootstrap4_extra_script %}
-  {% include_js "DataTables" %}
-  {% include_js "DataTables-Bootstrap4" %}
-{% endblock %}
-
-{% block bootstrap4_content %}
-  <header>
-    <nav class="navbar navbar-dark bg-dark navbar-expand-md fixed-top">
-      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-main">
-        <span class="mdi mdi-menu"></span>
-      </button>
-      <a class="navbar-brand" href="{% url "index" %}">
-        <span class="mdi mdi-briefcase"></span> BiscuIT SIS
+
+  {# CSS #}
+  {% include_css "material-design-icons" %}
+  <link rel="stylesheet" href="{% sass_src 'style.scss' %}">
+
+  {# Include jQuery to provide $(document).ready #}
+  {% include_js "jQuery" %}
+</head>
+<body>
+
+<header>
+  <!-- Menu button (sidenav) -->
+  <div class="container">
+    <a href="#" data-target="slide-out" class="top-nav sidenav-trigger hide-on-large-only">
+      <i class="material-icons">menu</i>
+    </a>
+  </div>
+
+  <!-- Nav bar (logged in as, logout) -->
+  <nav>
+    <a class="brand-logo" href="/">SIS</a>
+
+    <div class="nav-wrapper">
+      <ul id="nav-mobile" class="right hide-on-med-and-down">
+        {% if user.is_authenticated %}
+          <li>{% trans "Logged in as" %} {{ user.get_username }}</li>
+          <li>
+            <a href="{% url 'logout' %}">{% trans "Logout" %} <i class="material-icons right">exit_to_app</i></a>
+          </li>
+        {% endif %}
+      </ul>
+    </div>
+  </nav>
+
+  <!-- Main nav (sidenav) -->
+  <ul id="slide-out" class="sidenav sidenav-fixed">
+    <li class="logo">
+      <a id="logo-container" href="/" class="brand-logo">
+        <img src="{% static 'img/biscuit-logo.png' %}" alt="BiscuIT Logo" style="height: 70px; width:auto;">
       </a>
+    </li>
+    <li class="no-padding">
+      {% include "core/sidenav.html" %}
+    </li>
+  </ul>
+</header>
 
-      <div class="collapse navbar-collapse" id="navbar-main">
-        <ul class="nav navbar-nav ml-auto">
-          {% with menu=NAV_MENU_CORE %}{% include "core/bootstrap4-navbar.html" %}{% endwith %}
-        </ul>
-      </div>
-    </nav>
-  </header>
 
-  <main role="main" class="container">
-    {% include 'core/no_person.html' %}
+<main role="main">
+  {% include 'core/no_person.html' %}
+
+  {#  {% bootstrap_messages %}#}
+
+  <h4>{% block page_title %}{% endblock %}</h4>
 
-    {% bootstrap_messages %}
+  {% block content %}{% endblock %}
+</main>
 
-    <h1>{% block page_title %}{% endblock %}</h1>
 
-    {% block content %}{% endblock %}
-  </main>
-  <footer class="footer text-dark bg-light mt-auto">
-    <div class="container-fluid">
-      <div class="row text-center text-xs-center text-sm-left text-md-left text-dark">
-        {% with menu=FOOTER_MENU_CORE %}{% include "core/footer-menu.html" %}{% endwith %}
+<footer class="page-footer">
+  <div class="container">
+    <div class="row no-margin footer-row-large">
+      <div class="col l6 s12 no-pad-left height-inherit">
+        <p class="white-text valign-bot">
+          {% include 'core/language_form.html' %}
+
+        </p>
       </div>
-      <div class="row">
-        <div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-dark">
-          <p>
-            <a class="font-weight-bold text-dark" href="https://biscuit.edugit.org/">BiscuIT - The Free School Information System</a> © The BiscuIT Team @ <a class="font-weight-bold text-dark" href="https://www.teckids.org">Teckids e.V.</a>
-          </p>
-        </div>
+      <div class="col xl15 l6 offset-xl01 s12 no-pad-right">
+        <ul class="no-margin right">
+          {% include "core/footer-menu.html" %}
+        </ul>
       </div>
     </div>
-  </footer>
-{% endblock %}
+    <div class="row no-margin footer-row-small">
+            <span class="white-text make-it-higher">
+  {% include 'core/language_form.html' %}
+
+            </span>
+      <ul class="no-margin footer-ul">
+        {% include "core/footer-menu.html" %}
+      </ul>
+    </div>
+  </div>
+  <div class="footer-copyright">
+    <div class="container">
+            <span class="left">
+              <a class="blue-text text-lighten-4" href="https://biscuit.edugit.org/">
+                BiscuIT - The Free School Information System
+            </a>
+              © The BiscuIT Team @
+              <a class="blue-text text-lighten-4" href="https://www.teckids.org">
+              Teckids e.V.
+            </a>
+              and
+              <a class="blue-text text-lighten-4" href="https://katharineum-zu-luebeck.de">
+                Katharineum zu Lübeck
+              </a>
+            </span>
+      <span class="right">
+                <span id="doit"></span>
+
+                <a class="blue-text text-lighten-4" href="https://katharineum-zu-luebeck.de/impressum/">Impressum</a>
+                ·
+                <a class="blue-text text-lighten-4" href="https://katharineum-zu-luebeck.de/datenschutzerklaerung/">
+                    Datenschutzerklärung
+                </a>
+            </span>
+    </div>
+  </div>
+</footer>
+
+
+{% include_js "materialize" %}
+<script type="text/javascript" src="{% static 'js/main.js' %}"></script>
+</body>
+</html>
diff --git a/biscuit/core/templates/core/bootstrap4-navbar.html b/biscuit/core/templates/core/bootstrap4-navbar.html
deleted file mode 100644
index 7b2d05db862be7cb1b6e5e7589ec4247af8be971..0000000000000000000000000000000000000000
--- a/biscuit/core/templates/core/bootstrap4-navbar.html
+++ /dev/null
@@ -1,26 +0,0 @@
-{# -*- engine:django -*- #}
-
-{% load menu_generator %}
-
-{% get_menu "NAV_MENU_CORE" as core_menu %}
-{% for item in core_menu %}
-  {% if not item.submenu %}
-    <li class="{% if item.selected %} active {% endif %} nav-item">
-      <a href="{{ item.url }}" class="nav-link"> <i class="{{ item.icon_class }}"></i> {{ item.name }}</a>
-    </li>
-  {% endif %}
-  {% if item.submenu %}
-    <li class="nav-item dropdown">
-      <a class="nav-link dropdown-toggle" data-toggle="dropdown" id="navbarDropdown" aria-expanded="false" role="button" aria-haspopup="true" href="#">
-        {{ item.name }}
-      </a>
-      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
-        {% for menu in item.submenu %}
-          <a class="dropdown-item" href="{{ menu.url }}">
-            {{ menu.name }}
-          </a>
-        {% endfor %}
-      </div>
-    </li>
-  {% endif %}
-{% endfor %}
diff --git a/biscuit/core/templates/core/data_management.html b/biscuit/core/templates/core/data_management.html
index a705f71bc389fa4e844d539f073dba90e8d3c85a..03e6c14b4077b86bad27f83e73d7a59c36316142 100644
--- a/biscuit/core/templates/core/data_management.html
+++ b/biscuit/core/templates/core/data_management.html
@@ -1,25 +1,11 @@
 {# -*- engine:django -*- #}
 {% extends "core/base.html" %}
-{% load bootstrap4 i18n menu_generator %}
+{% load i18n menu_generator %}
 
-{% block bootstrap4_title %}{% blocktrans %}Data management{% endblocktrans %} - {{ block.super }}{% endblock %}
 
 {% block page_title %}{% blocktrans %}Data management{% endblocktrans %}{% endblock %}
 
 {% block content %}
-  {% get_menu "DATA_MANAGEMENT_MENU" as data_menu %}
-  <ul>
-    {% for item in data_menu %}
-      {% if item.submenu %}
-        <li><a href="{{ item.url }}">{{ item.name }}</a></li>
-        <ul>
-          {% for menu in item.submenu %}
-            <li><a href="{{ menu.url }}">{{ menu.name }}</a></li>
-          {% endfor %}
-        </ul>
-      {% else %}
-        <li><a href="{{ item.url }}">{{ item.name }}</a></li>
-      {% endif %}
-    {% endfor %}
-  </ul>
+  {% get_menu "DATA_MANAGEMENT_MENU" as menu %}
+  {% include "core/on_page_menu.html" %}
 {% endblock %}
diff --git a/biscuit/core/templates/core/edit_group.html b/biscuit/core/templates/core/edit_group.html
index 33739a47f4fcfd94002c862de66a1a553cc1576b..d91ed1874c3c3acb26fd50dc492a9a924eaa4aa3 100644
--- a/biscuit/core/templates/core/edit_group.html
+++ b/biscuit/core/templates/core/edit_group.html
@@ -1,19 +1,7 @@
 {# -*- engine:django -*- #}
 
 {% extends "core/base.html" %}
-{% load bootstrap4 i18n %}
-
-{% block bootstrap4_extra_head %}
-  {{ block.super }}
-  {{ edit_group_form.media.css }}
-{% endblock %}
-
-{% block bootstrap4_extra_script %}
-  {{ block.super }}
-  {{ edit_group_form.media.js }}
-{% endblock %}
-
-{% block bootstrap4_title %}{% blocktrans %}Edit group{% endblocktrans %} - {{ block.super }}{% endblock %}
+{% load material_form i18n %}
 
 {% block page_title %}{% blocktrans %}Edit group{% endblocktrans %}{% endblock %}
 
@@ -21,10 +9,8 @@
 
   <form method="post">
     {% csrf_token %}
-    {% bootstrap_form edit_group_form %}
-    <button type="submit" class="btn btn-dark">
-      <span class="mdi mdi-pencil"></span>
-    </button>
+    {% form form=edit_group_form %}{% endform %}
+    {% include "core/save_button.html" %}
   </form>
 
 {% endblock %}
diff --git a/biscuit/core/templates/core/edit_person.html b/biscuit/core/templates/core/edit_person.html
index e698f01c6cf4c3154ae3c9cd4002d9be28be7b5f..359b2c3f5f6a438f61be26f22130026165b61e39 100644
--- a/biscuit/core/templates/core/edit_person.html
+++ b/biscuit/core/templates/core/edit_person.html
@@ -2,31 +2,18 @@
 
 {% extends "core/base.html" %}
 
-{% load bootstrap4 i18n %}
+{% load material_form i18n %}
 
-{% block bootstrap4_title %}{% blocktrans %}Edit person{% endblocktrans %} - {{ block.super}}{% endblock %}
 
 {% block page_title %}{% blocktrans %}Edit person{% endblocktrans %}{% endblock %}
 
-{% block bootstrap4_extra_head %}
-  {{ block.super }}
-  {{ edit_person_form.media }}
-  {{ edit_person_form.media.css }}
-{% endblock %}
-
-{% block bootstrap4_extra_script %}
-  {{ block.super }}
-  {{ edit_person_form.media.js }}
-{% endblock %}
 
 {% block content %}
 
   <form method="post" enctype="multipart/form-data">
     {% csrf_token %}
-    {% bootstrap_form edit_person_form %}
-    <button type="submit" class="btn btn-dark">
-      <span class="mdi mdi-pencil"></span>
-    </button>
+    {% form form=edit_person_form %}{% endform %}
+    {% include "core/save_button.html" %}
   </form>
 
 {% endblock %}
diff --git a/biscuit/core/templates/core/edit_school.html b/biscuit/core/templates/core/edit_school.html
index 8e1b03db0aeef2c080e37387752fc931d84c5b87..d44ebc875eef6e083b3af7f075969d6cf93c7b67 100644
--- a/biscuit/core/templates/core/edit_school.html
+++ b/biscuit/core/templates/core/edit_school.html
@@ -2,25 +2,16 @@
 
 {% extends "core/base.html" %}
 
-{% load bootstrap4 i18n %}
+{% load material_form i18n %}
 
-{% block bootstrap4_title %}{% blocktrans %}Edit school{% endblocktrans %} - {{ block.super}}{% endblock %}
 
 {% block page_title %}{% blocktrans %}Edit school{% endblocktrans %}{% endblock %}
 
-{% block bootstrap4_extra_head %}
-  {{ block.super }}
-  {{ edit_school_form.media }}
-{% endblock %}
 
 {% block content %}
-
   <form method="post" enctype="multipart/form-data">
     {% csrf_token %}
-    {% bootstrap_form edit_school_form %}
-    <button type="submit" class="btn btn-dark">
-      <span class="mdi mdi-pencil"></span>
-    </button>
+    {% form form=edit_school_form %}{% endform %}
+    {% include "core/save_button.html" %}
   </form>
-
 {% endblock %}
diff --git a/biscuit/core/templates/core/edit_schoolterm.html b/biscuit/core/templates/core/edit_schoolterm.html
index 0a5f083b22c227d95348e89c84d8f589fb4db988..23eedf778b9cbe3555a86a5fb67e82ab9595f137 100644
--- a/biscuit/core/templates/core/edit_schoolterm.html
+++ b/biscuit/core/templates/core/edit_schoolterm.html
@@ -2,25 +2,17 @@
 
 {% extends "core/base.html" %}
 
-{% load bootstrap4 i18n %}
+{% load material_form i18n %}
 
-{% block bootstrap4_title %}{% blocktrans %}Edit school term{% endblocktrans %} - {{ block.super}}{% endblock %}
 
 {% block page_title %}{% blocktrans %}Edit school term{% endblocktrans %}{% endblock %}
 
-{% block bootstrap4_extra_head %}
-  {{ block.super }}
-  {{ edit_school_form.media }}
-{% endblock %}
-
 {% block content %}
 
   <form method="post">
     {% csrf_token %}
-    {% bootstrap_form edit_term_form %}
-    <button type="submit" class="btn btn-dark">
-      <span class="mdi mdi-pencil"></span>
-    </button>
+    {% form form=edit_term_form %}{% endform %}
+    {% include "core/save_button.html" %}
   </form>
 
 {% endblock %}
diff --git a/biscuit/core/templates/core/footer-menu.html b/biscuit/core/templates/core/footer-menu.html
index 6866c019fc2c410993d7df279a434a57567389ea..47ca6bf4e62457a7d60a120606d816673b127379 100644
--- a/biscuit/core/templates/core/footer-menu.html
+++ b/biscuit/core/templates/core/footer-menu.html
@@ -8,31 +8,13 @@
 {% for menu in footer_menus %}
   {% if not menu.grouper %}
     {% for item in menu.list %}
-      <div class="col">
-        <h5>{{ item.name }}</h5>
-        <ul class="list-unstyled quick-links">
-          {% for menu in item.submenu %}
-            <li><a class="font-weight-bold text-dark" href="{{ menu.url }}"><span class="mdi mdi-chevron-double-right"></span> {{ menu.name }}</a></li>
-          {% endfor %}
-        </ul>
-      </div>
+      <a class="blue-text text-lighten-4 btn-flat" href="{{ item.url }}">
+        {% if item.icon %}
+          <i class="material-icons footer-icon left">{{ item.icon }}</i>
+        {% endif %}
+        {{ item.name }}
+      </a>
     {% endfor %}
   {% endif %}
 {% endfor %}
 
-{% for menu in footer_menus %}
-  {% if menu.grouper %}
-    <div class="col">
-      <h5>{% blocktrans %}Assorted{% endblocktrans %}</h5>
-      <ul class="list-unstyled quick-links">
-        {% for item in menu.list %}
-          <li><a class="font-weight-bold text-dark" href="{{ item.url }}"><span class="mdi mdi-chevron-double-right"></span> {{ item.name }}</a></li>
-        {% endfor %}
-      </ul>
-    </div>
-  {% endif %}
-{% endfor %}
-
-<div class="col">
-  {% include 'core/language_form.html' %}
-</div>
diff --git a/biscuit/core/templates/core/index.html b/biscuit/core/templates/core/index.html
index d96a3e57fedc5fe2038f520818e729d3c6d18b80..244020382bf7e4bd811b6030822f884699153104 100644
--- a/biscuit/core/templates/core/index.html
+++ b/biscuit/core/templates/core/index.html
@@ -2,7 +2,7 @@
 
 {% extends "core/base.html" %}
 
-{% load bootstrap4 i18n %}
+{% load i18n %}
 
 {% block page_title %}
   {% blocktrans %}
@@ -11,7 +11,7 @@
 {% endblock %}
 
 {% block content %}
-  <div class="jumbotron">
+  <div class="flow-text">
     <p>
       {% blocktrans %}
         BiscuIT is a web-based school information system (SIS) which can be used to
diff --git a/biscuit/core/templates/core/language_form.html b/biscuit/core/templates/core/language_form.html
index df75e3d17e5ef2c47766b88cd3989ce53caffdf4..e2ad9fab677925ed83c2c99be174cdc7fd13d696 100644
--- a/biscuit/core/templates/core/language_form.html
+++ b/biscuit/core/templates/core/language_form.html
@@ -2,22 +2,17 @@
 
 {% load i18n %}
 
-<h5>{% blocktrans %}Language{% endblocktrans %}</h5>
 
 <form action="{% url 'set_language' %}" method="post">
   {% csrf_token %}
   <input name="next" type="hidden" value="{{ request.get_full_path }}">
-  <select name="language" onchange="this.form.submit()" class="form-control bg-light text-dark border-2 border-dark">
-    {% get_current_language as LANGUAGE_CODE %}
-    {% get_available_languages as LANGUAGES %}
-    {% get_language_info_list for LANGUAGES as languages %}
-    {% for language in languages %}
-      <option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected{% endif %}>
-        {{ language.name_local }} ({{ language.code }})
-      </option>
-    {% endfor %}
-  </select>
-  <noscript>
-    <input type="submit" value="&gt;">
-  </noscript>
+
+  {% get_current_language as LANGUAGE_CODE %}
+  {% get_available_languages as LANGUAGES %}
+  {% get_language_info_list for LANGUAGES as languages %}
+  {% for language in languages %}
+    <button type="submit" value="{{ language.code }}" name="language" class="blue-text text-lighten-4 btn-flat {% if language == LANGUAGE_CODE %} disabled {% endif %}">
+      {{ language.code }}
+    </button>
+  {% endfor %}
 </form>
diff --git a/biscuit/core/templates/core/no_person.html b/biscuit/core/templates/core/no_person.html
index a970d076ada41986047225cd8f6d9f220045e5a1..b35201f70fd787edeeffd4fe77b6f38006b3d388 100644
--- a/biscuit/core/templates/core/no_person.html
+++ b/biscuit/core/templates/core/no_person.html
@@ -3,18 +3,17 @@
 {% load i18n %}
 
 {% if not user.person and not user.is_anonymous %}
-  <div class="alert alert-danger" role="alert">
-    <h2 class="alert-heading">
-      {% blocktrans %}
-        You are not linked to a person
-      {% endblocktrans %}
-    </h2>
-    <p>
-      {% blocktrans %}
-        Your user account is not linked to a person. This means you
-        cannot access any school-related information. Please contact
-        the managers of BiscuIT at your school.
-      {% endblocktrans %}
-    </p>
+  <div class="alert error">
+    <div>
+      <i class="material-icons left">error</i>
+
+      <p>
+        {% blocktrans %}
+          Your user account is not linked to a person. This means you
+          cannot access any school-related information. Please contact
+          the managers of BiscuIT at your school.
+        {% endblocktrans %}
+      </p>
+    </div>
   </div>
 {% endif %}
diff --git a/biscuit/core/templates/core/on_page_menu.html b/biscuit/core/templates/core/on_page_menu.html
new file mode 100644
index 0000000000000000000000000000000000000000..0c036ec460af4023d96eb7afe64dbcc25d2e3387
--- /dev/null
+++ b/biscuit/core/templates/core/on_page_menu.html
@@ -0,0 +1,12 @@
+<div class="collection">
+  {% for item in menu %}
+    {% if item.submenu %}
+      <a href="{{ item.url }}" class="collection-header">{{ item.name }}</a>
+      {% for menu in item.submenu %}
+        <a href="{{ menu.url }}" class="collection-item">{{ menu.name }}</a>
+      {% endfor %}
+    {% else %}
+      <a href="{{ item.url }}" class="collection-item">{{ item.name }}</a>
+    {% endif %}
+  {% endfor %}
+</div>
diff --git a/biscuit/core/templates/core/save_button.html b/biscuit/core/templates/core/save_button.html
new file mode 100644
index 0000000000000000000000000000000000000000..d0b5cf16bb96800f09f961bbf5ea47b533da7f70
--- /dev/null
+++ b/biscuit/core/templates/core/save_button.html
@@ -0,0 +1,4 @@
+{% load i18n %}
+<button type="submit" class="btn waves-effect waves-light green">
+  <i class="material-icons left">save</i> {% trans "Save" %}
+</button>
diff --git a/biscuit/core/templates/core/school_management.html b/biscuit/core/templates/core/school_management.html
index aada9fd12189bb4025638c8ae799b946c01ea916..bfba2af5cd4fbe7944c71c1fe13014f28dfc0ef7 100644
--- a/biscuit/core/templates/core/school_management.html
+++ b/biscuit/core/templates/core/school_management.html
@@ -1,25 +1,11 @@
 {# -*- engine:django -*- #}
 {% extends "core/base.html" %}
-{% load bootstrap4 i18n menu_generator %}
+{% load i18n menu_generator %}
 
-{% block bootstrap4_title %}{% blocktrans %}School management{% endblocktrans %} - {{ block.super }}{% endblock %}
 
 {% block page_title %}{% blocktrans %}School management{% endblocktrans %}{% endblock %}
 
 {% block content %}
-  {% get_menu "SCHOOL_MANAGEMENT_MENU" as school_menu %}
-  <ul>
-    {% for item in school_menu %}
-      {% if item.submenu %}
-        <li><a href="{{ item.url }}">{{ item.name }}</a></li>
-        <ul>
-          {% for menu in item.submenu %}
-            <li><a href="{{ menu.url }}">{{ menu.name }}</a></li>
-          {% endfor %}
-        </ul>
-      {% else %}
-        <li><a href="{{ item.url }}">{{ item.name }}</a></li>
-      {% endif %}
-    {% endfor %}
-  </ul>
+  {% get_menu "SCHOOL_MANAGEMENT_MENU" as menu %}
+  {% include "core/on_page_menu.html" %}
 {% endblock %}
diff --git a/biscuit/core/templates/core/sidenav.html b/biscuit/core/templates/core/sidenav.html
new file mode 100644
index 0000000000000000000000000000000000000000..80acaa19420d45f58a03dfe7a21a18497a61cca4
--- /dev/null
+++ b/biscuit/core/templates/core/sidenav.html
@@ -0,0 +1,51 @@
+{# -*- engine:django -*- #}
+
+{% load menu_generator %}
+
+{% get_menu "NAV_MENU_CORE" as core_menu %}
+
+<ul class="collapsible collapsible-accordion">
+
+  {% for item in core_menu %}
+    {% if not item.submenu %}
+      <li class="{% if item.selected %} active {% endif %}">
+        <a href="{{ item.url }}">
+          {% if item.icon_class %}
+            <i class="{{ item.icon_class }}"></i>
+          {% elif item.icon %}
+            <i class="material-icons">{{ item.icon }}</i>
+          {% endif %}
+          {{ item.name }}
+        </a>
+      </li>
+    {% endif %}
+    {% if item.submenu %}
+      <li class="bold {% if item.selected %} active {% endif %}">
+        <a class="collapsible-header waves-effect waves-primary" href="{{ item.url|default:"#" }}">
+          {% if item.icon_class %}
+            <i class="{{ item.icon_class }}"></i>
+          {% elif item.icon %}
+            <i class="material-icons">{{ item.icon }}</i>
+          {% endif %}
+          {{ item.name }}
+        </a>
+        <div class="collapsible-body">
+          <ul>
+            {% for menu in item.submenu %}
+              <li class="{% if menu.selected %} active {% endif %}">
+                <a class="" href="{{ menu.url }}">
+                  {% if menu.icon_class %}
+                    <i class="{{ menu.icon_class }}"></i>
+                  {% elif menu.icon %}
+                    <i class="material-icons">{{ menu.icon }}</i>
+                  {% endif %}
+                  {{ menu.name }}
+                </a>
+              </li>
+            {% endfor %}
+          </ul>
+        </div>
+      </li>
+    {% endif %}
+  {% endfor %}
+</ul>
diff --git a/biscuit/core/templates/core/system_status.html b/biscuit/core/templates/core/system_status.html
index 45b95d8406c8971a23df21f4246276a88ffcd158..9f74944e462bb97edac0d72c1acc7d7e38201f9e 100644
--- a/biscuit/core/templates/core/system_status.html
+++ b/biscuit/core/templates/core/system_status.html
@@ -2,46 +2,64 @@
 {% extends "core/base.html" %}
 {% load i18n %}
 
-{% block bootstrap4_title %}{% blocktrans %}System status{% endblocktrans %} - {{ block.super }}{% endblock %}
+{#{% block bootstrap4_title %}{% blocktrans %}System status{% endblocktrans %} - {{ block.super }}{% endblock %}#}
 
 {% block page_title %}{% blocktrans %}System status{% endblocktrans %}{% endblock %}
 
 {% block content %}
   <div class="card">
-    <div class="card-header bg-light text-dark">
-      {% blocktrans %}System checks{% endblocktrans %}
-    </div>
-    <ul class="list-group list-group-flush">
-      <li class="list-group-item d-flex justify-content-between align-items-center">
-       {% if maintenance_mode %}
-        <div>
-          <p>{% blocktrans %}Maintenance mode enabled{% endblocktrans %}</p>
-          <p class="small">{% blocktrans%}Only admin and visitors from internal IPs can access the site.{% endblocktrans %}</p>
-        </div>
-        <span class="badge badge-danger mdi mdi-power"><a href="{% url 'maintenance_mode_off' %}"></a></span>
-       {% else %}
-        <div>
-          <p>{% blocktrans %}Maintenance mode disabled{% endblocktrans %}</p>
-          <p class="small">{% blocktrans%}Everyone can access the site.{% endblocktrans %}</p>
-        </div>
-        <span class="badge badge-success mdi mdi-power"><a href="{% url 'maintenance_mode_on' %}"></a></span>
-       {% endif %}
-      </li>
-      <li class="list-group-item d-flex justify-content-between align-items-center">
-       {% if DEBUG %}
-        <div>
-          <p>{% blocktrans %}Debug mode enabled{% endblocktrans %}</p>
-          <p class="small">{% blocktrans%}The web server throws back debug information on errors. Do not use in production!{% endblocktrans %}</p>
-        </div>
-        <span class="badge badge-danger mdi mdi-power"> </span>
-       {% else %}
-        <div>
-          <p>{% blocktrans %}Debug mode disabled{% endblocktrans %}</p>
-          <p class="small">{% blocktrans%}Debug mode is disabled. Default error pages are displayed on errors.{% endblocktrans %}</p>
-        </div>
-        <span class="badge badge-success mdi mdi-power"> </span>
+    <div class="card-content">
+      <span class="card-title"> {% blocktrans %}System checks{% endblocktrans %}</span>
+
+      {# Maintenance mode #}
+      <div class="row">
+        {% if maintenance_mode %}
+          <a class="btn btn-flat btn-flat-medium right waves-effect waves-red no-padding"
+             href="{% url 'maintenance_mode_off' %}"><i
+                  class="material-icons small red-text center">power_settings_new</i></a>
+          <div>
+            <p class="flow-text">{% blocktrans %}Maintenance mode enabled{% endblocktrans %}</p>
+            <p class="grey-text">
+              {% blocktrans %}
+                Only admin and visitors from internal IPs can access thesite.
+              {% endblocktrans %}
+            </p>
+          </div>
+          <span class="badge badge-danger mdi mdi-power"><a href="{% url 'maintenance_mode_off' %}"></a></span>
+        {% else %}
+          <a class="btn btn-flat btn-flat-medium right waves-effect waves-green no-padding"
+             href="{% url 'maintenance_mode_on' %}"><i
+                  class="material-icons small green-text center">power_settings_new</i></a>
+          <div>
+            <p class="flow-text">{% blocktrans %}Maintenance mode disabled{% endblocktrans %}</p>
+            <p class="grey-text">{% blocktrans %}Everyone can access the site.{% endblocktrans %}</p>
+          </div>
         {% endif %}
-      </li>
-    </ul>
+      </div>
+
+      {# Debug mode #}
+      <div class="row">
+        {% if DEBUG %}
+          <i class="material-icons small red-text right">power_settings_new</i>
+          <div>
+            <p class="flow-text">{% blocktrans %}Debug mode enabled{% endblocktrans %}</p>
+            <p class="grey-text">
+              {% blocktrans %}
+                The web server throws back debug information on errors. Do not use in production!
+              {% endblocktrans %}</p>
+          </div>
+        {% else %}
+          <i class="material-icons small green-text right">power_settings_new</i>
+          <div>
+            <p class="flow-text">{% blocktrans %}Debug mode disabled{% endblocktrans %}</p>
+            <p class="grey-text">
+              {% blocktrans %}
+                Debug mode is disabled. Default error pages are displayed on errors.
+              {% endblocktrans %}
+            </p>
+          </div>
+        {% endif %}
+      </div>
+    </div>
   </div>
 {% endblock %}
diff --git a/biscuit/core/templates/impersonate/list_users.html b/biscuit/core/templates/impersonate/list_users.html
index d46c57c98b7a67ef59c1d01f6a6e1bf7704fd380..aff2f8660ac374cebb1bbeff646bc038aee9e5f1 100644
--- a/biscuit/core/templates/impersonate/list_users.html
+++ b/biscuit/core/templates/impersonate/list_users.html
@@ -2,7 +2,7 @@
 {# Derived from the original template in django-impersonate #}
 
 {% extends "core/base.html" %}
-{% load bootstrap4 i18n %}
+{% load i18n %}
 
 {% block page_title %}
   {% blocktrans %}Impersonate user{% endblocktrans %}
@@ -10,11 +10,13 @@
 
 {% block content %}
   {% if page.object_list %}
-    <ul>
+    <div class="collection">
       {% for user in page.object_list %}
-        <li><a href="{% url 'impersonate-start' user.pk %}{{redirect}}">{{ user }}</a> - Impersonate</li>
+        <a class="collection-item" href="{% url 'impersonate-start' user.pk %}{{ redirect }}">
+          {{ user }}
+        </a>
       {% endfor %}
-    </ul>
+    </div>
   {% endif %}
 
   {% if page.has_previous %}
diff --git a/biscuit/core/templates/registration/login.html b/biscuit/core/templates/registration/login.html
index 155594f3b528c6cbd034e705cd61b5649903cd59..e38f93a893ed8c8ad9a1a65db9e6ed3b3666b029 100644
--- a/biscuit/core/templates/registration/login.html
+++ b/biscuit/core/templates/registration/login.html
@@ -1,24 +1,24 @@
 {# -*- engine:django -*- #}
 {% extends "core/base.html" %}
-{% load bootstrap4 i18n %}
+{% load material_form i18n %}
 
 {% block content %}
- {% if next %}
-  {% if user.is_authenticated %}
-   <p>
-    Your account doesn't have access to this page. To proceed,
-    please login with an account that has access.
-   </p>
-  {% else %}
-   <p>Please login to see this page.</p>
+  {% if next %}
+    {% if user.is_authenticated %}
+      <p>
+        Your account doesn't have access to this page. To proceed,
+        please login with an account that has access.
+      </p>
+    {% else %}
+      <p>Please login to see this page.</p>
+    {% endif %}
   {% endif %}
- {% endif %}
 
- <form method="post" action="{% url 'login' %}">
-  {% csrf_token %}
-  {% bootstrap_form form %}
-  <button type="submit" class="btn btn-dark">
-    {% blocktrans %}Login{% endblocktrans %}
-  </button>  
- </form>
+  <form method="post" action="{% url 'login' %}">
+    {% csrf_token %}
+    {% form form=form %}{% endform %}
+    <button type="submit" class="btn waves-effect waves-light green">
+      {% blocktrans %}Login{% endblocktrans %}
+    </button>
+  </form>
 {% endblock %}
diff --git a/biscuit/core/templates/two_factor/_wizard_actions.html b/biscuit/core/templates/two_factor/_wizard_actions.html
index c6bfcce94adc95c88a610bc5b9ea95f9fa6778e3..973b2317a2002b1b67620e0a7b598f76aa36751f 100644
--- a/biscuit/core/templates/two_factor/_wizard_actions.html
+++ b/biscuit/core/templates/two_factor/_wizard_actions.html
@@ -1,15 +1,25 @@
 {% load i18n %}
 
 {% if cancel_url %}
-  <a href="{{ cancel_url }}"
-     class="pull-right btn btn-dark">{% trans "Cancel" %}</a>
+  <a href="{{ cancel_url }}" class="btn red waves-effect waves-light">
+  <i class="material-icons left">cancel</i>
+    {% trans "Cancel" %}
+  </a>
 {% endif %}
 {% if wizard.steps.prev %}
   <button name="wizard_goto_step" type="submit"
           value="{{ wizard.steps.prev }}"
-          class="btn btn-dark">{% trans "Back" %}</button>
+          class="btn grey waves-effect waves-light">
+  <i class="material-icons left">arrow_back</i>
+    {% trans "Back" %}
+  </button>
 {% else %}
-  <button disabled name="" type="button"
-          class="btn btn-disabled">{% trans "Back" %}</button>
+  <button disabled name="" type="button" class="btn grey disabled">
+    <i class="material-icons left">arrow_back</i>
+    {% trans "Back" %}
+  </button>
 {% endif %}
-<button type="submit" class="btn btn-dark">{% trans "Next" %}</button>
+<button type="submit" class="btn green waves-effect waves-light">
+    <i class="material-icons right">arrow_forward</i>
+  {% trans "Next" %}
+</button>
diff --git a/biscuit/core/templates/two_factor/_wizard_forms.html b/biscuit/core/templates/two_factor/_wizard_forms.html
index a5fd6e55b2d6c1afffe5f93df91b2edb6ce3ee32..75071a9dd366b4bea11a050c9cad1ffdf3d26889 100644
--- a/biscuit/core/templates/two_factor/_wizard_forms.html
+++ b/biscuit/core/templates/two_factor/_wizard_forms.html
@@ -1,6 +1,4 @@
-{% load bootstrap4 %}
+{% load material_form %}
 
-<div class="col-sm-12 col-md-12">
-  {% bootstrap_form wizard.management_form %}
-  {% bootstrap_form wizard.form %}
-</div>
+  {% form form=wizard.management_form %}{% endform %}
+  {% form form=wizard.form %}{% endform %}
diff --git a/biscuit/core/templates/two_factor/core/backup_tokens.html b/biscuit/core/templates/two_factor/core/backup_tokens.html
index 1e64a9e4405ece599e35f976abd4fa8461c10809..29ded93974b9ab7bf54bdb055c02f643b48be315 100644
--- a/biscuit/core/templates/two_factor/core/backup_tokens.html
+++ b/biscuit/core/templates/two_factor/core/backup_tokens.html
@@ -2,27 +2,47 @@
 {% load i18n %}
 
 {% block content %}
-  <h1>{% block title %}{% trans "Backup Tokens" %}{% endblock %}</h1>
-  <p>{% blocktrans %}Backup tokens can be used when your primary and backup
-      phone numbers aren't available. The backup tokens below can be used
-      for login verification. If you've used up all your backup tokens, you
-      can generate a new set of backup tokens. Only the backup tokens shown
-      below will be valid.{% endblocktrans %}</p>
+  <h4>{% block title %}{% trans "Backup Tokens" %}{% endblock %}</h4>
+
+  <div class="alert info">
+    <p>
+      <i class="material-icons left">info</i>
+      {% blocktrans %}
+        Backup tokens can be used when your primary and backup
+        phone numbers aren't available. The backup tokens below can be used
+        for login verification. If you've used up all your backup tokens, you
+        can generate a new set of backup tokens. Only the backup tokens shown
+        below will be valid.
+      {% endblocktrans %}
+    </p>
+  </div>
 
   {% if device.token_set.count %}
-    <ul>
+    <ul class="collection">
       {% for token in device.token_set.all %}
-        <li>{{ token.token }}</li>
+        <li class="collection-item">{{ token.token }}</li>
       {% endfor %}
     </ul>
-    <p>{% blocktrans %}Print these tokens and keep them somewhere safe.{% endblocktrans %}</p>
+    <div class="alert warning">
+      <p>
+        <i class="material-icons left">warning</i>
+        {% blocktrans %}
+          Print these tokens and keep them somewhere safe.
+        {% endblocktrans %}
+      </p>
+    </div>
   {% else %}
-    <p>{% trans "You don't have any backup codes yet." %}</p>
+    <p class="flow-text">{% trans "You don't have any backup codes yet." %}</p>
   {% endif %}
 
   <form method="post">{% csrf_token %}{{ form }}
-    <a href="{% url 'two_factor:profile'%}"
-       class="pull-right btn btn-dark">{% trans "Back to Account Security" %}</a>
-    <button class="btn btn-dark" type="submit">{% trans "Generate Tokens" %}</button>
+    <a href="{% url 'two_factor:profile' %}" class="btn primary waves-effect waves-light">
+      <i class="material-icons left">arrow_back</i>
+      {% trans "Back to Account Security" %}
+    </a>
+    <button class="btn green waves-effect waves-light" type="submit">
+      <i class="material-icons left">vpn_key</i>
+      {% trans "Generate Tokens" %}
+    </button>
   </form>
 {% endblock %}
diff --git a/biscuit/core/templates/two_factor/core/login.html b/biscuit/core/templates/two_factor/core/login.html
index 083443d305d2916c04360d10b158d3c190171478..3d789b38dbc403dcd10d42e01082615de79c2e0c 100644
--- a/biscuit/core/templates/two_factor/core/login.html
+++ b/biscuit/core/templates/two_factor/core/login.html
@@ -3,28 +3,36 @@
 {% load i18n two_factor %}
 
 {% block content %}
-  <h1>{% block title %}{% trans "Login" %}{% endblock %}</h1>
-
-  {% if wizard.steps.current == 'auth' %}
-    <p>{% blocktrans %}Enter your credentials.{% endblocktrans %}</p>
-  {% elif wizard.steps.current == 'token' %}
-    {% if device.method == 'call' %}
-      <p>{% blocktrans %}We are calling your phone right now, please enter the
-        digits you hear.{% endblocktrans %}</p>
-    {% elif device.method == 'sms' %}
-      <p>{% blocktrans %}We sent you a text message, please enter the tokens we
-        sent.{% endblocktrans %}</p>
-    {% else %}
-      <p>{% blocktrans %}Please enter the tokens generated by your token
-        generator.{% endblocktrans %}</p>
-    {% endif %}
-  {% elif wizard.steps.current == 'backup' %}
-    <p>{% blocktrans %}Use this form for entering backup tokens for logging in.
-      These tokens have been generated for you to print and keep safe. Please
-      enter one of these backup tokens to login to your account.{% endblocktrans %}</p>
-  {% endif %}
+  <h4>{% trans "Login" %}</h4>
+
+  <div class="alert primary">
+    <p>
+      <i class="material-icons left">info</i>
+
+      {% if wizard.steps.current == 'auth' %}
+        {% blocktrans %}Enter your credentials.{% endblocktrans %}
+      {% elif wizard.steps.current == 'token' %}
+        {% if device.method == 'call' %}
+          {% blocktrans %}We are calling your phone right now, please enter the
+            digits you hear.{% endblocktrans %}
+        {% elif device.method == 'sms' %}
+          {% blocktrans %}We sent you a text message, please enter the tokens we
+            sent.{% endblocktrans %}
+        {% else %}
+          {% blocktrans %}Please enter the tokens generated by your token
+            generator.{% endblocktrans %}
+        {% endif %}
+      {% elif wizard.steps.current == 'backup' %}
+        {% blocktrans %}Use this form for entering backup tokens for logging in.
+          These tokens have been generated for you to print and keep safe. Please
+          enter one of these backup tokens to login to your account.{% endblocktrans %}
+      {% endif %}
+    </>
+  </div>
 
-  <form action="" method="post">{% csrf_token %}
+
+  <form action="" method="post">
+    {% csrf_token %}
     {% include "two_factor/_wizard_forms.html" %}
 
     {# hidden submit button to enable [enter] key #}
@@ -34,20 +42,21 @@
       <p>{% trans "Or, alternatively, use one of your backup phones:" %}</p>
       <p>
         {% for other in other_devices %}
-        <button name="challenge_device" value="{{ other.persistent_id }}"
-                class="btn btn-dark btn-block" type="submit">
-          {{ other|device_action }}
-        </button>
-      {% endfor %}</p>
+          <button name="challenge_device" value="{{ other.persistent_id }}"
+                  class="btn" type="submit">
+            {{ other|device_action }}
+          </button>
+        {% endfor %}</p>
     {% endif %}
     {% if backup_tokens %}
       <p>{% trans "As a last resort, you can use a backup token:" %}</p>
       <p>
         <button name="wizard_goto_step" type="submit" value="backup"
-                class="btn btn-dark btn-block">{% trans "Use Backup Token" %}</button>
+                class="btn">{% trans "Use Backup Token" %}</button>
       </p>
     {% endif %}
 
-    {% include "two_factor/_wizard_actions.html" %}
+    <button type="submit" class="btn green waves-effect waves-light">{% trans "Login" %}</button>
+
   </form>
 {% endblock %}
diff --git a/biscuit/core/templates/two_factor/core/setup.html b/biscuit/core/templates/two_factor/core/setup.html
index 18fcaade6a39035a6af9c03aa58028b7d09c3d79..54f4faa536cd9473292bb732bbc7e68c6632ba13 100644
--- a/biscuit/core/templates/two_factor/core/setup.html
+++ b/biscuit/core/templates/two_factor/core/setup.html
@@ -2,49 +2,83 @@
 {% load i18n %}
 
 {% block content %}
-  <h1>{% block title %}{% trans "Enable Two-Factor Authentication" %}{% endblock %}</h1>
+  <h4>{% block title %}{% trans "Enable Two-Factor Authentication" %}{% endblock %}</h4>
   {% if wizard.steps.current == 'welcome' %}
-    <p>{% blocktrans %}You are about to take your account security to the
+    <p>
+      {% blocktrans %}
+        You are about to take your account security to the
         next level. Follow the steps in this wizard to enable two-factor
-        authentication.{% endblocktrans %}</p>
+        authentication.
+      {% endblocktrans %}
+    </p>
   {% elif wizard.steps.current == 'method' %}
-    <p>{% blocktrans %}Please select which authentication method you would
-        like to use.{% endblocktrans %}</p>
+    <p>
+      {% blocktrans %}
+        Please select which authentication method you would like to use.
+      {% endblocktrans %}
+    </p>
   {% elif wizard.steps.current == 'generator' %}
-    <p>{% blocktrans %}To start using a token generator, please use your
+    <p>
+      {% blocktrans %}
+        To start using a token generator, please use your
         smartphone to scan the QR code below. For example, use Google
         Authenticator. Then, enter the token generated by the app.
-        {% endblocktrans %}</p>
-    <p><img src="{{ QR_URL }}" alt="QR Code" /></p>
+      {% endblocktrans %}
+    </p>
+    <p>
+      <img src="{{ QR_URL }}" alt="QR Code">
+    </p>
   {% elif wizard.steps.current == 'sms' %}
-    <p>{% blocktrans %}Please enter the phone number you wish to receive the
-      text messages on. This number will be validated in the next step.
-      {% endblocktrans %}</p>
+    <p>
+      {% blocktrans %}
+        Please enter the phone number you wish to receive the
+        text messages on. This number will be validated in the next step.
+      {% endblocktrans %}
+    </p>
   {% elif wizard.steps.current == 'call' %}
-    <p>{% blocktrans %}Please enter the phone number you wish to be called on.
-      This number will be validated in the next step. {% endblocktrans %}</p>
+    <p>
+      {% blocktrans %}
+        Please enter the phone number you wish to be called on.
+        This number will be validated in the next step.
+      {% endblocktrans %}
+    </p>
   {% elif wizard.steps.current == 'validation' %}
     {% if challenge_succeeded %}
       {% if device.method == 'call' %}
-        <p>{% blocktrans %}We are calling your phone right now, please enter the
-          digits you hear.{% endblocktrans %}</p>
+        <p>
+          {% blocktrans %}
+            We are calling your phone right now, please enter the digits you hear.
+          {% endblocktrans %}
+        </p>
       {% elif device.method == 'sms' %}
-        <p>{% blocktrans %}We sent you a text message, please enter the tokens we
-          sent.{% endblocktrans %}</p>
+        <p>
+          {% blocktrans %}
+            We sent you a text message, please enter the tokens we sent.
+          {% endblocktrans %}
+        </p>
       {% endif %}
     {% else %}
-      <p class="alert alert-warning" role="alert">{% blocktrans %}We've
-        encountered an issue with the selected authentication method. Please
-        go back and verify that you entered your information correctly, try
-        again, or use a different authentication method instead. If the issue
-        persists, contact the site administrator.{% endblocktrans %}</p>
+      <p class="alert alert-warning" role="alert">
+        {% blocktrans %}
+          We've encountered an issue with the selected authentication method. Please
+          go back and verify that you entered your information correctly, try
+          again, or use a different authentication method instead. If the issue
+          persists, contact the site administrator.
+        {% endblocktrans %}
+      </p>
     {% endif %}
   {% elif wizard.steps.current == 'yubikey' %}
-    <p>{% blocktrans %}To identify and verify your YubiKey, please insert a
-      token in the field below. Your YubiKey will be linked to your
-      account.{% endblocktrans %}</p>
+    <p>
+      {% blocktrans %}
+        To identify and verify your YubiKey, please insert a
+        token in the field below. Your YubiKey will be linked to your
+        account.
+      {% endblocktrans %}
+    </p>
   {% endif %}
-  <form action="" method="post">{% csrf_token %}
+  <form action="" method="post">
+    {% csrf_token %}
+
     {% include "two_factor/_wizard_forms.html" %}
 
     {# hidden submit button to enable [enter] key #}
diff --git a/biscuit/core/templates/two_factor/core/setup_complete.html b/biscuit/core/templates/two_factor/core/setup_complete.html
index 762423f006c10360aac056c7013eab4367f39af7..f494a4f25ae175295cfb188f2572861ad0dc76da 100644
--- a/biscuit/core/templates/two_factor/core/setup_complete.html
+++ b/biscuit/core/templates/two_factor/core/setup_complete.html
@@ -2,24 +2,51 @@
 {% load i18n %}
 
 {% block content %}
-  <h1>{% block title %}{% trans "Enable Two-Factor Authentication" %}{% endblock %}</h1>
+  <h4>{% block title %}{% trans "Enable Two-Factor Authentication" %}{% endblock %}</h4>
 
-  <p>{% blocktrans %}Congratulations, you've successfully enabled two-factor
-      authentication.{% endblocktrans %}</p>
+  <div class="alert success">
+    <p>
+      <i class="material-icons left">check_circle</i>
+      {% blocktrans %}
+        Congratulations, you've successfully enabled two-factor authentication.
+      {% endblocktrans %}
+    </p>
+  </div>
 
   {% if not phone_methods %}
-      <a href="{% url 'two_factor:profile' %}" class="pull-left btn btn-dark">{% trans "Back to Profile" %}</a>
-      <a href="{% url 'two_factor:backup_tokens' %}" class="pull-right btn btn-dark">{% trans "Generate backup codes" %}</a>
+    <a href="{% url 'two_factor:profile' %}"
+       class="btn btn-primary waves-effect waves-light">
+      <i class="material-icons left">arrow_back</i>
+      {% trans "Back to Profile" %}
+    </a>
+    <a href="{% url 'two_factor:backup_tokens' %}" class="btn green waves-effect waves-light">
+      <i class="material-icons left">vpn_key</i>
+      {% trans "Generate backup codes" %}
+    </a>
   {% else %}
-    <p>{% blocktrans %}However, it might happen that you don't have access to
-      your primary token device. To enable account recovery, generate backup codes
-      or add a phone number.{% endblocktrans %}</p>
+    <div class="warning">
+      <p>
+        <i class="material-icons left">warning</i>
+        {% blocktrans %}
+          However, it might happen that you don't have access to
+          your primary token device. To enable account recovery, generate backup codes
+          or add a phone number.
+        {% endblocktrans %}
+      </p>
+    </div>
     <a href="{% url 'two_factor:profile' %}"
-        class="pull-right btn btn-dark">{% trans "Back to Profile" %}</a>
-    <a href="{% url 'two_factor:backup_tokens' %}"
-        class="pull-right btn btn-dark">{% trans "Generate backup codes" %}</a>
-    <a href="{% url 'two_factor:phone_create' %}"
-        class="btn btn-success">{% trans "Add Phone Number" %}</a>
+       class="btn btn-primary waves-effect waves-light">
+      <i class="material-icons left">arrow_back</i>
+      {% trans "Back to Profile" %}
+    </a>
+    <a href="{% url 'two_factor:backup_tokens' %}" class="btn green waves-effect waves-light">
+      <i class="material-icons left">vpn_key</i>
+      {% trans "Generate backup codes" %}
+    </a>
+    <a href="{% url 'two_factor:phone_create' %}" class="btn green waves-effect waves-light">
+      <i class="material-icons left">add</i>
+      {% trans "Add Phone Number" %}
+    </a>
   {% endif %}
 
 {% endblock %}
diff --git a/biscuit/core/templates/two_factor/profile/profile.html b/biscuit/core/templates/two_factor/profile/profile.html
index f3d3afcc8164578423f09feb3b1138701104d094..b74c62223a533884d995435ebf022a465ba02465 100644
--- a/biscuit/core/templates/two_factor/profile/profile.html
+++ b/biscuit/core/templates/two_factor/profile/profile.html
@@ -2,7 +2,9 @@
 {% load i18n two_factor %}
 
 {% block content %}
-  <h1>{% block title %}{% trans "Account Security" %}{% endblock %}</h1>
+  <h4>
+    {% block title %}{% trans "Account Security" %}{% endblock %}
+  </h4>
 
   {% if default_device %}
     {% if default_device_type == 'TOTPDevice' %}
@@ -14,27 +16,30 @@
     {% endif %}
 
     {% if available_phone_methods %}
-      <h2>{% trans "Backup Phone Numbers" %}</h2>
+      <h5>{% trans "Backup Phone Numbers" %}</h5>
       <p>{% blocktrans %}If your primary method is not available, we are able to
         send backup tokens to the phone numbers listed below.{% endblocktrans %}</p>
-      <ul>
+      <ul class="collection">
         {% for phone in backup_phones %}
-          <li>
+          <li class="collection-item">
             {{ phone|device_action }}
             <form method="post" action="{% url 'two_factor:phone_delete' phone.id %}"
                   onsubmit="return confirm('Are you sure?')">
               {% csrf_token %}
-              <button class="btn btn-warning"
-                      type="submit">{% trans "Unregister" %}</button>
+              <button class="btn-flat red-text waves-effect waves-red" type="submit">{% trans "Unregister" %}</button>
             </form>
           </li>
         {% endfor %}
       </ul>
-      <p><a href="{% url 'two_factor:phone_create' %}"
-        class="btn btn-info">{% trans "Add Phone Number" %}</a></p>
+      <p>
+        <a href="{% url 'two_factor:phone_create' %}" class="btn green waves-effect waves-light">
+          <i class="material-icons left">add</i>
+          {% trans "Add Phone Number" %}
+        </a>
+      </p>
     {% endif %}
 
-    <h2>{% trans "Backup Tokens" %}</h2>
+    <h5>{% trans "Backup Tokens" %}</h5>
     <p>
       {% blocktrans %}If you don't have any device with you, you can access
         your account using backup tokens.{% endblocktrans %}
@@ -44,20 +49,38 @@
         You have {{ counter }} backup tokens remaining.
       {% endblocktrans %}
     </p>
-    <p><a href="{% url 'two_factor:backup_tokens' %}"
-          class="btn btn-dark">{% trans "Show Codes" %}</a></p>
+    <p>
+      <a href="{% url 'two_factor:backup_tokens' %}" class="btn primary waves-effect waves-light">
+        <i class="material-icons left">vpn_key</i>
+        {% trans "Show Codes" %}
+      </a>
+    </p>
 
-    <h3>{% trans "Disable Two-Factor Authentication" %}</h3>
-    <p>{% blocktrans %}However we strongly discourage you to do so, you can
-      also disable two-factor authentication for your account.{% endblocktrans %}</p>
-    <p><a class="btn btn-dark" href="{% url 'two_factor:disable' %}">
-      {% trans "Disable Two-Factor Authentication" %}</a></p>
+    <h5>{% trans "Disable Two-Factor Authentication" %}</h5>
+    <p>
+      {% blocktrans %}
+        However we strongly discourage you to do so, you can
+        also disable two-factor authentication for your account.
+      {% endblocktrans %}
+    </p>
+    <p>
+      <a class="btn red waves-effect waves-light" href="{% url 'two_factor:disable' %}">
+        <i class="material-icons left">power_settings_new</i>
+        {% trans "Disable Two-Factor Authentication" %}
+      </a>
+    </p>
   {% else %}
-    <p>{% blocktrans %}Two-factor authentication is not enabled for your
-      account. Enable two-factor authentication for enhanced account
-      security.{% endblocktrans %}</p>
-    <p><a href="{% url 'two_factor:setup' %}" class="btn btn-dark">
-      {% trans "Enable Two-Factor Authentication" %}</a>
+    <p class="flow-text">
+      {% blocktrans %}
+        Two-factor authentication is not enabled for your
+        account. Enable two-factor authentication for enhanced account
+        security.
+      {% endblocktrans %}
+    </p>
+    <p>
+      <a href="{% url 'two_factor:setup' %}" class="green btn waves-effect waves-light ">
+        {% trans "Enable Two-Factor Authentication" %}
+      </a>
     </p>
   {% endif %}
 {% endblock %}
diff --git a/dev.sh b/dev.sh
index 7449a09ad9dea2ff552b9ced1c2cffa9a5b0c875..acc0fbe7a4e4f3bbe5aad27343b38b98b1cc0b80 100755
--- a/dev.sh
+++ b/dev.sh
@@ -6,7 +6,7 @@ remove_pip_metadata() {
 
 case "$1" in
     "install-all")
-        set -e
+	set -e
 	cd "$(dirname "$0")"
 	remove_pip_metadata
 	poetry lock
@@ -22,34 +22,34 @@ case "$1" in
 	set +e
 	;;
     "makemessages")
-        cd "$(dirname "$0")"
-        manage_py=$(realpath manage.py)
-        locales="-l ar -l de_DE -l fr -l nb_NO -l tr_TR"
-        for d in biscuit/core apps/official/*/biscuit/apps/*; do
-        	echo; echo "Entering $d."
-        	poetry run sh -c "cd $d; $manage_py makemessages --no-wrap -i static $locales"
-        done
-        ;;
+	cd "$(dirname "$0")"
+	manage_py=$(realpath manage.py)
+	locales="-l ar -l de_DE -l fr -l nb_NO -l tr_TR"
+	for d in biscuit/core apps/official/*/biscuit/apps/*; do
+		echo; echo "Entering $d."
+		poetry run sh -c "cd $d; $manage_py makemessages --no-wrap -i static $locales"
+	done
+	;;
     "autopep8")
-        cd "$(dirname "$0")"
-        for d in biscuit/core apps/official/*/biscuit/apps/*; do
-        	echo; echo "Entering $d."
-        	poetry run sh -c "cd $d; autopep8 -i -r ."
-        done
-        ;;
+	cd "$(dirname "$0")"
+	for d in biscuit/core apps/official/*/biscuit/apps/*; do
+		echo; echo "Entering $d."
+		poetry run sh -c "cd $d; autopep8 -i -r ."
+	done
+	;;
     "pylama")
-        cd "$(dirname "$0")"
-        tox_ini=$(realpath tox.ini)
-        for d in biscuit/core apps/official/*/biscuit/apps/*; do
-        	echo; echo "Entering $d."
-        	poetry run sh -c "cd $d; pylama -a -o $tox_ini ."
-        done
-        ;;
+	cd "$(dirname "$0")"
+	tox_ini=$(realpath tox.ini)
+	for d in biscuit/core apps/official/*/biscuit/apps/*; do
+		echo; echo "Entering $d."
+		poetry run sh -c "cd $d; pylama -a -o $tox_ini ."
+	done
+	;;
     "gource")
-        for d in biscuit/core apps/official/*/biscuit/apps/*; do
-        	gource --output-custom-log - "$d"
-        done | sort -n | gource --log-format custom --background-image biscuit/core/static/img/biscuit-logo.png -
-        ;;
+	for d in biscuit/core apps/official/*/biscuit/apps/*; do
+		gource --output-custom-log - "$d"
+	done | sort -n | gource --log-format custom --background-image biscuit/core/static/img/biscuit-logo.png -
+	;;
     *)
 	;;
 esac
diff --git a/docs/Makefile b/docs/Makefile
index 298ea9e213e8c4c11f0431077510d4e325733c65..51285967a7d9722c5bdee4f6a81c154a56aa0846 100644
--- a/docs/Makefile
+++ b/docs/Makefile
@@ -16,4 +16,4 @@ help:
 # Catch-all target: route all unknown targets to Sphinx using the new
 # "make mode" option.  $(O) is meant as a shortcut for $(SPHINXOPTS).
 %: Makefile
-	@$(SPHINXBUILD) -M $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
\ No newline at end of file
+	@$(SPHINXBUILD) -M $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
diff --git a/poetry.lock b/poetry.lock
index b90f8796f6d2acd02f5cb76cc718c0c07be45350..a899a8ecd8bde2f0b4a0d9f8d7fd6a7e4c792d33 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -349,6 +349,17 @@ optional = false
 python-versions = "*"
 version = "0.14.0"
 
+[[package]]
+category = "main"
+description = "Material design for django forms and admin"
+name = "django-material"
+optional = false
+python-versions = "*"
+version = "1.6.0"
+
+[package.dependencies]
+six = "*"
+
 [[package]]
 category = "main"
 description = "A straightforward menu generator for Django"
@@ -1796,6 +1807,10 @@ django-maintenance-mode = [
     {file = "django-maintenance-mode-0.14.0.tar.gz", hash = "sha256:f3fef1760fdcda5e0bf6c2966aadc77eea6f328580a9c751920daba927281a68"},
     {file = "django_maintenance_mode-0.14.0-py2-none-any.whl", hash = "sha256:b4cc24a469ed10897826a28f05d64e6166a58d130e4940ac124ce198cd4cc778"},
 ]
+django-material = [
+    {file = "django-material-1.6.0.tar.gz", hash = "sha256:767ab6ad51f906bf773f927e853c2bff6b4ebdd1bd2bf45dbd4ef3e31657c3d5"},
+    {file = "django_material-1.6.0-py2.py3-none-any.whl", hash = "sha256:6a30e42f0ceefef1ff325bda0017fa6f6a7fa534b15b8fcc48eb96de4b6adc8e"},
+]
 django-menu-generator = [
     {file = "django-menu-generator-1.0.4.tar.gz", hash = "sha256:ce71a5055c16933c8aff64fb36c21e5cf8b6d505733aceed1252f8b99369a378"},
 ]
diff --git a/pyproject.toml b/pyproject.toml
index fd210260cec13d081df10c4698edc4b479fa8ad7..d5a86f6480a46521b8fabb5cc53108362a535c36 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -49,6 +49,7 @@ requests = "^2.22"
 django-two-factor-auth = { version = "^1.10.0", extras = [ "YubiKey", "phonenumbers", "Call", "SMS" ] }
 django-yarnpkg = "^6.0"
 django-dbsettings = "^1.0.0"
+django-material = "^1.6.0"
 
 [tool.poetry.extras]
 app-alsijil = ['BiscuIT-App-Alsijil']