diff --git a/.npmrc b/.npmrc
new file mode 100644
index 00000000..0453efcd
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+registry=https://registry.npmjs.org
\ No newline at end of file
diff --git a/application/views/backend/calendar.php b/application/views/backend/calendar.php
index 13a7ce61..51112357 100755
--- a/application/views/backend/calendar.php
+++ b/application/views/backend/calendar.php
@@ -67,50 +67,47 @@
             <?php endif ?>
 
             <?php if ($privileges[PRIV_APPOINTMENTS]['add'] == TRUE): ?>
-                <div class="btn-group">
+                <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                     <button class="btn btn-light" type="button" id="insert-appointment">
-                        <span class="glyphicon glyphicon-plus"></span>
+                        <i class="fas fa-plus"></i>
                         <?= lang('appointment') ?>
                     </button>
-                    <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown">
-                        <span class="caret"></span>
-                        <span class="sr-only">Toggle Dropdown</span>
-                    </button>
-                    <ul class="dropdown-menu">
-                        <li>
-                            <a href="#" id="insert-unavailable">
+
+                    <div class="btn-group" role="group">
+                        <button id="btnGroupDrop1" type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        </button>
+                        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
+                            <a class="dropdown-item" href="#" id="insert-unavailable">
                                 <?= lang('unavailable') ?>
                             </a>
-                        </li>
-                        <li>
-                            <a href="#" id="insert-extra-period">
+                            <a class="dropdown-item" href="#" id="insert-extra-period">
                                 <?= lang('extra_period') ?>
                             </a>
-                        </li>
-                    </ul>
+                        </div>
+                    </div>
                 </div>
             <?php endif ?>
 
             <button id="reload-appointments" class="btn btn-light" title="<?= lang('reload_appointments_hint') ?>">
-                <span class="glyphicon glyphicon-repeat"></span>
+                <i class="fas fa-redo-alt"></i>
             </button>
 
             <?php if($calendar_view === 'default'): ?>
                 <a class="btn btn-light" href="<?= site_url('backend?view=table') ?>"
                    title="<?= lang('table') ?>">
-                    <span class="glyphicon glyphicon-list-alt"></span>
+                    <i class="far fa-list-alt"></i>
                 </a>
             <?php endif ?>
 
             <?php if($calendar_view === 'table'): ?>
                 <a class="btn btn-light" href="<?= site_url('backend?view=default') ?>"
                    title="<?= lang('default') ?>">
-                    <span class="glyphicon glyphicon-calendar"></span>
+                    <i class="fas fa-calendar-alt"></i>
                 </a>
             <?php endif ?>
 
             <button id="toggle-fullscreen" class="btn btn-light">
-                <span class="glyphicon glyphicon-fullscreen"></span>
+                <i class="fas fa-expand-arrows-alt"></i>
             </button>
         </div>
     </div>
@@ -334,7 +331,7 @@
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             </div>
             <div class="modal-body">
-                <div class="modal-message alert hidden"></div>
+                <div class="modal-message alert d-none"></div>
 
                 <form>
                     <fieldset>
@@ -399,7 +396,7 @@
                 <h3 class="modal-title"><?= lang('new_extra_period_title') ?></h3>
             </div>
             <div class="modal-body">
-                <div class="modal-message alert hidden"></div>
+                <div class="modal-message alert d-none"></div>
 
                 <form>
                     <fieldset>
diff --git a/assets/css/backend.css b/assets/css/backend.css
index 8fa04dc5..ff9daa5c 100644
--- a/assets/css/backend.css
+++ b/assets/css/backend.css
@@ -314,6 +314,16 @@ body legend {
     text-align: right;
 }
 
+#calendar-actions > .btn-group {
+    width: auto;
+}
+
+@media all and (max-width: 470px) {
+  #calendar-actions > .btn-group {
+      width: 100%;
+  }
+}
+
 #calendar-page #calendar-actions > .btn {
     margin: 5px 0;
 }
