diff --git a/biscuit/core/settings.py b/biscuit/core/settings.py
index 87eb91c7b6e0e58289b5c792b89a84c4099c000c..95f1095f65769833553ef530bc60735e8eec356d 100644
--- a/biscuit/core/settings.py
+++ b/biscuit/core/settings.py
@@ -26,7 +26,8 @@ INSTALLED_APPS = [
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'easyaudit',
-    'bootstrap3',
+    'bootstrap4',
+    'fa',
     'menu',
     'biscuit.core'
 ]
@@ -108,10 +109,6 @@ USE_L10N = True
 
 USE_TZ = True
 
-BOOTSTRAP3 = {
-    'include_jquery': True
-}
-
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/2.1/howto/static-files/
 
@@ -127,5 +124,21 @@ LOGOUT_REDIRECT_URL = 'index'
 STATIC_ROOT = LocalSetting()
 MEDIA_ROOT = LocalSetting()
 
+FONT_AWESOME = {'url': LocalSetting(default="/javascript/font-awesome/css/font-awesome.min.css")}
+
+BOOTSTRAP4 = {
+    "css_url": LocalSetting(default="/javascript/bootstrap4/css/bootstrap.min.css"),
+    "javascript_url": LocalSetting(default="/javascript/bootstrap4/js/bootstrap.min.js"),
+    "jquery_url": LocalSetting(default="/javascript/jquery/jquery.min.js"),
+    "popper_url": LocalSetting(default="/javascript/popper.js/popper.min.js"),
+    "include_jquery": True
+}
+
+DATATABLES = {
+    "css_url": LocalSetting(default="/javascript/jquery-datatables/css/dataTables.bootstrap4.min.css"),
+    "js_url": LocalSetting("/javascript/jquery-datatables/dataTables.bootstrap4.min.js"),
+}
+
+
 _settings = load_and_check_settings(globals())
 globals().update(_settings)
diff --git a/biscuit/core/templates/bootstrap4-navbar-submenu.html b/biscuit/core/templates/bootstrap4-navbar-submenu.html
new file mode 100644
index 0000000000000000000000000000000000000000..dace83349da2a4887377e6a5418b6be092dad83a
--- /dev/null
+++ b/biscuit/core/templates/bootstrap4-navbar-submenu.html
@@ -0,0 +1,13 @@
+<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+    {% for item in items %}
+        {% if item.visible %}
+            <a class="dropdown-item {% if item.selected %} active{% endif %}{% if item.children %} dropdown-submenu{% endif %}" href="{{ item.url }}">{{ item.title }}
+                {% if item.children %}
+                    {% with items=item.children template_name='bootstrap-navbar-submenu.html' %}
+                       {% include template_name %}
+                    {% endwith %}
+                {% endif %}
+            </a>
+        {% endif %}
+    {% endfor %}
+</div>
diff --git a/biscuit/core/templates/bootstrap4-navbar.html b/biscuit/core/templates/bootstrap4-navbar.html
new file mode 100644
index 0000000000000000000000000000000000000000..a6cb7136f89201b8b4e09fc6a855b1c83c384034
--- /dev/null
+++ b/biscuit/core/templates/bootstrap4-navbar.html
@@ -0,0 +1,22 @@
+{% for item in menu %}
+    {% if item.visible %}
+        {% if item.separator %}
+            <li class="divider-vertical"></li>
+        {% endif %}
+
+        <li class="nav-item {% if item.selected %} active{% endif %}{% if item.children %} dropdown{% endif %}" id="top-menu-{{ item.slug }}">
+            <a href="{{ item.url }}" {% if not item.children %}class=nav-link {% endif%} {% if item.children %} class="nav-link dropdown-toggle" data-hover="dropdown" data-toggle="dropdown"{% endif %}>
+                {% if item.icon %}
+                    <i class="icon-{{ item.icon }} icon-white"></i>&nbsp;
+                {% endif %}
+                <span>{{ item.title }}</span>
+                {% if item.children %}
+                    &nbsp;<b class="caret"></b>
+                {% endif %}
+            </a>
+            {% if item.children %}
+                {% include 'bootstrap4-navbar-submenu.html' with items=item.children %}
+            {% endif %}
+        </li>
+    {% endif %}
+{% endfor %}
diff --git a/biscuit/core/templates/core/base.html b/biscuit/core/templates/core/base.html
index b8b60ee8e9095ba1065499e1facfd18f1075ee13..d6f1106e4ba58f80f9b6b6fab13f5b9af4b9fc59 100644
--- a/biscuit/core/templates/core/base.html
+++ b/biscuit/core/templates/core/base.html
@@ -1,26 +1,23 @@
-{% extends "bootstrap3/bootstrap3.html" %}
-{% load bootstrap3 menu staticfiles %}
+{% extends "bootstrap4/bootstrap4.html" %}
+{% load bootstrap4 menu staticfiles font_awesome %}
 
