diff --git a/.gitignore b/.gitignore
index 5c07aa1c..3ee90a37 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,3 +39,4 @@ _vimrc_local.vim
 /node_modules
 /public/assets
 /package-lock.json
+/yarn-error.log
diff --git a/README.md b/README.md
index 1a3e9a5d..aa029c90 100644
--- a/README.md
+++ b/README.md
@@ -41,7 +41,7 @@ The Engelsystem may be installed manually or by using the provided [docker setup
  * Recommended: Directory Listing should be disabled.
  * There must be a MySQL database set up with a user who has full rights to that database.
  * If necessary, create a ```config/config.php``` to override values from ```config/config.default.php```.
-   * To remove values from the `footer_items`, `available_themes`, `locales`, `tshirt_sizes` or `headers` lists the config file has to be renamed.
+   * To remove values from the `footer_items`, `themes`, `locales`, `tshirt_sizes` or `headers` lists the config file has to be renamed.
  * To import the database, the ```bin/migrate``` script has to be run. If you can't execute scripts, you can use the `initial-install.sql` file from the release zip.
  * In the browser, login with credentials ```admin``` : ```asdfasdf``` and change the password.
 
diff --git a/config/config.default.php b/config/config.default.php
index 1cea89ff..98f41785 100644
--- a/config/config.default.php
+++ b/config/config.default.php
@@ -109,24 +109,82 @@ return [
     // Default theme, 1=style1.css
     'theme'                   => env('THEME', 1),
 
-    // Available themes
-    'available_themes'        => [
-        '15' => 'Engelsystem DiVOC R2R',
-        '14' => 'Engelsystem rC3 teal (2020)',
-        '13' => 'Engelsystem rC3 violet (2020)',
-        '12' => 'Engelsystem 36c3 (2019)',
-        '10' => 'Engelsystem cccamp19 green (2019)',
-        '9'  => 'Engelsystem cccamp19 yellow (2019)',
-        '8'  => 'Engelsystem cccamp19 blue (2019)',
-        '7'  => 'Engelsystem 35c3 dark (2018)',
-        '6'  => 'Engelsystem 34c3 dark (2017)',
-        '5'  => 'Engelsystem 34c3 light (2017)',
-        '4'  => 'Engelsystem 33c3 (2016)',
-        '3'  => 'Engelsystem 32c3 (2015)',
-        '2'  => 'Engelsystem cccamp15',
-        '11' => 'Engelsystem high contrast',
-        '0'  => 'Engelsystem light',
-        '1'  => 'Engelsystem dark',
+    'themes' => [
+        14 => [
+            'name' => 'Engelsystem rC3 teal (2020)',
+            'type' => 'dark',
+            'navbar_classes' => 'navbar-dark bg-black border-dark',
+        ],
+        13 => [
+            'name' => 'Engelsystem rC3 violet (2020)',
+            'type' => 'dark',
+            'navbar_classes' => 'navbar-dark bg-black border-dark',
+        ],
+        12 => [
+            'name' => 'Engelsystem 36c3 (2019)',
+            'type' => 'dark',
+            'navbar_classes' => 'navbar-dark bg-black border-dark',
+        ],
+        10 => [
+            'name' => 'Engelsystem cccamp19 green (2019)',
+            'type' => 'dark',
+            'navbar_classes' => 'navbar-dark bg-black border-dark',
+        ],
+        9 => [
+            'name' => 'Engelsystem cccamp19 yellow (2019)',
+            'type' => 'dark',
+            'navbar_classes' => 'navbar-dark bg-black border-dark',
+        ],
+        8 => [
+            'name' => 'Engelsystem cccamp19 blue (2019)',
+            'type' => 'dark',
+            'navbar_classes' => 'navbar-dark bg-black border-dark',
+        ],
+        7 => [
+            'name' => 'Engelsystem 35c3 dark (2018)',
+            'type' => 'dark',
+            'navbar_classes' => 'navbar-primary bg-black border-primary',
+        ],
+        6 => [
+            'name' => 'Engelsystem 34c3 dark (2017)',
+            'type' => 'dark',
+            'navbar_classes' => 'navbar-dark bg-black border-dark',
+        ],
+        5 => [
+            'name' => 'Engelsystem 34c3 light (2017)',
+            'type' => 'light',
+            'navbar_classes' => 'navbar-light bg-light',
+        ],
+        4 => [
+            'name' => 'Engelsystem 33c3 (2016)',
+            'type' => 'dark',
+            'navbar_classes' => 'navbar-dark bg-body border-dark',
+        ],
+        3 => [
+            'name' => 'Engelsystem 32c3 (2015)',
+            'type' => 'light',
+            'navbar_classes' => 'navbar-dark bg-black border-dark',
+        ],
+        2 => [
+            'name' => 'Engelsystem cccamp15',
+            'type' => 'light',
+            'navbar_classes' => 'navbar-light bg-light',
+        ],
+        11 => [
+            'name' => 'Engelsystem high contrast',
+            'type' => 'dark',
+            'navbar_classes' => 'navbar-dark bg-black border-dark',
+        ],
+        0 => [
+            'name' => 'Engelsystem light',
+            'type' => 'light',
+            'navbar_classes' => 'navbar-light bg-light',
+        ],
+        1 => [
+            'name' => 'Engelsystem dark',
+            'type' => 'dark',
+            'navbar_classes' => 'navbar-dark bg-black border-dark',
+        ],
     ],
 
     // Redirect to this site after logging in or when pressing the top-left button
@@ -254,7 +312,7 @@ return [
         'X-Content-Type-Options'  => 'nosniff',
         'X-Frame-Options'         => 'sameorigin',
         'Referrer-Policy'         => 'strict-origin-when-cross-origin',
-        'Content-Security-Policy' => 'default-src \'self\' \'unsafe-inline\' \'unsafe-eval\'',
+        'Content-Security-Policy' => 'default-src \'self\' \'unsafe-inline\' \'unsafe-eval\'; img-src \'self\' data:;',
         'X-XSS-Protection'        => '1; mode=block',
         'Feature-Policy'          => 'autoplay \'none\'',
         //'Strict-Transport-Security' => 'max-age=7776000',
diff --git a/includes/controller/angeltypes_controller.php b/includes/controller/angeltypes_controller.php
index 3b4ed1be..0cfb48e2 100644
--- a/includes/controller/angeltypes_controller.php
+++ b/includes/controller/angeltypes_controller.php
@@ -286,7 +286,7 @@ function angeltypes_list_controller()
             button(
                 page_link_to('angeltypes', ['action' => 'view', 'angeltype_id' => $angeltype['id']]),
                 __('view'),
-                'btn-xs'
+                'btn-sm'
             )
         ];
 
@@ -294,12 +294,12 @@ function angeltypes_list_controller()
             $actions[] = button(
                 page_link_to('angeltypes', ['action' => 'edit', 'angeltype_id' => $angeltype['id']]),
                 __('edit'),
-                'btn-xs'
+                'btn-sm'
             );
             $actions[] = button(
                 page_link_to('angeltypes', ['action' => 'delete', 'angeltype_id' => $angeltype['id']]),
                 __('delete'),
-                'btn-xs'
+                'btn-sm'
             );
         }
 
@@ -310,18 +310,18 @@ function angeltypes_list_controller()
                     ['action' => 'delete', 'user_angeltype_id' => $angeltype['user_angeltype_id']]
                 ),
                 __('leave'),
-                'btn-xs'
+                'btn-sm'
             );
         } else {
             $actions[] = button(
                 page_link_to('user_angeltypes', ['action' => 'add', 'angeltype_id' => $angeltype['id']]),
                 __('join'),
-                'btn-xs'
+                'btn-sm'
             );
         }
 
-        $angeltype['restricted'] = $angeltype['restricted'] ? glyph('book') : '';
-        $angeltype['no_self_signup'] = $angeltype['no_self_signup'] ? '' : glyph('share');
+        $angeltype['restricted'] = $angeltype['restricted'] ? icon('book') : '';
+        $angeltype['no_self_signup'] = $angeltype['no_self_signup'] ? '' : icon('pencil-square');
 
         $angeltype['name'] = '<a href="'
             . page_link_to('angeltypes', ['action' => 'view', 'angeltype_id' => $angeltype['id']])
diff --git a/includes/controller/user_angeltypes_controller.php b/includes/controller/user_angeltypes_controller.php
index 038d919e..42fcf948 100644
--- a/includes/controller/user_angeltypes_controller.php
+++ b/includes/controller/user_angeltypes_controller.php
@@ -16,7 +16,7 @@ function user_angeltypes_unconfirmed_hint()
 
     $unconfirmed_links = [];
     foreach ($unconfirmed_user_angeltypes as $user_angeltype) {
-        $unconfirmed_links[] = '<a href="'
+        $unconfirmed_links[] = '<a class="text-info" href="'
             . page_link_to('angeltypes', ['action' => 'view', 'angeltype_id' => $user_angeltype['angeltype_id']])
             . '">' . $user_angeltype['name']
             . ' (+' . $user_angeltype['count'] . ')'
diff --git a/includes/controller/user_driver_licenses_controller.php b/includes/controller/user_driver_licenses_controller.php
index e6924182..55b7696a 100644
--- a/includes/controller/user_driver_licenses_controller.php
+++ b/includes/controller/user_driver_licenses_controller.php
@@ -24,7 +24,7 @@ function user_driver_license_required_hint()
         if ($angeltype['requires_driver_license']) {
             return sprintf(
                 __('You joined an angeltype which requires a driving license. Please edit your driving license information here: %s.'),
-                '<a href="' . user_driver_license_edit_link() . '">' . __('driving license information') . '</a>'
+                '<a href="' . user_driver_license_edit_link() . '" class="text-info">' . __('driving license information') . '</a>'
             );
         }
     }
diff --git a/includes/helper/legacy_helper.php b/includes/helper/legacy_helper.php
new file mode 100644
index 00000000..ca70ad0e
--- /dev/null
+++ b/includes/helper/legacy_helper.php
@@ -0,0 +1,33 @@
+<?php
+
+declare(strict_types=1);
+
+use Engelsystem\Renderer\Twig\Extensions\Globals;
+
+/**
+ * @return int
+ */
+function theme_id(): int
+{
+    /** @var Globals $globals */
+    $globals = app(Globals::class);
+    $globals = $globals->getGlobals();
+    return $globals['themeId'];
+}
+
+/**
+ * @return array
+ */
+function theme(): array
+{
+    $theme_id = theme_id();
+    return config('themes')[$theme_id];
+}
+
+/**
+ * @return string
+ */
+function theme_type(): string
+{
+    return theme()['type'];
+}
diff --git a/includes/includes.php b/includes/includes.php
index 061619dd..b94ef70d 100644
--- a/includes/includes.php
+++ b/includes/includes.php
@@ -57,6 +57,7 @@ $includeFiles = [
     __DIR__ . '/../includes/controller/user_worklog_controller.php',
 
     __DIR__ . '/../includes/helper/graph_helper.php',
+    __DIR__ . '/../includes/helper/legacy_helper.php',
     __DIR__ . '/../includes/helper/message_helper.php',
     __DIR__ . '/../includes/helper/email_helper.php',
 
diff --git a/includes/pages/admin_active.php b/includes/pages/admin_active.php
index cc224f15..cb1a600b 100644
--- a/includes/pages/admin_active.php
+++ b/includes/pages/admin_active.php
@@ -213,9 +213,9 @@ function admin_active()
         $userData['shirt_size'] = (isset($tshirt_sizes[$shirtSize]) ? $tshirt_sizes[$shirtSize] : '');
         $userData['work_time'] = round($usr['shift_length'] / 60)
             . ' min (' . sprintf('%.2f', $usr['shift_length'] / 3600) . '&nbsp;h)';
-        $userData['active'] = glyph_bool($usr->state->active == 1);
-        $userData['force_active'] = glyph_bool($usr->state->force_active == 1);
-        $userData['tshirt'] = glyph_bool($usr->state->got_shirt == 1);
+        $userData['active'] = icon_bool($usr->state->active == 1);
+        $userData['force_active'] = icon_bool($usr->state->force_active == 1);
+        $userData['tshirt'] = icon_bool($usr->state->got_shirt == 1);
         $userData['shift_count'] = $usr['shift_count'];
 
         $actions = [];
@@ -228,7 +228,7 @@ function admin_active()
                 $parameters['show_all_shifts'] = 1;
             }
             $actions[] = form(
-                [form_submit('submit', __('set active'), 'btn-xs', false)],
+                [form_submit('submit', __('set active'), 'btn-sm', false)],
                 page_link_to('admin_active', $parameters)
             );
         }
@@ -241,7 +241,7 @@ function admin_active()
                 $parametersRemove['show_all_shifts'] = 1;
             }
             $actions[] = form(
-                [form_submit('submit', __('remove active'), 'btn-xs', false)],
+                [form_submit('submit', __('remove active'), 'btn-sm', false)],
                 page_link_to('admin_active', $parametersRemove)
             );
         }
@@ -254,7 +254,7 @@ function admin_active()
                 $parametersShirt['show_all_shifts'] = 1;
             }
             $actions[] = form(
-                [form_submit('submit', __('got t-shirt'), 'btn-xs', false)],
+                [form_submit('submit', __('got t-shirt'), 'btn-sm', false)],
                 page_link_to('admin_active', $parametersShirt)
             );
         }
@@ -267,7 +267,7 @@ function admin_active()
                 $parameters['show_all_shifts'] = 1;
             }
             $actions[] = form(
-                [form_submit('submit', __('remove t-shirt'), 'btn-xs', false)],
+                [form_submit('submit', __('remove t-shirt'), 'btn-sm', false)],
                 page_link_to('admin_active', $parameters)
             );
         }
diff --git a/includes/pages/admin_arrive.php b/includes/pages/admin_arrive.php
index a40cea86..15cee8dd 100644
--- a/includes/pages/admin_arrive.php
+++ b/includes/pages/admin_arrive.php
@@ -95,16 +95,21 @@ function admin_arrive()
         $plannedDepartureDate = $usr->personalData->planned_departure_date;
         $arrivalDate = $usr->state->arrival_date;
         $plannedArrivalDate = $usr->personalData->planned_arrival_date;
-        $usr['rendered_planned_departure_date'] = $plannedDepartureDate ? $plannedDepartureDate->format(__('Y-m-d')) : '-';
+        $usr['rendered_planned_departure_date'] = $plannedDepartureDate
+            ? $plannedDepartureDate->format(__('Y-m-d'))
+            : '-';
         $usr['rendered_planned_arrival_date'] = $plannedArrivalDate ? $plannedArrivalDate->format(__('Y-m-d')) : '-';
         $usr['rendered_arrival_date'] = $arrivalDate ? $arrivalDate->format(__('Y-m-d')) : '-';
-        $usr['arrived'] = glyph_bool($usr->state->arrived);
+        $usr['arrived'] = icon_bool($usr->state->arrived);
         $usr['actions'] = form([
             form_hidden('action', $usr->state->arrived ? 'reset' : 'arrived'),
             form_hidden('user', $usr->id),
             form_submit(
-                'submit', $usr->state->arrived ? __('reset') : __('arrived'), 'btn-xs', true,
-                $usr->state->arrived ? 'default' : 'primary'
+                'submit',
+                $usr->state->arrived ? __('reset') : __('arrived'),
+                'btn-sm',
+                true,
+                $usr->state->arrived ? 'secondary' : 'primary'
             ),
         ]);
 
diff --git a/includes/pages/admin_free.php b/includes/pages/admin_free.php
index 7ef1d9ed..47deb4e6 100644
--- a/includes/pages/admin_free.php
+++ b/includes/pages/admin_free.php
@@ -94,10 +94,10 @@ function admin_free()
             'dect'        => sprintf('<a href="tel:%s">%1$s</a>', $usr->contact->dect),
             'email'       => $usr->settings->email_human
                 ? sprintf('<a href="email:%s">%1$s</a>', $email)
-                : glyph('eye-close'),
+                : icon('eye-slash'),
             'actions'     =>
                 auth()->can('admin_user')
-                    ? button(page_link_to('admin_user', ['id' => $usr->id]), __('edit'), 'btn-xs')
+                    ? button(page_link_to('admin_user', ['id' => $usr->id]), __('edit'), 'btn-sm')
                     : ''
         ];
     }
@@ -105,9 +105,9 @@ function admin_free()
         form([
             div('row', [
                 div('col-md-12 form-inline', [
-                    div('inline-form-spacing', [
-                        form_text('search', __('Search'), $search),
-                        form_select('angeltype', __('Angeltype'), $angel_types, $angelType),
+                    div('row', [
+                        form_text('search', __('Search'), $search, null, null, null, 'col'),
+                        form_select('angeltype', __('Angeltype'), $angel_types, $angelType, '', 'col'),
                         form_submit('submit', __('Search'))
                     ]),
                 ]),
diff --git a/includes/pages/admin_groups.php b/includes/pages/admin_groups.php
index 0dea8145..21621690 100644
--- a/includes/pages/admin_groups.php
+++ b/includes/pages/admin_groups.php
@@ -42,7 +42,7 @@ function admin_groups()
                     page_link_to('admin_groups',
                         ['action' => 'edit', 'id' => $group['UID']]),
                     __('edit'),
-                    'btn-xs'
+                    'btn-sm'
                 )
             ];
         }
diff --git a/includes/pages/admin_rooms.php b/includes/pages/admin_rooms.php
index be11c5fc..b6f13ceb 100644
--- a/includes/pages/admin_rooms.php
+++ b/includes/pages/admin_rooms.php
@@ -22,17 +22,17 @@ function admin_rooms()
     foreach ($rooms_source as $room) {
         $rooms[] = [
             'name'      => Room_name_render($room),
-            'map_url'   => glyph_bool($room->map_url),
+            'map_url'   => icon_bool($room->map_url),
             'actions'   => table_buttons([
                 button(
                     page_link_to('admin_rooms', ['show' => 'edit', 'id' => $room->id]),
                     __('edit'),
-                    'btn-xs'
+                    'btn-sm'
                 ),
                 button(
                     page_link_to('admin_rooms', ['show' => 'delete', 'id' => $room->id]),
                     __('delete'),
-                    'btn-xs'
+                    'btn-sm'
                 )
             ])
         ];
diff --git a/includes/pages/admin_shifts.php b/includes/pages/admin_shifts.php
index 0e0df1c6..cf5ed47b 100644
--- a/includes/pages/admin_shifts.php
+++ b/includes/pages/admin_shifts.php
@@ -291,7 +291,7 @@ function admin_shifts()
             foreach ($shifts as $shift) {
                 $shifts_table_entry = [
                     'timeslot'      =>
-                        '<span class="glyphicon glyphicon-time"></span> '
+                        icon('clock') . ' '
                         . date('Y-m-d H:i', $shift['start'])
                         . ' - '
                         . date('H:i', $shift['end'])
@@ -332,13 +332,13 @@ function admin_shifts()
                     form_hidden('change_hours', implode(', ', $change_hours)),
                     form_hidden('angelmode', $angelmode),
                     form_hidden('shift_over_midnight', $shift_over_midnight ? 'true' : 'false'),
-                    form_submit('back', glyph('menu-left') . __('back')),
+                    form_submit('back', icon('chevron-left') . __('back')),
                     table([
                         'timeslot'      => __('Time and location'),
                         'title'         => __('Type and title'),
                         'needed_angels' => __('Needed angels')
                     ], $shifts_table),
-                    form_submit('submit', glyph('floppy-disk') . __('Save'))
+                    form_submit('submit', icon('save') . __('Save'))
                 ])
             ]);
         }
@@ -468,7 +468,7 @@ function admin_shifts()
                     ])
                 ])
             ]),
-            form_submit('preview', glyph('search') . __('Preview'))
+            form_submit('preview', icon('search') . __('Preview'))
         ])
     ]);
 }
diff --git a/includes/pages/admin_user.php b/includes/pages/admin_user.php
index e5ba9a2b..5c690226 100644
--- a/includes/pages/admin_user.php
+++ b/includes/pages/admin_user.php
@@ -181,7 +181,7 @@ function admin_user()
         }
 
         $html .= buttons([
-            button(user_delete_link($user_source->id), glyph('lock') . __('delete'), 'btn-danger')
+            button(user_delete_link($user_source->id), icon('trash') . __('delete'), 'btn-danger')
         ]);
 
         $html .= "<hr />";
diff --git a/includes/pages/guest_login.php b/includes/pages/guest_login.php
index 1e486135..25eb8f42 100644
--- a/includes/pages/guest_login.php
+++ b/includes/pages/guest_login.php
@@ -440,5 +440,5 @@ function guest_register()
  */
 function entry_required()
 {
-    return '<span class="text-info glyphicon glyphicon-warning-sign"></span>';
+    return icon('exclamation-triangle', 'text-info');
 }
diff --git a/includes/pages/user_messages.php b/includes/pages/user_messages.php
index 4b611fbc..21134733 100644
--- a/includes/pages/user_messages.php
+++ b/includes/pages/user_messages.php
@@ -24,7 +24,7 @@ function user_unread_messages()
             ->count();
 
         if ($new_messages > 0) {
-            return ' <span class="badge danger">' . $new_messages . '</span>';
+            return ' <span class="badge bg-danger">' . $new_messages . '</span>';
         }
     }
     return '';
@@ -75,7 +75,7 @@ function user_messages()
             $receiver_user_source = $message->receiver;
 
             $messages_table_entry = [
-                'new'       => !$message->read ? '<span class="glyphicon glyphicon-envelope"></span>' : '',
+                'new'       => !$message->read ? icon('envelope') : '',
                 'timestamp' => $message->created_at->format(__('Y-m-d H:i')),
                 'from'      => User_Nick_render($sender_user_source),
                 'to'        => User_Nick_render($receiver_user_source),
@@ -87,14 +87,14 @@ function user_messages()
                     $messages_table_entry['actions'] = button(
                         page_link_to('user_messages', ['action' => 'read', 'id' => $message->id]),
                         __('mark as read'),
-                        'btn-xs'
+                        'btn-sm'
                     );
                 }
             } else {
                 $messages_table_entry['actions'] = button(
                     page_link_to('user_messages', ['action' => 'delete', 'id' => $message->id]),
                     __('delete message'),
-                    'btn-xs'
+                    'btn-sm'
                 );
             }
             $messages_table[] = $messages_table_entry;
diff --git a/includes/pages/user_settings.php b/includes/pages/user_settings.php
index 4469db47..32302af7 100644
--- a/includes/pages/user_settings.php
+++ b/includes/pages/user_settings.php
@@ -169,7 +169,13 @@ function user_settings()
 {
     $request = request();
     $config = config();
-    $themes = config('available_themes');
+    $themesConfig = config('themes');
+
+    $themes = [];
+
+    foreach ($themesConfig as $themeIndex => $themeConfig) {
+        $themes[$themeIndex] = $themeConfig['name'];
+    }
 
     $enable_tshirt_size = config('enable_tshirt_size');
     $tshirt_sizes = config('tshirt_sizes');
diff --git a/includes/pages/user_shifts.php b/includes/pages/user_shifts.php
index 4a539c16..9f719434 100644
--- a/includes/pages/user_shifts.php
+++ b/includes/pages/user_shifts.php
@@ -269,7 +269,7 @@ function view_user_shifts()
                         button(
                             'javascript: checkOwnTypes(\'selection_types\', ' . json_encode($ownTypes) . ')',
                             __('Own'),
-                            'hidden-print'
+                            'd-print-none'
                         ),
                     ]
                 ),
@@ -281,8 +281,9 @@ function view_user_shifts()
                     . __('Description of the jobs.')
                     . '</a>',
                 'shifts_table'  => msg() . $shiftCalendarRenderer->render(),
-                'ical_text'     => ical_hint(),
+                'ical_text'     => div('mt-3', ical_hint()),
                 'filter'        => __('Filter'),
+                'filter_toggle' => __('shifts.filter.toggle'),
                 'set_yesterday' => __('Yesterday'),
                 'set_today'     => __('Today'),
                 'set_tomorrow'  => __('Tomorrow'),
@@ -292,7 +293,7 @@ function view_user_shifts()
                 'set_next_8h'   => __('next 8h'),
                 'buttons'       => button(
                     public_dashboard_link(),
-                    glyph('dashboard') . __('Public Dashboard')
+                    icon('speedometer2') . __('Public Dashboard')
                 )
             ])
         ])
@@ -318,7 +319,9 @@ function ical_hint()
             page_link_to('shifts_json_export', ['key' => $user->api_key]),
             page_link_to('user_myshifts', ['reset' => 1])
         )
-        . ' <button class="btn btn-xs btn-danger" data-toggle="collapse" data-target="#collapseApiKey" aria-expanded="false" aria-controls="collapseApiKey">
+        . ' <button class="btn btn-sm btn-danger" type="button"
+            data-bs-toggle="collapse" data-bs-target="#collapseApiKey"
+            aria-expanded="false" aria-controls="collapseApiKey">
             ' . __('Show API Key') . '
             </button>'
         . '</p>'
@@ -351,8 +354,8 @@ function make_select($items, $selected, $name, $title = null, $additionalButtons
     }
 
     $buttons = [];
-    $buttons[] = button('javascript: checkAll(\'selection_' . $name . '\', true)', __('All'), 'hidden-print');
-    $buttons[] = button('javascript: checkAll(\'selection_' . $name . '\', false)', __('None'), 'hidden-print');
+    $buttons[] = button('javascript: checkAll(\'selection_' . $name . '\', true)', __('All'), 'd-print-none');
+    $buttons[] = button('javascript: checkAll(\'selection_' . $name . '\', false)', __('None'), 'd-print-none');
     $buttons = array_merge($buttons, $additionalButtons);
 
     $html .= buttons($buttons);
@@ -362,7 +365,7 @@ function make_select($items, $selected, $name, $title = null, $additionalButtons
             . '<label><input type="checkbox" name="' . $name . '[]" value="' . $i['id'] . '" '
             . (in_array($i['id'], $selected) ? ' checked="checked"' : '')
             . ' > ' . $i['name'] . '</label>'
-            . (!isset($i['enabled']) || $i['enabled'] ? '' : glyph('lock'))
+            . (!isset($i['enabled']) || $i['enabled'] ? '' : icon('lock'))
             . '</div>';
     }
     $html .= '<div id="selection_' . $name . '" class="selection ' . $name . '">' . "\n";
diff --git a/includes/sys_form.php b/includes/sys_form.php
index 82dcb3bb..7b21f1c4 100644
--- a/includes/sys_form.php
+++ b/includes/sys_form.php
@@ -29,14 +29,12 @@ function form_spinner($name, $label, $value)
     return form_element($label, '
         <div class="input-group">
             <input id="spinner-' . $name . '" class="form-control" name="' . $name . '" value="' . $value . '" />
-            <div class="input-group-btn">
-                <button id="spinner-' . $name . '-down" class="btn btn-default" type="button">
-                    <span class="glyphicon glyphicon-minus"></span>
-                </button>
-                <button id="spinner-' . $name . '-up" class="btn btn-default" type="button">
-                    <span class="glyphicon glyphicon-plus"></span>
-                </button>
-            </div>
+            <button id="spinner-' . $name . '-down" class="btn btn-secondary" type="button">
+                ' . icon('dash-lg') . '
+            </button>
+            <button id="spinner-' . $name . '-up" class="btn btn-secondary" type="button">
+                ' . icon('plus-lg') . '
+            </button>
         </div>
         <script type="text/javascript">
             $(\'#spinner-' . $name . '-down\').click(function() {
@@ -72,7 +70,7 @@ function form_date($name, $label, $value, $start_date = '', $end_date = '')
     return form_element($label, '
     <div class="input-group date" id="' . $dom_id . '" data-min-date="' . $start_date . '" data-max-date="' . $end_date . '">
         <input type="date" placeholder="YYYY-MM-DD" name="' . $name . '" class="form-control" value="' . htmlspecialchars($value) . '" autocomplete="off">'
-        . '<span class="input-group-addon">' . glyph('th') . '</span>
+        . '<span class="input-group-text">' . icon('grid-3x3-gap-fill') . '</span>
     </div>
     ', $dom_id);
 }
@@ -94,12 +92,12 @@ function form_datetime(string $name, string $label, $value)
     }
 
     return form_element($label, sprintf('
-    <div class="input-group datetime" id="%s">
+    <div class="input-group datetime" id="%s" data-target-input="nearest">
         <input type="datetime-local" placeholder="YYYY-MM-DD HH:MM" name="%s"
-            class="form-control" value="%s" autocomplete="off">'
-        . '<span class="input-group-addon">' . glyph('th') . '</span>
+            class="form-control" value="%s" autocomplete="off" data-target="#%s">'
+        . '<span class="input-group-text">' . icon('grid-3x3-gap-fill') . '</span>
     </div>
-    ', $dom_id, $name, htmlspecialchars($value ? $value->format('Y-m-d H:i') : '')), $dom_id);
+    ', $dom_id, $name, htmlspecialchars($value ? $value->format('Y-m-d H:i') : ''), $dom_id), $dom_id);
 }
 
 /**
@@ -214,7 +212,7 @@ function form_radio($name, $label, $selected, $value)
 function form_info($label, $text = '')
 {
     if ($label == '') {
-        return '<span class="help-block">' . glyph('info-sign') . $text . '</span>';
+        return '<span class="help-block">' . icon('info-circle') . $text . '</span>';
     }
     if ($text == '') {
         return '<h4>' . $label . '</h4>';
@@ -257,10 +255,11 @@ function form_submit($name, $label, $class = '', $wrapForm = true, $buttonType =
  * @param bool        $disabled
  * @param int|null    $maxlength
  * @param string|null $autocomplete
+ * @param string|null $class
  *
  * @return string
  */
-function form_text($name, $label, $value, $disabled = false, $maxlength = null, $autocomplete = null)
+function form_text($name, $label, $value, $disabled = false, $maxlength = null, $autocomplete = null, $class = '')
 {
     $disabled = $disabled ? ' disabled="disabled"' : '';
     $maxlength = $maxlength ? ' maxlength=' . (int)$maxlength : '';
@@ -270,7 +269,8 @@ function form_text($name, $label, $value, $disabled = false, $maxlength = null,
         $label,
         '<input class="form-control" id="form_' . $name . '" type="text" name="' . $name
         . '" value="' . htmlspecialchars($value) . '"' . $maxlength . $disabled . $autocomplete . '/>',
-        'form_' . $name
+        'form_' . $name,
+        $class
     );
 }
 
@@ -404,14 +404,16 @@ function form_textarea($name, $label, $value, $disabled = false)
  * @param string[] $values
  * @param string   $selected
  * @param string   $selectText
+ * @param string   $class
  * @return string
  */
-function form_select($name, $label, $values, $selected, $selectText = '')
+function form_select($name, $label, $values, $selected, $selectText = '', $class = '')
 {
     return form_element(
         $label,
         html_select_key('form_' . $name, $name, $values, $selected, $selectText),
-        'form_' . $name
+        'form_' . $name,
+        $class
     );
 }
 
@@ -421,15 +423,21 @@ function form_select($name, $label, $values, $selected, $selectText = '')
  * @param string $label
  * @param string $input
  * @param string $for
+ * @param string $class
  * @return string
  */
-function form_element($label, $input, $for = '')
+function form_element($label, $input, $for = '', $class = '')
 {
+    $class = $class ? ' ' . $class : '';
+
     if (empty($label)) {
-        return '<div class="form-group">' . $input . '</div>';
+        return '<div class="mb-3' . $class . '">' . $input . '</div>';
     }
 
-    return '<div class="form-group">' . '<label for="' . $for . '">' . $label . '</label>' . $input . '</div>';
+    return '<div class="mb-3' . $class . '">'
+        . '<label class="form-label" for="' . $for . '">' . $label . '</label>'
+        . $input
+        . '</div>';
 }
 
 /**
diff --git a/includes/sys_menu.php b/includes/sys_menu.php
index b6dec73c..510cb11e 100644
--- a/includes/sys_menu.php
+++ b/includes/sys_menu.php
@@ -60,24 +60,24 @@ function make_user_submenu()
     $user_submenu = make_language_select();
 
     if (auth()->can('user_settings') || auth()->can('logout')) {
-        $user_submenu[] = toolbar_item_divider();
+        $user_submenu[] = toolbar_dropdown_item_divider();
     }
 
     if (auth()->can('user_settings')) {
-        $user_submenu[] = toolbar_item_link(
+        $user_submenu[] = toolbar_dropdown_item(
             page_link_to('user_settings'),
-            'list-alt',
             __('Settings'),
-            $page == 'user_settings'
+            $page == 'user_settings',
+            'gear'
         );
     }
 
     if (auth()->can('logout')) {
-        $user_submenu[] = toolbar_item_link(
+        $user_submenu[] = toolbar_dropdown_item(
             page_link_to('logout'),
-            'log-out',
             __('Logout'),
-            $page == 'logout'
+            $page == 'logout',
+            'box-arrow-left',
         );
     }
 
@@ -116,7 +116,7 @@ function make_navigation()
         // path              => [name, permission]
         'admin_arrive'       => 'Arrive angels',
         'admin_active'       => 'Active angels',
-        'admin_user'         => 'All Angels',
+        'users'              => ['All Angels', 'admin_user'],
         'admin_free'         => 'Free angels',
         'admin/questions'    => ['Answer questions', 'question.edit'],
         'shifttypes'         => 'Shifttypes',
@@ -138,9 +138,8 @@ function make_navigation()
         }
 
         $title = ((array)$options)[0];
-        $admin_menu[] = toolbar_item_link(
+        $admin_menu[] = toolbar_dropdown_item(
             page_link_to($menu_page),
-            '',
             __($title),
             $menu_page == $page
         );
@@ -150,7 +149,7 @@ function make_navigation()
         $menu[] = toolbar_dropdown('', __('Admin'), $admin_menu);
     }
 
-    return '<ul class="nav navbar-nav">' . join("\n", $menu) . '</ul>';
+    return '<ul class="navbar-nav mb-2 mb-lg-0">' . join("\n", $menu) . '</ul>';
 }
 
 /**
@@ -187,13 +186,13 @@ function make_room_navigation($menu)
     $rooms = Rooms();
     $room_menu = [];
     if (auth()->can('admin_rooms')) {
-        $room_menu[] = toolbar_item_link(page_link_to('admin_rooms'), 'list', __('Manage rooms'));
+        $room_menu[] = toolbar_dropdown_item(page_link_to('admin_rooms'), __('Manage rooms'), false, 'list');
     }
     if (count($room_menu) > 0) {
-        $room_menu[] = toolbar_item_divider();
+        $room_menu[] = toolbar_dropdown_item_divider();
     }
     foreach ($rooms as $room) {
-        $room_menu[] = toolbar_item_link(room_link($room), 'map-marker', $room->name);
+        $room_menu[] = toolbar_dropdown_item(room_link($room), $room->name, false, 'geo-alt');
     }
     if (count($room_menu) > 0) {
         $menu[] = toolbar_dropdown('map-marker', __('Rooms'), $room_menu);
@@ -215,9 +214,8 @@ function make_language_select()
     foreach (config('locales') as $locale => $name) {
         $url = url($request->getPathInfo(), ['set-locale' => $locale]);
 
-        $items[] = toolbar_item_link(
+        $items[] = toolbar_dropdown_item(
             htmlspecialchars($url),
-            '',
             $name,
             $locale == $activeLocale
         );
@@ -241,7 +239,7 @@ function admin_new_questions()
         return null;
     }
 
-    return '<a href="' . page_link_to('/admin/questions') . '">'
+    return '<a class="text-info" href="' . page_link_to('/admin/questions') . '">'
         . __('There are unanswered questions!')
         . '</a>';
 }
diff --git a/includes/sys_template.php b/includes/sys_template.php
index 79e32531..c5eb3835 100644
--- a/includes/sys_template.php
+++ b/includes/sys_template.php
@@ -1,5 +1,7 @@
 <?php
 
+use Illuminate\Support\Str;
+
 /**
  * Render a stat for dashborad (big number with label).
  * If no style given, style is danger if number > 0, and success if number == 0.
@@ -18,7 +20,7 @@ function stats($label, $number, $style = null)
             $style = 'success';
         }
     }
-    return div('stats stats-' . $style, [
+    return div('col stats stats-' . $style, [
         $label,
         div('number', [
             $number
@@ -38,28 +40,34 @@ function tabs($tabs, $selected = 0)
     $tab_header = [];
     $tab_content = [];
     foreach ($tabs as $header => $content) {
-        $class = '';
+        $active = false;
         $id = $header;
         $href = '#' . $id;
         if (count($tab_header) == $selected) {
-            $class = 'active';
+            $active = true;
         }
         if (is_array($content)) {
             $href = $content['href'];
             $content = null;
             $id = null;
         }
-        $tab_header[] = '<li role="presentation" class="' . $class . '">
-                <a href="'. $href . '"'
-            . ($id ? ' aria-controls="' . $id . '" role="tab" data-toggle="tab"' : '')
+        $tab_header[] = '<li role="presentation" class="nav-item">
+                <a href="'. $href . '" class="nav-link' . ($active ? ' active' : '') . '" role="tab"'
+            . ($id ? ' id="' . $id . '-tab"' : '')
+            . ($id ? ' aria-controls="' . $id . '" data-bs-target="#' . $id . '" data-bs-toggle="tab" role="tab"' : '')
+            . ($id && $active ? ' aria-selected="true"' : ' aria-selected="false"')
             . '>'
             . $header . '</a></li>';
-        $tab_content[] = $content ? '<div role="tabpanel" class="tab-pane ' . $class . '" id="' . $id . '">'
+        $tab_content[] = $content
+            ? '<div role="tabpanel" class="tab-pane' . ($active ? ' show active' : '') . '" id="' . $id . '"'
+            . ' aria-labelledby="' . $id . '-tab"'
+            . '>'
             . $content
-            . '</div>' : '';
+            . '</div>'
+            : '';
     }
     return div('', [
-        '<ul class="nav nav-tabs" role="tablist">' . join($tab_header) . '</ul>',
+        '<ul class="nav nav-tabs mb-3" role="tablist">' . join($tab_header) . '</ul>',
         '<div class="tab-content">' . join($tab_content) . '</div>'
     ]);
 }
@@ -82,9 +90,9 @@ function mute($text)
  * @param string $class   default, primary, info, success, warning, danger
  * @return string
  */
-function label($content, $class = 'default')
+function badge($content, $class = 'default')
 {
-    return '<span class="label label-' . $class . '">' . $content . '</span>';
+    return '<span class="badge rounded-pill bg-' . $class . '">' . $content . '</span>';
 }
 
 /**
@@ -108,14 +116,16 @@ function progress_bar($valuemin, $valuemax, $valuenow, $class = '', $content = '
 }
 
 /**
- * Render glyphicon
+ * Render bootstrap icon
+ *
+ * @param string $icon_name
+ * @param string $class
  *
- * @param string $glyph_name
  * @return string
  */
-function glyph($glyph_name)
+function icon(string $icon_name, string $class = ''): string
 {
-    return ' <span class="glyphicon glyphicon-' . $glyph_name . '"></span> ';
+    return ' <span class="bi bi-' . $icon_name . ($class ? ' ' . $class : '') . '"></span> ';
 }
 
 /**
@@ -124,10 +134,10 @@ function glyph($glyph_name)
  * @param boolean $boolean
  * @return string
  */
-function glyph_bool($boolean)
+function icon_bool($boolean)
 {
     return '<span class="text-' . ($boolean ? 'success' : 'danger') . '">'
-        . glyph($boolean ? 'ok' : 'remove')
+        . icon($boolean ? 'check-lg' : 'x-lg')
         . '</span>';
 }
 
@@ -169,77 +179,98 @@ function toolbar_pills($items)
  * Render a link for a toolbar.
  *
  * @param string $href
- * @param string $glyphicon
+ * @param string $icon
  * @param string $label
- * @param bool   $selected
+ * @param bool   $active
  * @return string
  */
-function toolbar_item_link($href, $glyphicon, $label, $selected = false)
+function toolbar_item_link($href, $icon, $label, $active = false)
 {
-    return '<li class="' . ($selected ? 'active' : '') . '">'
-        . '<a href="' . $href . '">'
-        . ($glyphicon != '' ? '<span class="glyphicon glyphicon-' . $glyphicon . '"></span> ' : '')
+    return '<li class="nav-item">'
+        . '<a class="nav-link ' . ($active ? 'active' : '') . '" href="' . $href . '">'
+        . ($icon != '' ? '<span class="bi bi-' . $icon . '"></span> ' : '')
         . $label
         . '</a>'
         . '</li>';
 }
 
-/**
- * @return string
- */
-function toolbar_item_divider()
+function toolbar_dropdown_item(string $href, string $label, bool $active, string $icon = null): string
 {
-    return '<li class="divider"></li>';
+    return strtr(
+        '<li><a class="dropdown-item{active}" href="{href}">{icon} {label}</a></li>',
+        [
+            '{href}'   => $href,
+            '{icon}'   => $icon === null ? '' : '<i class="bi bi-' . $icon . '"></i>',
+            '{label}'  => $label,
+            '{active}' => $active ? ' active' : ''
+        ]
+    );
+}
+
+function toolbar_dropdown_item_divider(): string
+{
+    return '<li><hr class="dropdown-divider"></li>';
 }
 
 /**
- * @param string $glyphicon
+ * @param string $icon
  * @param string $label
  * @param array  $submenu
  * @param string $class
  * @return string
  */
-function toolbar_dropdown($glyphicon, $label, $submenu, $class = '')
+function toolbar_dropdown($icon, $label, $submenu, $class = ''): string
 {
-    return '<li class="dropdown ' . $class . '">'
-        . '<a href="#" class="dropdown-toggle" data-toggle="dropdown">'
-        . ($glyphicon != '' ? '<span class="glyphicon glyphicon-' . $glyphicon . '"></span> ' : '')
-        . $label
-        . '<span class="caret"></span></a>'
-        . '<ul class="dropdown-menu" role="menu">'
-        . join("\n", $submenu)
-        . '</ul></li>';
+    $template =<<<EOT
+<li class="nav-item dropdown {class}">
+    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+        {icon} {label}
+    </a>
+    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+        {submenu}
+    </ul>
+</li>
+EOT;
+
+    return strtr(
+        $template,
+        [
+            '{class}'   => $class,
+            '{label}'   => $label,
+            '{icon}'    => empty($icon) ? '' : '<i class="bi ' . $icon . '"></i>',
+            '{submenu}' => join("\n", $submenu)
+        ]
+    );
 }
 
 /**
- * @param string   $glyphicon
+ * @param string   $icon
  * @param string   $label
  * @param string[] $content
  * @param string   $class
+ *
  * @return string
  */
-function toolbar_popover($glyphicon, $label, $content, $class = '')
+function toolbar_popover($icon, $label, $content, $class = '')
 {
-    $dom_id = md5(microtime() . $glyphicon . $label);
-    return '<li class="dropdown messages ' . $class . '">'
-        . '<a id="' . $dom_id . '" href="#" tabindex="0">'
-        . ($glyphicon != '' ? '<span class="glyphicon glyphicon-' . $glyphicon . '"></span> ' : '')
+    $dom_id = md5(microtime() . $icon . $label);
+    return '<li class="nav-item nav-item--userhints d-flex align-items-center ' . $class . '">'
+        . '<a id="' . $dom_id . '" href="#" tabindex="0" class="nav-link">'
+        . ($icon ? icon($icon) : '')
         . $label
-        . ' <span class="caret"></span></a>'
+        . '<small class="bi bi-caret-down-fill"></small>'
+        . '</a>'
         . '<script type="text/javascript">
-                $(function(){
-                    $(\'#' . $dom_id . '\').popover({
-                        trigger: \'click\',
-                        html: true,
-                        content: \'' . addslashes(join('', $content)) . '\',
-                        placement: \'bottom\',
-                        container: \'#navbar-offcanvas\'
-                    })
-                });
+                new bootstrap.Popover(document.getElementById(\'' . $dom_id . '\'), {
+                    container: \'body\',
+                    html: true,
+                    content: \'' . addslashes(join('', $content)) . '\',
+                    placement: \'bottom\',
+                    customClass: \'popover--userhints\'
+                })
             </script></li>';
 }
 
-
 /**
  * Generiert HTML Code für eine "Seite".
  * Fügt dazu die übergebenen Elemente zusammen.
@@ -282,10 +313,10 @@ function description($data)
     $elements = [];
     foreach ($data as $label => $description) {
         if (!empty($label) && !empty($description)) {
-            $elements[] = '<dt>' . $label . '</dt><dd>' . $description . '</dd>';
+            $elements[] = '<dt class="col-sm-1">' . $label . '</dt><dd class="col-sm-11">' . $description . '</dd>';
         }
     }
-    return '<dl class="dl-horizontal">' . join($elements) . '</dl>';
+    return '<dl class="row">' . join($elements) . '</dl>';
 }
 
 /**
@@ -362,7 +393,11 @@ function render_table($columns, $rows, $data = true)
  */
 function button($href, $label, $class = '')
 {
-    return '<a href="' . $href . '" class="btn btn-default ' . $class . '">' . $label . '</a>';
+    if (!Str::contains(str_replace(['btn-sm', 'btn-xl'], '', $class), 'btn-')) {
+        $class = 'btn-secondary' . ($class ? ' ' . $class : '');
+    }
+
+    return '<a href="' . $href . '" class="btn ' . $class . '">' . $label . '</a>';
 }
 
 /**
@@ -375,20 +410,21 @@ function button($href, $label, $class = '')
  */
 function button_js($javascript, $label, $class = '')
 {
-    return '<a onclick="' . $javascript . '" href="#" class="btn btn-default ' . $class . '">' . $label . '</a>';
+    return '<a onclick="' . $javascript . '" href="#" class="btn btn-secondary ' . $class . '">' . $label . '</a>';
 }
 
 /**
- * Rendert einen Knopf mit Glyph
+ * Renders a button with an icon
  *
  * @param string $href
- * @param string $glyph
+ * @param string $icon
  * @param string $class
+ *
  * @return string
  */
-function button_glyph($href, $glyph, $class = '')
+function button_icon($href, $icon, $class = '')
 {
-    return button($href, glyph($glyph), $class);
+    return button($href, icon($icon), $class);
 }
 
 /**
@@ -399,7 +435,7 @@ function button_glyph($href, $glyph, $class = '')
  */
 function button_help($topic = '')
 {
-    return button(config('documentation_url') . $topic, glyph('question-sign'), 'btn-sm');
+    return button(config('documentation_url') . $topic, icon('question-circle'), 'btn-sm');
 }
 
 /**
@@ -410,7 +446,7 @@ function button_help($topic = '')
  */
 function buttons($buttons = [])
 {
-    return '<div class="form-group">' . table_buttons($buttons) . '</div>';
+    return '<div class="mb-3">' . table_buttons($buttons) . '</div>';
 }
 
 /**
diff --git a/includes/view/AngelTypes_view.php b/includes/view/AngelTypes_view.php
index d43e2d19..17d14a87 100644
--- a/includes/view/AngelTypes_view.php
+++ b/includes/view/AngelTypes_view.php
@@ -22,7 +22,7 @@ function AngelType_name_render($angeltype, $plain = false)
     }
 
     return '<a href="' . angeltype_link($angeltype['id']) . '">'
-        . ($angeltype['restricted'] ? glyph('book') : '') . $angeltype['name']
+        . ($angeltype['restricted'] ? icon('book') : '') . $angeltype['name']
         . '</a>';
 }
 
@@ -37,17 +37,17 @@ function AngelType_render_membership($user_angeltype)
     if (!empty($user_angeltype['user_angeltype_id'])) {
         if ($user_angeltype['restricted']) {
             if (empty($user_angeltype['confirm_user_id'])) {
-                return glyph('book') . __('Unconfirmed');
+                return icon('book') . __('Unconfirmed');
             } elseif ($user_angeltype['supporter']) {
-                return glyph_bool(true) . __('Supporter');
+                return icon_bool(true) . __('Supporter');
             }
-            return glyph_bool(true) . __('Member');
+            return icon_bool(true) . __('Member');
         } elseif ($user_angeltype['supporter']) {
-            return glyph_bool(true) . __('Supporter');
+            return icon_bool(true) . __('Supporter');
         }
-        return glyph_bool(true) . __('Member');
+        return icon_bool(true) . __('Member');
     }
-    return glyph_bool(false);
+    return icon_bool(false);
 }
 
 /**
@@ -60,8 +60,8 @@ function AngelType_delete_view($angeltype)
         info(sprintf(__('Do you want to delete angeltype %s?'), $angeltype['name']), true),
         form([
             buttons([
-                button(page_link_to('angeltypes'), glyph('remove') . __('cancel')),
-                form_submit('delete', glyph('ok') . __('delete'), 'btn-danger', false),
+                button(page_link_to('angeltypes'), icon('x-lg') . __('cancel')),
+                form_submit('delete', icon('trash') . __('delete'), 'btn-danger', false),
             ])
         ]),
     ], true);
@@ -142,7 +142,7 @@ function AngelType_view_buttons($angeltype, $user_angeltype, $admin_angeltypes,
     if ($angeltype['requires_driver_license']) {
         $buttons[] = button(
             user_driver_license_edit_link($user),
-            glyph('road') . __('my driving license')
+            icon('wallet2') . __('my driving license')
         );
     }
 
@@ -205,13 +205,13 @@ function AngelType_view_members($angeltype, $members, $admin_user_angeltypes, $a
         $member->name = User_Nick_render($member) . User_Pronoun_render($member);
         $member['dect'] = $member->contact->dect;
         if ($angeltype['requires_driver_license']) {
-            $member['wants_to_drive'] = glyph_bool($member['wants_to_drive']);
-            $member['has_car'] = glyph_bool($member['has_car']);
-            $member['has_license_car'] = glyph_bool($member['has_license_car']);
-            $member['has_license_3_5t_transporter'] = glyph_bool($member['has_license_3_5t_transporter']);
-            $member['has_license_7_5t_truck'] = glyph_bool($member['has_license_7_5t_truck']);
-            $member['has_license_12_5t_truck'] = glyph_bool($member['has_license_12_5t_truck']);
-            $member['has_license_forklift'] = glyph_bool($member['has_license_forklift']);
+            $member['wants_to_drive'] = icon_bool($member['wants_to_drive']);
+            $member['has_car'] = icon_bool($member['has_car']);
+            $member['has_license_car'] = icon_bool($member['has_license_car']);
+            $member['has_license_3_5t_transporter'] = icon_bool($member['has_license_3_5t_transporter']);
+            $member['has_license_7_5t_truck'] = icon_bool($member['has_license_7_5t_truck']);
+            $member['has_license_12_5t_truck'] = icon_bool($member['has_license_12_5t_truck']);
+            $member['has_license_forklift'] = icon_bool($member['has_license_forklift']);
         }
 
         if ($angeltype['restricted'] && empty($member['confirm_user_id'])) {
@@ -222,7 +222,7 @@ function AngelType_view_members($angeltype, $members, $admin_user_angeltypes, $a
                         ['action' => 'confirm', 'user_angeltype_id' => $member['user_angeltype_id']]
                     ),
                     __('confirm'),
-                    'btn-xs'
+                    'btn-sm'
                 ),
                 button(
                     page_link_to(
@@ -230,7 +230,7 @@ function AngelType_view_members($angeltype, $members, $admin_user_angeltypes, $a
                         ['action' => 'delete', 'user_angeltype_id' => $member['user_angeltype_id']]
                     ),
                     __('deny'),
-                    'btn-xs'
+                    'btn-sm'
                 )
             ]);
             $members_unconfirmed[] = $member;
@@ -244,7 +244,7 @@ function AngelType_view_members($angeltype, $members, $admin_user_angeltypes, $a
                             'supporter'         => 0
                         ]),
                         __('Remove supporter rights'),
-                        'btn-xs'
+                        'btn-sm'
                     )
                 ]);
             } else {
@@ -260,7 +260,7 @@ function AngelType_view_members($angeltype, $members, $admin_user_angeltypes, $a
                         'user_angeltype_id' => $member['user_angeltype_id'],
                         'supporter'         => 1
                     ]),
-                        __('Add supporter rights'), 'btn-xs')
+                        __('Add supporter rights'), 'btn-sm')
                         : '',
                     button(
                         page_link_to('user_angeltypes', [
@@ -268,7 +268,7 @@ function AngelType_view_members($angeltype, $members, $admin_user_angeltypes, $a
                             'user_angeltype_id' => $member['user_angeltype_id']
                         ]),
                         __('remove'),
-                        'btn-xs'
+                        'btn-sm'
                     )
                 ]);
             }
@@ -403,7 +403,7 @@ function AngelType_view_info(
     $info[] = '<h3>' . __('Description') . '</h3>';
     $parsedown = new Parsedown();
     if ($angeltype['description'] != '') {
-        $info[] = '<div class="well">' . $parsedown->parse($angeltype['description']) . '</div>';
+        $info[] = $parsedown->parse($angeltype['description']);
     }
 
     list($supporters, $members_confirmed, $members_unconfirmed) = AngelType_view_members(
@@ -455,11 +455,11 @@ function AngelType_view_info(
         $info[] = buttons([
             button(
                 page_link_to('user_angeltypes', ['action' => 'confirm_all', 'angeltype_id' => $angeltype['id']]),
-                glyph('ok') . __('confirm all')
+                icon('check-lg') . __('confirm all')
             ),
             button(
                 page_link_to('user_angeltypes', ['action' => 'delete_all', 'angeltype_id' => $angeltype['id']]),
-                glyph('remove') . __('deny all')
+                icon('trash') . __('deny all')
             )
         ]);
         $info[] = table($table_headers, $members_unconfirmed);
@@ -502,8 +502,8 @@ function AngelTypes_list_view($angeltypes, $admin_angeltypes)
         ]),
         table([
             'name'           => __('Name'),
-            'restricted'     => glyph('book') . __('Requires introduction'),
-            'no_self_signup' => glyph('share') . __('Self Sign Up Allowed'),
+            'restricted'     => icon('book') . __('Requires introduction'),
+            'no_self_signup' => icon('pencil-square') . __('Self Sign Up Allowed'),
             'membership'     => __('Membership'),
             'actions'        => ''
         ], $angeltypes)
@@ -553,7 +553,7 @@ function AngelTypes_about_view_angeltype($angeltype)
         );
     }
     if ($angeltype['description'] != '') {
-        $html .= '<div class="well">' . $parsedown->parse($angeltype['description']) . '</div>';
+        $html .= $parsedown->parse($angeltype['description']);
     }
     $html .= '<hr />';
 
@@ -581,9 +581,9 @@ function AngelTypes_about_view($angeltypes, $user_logged_in)
         $buttons[] = button(page_link_to('login'), __('Login'));
     }
 
-    $faqUrl = config('faq_url');
-    if (!empty($faqUrl)) {
-        $buttons[] = button($faqUrl, __('FAQ'), 'btn-primary');
+    $footerConfig = config('footer_items');
+    if (!empty($footerConfig['FAQ'])) {
+        $buttons[] = button($footerConfig['FAQ'], __('FAQ'), 'btn-primary');
     }
 
     $content = [
diff --git a/includes/view/PublicDashboard_view.php b/includes/view/PublicDashboard_view.php
index ab30b6cd..b07c8b25 100644
--- a/includes/view/PublicDashboard_view.php
+++ b/includes/view/PublicDashboard_view.php
@@ -34,33 +34,35 @@ function public_dashboard_view($stats, $free_shifts)
     $isFiltered = request()->get('filtered');
     $filter = collect(session()->get('shifts-filter'))->only(['rooms', 'types'])->toArray();
     return page([
-        div('public-dashboard', [
-            div('first', [
-                stats(__('Angels needed in the next 3 hrs'), $stats['needed-3-hours']),
-                stats(__('Angels needed for nightshifts'), $stats['needed-night']),
-                stats(__('Angels currently working'), $stats['angels-working'], 'default'),
-                stats(__('Hours to be worked'), $stats['hours-to-work'], 'default'),
-                '<script>
-                $(function() {
-                    setInterval(function() {
-                        $(\'#public-dashboard\').load(window.location.href + \' #public-dashboard\');
-                    }, 60000);
-                })
-            </script>'
-            ], 'statistics'),
-            $needed_angels
-        ], 'public-dashboard'),
+        div('wrapper', [
+            div('public-dashboard', [
+                div('first row', [
+                    stats(__('Angels needed in the next 3 hrs'), $stats['needed-3-hours']),
+                    stats(__('Angels needed for nightshifts'), $stats['needed-night']),
+                    stats(__('Angels currently working'), $stats['angels-working'], 'default'),
+                    stats(__('Hours to be worked'), $stats['hours-to-work'], 'default'),
+                    '<script>
+                    $(function() {
+                        setInterval(function() {
+                            $(\'#content .wrapper\').load(window.location.href + \' #public-dashboard\');
+                        }, 60000);
+                    })
+                    </script>'
+                ], 'statistics'),
+                $needed_angels
+            ], 'public-dashboard'),
+        ]),
         div('first col-md-12 text-center', [buttons([
             button_js(
                 '
                 $(\'#navbar-collapse-1,.navbar-nav,.navbar-toggle,#footer,#fullscreen-button\').remove();
                 $(\'.navbar-brand\').append(\' ' . __('Public Dashboard') . '\');
                 ',
-                glyph('fullscreen') . __('Fullscreen')
+                icon('fullscreen') . __('Fullscreen')
             ),
             auth()->user() ? button(
                 public_dashboard_link($isFiltered ? [] : ['filtered' => 1] + $filter),
-                glyph('filter') . ($isFiltered ? __('All') : __('Filtered'))
+                icon('filter') . ($isFiltered ? __('All') : __('Filtered'))
             ) : ''
         ])], 'fullscreen-button'),
     ]);
@@ -74,27 +76,32 @@ function public_dashboard_view($stats, $free_shifts)
  */
 function public_dashboard_shift_render($shift)
 {
-    $panel_body = glyph('time') . $shift['start'] . ' - ' . $shift['end'];
+    $panel_body = icon('clock') . $shift['start'] . ' - ' . $shift['end'];
     $panel_body .= ' (' . $shift['duration'] . '&nbsp;h)';
 
-    $panel_body .= '<br>' . glyph('tasks') . $shift['shifttype_name'];
+    $panel_body .= '<br>' . icon('list-task') . $shift['shifttype_name'];
     if (!empty($shift['title'])) {
         $panel_body .= ' (' . $shift['title'] . ')';
     }
 
-    $panel_body .= '<br>' . glyph('map-marker') . $shift['room_name'];
+    $panel_body .= '<br>' . icon('geo-alt') . $shift['room_name'];
 
     foreach ($shift['needed_angels'] as $needed_angels) {
-        $panel_body .= '<br>' . glyph('user')
+        $panel_body .= '<br>' . icon('person')
             . '<span class="text-' . $shift['style'] . '">'
             . $needed_angels['need'] . ' &times; ' . $needed_angels['angeltype_name']
             . '</span>';
     }
 
-    return div('col-md-3', [
-        div('dashboard-panel panel panel-' . $shift['style'], [
-            div('panel-body', [
-                '<a class="panel-link" href="' . shift_link($shift) . '"></a>',
+    $type = 'bg-dark';
+    if (theme_type() == 'light') {
+        $type = 'bg-light';
+    }
+
+    return div('col-md-3 mb-3', [
+        div('dashboard-card card border-' . $shift['style'] . ' ' . $type, [
+            div('card-body', [
+                '<a class="card-link" href="' . shift_link($shift) . '"></a>',
                 $panel_body
             ])
         ])
diff --git a/includes/view/Rooms_view.php b/includes/view/Rooms_view.php
index 5bd81bc8..ee36a541 100644
--- a/includes/view/Rooms_view.php
+++ b/includes/view/Rooms_view.php
@@ -24,7 +24,7 @@ function Room_view(Room $room, ShiftsFilterRenderer $shiftsFilterRenderer, Shift
     if ($room->description) {
         $description = '<h3>' . __('Description') . '</h3>';
         $parsedown = new Parsedown();
-        $description .= '<div class="well">' . $parsedown->parse($room->description) . '</div>';
+        $description .= $parsedown->parse($room->description);
     }
 
     $tabs = [];
@@ -51,7 +51,7 @@ function Room_view(Room $room, ShiftsFilterRenderer $shiftsFilterRenderer, Shift
         $selected_tab = count($tabs) - 1;
     }
 
-    return page_with_title(glyph('map-marker') . $room->name, [
+    return page_with_title(icon('geo-alt') . $room->name, [
         $assignNotice,
         $description,
         auth()->can('admin_rooms') ? buttons([
@@ -78,8 +78,8 @@ function Room_view(Room $room, ShiftsFilterRenderer $shiftsFilterRenderer, Shift
 function Room_name_render(Room $room)
 {
     if (auth()->can('view_rooms')) {
-        return '<a href="' . room_link($room) . '">' . glyph('map-marker') . $room->name . '</a>';
+        return '<a href="' . room_link($room) . '">' . icon('geo-alt') . $room->name . '</a>';
     }
 
-    return glyph('map-marker') . $room->name;
+    return icon('geo-alt') . $room->name;
 }
diff --git a/includes/view/ShiftCalendarRenderer.php b/includes/view/ShiftCalendarRenderer.php
index 452bffa0..3f7616d1 100644
--- a/includes/view/ShiftCalendarRenderer.php
+++ b/includes/view/ShiftCalendarRenderer.php
@@ -204,8 +204,13 @@ class ShiftCalendarRenderer
             $rendered_until += ShiftCalendarRenderer::SECONDS_PER_ROW;
         }
 
+        $bg = '';
+        if (theme_type() === 'light') {
+            $bg = 'bg-light';
+        }
+
         return div('lane', [
-            div('header', $lane->getHeader()),
+            div('header ' . $bg, $lane->getHeader()),
             $html
         ]);
     }
@@ -244,8 +249,13 @@ class ShiftCalendarRenderer
      */
     private function renderTimeLane()
     {
+        $bg = '';
+        if (theme_type() === 'light') {
+            $bg = 'bg-light';
+        }
+
         $time_slot = [
-            div('header', [
+            div('header ' . $bg, [
                 __('Time')
             ])
         ];
@@ -311,12 +321,12 @@ class ShiftCalendarRenderer
      */
     private function renderLegend()
     {
-        return div('legend', [
-            label(__('Your shift'), 'primary'),
-            label(__('Help needed'), 'danger'),
-            label(__('Other angeltype needed / collides with my shifts'), 'warning'),
-            label(__('Shift is full'), 'success'),
-            label(__('Shift running/ended or user not arrived/allowed'), 'default')
+        return div('legend mt-3', [
+            badge(__('Your shift'), 'primary'),
+            badge(__('Help needed'), 'danger'),
+            badge(__('Other angeltype needed / collides with my shifts'), 'warning'),
+            badge(__('Shift is full'), 'success'),
+            badge(__('Shift running/ended or user not arrived/allowed'), 'secondary')
         ]);
     }
 }
diff --git a/includes/view/ShiftCalendarShiftRenderer.php b/includes/view/ShiftCalendarShiftRenderer.php
index 5f2bb328..391ebe62 100644
--- a/includes/view/ShiftCalendarShiftRenderer.php
+++ b/includes/view/ShiftCalendarShiftRenderer.php
@@ -5,6 +5,9 @@ namespace Engelsystem;
 use Engelsystem\Models\Room;
 use Engelsystem\Models\User\User;
 
+use function config;
+use function theme_type;
+
 /**
  * Renders a single shift for the shift calendar
  */
@@ -23,7 +26,7 @@ class ShiftCalendarShiftRenderer
     {
         $info_text = '';
         if ($shift['title'] != '') {
-            $info_text = glyph('info-sign') . $shift['title'] . '<br>';
+            $info_text = icon('info-circle') . $shift['title'] . '<br>';
         }
         list($shift_signup_state, $shifts_row) = $this->renderShiftNeededAngeltypes(
             $shift,
@@ -48,10 +51,10 @@ class ShiftCalendarShiftRenderer
                 . ($blocks * ShiftCalendarRenderer::BLOCK_HEIGHT - ShiftCalendarRenderer::MARGIN)
                 . 'px;',
                 div(
-                    'shift panel panel-' . $class,
+                    'shift card bg-' . $class,
                     [
                         $this->renderShiftHead($shift, $class, $shift_signup_state->getFreeEntries()),
-                        div('panel-body', [
+                        div('card-body ' . $this->classBg(), [
                             $info_text,
                             Room_name_render($room)
                         ]),
@@ -79,7 +82,7 @@ class ShiftCalendarShiftRenderer
             case ShiftSignupState::NOT_ARRIVED:
             case ShiftSignupState::NOT_YET:
             case ShiftSignupState::SHIFT_ENDED:
-                return 'default';
+                return 'light';
 
             case ShiftSignupState::ANGELTYPE:
             case ShiftSignupState::COLLIDES:
@@ -88,7 +91,7 @@ class ShiftCalendarShiftRenderer
             case ShiftSignupState::FREE:
                 return 'danger';
             default:
-                return '';
+                return 'secondary';
         }
     }
 
@@ -133,17 +136,17 @@ class ShiftCalendarShiftRenderer
         }
 
         if (auth()->can('user_shifts_admin')) {
-            $html .= '<li class="list-group-item">';
+            $html .= '<li class="list-group-item d-flex align-items-center ' . $this->classBg() . '">';
             $html .= button(shift_entry_create_link_admin($shift),
-                glyph('plus') . __('Add more angels'),
-                'btn-xs'
+                icon('plus-lg') . __('Add more angels'),
+                'btn-sm'
             );
             $html .= '</li>';
         }
         if ($html != '') {
             return [
                 $shift_signup_state,
-                '<ul class="list-group">' . $html . '</ul>'
+                '<ul class="list-group list-group-flush">' . $html . '</ul>'
             ];
         }
 
@@ -167,8 +170,8 @@ class ShiftCalendarShiftRenderer
     {
         $entry_list = [];
         foreach ($shift_entries as $entry) {
-            $style = $entry['freeloaded'] ? ' text-decoration: line-through;' : '';
-            $entry_list[] = '<span style="' . $style . '">' . User_Nick_render($entry) . '</span>';
+            $class = $entry['freeloaded'] ? 'text-decoration-line-through' : '';
+            $entry_list[] = '<span class="text-nowrap ' . $class . '">' . User_Nick_render($entry) . '</span>';
         }
         $shift_signup_state = Shift_signup_allowed(
             $user,
@@ -186,14 +189,14 @@ class ShiftCalendarShiftRenderer
             case ShiftSignupState::ADMIN:
             case ShiftSignupState::FREE:
                 // When admin or free display a link + button for sign up
-                $entry_list[] = '<a href="'
+                $entry_list[] = '<a class="me-1 text-nowrap" href="'
                     . shift_entry_create_link($shift, $angeltype)
                     . '">'
                     . $inner_text
                     . '</a> '
                     . button(
                         shift_entry_create_link($shift, $angeltype),
-                        __('Sign up'), 'btn-xs btn-primary hidden-print'
+                        __('Sign up'), 'btn-sm btn-primary text-nowrap d-print-none'
                     );
                 break;
 
@@ -214,7 +217,7 @@ class ShiftCalendarShiftRenderer
             case ShiftSignupState::ANGELTYPE:
                 if ($angeltype['restricted'] == 1) {
                     // User has to be confirmed on the angeltype first
-                    $entry_list[] = $inner_text . glyph('book');
+                    $entry_list[] = $inner_text . icon('book');
                 } else {
                     // Add link to join the angeltype first
                     $entry_list[] = $inner_text . '<br />'
@@ -224,7 +227,7 @@ class ShiftCalendarShiftRenderer
                                 ['action' => 'add', 'angeltype_id' => $angeltype['id']]
                             ),
                             sprintf(__('Become %s'), $angeltype['name']),
-                            'btn-xs'
+                            'btn-sm'
                         );
                 }
                 break;
@@ -240,8 +243,8 @@ class ShiftCalendarShiftRenderer
                 break;
         }
 
-        $shifts_row = '<li class="list-group-item">';
-        $shifts_row .= '<strong>' . AngelType_name_render($angeltype) . ':</strong> ';
+        $shifts_row = '<li class="list-group-item d-flex flex-wrap align-items-center ' . $this->classBg() . '">';
+        $shifts_row .= '<strong class="me-1">' . AngelType_name_render($angeltype) . ':</strong> ';
         $shifts_row .= join(', ', $entry_list);
         $shifts_row .= '</li>';
         return [
@@ -250,6 +253,20 @@ class ShiftCalendarShiftRenderer
         ];
     }
 
+    /**
+     * Return the corresponding bg class
+     *
+     * @return string
+     */
+    private function classBg(): string
+    {
+        if (theme_type() === 'light') {
+            return 'bg-white';
+        }
+
+        return 'bg-dark';
+    }
+
     /**
      * Renders the shift header
      *
@@ -261,16 +278,16 @@ class ShiftCalendarShiftRenderer
     {
         $header_buttons = '';
         if (auth()->can('admin_shifts')) {
-            $header_buttons = '<div class="pull-right hidden-print">' . table_buttons([
+            $header_buttons = '<div class="ms-auto d-print-none">' . table_buttons([
                     button(
                         page_link_to('user_shifts', ['edit_shift' => $shift['SID']]),
-                        glyph('edit'),
-                        "btn-$class btn-xs"
+                        icon('pencil'),
+                        "btn-$class btn-sm border-light"
                     ),
                     button(
                         page_link_to('user_shifts', ['delete_shift' => $shift['SID']]),
-                        glyph('trash'),
-                        "btn-$class btn-xs"
+                        icon('trash'),
+                        "btn-$class btn-sm border-light"
                     )
                 ]) . '</div>';
         }
@@ -278,12 +295,12 @@ class ShiftCalendarShiftRenderer
             . date('H:i', $shift['end']) . ' &mdash; '
             . $shift['name'];
 
-        if($needed_angeltypes_count > 0) {
-            $shift_heading = '<span class="badge">' . $needed_angeltypes_count . '</span> ' . $shift_heading;
+        if ($needed_angeltypes_count > 0) {
+            $shift_heading = '<span class="badge bg-light text-danger me-1">' . $needed_angeltypes_count . '</span> ' . $shift_heading;
         }
 
-        return div('panel-heading', [
-            '<a href="' . shift_link($shift) . '">' . $shift_heading . '</a>',
+        return div('card-header d-flex align-items-center', [
+            '<a class="d-flex align-items-center text-white" href="' . shift_link($shift) . '">' . $shift_heading . '</a>',
             $header_buttons
         ]);
     }
diff --git a/includes/view/ShiftEntry_view.php b/includes/view/ShiftEntry_view.php
index eed89ded..b19b12a4 100644
--- a/includes/view/ShiftEntry_view.php
+++ b/includes/view/ShiftEntry_view.php
@@ -25,8 +25,8 @@ function ShiftEntry_delete_view_admin($shift, $angeltype, $signoff_user)
         ), true),
         form([
             buttons([
-                button(user_link($signoff_user->id), glyph('remove') . __('cancel')),
-                form_submit('delete', glyph('ok') . __('delete'), 'btn-danger', false)
+                button(user_link($signoff_user->id), icon('x-lg') . __('cancel')),
+                form_submit('delete', icon('trash') . __('delete'), 'btn-danger', false)
             ]),
         ]),
     ]);
@@ -54,8 +54,8 @@ function ShiftEntry_delete_view($shift, $angeltype, $signoff_user_id)
 
         form([
             buttons([
-                button(user_link($signoff_user_id), glyph('remove') . __('cancel')),
-                form_submit('delete', glyph('ok') . __('delete'), 'btn-danger', false),
+                button(user_link($signoff_user_id), icon('x-lg') . __('cancel')),
+                form_submit('delete', icon('trash') . __('delete'), 'btn-danger', false),
             ]),
         ]),
     ]);
@@ -91,7 +91,7 @@ function ShiftEntry_create_view_admin($shift, Room $room, $angeltype, $angeltype
             form([
                 form_select('angeltype_id', __('Angeltype'), $angeltypes_select, $angeltype['id']),
                 form_select('user_id', __('User'), $users_select, $signup_user->id),
-                form_submit('submit', glyph('ok') . __('Save'))
+                form_submit('submit', icon('check-lg') . __('Save'))
             ])
         ]);
 }
@@ -116,7 +116,7 @@ function ShiftEntry_create_view_supporter($shift, Room $room, $angeltype, $signu
                 AngelType_name_render($angeltype)), true),
             form([
                 form_select('user_id', __('User'), $users_select, $signup_user->id),
-                form_submit('submit', glyph('ok') . __('Save'))
+                form_submit('submit', icon('check-lg') . __('Save'))
             ])
         ]);
 }
@@ -139,7 +139,7 @@ function ShiftEntry_create_view_user($shift, Room $room, $angeltype, $comment)
             info(sprintf(__('Do you want to sign up for this shift as %s?'), AngelType_name_render($angeltype)), true),
             form([
                 form_textarea('comment', __('Comment (for your eyes only):'), $comment),
-                form_submit('submit', glyph('ok') . __('Save'))
+                form_submit('submit', icon('check-lg') . __('Save'))
             ])
         ]);
 }
diff --git a/includes/view/ShiftTypes_view.php b/includes/view/ShiftTypes_view.php
index 3e10be29..5a4b1322 100644
--- a/includes/view/ShiftTypes_view.php
+++ b/includes/view/ShiftTypes_view.php
@@ -22,10 +22,10 @@ function ShiftType_delete_view($shifttype)
         info(sprintf(__('Do you want to delete shifttype %s?'), $shifttype['name']), true),
         form([
             buttons([
-                button(page_link_to('shifttypes'), glyph('remove') . __('cancel')),
+                button(page_link_to('shifttypes'), icon('x-lg') . __('cancel')),
                 form_submit(
                     'delete',
-                    glyph('ok') . __('delete'),
+                    icon('trash') . __('delete'),
                     'btn-danger',
                     false
                 ),
@@ -121,12 +121,12 @@ function ShiftTypes_list_view($shifttypes)
                     ['action' => 'edit', 'shifttype_id' => $shifttype['id']]
                 ),
                 __('edit'),
-                'btn-xs'
+                'btn-sm'
             ),
             button(
                 page_link_to('shifttypes', ['action' => 'delete', 'shifttype_id' => $shifttype['id']]),
                 __('delete'),
-                'btn-xs'
+                'btn-sm'
             )
         ]);
     }
diff --git a/includes/view/ShiftsFilterRenderer.php b/includes/view/ShiftsFilterRenderer.php
index b18a8ae0..1eb43501 100644
--- a/includes/view/ShiftsFilterRenderer.php
+++ b/includes/view/ShiftsFilterRenderer.php
@@ -58,13 +58,13 @@ class ShiftsFilterRenderer
 
             if ($dashboardFilter) {
                 $toolbar[] = sprintf(
-                    '<li role="presentation"><a href="%s">%s</a></li>',
+                    '<li role="presentation"><a class="nav-link" href="%s">%s</a></li>',
                     url('/public-dashboard', ['filtered' => true] + $dashboardFilter),
-                    glyph('dashboard') . __('Dashboard')
+                    icon('speedometer2') . __('Dashboard')
                 );
             }
         }
-        return div('form-group', [
+        return div('mb-3', [
             toolbar_pills($toolbar)
         ]);
     }
diff --git a/includes/view/Shifts_view.php b/includes/view/Shifts_view.php
index a21a74a0..5a038ed0 100644
--- a/includes/view/Shifts_view.php
+++ b/includes/view/Shifts_view.php
@@ -26,17 +26,17 @@ function Shift_view_header($shift, Room $room)
         div('col-sm-3 col-xs-6', [
             '<h4>' . __('Start') . '</h4>',
             '<p class="lead' . (time() >= $shift['start'] ? ' text-success' : '') . '">',
-            glyph('calendar') . date(__('Y-m-d'), $shift['start']),
+            icon('calendar3') . date(__('Y-m-d'), $shift['start']),
             '<br />',
-            glyph('time') . date('H:i', $shift['start']),
+            icon('clock') . date('H:i', $shift['start']),
             '</p>'
         ]),
         div('col-sm-3 col-xs-6', [
             '<h4>' . __('End') . '</h4>',
             '<p class="lead' . (time() >= $shift['end'] ? ' text-success' : '') . '">',
-            glyph('calendar') . date(__('Y-m-d'), $shift['end']),
+            icon('calendar3') . date(__('Y-m-d'), $shift['end']),
             '<br />',
-            glyph('time') . date('H:i', $shift['end']),
+            icon('clock') . date('H:i', $shift['end']),
             '</p>'
         ]),
         div('col-sm-3 col-xs-6', [
@@ -55,14 +55,14 @@ function Shift_editor_info_render($shift)
     $info = [];
     if (!empty($shift['created_by_user_id'])) {
         $info[] = sprintf(
-            glyph('plus') . __('created at %s by %s'),
+            icon('plus-lg') . __('created at %s by %s'),
             date('Y-m-d H:i', $shift['created_at_timestamp']),
             User_Nick_render(User::find($shift['created_by_user_id']))
         );
     }
     if (!empty($shift['edited_by_user_id'])) {
         $info[] = sprintf(
-            glyph('pencil') . __('edited at %s by %s'),
+            icon('pencil') . __('edited at %s by %s'),
             date('Y-m-d H:i', $shift['edited_at_timestamp']),
             User_Nick_render(User::find($shift['edited_by_user_id']))
         );
@@ -159,10 +159,10 @@ function Shift_view($shift, $shifttype, Room $room, $angeltypes_source, ShiftSig
     $buttons = [];
     if ($shift_admin || $admin_shifttypes || $admin_rooms) {
         $buttons = [
-            $shift_admin ? button(shift_edit_link($shift), glyph('pencil') . __('edit')) : '',
-            $shift_admin ? button(shift_delete_link($shift), glyph('trash') . __('delete')) : '',
+            $shift_admin ? button(shift_edit_link($shift), icon('pencil') . __('edit')) : '',
+            $shift_admin ? button(shift_delete_link($shift), icon('trash') . __('delete')) : '',
             $admin_shifttypes ? button(shifttype_link($shifttype), $shifttype['name']) : '',
-            $admin_rooms ? button(room_link($room), glyph('map-marker') . $room->name) : '',
+            $admin_rooms ? button(room_link($room), icon('geo-alt') . $room->name) : '',
         ];
     }
     $buttons[] = button(user_link(auth()->user()->id), '<span class="icon-icon_angel"></span> ' . __('My shifts'));
@@ -213,7 +213,7 @@ function Shift_view_render_needed_angeltype($needed_angeltype, $angeltypes, $shi
     }
     $needed_angels .= '<div class="list-group-item">';
 
-    $needed_angels .= '<div class="pull-right">' . Shift_signup_button_render($shift, $angeltype) . '</div>';
+    $needed_angels .= '<div class="float-end m-3">' . Shift_signup_button_render($shift, $angeltype) . '</div>';
 
     $needed_angels .= '<h3>' . AngelType_name_render($angeltype) . '</h3>';
     $bar_max = max($needed_angeltype['count'] * 10, $needed_angeltype['taken'] * 10, 10);
@@ -253,15 +253,15 @@ function Shift_view_render_shift_entry($shift_entry, $user_shift_admin, $angelty
     }
     $isUser = $shift_entry['UID'] == auth()->user()->id;
     if ($user_shift_admin || $angeltype_supporter || $isUser) {
-        $entry .= ' <div class="btn-group">';
+        $entry .= ' <div class="btn-group m-1">';
         if ($user_shift_admin || $isUser) {
-            $entry .= button_glyph(
+            $entry .= button_icon(
                 page_link_to('user_myshifts', ['edit' => $shift_entry['id'], 'id' => $shift_entry['UID']]),
                 'pencil',
-                'btn-xs'
+                'btn-sm'
             );
         }
-        $entry .= button_glyph(shift_entry_delete_link($shift_entry), 'trash', 'btn-xs');
+        $entry .= button_icon(shift_entry_delete_link($shift_entry), 'trash', 'btn-sm');
         $entry .= '</div>';
     }
     return $entry;
diff --git a/includes/view/UserAngelTypes_view.php b/includes/view/UserAngelTypes_view.php
index 8cba2060..fef46876 100644
--- a/includes/view/UserAngelTypes_view.php
+++ b/includes/view/UserAngelTypes_view.php
@@ -24,9 +24,9 @@ function UserAngelType_update_view($user_angeltype, $user, $angeltype, $supporte
             buttons([
                 button(
                     page_link_to('angeltypes', ['action' => 'view', 'angeltype_id' => $angeltype['id']]),
-                    glyph('remove') . __('cancel')
+                    icon('x-lg') . __('cancel')
                 ),
-                form_submit('submit', glyph('ok') . __('yes'), 'btn-primary', false),
+                form_submit('submit', icon('check-lg') . __('yes'), 'btn-primary', false),
             ]),
         ], page_link_to('user_angeltypes', [
             'action'            => 'update',
@@ -52,9 +52,9 @@ function UserAngelTypes_delete_all_view($angeltype)
                         'angeltypes',
                         ['action' => 'view', 'angeltype_id' => $angeltype['id']]
                     ),
-                    glyph('remove') . __('cancel')
+                    icon('x-lg') . __('cancel')
                 ),
-                form_submit('deny_all', glyph('ok') . __('yes'), 'btn-primary', false)
+                form_submit('deny_all', icon('check-lg') . __('yes'), 'btn-primary', false)
             ]),
         ], page_link_to('user_angeltypes', ['action' => 'delete_all', 'angeltype_id' => $angeltype['id']])),
     ]);
@@ -71,8 +71,8 @@ function UserAngelTypes_confirm_all_view($angeltype)
         info(sprintf(__('Do you really want to confirm all users for %s?'), $angeltype['name']), true),
         form([
             buttons([
-                button(angeltype_link($angeltype['id']), glyph('remove') . __('cancel')),
-                form_submit('confirm_all', glyph('ok') . __('yes'), 'btn-primary', false),
+                button(angeltype_link($angeltype['id']), icon('x-lg') . __('cancel')),
+                form_submit('confirm_all', icon('check-lg') . __('yes'), 'btn-primary', false),
             ]),
         ], page_link_to('user_angeltypes', ['action' => 'confirm_all', 'angeltype_id' => $angeltype['id']])),
     ]);
@@ -95,8 +95,8 @@ function UserAngelType_confirm_view($user_angeltype, $user, $angeltype)
         ), true),
         form([
             buttons([
-                button(angeltype_link($angeltype['id']), glyph('remove') . __('cancel')),
-                form_submit('confirm_user', glyph('ok') . __('yes'), 'btn-primary', false),
+                button(angeltype_link($angeltype['id']), icon('x-lg') . __('cancel')),
+                form_submit('confirm_user', icon('check-lg') . __('yes'), 'btn-primary', false),
             ]),
         ], page_link_to('user_angeltypes', ['action' => 'confirm', 'user_angeltype_id' => $user_angeltype['id']])),
     ]);
@@ -119,8 +119,8 @@ function UserAngelType_delete_view($user_angeltype, $user, $angeltype)
         ), true),
         form([
             buttons([
-                button(angeltype_link($angeltype['id']), glyph('remove') . __('cancel')),
-                form_submit('delete', glyph('ok') . __('yes'), 'btn-primary', false),
+                button(angeltype_link($angeltype['id']), icon('x-lg') . __('cancel')),
+                form_submit('delete', icon('check-lg') . __('yes'), 'btn-primary', false),
             ]),
         ], page_link_to('user_angeltypes', ['action' => 'delete', 'user_angeltype_id' => $user_angeltype['id']])),
     ], true);
@@ -172,8 +172,8 @@ function UserAngelType_join_view($user, $angeltype)
         ), true),
         form([
             buttons([
-                button(angeltype_link($angeltype['id']), glyph('remove') . __('cancel')),
-                form_submit('submit', glyph('ok') . __('save'), 'btn-primary', false)
+                button(angeltype_link($angeltype['id']), icon('x-lg') . __('cancel')),
+                form_submit('submit', icon('check-lg') . __('save'), 'btn-primary', false)
             ]),
         ], page_link_to(
             'user_angeltypes',
diff --git a/includes/view/UserDriverLicenses_view.php b/includes/view/UserDriverLicenses_view.php
index 36ad575a..d43b6b03 100644
--- a/includes/view/UserDriverLicenses_view.php
+++ b/includes/view/UserDriverLicenses_view.php
@@ -20,8 +20,7 @@ function UserDriverLicense_edit_view($user_source, $wants_to_drive, $user_driver
         form([
             form_info(__('Privacy'), __('Your driving license information is only visible for supporters and admins.')),
             form_checkbox('wants_to_drive', __('I am willing to drive a car for the event'), $wants_to_drive),
-            div('panel panel-default', [
-                div('panel-body', [
+            div('m-3', [
                     form_checkbox(
                         'has_car',
                         __('I have my own car with me and am willing to use it for the event (You\'ll get reimbursed for fuel)'),
@@ -49,7 +48,6 @@ function UserDriverLicense_edit_view($user_source, $wants_to_drive, $user_driver
                         __('Forklift'),
                         $user_driver_license['has_license_forklift']
                     )
-                ])
             ], 'driving_license'),
             form_submit('submit', __('Save'))
         ]),
diff --git a/includes/view/UserHintsRenderer.php b/includes/view/UserHintsRenderer.php
index 8d749ee9..c9496652 100644
--- a/includes/view/UserHintsRenderer.php
+++ b/includes/view/UserHintsRenderer.php
@@ -18,10 +18,10 @@ class UserHintsRenderer
     {
         if (count($this->hints) > 0) {
             $hint_class = $this->important ? 'danger' : 'info';
-            $glyphicon = $this->important ? 'warning-sign' : 'info-sign';
+            $icon = $this->important ? 'exclamation-triangle' : 'info-circle';
 
             return toolbar_popover(
-                $glyphicon . ' text-' . $hint_class, '', $this->hints, 'bg-' . $hint_class
+                $icon . ' text-white', '', $this->hints, 'bg-' . $hint_class
             );
         }
 
diff --git a/includes/view/UserWorkLog_view.php b/includes/view/UserWorkLog_view.php
index 8185bad9..3ad51877 100644
--- a/includes/view/UserWorkLog_view.php
+++ b/includes/view/UserWorkLog_view.php
@@ -18,8 +18,8 @@ function UserWorkLog_delete_view(User $user)
         ), true),
         form([
             buttons([
-                button(user_link($user->id), glyph('remove') . __('cancel')),
-                form_submit('submit', glyph('ok') . __('delete'), 'btn-danger', false),
+                button(user_link($user->id), icon('x-lg') . __('cancel')),
+                form_submit('submit', icon('check-lg') . __('delete'), 'btn-danger', false),
             ]),
         ]),
     ]);
diff --git a/includes/view/User_view.php b/includes/view/User_view.php
index c8cef972..74e0aa17 100644
--- a/includes/view/User_view.php
+++ b/includes/view/User_view.php
@@ -140,7 +140,7 @@ function User_delete_view($user)
     return page_with_title(sprintf(__('Delete %s'), User_Nick_render($user)), [
         msg(),
         buttons([
-            button(user_edit_link($user->id), glyph('chevron-left') . __('back'))
+            button(user_edit_link($user->id), icon('chevron-left') . __('back'))
         ]),
         error(
             __('Do you really want to delete the user including all his shifts and every other piece of his data?'),
@@ -164,7 +164,7 @@ function User_edit_vouchers_view($user)
     return page_with_title(sprintf(__('%s\'s vouchers'), User_Nick_render($user)), [
         msg(),
         buttons([
-            button(user_link($user->id), glyph('chevron-left') . __('back'))
+            button(user_link($user->id), icon('chevron-left') . __('back'))
         ]),
         info(sprintf(
             __('Angel should receive at least  %d vouchers.'),
@@ -208,12 +208,12 @@ function Users_view(
         $u['first_name'] = $user->personalData->first_name;
         $u['last_name'] = $user->personalData->last_name;
         $u['dect'] = sprintf('<a href="tel:%s">%1$s</a>', $user->contact->dect);
-        $u['arrived'] = glyph_bool($user->state->arrived);
+        $u['arrived'] = icon_bool($user->state->arrived);
         $u['got_voucher'] = $user->state->got_voucher;
         $u['freeloads'] = $user->getAttribute('freeloads');
-        $u['active'] = glyph_bool($user->state->active);
-        $u['force_active'] = glyph_bool($user->state->force_active);
-        $u['got_shirt'] = glyph_bool($user->state->got_shirt);
+        $u['active'] = icon_bool($user->state->active);
+        $u['force_active'] = icon_bool($user->state->force_active);
+        $u['got_shirt'] = icon_bool($user->state->got_shirt);
         $u['shirt_size'] = $user->personalData->shirt_size;
         $u['arrival_date'] = $user->personalData->planned_arrival_date
             ? $user->personalData->planned_arrival_date->format(__('Y-m-d')) : '';
@@ -221,7 +221,7 @@ function Users_view(
             ? $user->personalData->planned_departure_date->format(__('Y-m-d')) : '';
         $u['last_login_at'] = $user->last_login_at ? $user->last_login_at->format(__('m/d/Y h:i a')) : '';
         $u['actions'] = table_buttons([
-            button_glyph(page_link_to('admin_user', ['id' => $user->id]), 'edit', 'btn-xs')
+            button_icon(page_link_to('admin_user', ['id' => $user->id]), 'pencil-square', 'btn-sm')
         ]);
         $usersList[] = $u;
     }
@@ -269,7 +269,7 @@ function Users_view(
     return page_with_title(__('All users'), [
         msg(),
         buttons([
-            button(page_link_to('register'), glyph('plus') . __('New user'))
+            button(page_link_to('register'), icon('plus-lg') . __('New user'))
         ]),
         table($user_table_headers, $usersList)
     ]);
@@ -390,9 +390,9 @@ function User_view_myshift($shift, $user_source, $its_me)
     }
 
     $myshift = [
-        'date'       => glyph('calendar')
+        'date'       => icon('calendar3')
             . date('Y-m-d', $shift['start']) . '<br>'
-            . glyph('time') . date('H:i', $shift['start'])
+            . icon('clock') . date('H:i', $shift['start'])
             . ' - '
             . date('H:i', $shift['end']),
         'duration'   => sprintf('%.2f', ($shift['end'] - $shift['start']) / 3600) . '&nbsp;h',
@@ -418,20 +418,20 @@ function User_view_myshift($shift, $user_source, $its_me)
     }
 
     $myshift['actions'] = [
-        button(shift_link($shift), glyph('eye-open') . __('view'), 'btn-xs')
+        button(shift_link($shift), icon('eye') . __('view'), 'btn-sm')
     ];
     if ($its_me || auth()->can('user_shifts_admin')) {
         $myshift['actions'][] = button(
             page_link_to('user_myshifts', ['edit' => $shift['id'], 'id' => $user_source->id]),
-            glyph('edit') . __('edit'),
-            'btn-xs'
+            icon('pencil-square') . __('edit'),
+            'btn-sm'
         );
     }
     if (Shift_signout_allowed($shift, ['id' => $shift['TID']], $user_source->id)) {
         $myshift['actions'][] = button(
             shift_entry_delete_link($shift),
-            glyph('trash') . __('sign off'),
-            'btn-xs'
+            icon('trash') . __('sign off'),
+            'btn-sm'
         );
     }
     $myshift['actions'] = table_buttons($myshift['actions']);
@@ -518,19 +518,19 @@ function User_view_worklog(Worklog $worklog, $admin_user_worklog_privilege)
         $actions = table_buttons([
             button(
                 user_worklog_edit_link($worklog),
-                glyph('edit') . __('edit'),
-                'btn-xs'
+                icon('pencil-square') . __('edit'),
+                'btn-sm'
             ),
             button(
                 user_worklog_delete_link($worklog),
-                glyph('trash') . __('delete'),
-                'btn-xs'
+                icon('trash') . __('delete'),
+                'btn-sm'
             )
         ]);
     }
 
     return [
-        'date'       => glyph('calendar') . date('Y-m-d', $worklog->worked_at->timestamp),
+        'date'       => icon('calendar3') . date('Y-m-d', $worklog->worked_at->timestamp),
         'duration'   => sprintf('%.2f', $worklog->hours) . ' h',
         'room'       => '',
         'shift_info' => __('Work log entry'),
@@ -615,45 +615,45 @@ function User_view(
         . (config('enable_user_name') ? ' <small>' . $user_name . '</small>' : ''),
         [
             msg(),
-            div('row space-top', [
+            div('row m-3', [
                 div('col-md-12', [
                     buttons([
                         $admin_user_privilege ? button(
                             page_link_to('admin_user', ['id' => $user_source->id]),
-                            glyph('edit') . __('edit')
+                            icon('pencil-square') . __('edit')
                         ) : '',
                         $admin_user_privilege ? button(
                             user_driver_license_edit_link($user_source),
-                            glyph('road') . __('driving license')
+                            icon('wallet2') . __('driving license')
                         ) : '',
                         (($admin_user_privilege || $auth->can('admin_arrive')) && !$user_source->state->arrived) ?
                             form([
                                 form_hidden('action', 'arrived'),
                                 form_hidden('user', $user_source->id),
-                                form_submit('submit', __('arrived'), '', false, 'default')
+                                form_submit('submit', __('arrived'), '', false, 'primary')
                             ], page_link_to('admin_arrive'), true) : '',
                         $admin_user_privilege ? button(
                             page_link_to(
                                 'users',
                                 ['action' => 'edit_vouchers', 'user_id' => $user_source->id]
                             ),
-                            glyph('cutlery') . __('Edit vouchers')
+                            icon('file-binary-fill') . __('Edit vouchers')
                         ) : '',
                         $admin_user_worklog_privilege ? button(
                             user_worklog_add_link($user_source),
-                            glyph('list') . __('Add work log')
+                            icon('list') . __('Add work log')
                         ) : '',
                         $its_me ? button(
                             page_link_to('user_settings'),
-                            glyph('list-alt') . __('Settings')
+                            icon('gear') . __('Settings')
                         ) : '',
                         ($its_me && $auth->can('ical')) ? button(
                             page_link_to('ical', ['key' => $user_source->api_key]),
-                            glyph('calendar') . __('iCal Export')
+                            icon('calendar3') . __('iCal Export')
                         ) : '',
                         ($its_me && $auth->can('shifts_json_export')) ? button(
                             page_link_to('shifts_json_export', ['key' => $user_source->api_key]),
-                            glyph('export') . __('JSON Export')
+                            icon('box-arrow-up-right') . __('JSON Export')
                         ) : '',
                         ($its_me && (
                             $auth->can('shifts_json_export')
@@ -661,14 +661,14 @@ function User_view(
                             || $auth->can('atom')
                         )) ? button(
                             page_link_to('user_myshifts', ['reset' => 1]),
-                            glyph('repeat') . __('Reset API key')
+                            icon('arrow-repeat') . __('Reset API key')
                         ) : ''
                     ])
                 ])
             ]),
             div('row', [
                 div('col-md-2', [
-                    heading(glyph('phone')
+                    heading(icon('phone')
                         . '<a href="tel:' . $user_source->contact->dect . '">'
                         . $user_source->contact->dect, 1)
                         . '</a>'
@@ -681,7 +681,7 @@ function User_view(
             ($its_me || $admin_user_privilege) ? '<h2>' . __('Shifts') . '</h2>' : '',
             $myshifts_table,
             ($its_me && $nightShiftsConfig['enabled']) ? info(
-                glyph('info-sign') . sprintf(
+                icon('info-circle') . sprintf(
                     __('Your night shifts between %d and %d am count twice.'),
                     $nightShiftsConfig['start'],
                     $nightShiftsConfig['end']
@@ -734,7 +734,7 @@ function User_view_state_user($user_source)
     ];
 
     if ($user_source->state->arrived) {
-        $state[] = '<span class="text-success">' . glyph('home') . __('Arrived') . '</span>';
+        $state[] = '<span class="text-success">' . icon('house') . __('Arrived') . '</span>';
     } else {
         $state[] = '<span class="text-danger">' . __('Not arrived') . '</span>';
     }
@@ -755,13 +755,13 @@ function User_view_state_admin($freeloader, $user_source)
     $state = [];
 
     if ($freeloader) {
-        $state[] = '<span class="text-danger">' . glyph('exclamation-sign') . __('Freeloader') . '</span>';
+        $state[] = '<span class="text-danger">' . icon('exclamation-circle') . __('Freeloader') . '</span>';
     }
 
     $state[] = User_shift_state_render($user_source);
 
     if ($user_source->state->arrived) {
-        $state[] = '<span class="text-success">' . glyph('home')
+        $state[] = '<span class="text-success">' . icon('house')
             . sprintf(
                 __('Arrived at %s'),
                 $user_source->state->arrival_date ? $user_source->state->arrival_date->format('Y-m-d') : ''
@@ -791,7 +791,7 @@ function User_view_state_admin($freeloader, $user_source)
     $availableCount = max($voucherCount, $availableCount);
     if ($user_source->state->got_voucher > 0) {
         $state[] = '<span class="text-success">'
-            . glyph('cutlery')
+            . icon('file-binary-fill')
             . __('Got %s of %s vouchers', [$voucherCount, $availableCount])
             . '</span>';
     } else {
@@ -817,7 +817,7 @@ function User_angeltypes_render($user_angeltypes)
             $class = 'text-warning';
         }
         $output[] = '<a href="' . angeltype_link($angeltype['id']) . '" class="' . $class . '">'
-            . ($angeltype['supporter'] ? glyph('education') : '') . $angeltype['name']
+            . ($angeltype['supporter'] ? icon('patch-check') : '') . $angeltype['name']
             . '</a>';
     }
     return div('col-md-2', [
@@ -934,7 +934,7 @@ function render_user_departure_date_hint()
 {
     if (config('enable_planned_arrival') && !auth()->user()->personalData->planned_departure_date) {
         $text = __('Please enter your planned date of departure on your settings page to give us a feeling for teardown capacities.');
-        return render_profile_link($text, null, 'alert-link');
+        return render_profile_link($text, null, 'text-danger');
     }
 
     return null;
@@ -980,7 +980,7 @@ function render_user_tshirt_hint()
 {
     if (config('enable_tshirt_size') && !auth()->user()->personalData->shirt_size) {
         $text = __('You need to specify a tshirt size in your settings!');
-        return render_profile_link($text, null, 'alert-link');
+        return render_profile_link($text, null, 'text-danger');
     }
 
     return null;
@@ -994,7 +994,7 @@ function render_user_dect_hint()
     $user = auth()->user();
     if ($user->state->arrived && config('enable_dect') && !$user->contact->dect) {
         $text = __('You need to specify a DECT phone number in your settings! If you don\'t have a DECT phone, just enter \'-\'.');
-        return render_profile_link($text, null, 'alert-link');
+        return render_profile_link($text, null, 'text-danger');
     }
 
     return null;
diff --git a/package.json b/package.json
index 08d9b0f8..7f78e334 100644
--- a/package.json
+++ b/package.json
@@ -6,44 +6,42 @@
   "author": "https://github.com/engelsystem/engelsystem/contributors",
   "license": "GPL-2.0-or-later",
   "scripts": {
-    "build": "NODE_ENV=production run-s build:clean build:webpack",
+    "build": "(export NODE_ENV=production && yarn build:clean && yarn build:webpack)",
     "build:clean": "rimraf public/assets",
     "build:webpack": "webpack",
     "build:watch": "webpack --watch"
   },
   "dependencies": {
-    "bootstrap": "^3",
+    "@popperjs/core": "^2.9.2",
+    "bootstrap": "^5.1.0",
     "chart.js": "^2.9.3",
     "core-js": "^3.6.5",
-    "eonasdan-bootstrap-datetimepicker": "^4.17.47",
     "jquery": "^3.5.1",
     "jquery-ui": "^1.11.2",
     "moment": "^2.27.0",
+    "moment-timezone": "^0.5.31",
     "select2": "^4.0.13",
-    "select2-bootstrap-theme": "0.1.0-beta.10"
+    "select2-bootstrap-5-theme": "^1.1.1",
+    "tempusdominus-bootstrap-4": "^5.39.0"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",
     "@babel/preset-env": "^7.11.5",
     "autoprefixer": "^10.2.5",
     "babel-loader": "^8.1.0",
-    "css-loader": "^5.2.5",
-    "css-minimizer-webpack-plugin": "^3.0.0",
+    "bootstrap-icons": "^1.4.1",
+    "css-loader": "^5.2.2",
+    "css-minimizer-webpack-plugin": "^2.0.0",
     "file-loader": "^6.1.0",
-    "less": "^4.1.1",
-    "less-loader": "^9.0.0",
     "mini-css-extract-plugin": "^1.6.0",
-    "mkdirp": "^1.0.4",
-    "npm-run-all": "^4.1.3",
-    "postcss": "^8.3.0",
-    "postcss-loader": "^5.3.0",
+    "postcss": "^8.2.8",
+    "postcss-loader": "^5.2.0",
     "rimraf": "^3.0.2",
+    "sass": "^1.35.1",
+    "sass-loader": "^12.0.0",
     "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.1.2",
-    "webpack": "^5.37.1",
-    "webpack-cli": "^4.7.0"
-  },
-  "resolutions": {
-    "moment-timezone": "^0.5"
+    "terser-webpack-plugin": "^5.1.1",
+    "webpack": "^5.33.2",
+    "webpack-cli": "^4.6.0"
   }
 }
diff --git a/resources/assets/js/forms.js b/resources/assets/js/forms.js
index 8d1758cc..204a0fe9 100644
--- a/resources/assets/js/forms.js
+++ b/resources/assets/js/forms.js
@@ -108,7 +108,13 @@ $(function () {
                 maxDate: '',
                 locale: $('html').attr('lang'),
                 format: element.format,
-                widgetPositioning: {horizontal: 'auto', vertical: 'bottom'}
+                widgetPositioning: {horizontal: 'auto', vertical: 'bottom'},
+                icons: {
+                    time: 'bi bi-clock',
+                    date: 'bi bi-calendar',
+                    up: 'bi bi-arrow-up',
+                    down: 'bi bi-arrow-down'
+                }
             };
             $.extend(opts, elem.data());
             if (opts.minDate.length === 0) {
@@ -120,13 +126,19 @@ $(function () {
             elem.children('input').attr('type', 'text');
             elem.children().on('click', function (ev) {
                 ev.stopImmediatePropagation();
-                if (typeof elem.data('DateTimePicker') === 'undefined') {
+                if (typeof elem.data('datetimepicker') === 'undefined') {
                     elem.datetimepicker(opts);
-                    elem.data('DateTimePicker').show();
+                    elem.data('datetimepicker').show();
+
+                    // close on click anywhere outside
+                    $(document).on('click', () => {
+                        elem.data('datetimepicker').hide()
+                    })
                 } else {
-                    elem.data('DateTimePicker').toggle();
+                    elem.data('datetimepicker').toggle();
                 }
             });
+
         });
     });
 });
@@ -140,19 +152,29 @@ $(function () {
         var opts = {
             locale: $('html').attr('lang'),
             format: 'HH:mm',
-            widgetPositioning: {horizontal: 'auto', vertical: 'bottom'}
+            widgetPositioning: {horizontal: 'auto', vertical: 'bottom'},
+            icons: {
+                up: 'bi bi-arrow-up',
+                down: 'bi bi-arrow-down'
+            }
         };
         $.extend(opts, elem.data());
         elem.children('input').attr('type', 'text');
         elem.children('input').on('click', function (ev) {
             ev.stopImmediatePropagation();
-            if (typeof elem.data('DateTimePicker') === 'undefined') {
+            if (typeof elem.data('datetimepicker') === 'undefined') {
                 elem.datetimepicker(opts);
-                elem.data('DateTimePicker').show();
+                elem.data('datetimepicker').show();
+
+                // close on click anywhere outside
+                $(document).on('click', () => {
+                    elem.data('datetimepicker').hide()
+                })
             } else {
-                elem.data('DateTimePicker').toggle();
+                elem.data('datetimepicker').toggle();
             }
         });
+
     });
 });
 
@@ -177,24 +199,21 @@ $(function () {
     });
 });
 
-/**
- * Enable select2
- */
 $(function () {
-    $.fn.select2.defaults.set('theme', 'bootstrap');
-
-    $('select').select2();
-});
+    $('select').select2({
+        theme: 'bootstrap-5',
+    });
+})
 
 /**
  * Show oauth buttons on welcome title click
  */
 $(function () {
     $('#welcome-title').on('click', function () {
-        $('.form-group.btn-group .btn.hidden').removeClass('hidden');
+        $('.btn-group.btn-group .btn.d-none').removeClass('d-none');
     });
     $('#oauth-settings-title').on('click', function () {
-        $('table tr.hidden').removeClass('hidden');
+        $('table tr.d-none').removeClass('d-none');
     });
 });
 
@@ -209,7 +228,7 @@ window.addEventListener('DOMContentLoaded', () => {
         return;
     }
 
-    filter.classList.remove('in');
+    filter.classList.remove('show');
 });
 $(() => {
     if (typeof (localStorage) === 'undefined') {
diff --git a/resources/assets/js/offcanvas.js b/resources/assets/js/offcanvas.js
deleted file mode 100644
index 792cca7c..00000000
--- a/resources/assets/js/offcanvas.js
+++ /dev/null
@@ -1,13 +0,0 @@
-;(function($, window, document, undefined) {
-    'use strict';
-
-    $(document).ready(function () {
-        $('[data-toggle="offcanvas"]').click(function () {
-            var button = $(this);
-            button.toggleClass('is-open')
-            $(button.attr('data-target')).toggleClass('in');
-        });
-    });
-
-}(jQuery, window, window.document));
-
diff --git a/resources/assets/js/vendor.js b/resources/assets/js/vendor.js
index 1341a1e6..8adb4aa4 100644
--- a/resources/assets/js/vendor.js
+++ b/resources/assets/js/vendor.js
@@ -1,12 +1,11 @@
 require('core-js/stable');
 window.$ = window.jQuery = require('jquery');
 require('jquery-ui');
-require('bootstrap');
+window.bootstrap = require('bootstrap');
 window.moment = require('moment');
 require('moment/locale/de');
-require('eonasdan-bootstrap-datetimepicker');
+require('tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4');
 require('chart.js');
-require('./offcanvas');
 require('./forms');
 require('./sticky-headers');
 require('./moment-countdown');
diff --git a/resources/assets/themes/base.less b/resources/assets/themes/base.scss
similarity index 51%
rename from resources/assets/themes/base.less
rename to resources/assets/themes/base.scss
index 6df72737..5ddb42ec 100644
--- a/resources/assets/themes/base.less
+++ b/resources/assets/themes/base.scss
@@ -1,20 +1,55 @@
-@import "../../../node_modules/bootstrap/less/bootstrap";
-@import "../../../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css";
-@import "../../../node_modules/select2/dist/css/select2.min.css";
-@import "../../../node_modules/select2-bootstrap-theme/src/select2-bootstrap.less";
+// Basic variables
+@use "sass:map";
+
+// select 2 variables
+$link-decoration: none !default;
+$link-hover-decoration: underline !default;
+
+$nav-tabs-link-active-color:        #fff !default;
+$nav-tabs-link-active-bg:           $primary !default;
+$nav-tabs-link-active-border-color: none !default;
+
+// Imports
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
+$custom-colors: (
+  black: #000
+);
+
+$theme-colors: map-merge($theme-colors, $custom-colors);
+
+@import "~bootstrap/scss/bootstrap";
+
+@import "~bootstrap-icons/font/bootstrap-icons.css";
+@import "~tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4";
+@import "~select2/src/scss/core";
+@import "~select2-bootstrap-5-theme/src/include-all";
 @import "error";
 
+// temporary bg-body fix (remove once Bootstrap 5.1.1 has been released)
+.bg-body {
+    --bs-bg-opacity: 1;
+    background-color: $body-bg !important;
+}
+
+$navbar-height: 3.125rem;
+
 body {
-  padding-top: 50px;
+  padding-top: 70px;
 }
 
 .footer a {
-  color: @text-muted;
+  color: $text-muted;
 }
 
-.first {
-  clear: both;
-  margin-top: 30px;
+.text-inherit {
+    color: inherit;
+
+    &:hover {
+        color: inherit;
+    }
 }
 
 .text-big {
@@ -25,7 +60,7 @@ body {
 }
 
 .icon-icon_angel {
-  background-color: @text-color;
+  background-color: $body-color;
 
   display: inline-block;
   width: 1em;
@@ -35,29 +70,50 @@ body {
   mask-size: cover;
 }
 
+.text-light .icon-icon_angel {
+  background-color: map.get($theme-colors, "light");
+}
+
+.dark .icon-icon_angel {
+  background-color: map.get($theme-colors, "dark");
+}
+
 a .icon-icon_angel {
-  background-color: @link-color;
+  background-color: $link-color;
 }
 
 .navbar .icon-icon_angel {
-  background-color: @navbar-default-link-disabled-color;
+  background-color: $nav-link-disabled-color;
 }
 
 .navbar-brand .icon-icon_angel {
-  background-color: @navbar-default-brand-color;
+  background-color: $body-color;
+}
+
+.nav-item--userhints {
+    margin: -$navbar-padding-y 0;
+}
+
+.popover--userhints .alert:last-of-type {
+    margin-bottom: 0;
 }
 
 table a > .icon-icon_angel {
-  background-color: @text-color;
+  background-color: $body-color;
 }
 
 .table .form-group {
   margin-bottom: 0;
 }
 
+.input-group.datetime,
+.input-group.time {
+    .bootstrap-datetimepicker-widget {
+        inset: 42px auto auto 0 !important;
+    }
+}
+
 .stats {
-  .make-md-column(3);
-  .make-xs-column(6);
   font-size: 20px;
   height: 150px;
   text-align: center;
@@ -67,7 +123,7 @@ table a > .icon-icon_angel {
     font-weight: 200;
   }
 
-  @media (max-width: @screen-md) {
+  @media (max-width: map-get($grid-breakpoints, 'md')) {
     font-size: inherit;
     .number {
       font-size: 40px;
@@ -77,23 +133,23 @@ table a > .icon-icon_angel {
 
 
 .stats-danger {
-  color: @brand-danger;
+  color: map-get($theme-colors, 'danger');
 }
 
 .stats-warning {
-  color: @brand-warning;
+  color: map-get($theme-colors, 'warning');
 }
 
 .stats-success {
-  color: @brand-success;
+  color: map-get($theme-colors, 'success');
 }
 
-.dashboard-panel {
+.dashboard-card {
   position: relative;
   font-size: 20px;
-  color: @headings-color;
+  color: $headings-color;
 
-  .panel-link {
+  .card-link {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -101,48 +157,18 @@ table a > .icon-icon_angel {
     left: 0;
     text-decoration: none; /* No underlines on the link */
     z-index: 10; /* Places the link above everything else in the div */
-    background-color: @brand-primary; /* Fix to make div clickable in IE */
+    background-color: $primary; /* Fix to make div clickable in IE */
     opacity: 0; /* Fix to make div clickable in IE */
     filter: alpha(opacity=1); /* Fix to make div clickable in IE */
   }
 
-  .panel-link:hover {
+  .card-link:hover {
     opacity: 0.3;
   }
 }
 
-.panel-primary .panel-heading a {
-  color: @panel-primary-text;
-  background-color: @panel-primary-heading-bg;
-}
-
-.panel-default .panel-heading a {
-  color: @panel-default-text;
-  background-color: @panel-default-heading-bg;
-}
-
-.panel-info .panel-heading a {
-  color: @panel-info-text;
-  background-color: @panel-info-heading-bg;
-}
-
-.panel-success .panel-heading a {
-  color: @panel-success-text;
-  background-color: @panel-success-heading-bg;
-}
-
-.panel-warning .panel-heading a {
-  color: @panel-warning-text;
-  background-color: @panel-warning-heading-bg;
-}
-
-.panel-danger .panel-heading a {
-  color: @panel-danger-text;
-  background-color: @panel-danger-heading-bg;
-}
-
 .select2-dropdown {
-  background-color: @input-bg;
+  background-color: $input-bg;
 }
 
 .selection .checkbox {
@@ -157,39 +183,38 @@ table a > .icon-icon_angel {
   width: 100%;
 
   .lane {
-    background: @table-bg-accent;
+    background: $table-striped-bg;
     flex-grow: 1;
     min-width: 280px;
     width: 280px;
     flex-shrink: 1;
 
     .header {
-      background: @panel-bg;
-      border-bottom: 1px solid @table-border-color;
+      border-bottom: 1px solid $table-border-color;
       height: 30px;
       padding: 5px 5px 5px 16px;
     }
 
     .tick {
       height: 30px;
-      border-top: 1px solid darken(@table-bg-accent, 2%);
+      border-top: 1px solid darken($table-striped-bg, 2%);
     }
 
     .tick.hour {
-      border-top: 2px solid @table-border-color;
+      border-top: 2px solid $table-border-color;
       font-size: 0.9em;
       padding-left: 5px;
     }
 
     .tick.day {
-      border-top: 2px solid @brand-primary;
+      border-top: 2px solid $primary;
       font-size: 0.9em;
       padding-left: 5px;
     }
   }
 
   .lane.time {
-    border-right: 1px solid @table-border-color;
+    border-right: 1px solid $table-border-color;
     flex-grow: 0;
     min-width: 50px;
     width: 50px;
@@ -213,10 +238,6 @@ table a > .icon-icon_angel {
   }
 }
 
-.space-top {
-  margin-top: 15px;
-}
-
 .column_duration {
   text-align: right;
 }
@@ -250,22 +271,12 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   overflow-x: inherit;
 }
 
-.inline-form-spacing {
-  margin-bottom: @form-group-margin-bottom;
-}
-
-.user-settings .settings-menu ul {
-  margin-top: @line-height-computed;
-}
-
 span.ref-id[id] {
   padding-top: 50px;
 }
 
 .faq {
-  .panel-heading h3 {
-    margin: 0;
-
+  .card-header {
     small a.ref-link {
       display: none;
     }
@@ -278,6 +289,27 @@ span.ref-id[id] {
   }
 }
 
+// Cards
+.card-body > *:last-child {
+    margin-bottom: 0;
+}
+
+.card-header {
+  &.bg-dark {
+    color: map.get($theme-colors, "light");
+  }
+
+  &.bg-light {
+    color: map.get($theme-colors, "dark");
+  }
+}
+
+// code tag
+code {
+  background-color: $input-disabled-bg;
+  @include border-radius($input-border-radius);
+}
+
 @keyframes pulse {
   0% {
     transform: rotate(0deg);
@@ -327,12 +359,12 @@ span.ref-id[id] {
   padding: 2px 6px;
   margin-top: 6px;
   margin-bottom: 4px;
-  max-height: @navbar-height;
+  max-height: $navbar-height;
 
   .icon {
-    border-color: @brand-primary;
+    border-color: $primary;
     font-weight: bold;
-    color: @brand-primary;
+    color: $primary;
     font-size: 25px;
     &-close {
       padding: 0 3px;
@@ -349,59 +381,7 @@ span.ref-id[id] {
   }
 }
 
-
-@media screen and (max-width: @grid-float-breakpoint-max) {
-  #navbar-offcanvas {
-    display: block;
-    position: absolute;
-    width: 90%;
-    height: calc( 100vh - @navbar-height);
-    max-height: unset;
-    left: 101%;
-    top: @navbar-height + 1;
-    // extra padding because mobile Safari displays a bottom bar hiding parts of the menu
-    padding-bottom: 75px;
-
-    transition: left .3s ease-in-out;
-
-    background: @navbar-default-bg;
-    margin: 0 !important;   // Overridden in theme with high specifity:
-    // .container > .navbar-header,
-    // .container-fluid > .navbar-header,
-    // .container > .navbar-collapse,
-    // .container-fluid > .navbar-collapse
-
-    // Is open
-    &.collapse.in {
-      left: 10%;
-      display: block;
-      overflow-y: auto;
-      box-shadow: -5px 20px 20px 0 rgba(0, 0, 0, 0.5), 5px 0 5px -5px rgba(0, 0, 0, 0.5);
-    }
-
-    // Hide current page in nav.
-    .nav > li.active {
-      display: none;
-    }
-
-    .caret {
-      float: right;
-      margin-top: 7px;
-    }
-  }
-
-  .navbar-toggle {
-    align-items: center;
-    font-size: 18px;
-    display: flex;
-    height: 38px;
-    justify-content: center;
-    padding: 0;
-    transform: none;
-    width: 38px;
-
-    .icon-close {
-      padding: 0;
-    }
-  }
+// Forms
+.form-label {
+  font-weight: $font-weight-bold;
 }
diff --git a/resources/assets/themes/card-glow.scss b/resources/assets/themes/card-glow.scss
new file mode 100644
index 00000000..2ab4bdf2
--- /dev/null
+++ b/resources/assets/themes/card-glow.scss
@@ -0,0 +1,33 @@
+// Used for shift overview cards headers
+@each $state, $value in $theme-colors {
+  $card-background: darken($value, 35%);
+  $card-border: $value;
+  $card-color: $value;
+
+  @if (contrast-ratio($card-background, $card-color) < $min-contrast-ratio*.7) {
+    $card-color: mix($value, color-contrast($card-background), 40%);
+  }
+
+  .card.bg-#{"" + $state} .card-header {
+    background-color: $card-background;
+    border-color: $card-border;
+
+    .badge.bg-light {
+      background-color: $card-color !important;
+    }
+
+    .badge.text-#{"" + $state} {
+      color: $card-background !important;
+    }
+
+    a.text-white {
+      color: $card-color !important;
+    }
+
+    .btn-#{"" + $state} {
+      background-color: $card-background;
+      border-color: $card-border !important;
+      color: $card-color;
+    }
+  }
+}
diff --git a/resources/assets/themes/cyborg_styles.less b/resources/assets/themes/cyborg_styles.scss
similarity index 73%
rename from resources/assets/themes/cyborg_styles.less
rename to resources/assets/themes/cyborg_styles.scss
index d0e1776d..b34ba050 100644
--- a/resources/assets/themes/cyborg_styles.less
+++ b/resources/assets/themes/cyborg_styles.scss
@@ -45,37 +45,6 @@ THE SOFTWARE.
 // Bootswatch
 // -----------------------------------------------------
 
-// Navbar =====================================================================
-
-// Buttons ====================================================================
-
-// Typography =================================================================
-
-.text-primary,
-.text-primary:hover {
-  color: @brand-primary;
-}
-
-.text-success,
-.text-success:hover {
-  color: @brand-success;
-}
-
-.text-danger,
-.text-danger:hover {
-  color: @brand-danger;
-}
-
-.text-warning,
-.text-warning:hover {
-  color: @brand-warning;
-}
-
-.text-info,
-.text-info:hover {
-  color: @brand-info;
-}
-
 // Tables =====================================================================
 
 table,
@@ -88,12 +57,12 @@ table,
   }
 
   .text-muted {
-    color: @text-muted;
+    color: $text-muted;
   }
 }
 
 .table-responsive > .table {
-  background-color: @table-bg;
+  background-color: $table-bg;
 }
 
 // Forms ======================================================================
@@ -102,13 +71,13 @@ table,
   .help-block,
   .control-label,
   .form-control-feedback {
-    color: @brand-warning;
+    color: $warning;
   }
 
   .form-control,
   .form-control:focus,
   .input-group-addon {
-    border-color: @brand-warning;
+    border-color: $warning;
   }
 }
 
@@ -116,13 +85,13 @@ table,
   .help-block,
   .control-label,
   .form-control-feedback {
-    color: @brand-danger;
+    color: $danger;
   }
 
   .form-control,
   .form-control:focus,
   .input-group-addon {
-    border-color: @brand-danger;
+    border-color: $danger;
   }
 }
 
@@ -130,13 +99,13 @@ table,
   .help-block,
   .control-label,
   .form-control-feedback {
-    color: @brand-success;
+    color: $success;
   }
 
   .form-control,
   .form-control:focus,
   .input-group-addon {
-    border-color: @brand-success;
+    border-color: $success;
   }
 }
 
@@ -158,7 +127,7 @@ table,
 
   .alert-link,
   a {
-    color: @alert-warning-text;
+    color: $alert-warning-text;
     text-decoration: underline;
   }
 
@@ -183,21 +152,9 @@ table,
 
 // Containers =================================================================
 
-a.thumbnail:hover,
-a.thumbnail:focus,
-a.thumbnail.active {
-  border-color: @thumbnail-border;
-}
-
 .jumbotron {
 
   h1, h2, h3, h4, h5, h6 {
     color: #fff;
   }
 }
-
-// code tag
-code {
-  background-color: @input-bg-disabled;
-  color: @input-color;
-}
diff --git a/resources/assets/themes/cyborg_variables.less b/resources/assets/themes/cyborg_variables.less
deleted file mode 100644
index 89bc1d84..00000000
--- a/resources/assets/themes/cyborg_variables.less
+++ /dev/null
@@ -1,873 +0,0 @@
-// cyborg_variables
-@import "../../../node_modules/bootstrap/less/variables";
-
-
-/*
-The MIT License (MIT)
-
-Copyright (c) 2013 Thomas Park
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-*/
-
-// Cyborg 3.2.0
-// Variables
-// --------------------------------------------------
-
-//== Colors
-//
-//## Gray and brand colors for use across Bootstrap.
-  // needs change
-@gray-darker:            #222; // #222
-@gray-dark:              #333;   // #333
-@gray:                   #555; // #555
-@gray-light:             #999;   // #999
-@gray-lighter:           #eee; // #eee
-
-@brand-primary:         #99ba00;
-@brand-success:         #99ba00;
-@brand-info:            #0076ba;
-@brand-warning:         #ffc600;
-@brand-danger:          #d9534f;
-
-
-//== Scaffolding
-//
-//## Settings for some of the most global styles.
-
-//** Background color for `<body>`.
-@body-bg:               #060606;
-//** Global text color on `<body>`.
-@text-color:            @gray-light;
-
-//** Global textual link color.
-@link-color:            @brand-primary;
-//** Link hover color set via `darken()` function.
-@link-hover-color:      @link-color;
-
-
-//== Typography
-//
-//## Font, line-height, and color for body text, headings, and more.
-
-@font-family-serif:       Georgia, "Times New Roman", Times, serif;
-//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
-@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
-@font-family-base:        @font-family-sans-serif;
-
-@font-size-base:          14px;
-@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
-@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
-
-@font-size-h1:            34px;
-@font-size-h2:            24px;
-@font-size-h3:            20px;
-@font-size-h4:            20px;
-@font-size-h5:            20px;
-@font-size-h6:            16px;
-
-//** Unit-less `line-height` for use in components like buttons.
-@line-height-base:        1.428571429; // 20/14
-//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
-
-//** By default, this inherits from the `<body>`.
-@headings-font-family:    @font-family-base;
-@headings-font-weight:    500;
-@headings-line-height:    1.1;
-@headings-color:          #fff;
-
-
-//== Iconography
-//
-//## Specify custom location and filename of the included Glyphicons icon font.
-//## Useful for those including Bootstrap via Bower.
-
-//** File name for all font files.
-@icon-font-name:          "glyphicons-halflings-regular";
-//** Element ID within SVG icon file.
-@icon-font-svg-id:        "glyphicons_halflingsregular";
-
-
-//== Components
-//
-//## Define common padding and border radius sizes and more.
-//## Values based on 14px text and 1.428 line-height (~20px to start).
-
-@padding-base-vertical:     8px;
-@padding-base-horizontal:   12px;
-
-@padding-large-vertical:    14px;
-@padding-large-horizontal:  16px;
-
-@padding-small-vertical:    5px;
-@padding-small-horizontal:  10px;
-
-@padding-xs-vertical:       1px;
-@padding-xs-horizontal:     5px;
-
-@line-height-large:         1.33;
-@line-height-small:         1.5;
-
-@border-radius-base:        4px;
-@border-radius-large:       6px;
-@border-radius-small:       3px;
-
-//** Global color for active items (e.g., navs or dropdowns).
-@component-active-color:    #fff;
-//** Global background color for active items (e.g., navs or dropdowns).
-@component-active-bg:       @brand-primary;
-
-//** Width of the `border` for generating carets that indicator dropdowns.
-@caret-width-base:          4px;
-//** Carets increase slightly in size for larger components.
-@caret-width-large:         5px;
-
-
-//== Tables
-//
-//## Customizes the `.table` component with basic values, each used across all table variations.
-
-//** Padding for `<th>`s and `<td>`s.
-@table-cell-padding:            8px;
-//** Padding for cells in `.table-condensed`.
-@table-condensed-cell-padding:  5px;
-
-//** Default background color used for all tables.
-@table-bg:                      darken(@gray-darker, 4%);
-//** Background color used for `.table-striped`.
-@table-bg-accent:               darken(@table-bg, 6%);
-//** Background color used for `.table-hover`.
-@table-bg-hover:                @gray-dark;
-@table-bg-active:               @table-bg-hover;
-
-//** Border color for table and cell borders.
-@table-border-color:            @gray-dark;
-
-
-//== Buttons
-//
-//## For each of Bootstrap's buttons, define text, background and border color.
-
-@btn-font-weight:                normal;
-
-@btn-default-color:              #000;
-@btn-default-bg:                 @gray-light;
-@btn-default-border:             darken(@btn-default-bg, 10%);
-
-@btn-primary-color:              @btn-default-color;
-@btn-primary-bg:                 @brand-primary;
-@btn-primary-border:             darken(@btn-primary-bg, 10%);
-
-@btn-success-color:              @btn-default-color;
-@btn-success-bg:                 @brand-success;
-@btn-success-border:             darken(@btn-success-bg, 10%);
-
-@btn-info-color:                 @btn-default-color;
-@btn-info-bg:                    @brand-info;
-@btn-info-border:                darken(@btn-info-bg, 10%);
-
-@btn-warning-color:              @btn-default-color;
-@btn-warning-bg:                 @brand-warning;
-@btn-warning-border:             darken(@btn-warning-bg, 10%);
-
-@btn-danger-color:               @btn-default-color;
-@btn-danger-bg:                  @brand-danger;
-@btn-danger-border:              darken(@btn-danger-bg, 10%);
-
-@btn-link-disabled-color:        @gray-light;
-
-
-//== Forms
-//
-//##
-
-//** `<input>` background color
-@input-bg:                       #000;
-//** `<input disabled>` background color
-@input-bg-disabled:              @gray-darker;
-
-//** Text color for `<input>`s
-@input-color:                    @text-color;
-//** `<input>` border color
-@input-border:                   @gray-dark;
-//** `<input>` border radius
-@input-border-radius:            @border-radius-base;
-//** Border color for inputs on focus
-@input-border-focus:             #66afe9;
-
-//** Placeholder text color
-@input-color-placeholder:        @gray-light;
-
-//** Default `.form-control` height
-@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
-//** Large `.form-control` height
-@input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
-//** Small `.form-control` height
-@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
-
-@legend-color:                   @text-color;
-@legend-border-color:            @gray-dark;
-
-//** Background color for textual input addons
-@input-group-addon-bg:           @gray-light;
-//** Border color for textual input addons
-@input-group-addon-border-color: @input-border;
-
-
-//== Dropdowns
-//
-//## Dropdown menu container and contents.
-
-//** Background for the dropdown menu.
-@dropdown-bg:                    @gray-darker;
-//** Dropdown menu `border-color`.
-@dropdown-border:                rgba(255,255,255,0.1);
-//** Dropdown menu `border-color` **for IE8**.
-@dropdown-fallback-border:       #444;
-//** Divider color for between dropdown items.
-@dropdown-divider-bg:            rgba(255,255,255,0.1);
-
-//** Dropdown link text color.
-@dropdown-link-color:            #fff;
-//** Hover color for dropdown links.
-@dropdown-link-hover-color:      #fff;
-//** Hover background for dropdown links.
-@dropdown-link-hover-bg:         @dropdown-link-active-bg;
-
-//** Active dropdown menu item text color.
-@dropdown-link-active-color:     #fff;
-//** Active dropdown menu item background color.
-@dropdown-link-active-bg:        @component-active-bg;
-
-//** Disabled dropdown menu item background color.
-@dropdown-link-disabled-color:   @text-muted;
-
-//** Text color for headers within dropdown menus.
-@dropdown-header-color:          @text-muted;
-
-//** Deprecated `@dropdown-caret-color` as of v3.1.0
-@dropdown-caret-color:           #000;
-
-
-//-- Z-index master list
-//
-// Warning: Avoid customizing these values. They're used for a bird's eye view
-// of components dependent on the z-axis and are designed to all work together.
-//
-// Note: These variables are not generated into the Customizer.
-
-@zindex-navbar:            1000;
-@zindex-dropdown:          1000;
-@zindex-popover:           1060;
-@zindex-tooltip:           1070;
-@zindex-navbar-fixed:      1030;
-@zindex-modal-background:  1040;
-@zindex-modal:             1050;
-
-
-//== Media queries breakpoints
-//
-//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
-
-// Extra small screen / phone
-//** Deprecated `@screen-xs` as of v3.0.1
-@screen-xs:                  480px;
-//** Deprecated `@screen-xs-min` as of v3.2.0
-@screen-xs-min:              @screen-xs;
-//** Deprecated `@screen-phone` as of v3.0.1
-@screen-phone:               @screen-xs-min;
-
-// Small screen / tablet
-//** Deprecated `@screen-sm` as of v3.0.1
-@screen-sm:                  768px;
-@screen-sm-min:              @screen-sm;
-//** Deprecated `@screen-tablet` as of v3.0.1
-@screen-tablet:              @screen-sm-min;
-
-// Medium screen / desktop
-//** Deprecated `@screen-md` as of v3.0.1
-@screen-md:                  992px;
-@screen-md-min:              @screen-md;
-//** Deprecated `@screen-desktop` as of v3.0.1
-@screen-desktop:             @screen-md-min;
-
-// Large screen / wide desktop
-//** Deprecated `@screen-lg` as of v3.0.1
-@screen-lg:                  1200px;
-@screen-lg-min:              @screen-lg;
-//** Deprecated `@screen-lg-desktop` as of v3.0.1
-@screen-lg-desktop:          @screen-lg-min;
-
-// So media queries don't overlap when required, provide a maximum
-@screen-xs-max:              (@screen-sm-min - 1);
-@screen-sm-max:              (@screen-md-min - 1);
-@screen-md-max:              (@screen-lg-min - 1);
-
-
-//== Grid system
-//
-//## Define your custom responsive grid.
-
-//** Number of columns in the grid.
-@grid-columns:              12;
-//** Padding between columns. Gets divided in half for the left and right.
-@grid-gutter-width:         30px;
-// Navbar collapse
-//** Point at which the navbar becomes uncollapsed.
-@grid-float-breakpoint:     @screen-sm-min;
-//** Point at which the navbar begins collapsing.
-@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
-
-
-//== Container sizes
-//
-//## Define the maximum width of `.container` for different screen sizes.
-
-// Small screen / tablet
-@container-tablet:             ((720px + @grid-gutter-width));
-//** For `@screen-sm-min` and up.
-@container-sm:                 @container-tablet;
-
-// Medium screen / desktop
-@container-desktop:            ((940px + @grid-gutter-width));
-//** For `@screen-md-min` and up.
-@container-md:                 @container-desktop;
-
-// Large screen / wide desktop
-@container-large-desktop:      ((1140px + @grid-gutter-width));
-//** For `@screen-lg-min` and up.
-@container-lg:                 @container-large-desktop;
-
-
-//== Navbar
-//
-//##
-
-// Basics of a navbar
-@navbar-height:                    50px;
-@navbar-margin-bottom:             @line-height-computed;
-@navbar-border-radius:             @border-radius-base;
-@navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
-@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
-@navbar-collapse-max-height:       340px;
-
-@navbar-default-color:             @text-color;
-@navbar-default-bg:                @body-bg;
-@navbar-default-border:            @gray-dark;
-
-// Navbar links
-@navbar-default-link-color:                @text-color;
-@navbar-default-link-hover-color:          #fff;
-@navbar-default-link-hover-bg:             transparent;
-@navbar-default-link-active-color:         #fff;
-@navbar-default-link-active-bg:            transparent;
-@navbar-default-link-disabled-color:       @gray-light;
-@navbar-default-link-disabled-bg:          transparent;
-
-// Navbar brand label
-@navbar-default-brand-color:               #fff;
-@navbar-default-brand-hover-color:         #fff;
-@navbar-default-brand-hover-bg:            transparent;
-
-// Navbar toggle
-@navbar-default-toggle-hover-bg:           @gray-dark;
-@navbar-default-toggle-icon-bar-bg:        #ccc;
-@navbar-default-toggle-border-color:       @gray-dark;
-
-
-// Inverted navbar
-// Reset inverted navbar basics
-@navbar-inverse-color:                      @gray-light;
-@navbar-inverse-bg:                         @gray-darker;
-@navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
-
-// Inverted navbar links
-@navbar-inverse-link-color:                 @gray-light;
-@navbar-inverse-link-hover-color:           #fff;
-@navbar-inverse-link-hover-bg:              transparent;
-@navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
-@navbar-inverse-link-active-bg:             transparent;
-@navbar-inverse-link-disabled-color:        #aaa;
-@navbar-inverse-link-disabled-bg:           transparent;
-
-// Inverted navbar brand label
-@navbar-inverse-brand-color:                #fff;
-@navbar-inverse-brand-hover-color:          #fff;
-@navbar-inverse-brand-hover-bg:             transparent;
-
-// Inverted navbar toggle
-@navbar-inverse-toggle-hover-bg:            #333;
-@navbar-inverse-toggle-icon-bar-bg:         #fff;
-@navbar-inverse-toggle-border-color:        #333;
-
-
-//== Navs
-//
-//##
-
-//=== Shared nav styles
-@nav-link-padding:                          10px 15px;
-@nav-link-hover-bg:                         @gray-darker;
-
-@nav-disabled-link-color:                   @gray-light;
-@nav-disabled-link-hover-color:             @gray-light;
-
-@nav-open-link-hover-color:                 @gray-darker;
-
-//== Tabs
-@nav-tabs-border-color:                     @gray-dark;
-
-@nav-tabs-link-hover-border-color:          transparent;
-
-@nav-tabs-active-link-hover-bg:             @brand-primary;
-@nav-tabs-active-link-hover-color:          #fff;
-@nav-tabs-active-link-hover-border-color:   @gray-dark;
-
-@nav-tabs-justified-link-border-color:            #ddd;
-@nav-tabs-justified-active-link-border-color:     @body-bg;
-
-//== Pills
-@nav-pills-border-radius:                   @border-radius-base;
-@nav-pills-active-link-hover-bg:            @component-active-bg;
-@nav-pills-active-link-hover-color:         @component-active-color;
-
-
-//== Pagination
-//
-//##
-
-@pagination-color:                     #fff;
-@pagination-bg:                        @gray-darker;
-@pagination-border:                    @gray-dark;
-
-@pagination-hover-color:               #000;
-@pagination-hover-bg:                  @component-active-bg;
-@pagination-hover-border:              transparent;
-
-@pagination-active-color:              #000;
-@pagination-active-bg:                 @brand-primary;
-@pagination-active-border:             transparent;
-
-@pagination-disabled-color:            @gray-light;
-@pagination-disabled-bg:               @gray-darker;
-@pagination-disabled-border:           @gray-dark;
-
-
-//== Pager
-//
-//##
-
-@pager-bg:                             @pagination-bg;
-@pager-border:                         @pagination-border;
-@pager-border-radius:                  15px;
-
-@pager-hover-bg:                       @pagination-hover-bg;
-
-@pager-active-bg:                      @pagination-active-bg;
-@pager-active-color:                   @pagination-active-color;
-
-@pager-disabled-color:                 @gray-light;
-
-
-//== Jumbotron
-//
-//##
-
-@jumbotron-padding:              30px;
-@jumbotron-color:                inherit;
-@jumbotron-bg:                   darken(@gray-darker, 5%);
-@jumbotron-heading-color:        inherit;
-@jumbotron-font-size:            ceil((@font-size-base * 1.5));
-
-
-//== Form states and alerts
-//
-//## Define colors for form feedback states and, by default, alerts.
-
-@state-success-text:             @brand-success;
-@state-success-bg:               darken(@brand-success, 40%);
-@state-success-border:           @brand-success;
-
-@state-info-text:                @brand-info;
-@state-info-bg:                  darken(@brand-info, 40%);
-@state-info-border:              @brand-info;
-
-@state-warning-text:             @brand-warning;
-@state-warning-bg:               darken(@brand-warning, 40%);
-@state-warning-border:           @brand-warning;
-
-@state-danger-text:              @brand-danger;
-@state-danger-bg:                darken(@brand-danger, 40%);
-@state-danger-border:            @brand-danger;
-
-
-//== Tooltips
-//
-//##
-
-//** Tooltip max width
-@tooltip-max-width:           200px;
-//** Tooltip text color
-@tooltip-color:               #fff;
-//** Tooltip background color
-@tooltip-bg:                  rgba(0,0,0,.9);
-@tooltip-opacity:             .9;
-
-//** Tooltip arrow width
-@tooltip-arrow-width:         5px;
-//** Tooltip arrow color
-@tooltip-arrow-color:         @tooltip-bg;
-
-
-//== Popovers
-//
-//##
-
-//** Popover body background color
-@popover-bg:                          lighten(@body-bg, 10%);
-//** Popover maximum width
-@popover-max-width:                   276px;
-//** Popover border color
-@popover-border-color:                rgba(0,0,0,.2);
-//** Popover fallback border color
-@popover-fallback-border-color:       #999;
-
-//** Popover title background color
-@popover-title-bg:                    darken(@popover-bg, 3%);
-
-//** Popover arrow width
-@popover-arrow-width:                 10px;
-//** Popover arrow color
-@popover-arrow-color:                 @popover-bg;
-
-//** Popover outer arrow width
-@popover-arrow-outer-width:           (@popover-arrow-width + 1);
-//** Popover outer arrow color
-@popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
-//** Popover outer arrow fallback color
-@popover-arrow-outer-fallback-color:  darken(@popover-fallback-border-color, 20%);
-
-
-//== Labels
-//
-//##
-
-//** Default label background color
-@label-default-bg:            @btn-default-bg;
-//** Primary label background color
-@label-primary-bg:            @brand-primary;
-//** Success label background color
-@label-success-bg:            @brand-success;
-//** Info label background color
-@label-info-bg:               @brand-info;
-//** Warning label background color
-@label-warning-bg:            @brand-warning;
-//** Danger label background color
-@label-danger-bg:             @brand-danger;
-
-//** Default label text color
-@label-color:                 #fff;
-//** Default text color of a linked label
-@label-link-hover-color:      #fff;
-
-
-//== Modals
-//
-//##
-
-//** Padding applied to the modal body
-@modal-inner-padding:         20px;
-
-//** Padding applied to the modal title
-@modal-title-padding:         15px;
-//** Modal title line-height
-@modal-title-line-height:     @line-height-base;
-
-//** Background color of modal content area
-@modal-content-bg:                             lighten(@body-bg, 10%);
-//** Modal content border color
-@modal-content-border-color:                   rgba(0,0,0,.2);
-//** Modal content border color **for IE8**
-@modal-content-fallback-border-color:          #999;
-
-//** Modal backdrop background color
-@modal-backdrop-bg:           #000;
-//** Modal backdrop opacity
-@modal-backdrop-opacity:      .5;
-//** Modal header border color
-@modal-header-border-color:   @gray-dark;
-//** Modal footer border color
-@modal-footer-border-color:   @modal-header-border-color;
-
-@modal-lg:                    900px;
-@modal-md:                    600px;
-@modal-sm:                    300px;
-
-
-//== Alerts
-//
-//## Define alert colors, border radius, and padding.
-
-@alert-padding:               15px;
-@alert-border-radius:         @border-radius-base;
-@alert-link-font-weight:      bold;
-
-@alert-success-bg:            @state-success-bg;
-@alert-success-text:          @state-success-text;
-@alert-success-border:        @state-success-border;
-
-@alert-info-bg:               @state-info-bg;
-@alert-info-text:             @state-info-text;
-@alert-info-border:           @state-info-border;
-
-@alert-warning-bg:            @state-warning-bg;
-@alert-warning-text:          @state-warning-text;
-@alert-warning-border:        @state-warning-border;
-
-@alert-danger-bg:             @state-danger-bg;
-@alert-danger-text:           @state-danger-text;
-@alert-danger-border:         @state-danger-border;
-
-
-//== Progress bars
-//
-//##
-
-//** Background color of the whole progress component
-@progress-bg:                 @gray-darker;
-//** Progress bar text color
-@progress-bar-color:          #fff;
-
-//** Default progress bar color
-@progress-bar-bg:             @brand-primary;
-//** Success progress bar color
-@progress-bar-success-bg:     @brand-success;
-//** Warning progress bar color
-@progress-bar-warning-bg:     @brand-warning;
-//** Danger progress bar color
-@progress-bar-danger-bg:      @brand-danger;
-//** Info progress bar color
-@progress-bar-info-bg:        @brand-info;
-
-
-//== List group
-//
-//##
-
-//** Background color on `.list-group-item`
-@list-group-bg:                 @gray-darker;
-//** `.list-group-item` border color
-@list-group-border:             @gray-dark;
-//** List group border radius
-@list-group-border-radius:      @border-radius-base;
-
-//** Background color of single list items on hover
-@list-group-hover-bg:           lighten(@list-group-bg, 15%);
-//** Text color of active list items
-@list-group-active-color:       @component-active-color;
-//** Background color of active list items
-@list-group-active-bg:          @component-active-bg;
-//** Border color of active list elements
-@list-group-active-border:      @list-group-active-bg;
-//** Text color for content within active list items
-@list-group-active-text-color:  lighten(@list-group-active-bg, 40%);
-
-//** Text color of disabled list items
-@list-group-disabled-color:      @gray-light;
-//** Background color of disabled list items
-@list-group-disabled-bg:         @gray-lighter;
-//** Text color for content within disabled list items
-@list-group-disabled-text-color: @list-group-disabled-color;
-
-@list-group-link-color:         @text-color;
-@list-group-link-hover-color:   @list-group-link-color;
-@list-group-link-heading-color: #fff;
-
-
-//== Panels
-//
-//##
-
-@panel-bg:                    @gray-darker;
-@panel-body-padding:          15px;
-@panel-heading-padding:       10px 15px;
-@panel-footer-padding:        @panel-heading-padding;
-@panel-border-radius:         @border-radius-base;
-
-//** Border color for elements within panels
-@panel-inner-border:          @gray-dark;
-
-@panel-default-text:          @text-color;
-@panel-default-border:        @panel-inner-border;
-@panel-default-heading-bg:    lighten(@gray-darker, 10%);
-
-@panel-footer-bg:             @panel-default-heading-bg;
-
-@panel-primary-text:          #fff;
-@panel-primary-border:        @brand-primary;
-@panel-primary-heading-bg:    @brand-primary;
-
-@panel-success-text:          @state-success-text;
-@panel-success-border:        @state-success-border;
-@panel-success-heading-bg:    @state-success-bg;
-
-@panel-info-text:             @state-info-text;
-@panel-info-border:           @state-info-border;
-@panel-info-heading-bg:       @state-info-bg;
-
-@panel-warning-text:          @state-warning-text;
-@panel-warning-border:        @state-warning-border;
-@panel-warning-heading-bg:    @state-warning-bg;
-
-@panel-danger-text:           @state-danger-text;
-@panel-danger-border:         @state-danger-border;
-@panel-danger-heading-bg:     @state-danger-bg;
-
-
-//== Thumbnails
-//
-//##
-
-//** Padding around the thumbnail image
-@thumbnail-padding:           4px;
-//** Thumbnail background color
-@thumbnail-bg:                @gray-dark;
-//** Thumbnail border color
-@thumbnail-border:            @gray-dark;
-//** Thumbnail border radius
-@thumbnail-border-radius:     @border-radius-base;
-
-//** Custom text color for thumbnail captions
-@thumbnail-caption-color:     @text-color;
-//** Padding around the thumbnail caption
-@thumbnail-caption-padding:   9px;
-
-
-//== Wells
-//
-//##
-
-@well-bg:                     darken(@gray-darker, 5%);
-@well-border:                 darken(@well-bg, 7%);
-
-
-//== Badges
-//
-//##
-
-@badge-color:                 #000;
-//** Linked badge text color on hover
-@badge-link-hover-color:      #000;
-@badge-bg:                    @brand-primary;
-
-//** Badge text color in active nav link
-@badge-active-color:          @brand-primary;
-//** Badge background color in active nav link
-@badge-active-bg:             #fff;
-
-@badge-font-weight:           bold;
-@badge-line-height:           1;
-@badge-border-radius:         10px;
-
-
-//== Breadcrumbs
-//
-//##
-
-@breadcrumb-padding-vertical:   8px;
-@breadcrumb-padding-horizontal: 15px;
-//** Breadcrumb background color
-@breadcrumb-bg:                 @gray-darker;
-//** Breadcrumb text color
-@breadcrumb-color:              #fff;
-//** Text color of current page in the breadcrumb
-@breadcrumb-active-color:       @text-color;
-//** Textual separator for between breadcrumb elements
-@breadcrumb-separator:          "/";
-
-
-//== Carousel
-//
-//##
-
-@carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
-
-@carousel-control-color:                      #fff;
-@carousel-control-width:                      15%;
-@carousel-control-opacity:                    .5;
-@carousel-control-font-size:                  20px;
-
-@carousel-indicator-active-bg:                #fff;
-@carousel-indicator-border-color:             #fff;
-
-@carousel-caption-color:                      #fff;
-
-
-//== Close
-//
-//##
-
-@close-font-weight:           bold;
-@close-color:                 #000;
-@close-text-shadow:           0 1px 0 #fff;
-
-
-//== Code
-//
-//##
-
-@code-color:                  #c7254e;
-@code-bg:                     #f9f2f4;
-
-@kbd-color:                   #fff;
-@kbd-bg:                      #333;
-
-@pre-bg:                      #f5f5f5;
-@pre-color:                   @gray-dark;
-@pre-border-color:            #ccc;
-@pre-scrollable-max-height:   340px;
-
-
-//== Type
-//
-//##
-
-//** Horizontal offset for forms and lists.
-@component-offset-horizontal: 180px;
-//** Text muted color
-@text-muted:                  @gray-light;
-//** Abbreviations and acronyms border color
-@abbr-border-color:           @gray-light;
-//** Headings small color
-@headings-small-color:        @brand-primary;
-//** Blockquote small color
-@blockquote-small-color:      @gray;
-//** Blockquote font size
-@blockquote-font-size:        (@font-size-base * 1.25);
-//** Blockquote border color
-@blockquote-border-color:     @gray-dark;
-//** Page header border color
-@page-header-border-color:    @gray-dark;
-//** Width of horizontal description list titles
-@dl-horizontal-offset:        @component-offset-horizontal;
-//** Horizontal line color.
-@hr-border:                   @gray-dark;
-
-@import "base";
diff --git a/resources/assets/themes/cyborg_variables.scss b/resources/assets/themes/cyborg_variables.scss
new file mode 100644
index 00000000..0b27d890
--- /dev/null
+++ b/resources/assets/themes/cyborg_variables.scss
@@ -0,0 +1,696 @@
+// cyborg_variables
+
+/*
+The MIT License (MIT)
+
+Copyright (c) 2013 Thomas Park
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+@use "sass:math";
+
+// Cyborg 3.2.0
+// Variables
+// --------------------------------------------------
+
+//== Colors
+
+//## Gray and brand colors for use across Bootstrap.
+$gray-darker:  #222 !default;
+$gray-dark:    #333 !default;
+$gray:         #555 !default;
+$gray-light:   #999 !default;
+$gray-lighter: #eee !default;
+
+$primary: #437aca !default;
+$success: #99ba00 !default;
+$info:    #0076ba !default;
+$warning: #ffc600 !default;
+$danger:  #d9534f !default;
+
+//== Scaffolding
+//
+//## Settings for some of the most global styles.
+
+$body-bg:    #060606 !default;
+$body-color: $gray-light !default;
+
+//** Global text color on `<body>`.
+$text-color: $gray-light !default;
+$text-muted: $gray-light !default;
+
+//** Global textual link color.
+$link-color:       $primary !default;
+//** Link hover color set via `darken()` function.
+$link-hover-color: $link-color !default;
+
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+
+$font-size-base:  1rem !default;
+$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
+
+$font-size-h1: 34px !default;
+$font-size-h2: 24px !default;
+$font-size-h3: 20px !default;
+$font-size-h4: 20px !default;
+$font-size-h5: 20px !default;
+$font-size-h6: 16px !default;
+
+//** Unit-less `line-height` for use in components like buttons.
+$line-height-base: 1.5 !default;
+
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
+
+//** By default, this inherits from the `<body>`.
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.1 !default;
+$headings-color:       #fff !default;
+
+
+//== Components
+//
+//## Define common padding and border radius sizes and more.
+//## Values based on 14px text and 1.428 line-height (~20px to start).
+
+$line-height-large: 1.33 !default;
+$line-height-small: 1.5 !default;
+
+$border-radius-base:  4px !default;
+$border-radius-large: 6px !default;
+$border-radius-small: 3px !default;
+
+//** Global color for active items (e.g., navs or dropdowns).
+$component-active-color: #fff !default;
+//** Global background color for active items (e.g., navs or dropdowns).
+$component-active-bg:    $primary !default;
+
+//** Width of the `border` for generating carets that indicator dropdowns.
+$caret-width-base:  4px !default;
+//** Carets increase slightly in size for larger components.
+$caret-width-large: 5px !default;
+
+
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for `<th>`s and `<td>`s.
+$table-cell-padding:            8px !default;
+//** Padding for cells in `.table-condensed`.
+$table-condensed-cell-padding:  5px !default;
+
+//** Default background color used for all tables.
+$table-bg:        darken($gray-darker, 4%) !default;
+//** Background color used for `.table-striped`.
+$table-bg-accent: darken($table-bg, 6%) !default;
+//** Background color used for `.table-hover`.
+$table-bg-hover:  $gray-dark !default;
+$table-bg-active: $table-bg-hover !default;
+
+//** Border color for table and cell borders.
+$table-border-color: $gray-dark !default;
+
+//== Forms
+//
+//##
+
+//** `<input>` background color
+$input-bg:          $gray-darker !default;
+//** `<input disabled>` background color
+$input-bg-disabled: $gray-darker !default;
+
+//** Text color for `<input>`s
+$input-color:         $text-color !default;
+//** `<input>` border color
+$input-border-color:  $gray-dark !default;
+//** `<input>` border radius
+$input-border-radius: $border-radius-base !default;
+//** Border color for inputs on focus
+$input-border-focus:  #66afe9 !default;
+
+//** Placeholder text color
+$input-color-placeholder: $gray-light !default;
+
+$legend-color:        $text-color !default;
+$legend-border-color: $gray-dark !default;
+
+//** Background color for textual input addons
+$input-group-addon-bg: $gray-light !default;
+//** Border color for textual input addons
+$input-group-addon-border-color: $input-border-color !default;
+
+$form-label-font-weight: bold !default;
+
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
+
+$dropdown-bg:              $gray-darker !default;
+$dropdown-border:          rgba(255,255,255,0.1) !default;
+$dropdown-fallback-border: #444;
+$dropdown-divider-bg:      rgba(255,255,255,0.1) !default;
+
+//** Active dropdown menu item text color.
+$dropdown-link-active-color: #fff !default;
+//** Active dropdown menu item background color.
+$dropdown-link-active-bg:    $component-active-bg !default;
+
+//** Dropdown link text color.
+$dropdown-link-color:       #fff !default;
+//** Hover color for dropdown links.
+$dropdown-link-hover-color: #fff !default;
+//** Hover background for dropdown links.
+$dropdown-link-hover-bg:    $dropdown-link-active-bg !default;
+
+//** Disabled dropdown menu item background color.
+$dropdown-link-disabled-color: $text-muted !default;
+
+//** Text color for headers within dropdown menus.
+$dropdown-header-color:        $text-muted !default;
+
+//** Deprecated `$dropdown-caret-color` as of v3.1.0
+$dropdown-caret-color:           #000 !default;
+
+
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
+
+$zindex-navbar:            1000 !default;
+$zindex-dropdown:          1000 !default;
+$zindex-popover:           1060 !default;
+$zindex-tooltip:           1070 !default;
+$zindex-navbar-fixed:      1030 !default;
+$zindex-modal-background:  1040 !default;
+$zindex-modal:             1050 !default;
+
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+//** Deprecated `$screen-xs` as of v3.0.1
+$screen-xs:                  480px !default;
+//** Deprecated `$screen-xs-min` as of v3.2.0
+$screen-xs-min:              $screen-xs !default;
+//** Deprecated `$screen-phone` as of v3.0.1
+$screen-phone:               $screen-xs-min !default;
+
+// Small screen / tablet
+//** Deprecated `$screen-sm` as of v3.0.1
+$screen-sm:                  768px !default;
+$screen-sm-min:              $screen-sm !default;
+//** Deprecated `$screen-tablet` as of v3.0.1
+$screen-tablet:              $screen-sm-min !default;
+
+// Medium screen / desktop
+//** Deprecated `$screen-md` as of v3.0.1
+$screen-md:                  992px !default;
+$screen-md-min:              $screen-md !default;
+//** Deprecated `$screen-desktop` as of v3.0.1
+$screen-desktop:             $screen-md-min !default;
+
+// Large screen / wide desktop
+//** Deprecated `$screen-lg` as of v3.0.1
+$screen-lg:                  1200px !default;
+$screen-lg-min:              $screen-lg !default;
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+$screen-lg-desktop:          $screen-lg-min !default;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max:              ($screen-sm-min - 1) !default;
+$screen-sm-max:              ($screen-md-min - 1) !default;
+$screen-md-max:              ($screen-lg-min - 1) !default;
+
+
+//== Grid system
+//
+//## Define your custom responsive grid.
+
+//** Number of columns in the grid.
+$grid-columns:              12 !default;
+//** Padding between columns. Gets divided in half for the left and right.
+$grid-gutter-width:         30px !default;
+// Navbar collapse
+//** Point at which the navbar becomes uncollapsed.
+$grid-float-breakpoint:     $screen-sm-min !default;
+//** Point at which the navbar begins collapsing.
+$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
+
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+$container-tablet:             ((720px + $grid-gutter-width)) !default;
+//** For `$screen-sm-min` and up.
+$container-sm:                 $container-tablet !default;
+
+// Medium screen / desktop
+$container-desktop:            ((940px + $grid-gutter-width)) !default;
+//** For `$screen-md-min` and up.
+$container-md:                 $container-desktop !default;
+
+// Large screen / wide desktop
+$container-large-desktop:      ((1140px + $grid-gutter-width)) !default;
+//** For `$screen-lg-min` and up.
+$container-lg:                 $container-large-desktop !default;
+
+
+//== Navbar
+//
+//##
+
+// Basics of a navbar
+$navbar-height:              3.125rem !default;
+$navbar-margin-bottom:       $line-height-computed !default;
+$navbar-border-radius:       $border-radius-base !default;
+$navbar-padding-horizontal:  floor(math.div($grid-gutter-width, 2)) !default;
+$navbar-padding-vertical:    math.div($navbar-height - $line-height-computed, 2) !default;
+$navbar-collapse-max-height: 340px !default;
+
+$navbar-default-color:  $text-color !default;
+$navbar-default-bg:     $body-bg !default;
+$navbar-default-border: $gray-dark !default;
+
+// Navbar links
+$navbar-default-link-color:          $text-color !default;
+$navbar-default-link-hover-color:    #fff !default;
+$navbar-default-link-hover-bg:       transparent !default;
+$navbar-default-link-active-color:   #fff !default;
+$navbar-default-link-active-bg:      transparent !default;
+$navbar-default-link-disabled-color: $gray-light !default;
+$navbar-default-link-disabled-bg:    transparent !default;
+
+// Navbar brand label
+$navbar-default-brand-color:       #fff !default;
+$navbar-default-brand-hover-color: #fff !default;
+$navbar-default-brand-hover-bg:    transparent !default;
+
+// Navbar toggle
+$navbar-default-toggle-hover-bg:     $gray-dark !default;
+$navbar-default-toggle-icon-bar-bg:  #ccc !default;
+$navbar-default-toggle-border-color: $gray-dark !default;
+
+
+// Inverted navbar
+// Reset inverted navbar basics
+$navbar-inverse-color:  $gray-light !default;
+$navbar-inverse-bg:     $gray-darker !default;
+$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
+
+// Inverted navbar links
+$navbar-inverse-link-color:          $gray-light !default;
+$navbar-inverse-link-hover-color:    #fff !default;
+$navbar-inverse-link-hover-bg:       transparent !default;
+$navbar-inverse-link-active-color:   $navbar-inverse-link-hover-color !default;
+$navbar-inverse-link-active-bg:      transparent !default;
+$navbar-inverse-link-disabled-color: #aaa !default;
+$navbar-inverse-link-disabled-bg:    transparent !default;
+
+// Inverted navbar brand label
+$navbar-inverse-brand-color:       #fff !default;
+$navbar-inverse-brand-hover-color: #fff !default;
+$navbar-inverse-brand-hover-bg:    transparent !default;
+
+// Inverted navbar toggle
+$navbar-inverse-toggle-hover-bg:     #333 !default;
+$navbar-inverse-toggle-icon-bar-bg:  #fff !default;
+$navbar-inverse-toggle-border-color: #333 !default;
+
+
+//== Navs
+//
+//##
+
+//=== Shared nav styles
+$nav-link-padding:  10px 15px !default;
+$nav-link-hover-bg: $gray-darker !default;
+
+$nav-disabled-link-color:       $gray-light !default;
+$nav-disabled-link-hover-color: $gray-light !default;
+
+$nav-open-link-hover-color: $gray-darker !default;
+
+//== Tabs
+$nav-tabs-border-color: $gray-dark !default;
+
+$nav-tabs-link-hover-border-color: transparent !default;
+
+$nav-tabs-active-link-hover-bg:           $primary !default;
+$nav-tabs-active-link-hover-color:        #fff !default;
+$nav-tabs-active-link-hover-border-color: $gray-dark !default;
+
+$nav-tabs-justified-link-border-color:        #ddd !default;
+$nav-tabs-justified-active-link-border-color: $body-bg !default;
+
+//== Pills
+$nav-pills-border-radius:           $border-radius-base !default;
+$nav-pills-active-link-hover-bg:    $component-active-bg !default;
+$nav-pills-active-link-hover-color: $component-active-color !default;
+
+
+//== Pagination
+//
+//##
+
+$pagination-color:           #fff !default;
+$pagination-bg:              $gray-darker !default;
+$pagination-border:          $gray-dark !default;
+
+$pagination-hover-color:     #000 !default;
+$pagination-hover-bg:        $component-active-bg !default;
+$pagination-hover-border:    transparent !default;
+
+$pagination-active-color:    #000 !default;
+$pagination-active-bg:       $primary !default;
+$pagination-active-border:   transparent !default;
+
+$pagination-disabled-color:  $gray-light !default;
+$pagination-disabled-bg:     $gray-darker !default;
+$pagination-disabled-border: $gray-dark !default;
+
+
+//== Pager
+//
+//##
+
+$pager-bg:             $pagination-bg !default;
+$pager-border:         $pagination-border !default;
+$pager-border-radius:  15px !default;
+
+$pager-hover-bg:       $pagination-hover-bg !default;
+
+$pager-active-bg:      $pagination-active-bg !default;
+$pager-active-color:   $pagination-active-color !default;
+
+$pager-disabled-color: $gray-light !default;
+
+
+//== Jumbotron
+//
+//##
+
+$jumbotron-padding:       30px !default;
+$jumbotron-color:         inherit !default;
+$jumbotron-bg:            darken($gray-darker, 5%) !default;
+$jumbotron-heading-color: inherit !default;
+$jumbotron-font-size:     ceil(($font-size-base * 1.5)) !default;
+
+
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
+
+$state-success-text:   $success !default;
+$state-success-bg:     darken($success, 40%) !default;
+$state-success-border: $success !default;
+
+$state-info-text:      $info !default;
+$state-info-bg:        darken($info, 40%) !default;
+$state-info-border:    $info !default;
+
+$state-warning-text:   $warning !default;
+$state-warning-bg:     darken($warning, 40%) !default;
+$state-warning-border: $warning !default;
+
+$state-danger-text:    $danger !default;
+$state-danger-bg:      darken($danger, 40%) !default;
+$state-danger-border:  $danger !default;
+
+
+//== Tooltips
+//
+//##
+
+$tooltip-max-width: 200px !default;
+$tooltip-color:     #fff !default;
+$tooltip-bg:        rgba(0,0,0,.9) !default;
+$tooltip-opacity:   .9 !default;
+
+$tooltip-arrow-width: 5px !default;
+$tooltip-arrow-color: $tooltip-bg !default;
+
+
+//== Popovers
+//
+//##
+
+$popover-bg:                    lighten($body-bg, 10%) !default;
+$popover-max-width:             276px !default;
+$popover-border-color:          rgba(0,0,0,.2) !default;
+$popover-fallback-border-color: #999 !default !default;
+
+//** Popover title background color
+$popover-title-bg:                    darken($popover-bg, 3%) !default;
+
+//** Popover arrow width
+$popover-arrow-width:                 10px !default;
+//** Popover arrow color
+$popover-arrow-color:                 $popover-bg !default;
+
+//** Popover outer arrow width
+$popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
+//** Popover outer arrow color
+$popover-arrow-outer-color:           fadein($popover-border-color, 5%) !default;
+//** Popover outer arrow fallback color
+$popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;
+
+
+//== Labels
+//
+//##
+
+$label-primary-bg:            $primary !default;
+$label-success-bg:            $success !default;
+$label-info-bg:               $info !default;
+$label-warning-bg:            $warning !default;
+$label-danger-bg:             $danger !default;
+
+//** Default label text color
+$label-color:                 #fff !default;
+//** Default text color of a linked label
+$label-link-hover-color:      #fff !default;
+
+
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
+$modal-inner-padding:         1.25rem !default;
+
+//** Padding applied to the modal title
+$modal-title-padding:         15px !default;
+//** Modal title line-height
+$modal-title-line-height:     $line-height-base !default;
+
+//** Background color of modal content area
+$modal-content-bg:                             lighten($body-bg, 10%) !default;
+//** Modal content border color
+$modal-content-border-color:                   rgba(0,0,0,.2) !default;
+//** Modal content border color **for IE8**
+$modal-content-fallback-border-color:          #999 !default;
+
+//** Modal backdrop background color
+$modal-backdrop-bg:           #000 !default;
+//** Modal backdrop opacity
+$modal-backdrop-opacity:      .5 !default;
+//** Modal header border color
+$modal-header-border-color:   $gray-dark !default;
+//** Modal footer border color
+$modal-footer-border-color:   $modal-header-border-color !default;
+
+$modal-lg:                    900px !default;
+$modal-md:                    600px !default;
+$modal-sm:                    300px !default;
+
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+$alert-padding:          15px !default;
+$alert-border-radius:    $border-radius-base !default;
+$alert-link-font-weight: bold !default;
+
+$alert-success-bg:       $state-success-bg !default;
+$alert-success-text:     $state-success-text !default;
+$alert-success-border:   $state-success-border !default;
+
+$alert-info-bg:          $state-info-bg !default;
+$alert-info-text:        $state-info-text !default;
+$alert-info-border:      $state-info-border !default;
+
+$alert-warning-bg:       $state-warning-bg !default;
+$alert-warning-text:     $state-warning-text !default;
+$alert-warning-border:   $state-warning-border !default;
+
+$alert-danger-bg:        $state-danger-bg !default;
+$alert-danger-text:      $state-danger-text !default;
+$alert-danger-border:    $state-danger-border !default;
+
+
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
+$progress-bg:                 $gray-darker !default;
+//** Progress bar text color
+$progress-bar-color:          #fff !default;
+
+//** Default progress bar color
+$progress-bar-bg:             $primary !default;
+//** Success progress bar color
+$progress-bar-success-bg:     $success !default;
+//** Warning progress bar color
+$progress-bar-warning-bg:     $warning !default;
+//** Danger progress bar color
+$progress-bar-danger-bg:      $danger !default;
+//** Info progress bar color
+$progress-bar-info-bg:        $info !default;
+
+
+//== List group
+//
+//##
+
+//** Background color on `.list-group-item`
+$list-group-bg:                 $gray-darker !default;
+//** `.list-group-item` border color
+$list-group-border:             $gray-dark !default;
+//** List group border radius
+$list-group-border-radius:      $border-radius-base !default;
+
+//** Background color of single list items on hover
+$list-group-hover-bg:           lighten($list-group-bg, 15%) !default;
+//** Text color of active list items
+$list-group-active-color:       $component-active-color !default;
+//** Background color of active list items
+$list-group-active-bg:          $component-active-bg !default;
+//** Border color of active list elements
+$list-group-active-border:      $list-group-active-bg !default;
+//** Text color for content within active list items
+$list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;
+
+//** Text color of disabled list items
+$list-group-disabled-color:      $gray-light !default;
+//** Background color of disabled list items
+$list-group-disabled-bg:         $gray-lighter !default;
+//** Text color for content within disabled list items
+$list-group-disabled-text-color: $list-group-disabled-color !default;
+
+$list-group-link-color:         $text-color !default;
+$list-group-link-hover-color:   $list-group-link-color !default;
+$list-group-link-heading-color: #fff !default;
+
+
+//== Breadcrumbs
+//
+//##
+
+$breadcrumb-padding-vertical:   8px !default;
+$breadcrumb-padding-horizontal: 15px !default;
+$breadcrumb-bg:                 $gray-darker !default;
+$breadcrumb-color:              #fff !default;
+//** Text color of current page in the breadcrumb
+$breadcrumb-active-color:       $text-color !default;
+//** Textual separator for between breadcrumb elements
+$breadcrumb-separator:          "/" !default;
+
+
+//== Carousel
+//
+//##
+
+$carousel-text-shadow:            0 1px 2px rgba(0,0,0,.6) !default;
+
+$carousel-control-color:          #fff !default;
+$carousel-control-width:          15% !default;
+$carousel-control-opacity:        .5 !default;
+$carousel-control-font-size:      20px !default;
+
+$carousel-indicator-active-bg:    #fff !default;
+$carousel-indicator-border-color: #fff !default;
+
+$carousel-caption-color:          #fff !default;
+
+
+//== Close
+//
+//##
+
+$close-font-weight:           bold !default;
+$close-color:                 #000 !default;
+$close-text-shadow:           0 1px 0 #fff !default;
+
+
+//== Code
+//
+//##
+
+$code-color:                  #c7254e !default;
+$code-bg:                     #f9f2f4 !default;
+
+$kbd-color:                   #fff !default;
+$kbd-bg:                      #333 !default;
+
+$pre-bg:                      #f5f5f5 !default;
+$pre-color:                   $gray-dark !default;
+$pre-border-color:            #ccc !default;
+$pre-scrollable-max-height:   340px !default;
+
+
+//== Type
+//
+//##
+
+//** Horizontal offset for forms and lists.
+$component-offset-horizontal: 180px !default;
+
+//** Abbreviations and acronyms border color
+$abbr-border-color:           $gray-light !default;
+//** Headings small color
+$headings-small-color:        $primary !default;
+//** Blockquote small color
+$blockquote-small-color:      $gray !default;
+//** Blockquote font size
+$blockquote-font-size:        ($font-size-base * 1.25) !default;
+//** Blockquote border color
+$blockquote-border-color:     $gray-dark !default;
+//** Page header border color
+$page-header-border-color:    $gray-dark !default;
+//** Width of horizontal description list titles
+$dl-horizontal-offset:        $component-offset-horizontal !default;
+//** Horizontal line color.
+$hr-border:                   $gray-dark !default;
+
+@import "base.scss";
diff --git a/resources/assets/themes/dark.scss b/resources/assets/themes/dark.scss
new file mode 100644
index 00000000..13267a8e
--- /dev/null
+++ b/resources/assets/themes/dark.scss
@@ -0,0 +1,5 @@
+// All dark themes
+$input-group-addon-color: #222;
+$input-disabled-bg: #111;
+$alert-bg-scale: 70%;
+$secondary: #222;
diff --git a/resources/assets/themes/error.less b/resources/assets/themes/error.scss
similarity index 100%
rename from resources/assets/themes/error.less
rename to resources/assets/themes/error.scss
diff --git a/resources/assets/themes/light.scss b/resources/assets/themes/light.scss
new file mode 100644
index 00000000..69c5f598
--- /dev/null
+++ b/resources/assets/themes/light.scss
@@ -0,0 +1,7 @@
+// All light themes
+
+$secondary: #bec4ce;
+
+.btn.btn-secondary {
+  background-color: rgba(255, 255, 255, 0.3);
+}
diff --git a/resources/assets/themes/theme0.less b/resources/assets/themes/theme0.less
deleted file mode 100644
index 9d37f0b4..00000000
--- a/resources/assets/themes/theme0.less
+++ /dev/null
@@ -1,2 +0,0 @@
-// light
-@import "base.less";
diff --git a/resources/assets/themes/theme0.scss b/resources/assets/themes/theme0.scss
new file mode 100644
index 00000000..41d7cee9
--- /dev/null
+++ b/resources/assets/themes/theme0.scss
@@ -0,0 +1,16 @@
+// light theme
+@import "light";
+
+$primary: #337ab7;
+$light: #f5f5f5;
+
+@import "base.scss";
+
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+  &.bg-primary,
+  &.bg-success,
+  &.bg-danger {
+      color: #fff;
+  }
+}
diff --git a/resources/assets/themes/theme1.less b/resources/assets/themes/theme1.less
deleted file mode 100644
index a5dc8266..00000000
--- a/resources/assets/themes/theme1.less
+++ /dev/null
@@ -1,98 +0,0 @@
-// dark
-@import "cyborg_variables.less";
-
-// Variables
-// --------------------------------------------------
-
-//== changed Colors
-
-@gray-dark:              #282828;   // #333
-@gray-light:             #888;   // #999
-@gray-lighter:           #ADAFAE; // #eee
-
-@brand-primary:         #428bca;
-@brand-success:         #5cb85c;
-@brand-info:            #5bc0de;
-@brand-warning:         #f0ad4e;
-
-
-//== changed Buttons
-
-@btn-default-color:              #fff;
-@btn-default-bg:                 lighten(@gray-dark, 10%);
-
-@btn-primary-border:             darken(@btn-default-bg, 10%);
-
-@btn-success-border:             @btn-primary-border;
-
-@btn-info-border:                @btn-primary-border;
-
-@btn-warning-border:             @btn-primary-border;
-
-@btn-danger-border:              @btn-primary-border;
-
-@btn-link-disabled-color:        @gray-light;
-
-
-//== changed Forms
-
-@input-bg:                       @gray-darker;
-
-@input-bg-disabled:              lighten(@gray-lighter,15%);
-
-@input-group-addon-bg:           @gray-lighter;
-
-
-//== changed Pagination
-
-@pagination-hover-color:               #fff;
-
-@pagination-active-color:              #fff;
-
-
-//== changed Form states and alerts
-
-@state-success-text:             #fff;
-@state-success-bg:               @brand-success;
-@state-success-border:           darken(@state-success-bg, 5%);
-
-@state-info-text:                #fff;
-@state-info-bg:                  @brand-info;
-@state-info-border:              darken(@state-info-bg, 7%);
-
-@state-warning-text:             #fff;
-@state-warning-bg:               @brand-warning;
-@state-warning-border:           darken(@state-warning-bg, 3%);
-
-@state-danger-text:              #fff;
-@state-danger-bg:                @brand-danger;
-@state-danger-border:            darken(@state-danger-bg, 3%);
-
-
-//== changed Badges
-
-@badge-color:                 #fff;
-
-@badge-link-hover-color:      #fff;
-
-
-//== changed Type
-
-@headings-small-color:        @gray-light;
-
-
-// Bootswatch
-// -----------------------------------------------------
-@import "cyborg_styles.less";
-
-// added Forms ======================================================================
-
-.input-group-addon {
-  background-color: @btn-default-bg;
-}
-
-// different code tag
-code {
-  background-color: @state-info-bg;
-  color: @state-info-text;
-}
diff --git a/resources/assets/themes/theme1.scss b/resources/assets/themes/theme1.scss
new file mode 100644
index 00000000..9e095cd8
--- /dev/null
+++ b/resources/assets/themes/theme1.scss
@@ -0,0 +1,85 @@
+// Variables
+// --------------------------------------------------
+
+@import "dark";
+
+//== changed Colors
+
+$gray-darker:  #222;
+$gray-dark:    #282828;
+$gray-light:   #888;
+$gray-lighter: #ADAFAE;
+
+$primary:   #437aca;
+$secondary: #424242;
+$success:   #00c960;
+$info:      #3dbddf;
+$warning:   #f6b345;
+$danger:    #e93a44;
+
+$text-muted: $gray-light;
+
+$btn-link-disabled-color:        $gray-light;
+
+
+//== changed Forms
+
+$input-bg:                       $gray-darker;
+$input-bg-disabled:              lighten($gray-lighter,15%);
+$input-group-addon-bg:           $gray-lighter;
+
+
+//== changed Pagination
+
+$pagination-hover-color:               #fff;
+$pagination-active-color:              #fff;
+
+
+//== changed Form states and alerts
+
+$state-success-text:             #fff;
+$state-success-bg:               $success;
+$state-success-border:           darken($state-success-bg, 5%);
+
+$state-info-text:                #fff;
+$state-info-bg:                  $info;
+$state-info-border:              darken($state-info-bg, 7%);
+
+$state-warning-text:             #fff;
+$state-warning-bg:               $warning;
+$state-warning-border:           darken($state-warning-bg, 3%);
+
+$state-danger-text:              #fff;
+$state-danger-bg:                $danger;
+$state-danger-border:            darken($state-danger-bg, 3%);
+
+$headings-small-color:        $gray-light;
+
+code {
+  background-color: $state-info-bg;
+  color: $state-info-text;
+}
+
+$alert-bg-scale: 0%;
+$alert-border-scale: 0%;
+$alert-color-scale: 0%;
+
+.alert {
+  color: #fff !important;
+
+  .text-danger,
+  .text-info {
+      color: #fff !important;
+  }
+}
+
+// dark
+@import "cyborg_variables";
+@import "cyborg_styles";
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+  &.bg-warning,
+  &.bg-info {
+      color: #000;
+  }
+}
diff --git a/resources/assets/themes/theme10.less b/resources/assets/themes/theme10.less
deleted file mode 100644
index 5f2a841d..00000000
--- a/resources/assets/themes/theme10.less
+++ /dev/null
@@ -1,57 +0,0 @@
-// cccamp19 green (2019)
-@import "cyborg_variables.less";
-
-// Variables
-// --------------------------------------------------
-
-//== changed Colors
-
-@gray-dark:              #282828;   // #333
-@gray-light:             #888;   // #999
-@gray-lighter:           #ADAFAE; // #eee
-
-@brand-primary:         #99ba00;
-
-@import "cyborg_styles.less";
-
-// Specials for cccamp19 design
-
-.navbar-brand {
-  .icon-icon_angel {
-    background-color: @brand-primary;
-  }
-
-  strong {
-    font-weight: lighter;
-    color: @brand-primary;
-    text-shadow:
-      0 0 10px @brand-primary,
-      0 0 20px @brand-primary,
-      0 0 30px @brand-primary,
-      0 0 40px @brand-primary,
-      0 0 70px @brand-primary,
-      0 0 80px @brand-primary;
-  }
-}
-
-h1 {
-  font-weight: lighter;
-  color: @brand-primary;
-  text-shadow: 0 0 10px @brand-primary;
-
-  .icon-icon_angel {
-    background-color: @brand-primary;
-  }
-}
-
-.panel-title {
-  color: #fff;
-}
-
-.input-group-addon {
-  color: #000;
-
-  .icon-icon_angel {
-    background-color: #000;
-  }
-}
diff --git a/resources/assets/themes/theme10.scss b/resources/assets/themes/theme10.scss
new file mode 100644
index 00000000..5731cb25
--- /dev/null
+++ b/resources/assets/themes/theme10.scss
@@ -0,0 +1,64 @@
+// cccamp19 green (2019)
+
+// Variables
+// --------------------------------------------------
+@import "dark";
+
+//== changed Colors
+
+$gray-dark:    #282828;
+$gray-light:   #888;
+$gray-lighter: #ADAFAE;
+
+$brand-primary: #99ba00;
+$primary:       $brand-primary;
+
+$text-muted: $primary;
+
+@import "cyborg_variables.scss";
+@import "cyborg_styles.scss";
+
+// Specials for cccamp19 design
+@import "card-glow";
+
+.navbar-brand {
+  .icon-icon_angel {
+    background-color: $brand-primary;
+  }
+
+  strong {
+    font-weight: normal;
+    color: $brand-primary;
+    text-shadow:
+      0 0 10px $brand-primary,
+      0 0 20px $brand-primary,
+      0 0 30px $brand-primary,
+      0 0 40px $brand-primary,
+      0 0 70px $brand-primary,
+      0 0 80px $brand-primary;
+  }
+}
+
+h1 {
+  font-weight: normal;
+  color: $brand-primary;
+  text-shadow: 0 0 10px $brand-primary;
+
+  .icon-icon_angel {
+    background-color: $brand-primary;
+  }
+}
+
+.input-group-addon {
+  color: #000;
+
+  .icon-icon_angel {
+    background-color: #000;
+  }
+}
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+    &.bg-warning {
+        color: #000;
+    }
+}
diff --git a/resources/assets/themes/theme11.less b/resources/assets/themes/theme11.less
deleted file mode 100644
index cd601924..00000000
--- a/resources/assets/themes/theme11.less
+++ /dev/null
@@ -1,104 +0,0 @@
-// high contrast
-@import "cyborg_variables.less";
-// Variables
-// --------------------------------------------------
-
-//== Colors
-
-@gray-dark:              #282828;   // #333
-@gray-light:             #888;   // #999
-@gray-lighter:           #ADAFAE; // #eee
-
-@brand-primary:         #72abfa;
-@brand-success:         #5cb85c;
-@brand-info:            #5bc0de;
-@brand-warning:         #f0ad4e;
-
-//== Scaffolding
-
-@body-bg:               #000;
-@text-color:            #fff;
-
-//== Buttons
-
-@btn-default-color:              #fff;
-@btn-default-bg:                 lighten(@gray-dark, 10%);
-
-@btn-primary-color:              #000;
-@btn-primary-border:             darken(@btn-default-bg, 10%);
-
-@btn-success-color:              #000;
-@btn-success-border:             darken(@btn-default-bg, 10%);
-
-@btn-info-color:                 #000;
-@btn-info-border:                darken(@btn-default-bg, 10%);
-
-@btn-warning-color:              #000;
-@btn-warning-border:             darken(@btn-default-bg, 10%);
-
-@btn-danger-color:               #000;
-@btn-danger-border:              darken(@btn-default-bg, 10%);
-
-
-
-//== Forms
-
-@input-bg:                       @gray-darker;
-@input-bg-disabled:              @gray-lighter;
-
-@input-group-addon-bg:           @gray-lighter;
-
-
-//== Pagination
-
-@pagination-hover-color:               #fff;
-
-
-//== Labels
-
-@label-default-bg:            lighten(@btn-default-bg, 20%);
-@label-color:                 #000;
-@label-link-hover-color:      #000;
-
-//== Badges
-
-@badge-link-hover-color:      #fff;
-
-//== Type
-
-@text-muted:                  @gray-lighter;
-@abbr-border-color:           @gray-lighter;
-@headings-small-color:        @gray-lighter;
-
-// Bootswatch
-// -----------------------------------------------------
-@import "cyborg_styles.less";
-// Typography =================================================================
-
-.text-danger,
-.text-danger:hover {
-  color: lighten(@brand-danger, 10%);
-}
-
-// Forms ======================================================================
-
-.legend {
-  margin-top: 20px;
-}
-
-.input-group-addon {
-  background-color: @btn-default-bg;
-}
-
-
-// Containers =================================================================
-
-.panel-info .panel-title {
-  color: #000;
-}
-
-// code tag
-code {
-  background-color: @btn-default-bg;
-  color: @input-color;
-}
diff --git a/resources/assets/themes/theme11.scss b/resources/assets/themes/theme11.scss
new file mode 100644
index 00000000..765159b9
--- /dev/null
+++ b/resources/assets/themes/theme11.scss
@@ -0,0 +1,114 @@
+// high contrast
+// Variables
+// --------------------------------------------------
+@import "dark";
+
+//== Colors
+
+$gray-dark:    #282828;
+$gray-darker:  #222;
+$gray-light:   #888;
+$gray-lighter: #ADAFAE;
+
+$brand-primary: #72abfa;
+$primary:       $brand-primary;
+$brand-success: #5cb85c;
+$success:       $brand-success;
+$brand-info:    #5bc0de;
+$info:          $brand-info;
+$brand-danger:  #d9534f;
+$danger:        $brand-danger;
+$brand-warning: #f0ad4e;
+$warning:       $brand-warning;
+
+//== Scaffolding
+
+$body-bg:               #000;
+$body-color:            #fff;
+
+//== Buttons
+
+$btn-color:                      #fff;
+$btn-default-bg:                 lighten($gray-dark, 10%);
+
+$btn-primary-color:              #000;
+$btn-primary-border:             darken($btn-default-bg, 10%);
+
+$btn-success-color:              #000;
+$btn-success-border:             darken($btn-default-bg, 10%);
+
+$btn-info-color:                 #000;
+$btn-info-border:                darken($btn-default-bg, 10%);
+
+$btn-warning-color:              #000;
+$btn-warning-border:             darken($btn-default-bg, 10%);
+
+$btn-danger-color:               #000;
+$btn-danger-border:              darken($btn-default-bg, 10%);
+
+
+//== Forms
+
+$input-bg:                       $gray-darker;
+$input-bg-disabled:              $gray-lighter;
+
+$input-group-addon-bg:           $gray-lighter;
+
+
+//== Pagination
+
+$pagination-hover-color:               #fff;
+
+
+//== Labels
+
+$label-default-bg:            lighten($btn-default-bg, 20%);
+$label-color:                 #000;
+$label-link-hover-color:      #000;
+
+
+//== Type
+
+$text-muted:                  $gray-lighter;
+$abbr-border-color:           $gray-lighter;
+$headings-small-color:        $gray-lighter;
+
+// Bootswatch
+// -----------------------------------------------------
+@import "cyborg_variables.scss";
+@import "cyborg_styles.scss";
+
+// Typography =================================================================
+
+.text-danger,
+.text-danger:hover {
+  color: lighten($brand-danger, 10%);
+}
+
+// Forms ======================================================================
+
+.legend {
+  margin-top: 20px;
+}
+
+.input-group-addon {
+  background-color: $btn-default-bg;
+}
+
+// code tag
+code {
+  background-color: $btn-default-bg;
+  color: #fff;
+}
+
+.navbar-dark .navbar-nav .nav-link {
+  color: #fff;
+}
+
+.badge {
+  color: #000 !important;
+
+  &.bg-dark {
+    color: #fff !important;
+  }
+}
diff --git a/resources/assets/themes/theme12.less b/resources/assets/themes/theme12.less
deleted file mode 100644
index a770a4b1..00000000
--- a/resources/assets/themes/theme12.less
+++ /dev/null
@@ -1,107 +0,0 @@
-// 36c3
-@import "cyborg_variables.less";
-
-//== Colors
-
-@gray-dark:              #282828;   // #333
-@gray-light:             #888;   // #999
-@gray-lighter:           #D0D0CE; // #eee
-@black:                  #000;
-
-@brand-primary:         #fe5000;
-@brand-success:         #00bb31;
-@brand-info:            #5bc0de;
-@brand-warning:         #febb00;
-@brand-danger:          #bb3100;
-
-//== Scaffolding
-
-@body-bg:               #000;
-@text-color:            @gray-lighter;
-
-//== Buttons
-
-@btn-default-color:              @gray-lighter;
-@btn-default-bg:                 lighten(@gray-dark, 10%);
-
-@btn-primary-color:              @black;
-@btn-primary-border:             darken(@btn-default-bg, 10%);
-
-@btn-success-color:              @black;
-@btn-success-border:             darken(@btn-default-bg, 10%);
-
-@btn-info-color:                 @black;
-@btn-info-border:                darken(@btn-default-bg, 10%);
-
-@btn-warning-color:              @black;
-@btn-warning-border:             darken(@btn-default-bg, 10%);
-
-@btn-danger-border:              darken(@btn-default-bg, 10%);
-
-
-//== Forms
-
-@input-bg:                       @gray-darker;
-@input-bg-disabled:              darken(@gray-dark, 10%);
-@input-group-addon-bg:           @gray-lighter;
-
-//== Pagination
-
-@pagination-color:                     @black;
-@pagination-hover-color:               @black;
-@pagination-active-color:              @black;
-
-//== Labels
-
-@label-color:                 #000;
-@label-link-hover-color:      @gray-dark;
-
-//== Panels
-
-@panel-primary-text:          #000;
-
-//== Badges
-
-@badge-color:                 @black;
-@badge-link-hover-color:      @black;
-
-//== Type
-
-@headings-small-color:        @gray-light;
-
-// Bootswatch
-// -----------------------------------------------------
-@import "cyborg_styles.less";
-// Forms ======================================================================
-
-.input-group-addon {
-  background-color: @btn-default-bg;
-}
-
-// Containers =================================================================
-
-// datetimepicker
-
-.bootstrap-datetimepicker-widget {
-
-  .timepicker-hour,
-  .timepicker-minute,
-  [data-action='selectHour'],
-  [data-action='selectMinute'],
-  [data-action='incrementHours'],
-  [data-action='decrementHours'],
-  [data-action='incrementMinutes'],
-  [data-action='decrementMinutes'] {
-
-    &:hover {
-
-      color: @gray;
-    }
-  }
-}
-
-// code tag
-code {
-  background-color: @btn-default-bg;
-  color: @input-color;
-}
diff --git a/resources/assets/themes/theme12.scss b/resources/assets/themes/theme12.scss
new file mode 100644
index 00000000..114bf802
--- /dev/null
+++ b/resources/assets/themes/theme12.scss
@@ -0,0 +1,109 @@
+// 36c3
+
+//== Colors
+@import "dark";
+
+$gray-dark:    #282828;
+$gray-darker:  #222;
+$gray-light:   #888;
+$gray-lighter: #D0D0CE;
+$black:        #000;
+
+$brand-primary: #fe5000;
+$primary:       $brand-primary;
+$brand-success: #00bb31;
+$success:       $brand-success;
+$brand-info:    #5bc0de;
+$info:          $brand-info;
+$brand-warning: #febb00;
+$warning:       $brand-warning;
+$brand-danger:  #bb3100;
+$danger:        $brand-danger;
+
+//== Scaffolding
+
+$body-bg:               #000;
+$text-color:            $gray-lighter;
+
+//== Buttons
+
+$btn-color:                      $gray-lighter;
+$btn-default-bg:                 lighten($gray-dark, 10%);
+
+$btn-primary-color:              $black;
+$btn-primary-border:             darken($btn-default-bg, 10%);
+
+$btn-success-color:              $black;
+$btn-success-border:             darken($btn-default-bg, 10%);
+
+$btn-info-color:                 $black;
+$btn-info-border:                darken($btn-default-bg, 10%);
+
+$btn-warning-color:              $black;
+$btn-warning-border:             darken($btn-default-bg, 10%);
+
+$btn-danger-border:              darken($btn-default-bg, 10%);
+
+
+//== Forms
+
+$input-bg:                       $gray-darker;
+$input-bg-disabled:              darken($gray-dark, 10%);
+$input-group-addon-bg:           $gray-lighter;
+
+//== Pagination
+
+$pagination-color:                     $black;
+$pagination-hover-color:               $black;
+$pagination-active-color:              $black;
+
+//== Labels
+
+$label-color:                 #000;
+$label-link-hover-color:      $gray-dark;
+
+//== Badges
+
+$badge-color:                 $black;
+
+//== Type
+
+$headings-small-color:        $gray-light;
+
+// Bootswatch
+// -----------------------------------------------------
+@import "cyborg_variables.scss";
+@import "cyborg_styles.scss";
+// Forms ======================================================================
+
+.input-group-addon {
+  background-color: $btn-default-bg;
+}
+
+// Containers =================================================================
+
+// datetimepicker
+
+.bootstrap-datetimepicker-widget {
+
+  .timepicker-hour,
+  .timepicker-minute,
+  [data-action='selectHour'],
+  [data-action='selectMinute'],
+  [data-action='incrementHours'],
+  [data-action='decrementHours'],
+  [data-action='incrementMinutes'],
+  [data-action='decrementMinutes'] {
+
+    &:hover {
+
+      color: $gray;
+    }
+  }
+}
+
+// code tag
+code {
+  background-color: $btn-default-bg;
+  color: $input-color;
+}
diff --git a/resources/assets/themes/theme13.less b/resources/assets/themes/theme13.less
deleted file mode 100644
index 22987f18..00000000
--- a/resources/assets/themes/theme13.less
+++ /dev/null
@@ -1,164 +0,0 @@
-// rc3
-@import "cyborg_variables.less";
-
-//== Colors
-
-@gray-darker:            #100e23;
-@gray-dark:              lighten(@gray-darker, 15%);
-@gray:                   lighten(@gray-dark, 15%);
-@gray-light:             lighten(@gray, 15%);
-@gray-lighter:           lighten(@gray-light, 15%);
-@black:                  #000;
-
-@brand-primary:         #6800e7;
-@brand-success:         #05b9ec;
-@brand-info:            #670295;
-@brand-warning:         #fff900;
-@brand-danger:          #b239ff;
-
-//== Scaffolding
-
-@body-bg:               #000;
-@text-color:            @gray-lighter;
-@link-color:            #fff;
-
-//== Typography
-
-@font-face {
-    font-family: 'Montserrat';
-    src: url('theme13/Montserrat-Regular.woff2') format('woff2'),
-        url('theme13/Montserrat-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Orbitron';
-    src: url('theme13/Orbitron-Regular.woff2') format('woff2'),
-        url('theme13/Orbitron-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif;
-@font-family-serif:       'Orbitron', Georgia, "Times New Roman", Times, serif;
-@headings-font-family:    @font-family-serif;
-
-//== Buttons
-
-@btn-default-color:              #fff;
-@btn-default-bg:                 lighten(@gray-dark, 10%);
-
-@btn-primary-color:              #fff;
-@btn-primary-border:             darken(@btn-default-bg, 10%);
-
-@btn-success-color:              #fff;
-@btn-success-border:             darken(@btn-default-bg, 10%);
-
-@btn-info-color:                 #fff;
-@btn-info-border:                darken(@btn-default-bg, 10%);
-
-@btn-warning-color:              #fff;
-@btn-warning-border:             darken(@btn-default-bg, 10%);
-
-@btn-danger-color:               #fff;
-@btn-danger-border:              darken(@btn-default-bg, 10%);
-
-//== Forms
-
-@input-bg:                       @gray-darker;
-@input-bg-disabled:              darken(@gray-dark, 10%);
-
-@input-group-addon-bg:           @gray-lighter;
-
-//== Pagination
-
-@pagination-color:                     @black;
-
-@pagination-hover-color:               @black;
-
-@pagination-active-color:              @black;
-
-//== Form states and alerts
-
-@state-success-text:             #fff;
-
-@state-info-text:                #fff;
-
-@state-warning-text:             #fff;
-
-@state-danger-text:              #fff;
-
-//== Labels
-
-@label-link-hover-color:      @gray-dark;
-
-//== Panels
-
-@panel-primary-text:          #000;
-
-@panel-success-text:          #fff;
-
-@panel-info-text:             #fff;
-
-@panel-warning-text:          #fff;
-
-@panel-danger-text:           #fff;
-
-//== Badges
-
-@badge-color:                 @black;
-@badge-link-hover-color:      @black;
-
-//== Type
-
-@headings-small-color:        @gray-light;
-
-// Bootswatch
-// -----------------------------------------------------
-@import "cyborg_styles.less";
-// Forms ======================================================================
-
-.input-group-addon {
-  background-color: @btn-default-bg;
-}
-
-// Containers =================================================================
-
-// datetimepicker
-
-.bootstrap-datetimepicker-widget {
-
-  .timepicker-hour,
-  .timepicker-minute,
-  [data-action='selectHour'],
-  [data-action='selectMinute'],
-  [data-action='incrementHours'],
-  [data-action='decrementHours'],
-  [data-action='incrementMinutes'],
-  [data-action='decrementMinutes'] {
-
-    &:hover {
-
-      color: @gray;
-    }
-  }
-}
-
-// code tag
-code {
-  background-color: @input-bg-disabled;
-  color: @input-color;
-}
-
-// Specials ===================================================================
-body {
-  background: #000 url('theme13/background.jpg') no-repeat top left;
-}
-
-.navbar.navbar-default {
-  background: rgba(0,0,0,0.8);
-  backdrop-filter: blur(6px);
-}
diff --git a/resources/assets/themes/theme13.scss b/resources/assets/themes/theme13.scss
new file mode 100644
index 00000000..ddc44551
--- /dev/null
+++ b/resources/assets/themes/theme13.scss
@@ -0,0 +1,164 @@
+// rc3 violet
+
+//== Colors
+@import "dark";
+
+$gray-darker:            #100e23;
+$gray-dark:              lighten($gray-darker, 15%);
+$gray:                   lighten($gray-dark, 15%);
+$gray-light:             lighten($gray, 15%);
+$gray-lighter:           lighten($gray-light, 15%);
+$black:                  #000;
+
+$brand-primary: #6800e7;
+$primary:       $brand-primary;
+$brand-success: #05b9ec;
+$secondary:     #3a327e;
+$success:       $brand-success;
+$brand-info:    #670295;
+$info:          $brand-info;
+$brand-warning: #fff900;
+$warning:       $brand-warning;
+$brand-danger:  #b239ff;
+$danger:        $brand-danger;
+
+//== Scaffolding
+
+$body-bg:               #000;
+$text-color:            $gray-lighter;
+$link-color:            #fff;
+
+//== Typography
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('theme13/Montserrat-Regular.woff2') format('woff2'),
+        url('theme13/Montserrat-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Orbitron';
+    src: url('theme13/Orbitron-Regular.woff2') format('woff2'),
+        url('theme13/Orbitron-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+$font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif;
+$font-family-serif:      'Orbitron', Georgia, "Times New Roman", Times, serif;
+$headings-font-family:   $font-family-serif;
+
+//== Buttons
+
+$btn-color:                      #fff;
+$btn-default-bg:                 lighten($gray-dark, 10%);
+
+$btn-primary-color:              #fff;
+$btn-primary-border:             darken($btn-default-bg, 10%);
+
+$btn-success-color:              #fff;
+$btn-success-border:             darken($btn-default-bg, 10%);
+
+$btn-info-color:                 #fff;
+$btn-info-border:                darken($btn-default-bg, 10%);
+
+$btn-warning-color:              #fff;
+$btn-warning-border:             darken($btn-default-bg, 10%);
+
+$btn-danger-color:               #fff;
+$btn-danger-border:              darken($btn-default-bg, 10%);
+
+//== Forms
+
+$input-bg:                       $gray-darker;
+$input-bg-disabled:              darken($gray-dark, 10%);
+
+$input-group-addon-bg:           $gray-lighter;
+
+//== Pagination
+
+$pagination-color:                     $black;
+
+$pagination-hover-color:               $black;
+
+$pagination-active-color:              $black;
+
+//== Form states and alerts
+
+$state-success-text:             #fff;
+
+$state-info-text:                #fff;
+
+$state-warning-text:             #fff;
+
+$state-danger-text:              #fff;
+
+//== Labels
+
+$label-link-hover-color:      $gray-dark;
+
+//== Badges
+
+$badge-color:                 $black;
+
+//== Type
+
+$headings-small-color:        $gray-light;
+
+// Bootswatch
+// -----------------------------------------------------
+@import "cyborg_variables.scss";
+@import "cyborg_styles.scss";
+// Forms ======================================================================
+
+.input-group-addon {
+  background-color: $btn-default-bg;
+}
+
+// Containers =================================================================
+
+// datetimepicker
+
+.bootstrap-datetimepicker-widget {
+
+  .timepicker-hour,
+  .timepicker-minute,
+  [data-action='selectHour'],
+  [data-action='selectMinute'],
+  [data-action='incrementHours'],
+  [data-action='decrementHours'],
+  [data-action='incrementMinutes'],
+  [data-action='decrementMinutes'] {
+
+    &:hover {
+
+      color: $gray;
+    }
+  }
+}
+
+// code tag
+code {
+  background-color: $input-bg-disabled;
+  color: $input-color;
+}
+
+// Specials ===================================================================
+body {
+  background: #000 url('theme13/background.jpg') no-repeat top left;
+}
+
+.navbar.navbar-default {
+  background: rgba(0,0,0,0.8);
+  backdrop-filter: blur(6px);
+}
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+    &.bg-warning {
+        color: #000;
+    }
+}
diff --git a/resources/assets/themes/theme14.less b/resources/assets/themes/theme14.less
deleted file mode 100644
index b68c0341..00000000
--- a/resources/assets/themes/theme14.less
+++ /dev/null
@@ -1,165 +0,0 @@
-// rc3 teal
-@import "cyborg_variables.less";
-
-//== Colors
-
-@gray-darker:            #0e1c23;
-@gray-dark:              lighten(@gray-darker, 15%);
-@gray:                   lighten(@gray-dark, 15%);
-@gray-light:             lighten(@gray, 15%);
-@gray-lighter:           lighten(@gray-light, 15%);
-@black:                  #000;
-
-@brand-primary:         #05b9ec;
-@brand-success:         #02fae0;
-@brand-info:            #025d83;
-@brand-warning:         #6800e7;
-@brand-danger:          #b239ff;
-
-
-//== Scaffolding
-
-@body-bg:               #000;
-@text-color:            @gray-lighter;
-@link-color:            #fff;
-
-//== Typography
-
-@font-face {
-    font-family: 'Montserrat';
-    src: url('theme13/Montserrat-Regular.woff2') format('woff2'),
-        url('theme13/Montserrat-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Orbitron';
-    src: url('theme13/Orbitron-Regular.woff2') format('woff2'),
-        url('theme13/Orbitron-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif;
-@font-family-serif:       'Orbitron', Georgia, "Times New Roman", Times, serif;
-@headings-font-family:    @font-family-serif;
-
-//== Buttons
-
-@btn-default-color:              #fff;
-@btn-default-bg:                 lighten(@gray-dark, 10%);
-
-@btn-primary-color:              #fff;
-@btn-primary-border:             darken(@btn-default-bg, 10%);
-
-@btn-success-color:              #fff;
-@btn-success-border:             darken(@btn-default-bg, 10%);
-
-@btn-info-color:                 #fff;
-@btn-info-border:                darken(@btn-default-bg, 10%);
-
-@btn-warning-color:              #fff;
-@btn-warning-border:             darken(@btn-default-bg, 10%);
-
-@btn-danger-color:               #fff;
-@btn-danger-border:              darken(@btn-default-bg, 10%);
-
-//== Forms
-
-@input-bg:                       @gray-darker;
-@input-bg-disabled:              darken(@gray-dark, 10%);
-
-@input-group-addon-bg:           @gray-lighter;
-
-//== Pagination
-
-@pagination-color:                     @black;
-
-@pagination-hover-color:               @black;
-
-@pagination-active-color:              @black;
-
-//== Form states and alerts
-
-@state-success-text:             #fff;
-
-@state-info-text:                #fff;
-
-@state-warning-text:             #fff;
-
-@state-danger-text:              #fff;
-
-//== Labels
-
-@label-link-hover-color:      @gray-dark;
-
-//== Panels
-
-@panel-primary-text:          #000;
-
-@panel-success-text:          #fff;
-
-@panel-info-text:             #fff;
-
-@panel-warning-text:          #fff;
-
-@panel-danger-text:           #fff;
-
-//== Badges
-
-@badge-color:                 @black;
-@badge-link-hover-color:      @black;
-
-//== Type
-
-@headings-small-color:        @gray-light;
-
-// Bootswatch
-// -----------------------------------------------------
-@import "cyborg_styles.less";
-// Forms ======================================================================
-
-.input-group-addon {
-  background-color: @btn-default-bg;
-}
-
-// Containers =================================================================
-
-// datetimepicker
-
-.bootstrap-datetimepicker-widget {
-
-  .timepicker-hour,
-  .timepicker-minute,
-  [data-action='selectHour'],
-  [data-action='selectMinute'],
-  [data-action='incrementHours'],
-  [data-action='decrementHours'],
-  [data-action='incrementMinutes'],
-  [data-action='decrementMinutes'] {
-
-    &:hover {
-
-      color: @gray;
-    }
-  }
-}
-
-// code tag
-code {
-  background-color: @input-bg-disabled;
-  color: @input-color;
-}
-
-// Specials ===================================================================
-body {
-  background: #000 url('theme13/background14.jpg') no-repeat top left;
-}
-
-.navbar.navbar-default {
-  background: rgba(0,0,0,0.8);
-  backdrop-filter: blur(6px);
-}
diff --git a/resources/assets/themes/theme14.scss b/resources/assets/themes/theme14.scss
new file mode 100644
index 00000000..265c3e38
--- /dev/null
+++ b/resources/assets/themes/theme14.scss
@@ -0,0 +1,158 @@
+// rc3 teal
+
+//== Colors
+@import "dark";
+
+$gray-darker:            #0e1c23;
+$gray-dark:              lighten($gray-darker, 15%);
+$gray:                   lighten($gray-dark, 15%);
+$gray-light:             lighten($gray, 15%);
+$gray-lighter:           lighten($gray-light, 15%);
+$black:                  #000;
+
+$brand-primary: #05b9ec;
+$primary:       $brand-primary;
+$secondary:     #32657e;
+$brand-success: #02fae0;
+$success:       $brand-success;
+$brand-info:    #025d83;
+$info:          $brand-info;
+$brand-warning: #6800e7;
+$warning:       $brand-warning;
+$brand-danger:  #b239ff;
+$danger:        $brand-danger;
+
+//== Scaffolding
+
+$body-bg:               #000;
+$text-color:            $gray-lighter;
+$link-color:            #fff;
+
+//== Typography
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('theme13/Montserrat-Regular.woff2') format('woff2'),
+        url('theme13/Montserrat-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Orbitron';
+    src: url('theme13/Orbitron-Regular.woff2') format('woff2'),
+        url('theme13/Orbitron-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+$font-family-sans-serif: 'Montserrat', Helvetica Neue, Helvetica, Arial, sans-serif;
+$font-family-serif:      'Orbitron', Georgia, "Times New Roman", Times, serif;
+$headings-font-family:   $font-family-serif;
+
+//== Buttons
+
+$btn-color:                      #fff;
+$btn-default-bg:                 lighten($gray-dark, 10%);
+
+$btn-primary-color:              #fff;
+$btn-primary-border:             darken($btn-default-bg, 10%);
+
+$btn-success-color:              #fff;
+$btn-success-border:             darken($btn-default-bg, 10%);
+
+$btn-info-color:                 #fff;
+$btn-info-border:                darken($btn-default-bg, 10%);
+
+$btn-warning-color:              #fff;
+$btn-warning-border:             darken($btn-default-bg, 10%);
+
+$btn-danger-color:               #fff;
+$btn-danger-border:              darken($btn-default-bg, 10%);
+
+//== Forms
+
+$input-bg:                       $gray-darker;
+$input-bg-disabled:              darken($gray-dark, 10%);
+
+$input-group-addon-bg:           $gray-lighter;
+
+//== Pagination
+
+$pagination-color:                     $black;
+
+$pagination-hover-color:               $black;
+
+$pagination-active-color:              $black;
+
+//== Form states and alerts
+
+$state-success-text:             #fff;
+
+$state-info-text:                #fff;
+
+$state-warning-text:             #fff;
+
+$state-danger-text:              #fff;
+
+//== Labels
+
+$label-link-hover-color:      $gray-dark;
+
+//== Badges
+
+$badge-color:                 $black;
+
+//== Type
+
+$headings-small-color:        $gray-light;
+
+// Bootswatch
+// -----------------------------------------------------
+@import "cyborg_variables.scss";
+@import "cyborg_styles.scss";
+// Forms ======================================================================
+
+.input-group-addon {
+  background-color: $btn-default-bg;
+}
+
+// Containers =================================================================
+
+// datetimepicker
+
+.bootstrap-datetimepicker-widget {
+
+  .timepicker-hour,
+  .timepicker-minute,
+  [data-action='selectHour'],
+  [data-action='selectMinute'],
+  [data-action='incrementHours'],
+  [data-action='decrementHours'],
+  [data-action='incrementMinutes'],
+  [data-action='decrementMinutes'] {
+
+    &:hover {
+
+      color: $gray;
+    }
+  }
+}
+
+// code tag
+code {
+  background-color: $input-bg-disabled;
+  color: $input-color;
+}
+
+// Specials ===================================================================
+body {
+  background: #000 url('theme13/background14.jpg') no-repeat top left;
+}
+
+.navbar.navbar-default {
+  background: rgba(0,0,0,0.8);
+  backdrop-filter: blur(6px);
+}
diff --git a/resources/assets/themes/theme15.less b/resources/assets/themes/theme15.less
deleted file mode 100644
index c03b8c10..00000000
--- a/resources/assets/themes/theme15.less
+++ /dev/null
@@ -1,1045 +0,0 @@
-// DiVOC R2R
-@import "../../../node_modules/bootstrap/less/variables";
-
-/*
-The MIT License (MIT)
-
-Copyright (c) 2013 Thomas Park
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-*/
-
-// Cyborg 3.2.0
-// Variables
-// --------------------------------------------------
-
-//== Colors
-//
-//## Gray and brand colors for use across Bootstrap.
-
-@gray-darker: #222; // #222
-@gray-dark: #282828; // #333
-@gray: #555; // #555
-@gray-light: #888; // #999
-@gray-lighter: #adafae; // #eee
-
-@brand-primary: #fe7900;
-@brand-success: #00c466;
-@brand-info: #00c466;
-@brand-warning: #d10069;
-@brand-danger: #d10069;
-
-@plum: #1f0229;
-@dark-green: #00292d;
-@blue: darken(#009951, 10%);
-
-.label.label-warning,
-.progress-bar.progress-bar-warning {
-  color:white;
-}
-
-//== Scaffolding
-//
-//## Settings for some of the most global styles.
-
-//** Background color for `<body>`.
-@body-bg: @dark-green;
-//** Global text color on `<body>`.
-@text-color: white;
-
-//** Global textual link color.
-@link-color: @brand-primary;
-//** Link hover color set via `darken()` function.
-@link-hover-color: @link-color;
-
-//== Typography
-//
-//## Font, line-height, and color for body text, headings, and more.
-
-@font-family-serif: Georgia, "Times New Roman", Times, serif;
-//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
-@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
-@font-family-base: Ubuntu, Roboto, sans-serif;
-
-@font-size-base: 14px;
-@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
-@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
-
-@font-size-h1: 34px;
-@font-size-h2: 24px;
-@font-size-h3: 20px;
-@font-size-h4: 20px;
-@font-size-h5: 20px;
-@font-size-h6: 16px;
-
-//** Unit-less `line-height` for use in components like buttons.
-@line-height-base: 1.428571429; // 20/14
-//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
-
-//** By default, this inherits from the `<body>`.
-@headings-font-family: @font-family-base;
-@headings-font-weight: 500;
-@headings-line-height: 1.1;
-@headings-color: @brand-info;
-
-//== Iconography
-//
-//## Specify custom location and filename of the included Glyphicons icon font.
-//## Useful for those including Bootstrap via Bower.
-
-//** File name for all font files.
-@icon-font-name: "glyphicons-halflings-regular";
-//** Element ID within SVG icon file.
-@icon-font-svg-id: "glyphicons_halflingsregular";
-
-//== Components
-//
-//## Define common padding and border radius sizes and more.
-//## Values based on 14px text and 1.428 line-height (~20px to start).
-
-@padding-base-vertical: 8px;
-@padding-base-horizontal: 12px;
-
-@padding-large-vertical: 14px;
-@padding-large-horizontal: 16px;
-
-@padding-small-vertical: 5px;
-@padding-small-horizontal: 10px;
-
-@padding-xs-vertical: 1px;
-@padding-xs-horizontal: 5px;
-
-@line-height-large: 1.33;
-@line-height-small: 1.5;
-
-@border-radius-base: 4px;
-@border-radius-large: 6px;
-@border-radius-small: 3px;
-
-//** Global color for active items (e.g., navs or dropdowns).
-@component-active-color: #fff;
-//** Global background color for active items (e.g., navs or dropdowns).
-@component-active-bg: @plum;
-
-//** Width of the `border` for generating carets that indicator dropdowns.
-@caret-width-base: 4px;
-//** Carets increase slightly in size for larger components.
-@caret-width-large: 5px;
-
-//== Tables
-//
-//## Customizes the `.table` component with basic values, each used across all table variations.
-
-//** Padding for `<th>`s and `<td>`s.
-@table-cell-padding: 8px;
-//** Padding for cells in `.table-condensed`.
-@table-condensed-cell-padding: 5px;
-
-//** Default background color used for all tables.
-@table-bg: darken(@gray-darker, 4%);
-//** Background color used for `.table-striped`.
-@table-bg-accent: darken(@table-bg, 6%);
-//** Background color used for `.table-hover`.
-@table-bg-hover: @gray-dark;
-@table-bg-active: @table-bg-hover;
-
-//** Border color for table and cell borders.
-@table-border-color: @gray-dark;
-
-//== Buttons
-//
-//## For each of Bootstrap's buttons, define text, background and border color.
-
-@btn-font-weight: normal;
-
-@btn-default-color: @dark-green;
-@btn-default-bg: @brand-primary;
-
-@btn-default-border: @brand-primary;
-
-@btn-primary-color: @btn-default-color;
-@btn-primary-bg: @btn-default-bg;
-@btn-primary-border: @btn-default-border;
-
-@btn-success-color: @dark-green;
-@btn-success-bg: @brand-success;
-@btn-success-border: darken(@btn-default-bg, 10%);
-
-@btn-info-color: @dark-green;
-@btn-info-bg: @brand-info;
-@btn-info-border: @brand-info;
-
-@btn-warning-color: @dark-green;
-@btn-warning-bg: @brand-warning;
-@btn-warning-border: darken(@btn-default-bg, 10%);
-
-@btn-danger-color: white;
-@btn-danger-bg: @brand-danger;
-@btn-danger-border: @brand-danger;
-
-@btn-link-disabled-color: @gray-light;
-
-//== Forms
-//
-//##
-
-//** `<input>` background color
-@input-bg: @gray-darker;
-//** `<input disabled>` background color
-@input-bg-disabled: @gray-darker;
-
-//** Text color for `<input>`s
-@input-color: @text-color;
-//** `<input>` border color
-@input-border: @gray-dark;
-//** `<input>` border radius
-@input-border-radius: @border-radius-base;
-//** Border color for inputs on focus
-@input-border-focus: @brand-primary;
-
-//** Placeholder text color
-@input-color-placeholder: @gray-light;
-
-//** Default `.form-control` height
-@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
-//** Large `.form-control` height
-@input-height-large: (
-  ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) +
-    2
-);
-//** Small `.form-control` height
-@input-height-small: (
-  floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) +
-    2
-);
-
-@legend-color: @text-color;
-@legend-border-color: @gray-dark;
-
-//** Background color for textual input addons
-@input-group-addon-bg: @gray-lighter;
-//** Border color for textual input addons
-@input-group-addon-border-color: @input-border;
-
-//== Dropdowns
-//
-//## Dropdown menu container and contents.
-
-//** Background for the dropdown menu.
-@dropdown-bg: @gray-darker;
-//** Dropdown menu `border-color`.
-@dropdown-border: rgba(255, 255, 255, 0.1);
-//** Dropdown menu `border-color` **for IE8**.
-@dropdown-fallback-border: #444;
-//** Divider color for between dropdown items.
-@dropdown-divider-bg: rgba(255, 255, 255, 0.1);
-
-//** Dropdown link text color.
-@dropdown-link-color: #fff;
-//** Hover color for dropdown links.
-@dropdown-link-hover-color: #fff;
-//** Hover background for dropdown links.
-@dropdown-link-hover-bg: @dropdown-link-active-bg;
-
-//** Active dropdown menu item text color.
-@dropdown-link-active-color: #fff;
-//** Active dropdown menu item background color.
-@dropdown-link-active-bg: @component-active-bg;
-
-//** Disabled dropdown menu item background color.
-@dropdown-link-disabled-color: @text-muted;
-
-//** Text color for headers within dropdown menus.
-@dropdown-header-color: @text-muted;
-
-//** Deprecated `@dropdown-caret-color` as of v3.1.0
-@dropdown-caret-color: #000;
-
-//-- Z-index master list
-//
-// Warning: Avoid customizing these values. They're used for a bird's eye view
-// of components dependent on the z-axis and are designed to all work together.
-//
-// Note: These variables are not generated into the Customizer.
-
-@zindex-navbar: 1000;
-@zindex-dropdown: 1000;
-@zindex-popover: 1060;
-@zindex-tooltip: 1070;
-@zindex-navbar-fixed: 1030;
-@zindex-modal-background: 1040;
-@zindex-modal: 1050;
-
-//== Media queries breakpoints
-//
-//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
-
-// Extra small screen / phone
-//** Deprecated `@screen-xs` as of v3.0.1
-@screen-xs: 480px;
-//** Deprecated `@screen-xs-min` as of v3.2.0
-@screen-xs-min: @screen-xs;
-//** Deprecated `@screen-phone` as of v3.0.1
-@screen-phone: @screen-xs-min;
-
-// Small screen / tablet
-//** Deprecated `@screen-sm` as of v3.0.1
-@screen-sm: 768px;
-@screen-sm-min: @screen-sm;
-//** Deprecated `@screen-tablet` as of v3.0.1
-@screen-tablet: @screen-sm-min;
-
-// Medium screen / desktop
-//** Deprecated `@screen-md` as of v3.0.1
-@screen-md: 992px;
-@screen-md-min: @screen-md;
-//** Deprecated `@screen-desktop` as of v3.0.1
-@screen-desktop: @screen-md-min;
-
-// Large screen / wide desktop
-//** Deprecated `@screen-lg` as of v3.0.1
-@screen-lg: 1200px;
-@screen-lg-min: @screen-lg;
-//** Deprecated `@screen-lg-desktop` as of v3.0.1
-@screen-lg-desktop: @screen-lg-min;
-
-// So media queries don't overlap when required, provide a maximum
-@screen-xs-max: (@screen-sm-min - 1);
-@screen-sm-max: (@screen-md-min - 1);
-@screen-md-max: (@screen-lg-min - 1);
-
-//== Grid system
-//
-//## Define your custom responsive grid.
-
-//** Number of columns in the grid.
-@grid-columns: 12;
-//** Padding between columns. Gets divided in half for the left and right.
-@grid-gutter-width: 30px;
-// Navbar collapse
-//** Point at which the navbar becomes uncollapsed.
-@grid-float-breakpoint: @screen-sm-min;
-//** Point at which the navbar begins collapsing.
-@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
-
-//== Container sizes
-//
-//## Define the maximum width of `.container` for different screen sizes.
-
-// Small screen / tablet
-@container-tablet: ((720px + @grid-gutter-width));
-//** For `@screen-sm-min` and up.
-@container-sm: @container-tablet;
-
-// Medium screen / desktop
-@container-desktop: ((940px + @grid-gutter-width));
-//** For `@screen-md-min` and up.
-@container-md: @container-desktop;
-
-// Large screen / wide desktop
-@container-large-desktop: ((1140px + @grid-gutter-width));
-//** For `@screen-lg-min` and up.
-@container-lg: @container-large-desktop;
-
-//== Navbar
-//
-//##
-
-// Basics of a navbar
-@navbar-height: 50px;
-@navbar-margin-bottom: @line-height-computed;
-@navbar-border-radius: @border-radius-base;
-@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
-@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
-@navbar-collapse-max-height: 340px;
-
-@navbar-default-color: @text-color;
-@navbar-default-bg: @plum;
-@navbar-default-border: @gray-dark;
-
-// Navbar links
-@navbar-default-link-color: @text-color;
-@navbar-default-link-hover-color: #fff;
-@navbar-default-link-hover-bg: transparent;
-@navbar-default-link-active-color: #fff;
-@navbar-default-link-active-bg: transparent;
-@navbar-default-link-disabled-color: @gray-light;
-@navbar-default-link-disabled-bg: transparent;
-
-// Navbar brand label
-@navbar-default-brand-color: #fff;
-@navbar-default-brand-hover-color: #fff;
-@navbar-default-brand-hover-bg: transparent;
-
-// Navbar toggle
-@navbar-default-toggle-hover-bg: @gray-dark;
-@navbar-default-toggle-icon-bar-bg: #ccc;
-@navbar-default-toggle-border-color: @gray-dark;
-
-// Inverted navbar
-// Reset inverted navbar basics
-@navbar-inverse-color: @gray-light;
-@navbar-inverse-bg: @gray-darker;
-@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
-
-// Inverted navbar links
-@navbar-inverse-link-color: @gray-light;
-@navbar-inverse-link-hover-color: #fff;
-@navbar-inverse-link-hover-bg: transparent;
-@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
-@navbar-inverse-link-active-bg: transparent;
-@navbar-inverse-link-disabled-color: #aaa;
-@navbar-inverse-link-disabled-bg: transparent;
-
-// Inverted navbar brand label
-@navbar-inverse-brand-color: #fff;
-@navbar-inverse-brand-hover-color: #fff;
-@navbar-inverse-brand-hover-bg: transparent;
-
-// Inverted navbar toggle
-@navbar-inverse-toggle-hover-bg: #333;
-@navbar-inverse-toggle-icon-bar-bg: #fff;
-@navbar-inverse-toggle-border-color: #333;
-
-//== Navs
-//
-//##
-
-//=== Shared nav styles
-@nav-link-padding: 10px 15px;
-@nav-link-hover-bg: @gray-darker;
-
-@nav-disabled-link-color: @gray-light;
-@nav-disabled-link-hover-color: @gray-light;
-
-@nav-open-link-hover-color: @gray-darker;
-
-//== Tabs
-@nav-tabs-border-color: @gray-dark;
-
-@nav-tabs-link-hover-border-color: transparent;
-
-@nav-tabs-active-link-hover-bg: @plum;
-@nav-tabs-active-link-hover-color: #fff;
-@nav-tabs-active-link-hover-border-color: @gray-dark;
-
-@nav-tabs-justified-link-border-color: #ddd;
-@nav-tabs-justified-active-link-border-color: @body-bg;
-
-//== Pills
-@nav-pills-border-radius: @border-radius-base;
-@nav-pills-active-link-hover-bg: @component-active-bg;
-@nav-pills-active-link-hover-color: @component-active-color;
-
-//== Pagination
-//
-//##
-
-@pagination-color: #fff;
-@pagination-bg: @gray-darker;
-@pagination-border: @gray-dark;
-
-@pagination-hover-color: #fff;
-@pagination-hover-bg: @component-active-bg;
-@pagination-hover-border: transparent;
-
-@pagination-active-color: #fff;
-@pagination-active-bg: @brand-primary;
-@pagination-active-border: transparent;
-
-@pagination-disabled-color: @gray-light;
-@pagination-disabled-bg: @gray-darker;
-@pagination-disabled-border: @gray-dark;
-
-//== Pager
-//
-//##
-
-@pager-bg: @pagination-bg;
-@pager-border: @pagination-border;
-@pager-border-radius: 15px;
-
-@pager-hover-bg: @pagination-hover-bg;
-
-@pager-active-bg: @pagination-active-bg;
-@pager-active-color: @pagination-active-color;
-
-@pager-disabled-color: @gray-light;
-
-//== Jumbotron
-//
-//##
-
-@jumbotron-padding: 30px;
-@jumbotron-color: inherit;
-@jumbotron-bg: darken(@gray-darker, 5%);
-@jumbotron-heading-color: inherit;
-@jumbotron-font-size: ceil((@font-size-base * 1.5));
-
-//== Form states and alerts
-//
-//## Define colors for form feedback states and, by default, alerts.
-
-@state-success-text: #fff;
-@state-success-bg: @brand-success;
-@state-success-border: darken(@state-success-bg, 5%);
-
-@state-info-text: #fff;
-@state-info-bg: @brand-info;
-@state-info-border: darken(@state-info-bg, 7%);
-
-@state-warning-text: #000;
-@state-warning-bg: @brand-warning;
-@state-warning-border: darken(@state-warning-bg, 3%);
-
-@state-danger-text: #fff;
-@state-danger-bg: @brand-danger;
-@state-danger-border: darken(@state-danger-bg, 3%);
-
-//== Tooltips
-//
-//##
-
-//** Tooltip max width
-@tooltip-max-width: 200px;
-//** Tooltip text color
-@tooltip-color: #fff;
-//** Tooltip background color
-@tooltip-bg: rgba(0, 0, 0, 0.9);
-@tooltip-opacity: 0.9;
-
-//** Tooltip arrow width
-@tooltip-arrow-width: 5px;
-//** Tooltip arrow color
-@tooltip-arrow-color: @tooltip-bg;
-
-//== Popovers
-//
-//##
-
-//** Popover body background color
-@popover-bg: lighten(@body-bg, 10%);
-//** Popover maximum width
-@popover-max-width: 276px;
-//** Popover border color
-@popover-border-color: rgba(0, 0, 0, 0.2);
-//** Popover fallback border color
-@popover-fallback-border-color: #999;
-
-//** Popover title background color
-@popover-title-bg: darken(@popover-bg, 3%);
-
-//** Popover arrow width
-@popover-arrow-width: 10px;
-//** Popover arrow color
-@popover-arrow-color: @popover-bg;
-
-//** Popover outer arrow width
-@popover-arrow-outer-width: (@popover-arrow-width + 1);
-//** Popover outer arrow color
-@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
-//** Popover outer arrow fallback color
-@popover-arrow-outer-fallback-color: darken(
-  @popover-fallback-border-color,
-  20%
-);
-
-//== Labels
-//
-//##
-
-//** Default label background color
-@label-default-bg: @plum;
-//** Primary label background color
-@label-primary-bg: @brand-primary;
-//** Success label background color
-@label-success-bg: @brand-success;
-//** Info label background color
-@label-info-bg: @brand-info;
-//** Warning label background color
-@label-warning-bg: @blue;
-//** Danger label background color
-@label-danger-bg: @brand-danger;
-
-//** Default label text color
-@label-color: #fff;
-//** Default text color of a linked label
-@label-link-hover-color: #fff;
-
-//== Modals
-//
-//##
-
-//** Padding applied to the modal body
-@modal-inner-padding: 20px;
-
-//** Padding applied to the modal title
-@modal-title-padding: 15px;
-//** Modal title line-height
-@modal-title-line-height: @line-height-base;
-
-//** Background color of modal content area
-@modal-content-bg: lighten(@body-bg, 10%);
-//** Modal content border color
-@modal-content-border-color: rgba(0, 0, 0, 0.2);
-//** Modal content border color **for IE8**
-@modal-content-fallback-border-color: #999;
-
-//** Modal backdrop background color
-@modal-backdrop-bg: #000;
-//** Modal backdrop opacity
-@modal-backdrop-opacity: 0.5;
-//** Modal header border color
-@modal-header-border-color: @gray-dark;
-//** Modal footer border color
-@modal-footer-border-color: @modal-header-border-color;
-
-@modal-lg: 900px;
-@modal-md: 600px;
-@modal-sm: 300px;
-
-//== Alerts
-//
-//## Define alert colors, border radius, and padding.
-
-@alert-padding: 15px;
-@alert-border-radius: @border-radius-base;
-@alert-link-font-weight: bold;
-
-@alert-success-bg: @state-success-bg;
-@alert-success-text: @dark-green;
-@alert-success-border: @state-success-border;
-
-@alert-info-bg: @state-info-bg;
-@alert-info-text: @dark-green;
-@alert-info-border: @state-info-border;
-
-@alert-warning-bg: @state-warning-bg;
-@alert-warning-text: @state-warning-text;
-@alert-warning-border: @state-warning-border;
-
-@alert-danger-bg: @state-danger-bg;
-@alert-danger-text: white;
-@alert-danger-border: @state-danger-border;
-
-//== Progress bars
-//
-//##
-
-//** Background color of the whole progress component
-@progress-bg: @gray-darker;
-//** Progress bar text color
-@progress-bar-color: #fff;
-
-//** Default progress bar color
-@progress-bar-bg: @brand-primary;
-//** Success progress bar color
-@progress-bar-success-bg: @brand-success;
-//** Warning progress bar color
-@progress-bar-warning-bg: @brand-warning;
-//** Danger progress bar color
-@progress-bar-danger-bg: @brand-danger;
-//** Info progress bar color
-@progress-bar-info-bg: @brand-info;
-
-//== List group
-//
-//##
-
-//** Background color on `.list-group-item`
-@list-group-bg: @plum;
-//** `.list-group-item` border color
-@list-group-border: @gray-dark;
-//** List group border radius
-@list-group-border-radius: @border-radius-base;
-
-//** Background color of single list items on hover
-@list-group-hover-bg: lighten(@list-group-bg, 15%);
-//** Text color of active list items
-@list-group-active-color: @component-active-color;
-//** Background color of active list items
-@list-group-active-bg: @component-active-bg;
-//** Border color of active list elements
-@list-group-active-border: @list-group-active-bg;
-//** Text color for content within active list items
-@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
-
-//** Text color of disabled list items
-@list-group-disabled-color: @gray-light;
-//** Background color of disabled list items
-@list-group-disabled-bg: @gray-lighter;
-//** Text color for content within disabled list items
-@list-group-disabled-text-color: @list-group-disabled-color;
-
-@list-group-link-color: @text-color;
-@list-group-link-hover-color: @list-group-link-color;
-@list-group-link-heading-color: #fff;
-
-//== Panels
-//
-//##
-
-@panel-bg: @plum;
-@panel-body-padding: 15px;
-@panel-heading-padding: 10px 15px;
-@panel-footer-padding: @panel-heading-padding;
-@panel-border-radius: @border-radius-base;
-
-//** Border color for elements within panels
-@panel-inner-border: lighten(@plum, 3%);
-
-@panel-default-text: @text-color;
-@panel-default-border: @panel-inner-border;
-@panel-default-heading-bg: lighten(@plum, 3%);
-
-@panel-footer-bg: @panel-default-heading-bg;
-
-@panel-primary-text: #fff;
-@panel-primary-border: @brand-primary;
-@panel-primary-heading-bg: @brand-primary;
-
-@panel-success-text: @state-success-text;
-@panel-success-border: @state-success-border;
-@panel-success-heading-bg: @state-success-bg;
-
-@panel-info-text: @state-info-text;
-@panel-info-border: @panel-inner-border;
-@panel-info-heading-bg: lighten(@plum, 3%);
-
-@panel-warning-text: white;
-@panel-warning-border: @blue;
-@panel-warning-heading-bg: @blue;
-
-@panel-danger-text: @state-danger-text;
-@panel-danger-border: @state-danger-border;
-@panel-danger-heading-bg: @state-danger-bg;
-
-//== Thumbnails
-//
-//##
-
-//** Padding around the thumbnail image
-@thumbnail-padding: 4px;
-//** Thumbnail background color
-@thumbnail-bg: @gray-dark;
-//** Thumbnail border color
-@thumbnail-border: @gray-dark;
-//** Thumbnail border radius
-@thumbnail-border-radius: @border-radius-base;
-
-//** Custom text color for thumbnail captions
-@thumbnail-caption-color: @text-color;
-//** Padding around the thumbnail caption
-@thumbnail-caption-padding: 9px;
-
-//== Wells
-//
-//##
-
-@well-bg: darken(@gray-darker, 5%);
-@well-border: darken(@well-bg, 7%);
-
-//== Badges
-//
-//##
-
-@badge-color: @dark-green;
-//** Linked badge text color on hover
-@badge-link-hover-color: @dark-green;
-@badge-bg: @brand-primary;
-
-//** Badge text color in active nav link
-@badge-active-color: @brand-primary;
-//** Badge background color in active nav link
-@badge-active-bg: #fff;
-
-@badge-font-weight: bold;
-@badge-line-height: 1;
-@badge-border-radius: 10px;
-
-//== Breadcrumbs
-//
-//##
-
-@breadcrumb-padding-vertical: 8px;
-@breadcrumb-padding-horizontal: 15px;
-//** Breadcrumb background color
-@breadcrumb-bg: @gray-darker;
-//** Breadcrumb text color
-@breadcrumb-color: #fff;
-//** Text color of current page in the breadcrumb
-@breadcrumb-active-color: @text-color;
-//** Textual separator for between breadcrumb elements
-@breadcrumb-separator: "/";
-
-//== Carousel
-//
-//##
-
-@carousel-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-
-@carousel-control-color: #fff;
-@carousel-control-width: 15%;
-@carousel-control-opacity: 0.5;
-@carousel-control-font-size: 20px;
-
-@carousel-indicator-active-bg: #fff;
-@carousel-indicator-border-color: #fff;
-
-@carousel-caption-color: #fff;
-
-//== Close
-//
-//##
-
-@close-font-weight: bold;
-@close-color: #000;
-@close-text-shadow: 0 1px 0 #fff;
-
-//== Code
-//
-//##
-
-@code-color: #c7254e;
-@code-bg: #f9f2f4;
-
-@kbd-color: #fff;
-@kbd-bg: #333;
-
-@pre-bg: #f5f5f5;
-@pre-color: @gray-dark;
-@pre-border-color: #ccc;
-@pre-scrollable-max-height: 340px;
-
-//== Type
-//
-//##
-
-//** Horizontal offset for forms and lists.
-@component-offset-horizontal: 180px;
-//** Text muted color
-@text-muted: @gray-light;
-//** Abbreviations and acronyms border color
-@abbr-border-color: @gray-light;
-//** Headings small color
-@headings-small-color: @gray-light;
-//** Blockquote small color
-@blockquote-small-color: @gray;
-//** Blockquote font size
-@blockquote-font-size: (@font-size-base * 1.25);
-//** Blockquote border color
-@blockquote-border-color: @gray-dark;
-//** Page header border color
-@page-header-border-color: @gray-dark;
-//** Width of horizontal description list titles
-@dl-horizontal-offset: @component-offset-horizontal;
-//** Horizontal line color.
-@hr-border: @gray-dark;
-
-@import "base";
-
-.messages .text-danger {
-  color: @brand-danger;
-}
-
-.messages .text-info {
-  color: #fff;
-}
-
-.messages .caret {
-  color: #fff;
-}
-
-// Cyborg 3.2.0
-// Bootswatch
-// -----------------------------------------------------
-
-// Navbar =====================================================================
-
-// Buttons ====================================================================
-
-// Typography =================================================================
-
-.text-primary,
-.text-primary:hover,
-a.text-primary,
-a.text-primary:hover {
-  color: @brand-primary;
-}
-
-.text-success,
-.text-success:hover,
-a.text-success,
-a.text-success:hover {
-  color: @brand-success;
-}
-
-.text-danger,
-.text-danger:hover,
-a.text-danger,
-a.text-danger:hover {
-  color: @brand-danger;
-}
-
-.text-warning,
-.text-warning:hover,
-a.text-warning,
-a.text-warning:hover {
-  color: @brand-warning;
-}
-
-.text-info,
-.text-info:hover,
-a.text-info,
-a.text-info:hover {
-  color: @brand-info;
-}
-
-// Tables =====================================================================
-
-table,
-.table {
-  color: #fff;
-
-  a:not(.btn) {
-    color: #fff;
-    text-decoration: underline;
-  }
-
-  .text-muted {
-    color: @text-muted;
-  }
-}
-
-.table-responsive > .table {
-  background-color: @table-bg;
-}
-
-// Forms ======================================================================
-
-.has-warning {
-  .help-block,
-  .control-label,
-  .form-control-feedback {
-    color: @brand-warning;
-  }
-
-  .form-control,
-  .form-control:focus,
-  .input-group-addon {
-    border-color: @brand-warning;
-  }
-}
-
-.has-error {
-  .help-block,
-  .control-label,
-  .form-control-feedback {
-    color: @brand-danger;
-  }
-
-  .form-control,
-  .form-control:focus,
-  .input-group-addon {
-    border-color: @brand-danger;
-  }
-}
-
-.has-success {
-  .help-block,
-  .control-label,
-  .form-control-feedback {
-    color: @brand-success;
-  }
-
-  .form-control,
-  .form-control:focus,
-  .input-group-addon {
-    border-color: @brand-success;
-  }
-}
-
-.input-group-addon {
-  background-color: @btn-default-bg;
-}
-
-// Navs =======================================================================
-
-.nav-tabs,
-.nav-pills,
-.breadcrumb,
-.pager {
-  a {
-    color: #fff;
-  }
-}
-
-// Indicators =================================================================
-
-.alert {
-  .alert-link,
-  a {
-    color: white;
-    text-decoration: underline;
-  }
-
-  .close {
-    text-decoration: none;
-  }
-}
-
-.close {
-  color: #fff;
-  text-decoration: none;
-  opacity: 0.4;
-
-  &:hover,
-  &:focus {
-    color: #fff;
-    opacity: 1;
-  }
-}
-
-// Progress bars ==============================================================
-
-// Containers =================================================================
-
-a.thumbnail:hover,
-a.thumbnail:focus,
-a.thumbnail.active {
-  border-color: @thumbnail-border;
-}
-
-.jumbotron {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: @brand-info;
-  }
-}
-
-// code tag
-code {
-  background-color: @input-bg;
-  color: @input-color;
-}
diff --git a/resources/assets/themes/theme2.less b/resources/assets/themes/theme2.less
deleted file mode 100644
index 26acc1bb..00000000
--- a/resources/assets/themes/theme2.less
+++ /dev/null
@@ -1,28 +0,0 @@
-// cccamp15
-@import "../../../node_modules/bootstrap/less/variables";
-
-@brand-primary:         #758499;
-@brand-success:         #7b9c41;
-@brand-info:            #9c7357;
-@brand-warning:         #e3a14d;
-@brand-danger:          #7f528b;
-
-@link-color:            #58585a;
-
-@state-success-text:             #638232;
-@state-success-bg:               lighten(@brand-success,50%);
-@state-success-border:           @brand-success;
-
-@state-info-text:                #826045;
-@state-info-bg:                  lighten(@brand-info,50%);
-@state-info-border:              @brand-info;
-
-@state-warning-text:             #bc8640;
-@state-warning-bg:               lighten(@brand-warning,50%);
-@state-warning-border:           @brand-warning;
-
-@state-danger-text:              #694374;
-@state-danger-bg:                lighten(@brand-danger,50%);
-@state-danger-border:            @brand-danger;
-
-@import "base.less";
diff --git a/resources/assets/themes/theme2.scss b/resources/assets/themes/theme2.scss
new file mode 100644
index 00000000..d09821a3
--- /dev/null
+++ b/resources/assets/themes/theme2.scss
@@ -0,0 +1,39 @@
+// cccamp15
+@import "light";
+
+$brand-primary: #758499;
+$primary:       #758499;
+$brand-success: #7b9c41;
+$success: #7b9c41;
+$brand-info:    #9c7357;
+$info:    #9c7357;
+$brand-warning: #e3a14d;
+$warning: #e3a14d;
+$brand-danger:  #7f528b;
+$danger:  #7f528b;
+
+$link-color:            #58585a;
+
+$state-success-text:             #638232;
+$state-success-bg:               lighten($brand-success,50%);
+$state-success-border:           $brand-success;
+
+$state-info-text:                #826045;
+$state-info-bg:                  lighten($brand-info,50%);
+$state-info-border:              $brand-info;
+
+$state-warning-text:             #bc8640;
+$state-warning-bg:               lighten($brand-warning,50%);
+$state-warning-border:           $brand-warning;
+
+$state-danger-text:              #694374;
+$state-danger-bg:                lighten($brand-danger,50%);
+$state-danger-border:            $brand-danger;
+
+@import "base.scss";
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+    &.bg-danger {
+        color: #fff;
+    }
+}
diff --git a/resources/assets/themes/theme3.less b/resources/assets/themes/theme3.less
deleted file mode 100644
index 0bb53e09..00000000
--- a/resources/assets/themes/theme3.less
+++ /dev/null
@@ -1,56 +0,0 @@
-// 32c3 (2015)
-@import "../../../node_modules/bootstrap/less/variables";
-
-@brand-primary:         #f19224;
-@brand-success:         #39AB50;
-@brand-info:            #6618F9;
-@brand-warning:         #DAD216;
-@brand-danger:          #DA1639;
-
-@state-success-text:             @brand-success;
-@state-success-bg:               lighten(@brand-success,40%);
-@state-success-border:           @brand-success;
-
-@state-info-text:                @brand-info;
-@state-info-bg:                  lighten(@brand-info,40%);
-@state-info-border:              @brand-info;
-
-@state-warning-text:             @brand-warning;
-@state-warning-bg:               lighten(@brand-warning,40%);
-@state-warning-border:           @brand-warning;
-
-@state-danger-text:              @brand-danger;
-@state-danger-bg:                lighten(@brand-danger,40%);
-@state-danger-border:            @brand-danger;
-
-@navbar-default-color:  #fff;
-@navbar-default-bg:     #000;
-@navbar-default-border: #000;
-
-@navbar-default-link-color:         #fff;
-@navbar-default-link-hover-color:   #ddd;
-@navbar-default-link-hover-bg:      #222;
-
-@navbar-default-link-active-color:  @brand-primary;
-@navbar-default-link-active-bg:     #000;
-@navbar-default-link-disabled-color:#777;
-@navbar-default-link-disabled-bg:   #000;
-
-@navbar-default-brand-color:        #fff;
-@navbar-default-brand-hover-color:  @brand-primary;
-@navbar-default-brand-hover-bg:     #000;
-
-.navbar {
-  .bg-info {
-    background-color: darken(@brand-info, 30%);
-  }
-  .bg-danger {
-    background-color: darken(@brand-danger, 30%);
-  }
-}
-
-#shifts td a {
-  color: #000;
-}
-
-@import "base.less";
diff --git a/resources/assets/themes/theme3.scss b/resources/assets/themes/theme3.scss
new file mode 100644
index 00000000..ab0471f7
--- /dev/null
+++ b/resources/assets/themes/theme3.scss
@@ -0,0 +1,75 @@
+// 32c3 (2015)
+@import "light";
+
+$brand-primary:         #f19224;
+$primary:         #f19224;
+$brand-success:         #39AB50;
+$success:         #39AB50;
+$brand-info:            #6618F9;
+$info:            #6618F9;
+$brand-warning:         #DAD216;
+$warning:         #DAD216;
+$brand-danger:          #DA1639;
+$danger:          #DA1639;
+
+$state-success-text:             $brand-success;
+$state-success-bg:               lighten($brand-success,40%);
+$state-success-border:           $brand-success;
+
+$state-info-text:                $brand-info;
+$state-info-bg:                  lighten($brand-info,40%);
+$state-info-border:              $brand-info;
+
+$state-warning-text:             $brand-warning;
+$state-warning-bg:               lighten($brand-warning,40%);
+$state-warning-border:           $brand-warning;
+
+$state-danger-text:              $brand-danger;
+$state-danger-bg:                lighten($brand-danger,40%);
+$state-danger-border:            $brand-danger;
+
+$navbar-default-color:  #fff;
+$navbar-default-bg:     #000;
+$navbar-default-border: #000;
+
+$navbar-default-link-color:         #fff;
+$navbar-default-link-hover-color:   #ddd;
+$navbar-default-link-hover-bg:      #222;
+
+$navbar-default-link-active-color:  $brand-primary;
+$navbar-default-link-active-bg:     #000;
+$navbar-default-link-disabled-color:#777;
+$navbar-default-link-disabled-bg:   #000;
+
+$navbar-default-brand-color:        #fff;
+$navbar-default-brand-hover-color:  $brand-primary;
+$navbar-default-brand-hover-bg:     #000;
+
+.navbar {
+  .bg-info {
+    background-color: darken($brand-info, 30%);
+  }
+  .bg-danger {
+    background-color: darken($brand-danger, 30%);
+  }
+}
+
+#shifts td a {
+  color: #000;
+}
+
+.card.bg-info .card-header a {
+  color: lighten($brand-info, 50%);
+
+  &:hover {
+    color: lighten($brand-info, 50%);
+  }
+}
+
+@import "base.scss";
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+    &.bg-info {
+        color: #fff;
+    }
+}
diff --git a/resources/assets/themes/theme4.less b/resources/assets/themes/theme4.less
deleted file mode 100644
index 36b20c4f..00000000
--- a/resources/assets/themes/theme4.less
+++ /dev/null
@@ -1,112 +0,0 @@
-// 33c3 (2016)
-@import "cyborg_variables.less";
-
-// Variables
-// --------------------------------------------------
-
-//== changed Colors
-
-@gray-dark:              #282828;   // #333
-@gray-light:             #888;   // #999
-@gray-lighter:           #ADAFAE; // #eee
-
-@brand-primary:         rgb(0, 156, 139);
-@brand-success:         rgb(141, 193, 35);
-@brand-info:            rgb(70, 71, 73);
-@brand-warning:         rgb(255, 244, 95);
-@brand-danger:          rgb(277, 38, 60);
-
-
-//== changed Scaffolding
-
-@body-bg:               #1d1d1b;
-
-
-//== changed Buttons
-
-@btn-default-color:              #fff;
-@btn-default-bg:                 lighten(@gray-dark, 10%);
-
-@btn-primary-border:             darken(@btn-default-bg, 10%);
-
-@btn-success-border:             darken(@btn-default-bg, 10%);
-
-@btn-info-border:                darken(@btn-default-bg, 10%);
-
-@btn-warning-border:             darken(@btn-default-bg, 10%);
-
-@btn-danger-border:              darken(@btn-default-bg, 10%);
-
-
-//== changed Forms
-
-@input-bg:                       @gray-darker;
-
-@input-bg-disabled:              @gray-lighter;
-
-@input-group-addon-bg:           @gray-lighter;
-
-
-//== Pagination
-
-@pagination-hover-color:               #fff;
-
-@pagination-active-color:              #fff;
-
-
-//== changed Form states and alerts
-
-@state-success-text:             #fff;
-@state-success-bg:               @brand-success;
-@state-success-border:           darken(@state-success-bg, 5%);
-
-@state-info-text:                #fff;
-@state-info-bg:                  @brand-info;
-@state-info-border:              darken(@state-info-bg, 7%);
-
-@state-warning-text:             darken(@brand-warning, 40%);
-@state-warning-bg:               @brand-warning;
-@state-warning-border:           darken(@state-warning-bg, 3%);
-
-@state-danger-text:              #fff;
-@state-danger-bg:                @brand-danger;
-@state-danger-border:            darken(@state-danger-bg, 3%);
-
-
-//== changed Badges
-
-@badge-color:                 #fff;
-
-@badge-link-hover-color:      #fff;
-
-
-//== changed Type
-
-@headings-small-color:        @gray-light;
-
-
-// Bootswatch
-// -----------------------------------------------------
-@import "cyborg_styles.less";
-
-// added Forms ======================================================================
-
-.input-group-addon {
-  background-color: @btn-default-bg;
-}
-
-
-// added Containers =================================================================
-
-.label-warning, .label-success, .progress-bar-warning, .progress-bar-success,
-.panel-warning .panel-heading, .panel-warning .panel-heading a,
-.panel-success .panel-heading, .panel-success .panel-heading a {
-  color: @gray-darker;
-}
-
-
-// different code tag
-code {
-  background-color: @state-info-bg;
-  color: @state-info-text;
-}
diff --git a/resources/assets/themes/theme4.scss b/resources/assets/themes/theme4.scss
new file mode 100644
index 00000000..ed1b9297
--- /dev/null
+++ b/resources/assets/themes/theme4.scss
@@ -0,0 +1,124 @@
+// 33c3 (2016)
+@import "dark";
+
+// Variables
+
+//== changed Colors
+
+$gray-dark:    #282828;
+$gray-darker:  #222;
+$gray-light:   #888;
+$gray-lighter: #ADAFAE;
+
+$brand-primary: rgb(0, 156, 139);
+$primary: rgb(0, 156, 139);
+$secondary: #424242;
+$brand-success: rgb(141, 193, 35);
+$success: rgb(141, 193, 35);
+$brand-info:    rgb(70, 71, 73);
+$info:    rgb(70, 71, 73);
+$brand-warning: rgb(255, 244, 95);
+$warning: rgb(255, 244, 95);
+$brand-danger:  rgb(277, 38, 60);
+$danger:  rgb(277, 38, 60);
+
+$text-muted: lighten($gray-light, 25%);
+
+//== changed Scaffolding
+
+$body-bg:  #1d1d1b;
+$alert-bg-scale: 0%;
+
+
+//== changed Buttons
+
+$btn-color:                      #fff;
+$btn-default-bg:                 lighten($gray-dark, 10%);
+
+$btn-primary-border:             darken($btn-default-bg, 10%);
+
+$btn-success-border:             darken($btn-default-bg, 10%);
+
+$btn-info-border:                darken($btn-default-bg, 10%);
+
+$btn-warning-border:             darken($btn-default-bg, 10%);
+
+$btn-danger-border:              darken($btn-default-bg, 10%);
+
+
+//== changed Forms
+
+$input-bg:                       $gray-darker;
+
+$input-bg-disabled:              $gray-lighter;
+
+$input-group-addon-bg:           $gray-lighter;
+
+
+//== Pagination
+
+$pagination-hover-color:               #fff;
+
+$pagination-active-color:              #fff;
+
+
+//== changed Form states and alerts
+
+$state-success-text:             #fff;
+$state-success-bg:               $brand-success;
+$state-success-border:           darken($state-success-bg, 5%);
+
+$state-info-text:                #fff;
+$state-info-bg:                  $brand-info;
+$state-info-border:              darken($state-info-bg, 7%);
+
+$state-warning-text:             darken($brand-warning, 40%);
+$state-warning-bg:               $brand-warning;
+$state-warning-border:           darken($state-warning-bg, 3%);
+
+$state-danger-text:              #fff;
+$state-danger-bg:                $brand-danger;
+$state-danger-border:            darken($state-danger-bg, 3%);
+
+
+//== changed Badges
+
+$badge-color:                 #fff;
+
+
+//== changed Type
+
+$headings-small-color:        $gray-light;
+
+
+// Bootswatch
+// -----------------------------------------------------
+@import "cyborg_variables.scss";
+@import "cyborg_styles.scss";
+
+// added Forms ======================================================================
+
+.input-group-addon {
+  background-color: $btn-default-bg;
+}
+
+.badge.bg-warning {
+  color: #000;
+}
+
+.card.bg-secondary .card-header,
+.card.bg-secondary .card-footer {
+  color: $gray-lighter;
+}
+
+// different code tag
+code {
+  background-color: $state-info-bg;
+  color: $state-info-text;
+}
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+    &.bg-warning {
+        color: #000;
+    }
+}
diff --git a/resources/assets/themes/theme5.less b/resources/assets/themes/theme5.less
deleted file mode 100644
index a5a4d739..00000000
--- a/resources/assets/themes/theme5.less
+++ /dev/null
@@ -1,32 +0,0 @@
-// 34c3 light (2017)
-@import "../../../node_modules/bootstrap/less/variables";
-
-@brand-primary:         rgb(164, 28, 49);
-@brand-success:         rgb(153, 204, 0);
-@brand-info:            rgb(0, 204, 255);
-@brand-warning:         rgb(255, 255, 51);
-@brand-danger:          rgb(255, 102, 0);
-
-@link-color:            @brand-primary;
-
-@state-success-text:             darken(@brand-success,40%);
-@state-success-bg:               lighten(@brand-success,40%);
-@state-success-border:           @brand-success;
-
-@state-info-text:                darken(@brand-info,40%);
-@state-info-bg:                  lighten(@brand-info,40%);
-@state-info-border:              @brand-info;
-
-@state-warning-text:             darken(@brand-warning,40%);
-@state-warning-bg:               @brand-warning;
-@state-warning-border:           darken(@brand-warning,40%);
-
-@state-danger-text:              darken(@brand-danger,40%);
-@state-danger-bg:                lighten(@brand-danger,40%);
-@state-danger-border:            @brand-danger;
-
-.label.label-warning {
-  color: #000;
-}
-
-@import "base.less";
diff --git a/resources/assets/themes/theme5.scss b/resources/assets/themes/theme5.scss
new file mode 100644
index 00000000..2b000f81
--- /dev/null
+++ b/resources/assets/themes/theme5.scss
@@ -0,0 +1,43 @@
+// 34c3 light (2017)
+@import "light";
+
+$brand-primary: rgb(164, 28, 49);
+$primary: rgb(164, 28, 49);
+$brand-success: rgb(153, 204, 0);
+$success: rgb(153, 204, 0);
+$brand-info:    rgb(0, 204, 255);
+$info:    rgb(0, 204, 255);
+$brand-warning: rgb(255, 255, 51);
+$warning: rgb(255, 255, 51);
+$brand-danger:  rgb(255, 102, 0);
+$danger:  rgb(255, 102, 0);
+
+$link-color:            $brand-primary;
+
+$state-success-text:             darken($brand-success,40%);
+$state-success-bg:               lighten($brand-success,40%);
+$state-success-border:           $brand-success;
+
+$state-info-text:                darken($brand-info,40%);
+$state-info-bg:                  lighten($brand-info,40%);
+$state-info-border:              $brand-info;
+
+$state-warning-text:             darken($brand-warning,40%);
+$state-warning-bg:               $brand-warning;
+$state-warning-border:           darken($brand-warning,40%);
+
+$state-danger-text:              darken($brand-danger,40%);
+$state-danger-bg:                lighten($brand-danger,40%);
+$state-danger-border:            $brand-danger;
+
+.badge.bg-warning {
+  color: #000;
+}
+
+@import "base.scss";
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+    &.bg-primary {
+        color: #fff;
+    }
+}
diff --git a/resources/assets/themes/theme6.less b/resources/assets/themes/theme6.less
deleted file mode 100644
index 28840926..00000000
--- a/resources/assets/themes/theme6.less
+++ /dev/null
@@ -1,152 +0,0 @@
-// 34c3 dark (2017)
-@import "cyborg_variables.less";
-// Variables
-// --------------------------------------------------
-
-//== changed Colors
-
-@gray-dark:              #282828;   // #333
-@gray-light:             #888;   // #999
-@gray-lighter:           #ADAFAE; // #eee
-
-@brand-primary:         rgb(164, 28, 49);
-@brand-success:         rgb(153, 204, 0);
-@brand-info:            rgb(0, 204, 255);
-@brand-warning:         rgb(255, 255, 51);
-@brand-danger:          rgb(255, 102, 0);
-
-.label.label-warning, .progress-bar.progress-bar-warning {
-  color: #000;
-}
-
-
-//== changed Buttons
-
-@btn-default-color:              #fff;
-@btn-default-bg:                 lighten(@gray-dark, 10%);
-
-@btn-primary-border:             darken(@btn-default-bg, 10%);
-
-@btn-success-border:             @btn-primary-border;
-
-@btn-info-border:                @btn-primary-border;
-
-@btn-warning-border:             @btn-primary-border;
-
-@btn-danger-border:              @btn-primary-border;
-
-@btn-link-disabled-color:        @gray-light;
-
-
-//== changed Forms
-
-@input-bg:                       @gray-darker;
-
-@input-bg-disabled:              @gray-lighter;
-
-@input-group-addon-bg:           @gray-lighter;
-
-
-//== changed Pagination
-
-@pagination-hover-color:               #fff;
-
-@pagination-active-color:              #fff;
-
-
-//== changed Form states and alerts
-
-@state-success-text:             #fff;
-@state-success-bg:               @brand-success;
-@state-success-border:           darken(@state-success-bg, 5%);
-
-@state-info-text:                #fff;
-@state-info-bg:                  @brand-info;
-@state-info-border:              darken(@state-info-bg, 7%);
-
-@state-warning-text:             #000;
-@state-warning-bg:               @brand-warning;
-@state-warning-border:           darken(@state-warning-bg, 3%);
-
-@state-danger-text:              #fff;
-@state-danger-bg:                @brand-danger;
-@state-danger-border:            darken(@state-danger-bg, 3%);
-
-
-//== changed List group
-
-@list-group-bg:                 darken(@gray-darker, 10%);
-
-
-//== changed Panels
-
-@panel-bg:                    darken(@gray-darker, 10%);
-
-@panel-default-heading-bg:    darken(@gray-darker, 5%);
-
-
-//== changed Badges
-
-@badge-color:                 #fff;
-
-@badge-link-hover-color:      #fff;
-
-
-//== changed Type
-
-@headings-small-color:        @gray-light;
-
-
-// Bootswatch
-// -----------------------------------------------------
-
-@import "cyborg_styles.less";
-
-// Typography =================================================================
-
-.text-primary,
-.text-primary:hover,
-a.text-primary,
-a.text-primary:hover {
-  color: @brand-primary;
-}
-
-.text-success,
-.text-success:hover,
-a.text-success,
-a.text-success:hover {
-  color: @brand-success;
-}
-
-.text-danger,
-.text-danger:hover,
-a.text-danger,
-a.text-danger:hover {
-  color: @brand-danger;
-}
-
-.text-warning,
-.text-warning:hover,
-a.text-warning,
-a.text-warning:hover {
-  color: @brand-warning;
-}
-
-.text-info,
-.text-info:hover,
-a.text-info,
-a.text-info:hover {
-  color: @brand-info;
-}
-
-// added Forms ======================================================================
-
-.input-group-addon {
-  background-color: @btn-default-bg;
-}
-
-// different code tag
-code {
-  background-color: @input-bg;
-  color: @input-color;
-}
diff --git a/resources/assets/themes/theme6.scss b/resources/assets/themes/theme6.scss
new file mode 100644
index 00000000..db4b7914
--- /dev/null
+++ b/resources/assets/themes/theme6.scss
@@ -0,0 +1,159 @@
+// 34c3 dark (2017)
+// Variables
+// --------------------------------------------------
+@import "dark";
+
+//== changed Colors
+
+$gray-dark:    #282828;
+$gray-light:   #888;
+$gray-darker:  #222;
+$gray-lighter: #ADAFAE;
+
+$brand-primary: rgb(164, 28, 49);
+$primary:       rgb(164, 28, 49);
+$brand-success: rgb(153, 204, 0);
+$success:       rgb(153, 204, 0);
+$brand-info:    rgb(0, 204, 255);
+$info:          rgb(0, 204, 255);
+$brand-warning: rgb(255, 255, 51);
+$warning:       rgb(255, 255, 51);
+$brand-danger:  rgb(255, 102, 0);
+$danger:        rgb(255, 102, 0);
+
+$secondary: #424242;
+
+$alert-bg-scale: 0%;
+
+.badge.bg-warning, .progress-bar.progress-bar-warning {
+  color: #000;
+}
+
+
+//== changed Buttons
+
+$btn-color:                      #fff;
+$btn-default-bg:                 lighten($gray-dark, 10%);
+
+$btn-primary-border:             darken($btn-default-bg, 10%);
+
+$btn-success-border:             $btn-primary-border;
+
+$btn-info-border:                $btn-primary-border;
+
+$btn-warning-border:             $btn-primary-border;
+
+$btn-danger-border:              $btn-primary-border;
+
+$btn-link-disabled-color:        $gray-light;
+
+
+//== changed Forms
+
+$input-bg:                       $gray-darker;
+
+$input-bg-disabled:              $gray-lighter;
+
+$input-group-addon-bg:           $gray-lighter;
+
+
+//== changed Pagination
+
+$pagination-hover-color:               #fff;
+
+$pagination-active-color:              #fff;
+
+
+//== changed Form states and alerts
+
+$state-success-text:             #fff;
+$state-success-bg:               $brand-success;
+$state-success-border:           darken($state-success-bg, 5%);
+
+$state-info-text:                #fff;
+$state-info-bg:                  $brand-info;
+$state-info-border:              darken($state-info-bg, 7%);
+
+$state-warning-text:             #000;
+$state-warning-bg:               $brand-warning;
+$state-warning-border:           darken($state-warning-bg, 3%);
+
+$state-danger-text:              #fff;
+$state-danger-bg:                $brand-danger;
+$state-danger-border:            darken($state-danger-bg, 3%);
+
+
+//== changed List group
+
+$list-group-bg:                 darken($gray-darker, 10%);
+
+//== changed Badges
+
+$badge-color:                 #fff;
+
+
+//== changed Type
+
+$headings-small-color:        $gray-light;
+
+
+// Bootswatch
+// -----------------------------------------------------
+
+@import "cyborg_variables.scss";
+@import "cyborg_styles.scss";
+
+// Typography =================================================================
+
+.text-primary,
+.text-primary:hover,
+a.text-primary,
+a.text-primary:hover {
+  color: $brand-primary;
+}
+
+.text-success,
+.text-success:hover,
+a.text-success,
+a.text-success:hover {
+  color: $brand-success;
+}
+
+.text-danger,
+.text-danger:hover,
+a.text-danger,
+a.text-danger:hover {
+  color: $brand-danger;
+}
+
+.text-warning,
+.text-warning:hover,
+a.text-warning,
+a.text-warning:hover {
+  color: $brand-warning;
+}
+
+.text-info,
+.text-info:hover,
+a.text-info,
+a.text-info:hover {
+  color: $brand-info;
+}
+
+// added Forms ======================================================================
+
+.input-group-addon {
+  background-color: $btn-default-bg;
+}
+
+// different code tag
+code {
+  background-color: $input-bg;
+  color: $input-color;
+}
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+    &.bg-warning {
+        color: #000;
+    }
+}
diff --git a/resources/assets/themes/theme7.less b/resources/assets/themes/theme7.less
deleted file mode 100644
index a5d1529f..00000000
--- a/resources/assets/themes/theme7.less
+++ /dev/null
@@ -1,280 +0,0 @@
-// 35c3 dark (2018)
-@import "cyborg_variables.less";
-
-// Variables
-// --------------------------------------------------
-
-//== changed Colors
-
-// gray BEBOOT: #4d4d4c
-// blue FRESH: #0084b0
-// green HOPE: #00a356
-// dark blue BASE: #18386b
-// orange GLINT: #f9b000
-// rot BEAT: #e40429
-// violet TENACY: #44357e
-
-@gray-darker:            #000;
-@gray-dark:              #000;
-@gray:                   #4d4d4c; // BEBOOT
-@gray-light:             @gray;
-@gray-lighter:           lighten(@gray, 15%);
-
-@brand-primary:         #0084b0; // FRESH
-@brand-success:         #00a356; // HOPE
-@brand-info:            @brand-primary;
-@brand-warning:         #f9b000; // GLINT
-@brand-danger:          #e40429; // BEAT
-
-
-//== changed Scaffolding
-
-@body-bg:               #000;
-
-@text-color:            @gray-lighter;
-
-@link-hover-color:      lighten(@link-color, 10%);
-
-
-//== changed Typography
-
-@headings-color:          @brand-primary;
-
-
-//== changed Tables
-
-@table-bg:                      @gray-darker;
-
-@table-bg-accent:               #111;
-
-@table-border-color:            @gray;
-
-
-//== changed Buttons
-
-@btn-default-color:              @link-color;
-@btn-default-bg:                 @gray-darker;
-
-@btn-default-border:             @brand-primary;
-
-@btn-primary-color:              @gray-darker;
-@btn-primary-border:             @brand-primary;
-
-@btn-success-border:             darken(@btn-default-bg, 10%);
-
-@btn-info-color:                 @gray-darker;
-@btn-info-border:                darken(@btn-default-bg, 10%);
-
-@btn-warning-color:              @gray-darker;
-@btn-warning-border:             darken(@btn-default-bg, 10%);
-
-@btn-danger-color:               @gray-darker;
-@btn-danger-border:              darken(@btn-default-bg, 10%);
-
-
-//== changed Forms
-
-@input-bg:                       @gray-darker;
-
-@input-color:                    @link-color;
-
-@input-border:                   @brand-primary;
-
-@input-group-addon-bg:           @gray-lighter;
-
-
-//== changed Dropdowns
-
-@dropdown-border:                @brand-primary;
-
-@dropdown-fallback-border:       @brand-primary;
-
-@dropdown-divider-bg:            @dropdown-border;
-
-@dropdown-link-color:            @link-color;
-
-@dropdown-link-hover-color:      @link-hover-color;
-
-@dropdown-link-hover-bg:         @dropdown-bg;
-
-
-//== changed Navbar
-
-@navbar-default-border:            @brand-primary;
-
-@navbar-default-link-hover-color:          @link-hover-color;
-
-@navbar-default-link-active-color:         @brand-primary;
-
-@navbar-default-brand-color:               @brand-primary;
-@navbar-default-brand-hover-color:         lighten(@brand-primary, 10%);
-
-
-//== changed Pagination
-
-@pagination-color:                     @brand-primary;
-@pagination-border:                    @brand-primary;
-
-@pagination-hover-color:               @gray-darker;
-@pagination-hover-border:              @pagination-border;
-
-@pagination-active-color:              @pagination-hover-color;
-@pagination-active-bg:                 @pagination-hover-bg;
-@pagination-active-border:             @pagination-hover-border;
-
-
-//== changed Form states and alerts
-
-@state-success-text:             @gray-darker;
-@state-success-bg:               @brand-success;
-@state-success-border:           darken(@state-success-bg, 5%);
-
-@state-info-text:                @gray-darker;
-@state-info-bg:                  @brand-info;
-@state-info-border:              darken(@state-info-bg, 7%);
-
-@state-warning-text:             @gray-darker;
-@state-warning-bg:               @brand-warning;
-@state-warning-border:           darken(@state-warning-bg, 3%);
-
-@state-danger-text:              @gray-darker;
-@state-danger-bg:                @brand-danger;
-@state-danger-border:            darken(@state-danger-bg, 3%);
-
-
-//== changed Labels
-
-@label-color:                 @gray-darker;
-
-@label-link-hover-color:      @brand-primary;
-
-//== changed Panels
-
-@panel-default-border:        @brand-primary;
-@panel-default-heading-bg:    @gray-darker;
-
-@panel-primary-text:          @gray-darker;
-
-
-//== changed Badges
-
-@badge-color:                 #fff;
-
-@badge-link-hover-color:      #fff;
-
-
-//== changed Type
-
-@headings-small-color:        @gray-light;
-
-@import "cyborg_styles.less";
-
-.messages .text-danger {
-  color: @gray-darker;
-}
-
-.messages .text-info {
-  color: @gray-darker;
-}
-
-.messages .caret {
-  color: @gray-darker;
-}
-
-
-// Bootswatch
-// -----------------------------------------------------
-// changed Typography =================================================================
-
-.text-primary,
-.text-primary:hover,
-a.text-primary:hover {
-  color: @brand-primary;
-}
-
-.text-success,
-.text-success:hover,
-a.text-success:hover {
-  color: @brand-success;
-}
-
-.text-danger,
-.text-danger:hover,
-a.text-danger:hover {
-  color: @brand-danger;
-}
-
-.text-warning,
-.text-warning:hover,
-a.text-warning:hover {
-  color: @brand-warning;
-}
-
-.text-info,
-.text-info:hover,
-a.text-info:hover {
-  color: @brand-info;
-}
-
-// changed Tables =====================================================================
-
-table,
-.table {
-  color: @text-color;
-
-  a:not(.btn) {
-    color: @brand-primary;
-    text-decoration: underline;
-  }
-
-  .text-muted {
-    color: @text-muted;
-  }
-}
-
-// changed Forms ======================================================================
-
-.input-group-addon {
-  background-color: @btn-default-bg;
-}
-
-// changed Indicators =================================================================
-
-.alert {
-
-  .h1, .h2, .h3, .h4, .h5, .h6,
-  h1, h2, h3, h4, h5, h6 {
-    color: #fff;
-  }
-
-  .alert-link,
-  a {
-    color: @alert-warning-text;
-    text-decoration: underline;
-  }
-
-  .close {
-    text-decoration: none;
-  }
-}
-
-// changed Containers =================================================================
-
-.btn-primary, .panel-info .panel-heading {
-  background-image: linear-gradient(to right, rgb(0, 132, 176) , rgb(0, 163, 86));
-}
-
-.label-warning {
-  color: #000;
-}
-
-// changed code tag
-code {
-  background-color: @state-info-bg;
-  color: @state-info-text;
-}
-h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-  code {
-    color: @headings-color;
-  }
-}
diff --git a/resources/assets/themes/theme7.scss b/resources/assets/themes/theme7.scss
new file mode 100644
index 00000000..cac5c8d9
--- /dev/null
+++ b/resources/assets/themes/theme7.scss
@@ -0,0 +1,283 @@
+// 35c3 dark (2018)
+
+// Variables
+// --------------------------------------------------
+@import "dark";
+
+$gray-darker:  #000;
+$gray-dark:    #000;
+$gray:         #4d4d4c; // BEBOOT
+$gray-light:   $gray;
+$gray-lighter: lighten($gray, 15%);
+
+$brand-primary: #0084b0; // FRESH
+$primary:       #0084b0;
+$brand-success: #00a356; // HOPE
+$success:       #00a356; // HOPE
+$brand-info:    $brand-primary;
+$info:          $brand-primary;
+$brand-warning: #f9b000; // GLINT
+$warning:       #f9b000; // GLINT
+$brand-danger:  #e40429; // BEAT
+$danger:        #e40429; // BEAT
+
+
+//== changed Scaffolding
+
+$text-color: $gray-lighter;
+
+$body-bg:    #000;
+$body-color: $text-color;
+
+$link-color:       $brand-primary;
+$link-hover-color: lighten($link-color, 10%);
+
+
+//== changed Typography
+
+$headings-color: $brand-primary;
+
+
+//== changed Tables
+
+$table-bg:           $gray-darker;
+$table-bg-accent:    #111;
+$table-border-color: $gray;
+
+
+// component
+
+$component-active-color: #fff;
+$component-active-bg:    $primary;
+
+
+//== changed Buttons
+
+$btn-color:      $link-color;
+$btn-default-bg: $gray-darker;
+
+$btn-default-border: $brand-primary;
+
+$btn-primary-color:  $gray-darker;
+$btn-primary-border: $brand-primary;
+
+$btn-success-border: darken($btn-default-bg, 10%);
+
+$btn-info-color:  $gray-darker;
+$btn-info-border: darken($btn-default-bg, 10%);
+
+$btn-warning-color:  $gray-darker;
+$btn-warning-border: darken($btn-default-bg, 9%);
+
+$btn-danger-color:  $gray-darker;
+$btn-danger-border: darken($btn-default-bg, 10%);
+
+
+//== changed Forms
+
+$input-bg:             $gray-darker;
+$input-color:          $link-color;
+$input-border-color:   $brand-primary;
+$input-group-addon-bg: $gray-lighter;
+
+
+//== changed Dropdowns
+
+$dropdown-border:                $brand-primary;
+$dropdown-fallback-border:       $brand-primary;
+$dropdown-divider-bg:            $dropdown-border;
+$dropdown-link-color:            $link-color;
+$dropdown-link-hover-color:      $link-hover-color;
+$dropdown-bg:                    $gray-darker;
+$dropdown-link-hover-bg:         $dropdown-bg;
+
+
+//== changed Navbar
+
+$navbar-default-border:             $brand-primary;
+$navbar-default-link-hover-color:   $link-hover-color;
+$navbar-default-link-active-color:  $brand-primary;
+$navbar-default-brand-color:        $brand-primary;
+$navbar-default-brand-hover-color:  lighten($brand-primary, 10%);
+
+
+//== changed Pagination
+
+$pagination-color:         $brand-primary;
+$pagination-border:        $brand-primary;
+
+$pagination-hover-color:   $gray-darker;
+$pagination-hover-bg:      $component-active-bg;
+$pagination-hover-border:  $pagination-border;
+
+$pagination-active-color:  $pagination-hover-color;
+$pagination-active-bg:     $pagination-hover-bg;
+$pagination-active-border: $pagination-hover-border;
+
+
+//== changed Form states and alerts
+
+$state-success-text:   $gray-darker;
+$state-success-bg:     $brand-success;
+$state-success-border: darken($state-success-bg, 5%);
+
+$state-info-text:      $gray-darker;
+$state-info-bg:        $brand-info;
+$state-info-border:    darken($state-info-bg, 7%);
+
+$state-warning-text:   $gray-darker;
+$state-warning-bg:     $brand-warning;
+$state-warning-border: darken($state-warning-bg, 3%);
+
+$state-danger-text:    $gray-darker;
+$state-danger-bg:      $brand-danger;
+$state-danger-border:  darken($state-danger-bg, 3%);
+
+
+//== changed Labels
+
+$label-color:            $gray-darker;
+$label-link-hover-color: $brand-primary;
+
+
+//== changed Type
+
+$headings-small-color:        $gray-light;
+
+$alert-bg-scale: 0%;
+$alert-border-scale: 0;
+$alert-color-scale: 0;
+
+@import "cyborg_variables.scss";
+@import "cyborg_styles.scss";
+
+.messages .text-danger {
+  color: $gray-darker;
+}
+
+.messages .text-info {
+  color: $gray-darker;
+}
+
+.messages .caret {
+  color: $gray-darker;
+}
+
+
+// Bootswatch
+// -----------------------------------------------------
+// changed Typography =================================================================
+
+.text-primary,
+.text-primary:hover,
+a.text-primary:hover {
+  color: $brand-primary;
+}
+
+.text-success,
+.text-success:hover,
+a.text-success:hover {
+  color: $brand-success;
+}
+
+.text-danger,
+.text-danger:hover,
+a.text-danger:hover {
+  color: $brand-danger;
+}
+
+.text-warning,
+.text-warning:hover,
+a.text-warning:hover {
+  color: $brand-warning;
+}
+
+.text-info,
+.text-info:hover,
+a.text-info:hover {
+  color: $brand-info;
+}
+
+// changed Tables =====================================================================
+
+table,
+.table {
+  color: $text-color;
+
+  a:not(.btn) {
+    color: $brand-primary;
+    text-decoration: underline;
+  }
+
+  .text-muted {
+    color: $text-muted;
+  }
+}
+
+// changed Forms ======================================================================
+
+.input-group-addon {
+  background-color: $btn-default-bg;
+}
+
+// changed Indicators =================================================================
+
+.alert {
+
+  .h1, .h2, .h3, .h4, .h5, .h6,
+  h1, h2, h3, h4, h5, h6 {
+    color: #fff;
+  }
+
+  .alert-link,
+  a {
+    color: $alert-warning-text;
+    text-decoration: underline;
+  }
+
+  .close {
+    text-decoration: none;
+  }
+}
+
+// changed Containers =================================================================
+
+.btn-primary, .card-info .card-heading {
+  background-image: linear-gradient(to right, rgb(0, 132, 176) , rgb(0, 163, 86));
+}
+
+.btn-secondary {
+  color: $primary;
+  background-color: #000;
+  border-color: $primary;
+
+  &:hover {
+    color: $primary;
+    background-color: #000;
+    border-color: darken($primary, 10%);
+  }
+}
+
+.bg-warning {
+  color: #000;
+}
+
+// changed code tag
+code {
+  background-color: $state-info-bg;
+  color: $state-info-text;
+}
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+  code {
+    color: $headings-color;
+  }
+
+  &.bg-primary,
+  &.bg-secondary,
+  &.bg-success,
+  &.bg-danger,
+  &.bg-info {
+      color: #fff;
+  }
+}
diff --git a/resources/assets/themes/theme8.less b/resources/assets/themes/theme8.less
deleted file mode 100644
index b07e1f36..00000000
--- a/resources/assets/themes/theme8.less
+++ /dev/null
@@ -1,57 +0,0 @@
-// cccamp19 blue (2019)
-@import "cyborg_variables.less";
-
-// Variables
-// --------------------------------------------------
-
-//== changed Colors
-
-@gray-dark:              #282828;   // #333
-@gray-light:             #888;   // #999
-@gray-lighter:           #ADAFAE; // #eee
-
-@brand-primary:         #0076ba;
-
-@import "cyborg_styles.less";
-
-// Specials for cccamp19 design
-
-.navbar-brand {
-  .icon-icon_angel {
-    background-color: @brand-primary;
-  }
-
-  strong {
-    font-weight: lighter;
-    color: @brand-primary;
-    text-shadow:
-      0 0 10px @brand-primary,
-      0 0 20px @brand-primary,
-      0 0 30px @brand-primary,
-      0 0 40px @brand-primary,
-      0 0 70px @brand-primary,
-      0 0 80px @brand-primary;
-  }
-}
-
-h1 {
-  font-weight: lighter;
-  color: @brand-primary;
-  text-shadow: 0 0 10px @brand-primary;
-
-  .icon-icon_angel {
-    background-color: @brand-primary;
-  }
-}
-
-.panel-title {
-  color: #fff;
-}
-
-.input-group-addon {
-  color: #000;
-
-  .icon-icon_angel {
-    background-color: #000;
-  }
-}
diff --git a/resources/assets/themes/theme8.scss b/resources/assets/themes/theme8.scss
new file mode 100644
index 00000000..bf7055eb
--- /dev/null
+++ b/resources/assets/themes/theme8.scss
@@ -0,0 +1,63 @@
+// cccamp19 blue (2019)
+
+// Variables
+@import "dark";
+
+//== changed Colors
+
+$gray-dark:    #282828;
+$gray-light:   #888;
+$gray-lighter: #ADAFAE;
+
+$brand-primary: #0076ba;
+$primary:       #0076ba;
+
+$text-muted: $primary;
+
+@import "cyborg_variables.scss";
+@import "cyborg_styles.scss";
+
+// Specials for cccamp19 design
+@import "card-glow";
+
+.navbar-brand {
+  .icon-icon_angel {
+    background-color: $brand-primary;
+  }
+
+  strong {
+    font-weight: normal;
+    color: $brand-primary;
+    text-shadow:
+      0 0 10px $brand-primary,
+      0 0 20px $brand-primary,
+      0 0 30px $brand-primary,
+      0 0 40px $brand-primary,
+      0 0 70px $brand-primary,
+      0 0 80px $brand-primary;
+  }
+}
+
+h1 {
+  font-weight: normal;
+  color: $brand-primary;
+  text-shadow: 0 0 10px $brand-primary;
+
+  .icon-icon_angel {
+    background-color: $brand-primary;
+  }
+}
+
+.input-group-addon {
+  color: #000;
+
+  .icon-icon_angel {
+    background-color: #000;
+  }
+}
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+    &.bg-warning {
+        color: #000;
+    }
+}
diff --git a/resources/assets/themes/theme9.less b/resources/assets/themes/theme9.less
deleted file mode 100644
index e3826066..00000000
--- a/resources/assets/themes/theme9.less
+++ /dev/null
@@ -1,57 +0,0 @@
-// cccamp19 yellow (2019)
-@import "cyborg_variables.less";
-
-// Variables
-// --------------------------------------------------
-
-//== changed Colors
-
-@gray-dark:              #282828;   // #333
-@gray-light:             #888;   // #999
-@gray-lighter:           #ADAFAE; // #eee
-
-@brand-primary:         #ffc600;
-
-@import "cyborg_styles.less";
-
-// Specials for cccamp19 design
-
-.navbar-brand {
-  .icon-icon_angel {
-    background-color: @brand-primary;
-  }
-
-  strong {
-    font-weight: lighter;
-    color: @brand-primary;
-    text-shadow:
-      0 0 10px @brand-primary,
-      0 0 20px @brand-primary,
-      0 0 30px @brand-primary,
-      0 0 40px @brand-primary,
-      0 0 70px @brand-primary,
-      0 0 80px @brand-primary;
-  }
-}
-
-h1 {
-  font-weight: lighter;
-  color: @brand-primary;
-  text-shadow: 0 0 10px @brand-primary;
-
-  .icon-icon_angel {
-    background-color: @brand-primary;
-  }
-}
-
-.panel-title {
-  color: #fff;
-}
-
-.input-group-addon {
-  color: #000;
-
-  .icon-icon_angel {
-    background-color: #000;
-  }
-}
diff --git a/resources/assets/themes/theme9.scss b/resources/assets/themes/theme9.scss
new file mode 100644
index 00000000..16dfbb8b
--- /dev/null
+++ b/resources/assets/themes/theme9.scss
@@ -0,0 +1,65 @@
+// cccamp19 yellow (2019)
+
+// Variables
+// --------------------------------------------------
+@import "dark";
+
+//== changed Colors
+
+$gray-dark:              #282828;
+$gray-light:             #888;
+$gray-lighter:           #ADAFAE;
+
+$brand-primary: #ffc600;
+$primary:       $brand-primary;
+
+$text-muted: $primary;
+
+@import "cyborg_variables.scss";
+@import "cyborg_styles.scss";
+
+// Specials for cccamp19 design
+@import "card-glow";
+
+.navbar-brand {
+  .icon-icon_angel {
+    background-color: $brand-primary;
+  }
+
+  strong {
+    font-weight: normal;
+    color: $brand-primary;
+    text-shadow:
+      0 0 10px $brand-primary,
+      0 0 20px $brand-primary,
+      0 0 30px $brand-primary,
+      0 0 40px $brand-primary,
+      0 0 70px $brand-primary,
+      0 0 80px $brand-primary;
+  }
+}
+
+h1 {
+  font-weight: normal;
+  color: $brand-primary;
+  text-shadow: 0 0 10px $brand-primary;
+
+  .icon-icon_angel {
+    background-color: $brand-primary;
+  }
+}
+
+.input-group-addon {
+  color: #000;
+
+  .icon-icon_angel {
+    background-color: #000;
+  }
+}
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+    &.bg-primary,
+    &.bg-warning {
+        color: #000;
+    }
+}
diff --git a/resources/lang/de_DE/additional.po b/resources/lang/de_DE/additional.po
index c2507d80..9b1dd9e8 100644
--- a/resources/lang/de_DE/additional.po
+++ b/resources/lang/de_DE/additional.po
@@ -53,6 +53,9 @@ msgstr "Der Schichttyp konnte nicht gefunden werden."
 msgid "schedule.import.success"
 msgstr "Das Programm wurde erfolgreich importiert."
 
+msgid "shifts.filter.toggle"
+msgstr "Filter verstecken/anzeigen"
+
 msgid "validation.schedule-url.required"
 msgstr "Bitte gib eine Programm URL an."
 
diff --git a/resources/lang/en_US/additional.po b/resources/lang/en_US/additional.po
index 0a828419..58ac24a7 100644
--- a/resources/lang/en_US/additional.po
+++ b/resources/lang/en_US/additional.po
@@ -51,6 +51,9 @@ msgstr "The shift type can't not be found."
 msgid "schedule.import.success"
 msgstr "Schedule import successful."
 
+msgid "shifts.filter.toggle"
+msgstr "collapse/show filters"
+
 msgid "validation.schedule-url.required"
 msgstr "The schedule URL is required."
 
diff --git a/resources/views/admin/log.twig b/resources/views/admin/log.twig
index f5b10754..bb723000 100644
--- a/resources/views/admin/log.twig
+++ b/resources/views/admin/log.twig
@@ -10,7 +10,7 @@
 
         <div class="row">
             <div class="col-md-12">
-                <div class="inline-form-spacing">
+                <div class="mb-3">
                     <form method="POST" action="{{ url('/admin/logs') }}" class="form-inline">
                         {{ csrf() }}
 
@@ -44,9 +44,9 @@
                         {%- endif %}
 
                         <tr>
-                            <td class="{{ td_type }}">{{ entry.created_at.format(__('Y-m-d H:i')) }}</td>
-                            <td class="{{ td_type }}">
-                                <span class="label label-{{ type }}">{{ entry.level|capitalize }}</span>
+                            <td class="table-{{ td_type }}">{{ entry.created_at.format(__('Y-m-d H:i')) }}</td>
+                            <td class="table-{{ td_type }}">
+                                <span class="badge bg-{{ type }}">{{ entry.level|capitalize }}</span> <!-- //todo bs5 -->
                             </td>
                             <td>{{ entry.message|nl2br }}</td>
                         </tr>
diff --git a/resources/views/admin/schedule/index.twig b/resources/views/admin/schedule/index.twig
index 99a1a226..d2c8425e 100644
--- a/resources/views/admin/schedule/index.twig
+++ b/resources/views/admin/schedule/index.twig
@@ -10,7 +10,7 @@
             {% block content_title %}{{ title }}{% endblock %}
 
             {% if is_index|default(false) %}
-                {{ m.button(m.glyphicon('plus'), url('/admin/schedule/edit')) }}
+                {{ m.button(m.icon('plus-lg'), url('/admin/schedule/edit'), 'secondary') }}
             {% endif %}
         </h1>
 
@@ -40,12 +40,12 @@
                                         <div class="btn-group">
                                             <a
                                                 href="{{ url('/admin/schedule/load/' ~ schedule.id) }}"
-                                                class="btn btn-xs btn-default">
+                                                class="btn btn-sm btn-primary">
                                                 {{ __('form.import') }}
                                             </a>
                                             <a
                                                 href="{{ url('/admin/schedule/edit/' ~ schedule.id) }}"
-                                                class="btn btn-xs btn-default">
+                                                class="btn btn-sm btn-primary">
                                                 {{ __('form.edit') }}
                                             </a>
                                         </div>
diff --git a/resources/views/errors/404.twig b/resources/views/errors/404.twig
index deff010a..620aaa2d 100644
--- a/resources/views/errors/404.twig
+++ b/resources/views/errors/404.twig
@@ -4,10 +4,10 @@
 
 {% block content_container %}
     <div class="row">
-        <div class="col-sm-6 col-sm-offset-3 error-big">
+        <div class="col-md-6 offset-md-3 col-lg-4 offset-lg-4 error-big">
             <h2>
                 4<span class="pulse">:</span>{{ status|slice(1, 2) }}
-                <small>{{ __("No sleep found") }}</small>
+                <small class="text-muted">{{ __("No sleep found") }}</small>
             </h2>
 
             {% block content_text %}
diff --git a/resources/views/layouts/app.twig b/resources/views/layouts/app.twig
index 12e81ac0..de3ae985 100644
--- a/resources/views/layouts/app.twig
+++ b/resources/views/layouts/app.twig
@@ -1,4 +1,3 @@
-{% set theme = theme|default(user.settings.theme|default(config('theme'))) %}
 <!DOCTYPE html>
 <html lang="{{ session_get('locale')|split('_')[0]|escape('html_attr') }}">
 <head>
@@ -9,13 +8,13 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="csrf-token" content="{{ csrf_token() }}">
 
-        <link rel="stylesheet" type="text/css" href="{{ asset('assets/theme' ~ theme ~ '.css') }}"/>
+        <link rel="stylesheet" type="text/css" href="{{ asset('assets/theme' ~ themeId ~ '.css') }}"/>
         <script type="text/javascript" src="{{ asset('assets/vendor.js') }}"></script>
 
         {% if page() in ['news', 'meetings'] and is_user() and has_permission_to('atom') -%}
             {% set parameters = {'key': user.api_key} -%}
             {% if page() == 'meetings' -%}
-                {% set parameters = parameters|merge({'meetings': 1}) -%}
+                {% set parameters = {'meetings': 1}|merge(parameters) -%}
             {% endif %}
             <link href="{{ url('atom', parameters) }}" type="application/atom+xml" rel="alternate" title="Atom Feed">
         {% endif %}
@@ -30,12 +29,12 @@
     {% endblock %}
 
     <div class="container-fluid">
-        <div class="row" id="content">
+        <div id="content">
             {% block content %}
                 {{ content|raw }}
             {% endblock %}
         </div>
-        <div class="row" id="footer">
+        <div id="footer">
             {% block footer %}
                 {% include "layouts/parts/footer.twig" %}
             {% endblock %}
diff --git a/resources/views/layouts/maintenance.html b/resources/views/layouts/maintenance.html
index 85b95168..c0b52b44 100644
--- a/resources/views/layouts/maintenance.html
+++ b/resources/views/layouts/maintenance.html
@@ -34,9 +34,9 @@
         <div class="jumbotron">
             <div class="container text-center">
                 <h1>
-                    <span class="glyphicon glyphicon-scissors"></span>
-                    <span class="glyphicon glyphicon-wrench"></span>
-                    <span class="glyphicon glyphicon-fire"></span>
+                    <span class="bi bi-scissors"></span>
+                    <span class="bi bi-wrench"></span>
+                    <span class="bi bi-cloud-lightning-rain"></span>
                 </h1>
                 <div class="col-md-6">
                     <h2>
diff --git a/resources/views/layouts/parts/footer.twig b/resources/views/layouts/parts/footer.twig
index d848764c..9c2a95cc 100644
--- a/resources/views/layouts/parts/footer.twig
+++ b/resources/views/layouts/parts/footer.twig
@@ -1,3 +1,5 @@
+{% import 'macros/base.twig' as m %}
+
 <div class="col-md-12">
     <hr/>
     <div class="text-center footer" style="margin-bottom: 10px;">
@@ -27,7 +29,7 @@
 
         {% for name,url in config('footer_items') %}
             <a href="{% if url starts with '/' %}{{ url(url) }}{% else %}{{ url }}{% endif %}">
-                {% if '@' in url %}<span class="glyphicon glyphicon-envelope"></span>{% endif %}
+                {% if '@' in url %}{{ m.icon('envelope') }}{% endif %}
                 {{ __(name) }}
             </a> ·
         {% endfor %}
diff --git a/resources/views/layouts/parts/navbar.twig b/resources/views/layouts/parts/navbar.twig
index 8eda1395..3024bf82 100644
--- a/resources/views/layouts/parts/navbar.twig
+++ b/resources/views/layouts/parts/navbar.twig
@@ -1,86 +1,66 @@
+{% import 'macros/base.twig' as m %}
+
 {% macro toolbar_item(label, link, active_page, icon) %}
-    <li{% if page() == active_page %} class="active"{% endif %}>
-        <a href="{{ link }}">
-            {% if icon %}<span class="{% if 'glyphicon-' in icon %}glyphicon {% endif %}{{ icon }}"></span>{% endif %}
+    <li class="nav-item">
+        <a class="nav-link{% if page() == active_page %} active{% endif %}" href="{{ link }}">
+            {% if icon %}{{ m.icon(icon) }}{% endif %}
             {{ label|raw }}
         </a>
     </li>
 {% endmacro %}
 
-<div class="navbar navbar-default navbar-fixed-top">
+<nav class="navbar fixed-top navbar-expand-lg border-bottom {{ theme['navbar_classes'] }}">
     <div class="container-fluid">
-        {% block navbar %}
-            <div class="navbar-header">
-                <button type="button"
-                        class="navbar-toggle collapsed"
-                        data-toggle="offcanvas"
-                        data-target="#navbar-offcanvas"
-                        aria-label="Toggle navigation">
-                    <span class="text-primary glyphicon glyphicon-menu-hamburger icon-open"></span>
-                    <span class="text-primary glyphicon glyphicon-remove icon-close"></span>
-                </button>
-                <a class="navbar-brand" href="{{ url('/') }}">
-                    <span class="icon-icon_angel"></span>
-                    <strong class="visible-lg-inline">{{ config('app_name')|upper }}</strong>
-                </a>
-            </div>
+        <a class="navbar-brand" href="{{ url('/') }}">
+            <span class="icon-icon_angel"></span>
+            <strong class="visible-lg-inline">{{ config('app_name')|upper }}</strong>
+        </a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            {{ menu() }}
 
-            {% block menu %}
-                <div class="collapse navbar-collapse" id="navbar-offcanvas">
-                    {% block menu_items %}
-                        {{ menu() }}
+            {% if config('header_items') %}
+                <ul class="navbar-nav mb-2 mb-lg-0">
+                    {% for text,link in config('header_items', {}) %}
+                        <li class="nav-item">
+                            <a href="{{ link|replace({'%lang%': session_get('locale')|split('_')[0]})|escape('html_attr') }}">
+                                {{ text }}
+                            </a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            {% endif %}
+            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                {% if is_user() %}
+                    {{ _self.toolbar_item(menuUserShiftState(user), url('shifts', {'action': 'next'}), '', 'clock') }}
+                {% elseif has_permission_to('register') and config('registration_enabled') %}
+                    {{ _self.toolbar_item(__('Register'), url('register'), 'register', 'plus') }}
+                {% endif %}
 
-                        {% if config('header_items') %}
-                            <ul class="nav navbar-nav">
-                                {% for text,link in config('header_items', {}) %}
-                                    <li>
-                                        <a href="{{ link|replace({'%lang%': session_get('locale')|split('_')[0]})|escape('html_attr') }}">
-                                            {{ text }}
-                                        </a>
-                                    </li>
-                                {% endfor %}
-                            </ul>
-                        {% endif %}
-                    {% endblock %}
+                {% if has_permission_to('login') %}
+                    {{ _self.toolbar_item(__('Login'), url('login'), 'login', 'box-arrow-in-right') }}
+                {% endif %}
 
-                    {% block menu_toolbar %}
-                        <ul class="nav navbar-nav navbar-right">
+                {% if is_user() and has_permission_to('user_messages') %}
+                    {{ _self.toolbar_item(menuUserMessages(), url('user-messages'), 'user-messages', 'envelope') }}
+                {% endif %}
 
-                            {% if is_user() %}
-                                {{ _self.toolbar_item(menuUserShiftState(user), url('shifts', {'action': 'next'}), '', 'glyphicon-time') }}
-                            {% elseif has_permission_to('register') and config('registration_enabled') %}
-                                {{ _self.toolbar_item(__('Register'), url('register'), 'register', 'glyphicon-plus') }}
-                            {% endif %}
+                {{ menuUserHints() }}
 
-                            {% if has_permission_to('login') %}
-                                {{ _self.toolbar_item(__('Login'), url('login'), 'login', 'glyphicon-log-in') }}
-                            {% endif %}
+                {% if has_permission_to('user_myshifts') %}
+                    {{ _self.toolbar_item(user.name, url('users', {'action': 'view'}), 'users', 'icon icon-icon_angel') }}
+                {% endif %}
 
-                            {% if is_user() and has_permission_to('user_messages') %}
-                                {{ _self.toolbar_item(menuUserMessages(), url('user-messages'), 'user-messages', 'glyphicon-envelope') }}
-                            {% endif %}
-
-                            {{ menuUserHints() }}
-
-                            {% if has_permission_to('user_myshifts') %}
-                                {{ _self.toolbar_item(user.name, url('users', {'action': 'view'}), 'users', 'icon icon-icon_angel') }}
-                            {% endif %}
-
-                            <li class="hidden-xs">
-                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                    <span class="caret"></span>
-                                </a>
-                                <ul class="dropdown-menu" role="menu">
-                                    {{ menuUserSubmenu()|join(" ")|raw }}
-                                </ul>
-                            </li>
-                        </ul>
-                        <ul class="nav navbar-nav navbar-mobile hidden-sm hidden-md hidden-lg">
-                            {{ menuUserSubmenu()|join(" ")|raw }}
-                        </ul>
-                    {% endblock %}
-                </div>
-            {% endblock %}
-        {% endblock %}
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                    </a>
+                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
+                        {{ menuUserSubmenu()|join(" ")|raw }}
+                    </ul>
+                </li>
+            </ul>
+        </div>
     </div>
-</div>
+</nav>
diff --git a/resources/views/macros/base.twig b/resources/views/macros/base.twig
index 58285ba5..dbc58acf 100644
--- a/resources/views/macros/base.twig
+++ b/resources/views/macros/base.twig
@@ -2,8 +2,8 @@
     <span class="icon-icon_angel"></span>
 {% endmacro %}
 
-{% macro glyphicon(glyph) %}
-    <span class="glyphicon glyphicon-{{ glyph }}"></span>
+{% macro icon(icon, color) %}
+    <span class="bi bi-{{ icon }} {% if color %} text-{{ color }} {% endif %}"></span>
 {% endmacro %}
 
 {% macro alert(message, type) %}
@@ -19,11 +19,19 @@
 {% endmacro %}
 
 {% macro button(label, url, type, size, title) %}
-    <a href="{{ url }}" class="btn btn-{{ type|default('default') }}{% if size %} btn-{{ size }}{% endif %}"{% if title %} title="{{ title }}"{% endif %}>
+    <a href="{{ url }}" class="btn btn-{{ type|default('secondary') }}{% if size %} btn-{{ size }}{% endif %}"{% if title %} title="{{ title }}"{% endif %}>
         {{ label }}
     </a>
 {% endmacro %}
 
 {% macro info(text) %}
-    <span class="help-block">{{ _self.glyphicon('info-sign') }}{{ text }}</span>
+    <span class="help-block">{{ _self.icon('info-circle') }}{{ text }}</span>
+{%- endmacro %}
+
+{% macro type_bg_class() -%}
+    {% if theme.type == 'light' %}bg-white{% else %}bg-dark{% endif %}
+{%- endmacro %}
+
+{% macro type_text_class() -%}
+    {% if theme.type == 'light' %}text-dark{% else %}text-light{% endif %}
 {%- endmacro %}
diff --git a/resources/views/macros/form.twig b/resources/views/macros/form.twig
index 7ea7f822..cc9c7b45 100644
--- a/resources/views/macros/form.twig
+++ b/resources/views/macros/form.twig
@@ -1,7 +1,7 @@
 {% macro input(name, label, type, opt) %}
-    <div class="form-group">
+    <div class="mb-3">
         {% if label -%}
-            <label for="{{ name }}"{% if opt.hide_label|default(false) %} class="sr-only"{% endif %}>{{ label }}</label>
+            <label for="{{ name }}" class="form-label {% if opt.hide_label|default(false) %}sr-only{% endif %}">{{ label }}</label>
         {%- endif %}
         <input
             type="{{ type|default('text') }}" class="form-control"
@@ -22,9 +22,9 @@
 {%- endmacro %}
 
 {% macro textarea(name, label, opt) %}
-    <div class="form-group">
+    <div class="mb-3">
         {% if label -%}
-            <label for="{{ name }}">{{ label }}</label>
+            <label class="form-label" for="{{ name }}">{{ label }}</label>
         {%- endif %}
         <textarea class="form-control" id="{{ name }}" name="{{ name }}"
             {%- if opt.required|default(false) %}
@@ -38,9 +38,9 @@
 {%- endmacro %}
 
 {% macro select(name, data, label, selected) %}
-    <div class="form-group">
+    <div class="mb-3">
         {% if label -%}
-            <label for="{{ name }}">{{ label }}</label>
+            <label class="form-label" for="{{ name }}">{{ label }}</label>
         {% endif %}
         <select id="{{ name }}" name="{{ name }}" class="form-control">
             {% for value,decription in data -%}
@@ -66,7 +66,9 @@
 {%- endmacro %}
 
 {% macro button(label, opt) %}
-    <button class="btn btn-{{ opt.btn_type|default('primary') }} btn-{{ opt.btn_size|default('m') }}"
+    <button
+        class="btn btn-{{ opt.btn_type|default('secondary') }}
+            {%- if 'btn_size' in opt %} btn-{{ opt.btn_size }}{% endif %}"
         {%- if opt.type is defined %} type="{{ opt.type }}"{% endif %}
         {%- if opt.name is defined %} name="{{ opt.name }}"{% endif %}
         {%- if opt.title is defined %} title="{{ opt.title }}"{% endif %}
@@ -77,5 +79,5 @@
 {%- endmacro %}
 
 {% macro submit(label, opt) %}
-    {{ _self.button(label|default(__('form.submit')), opt|default({})|merge({'type': 'submit'})) }}
+    {{ _self.button(label|default(__('form.submit')), {'type': 'submit', 'btn_type': 'primary'}|merge(opt|default({}))) }}
 {%- endmacro %}
diff --git a/resources/views/pages/design.twig b/resources/views/pages/design.twig
index f9ec6b5a..69b94df4 100644
--- a/resources/views/pages/design.twig
+++ b/resources/views/pages/design.twig
@@ -5,25 +5,48 @@
 {% block title %}{{ __('Design') }}{% endblock %}
 
 {% set colors=['success', 'info', 'warning', 'danger'] %}
-{% set types=['default', 'primary', 'success', 'info', 'warning', 'danger'] %}
-{% set types_buttons=types|merge(['link']) %}
+{% set types=[
+    'primary',
+    'secondary',
+    'success',
+    'danger',
+    'warning',
+    'info',
+    'light',
+    'dark'
+]
+%}
+{% set types_color=[
+    ['primary', 'light'],
+    ['secondary', 'light'],
+    ['success', 'light'],
+    ['danger', 'light'],
+    ['warning', 'dark'],
+    ['info', 'dark'],
+    ['light', 'dark'],
+    ['dark', 'light'],
+] %}
+{% set types_buttons=['link']|merge(types) %}
+{% set shortsum='Lorem ipsum dolor…' %}
 {% set lipsum='Lorem ipsum dolor sit amet, consectetur adipisici elit…' %}
 {% set linksum='Lorem ipsum! Dolor <a href="#">link</a> amet, consectetur adipisici elit!' %}
 
 {% block content %}
-    <div class="container">
-        <h1>{{ block('title') }} <small>{{ themes[theme] }}</small></h1>
+    <div class="col-12">
+        <div class="container">
+        <h1 class="mb-4">
+            {{ block('title') }} <small class="text-muted">{{ themes[themeId]['name'] }}</small>
+        </h1>
 
-
-        <h2>Elements <small>small</small></h2>
+        <h2>Elements <small class="text-muted">small</small></h2>
         <div class="row">
-            <div class="col-md-2">
-                <h3>Headings <small>small</small></h3>
-                <h4>H4 <small>small</small></h4>
-                <h5>H5 <small>small</small></h5>
-                <h6>H6 <small>small</small></h6>
+            <div class="col-md-6 col-lg-2 mb-4">
+                <h3>Headings <small class="text-muted">small</small></h3>
+                <h4>H4 <small class="text-muted">small</small></h4>
+                <h5>H5 <small class="text-muted">small</small></h5>
+                <h6>H6 <small class="text-muted">small</small></h6>
             </div>
-            <div class="col-md-6">
+            <div class="col-md-6 mb-4">
                 <h3>Lists</h3>
                 <p>
                     This page should be used when creating and testing new designs to find usability and/or design issues.
@@ -41,13 +64,14 @@
                 </ol>
                 <p>{{ linksum|raw }} {{ lipsum }}</p>
             </div>
-            <div class="col-md-4">
+            <div class="col-lg-4 mb-4">
                 <h3>Themes</h3>
                 <ul>
-                    {% for id,theme in themes|sort %}
+                    {% for id,theme in themes %}
                         <li>
-                            <a href="{{ url('design', {'theme': id}) }}">
-                                {{ theme }}
+                            <a href="{{ url('design', {'theme': id}) }}"
+                                {%- if id == themeId %} class="text-info"{% endif %}>
+                                {{ theme['name'] }}
                             </a>
                         </li>
                     {% endfor %}
@@ -55,7 +79,7 @@
             </div>
         </div>
         <div class="row">
-            <div class="col-md-6">
+            <div class="col-md-6 col-lg-4 mb-4">
                 <h3>Tables</h3>
                 <table class="table table-striped">
                     <tr>
@@ -66,44 +90,56 @@
                     <tr>
                         <td>Table content</td>
                         <td>{{ lipsum }}</td>
-                        <td><span class="text-success">{{ m.glyphicon('ok') }}</span></td>
+                        <td><span class="text-success">{{ m.icon('check-lg') }}</span></td>
                     </tr>
                     <tr>
                         <td>Another content</td>
                         <td></td>
-                        <td><span class="text-danger">{{ m.glyphicon('remove') }}</span></td>
+                        <td><span class="text-danger">{{ m.icon('x-lg') }}</span></td>
                     </tr>
                 </table>
             </div>
-            <div class="col-md-3">
+            <div class="col-md-6 col-lg-4 mb-4">
                 <h3>Navigation Tabs</h3>
                 <ul class="nav nav-tabs">
-                    <li class="active"><a href="#">Lorem</a></li>
-                    <li><a href="#">Ipsum</a></li>
-                    <li><a href="#">Dolor</a></li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="#">Lorem</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Ipsum</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Dolor</a>
+                    </li>
                 </ul>
             </div>
-            <div class="col-md-3 settings-menu">
+            <div class="col-md-6 col-lg-4 mb-4">
                 <h3>Navigation Pills</h3>
-                <ul class="nav nav-pills nav-stacked">
-                    <li class="active"><a href="#">Some</a></li>
-                    <li><a href="#">Test</a></li>
-                    <li><a href="#">Menu</a></li>
+                <ul class="nav nav-pills flex-column">
+                    <li class="nav-item">
+                        <a class="nav-link active" href="#">Some</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Test</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Menu</a>
+                    </li>
                 </ul>
             </div>
         </div>
 
         <div class="row">
-            <div class="col-md-12">
+            <div class="col-6 col-md-12 mb-4">
                 <h3>Texts</h3>
                 <p>
                     {{ linksum|raw }}<br>
                     {{ lipsum }} {{ lipsum|replace({'…': '.'}) }} {{ lipsum|replace({'…': '.'}) }} {{ lipsum }}
                 </p>
 
-                <div class="row">
+                <div class="row mb-4">
                     {% for color in types %}
-                        <div class="col-md-3">
+                        <div class="col-12 col-md-3">
                             <p class="text-{{ color }}">{{ color|capitalize }}: {{ linksum|raw }}</p>
                         </div>
                     {% endfor %}
@@ -112,15 +148,15 @@
         </div>
 
         <div class="row">
-            <div class="col-md-6">
-                <h3>Labels</h3>
+            <div class="col-6 col-md-12 mb-4">
+                <h3>Badges</h3>
                 <p>
-                    {% for type in types %}
-                        <span class="label label-{{ type }}">{{ type|capitalize }}</span>
+                    {% for type in types_color %}
+                        <span class="badge bg-{{ type[0] }} text-{{ type[1] }}">{{ type[0]|capitalize }}</span>
                     {% endfor %}
                 </p>
             </div>
-            <div class="col-md-6">
+            <div class="col-6 col-md-12 mb-4">
                 <h3>Buttons</h3>
                 <p>
                     {% for type in types_buttons %}
@@ -130,13 +166,13 @@
             </div>
         </div>
 
-        <div class="row">
-            <div class="col-md-12">
+        <div class="row mb-4">
+            <div class="col">
                 <h3>Alerts</h3>
 
                 <div class="row">
                     {% for color in colors %}
-                        <div class="col-md-3">
+                        <div class="col">
                             <h4>{{ color|capitalize }}</h4>
                             {{ m.alert(lipsum, color) }}
                         </div>
@@ -145,51 +181,76 @@
             </div>
         </div>
 
-        <div class="row">
+        <div class="row mb-4">
+            <div class="col-md-12 mb-3">
+                <h3>Cards</h3>
+
+                <div class="row">
+                    {% for type in types %}
+                        <div class="col mb-3">
+                            <div class="card border-{{ type }} {{ m.type_bg_class() }}">
+                                <h4 class="card-header bg-{{ type }}">{{ type|capitalize }}</h4>
+                                <div class="card-body">
+                                    <p class="card-text">{{ shortsum }}</p>
+                                    <p class="card-text"><a href="#" class="card-link">Some link</a></p>
+                                </div>
+                                <div class="card-footer text-muted">
+                                    Footer
+                                </div>
+                            </div>
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+
+        <div class="row mb-4">
             <div class="col-md-12">
                 <h3>Forms</h3>
 
                 <div class="row">
-                    <div class="col-md-2">
+                    <div class="col-md-3 col-lg-2">
                         {{ f.input('form-input-text', 'Text', 'text', {'value': 'Value'}) }}
                     </div>
-                    <div class="col-md-2">
+                    <div class="col-md-3 col-lg-2">
                         {{ f.input('form-input-text-hidden-label', 'Hidden label', 'text', {'value': 'Hidden label', 'hide_label': true}) }}
                     </div>
-                    <div class="col-md-2">
+                    <div class="col-md-3 col-lg-2">
                         {{ f.input('form-input-text-disabled', 'Disabled', 'text', {'disabled': true, 'value': 'Value'}) }}
                     </div>
-                    <div class="col-md-2">
+                    <div class="col-md-3 col-lg-2">
                         {{ f.input('form-input-text-readonly', 'Readonly', 'text', {'readonly': true, 'value': 'Value'}) }}
                     </div>
-                    <div class="col-md-2">
+                    <div class="col-md-3 col-lg-2">
                         {{ f.input('form-input-password', 'Password', 'password', {'value': 'Value'}) }}
                     </div>
-                    <div class="col-md-2">
+                    <div class="col-md-3 col-lg-2">
                         {{ f.input('form-input-number', 'Number', 'number', {'value': 42}) }}
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-md-2">
+                    <div class="col-md-3 col-lg-2">
                         {{ f.textarea('form-input-textarea', 'Textarea', {'rows': 2, 'value': lipsum}) }}
                     </div>
-                    <div class="col-md-2">
+                    <div class="col-md-3 col-lg-2">
                         {{ f.select('form-input-select', {'lorem': 'Ipsum', 'dolor': 'Sit'}, 'Select', 'dolor') }}
                     </div>
-                    <div class="col-md-2">
-                        Button<br>
-                        {{ f.button('Button', {'btn_type': 'default'}) }}
+                    <div class="col-md-3 col-lg-2">
+                        <label class="form-label">Button</label>
+                        <div>
+                            {{ f.button('Button') }}
+                        </div>
                     </div>
-                    <div class="col-md-2">
+                    <div class="col-md-3 col-lg-2">
                         Submit button<br>
                         {{ f.submit() }}
                     </div>
-                    <div class="col-md-2">
+                    <div class="col-md-3 col-lg-2">
                         Checkbox<br>
                         {{ f.checkbox('form-input-checkbox', 'Checkbox', true) }}
                         {{ f.checkbox('form-input-checkbox-2', 'Checkbox 2') }}
                     </div>
-                    <div class="col-md-2 checkbox-inline">
+                    <div class="col-md-3 col-lg-2 checkbox-inline">
                         Radio<br>
                         <label>
                             <input type="radio" checked="checked" name="form-input-radio" value="1"> Yey
@@ -203,11 +264,11 @@
         </div>
 
         <h3>Other</h3>
-        <div class="row">
-            <div class="col-md-3">
+        <div class="row mb-4">
+            <div class="col">
                 <h4>Code</h4>
                 <p>
-                    <code>3.1415926535897932384626433832795028841971693993751058209749445923</code>
+                    <code>3.1415926535897932384626433832795</code>
                 </p>
             </div>
         </div>
@@ -215,14 +276,14 @@
 
         <h2>Macros</h2>
         <h3>base.twig</h3>
-        <div class="row">
+        <div class="row mb-4">
             <div class="col-md-3">
                 <h4><code>angel()</code></h4>
                 <p>{{ m.angel() }}</p>
             </div>
             <div class="col-md-3">
-                <h4><code>glyphicon(glyph)</code></h4>
-                <p>{{ m.glyphicon('star') }}</p>
+                <h4><code>icon(icon_name)</code></h4>
+                <p>{{ m.icon('star') }}</p>
             </div>
             <div class="col-md-3">
                 <h4><code>alert(message, type)</code></h4>
@@ -232,8 +293,6 @@
                 <h4><code>user(user)</code></h4>
                 <p>{{ m.user(demo_user) }}<br>{{ m.user(demo_user_2) }}</p>
             </div>
-        </div>
-        <div class="row">
             <div class="col-md-3">
                 <h4><code>button(label, url, type, size)</code></h4>
                 <p>{{ m.button('Label', '#', 'info', 'sm') }}</p>
@@ -241,7 +300,7 @@
         </div>
 
         <h3>form.twig</h3>
-        <div class="row">
+        <div class="row mb-4">
             <div class="col-md-3">
                 <h4><code>input(name, label, type, opt)</code></h4>
                 <p>{{ f.input('input-name', 'Label', 'text', {'required': true, 'value': 'Value'}) }}</p>
@@ -264,8 +323,6 @@
                     {{ f.checkbox('checkbox-name', 'Label', true, 'on') }}
                 </p>
             </div>
-        </div>
-        <div class="row">
             <div class="col-md-3">
                 <h4><code>hidden(name, value)</code></h4>
                 <p>
@@ -276,7 +333,7 @@
             <div class="col-md-3">
                 <h4><code>button(label, opt)</code></h4>
                 <p>
-                    {{ f.button('Label', {'btn_type': 'default', 'name': 'button-name', 'value': 'buton-value'}) }}
+                    {{ f.button('Label', {'name': 'button-name', 'value': 'buton-value'}) }}
                 </p>
             </div>
 
@@ -288,4 +345,5 @@
             </div>
         </div>
     </div>
+    </div>
 {% endblock %}
diff --git a/resources/views/pages/faq/edit.twig b/resources/views/pages/faq/edit.twig
index cd988f7c..d93ea2f3 100644
--- a/resources/views/pages/faq/edit.twig
+++ b/resources/views/pages/faq/edit.twig
@@ -14,12 +14,12 @@
             <div class="row">
                 <div class="col-md-6">
                     <p>
-                        {{ m.glyphicon('time') }} {{ faq.updated_at.format(__('Y-m-d H:i')) }}
+                        {{ m.icon('clock') }} {{ faq.updated_at.format(__('Y-m-d H:i')) }}
 
                         {% if faq.updated_at != faq.created_at %}
                             &emsp;{{ __('form.updated') }}
                             <br>
-                            {{ m.glyphicon('time') }} {{ faq.created_at.format(__('Y-m-d H:i')) }}
+                            {{ m.icon('clock') }} {{ faq.created_at.format(__('Y-m-d H:i')) }}
                         {% endif %}
                     </p>
                 </div>
@@ -29,7 +29,7 @@
         <form action="" enctype="multipart/form-data" method="post">
             {{ csrf() }}
 
-            <div class="row">
+            <div class="row mb-4">
                 <div class="col-md-12">
                     {{ f.input('question', __('faq.question'), null, {'required': true, 'value': faq ? faq.question : ''}) }}
                 </div>
@@ -38,10 +38,10 @@
 
                     {{ f.submit() }}
 
-                    {{ f.submit(m.glyphicon('eye-close'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
+                    {{ f.submit(m.icon('eye'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
 
                     {% if faq and faq.id %}
-                        {{ f.submit(m.glyphicon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
+                        {{ f.submit(m.icon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
                     {% endif %}
                 </div>
             </div>
@@ -51,12 +51,11 @@
                     <div class="col-md-12">
                         <h2>{{ __('form.preview') }}</h2>
 
-                        <div class="panel panel-default">
-                            <div class="panel-heading">
+                        <div class="card {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %}">
+                            <div class="card-header">
                                 {{ faq.question }}
                             </div>
-
-                            <div class="panel-body">
+                            <div class="card-body bg-body">
                                 {{ faq.text|markdown }}
                             </div>
                         </div>
diff --git a/resources/views/pages/faq/overview.twig b/resources/views/pages/faq/overview.twig
index c1032f88..e3762c09 100644
--- a/resources/views/pages/faq/overview.twig
+++ b/resources/views/pages/faq/overview.twig
@@ -11,7 +11,7 @@
             {{ block('title') }}
 
             {%- if has_permission_to('faq.edit') -%}
-                {{ m.button(m.glyphicon('plus'), url('admin/faq')) }}
+                {{ m.button(m.icon('plus-lg'), url('admin/faq'), 'secondary') }}
             {%- endif %}
         </h1>
 
@@ -30,24 +30,26 @@
                 {% for item in items %}
                     <div class="col-md-12 faq">
                         <span id="faq-{{ item.id }}" class="ref-id"></span>
-                        <div class="panel panel-default">
-                            <div class="panel-heading">
-                                <h3>
-                                    {{ item.question }}
-                                    <small><a class="ref-link" href="#faq-{{ item.id }}">{{ m.glyphicon('link') }}</a></small>
-                                </h3>
-                            </div>
+                        <div class="card {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} mb-4">
+                            <h4 class="card-header">
+                                {{ item.question }}
+                                <small class="text-muted">
+                                    <a class="ref-link" href="#faq-{{ item.id }}">{{ m.icon('link') }}</a>
+                                </small>
+                            </h4>
 
-                            <div class="panel-body">
+                            <div class="card-body bg-body">
                                 {{ item.text|markdown }}
                             </div>
 
-                            <div class="panel-footer">
-                                {{ m.glyphicon('time') }} {{ item.updated_at.format(__('Y-m-d H:i')) }}
+                            <div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} d-flex align-items-center">
+                                <div class="me-3">
+                                    {{ m.icon('clock') }} {{ item.updated_at.format(__('Y-m-d H:i')) }}
+                                </div>
 
                                 {% if has_permission_to('faq.edit') %}
-                                    <span class="pull-right">
-                                        {{ m.button(m.glyphicon('edit'), url('admin/faq/' ~ item.id), null, 'xs') }}
+                                    <span class="ms-auto">
+                                        {{ m.button(m.icon('pencil-square'), url('admin/faq/' ~ item.id), 'secondary', 'sm') }}
                                     </span>
                                 {% endif %}
                             </div>
diff --git a/resources/views/pages/login.twig b/resources/views/pages/login.twig
index 0fbfbaf3..90160faf 100644
--- a/resources/views/pages/login.twig
+++ b/resources/views/pages/login.twig
@@ -5,13 +5,13 @@
 
 {% block content %}
     <div class="col-md-12">
-        <div class="row">
+        <div class="row mb-3 mt-5">
             <div class="col-sm-12 text-center" id="welcome-title">
                 <h2>{{ __('Welcome to the %s!', [config('name') ~ m.angel() ~ (config('app_name')|upper) ])|raw }}</h2>
             </div>
         </div>
 
-        <div class="row">
+        <div class="row mb-3">
             {% for name,date in {
                 (__('Buildup starts')): config('buildup_start'),
                 (__('Event starts')): config('event_start'),
@@ -19,7 +19,7 @@
                 (__('Teardown ends')): config('teardown_end')
             } | filter(date => date) %}
                 {% if date > date() %}
-                    <div class="col-sm-3 text-center hidden-xs">
+                    <div class="col-sm-3 text-center d-none d-sm-block">
                         <h4>{{ name }}</h4>
                         <span class="moment-countdown text-big" data-timestamp="{{ date.getTimestamp }}">%c</span>
                         <small>{{ date.format(__('Y-m-d')) }}</small>
@@ -28,19 +28,21 @@
             {% endfor %}
         </div>
 
-        <div class="row">
-            <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
-                <div class="panel panel-primary first">
-                    <div class="panel-body">
+        <div class="row mb-5">
+            <div class="col-md-6 offset-md-3 col-lg-4 offset-lg-4">
+                <div class="card {{ m.type_bg_class() }}">
+                    <div class="card-body">
                         {% include 'layouts/parts/messages.twig' %}
 
                         <form action="" enctype="multipart/form-data" method="post">
                             {{ csrf() }}
-                            <div class="form-group">
-                                <div class="input-group">
-                                    <span class="input-group-addon input-lg">{{ m.angel }}</span>
+                            <div class="mb-3">
+                                <div class="input-group input-group-lg">
+                                    <span class="input-group-text {{ m.type_text_class() }}">
+                                        {{ m.angel }}
+                                    </span>
                                     <input
-                                        class="form-control input-lg"
+                                        class="form-control"
                                         id="form_nick"
                                         type="text"
                                         name="login"
@@ -50,32 +52,38 @@
                                 </div>
                             </div>
 
-                            <div class="form-group">
-                                <div class="input-group">
-                                    <span class="input-group-addon input-lg">{{ m.glyphicon('lock') }}</span>
+                            <div class="mb-3">
+                                <div class="input-group input-group-lg">
+                                    <span class="input-group-text {{ m.type_text_class() }}">
+                                        <i class="bi bi-key"></i>
+                                    </span>
                                     <input
-                                        class="form-control input-lg" id="form_password"
+                                        class="form-control" id="form_password"
                                         type="password" name="password" value="" placeholder="{{ __('Password') }}"
                                     >
                                 </div>
                             </div>
 
-                            <div class="form-group">
+                            <div class="mb-3 text-center">
                                 <button class="btn btn-primary btn-lg btn-block" type="submit" name="submit">
                                     {{ __('Login') }}
                                 </button>
                             </div>
 
-                            <div class="form-group btn-group btn-group-justified">
-                                {% for name,config in config('oauth') %}
-                                    <a href="{{ url('oauth/' ~ name) }}" class="btn btn-primary btn-lg{% if config.hidden|default(false) %} hidden{% endif %}">
-                                        {{ __(
-                                            'oauth.login-using-provider',
-                                            [__(config.name|default(name|capitalize))]
-                                        ) }}
-                                    </a>
-                                {% endfor %}
-                            </div>
+                            {%  if config('oauth') is not empty %}
+                                <div class="row">
+                                    <div class="mb-3 btn-group">
+                                        {% for name,config in config('oauth') %}
+                                            <a href="{{ url('oauth/' ~ name) }}" class="btn btn-primary btn-lg{% if config.hidden|default(false) %} d-none{% endif %}">
+                                                {{ __(
+                                                    'oauth.login-using-provider',
+                                                    [__(config.name|default(name|capitalize))]
+                                                ) }}
+                                            </a>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            {% endif %}
 
                             <div class="text-center">
                                 <a href="{{ url('/password/reset') }}" class="">
@@ -88,14 +96,12 @@
             </div>
         </div>
 
-        <div class="row">
+        <div class="row mb-5">
             <div class="col-sm-6 text-center">
                 <h2>{{ __('Register') }}</h2>
                 {% if has_permission_to('register') and config('registration_enabled') %}
                     <p>{{ __('Please sign up, if you want to help us!') }}</p>
-                    <div class="form-group">
-                        <a href="{{ url('register') }}" class="btn btn-default">{{ __('Register') }} &raquo;</a>
-                    </div>
+                    <a href="{{ url('register') }}" class="btn btn-primary">{{ __('Register') }} &raquo;</a>
                 {% else %}
                     {{ m.alert(__('Registration is disabled.'), 'danger') }}
                 {% endif %}
@@ -104,15 +110,13 @@
             <div class="col-sm-6 text-center">
                 <h2>{{ __('What can I do?') }}</h2>
                 <p>{{ __('Please read about the jobs you can do to help us.') }}</p>
-                <div class="form-group">
-                    <a href="{{ url('angeltypes', {'action': 'about'}) }}" class="btn btn-default">
-                        {{ __('Teams/Job description') }} &raquo;
-                    </a>
-                </div>
+                <a href="{{ url('angeltypes', {'action': 'about'}) }}" class="btn btn-primary">
+                    {{ __('Teams/Job description') }} &raquo;
+                </a>
             </div>
 
             <div class="col-md-12 text-center">
-                {{ m.glyphicon('info-sign') }} {{ __('Please note: You have to activate cookies!') }}
+                {{ m.icon('info-circle') }} {{ __('Please note: You have to activate cookies!') }}
             </div>
         </div>
     </div>
diff --git a/resources/views/pages/news/edit.twig b/resources/views/pages/news/edit.twig
index 0e10b883..a1f8f63a 100644
--- a/resources/views/pages/news/edit.twig
+++ b/resources/views/pages/news/edit.twig
@@ -14,12 +14,12 @@
             <div class="row">
                 <div class="col-md-6">
                     <p>
-                        {{ m.glyphicon('time') }} {{ news.updated_at.format(__('Y-m-d H:i')) }}
+                        {{ m.icon('clock') }} {{ news.updated_at.format(__('Y-m-d H:i')) }}
 
                         {% if news.updated_at != news.created_at %}
                             &emsp;{{ __('news.updated') }}
                             <br>
-                            {{ m.glyphicon('time') }} {{ news.created_at.format(__('Y-m-d H:i')) }}
+                            {{ m.icon('clock') }} {{ news.created_at.format(__('Y-m-d H:i')) }}
                         {% endif %}
 
                         &emsp;{{ m.user(news.user) }}
@@ -46,16 +46,16 @@
                 </div>
             </div>
 
-            <div class="row">
+            <div class="row mb-4">
                 <div class="col-md-12">
                     {{ f.textarea('text', __('news.edit.message'), {'required': true, 'rows': 10, 'value': news ? news.text : ''}) }}
 
                     {{ f.submit() }}
 
-                    {{ f.submit(m.glyphicon('eye-close'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
+                    {{ f.submit(m.icon('eye'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
 
                     {% if news and news.id %}
-                        {{ f.submit(m.glyphicon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
+                        {{ f.submit(m.icon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
                     {% endif %}
                 </div>
             </div>
@@ -65,15 +65,12 @@
                     <div class="col-md-12">
                         <h2>{{ __('form.preview') }}</h2>
 
-                        <div class="panel {% if not news.is_meeting %}panel-default{% else %}panel-info{% endif %}">
-                            <div class="panel-heading">
-                                <h3 class="panel-title">
-                                    {% if news.is_meeting %}{{ __('news.is_meeting') }}{% endif %}
-                                    {{ news.title }}
-                                </h3>
+                        <div class="card {% if news.is_meeting %}bg-info{% else %}{% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %}{% endif %} mb-4">
+                            <div class="card-header {% if news.is_meeting and theme.type == 'dark' %}text-white{% endif %}">
+                                {% if news.is_meeting %}{{ __('news.is_meeting') }}{% endif %}
+                                {{ news.title }}
                             </div>
-
-                            <div class="panel-body">
+                            <div class="card-body bg-body">
                                 {{ news.text|raw|markdown(false) }}
                             </div>
                         </div>
diff --git a/resources/views/pages/news/news.twig b/resources/views/pages/news/news.twig
index 8bc3225d..8c38863c 100644
--- a/resources/views/pages/news/news.twig
+++ b/resources/views/pages/news/news.twig
@@ -9,18 +9,19 @@
 {% endblock %}
 
 {% block comments %}
-    <div class="col-md-12">
+    <div class="col-md-12 mt-4">
         <h2>{{ __('news.comments') }}</h2>
 
         {% for comment in news.comments %}
-            <div class="panel panel-default">
-                <div class="panel-body">
+        <div class="card {% if theme.type == 'light' %}bg-light{% else %}bg-secondary{% endif %} mb-4">
+                <div class="card-body {{ m.type_bg_class() }}">
                     {{ comment.text|nl2br }}
                 </div>
-                <div class="panel-footer text-muted">
-                    {{ m.glyphicon('time') }}
-                    {{ comment.created_at.format(__('Y-m-d H:i')) }}
-
+                <div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} text-muted d-flex align-items-center">
+                    <div class="me-3">
+                        {{ m.icon('clock') }}
+                        {{ comment.created_at.format(__('Y-m-d H:i')) }}
+                    </div>
                     {{ m.user(comment.user) }}
 
                     {% if comment.user.id == user.id or has_permission_to('admin_news') or has_permission_to('comment.delete') %}
@@ -41,14 +42,12 @@
 
 {% block write_comment %}
     {% if has_permission_to('news_comments') %}
-        <div class="col-md-12">
+        <div class="col-md-12 mt-4">
             <h3>{{ __('news.comments.new') }}</h3>
 
             <form action="" enctype="multipart/form-data" method="post">
                 {{ csrf() }}
-
                 {{ f.textarea('comment', __('news.comments.message'), {'required': true}) }}
-
                 {{ f.submit() }}
             </form>
         </div>
diff --git a/resources/views/pages/news/overview.twig b/resources/views/pages/news/overview.twig
index b3198427..73f924e6 100644
--- a/resources/views/pages/news/overview.twig
+++ b/resources/views/pages/news/overview.twig
@@ -9,7 +9,7 @@
         <h1>
             {{ block('title') }}
             {%- if has_permission_to('admin_news') and is_overview|default(false) -%}
-                {{ m.button(m.glyphicon('plus'), url('admin/news', only_meetings ? {'meeting': 1} : {})) }}
+                {{ m.button(m.icon('plus-lg'), url('admin/news', only_meetings ? {'meeting': 1} : {}), 'secondary') }}
             {%- endif %}
         </h1>
 
@@ -48,48 +48,53 @@
 {% endblock %}
 
 {% macro news(news, show_comments_link, is_overview) %}
-    <div class="panel {% if not news.is_meeting %}panel-default{% else %}panel-info{% endif %}">
+    <div class="card {% if news.is_meeting %}bg-info{% else %}{% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %}{% endif %} mb-4">
         {% if is_overview|default(false) %}
-            <div class="panel-heading">
-                <h3 class="panel-title">
-                    <a href="{{ url('news/' ~ news.id) }}">
-                        {% if news.is_pinned %}{{ m.glyphicon('pushpin') }}{% endif %}
-                        {% if news.is_meeting %}{{ __('news.is_meeting') }}{% endif %}
-                        {{ news.title }}
-                    </a>
-                </h3>
+        <div class="card-header {% if news.is_meeting and theme.type == 'dark' %}text-white{% endif %}">
+                <a href="{{ url('news/' ~ news.id) }}" class="text-inherit">
+                    {% if news.is_pinned %}{{ m.icon('pin-angle') }}{% endif %}
+                    {% if news.is_meeting %}{{ __('news.is_meeting') }}{% endif %}
+                    {{ news.title }}
+                </a>
             </div>
         {% endif %}
 
-        <div class="panel-body">
+        <div class="card-body bg-body">
             {{ news.text|raw|markdown(false) }}
         </div>
 
-        <div class="panel-footer text-muted">
-            {{ m.glyphicon('time') }} {{ news.updated_at.format(__('Y-m-d H:i')) }}
-
+        <div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} text-muted">
             {% if news.updated_at != news.created_at and not is_overview %}
-                &emsp;{{ __('news.updated') }}
-
-                <br>
-                {{ m.glyphicon('time') }} {{ news.created_at.format(__('Y-m-d H:i')) }}
-            {% endif %}
-
-            &emsp;{{ m.user(news.user) }}
-
-            {% if show_comments_link|default(false) %}
-                &ensp;
-                <a href="{{ url('news/' ~ news.id) }}">
-                    {{ m.glyphicon('comment') }} {{ __('news.comments') }} &raquo;
-                </a>
-                <span class="badge">{{ news.comments.count() }}</span>
-            {% endif %}
-
-            {% if has_permission_to('admin_news') %}
-                <div class="pull-right">
-                    {{ m.button(m.glyphicon('edit'), url('admin/news/' ~ news.id), null, 'xs') }}
+                <div class="d-flex align-items-center">
+                    <div class="me-3">
+                        {{ m.icon('clock') }} {{ news.created_at.format(__('Y-m-d H:i')) }}
+                    </div>
+                    {{ __('news.updated') }}
                 </div>
             {% endif %}
+            <div class="d-flex align-items-center">
+                <div class="me-3">
+                    {{ m.icon('clock') }} {{ news.updated_at.format(__('Y-m-d H:i')) }}
+                </div>
+
+                <div class="me-3">
+                    {{ m.user(news.user) }}
+                </div>
+
+                {% if show_comments_link|default(false) %}
+                    <a href="{{ url('news/' ~ news.id) }}" class="me-1">
+                        {{ m.icon('chat-left-text') }} {{ __('news.comments') }}
+                    </a>
+                    <span class="badge bg-primary">{{ news.comments.count() }}</span>
+                    {{ m.icon('chevron-double-right', 'primary') }}
+                {% endif %}
+
+                {% if has_permission_to('admin_news') %}
+                    <div class="ms-auto">
+                        {{ m.button(m.icon('pencil-square'), url('admin/news/' ~ news.id), 'secondary', 'sm') }}
+                    </div>
+                {% endif %}
+            </div>
         </div>
     </div>
 {% endmacro %}
diff --git a/resources/views/pages/password/reset-form.twig b/resources/views/pages/password/reset-form.twig
index 3464abe8..e078ab0e 100644
--- a/resources/views/pages/password/reset-form.twig
+++ b/resources/views/pages/password/reset-form.twig
@@ -10,9 +10,7 @@
             {{ f.input('password', __('Password'), 'password', {'min': min_length, 'required': true}) }}
             {{ f.input('password_confirmation', __('Confirm password'), 'password', {'min': min_length, 'required': true}) }}
 
-            <div class="form-group">
-                {{ f.submit(__('Save')) }}
-            </div>
+            {{ f.submit(__('Save')) }}
         </form>
     </div>
 {% endblock %}
diff --git a/resources/views/pages/password/reset.twig b/resources/views/pages/password/reset.twig
index b3fba53e..ce7b5e28 100644
--- a/resources/views/pages/password/reset.twig
+++ b/resources/views/pages/password/reset.twig
@@ -19,9 +19,7 @@
                         {{ __('We will send you an e-mail with a password recovery link. Please use the email address you used for registration.') }}
                         {{ f.input('email', __('E-Mail'), 'email', {'required': true}) }}
 
-                        <div class="form-group">
-                            {{ f.submit(__('Recover')) }}
-                        </div>
+                        {{ f.submit(__('Recover')) }}
                     </form>
                 </div>
             {% endblock %}
diff --git a/resources/views/pages/questions/edit.twig b/resources/views/pages/questions/edit.twig
index 343ac12f..c286497a 100644
--- a/resources/views/pages/questions/edit.twig
+++ b/resources/views/pages/questions/edit.twig
@@ -14,12 +14,12 @@
             <div class="row">
                 <div class="col-md-6">
                     <p>
-                        {{ m.glyphicon('time') }} {{ question.updated_at.format(__('Y-m-d H:i')) }}
+                        {{ m.icon('clock') }} {{ question.updated_at.format(__('Y-m-d H:i')) }}
 
                         {% if question.updated_at != question.created_at %}
                             &emsp;{{ __('form.updated') }}
                             <br>
-                            {{ m.glyphicon('time') }} {{ question.created_at.format(__('Y-m-d H:i')) }}
+                            {{ m.icon('clock') }} {{ question.created_at.format(__('Y-m-d H:i')) }}
                         {% endif %}
                     </p>
                 </div>
@@ -41,31 +41,31 @@
                     {{ f.submit() }}
 
                     {% if is_admin|default(false) %}
-                        {{ f.submit(m.glyphicon('eye-close'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
+                        {{ f.submit(m.icon('eye'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
 
                         {% if question and question.id %}
-                            {{ f.submit(m.glyphicon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
+                            {{ f.submit(m.icon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
                         {% endif %}
                     {% endif %}
                 </div>
             </div>
 
             {% if question %}
-                <div class="row">
+                <div class="row mt-3">
                     <div class="col-md-12">
                         <h2>{{ __('form.preview') }}</h2>
 
-                        <div class="panel panel-default">
-                            <div class="panel-body">
+                        <div class="card {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %} mb-4">
+                            <div class="card-body bg-body">
                                 {{ question.text|nl2br }}
                             </div>
                         </div>
                     </div>
 
                     {% if question.answer %}
-                        <div class="col-md-11 col-md-offset-1">
-                            <div class="panel panel-info">
-                                <div class="panel-body">
+                        <div class="col-md-11 offset-md-1">
+                            <div class="card bg-info">
+                                <div class="card-body bg-body">
                                     {{ question.answer|markdown }}
                                 </div>
                             </div>
diff --git a/resources/views/pages/questions/overview.twig b/resources/views/pages/questions/overview.twig
index c7ab960a..3b8f545f 100644
--- a/resources/views/pages/questions/overview.twig
+++ b/resources/views/pages/questions/overview.twig
@@ -13,7 +13,7 @@
                 {{ block('title') }}
 
                 {% if not is_admin|default(false) %}
-                    {{ m.button(m.glyphicon('plus'), url('questions/new')) }}
+                    {{ m.button(m.icon('plus-lg'), url('questions/new'), 'secondary') }}
                 {% endif %}
             </h1>
         </div>
@@ -25,55 +25,59 @@
                 <div class="col-md-12">
                     {% block questions %}
                         {% for question in questions %}
-                            <div class="row">
+                            <div class="row mb-4">
                                 <div class="col-md-12">
-                                    <div class="panel panel-default">
-                                        <div class="panel-body">
+                                    <div class="card {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %}">
+                                        <div class="card-body bg-body">
                                             {{ question.text|nl2br }}
                                         </div>
 
-                                        <div class="panel-footer">
-                                            {{ m.glyphicon('time') }} {{ question.created_at.format(__('Y-m-d H:i')) }}
+                                        <div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} d-flex align-items-center">
+                                            <div class="me-3">
+                                                {{ m.icon('clock') }} {{ question.created_at.format(__('Y-m-d H:i')) }}
+                                            </div>
 
                                             {% if has_permission_to('question.edit') %}
-                                                &nbsp;{{ m.user(question.user) }}
+                                                {{ m.user(question.user) }}
+                                                <div class="d-flex ms-auto">
                                             {% endif %}
 
                                             {% if question.user.id == user.id or has_permission_to('question.edit') %}
                                                 <form
+                                                    class="pe-1"
                                                     action=""
                                                     enctype="multipart/form-data"
                                                     method="post"
-                                                    class="pull-right"
                                                 >
                                                     {{ csrf() }}
                                                     {{ f.hidden('id', question.id) }}
-                                                    {{ f.submit(m.glyphicon('trash'), {'name': 'delete', 'btn_type': 'danger', 'btn_size': 'xs', 'title': __('form.delete')}) }}
+                                                    {{ f.submit(m.icon('trash'), {'name': 'delete', 'btn_type': 'danger', 'btn_size': 'sm', 'title': __('form.delete')}) }}
                                                 </form>
                                             {% endif %}
 
                                             {% if has_permission_to('question.edit') %}
-                                                <span class="pull-right">
-                                                    {{ m.button(m.glyphicon('edit'), url('admin/questions/' ~ question.id), null, 'xs') }}
-                                                </span>
+                                                {{ m.button(m.icon('pencil-square'), url('admin/questions/' ~ question.id), null, 'sm') }}
+                                                </div>
                                             {% endif %}
                                         </div>
                                     </div>
                                 </div>
                                 {% if question.answer %}
-                                    <div class="col-md-11 col-md-offset-1">
-                                        <div class="panel panel-info">
-                                            <div class="panel-body">
+                                    <div class="col-md-11 offset-md-1 mt-3">
+                                        <div class="card bg-info">
+                                            <div class="card-body bg-body">
                                                 {{ question.answer|markdown }}
                                             </div>
-                                            <div class="panel-footer">
-                                                {{ m.glyphicon('time') }} {{ question.updated_at.format(__('Y-m-d H:i')) }}
-                                                &nbsp;{{ m.user(question.answerer) }}
+                                            <div class="card-footer {% if theme.type =='light' %}bg-light{% else %}bg-dark{% endif %} d-flex align-items-center">
+                                                <div class="me-3">
+                                                    {{ m.icon('clock') }} {{ question.updated_at.format(__('Y-m-d H:i')) }}
+                                                </div>
+                                                {{ m.user(question.answerer) }}
                                             </div>
                                         </div>
                                     </div>
                                 {% endif %}
-                            </div>
+                            </div> <!-- row -->
                         {% endfor %}
                     {% endblock %}
                 </div>
diff --git a/resources/views/pages/settings/oauth.twig b/resources/views/pages/settings/oauth.twig
index 13f07a72..b2518554 100644
--- a/resources/views/pages/settings/oauth.twig
+++ b/resources/views/pages/settings/oauth.twig
@@ -4,7 +4,10 @@
 {% block title %}{{ __('settings.oauth') }}{% endblock %}
 
 {% block container_title %}
-    <h1 id="oauth-settings-title">{{ __('settings.settings') }} <small>{{ block('title') }}</small></h1>
+    <h1 id="oauth-settings-title">
+        {{ __('settings.settings') }}
+        <small class="text-muted">{{ block('title') }}</small>
+    </h1>
 {% endblock %}
 
 {% block row_content %}
@@ -17,7 +20,7 @@
     </thead>
     <tbody>
     {% for name,config in providers %}
-        <tr{% if config.hidden|default(false) %} class="hidden"{% endif %}>
+        <tr{% if config.hidden|default(false) %} class="d-none"{% endif %}>
             <td>
                 {% if config.url|default %}
                     <a href="{{ config.url }}" target="_blank" rel="noopener">
@@ -32,13 +35,13 @@
                     <form method="POST" action="{{ url('/oauth/' ~ name ~ '/connect') }}">
                         {{ csrf() }}
 
-                        {{ f.submit(__('form.connect'), {'btn_size' : 'xs'}) }}
+                        {{ f.submit(__('form.connect'), {'btn_size' : 'sm'}) }}
                     </form>
                 {% else %}
                     <form method="POST" action="{{ url('/oauth/' ~ name ~ '/disconnect') }}">
                         {{ csrf() }}
 
-                        {{ f.submit(__('form.disconnect'), {'btn_type': 'danger', 'btn_size' : 'xs'}) }}
+                        {{ f.submit(__('form.disconnect'), {'btn_type': 'danger', 'btn_size' : 'sm'}) }}
                     </form>
                 {% endif %}
             </td>
diff --git a/resources/views/pages/settings/settings.twig b/resources/views/pages/settings/settings.twig
index 23159796..1a9493c3 100644
--- a/resources/views/pages/settings/settings.twig
+++ b/resources/views/pages/settings/settings.twig
@@ -6,15 +6,18 @@
 {% block content %}
     <div class="container user-settings">
         {% block container_title %}
-            <h1>{{ __('settings.settings') }} <small>{{ block('title') }}</small></h1>
+            <h1>
+                {{ __('settings.settings') }}
+                <small class="text-muted">{{ block('title') }}</small>
+            </h1>
         {% endblock %}
 
         <div class="row">
             <div class="col-md-3 settings-menu">
-                <ul class="nav nav-pills nav-stacked">
+                <ul class="nav nav-pills flex-column mt-3">
                     {% for url,title in settings_menu %}
-                        <li{% if url == request.url() %} class="active"{% endif %}>
-                            <a href="{{ url }}">{{ __(title) }}</a>
+                        <li class="nav-item">
+                            <a class="nav-link {% if url == request.url() %}active{% endif %}" href="{{ url }}">{{ __(title) }}</a>
                         </li>
                     {% endfor %}
                 </ul>
diff --git a/resources/views/pages/user-shifts.html b/resources/views/pages/user-shifts.html
index ae92d1af..8b73e016 100644
--- a/resources/views/pages/user-shifts.html
+++ b/resources/views/pages/user-shifts.html
@@ -3,75 +3,79 @@
     <div class="row">
         <div class="col-md-6">
             <h1>%title%</h1>
-            <div class="form-group">%start_select%</div>
-            <div class="form-group">
-                <div class="input-group time">
-                    <input
-                        type="time" class="form-control" id="start_time" name="start_time" size="5"
-                        pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%start_time%"
-                    >
-                    <div class="input-group-btn">
-                        <button class="btn btn-default" title="Now" type="button">
-                            <span class="glyphicon glyphicon-time"></span>
-                        </button>
+            <div class="row align-items-center">
+                <div class="col-12 col-xxl-5 row pe-xxl-0">
+                    <div class="col-6 pe-xxl-0">%start_select%</div>
+                    <div class="col-6">
+                        <div class="input-group time" data-target-input="nearest">
+                            <input
+                                type="time" class="form-control" id="start_time" name="start_time" size="5"
+                                pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%start_time%"
+                            >
+                            <div class="input-group-btn">
+                                <button class="btn btn-secondary" title="Now" type="button">
+                                    <span class="bi bi-clock"></span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12 col-xxl-1 text-center px-xxl-0">&#8211;</div>
+                <div class="col-12 col-xxl-5 row px-xxl-0">
+                    <div class="col-6 pe-xxl-0">%end_select%</div>
+                    <div class="col-6">
+                        <div class="input-group time" data-target-input="nearest">
+                            <input
+                                type="time" class="form-control" id="end_time" name="end_time" size="5"
+                                pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%end_time%"
+                            >
+                            <div class="input-group-btn">
+                                <button class="btn btn-secondary" title="Now" type="button">
+                                    <span class="bi bi-clock"></span>
+                                </button>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
-            &#8211;
-            <div class="form-group">%end_select%</div>
-            <div class="form-group">
-                <div class="input-group time">
-                    <input
-                        type="time" class="form-control" id="end_time" name="end_time" size="5"
-                        pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%end_time%"
-                    >
-                    <div class="input-group-btn">
-                        <button class="btn btn-default" title="Now" type="button">
-                            <span class="glyphicon glyphicon-time"></span>
-                        </button>
-                    </div>
+            <div class="form-group d-print-none" style="margin-top: .5em">
+                <div class="btn-group mb-1">
+                    <a href="javascript:setDay(-1)" class="btn btn-secondary ">%set_yesterday%</a>
+                    <a href="javascript:setDay()" class="btn btn-secondary ">%set_today%</a>
+                    <a href="javascript:setDay(1)" class="btn btn-secondary ">%set_tomorrow%</a>
                 </div>
-            </div>
-            <div class="form-group hidden-print" style="margin-top: .5em">
-                <div class="btn-group">
-                    <a href="javascript:setDay(-1)" class="btn btn-default ">%set_yesterday%</a>
-                    <a href="javascript:setDay()" class="btn btn-default ">%set_today%</a>
-                    <a href="javascript:setDay(1)" class="btn btn-default ">%set_tomorrow%</a>
+                <div class="btn-group mb-1">
+                    <a href="javascript:setHours(-8)" class="btn btn-secondary ">%set_last_8h%</a>
+                    <a href="javascript:setHours(-4)" class="btn btn-secondary ">%set_last_4h%</a>
+                    <a href="javascript:setHours(4)" class="btn btn-secondary ">%set_next_4h%</a>
+                    <a href="javascript:setHours(8)" class="btn btn-secondary ">%set_next_8h%</a>
                 </div>
-                <div class="btn-group">
-                    <a href="javascript:setHours(-8)" class="btn btn-default ">%set_last_8h%</a>
-                    <a href="javascript:setHours(-4)" class="btn btn-default ">%set_last_4h%</a>
-                    <a href="javascript:setHours(4)" class="btn btn-default ">%set_next_4h%</a>
-                    <a href="javascript:setHours(8)" class="btn btn-default ">%set_next_8h%</a>
-                </div>
-            </div>
-            <div class="form-group hidden-print" style="margin-top: .5em">
-                <div class="btn-group">
+                <div class="btn-group mb-1">
                     %buttons%
                 </div>
             </div>
-            <div class="row hidden-print">
+            <div class="row d-print-none">
                 <div class="col-md-12">
                     <input class="btn btn-primary" type="submit" style="width:100%; margin: 1em 0" value="%filter%">
                 </div>
             </div>
         </div>
         <div class="col-md-6">
-            <button class="btn btn-info btn-sm hidden-print" style="margin-top: 20px; margin-bottom:10px" type="button"
-                    data-toggle="collapse"
-                    data-target="#collapseShiftsFilterSelect" aria-expanded="true"
-                    aria-controls="collapseShiftsFilterSelect"
+            <button class="btn btn-info btn-sm mb-3 d-print-none" type="button"
+                    data-bs-toggle="collapse" data-bs-target="#collapseShiftsFilterSelect"
+                    aria-expanded="true" aria-controls="collapseShiftsFilterSelect"
             >
-                collapse/show filters
+                %filter_toggle%
             </button>
-            <div class="collapse in" id="collapseShiftsFilterSelect">
+
+            <div class="collapse show d-print-none" id="collapseShiftsFilterSelect">
                 <div class="row">
-                    <div class="col-xs-4 col-xxs-12">%room_select%</div>
-                    <div class="col-xs-4 col-xxs-12">%type_select%</div>
-                    <div class="col-xs-4 col-xxs-12">%filled_select%</div>
+                    <div class="col col-xs-4 col-xxs-12">%room_select%</div>
+                    <div class="col col-xs-4 col-xxs-12">%type_select%</div>
+                    <div class="col col-xs-4 col-xxs-12">%filled_select%</div>
                 </div>
-                <div class="row hidden-print">
-                    <div class="col-md-12" style="margin: 1em 0">
+                <div class="row">
+                    <div class="col col-md-12 m-1">
                         <p>%task_notice%</p>
                     </div>
                 </div>
@@ -82,6 +86,6 @@
 
 %shifts_table%
 
-<div class="hidden-print">
+<div class="d-print-none">
     %ical_text%
 </div>
diff --git a/src/Controllers/DesignController.php b/src/Controllers/DesignController.php
index 89bced59..9ec47b5c 100644
--- a/src/Controllers/DesignController.php
+++ b/src/Controllers/DesignController.php
@@ -29,11 +29,9 @@ class DesignController extends BaseController
     /**
      * Show the design overview page
      *
-     * @param Request $request
-     *
      * @return Response
      */
-    public function index(Request $request)
+    public function index()
     {
         $demoUser = (new User())->forceFill([
             'id'   => 42,
@@ -52,19 +50,13 @@ class DesignController extends BaseController
             'arrived' => false,
         ]));
 
-        $themes = $this->config->get('available_themes');
-
+        $themes = $this->config->get('themes');
         $data = [
             'demo_user'   => $demoUser,
             'demo_user_2' => $demoUser2,
             'themes'      => $themes,
         ];
 
-        $theme = $request->get('theme');
-        if (isset($themes[$theme])) {
-            $data['theme'] = $theme;
-        }
-
         return $this->response->withView(
             'pages/design',
             $data
diff --git a/src/Controllers/Metrics/Controller.php b/src/Controllers/Metrics/Controller.php
index f24101b3..158ab017 100644
--- a/src/Controllers/Metrics/Controller.php
+++ b/src/Controllers/Metrics/Controller.php
@@ -70,12 +70,12 @@ class Controller extends BaseController
 
         $userTshirtSizes = $this->formatStats($this->stats->tshirtSizes(), 'tshirt_sizes', 'shirt_size', 'size');
         $userLocales = $this->formatStats($this->stats->languages(), 'locales', 'language', 'locale');
-        $userThemes = $this->formatStats($this->stats->themes(), 'available_themes', 'theme');
+        $userThemes = $this->formatStats($this->stats->themes(), 'themes', 'theme');
         $userOauth = $this->formatStats($this->stats->oauth(), 'oauth', 'provider');
 
-        $themes = $this->config->get('available_themes');
+        $themes = $this->config->get('themes');
         foreach ($userThemes as $key => $theme) {
-            $userThemes[$key]['labels']['name'] = $themes[$theme['labels']['theme']];
+            $userThemes[$key]['labels']['name'] = $themes[$theme['labels']['theme']]['name'];
         }
 
         $oauthProviders = $this->config->get('oauth');
diff --git a/src/Renderer/Twig/Extensions/Globals.php b/src/Renderer/Twig/Extensions/Globals.php
index 7327b3e0..1b21d241 100644
--- a/src/Renderer/Twig/Extensions/Globals.php
+++ b/src/Renderer/Twig/Extensions/Globals.php
@@ -7,6 +7,8 @@ use Engelsystem\Http\Request;
 use Twig\Extension\AbstractExtension as TwigExtension;
 use Twig\Extension\GlobalsInterface as GlobalsInterface;
 
+use function array_key_exists;
+
 class Globals extends TwigExtension implements GlobalsInterface
 {
     /** @var Authenticator */
@@ -33,10 +35,30 @@ class Globals extends TwigExtension implements GlobalsInterface
     public function getGlobals(): array
     {
         $user = $this->auth->user();
+        $themes = config('themes');
+
+        if ($user === null) {
+            $themeId = config('theme');
+        } else {
+            $themeId = $user->settings->theme;
+        }
+
+        $query = $this->request->query->get('theme');
+        if (!is_null($query) && isset($themes[(int)$query])) {
+            $themeId = (int)$query;
+        }
+
+        if (array_key_exists($themeId, $themes) === false) {
+            $themeId = 1;
+        }
+
+        $theme = $themes[$themeId];
 
         return [
-            'user'    => $user ? $user : [],
+            'user'    => $user ?? [],
             'request' => $this->request,
+            'themeId' => $themeId,
+            'theme'   => $theme,
         ];
     }
 }
diff --git a/tests/Feature/Controllers/Metrics/ControllerTest.php b/tests/Feature/Controllers/Metrics/ControllerTest.php
index 1ff541a2..18ad7555 100644
--- a/tests/Feature/Controllers/Metrics/ControllerTest.php
+++ b/tests/Feature/Controllers/Metrics/ControllerTest.php
@@ -15,7 +15,7 @@ class ControllerTest extends ApplicationFeatureTest
         config([
             'api_key' => null,
             'metrics' => ['work' => [60 * 60], 'voucher' => [1]],
-            'available_themes' => ['1' => 'Test'],
+            'themes' => [1 => ['name' => 'Test']],
         ]);
 
         /** @var Controller $controller */
diff --git a/tests/Unit/Controllers/DesignControllerTest.php b/tests/Unit/Controllers/DesignControllerTest.php
index 4f93eed6..4e60f793 100644
--- a/tests/Unit/Controllers/DesignControllerTest.php
+++ b/tests/Unit/Controllers/DesignControllerTest.php
@@ -4,7 +4,6 @@ namespace Engelsystem\Test\Unit\Controllers;
 
 use Engelsystem\Config\Config;
 use Engelsystem\Controllers\DesignController;
-use Engelsystem\Http\Request;
 use Engelsystem\Http\Response;
 use Engelsystem\Test\Unit\TestCase;
 use PHPUnit\Framework\MockObject\MockObject;
@@ -22,36 +21,18 @@ class DesignControllerTest extends TestCase
         $response->expects($this->once())
             ->method('withView')
             ->with('pages/design')
-            ->willReturn($response);
-        $request = new Request(['theme' => 42]);
-        $config = new Config();
-
-        $controller = new DesignController($response, $config);
-        $return = $controller->index($request);
-
-        $this->assertEquals($response, $return);
-    }
-
-    /**
-     * @covers \Engelsystem\Controllers\DesignController::index
-     */
-    public function testIndexSetTheme()
-    {
-        /** @var Response|MockObject $response */
-        $response = $this->createMock(Response::class);
-        $response->expects($this->once())
-            ->method('withView')
             ->willReturnCallback(function (string $view, array $data) use ($response) {
-                $this->assertTrue(isset($data['theme']));
-                $this->assertEquals('42', $data['theme']);
+                $this->assertTrue(isset($data['demo_user']));
+                $this->assertTrue(isset($data['demo_user_2']));
+                $this->assertIsArray($data['themes']);
 
                 return $response;
             });
-        $request = new Request();
-        $request->attributes->set('theme', '42');
-        $config = new Config(['available_themes' => ['42' => 'Meaning of Live']]);
+        $config = new Config(['themes' => [42 => ['name' => 'Foo']]]);
 
         $controller = new DesignController($response, $config);
-        $controller->index($request);
+        $return = $controller->index();
+
+        $this->assertEquals($response, $return);
     }
 }
diff --git a/tests/Unit/Controllers/Metrics/ControllerTest.php b/tests/Unit/Controllers/Metrics/ControllerTest.php
index 6dc9d2cf..a24ea3fa 100644
--- a/tests/Unit/Controllers/Metrics/ControllerTest.php
+++ b/tests/Unit/Controllers/Metrics/ControllerTest.php
@@ -151,9 +151,9 @@ class ControllerTest extends TestCase
             'de_DE' => 'German',
             'en_US' => 'US English',
         ]);
-        $config->set('available_themes', [
-            '0' => 'Nothing',
-            '1' => 'Testing',
+        $config->set('themes', [
+            0 => ['name' => 'Nothing'],
+            1 => ['name' => 'Testing'],
         ]);
         $config->set('metrics', [
             'work'    => [60 * 60],
diff --git a/tests/Unit/Renderer/Twig/Extensions/GlobalsTest.php b/tests/Unit/Renderer/Twig/Extensions/GlobalsTest.php
index 08918fe3..f471e804 100644
--- a/tests/Unit/Renderer/Twig/Extensions/GlobalsTest.php
+++ b/tests/Unit/Renderer/Twig/Extensions/GlobalsTest.php
@@ -2,40 +2,65 @@
 
 namespace Engelsystem\Test\Unit\Renderer\Twig\Extensions;
 
+use Engelsystem\Config\Config;
 use Engelsystem\Helpers\Authenticator;
 use Engelsystem\Http\Request;
+use Engelsystem\Models\User\Settings;
 use Engelsystem\Models\User\User;
 use Engelsystem\Renderer\Twig\Extensions\Globals;
+use Engelsystem\Test\Unit\HasDatabase;
 use PHPUnit\Framework\MockObject\MockObject;
 
 class GlobalsTest extends ExtensionTest
 {
+    use HasDatabase;
+
     /**
      * @covers \Engelsystem\Renderer\Twig\Extensions\Globals::__construct
      * @covers \Engelsystem\Renderer\Twig\Extensions\Globals::getGlobals
      */
     public function testGetGlobals()
     {
+        $this->initDatabase();
+
         /** @var Authenticator|MockObject $auth */
         $auth = $this->createMock(Authenticator::class);
-        /** @var Request|MockObject $request */
-        $request = $this->createMock(Request::class);
-        $user = User::factory()->make();
+        $request = new Request();
+        $theme = ['name' => 'Testtheme', 'navbar_classes' => 'something'];
+        $theme2 = ['name' => 'Bar'];
+        $theme3 = ['name' => 'Lorem'];
+        $user = User::factory()
+            ->has(Settings::factory(['theme' => 42]))
+            ->create();
+        $config = new Config(['theme' => 23, 'themes' => [42 => $theme, 23 => $theme2, 1337 => $theme3]]);
 
-        $auth->expects($this->exactly(2))
+        $auth->expects($this->exactly(3))
             ->method('user')
             ->willReturnOnConsecutiveCalls(
                 null,
-                $user
+                $user,
+                null
             );
 
+        $this->app->instance('config', $config);
+
         $extension = new Globals($auth, $request);
 
         $globals = $extension->getGlobals();
         $this->assertGlobalsExists('user', [], $globals);
         $this->assertGlobalsExists('request', $request, $globals);
+        $this->assertGlobalsExists('themeId', 23, $globals);
+        $this->assertGlobalsExists('theme', $theme2, $globals);
 
         $globals = $extension->getGlobals();
         $this->assertGlobalsExists('user', $user, $globals);
+        $this->assertGlobalsExists('themeId', 42, $globals);
+        $this->assertGlobalsExists('theme', $theme, $globals);
+
+        $request->query->set('theme', 1337);
+        $globals = $extension->getGlobals();
+        $this->assertGlobalsExists('user', [], $globals);
+        $this->assertGlobalsExists('themeId', 1337, $globals);
+        $this->assertGlobalsExists('theme', $theme3, $globals);
     }
 }
diff --git a/webpack.config.js b/webpack.config.js
index ca3f5c5e..5b57d6b3 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -9,7 +9,7 @@ const fs = require('fs');
 // eslint-disable-next-line
 const __DEV__ = nodeEnv !== 'production';
 
-const devtool = __DEV__ ? 'eval-cheap-module-source-map' : undefined;
+const devtool = __DEV__ ? 'source-map' : undefined
 
 const plugins = [
   new webpack.DefinePlugin({
@@ -57,12 +57,11 @@ module.exports = {
         test: /\.jsx?$/,
         exclude: /(node_modules)/,
         loader: 'babel-loader',
-        options: { cacheDirectory: true },
       },
       { test: /\.(jpg|eot|ttf|otf|svg|woff2?)(\?.*)?$/, loader: 'file-loader' },
       { test: /\.json$/, loader: 'json-loader' },
       {
-        test: /\.(less|css)$/,
+        test: /\.(scss|css)$/,
         use: [
           { loader: MiniCssExtractPlugin.loader },
           { loader: 'css-loader', options: { importLoaders: 1 } },
@@ -70,13 +69,20 @@ module.exports = {
             loader: 'postcss-loader',
             options: {
               postcssOptions: {
-                plugins: [ [ 'autoprefixer' ] ],
+                plugins: [ [ 'autoprefixer', ], ],
               },
             },
           },
-          { loader: 'less-loader' },
-        ],
-      },
+          {
+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                quietDeps: true
+              }
+            }
+          },
+        ]
+      }
     ],
   },
   plugins,
diff --git a/yarn.lock b/yarn.lock
index f79aca2d..913ad118 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -868,11 +868,23 @@
     "@babel/helper-validator-identifier" "^7.14.5"
     to-fast-properties "^2.0.0"
 
+"@choojs/findup@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@choojs/findup/-/findup-0.2.1.tgz#ac13c59ae7be6e1da64de0779a0a7f03d75615a3"
+  integrity sha512-YstAqNb0MCN8PjdLCDfRsBcGVRN41f3vgLvaI0IrIcBp4AqILRSS0DeWNGkicC+f/zRIPJLc+9RURVSepwvfBw==
+  dependencies:
+    commander "^2.15.1"
+
 "@discoveryjs/json-ext@^0.5.0":
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz#90420f9f9c6d3987f176a19a7d8e764271a2f55d"
   integrity sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==
 
+"@popperjs/core@^2.9.2":
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
+  integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==
+
 "@trysound/sax@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.1.1.tgz#3348564048e7a2d7398c935d466c0414ebb6a669"
@@ -887,9 +899,9 @@
     "@types/estree" "*"
 
 "@types/eslint@*":
-  version "7.2.14"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.2.14.tgz#088661518db0c3c23089ab45900b99dd9214b92a"
-  integrity sha512-pESyhSbUOskqrGcaN+bCXIQDyT5zTaRWfj5ZjjSlMatgGjIn3QQPfocAu4WSabUR7CGyLZ2CQaZyISOEX7/saw==
+  version "7.28.0"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.28.0.tgz#7e41f2481d301c68e14f483fe10b017753ce8d5a"
+  integrity sha512-07XlgzX0YJUn4iG1ocY4IX9DzKSmMGUs6ESKlxWhZRaa0fatIWaHWUVapcuGa8r5HFnTqzj+4OCjd5f7EZ/i/A==
   dependencies:
     "@types/estree" "*"
     "@types/json-schema" "*"
@@ -905,9 +917,9 @@
   integrity sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==
 
 "@types/node@*":
-  version "16.3.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.3.1.tgz#24691fa2b0c3ec8c0d34bfcfd495edac5593ebb4"
-  integrity sha512-N87VuQi7HEeRJkhzovao/JviiqKjDKMVKxKMfUvSKw+MbkbW8R0nA3fi/MQhhlxV2fQ+2ReM+/Nt4efdrJx3zA==
+  version "16.3.3"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.3.3.tgz#0c30adff37bbbc7a50eb9b58fae2a504d0d88038"
+  integrity sha512-8h7k1YgQKxKXWckzFCMfsIwn0Y61UK6tlD6y2lOb3hTOIMlK3t9/QwHOhc81TwU+RMf0As5fj7NPjroERCnejQ==
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
@@ -1087,6 +1099,13 @@ alphanum-sort@^1.0.2:
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
   integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
 
+ansi-colors@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-1.1.0.tgz#6374b4dd5d4718ff3ce27a671a3b1cad077132a9"
+  integrity sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==
+  dependencies:
+    ansi-wrap "^0.1.0"
+
 ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -1101,13 +1120,41 @@ ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+ansi-wrap@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
+  integrity sha1-qCJQ3bABXponyoLoLqYDu/pF768=
+
+anymatch@~3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+arr-diff@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
+  integrity sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=
+
+arr-union@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+  integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
+
+assign-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
+  integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
+
 autoprefixer@^10.2.5:
-  version "10.2.6"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.2.6.tgz#aadd9ec34e1c98d403e01950038049f0eb252949"
-  integrity sha512-8lChSmdU6dCNMCQopIf4Pe5kipkAGj/fvTMslCsih0uHpOrXOPUEVOmYMMqmw3cekQkSD7EhIeuYl5y0BLdKqg==
+  version "10.3.1"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.3.1.tgz#954214821d3aa06692406c6a0a9e9d401eafbed2"
+  integrity sha512-L8AmtKzdiRyYg7BUXJTzigmhbQRCXFKz6SA1Lqo0+AR2FBbQ4aTAPFSDlOutnFkjhiz8my4agGXog1xlMjPJ6A==
   dependencies:
     browserslist "^4.16.6"
-    caniuse-lite "^1.0.30001230"
+    caniuse-lite "^1.0.30001243"
     colorette "^1.2.2"
     fraction.js "^4.1.1"
     normalize-range "^0.1.2"
@@ -1164,15 +1211,35 @@ big.js@^5.2.2:
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
   integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
 boolbase@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bootstrap@^3, bootstrap@^3.3:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.4.1.tgz#c3a347d419e289ad11f4033e3c4132b87c081d72"
-  integrity sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA==
+bootstrap-icons@^1.4.1:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz#2cb19da148aa9105cb3174de2963564982d3dc55"
+  integrity sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA==
+
+bootstrap@5.0.0-beta2:
+  version "5.0.0-beta2"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.0.0-beta2.tgz#ab1504a12807fa58e5e41408e35fcea42461e84b"
+  integrity sha512-e+uPbPHqTQWKyCX435uVlOmgH9tUt0xtjvyOC7knhKgOS643BrQKuTo+KecGpPV7qlmOyZgCfaM4xxPWtDEN/g==
+
+bootstrap@^4.5.2:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.0.tgz#97b9f29ac98f98dfa43bf7468262d84392552fd7"
+  integrity sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==
+
+bootstrap@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.0.tgz#543ef8f44f4b9af67b0230f19508542fec38ef55"
+  integrity sha512-bs74WNI9BgBo3cEovmdMHikSKoXnDgA6VQjJ7TyTotU6L7d41ZyCEEelPwkYEzsG/Zjv3ie9IE3EMAje0W9Xew==
 
 brace-expansion@^1.1.7:
   version "1.1.11"
@@ -1182,6 +1249,13 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
 browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.0, browserslist@^4.16.6:
   version "4.16.6"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
@@ -1198,7 +1272,7 @@ buffer-from@^1.0.0:
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
   integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
 
-call-bind@^1.0.0, call-bind@^1.0.2:
+call-bind@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
   integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
@@ -1221,12 +1295,12 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001230:
-  version "1.0.30001243"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001243.tgz#d9250155c91e872186671c523f3ae50cfc94a3aa"
-  integrity sha512-vNxw9mkTBtkmLFnJRv/2rhs1yufpDfCkBZexG3Y0xdOH2Z/eE/85E4Dl5j1YUN34nZVsSp6vVRFQRrez9wJMRA==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001243:
+  version "1.0.30001245"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001245.tgz#45b941bbd833cb0fa53861ff2bae746b3c6ca5d4"
+  integrity sha512-768fM9j1PKXpOCKws6eTo3RHmvTUsG9UrpT4WoREFeZgJBTi4/X9g565azS/rVUGtqb8nt7FjLeF5u4kukERnA==
 
-chalk@^2.0.0, chalk@^2.4.1:
+chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -1266,6 +1340,21 @@ chartjs-color@^2.1.0:
     chartjs-color-string "^0.6.0"
     color-convert "^1.9.3"
 
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
+  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chrome-trace-event@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
@@ -1314,7 +1403,7 @@ colorette@^1.2.1, colorette@^1.2.2:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
   integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
 
-commander@^2.20.0:
+commander@^2.15.1, commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -1341,13 +1430,6 @@ convert-source-map@^1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
-copy-anything@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-2.0.3.tgz#842407ba02466b0df844819bbe3baebbe5d45d87"
-  integrity sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==
-  dependencies:
-    is-what "^3.12.0"
-
 core-js-compat@^3.14.0, core-js-compat@^3.15.0:
   version "3.15.2"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.15.2.tgz#47272fbb479880de14b4e6081f71f3492f5bd3cb"
@@ -1361,6 +1443,11 @@ core-js@^3.6.5:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.15.2.tgz#740660d2ff55ef34ce664d7e2455119c5bdd3d61"
   integrity sha512-tKs41J7NJVuaya8DxIOCnl8QuPHx5/ZVbFo1oKgVl1qHFBBrDctzQGtuLjPpRdNTWmKPH6oEvgN/MUID+l485Q==
 
+core-util-is@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
+
 cosmiconfig@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.0.tgz#ef9b44d773959cae63ddecd122de23853b60f8d3"
@@ -1372,17 +1459,6 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-cross-spawn@^6.0.5:
-  version "6.0.5"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
-  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
-  dependencies:
-    nice-try "^1.0.4"
-    path-key "^2.0.1"
-    semver "^5.5.0"
-    shebang-command "^1.2.0"
-    which "^1.2.9"
-
 cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -1409,10 +1485,10 @@ css-declaration-sorter@^6.0.3:
   dependencies:
     timsort "^0.3.0"
 
-css-loader@^5.2.5:
-  version "5.2.6"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.6.tgz#c3c82ab77fea1f360e587d871a6811f4450cc8d1"
-  integrity sha512-0wyN5vXMQZu6BvjbrPdUJvkCzGEO24HC7IS7nW4llc6BBFC+zwR9CKtYGv63Puzsg10L/o12inMY5/2ByzfD6w==
+css-loader@^5.2.2:
+  version "5.2.7"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.7.tgz#9b9f111edf6fb2be5dc62525644cbc9c232064ae"
+  integrity sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==
   dependencies:
     icss-utils "^5.1.0"
     loader-utils "^2.0.0"
@@ -1425,17 +1501,17 @@ css-loader@^5.2.5:
     schema-utils "^3.0.0"
     semver "^7.3.5"
 
-css-minimizer-webpack-plugin@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.0.2.tgz#8fadbdf10128cb40227bff275a4bb47412534245"
-  integrity sha512-B3I5e17RwvKPJwsxjjWcdgpU/zqylzK1bPVghcmpFHRL48DXiBgrtqz1BJsn68+t/zzaLp9kYAaEDvQ7GyanFQ==
+css-minimizer-webpack-plugin@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-2.0.0.tgz#3c42f6624ed4cf4780dd963e23ee649e5a25c1a8"
+  integrity sha512-cG/uc94727tx5pBNtb1Sd7gvUPzwmcQi1lkpfqTpdkuNq75hJCw7bIVsCNijLm4dhDcr1atvuysl2rZqOG8Txw==
   dependencies:
-    cssnano "^5.0.6"
-    jest-worker "^27.0.2"
+    cssnano "^5.0.0"
+    jest-worker "^26.3.0"
     p-limit "^3.0.2"
-    postcss "^8.3.5"
+    postcss "^8.2.9"
     schema-utils "^3.0.0"
-    serialize-javascript "^6.0.0"
+    serialize-javascript "^5.0.1"
     source-map "^0.6.1"
 
 css-select@^4.1.3:
@@ -1507,7 +1583,7 @@ cssnano-utils@^2.0.1:
   resolved "https://registry.yarnpkg.com/cssnano-utils/-/cssnano-utils-2.0.1.tgz#8660aa2b37ed869d2e2f22918196a9a8b6498ce2"
   integrity sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==
 
-cssnano@^5.0.6:
+cssnano@^5.0.0:
   version "5.0.6"
   resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.0.6.tgz#2a91ad34c6521ae31eab3da9c90108ea3093535d"
   integrity sha512-NiaLH/7yqGksFGsFNvSRe2IV/qmEBAeDE64dYeD8OBrgp6lE8YoMeQJMtsv5ijo6MPyhuoOvFhI94reahBRDkw==
@@ -1523,13 +1599,6 @@ csso@^4.2.0:
   dependencies:
     css-tree "^1.1.2"
 
-debug@^3.2.6:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
-  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
-  dependencies:
-    ms "^2.1.1"
-
 debug@^4.1.0, debug@^4.1.1:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
@@ -1575,9 +1644,9 @@ domutils@^2.6.0:
     domhandler "^4.2.0"
 
 electron-to-chromium@^1.3.723:
-  version "1.3.772"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.772.tgz#fd1ed39f9f3149f62f581734e4f026e600369479"
-  integrity sha512-X/6VRCXWALzdX+RjCtBU6cyg8WZgoxm9YA02COmDOiNJEZ59WkQggDbWZ4t/giHi/3GS+cvdrP6gbLISANAGYA==
+  version "1.3.779"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.779.tgz#de55492a756deec63424f89fbe62aec9776f0e6d"
+  integrity sha512-nreave0y/1Qhmo8XtO6C/LpawNyC6U26+q7d814/e+tIqUK073pM+4xW7WUXyqCRa5K4wdxHmNMBAi8ap9nEew==
 
 emojis-list@^3.0.0:
   version "3.0.0"
@@ -1602,23 +1671,6 @@ envinfo@^7.7.3:
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
   integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==
 
-eonasdan-bootstrap-datetimepicker@^4.17.47:
-  version "4.17.49"
-  resolved "https://registry.yarnpkg.com/eonasdan-bootstrap-datetimepicker/-/eonasdan-bootstrap-datetimepicker-4.17.49.tgz#5534ba581c1e7eb988dbf773e2fed8a7f48cc76a"
-  integrity sha512-7KZeDpkj+A6AtPR3XjX8gAnRPUkPSfW0OmMANG1dkUOPMtLSzbyoCjDIdEcfRtQPU5X0D9Gob7wWKn0h4QWy7A==
-  dependencies:
-    bootstrap "^3.3"
-    jquery "^3.5.1"
-    moment "^2.10"
-    moment-timezone "^0.4.0"
-
-errno@^0.1.1:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
-  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
-  dependencies:
-    prr "~1.0.1"
-
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -1626,42 +1678,11 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.18.0-next.2:
-  version "1.18.3"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.3.tgz#25c4c3380a27aa203c44b2b685bba94da31b63e0"
-  integrity sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==
-  dependencies:
-    call-bind "^1.0.2"
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    get-intrinsic "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.2"
-    is-callable "^1.2.3"
-    is-negative-zero "^2.0.1"
-    is-regex "^1.1.3"
-    is-string "^1.0.6"
-    object-inspect "^1.10.3"
-    object-keys "^1.1.1"
-    object.assign "^4.1.2"
-    string.prototype.trimend "^1.0.4"
-    string.prototype.trimstart "^1.0.4"
-    unbox-primitive "^1.0.1"
-
 es-module-lexer@^0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.7.1.tgz#c2c8e0f46f2df06274cdaf0dd3f3b33e0a0b267d"
   integrity sha512-MgtWFl5No+4S3TmhDmCz2ObFGm6lEpTnzbQi+Dd+pw4mlTIZTmM2iAs5gRlmx5zS9luzobCSBSI90JM/1/JgOw==
 
-es-to-primitive@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
-  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
-  dependencies:
-    is-callable "^1.1.4"
-    is-date-object "^1.0.1"
-    is-symbol "^1.0.2"
-
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -1722,6 +1743,14 @@ execa@^5.0.0:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
+extend-shallow@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
+  dependencies:
+    assign-symbols "^1.0.0"
+    is-extendable "^1.0.1"
+
 fast-deep-equal@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -1745,6 +1774,13 @@ file-loader@^6.1.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 find-cache-dir@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880"
@@ -1772,6 +1808,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -1782,7 +1823,7 @@ gensync@^1.0.0-beta.2:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
+get-intrinsic@^1.0.2:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
   integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
@@ -1796,6 +1837,13 @@ get-stream@^6.0.0:
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
 
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob-to-regexp@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
@@ -1823,10 +1871,15 @@ graceful-fs@^4.1.2, graceful-fs@^4.2.4:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
-has-bigints@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
-  integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
+gulp-rtlcss@^1.4.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/gulp-rtlcss/-/gulp-rtlcss-1.4.2.tgz#f1c0b8ad579b1ca15e861126e9fd0d703b32ef0a"
+  integrity sha512-wd807z/xq4XKtSwgrEetbx/aPoI5gV0yWV2rNqEBRwe2cJvNKLDsYR9A968c3gZtaKRMGAue5g3pHn40R+GWSA==
+  dependencies:
+    plugin-error "^1.0.1"
+    rtlcss "^2.4.0"
+    through2 "^2.0.5"
+    vinyl-sourcemaps-apply "^0.2.1"
 
 has-flag@^3.0.0:
   version "3.0.0"
@@ -1838,7 +1891,7 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-has-symbols@^1.0.1, has-symbols@^1.0.2:
+has-symbols@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
   integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
@@ -1855,11 +1908,6 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
-hosted-git-info@^2.1.4:
-  version "2.8.9"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
-  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
-
 hsl-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
@@ -1875,23 +1923,11 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
-iconv-lite@^0.4.4:
-  version "0.4.24"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
-  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
-  dependencies:
-    safer-buffer ">= 2.1.2 < 3"
-
 icss-utils@^5.0.0, icss-utils@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
   integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
 
-image-size@~0.5.0:
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
-  integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
-
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -1916,7 +1952,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2:
+inherits@2, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -1936,22 +1972,12 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
-is-bigint@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.2.tgz#ffb381442503235ad245ea89e45b3dbff040ee5a"
-  integrity sha512-0JV5+SOCQkIdzjBK9buARcV804Ddu7A0Qet6sHi3FimE9ne6m4BGQZfRn+NZiXbBk4F4XmHfDZIipLj9pX8dSA==
-
-is-boolean-object@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.1.tgz#3c0878f035cb821228d350d2e1e36719716a3de8"
-  integrity sha512-bXdQWkECBUIAcCkeH1unwJLIpZYaa5VvuygSyS/c2lf719mTKZDU5UdDRlpd01UjADgmW8RfqaP+mRaVPdr/Ng==
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
   dependencies:
-    call-bind "^1.0.2"
-
-is-callable@^1.1.4, is-callable@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.3.tgz#8b1e0500b73a1d76c70487636f368e519de8db8e"
-  integrity sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==
+    binary-extensions "^2.0.0"
 
 is-color-stop@^1.1.0:
   version "1.1.0"
@@ -1966,26 +1992,35 @@ is-color-stop@^1.1.0:
     rgba-regex "^1.0.0"
 
 is-core-module@^2.2.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.4.0.tgz#8e9fc8e15027b011418026e98f0e6f4d86305cc1"
-  integrity sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.5.0.tgz#f754843617c70bfd29b7bd87327400cda5c18491"
+  integrity sha512-TXCMSDsEHMEEZ6eCA8rwRDbLu55MRGmrctljsBX/2v1d9/GzqHOxW5c5oPSgrUt2vBFXebu9rGqckXGPWOlYpg==
   dependencies:
     has "^1.0.3"
 
-is-date-object@^1.0.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.4.tgz#550cfcc03afada05eea3dd30981c7b09551f73e5"
-  integrity sha512-/b4ZVsG7Z5XVtIxs/h9W8nvfLgSAyKYdtGWQLbqy6jA1icmgjf8WCoTKgeS4wy5tYaPePouzFMANbnj94c2Z+A==
+is-extendable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
+  dependencies:
+    is-plain-object "^2.0.4"
 
-is-negative-zero@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.1.tgz#3de746c18dda2319241a53675908d8f766f11c24"
-  integrity sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
-is-number-object@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.5.tgz#6edfaeed7950cff19afedce9fbfca9ee6dd289eb"
-  integrity sha512-RU0lI/n95pMoUKu9v1BZP5MBcZuNSVJkMkAG2dJqC4z2GlkGUNeH68SuHuBKBD/XFe+LHZ+f9BKkLET60Niedw==
+is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
+  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
 is-plain-object@^2.0.4:
   version "2.0.4"
@@ -1994,14 +2029,6 @@ is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
-is-regex@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.3.tgz#d029f9aff6448b93ebbe3f33dac71511fdcbef9f"
-  integrity sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==
-  dependencies:
-    call-bind "^1.0.2"
-    has-symbols "^1.0.2"
-
 is-resolvable@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
@@ -2012,22 +2039,10 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
   integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
 
-is-string@^1.0.5, is-string@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.6.tgz#3fe5d5992fb0d93404f32584d4b0179a71b54a5f"
-  integrity sha512-2gdzbKUuqtQ3lYNrUTQYoClPhm7oQu4UdpSZMp1/DGgkHBT8E2Z1l0yMdb6D4zNAxwDiMv8MdulKROJGNl0Q0w==
-
-is-symbol@^1.0.2, is-symbol@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
-  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
-  dependencies:
-    has-symbols "^1.0.2"
-
-is-what@^3.12.0:
-  version "3.14.1"
-  resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
-  integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
+isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
 isexe@^2.0.0:
   version "2.0.0"
@@ -2039,6 +2054,15 @@ isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+jest-worker@^26.3.0:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
+  integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
+
 jest-worker@^27.0.2:
   version "27.0.6"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.0.6.tgz#a5fdb1e14ad34eb228cfe162d9f729cdbfa28aed"
@@ -2073,7 +2097,7 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
 
-json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
+json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
@@ -2112,45 +2136,11 @@ klona@^2.0.4:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
   integrity sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==
 
-less-loader@^9.0.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-9.1.0.tgz#5568a30637edadfebcb576c648ae8336b04b11e7"
-  integrity sha512-/BPur/W4NaDBvw4A7pTGMtKpAsAnexeJdw2VWRVzWEQCNX2FboFa1GUIFwkzBFwX5x/q7M/Srtng96QnhV5wIA==
-  dependencies:
-    klona "^2.0.4"
-
-less@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/less/-/less-4.1.1.tgz#15bf253a9939791dc690888c3ff424f3e6c7edba"
-  integrity sha512-w09o8tZFPThBscl5d0Ggp3RcrKIouBoQscnOMgFH3n5V3kN/CXGHNfCkRPtxJk6nKryDXaV9aHLK55RXuH4sAw==
-  dependencies:
-    copy-anything "^2.0.1"
-    parse-node-version "^1.0.1"
-    tslib "^1.10.0"
-  optionalDependencies:
-    errno "^0.1.1"
-    graceful-fs "^4.1.2"
-    image-size "~0.5.0"
-    make-dir "^2.1.0"
-    mime "^1.4.1"
-    needle "^2.5.2"
-    source-map "~0.6.0"
-
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
-load-json-file@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
-  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
-  dependencies:
-    graceful-fs "^4.1.2"
-    parse-json "^4.0.0"
-    pify "^3.0.0"
-    strip-bom "^3.0.0"
-
 loader-runner@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384"
@@ -2203,14 +2193,6 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-make-dir@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
-  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
-  dependencies:
-    pify "^4.0.1"
-    semver "^5.6.0"
-
 make-dir@^3.0.2, make-dir@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
@@ -2223,11 +2205,6 @@ mdn-data@2.0.14:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
   integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
 
-memorystream@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
-  integrity sha1-htcJCzDORV1j+64S3aUaR93K+bI=
-
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -2245,11 +2222,6 @@ mime-types@^2.1.27:
   dependencies:
     mime-db "1.48.0"
 
-mime@^1.4.1:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
-  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
-
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@@ -2276,19 +2248,21 @@ minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-mkdirp@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
-  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
+mkdirp@^0.5.1:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
 
-moment-timezone@^0.4.0, moment-timezone@^0.5:
+moment-timezone@^0.5.31:
   version "0.5.33"
   resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.33.tgz#b252fd6bb57f341c9b59a5ab61a8e51a73bbd22c"
   integrity sha512-PTc2vcT8K9J5/9rDEPe5czSIKgLoGsH8UNpA4qZTVw0Vd/Uz19geE9abbIOQKaAQFcnQ3v5YEXrbSc5BpshH+w==
   dependencies:
     moment ">= 2.9.0"
 
-"moment@>= 2.9.0", moment@^2.10, moment@^2.10.2, moment@^2.27.0:
+"moment@>= 2.9.0", moment@^2.10.2, moment@^2.27.0, moment@^2.29.0:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
@@ -2298,49 +2272,25 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@^2.1.1:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
-  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
-
 nanoid@^3.1.23:
   version "3.1.23"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
   integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
 
-needle@^2.5.2:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.8.0.tgz#1c8ef9c1a2c29dcc1e83d73809d7bc681c80a048"
-  integrity sha512-ZTq6WYkN/3782H1393me3utVYdq2XyqNUFBsprEE3VMAT0+hP/cItpnITpqsY6ep2yeFE4Tqtqwc74VqUlUYtw==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 neo-async@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-nice-try@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
-  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
-
 node-releases@^1.1.71:
   version "1.1.73"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.73.tgz#dd4e81ddd5277ff846b80b52bb40c49edf7a7b20"
   integrity sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==
 
-normalize-package-data@^2.3.2:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
-  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
-  dependencies:
-    hosted-git-info "^2.1.4"
-    resolve "^1.10.0"
-    semver "2 || 3 || 4 || 5"
-    validate-npm-package-license "^3.0.1"
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
 normalize-range@^0.1.2:
   version "0.1.2"
@@ -2352,21 +2302,6 @@ normalize-url@^6.0.1:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
-npm-run-all@^4.1.3:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba"
-  integrity sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    chalk "^2.4.1"
-    cross-spawn "^6.0.5"
-    memorystream "^0.3.1"
-    minimatch "^3.0.4"
-    pidtree "^0.3.0"
-    read-pkg "^3.0.0"
-    shell-quote "^1.6.1"
-    string.prototype.padend "^3.0.0"
-
 npm-run-path@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
@@ -2381,17 +2316,12 @@ nth-check@^2.0.0:
   dependencies:
     boolbase "^1.0.0"
 
-object-inspect@^1.10.3:
-  version "1.10.3"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.10.3.tgz#c2aa7d2d09f50c99375704f7a0adf24c5782d369"
-  integrity sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==
-
 object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object.assign@^4.1.0, object.assign@^4.1.2:
+object.assign@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
   integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
@@ -2448,14 +2378,6 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
-parse-json@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
-  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
-  dependencies:
-    error-ex "^1.3.1"
-    json-parse-better-errors "^1.0.1"
-
 parse-json@^5.0.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
@@ -2466,11 +2388,6 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
-parse-node-version@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
-  integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
-
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -2481,11 +2398,6 @@ path-is-absolute@^1.0.0:
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
   integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
 
-path-key@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
-  integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
-
 path-key@^3.0.0, path-key@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
@@ -2496,32 +2408,15 @@ path-parse@^1.0.6:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
-path-type@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
-  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
-  dependencies:
-    pify "^3.0.0"
-
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-pidtree@^0.3.0:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a"
-  integrity sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==
-
-pify@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
-  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
-
-pify@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
-  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
+  integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
 
 pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   version "4.2.0"
@@ -2530,6 +2425,21 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+plugin-error@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-1.0.1.tgz#77016bd8919d0ac377fdcdd0322328953ca5781c"
+  integrity sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==
+  dependencies:
+    ansi-colors "^1.0.1"
+    arr-diff "^4.0.0"
+    arr-union "^3.1.0"
+    extend-shallow "^3.0.2"
+
+popper.js@^1.16.1:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
 postcss-calc@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-8.0.0.tgz#a05b87aacd132740a5db09462a3612453e5df90a"
@@ -2575,7 +2485,7 @@ postcss-discard-overridden@^5.0.1:
   resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz#454b41f707300b98109a75005ca4ab0ff2743ac6"
   integrity sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==
 
-postcss-loader@^5.3.0:
+postcss-loader@^5.2.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-5.3.0.tgz#1657f869e48d4fdb018a40771c235e499ee26244"
   integrity sha512-/+Z1RAmssdiSLgIZwnJHwBMnlABPgF7giYzTN2NOfr9D21IJZ4mQC1R2miwp80zno9M4zMD/umGI8cR+2EL5zw==
@@ -2788,7 +2698,16 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
-postcss@^8.2.15, postcss@^8.3.0, postcss@^8.3.5:
+postcss@^6.0.23:
+  version "6.0.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
+postcss@^8.2.15, postcss@^8.2.8, postcss@^8.2.9:
   version "8.3.5"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.5.tgz#982216b113412bc20a86289e91eb994952a5b709"
   integrity sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==
@@ -2797,10 +2716,10 @@ postcss@^8.2.15, postcss@^8.3.0, postcss@^8.3.5:
     nanoid "^3.1.23"
     source-map-js "^0.6.2"
 
-prr@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
-  integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
 punycode@^2.1.0:
   version "2.1.1"
@@ -2814,14 +2733,25 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
-read-pkg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
-  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
+readable-stream@~2.3.6:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
+  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
   dependencies:
-    load-json-file "^4.0.0"
-    normalize-package-data "^2.3.2"
-    path-type "^3.0.0"
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
 
 rechoir@^0.7.0:
   version "0.7.0"
@@ -2895,7 +2825,7 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
-resolve@^1.10.0, resolve@^1.14.2, resolve@^1.9.0:
+resolve@^1.14.2, resolve@^1.9.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -2920,25 +2850,41 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
+rtlcss@^2.4.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/rtlcss/-/rtlcss-2.6.2.tgz#55b572b52c70015ba6e03d497e5c5cb8137104b4"
+  integrity sha512-06LFAr+GAPo+BvaynsXRfoYTJvSaWRyOhURCQ7aeI1MKph9meM222F+Zkt3bDamyHHJuGi3VPtiRkpyswmQbGA==
+  dependencies:
+    "@choojs/findup" "^0.2.1"
+    chalk "^2.4.2"
+    mkdirp "^0.5.1"
+    postcss "^6.0.23"
+    strip-json-comments "^2.0.0"
+
 safe-buffer@^5.1.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-safe-buffer@~5.1.1:
+safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-"safer-buffer@>= 2.1.2 < 3":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
-  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+sass-loader@^12.0.0:
+  version "12.1.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.1.0.tgz#b73324622231009da6fba61ab76013256380d201"
+  integrity sha512-FVJZ9kxVRYNZTIe2xhw93n3xJNYZADr+q69/s98l9nTCrWASo+DR2Ot0s5xTKQDDEosUkatsGeHxcH4QBp5bSg==
+  dependencies:
+    klona "^2.0.4"
+    neo-async "^2.6.2"
 
-sax@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
-  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
+sass@^1.35.1:
+  version "1.35.2"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.35.2.tgz#b732314fcdaf7ef8d0f1698698adc378043cb821"
+  integrity sha512-jhO5KAR+AMxCEwIH3v+4zbB2WB0z67V1X0jbapfVwQQdjHZUGUyukpnoM6+iCMfsIUC016w9OPKQ5jrNOS9uXw==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
 
 schema-utils@^2.6.5:
   version "2.7.1"
@@ -2949,7 +2895,7 @@ schema-utils@^2.6.5:
     ajv "^6.12.4"
     ajv-keywords "^3.5.2"
 
-schema-utils@^3.0.0:
+schema-utils@^3.0.0, schema-utils@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.0.tgz#95986eb604f66daadeed56e379bfe7a7f963cdb9"
   integrity sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==
@@ -2958,21 +2904,19 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-select2-bootstrap-theme@0.1.0-beta.10:
-  version "0.1.0-beta.10"
-  resolved "https://registry.yarnpkg.com/select2-bootstrap-theme/-/select2-bootstrap-theme-0.1.0-beta.10.tgz#b9426ecfc03bf4a235e76a132377574310469ac0"
-  integrity sha1-uUJuz8A79KI152oTI3dXQxBGmsA=
+select2-bootstrap-5-theme@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/select2-bootstrap-5-theme/-/select2-bootstrap-5-theme-1.1.1.tgz#dcac51bb3b5121babb5e79bbf18441def7df5415"
+  integrity sha512-u1uLa0dwpejP6Af9tzF7056gmxQJZHN/THaBmcVFrOaZTOAIY0f4oJvN0BgqOMKRYLjAZgmS+irDN3ilPwJfIg==
+  dependencies:
+    bootstrap "5.0.0-beta2"
+    gulp-rtlcss "^1.4.1"
 
 select2@^4.0.13:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/select2/-/select2-4.0.13.tgz#0dbe377df3f96167c4c1626033e924372d8ef44d"
   integrity sha512-1JeB87s6oN/TDxQQYCvS5EFoQyvV6eYMZZ0AeA4tdFDYWN3BAGZ8npr17UBFddU0lgAt3H0yjX3X6/ekOj1yjw==
 
-"semver@2 || 3 || 4 || 5", semver@^5.5.0, semver@^5.6.0:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
-  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
-
 semver@7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
@@ -2990,6 +2934,13 @@ semver@^7.3.4, semver@^7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
+serialize-javascript@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-5.0.1.tgz#7886ec848049a462467a97d3d918ebb2aaf934f4"
+  integrity sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==
+  dependencies:
+    randombytes "^2.1.0"
+
 serialize-javascript@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.0.tgz#efae5d88f45d7924141da8b5c3a7a7e663fefeb8"
@@ -3004,13 +2955,6 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-shebang-command@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
-  integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
-  dependencies:
-    shebang-regex "^1.0.0"
-
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -3018,21 +2962,11 @@ shebang-command@^2.0.0:
   dependencies:
     shebang-regex "^3.0.0"
 
-shebang-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
-  integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
-
 shebang-regex@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-shell-quote@^1.6.1:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
-  integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
-
 signal-exit@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -3056,12 +2990,12 @@ source-map-support@~0.5.19:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map@^0.5.0:
+source-map@^0.5.0, source-map@^0.5.1:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -3071,72 +3005,28 @@ source-map@~0.7.2:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
-spdx-correct@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
-  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
-  dependencies:
-    spdx-expression-parse "^3.0.0"
-    spdx-license-ids "^3.0.0"
-
-spdx-exceptions@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
-  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
-
-spdx-expression-parse@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
-  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
-  dependencies:
-    spdx-exceptions "^2.1.0"
-    spdx-license-ids "^3.0.0"
-
-spdx-license-ids@^3.0.0:
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.9.tgz#8a595135def9592bda69709474f1cbeea7c2467f"
-  integrity sha512-Ki212dKK4ogX+xDo4CtOZBVIwhsKBEfsEEcwmJfLQzirgc2jIWdzg40Unxz/HzEUqM1WFzVlQSMF9kZZ2HboLQ==
-
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
   integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
 
-string.prototype.padend@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.1.2.tgz#6858ca4f35c5268ebd5e8615e1327d55f59ee311"
-  integrity sha512-/AQFLdYvePENU3W5rgurfWSMU6n+Ww8n/3cUt7E+vPBB/D7YDG8x+qjoFs4M/alR2bW7Qg6xMjVwWUOvuQ0XpQ==
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.2"
-
-string.prototype.trimend@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz#e75ae90c2942c63504686c18b287b4a0b1a45f80"
-  integrity sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
-string.prototype.trimstart@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz#b36399af4ab2999b4c9c648bd7a3fb2bb26feeed"
-  integrity sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
-strip-bom@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
-  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
+    safe-buffer "~5.1.0"
 
 strip-final-newline@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
+strip-json-comments@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
+
 style-loader@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-2.0.0.tgz#9669602fd4690740eaaec137799a03addbbc393c"
@@ -3153,14 +3043,14 @@ stylehacks@^5.0.1:
     browserslist "^4.16.0"
     postcss-selector-parser "^6.0.4"
 
-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^7.1.0:
+supports-color@^7.0.0, supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
   integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
@@ -3192,7 +3082,18 @@ tapable@^2.1.1, tapable@^2.2.0:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.0.tgz#5c373d281d9c672848213d0e037d1c4165ab426b"
   integrity sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==
 
-terser-webpack-plugin@^5.1.2, terser-webpack-plugin@^5.1.3:
+tempusdominus-bootstrap-4@^5.39.0:
+  version "5.39.0"
+  resolved "https://registry.yarnpkg.com/tempusdominus-bootstrap-4/-/tempusdominus-bootstrap-4-5.39.0.tgz#f13dcfec6c41b37c5fe509f08bd513590c64411f"
+  integrity sha512-vYnkmQYQq4+A51WyRc/6e03eM0BHDoPaxd556K1pd4Nhr0eGeB3+Mi9b+3CDx4189fg3gQlrsKzgJiHPRwSX3Q==
+  dependencies:
+    bootstrap "^4.5.2"
+    jquery "^3.5.1"
+    moment "^2.29.0"
+    moment-timezone "^0.5.31"
+    popper.js "^1.16.1"
+
+terser-webpack-plugin@^5.1.1, terser-webpack-plugin@^5.1.3:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.1.4.tgz#c369cf8a47aa9922bd0d8a94fe3d3da11a7678a1"
   integrity sha512-C2WkFwstHDhVEmsmlCxrXUtVklS+Ir1A7twrYzrDrQQOIMOaVAYykaoo/Aq1K0QRkMoY2hhvDQY1cm4jnIMFwA==
@@ -3213,6 +3114,14 @@ terser@^5.7.0:
     source-map "~0.7.2"
     source-map-support "~0.5.19"
 
+through2@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
+  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
+  dependencies:
+    readable-stream "~2.3.6"
+    xtend "~4.0.1"
+
 timsort@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
@@ -3223,20 +3132,12 @@ to-fast-properties@^2.0.0:
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
-tslib@^1.10.0:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
-  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
-
-unbox-primitive@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
-  integrity sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
   dependencies:
-    function-bind "^1.1.1"
-    has-bigints "^1.0.1"
-    has-symbols "^1.0.2"
-    which-boxed-primitive "^1.0.2"
+    is-number "^7.0.0"
 
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
@@ -3273,7 +3174,7 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-util-deprecate@^1.0.2:
+util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
@@ -3283,19 +3184,18 @@ v8-compile-cache@^2.2.0:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
   integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
 
-validate-npm-package-license@^3.0.1:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
-  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
-  dependencies:
-    spdx-correct "^3.0.0"
-    spdx-expression-parse "^3.0.0"
-
 vendors@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
   integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
 
+vinyl-sourcemaps-apply@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz#ab6549d61d172c2b1b87be5c508d239c8ef87705"
+  integrity sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=
+  dependencies:
+    source-map "^0.5.1"
+
 watchpack@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.2.0.tgz#47d78f5415fe550ecd740f99fe2882323a58b1ce"
@@ -3304,7 +3204,7 @@ watchpack@^2.2.0:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
 
-webpack-cli@^4.7.0:
+webpack-cli@^4.6.0:
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.7.2.tgz#a718db600de6d3906a4357e059ae584a89f4c1a5"
   integrity sha512-mEoLmnmOIZQNiRl0ebnjzQ74Hk0iKS5SiEEnpq3dRezoyR3yPaeQZCMCe+db4524pj1Pd5ghZXjT41KLzIhSLw==
@@ -3347,10 +3247,10 @@ webpack-sources@^2.3.0:
     source-list-map "^2.0.1"
     source-map "^0.6.1"
 
-webpack@^5.37.1:
-  version "5.44.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.44.0.tgz#97b13a02bd79fb71ac6301ce697920660fa214a1"
-  integrity sha512-I1S1w4QLoKmH19pX6YhYN0NiSXaWY8Ou00oA+aMcr9IUGeF5azns+IKBkfoAAG9Bu5zOIzZt/mN35OffBya8AQ==
+webpack@^5.33.2:
+  version "5.45.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.45.1.tgz#d78dcbeda18a872dc62b0455d3ed3dcfd1c886bb"
+  integrity sha512-68VT2ZgG9EHs6h6UxfV2SEYewA9BA3SOLSnC2NEbJJiEwbAiueDL033R1xX0jzjmXvMh0oSeKnKgbO2bDXIEyQ==
   dependencies:
     "@types/eslint-scope" "^3.7.0"
     "@types/estree" "^0.0.50"
@@ -3370,30 +3270,12 @@ webpack@^5.37.1:
     loader-runner "^4.2.0"
     mime-types "^2.1.27"
     neo-async "^2.6.2"
-    schema-utils "^3.0.0"
+    schema-utils "^3.1.0"
     tapable "^2.1.1"
     terser-webpack-plugin "^5.1.3"
     watchpack "^2.2.0"
     webpack-sources "^2.3.0"
 
-which-boxed-primitive@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
-  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
-  dependencies:
-    is-bigint "^1.0.1"
-    is-boolean-object "^1.1.0"
-    is-number-object "^1.0.4"
-    is-string "^1.0.5"
-    is-symbol "^1.0.3"
-
-which@^1.2.9:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
-  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
-  dependencies:
-    isexe "^2.0.0"
-
 which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
@@ -3411,6 +3293,11 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
+xtend@~4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"