diff --git a/assets/css/general.css b/assets/css/general.css
index 8cf61596..99c82cec 100644
--- a/assets/css/general.css
+++ b/assets/css/general.css
@@ -80,7 +80,6 @@ body .ui-widget.ui-widget-content {
 
 body #ui-datepicker-div {
     margin-top: 4px;
-    z-index: 4 !important;
 }
 
 body .ui-datepicker .ui-widget-header {
@@ -123,9 +122,9 @@ html body .ui-datepicker td a.ui-state-active {
     font-weight: bold !important;
     background: #3DD481 !important;
     border-radius: 50px;
-    width: 22px;
-    height: 22px;
-    line-height: 1.3;
+    width: 24px;
+    height: 24px;
+    line-height: 1.2;
     margin: 4px;
 }
 
@@ -396,23 +395,6 @@ li.language:hover {
     max-height: 250px;
 }
 
-.has-error .control-label,
-.has-error label {
-    color: #dc3545;
-}
-
-.has-error .form-control {
-    border-color: #dc3545;
-}
-
-a {
-    color: #17a2b8;
-}
-
-a:hover {
-    color: #0a6977;
-}
-
 body .popover-content strong {
     min-width: 80px; display:inline-block;
 }
diff --git a/assets/js/backend_calendar_default_view.js b/assets/js/backend_calendar_default_view.js
index adeb05ec..f861ebfc 100755
--- a/assets/js/backend_calendar_default_view.js
+++ b/assets/js/backend_calendar_default_view.js
@@ -54,7 +54,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
          * Hides the open popover element.
          */
         $calendarPage.on('click', '.close-popover', function () {
-            $(this).parents('.popover').popover('destroy');
+            $(this).parents('.popover').popover('dispose');
         });
 
         /**
@@ -63,10 +63,12 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
          * Enables the edit dialog of the selected calendar event.
          */
         $calendarPage.on('click', '.edit-popover', function () {
-            $(this).parents('.popover').popover('destroy');
+            $(this).parents('.popover').popover('dispose');
 
             var $dialog;
 
+            console.log(lastFocusedEventData.data)
+
             if (lastFocusedEventData.data.is_unavailable === '0') {
                 var appointment = lastFocusedEventData.data;
                 $dialog = $('#manage-appointment');
@@ -130,7 +132,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
          * deletion then an AJAX call is made to the server and deletes the appointment from the database.
          */
         $calendarPage.on('click', '.delete-popover', function () {
-            $(this).parents('.popover').popover('destroy');
+            $(this).parents('.popover').popover('dispose');
 
             var url;
             var data;
@@ -277,7 +279,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
      * above the calendar item.
      */
     function calendarEventClick(event, jsEvent, view) {
-        $('.popover').popover('destroy'); // Close all open popovers.
+        $('.popover').popover('dispose'); // Close all open popovers.
 
         var $html;
         var displayEdit;
@@ -694,6 +696,8 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
             $('#notification').hide('bind');
         }
 
+        console.log(event.data)
+
         if (event.data.is_unavailable === '0') {
             // Prepare appointment data.
             var appointment = GeneralFunctions.clone(event.data);
@@ -834,7 +838,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
 
         // Remove all open popovers.
         $('.close-popover').each(function (index, closePopoverButton) {
-            $(closePopoverButton).parents('.popover').popover('destroy');
+            $(closePopoverButton).parents('.popover').popover('dispose');
         });
 
         // Add new pop overs.
diff --git a/assets/js/general_functions.js b/assets/js/general_functions.js
index bba87c8b..2f2eab0a 100755
--- a/assets/js/general_functions.js
+++ b/assets/js/general_functions.js
@@ -284,7 +284,7 @@ window.GeneralFunctions = window.GeneralFunctions || {};
             };
 
             $.post(url, data)
-                done(function () {
+                .done(function () {
                     document.location.reload(true);
                 })
                 .fail(GeneralFunctions.ajaxFailureHandler);