-{% block bootstrap3_title %}BiscuIT School Information System{% endblock %}
+{% block bootstrap4_title %}BiscuIT School Information System{% endblock %}
 
-{% block bootstrap3_extra_head %}
+{% block bootstrap4_extra_head %}
  <link rel="stylesheet" href="{% static 'style.css' %}" />
- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.18/datatables.min.css"/>
+ <link rel="stylesheet" type="text/css" href="/javascript/jquery-datatables/css/dataTables.bootstrap4.min.css"/>
  <link rel="shortcut icon" href="#" />
 {% endblock %}
 
-{% block bootstrap3_extra_script %}
- <script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.18/datatables.min.js"></script>
+{% block bootstrap4_extra_script %}
+ <script type="text/javascript" src="/javascript/jquery-datatables/dataTables.bootstrap4.min.js"></script>
  <script type="text/javascript" src="{% static 'js/main.js' %}" /></script>
 {% endblock %}
 
-{% block bootstrap3_content %}
- <nav class="navbar navbar-default">
-  <div class="container-fluid">
-   <div class="navbar-header page-scroll">
-    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main">
-     <span class="sr-only">Toggle navigation</span>
-     <span class="glyphicon glyphicon-th-list"></span>
+{% block bootstrap4_content %}
+ <nav class="navbar navbar-light bg-light navbar-expand-md">
+    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-main">
+     {% fa 'fa-align-justify' %}
     </button>
     <a class="navbar-brand" href="{% url "index" %}">
      <span class="glyphicon glyphicon-briefcase"></span> BiscuIT School Information System
@@ -29,8 +26,8 @@
 
    <div class="collapse navbar-collapse" id="navbar-main">
     {% generate_menu %}
-    <ul class="nav navbar-nav navbar-right">
-     {% with menu=menus.main %}{% include "bootstrap-navbar.html" %}{% endwith %}
+    <ul class="nav navbar-nav ml-auto">
+     {% with menu=menus.main %}{% include "bootstrap4-navbar.html" %}{% endwith %}
     </ul>
    </div>
   </div>
diff --git a/biscuit/core/templates/core/index.html b/biscuit/core/templates/core/index.html
index a2ecc73cfbe0e60c69786cc79f2be45bdd024e8b..71946560db7016c8774646bcde84f8861c1d8706 100644
--- a/biscuit/core/templates/core/index.html
+++ b/biscuit/core/templates/core/index.html
@@ -1,5 +1,5 @@
 {% extends "core/base.html" %}
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 
 {% block page_title %}BiscuIT School Information System (SIS){% endblock %}
 
diff --git a/biscuit/core/templates/registration/login.html b/biscuit/core/templates/registration/login.html
index 542acd50117b6bfb7fda2601b668ea3c3ff987e6..42d7edb16c766a9756f4839a02d773548d91e987 100644
--- a/biscuit/core/templates/registration/login.html
+++ b/biscuit/core/templates/registration/login.html
@@ -1,5 +1,5 @@
 {% extends "core/base.html" %}
-{% load bootstrap3 %}
+{% load bootstrap4 %}
 
 {% block content %}
  {% if next %}
diff --git a/local.cfg b/local.cfg
index e31c7f40fb9764470bd4d670aa0a932d78ce4e98..59b3f82c5538b080174acc2f608fbde18b42bef6 100644
--- a/local.cfg
+++ b/local.cfg
@@ -8,4 +8,10 @@ DEBUG = true
 LANGUAGE_CODE = "de-de"
 SECRET_KEY = "DO_NOT_USE_waabah0uGu9okahtee2UbaijahS0cuJo"
 TIME_ZONE = "Europe/Berlin"
-
+FONT_AWESOME.url = "/javascript/font-awesome/css/font-awesome.min.css"
+BOOTSTRAP4.css_url = "/javascript/bootstrap4/css/bootstrap.min.css"
+BOOTSTRAP4.javascript_url = "/javascript/bootstrap4/js/bootstrap.min.js"
+BOOTSTRAP4.jquery_url = "/javascript/jquery/jquery.min.js"
+BOOTSTRAP4.popper_url = "/javascript/popper.js/popper.min.js"
+DATATABLES.css_url = "/javascript/jquery-datatables/css/dataTables.bootstrap4.min.css"
+DATATABLES.js_url = "/javascript/jquery-datatables/dataTables.bootstrap4.min.js"
diff --git a/setup.py b/setup.py
index 023382e579702a1927fdccc3b42de1103d56f5b0..48c0a720c2ee1d8f92d4f349339e9202c0e636b3 100755
--- a/setup.py
+++ b/setup.py
@@ -17,7 +17,8 @@ setup(
     include_package_data=True,
     install_requires=[
                       'Django >= 2.0',
-                      'django-bootstrap3',
+                      'django-bootstrap4',
+                      'django-fa',
                       'django-easy-audit',
                       'django-local-settings',
                       'django-simple-menu',