diff --git a/README.md b/README.md
index ecd695b8f..4192cb67c 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,10 @@
 <p align="center"><img src="https://raw.githubusercontent.com/opensourcepos/opensourcepos/master/branding/emblem.svg" alt="Open Source Point of Sale Logo" width="auto" height="200"></p>
 <h3 align="center">Open Source Point of Sale</h3>
 
+## ☢️ Bootstrap 5 conversion WIP
+
+This is a heavily under-construction build converting OSPOS from Bootstrap 3 to Bootstrap 5. Please do not use!
+
 <p align="center">
   <a href="#-introduction">Introduction</a> · <a href="#-live-demo">Demo</a> · <a href="#-installation">Installation</a> · 
   <a href="#-contributing">Contributing</a> · <a href="#-reporting-bugs">Bugs</a> · <a href="#-faq">FAQ</a> · 
diff --git a/app/Controllers/Config.php b/app/Controllers/Config.php
index 0619190f8..1fa6650ff 100644
--- a/app/Controllers/Config.php
+++ b/app/Controllers/Config.php
@@ -371,8 +371,6 @@ class Config extends Secure_Controller
     public function postSaveGeneral(): ResponseInterface
     {
         $batchSaveData = [
-            'theme'                             => $this->request->getPost('theme'),
-            'login_form'                        => $this->request->getPost('login_form'),
             'default_sales_discount_type'       => $this->request->getPost('default_sales_discount_type') != null,
             'default_sales_discount'            => parse_decimals($this->request->getPost('default_sales_discount')),
             'default_receivings_discount_type'  => $this->request->getPost('default_receivings_discount_type') != null,
@@ -380,8 +378,6 @@ class Config extends Secure_Controller
             'enforce_privacy'                   => $this->request->getPost('enforce_privacy') != null,
             'receiving_calculate_average_price' => $this->request->getPost('receiving_calculate_average_price') != null,
             'lines_per_page'                    => $this->request->getPost('lines_per_page', FILTER_SANITIZE_NUMBER_INT),
-            'notify_horizontal_position'        => $this->request->getPost('notify_horizontal_position'),
-            'notify_vertical_position'          => $this->request->getPost('notify_vertical_position'),
             'image_max_width'                   => $this->request->getPost('image_max_width', FILTER_SANITIZE_NUMBER_INT),
             'image_max_height'                  => $this->request->getPost('image_max_height', FILTER_SANITIZE_NUMBER_INT),
             'image_max_size'                    => $this->request->getPost('image_max_size', FILTER_SANITIZE_NUMBER_INT),
@@ -425,6 +421,26 @@ class Config extends Secure_Controller
         return $this->response->setJSON(['success' => $success, 'message' => lang('Config.saved_' . ($success ? '' : 'un') . 'successfully')]);
     }
 
+    /**
+     * Saves Appearance configuration. Used in app/Views/configs/appearance_config.php
+     */
+    public function postSaveAppearance(): ResponseInterface
+    {
+        $batch_save_data = [
+            'theme'                      => $this->request->getPost('theme'),
+            'login_form'                 => $this->request->getPost('login_form'),
+            'notify_horizontal_position' => $this->request->getPost('notify_horizontal_position'),
+            'notify_vertical_position'   => $this->request->getPost('notify_vertical_position'),
+            'color_mode'                 => $this->request->getPost('color_mode'),
+            'config_menu_position'       => $this->request->getPost('config_menu_position'),
+            'responsive_design'          => $this->request->getPost('responsive_design') != null
+        ];
+
+        $success = $this->appconfig->batch_save($batch_save_data);
+
+        return $this->response->setJSON(['success' => $success, 'message' => lang('Config.saved_' . ($success ? '' : 'un') . 'successfully')]);
+    }
+
     /**
      * Checks a number against the currently selected locale. Used in app/Views/configs/locale_config.php
      *
@@ -486,26 +502,25 @@ class Config extends Secure_Controller
         $exploded = explode(":", $this->request->getPost('language'));
         $currency_symbol = $this->request->getPost('currency_symbol');
         $batch_save_data = [
-            'currency_symbol'            => htmlspecialchars($currency_symbol ?? ''),
-            'currency_code'              => $this->request->getPost('currency_code'),
-            'language_code'              => $exploded[0],
-            'language'                   => $exploded[1],
-            'timezone'                   => $this->request->getPost('timezone'),
-            'dateformat'                 => $this->request->getPost('dateformat'),
-            'timeformat'                 => $this->request->getPost('timeformat'),
-            'thousands_separator'        => $this->request->getPost('thousands_separator') != null,
-            'number_locale'              => $this->request->getPost('number_locale'),
-            'currency_decimals'          => $this->request->getPost('currency_decimals', FILTER_SANITIZE_NUMBER_INT),
-            'tax_decimals'               => $this->request->getPost('tax_decimals', FILTER_SANITIZE_NUMBER_INT),
-            'quantity_decimals'          => $this->request->getPost('quantity_decimals', FILTER_SANITIZE_NUMBER_INT),
-            'country_codes'              => htmlspecialchars($this->request->getPost('country_codes')),
-            'payment_options_order'      => $this->request->getPost('payment_options_order'),
-            'payment_reference_code_min' => $this->request->getPost('payment_reference_code_min', FILTER_SANITIZE_NUMBER_INT),
-            'payment_reference_code_max' => $this->request->getPost('payment_reference_code_max', FILTER_SANITIZE_NUMBER_INT),
-            'date_or_time_format'        => $this->request->getPost('date_or_time_format') != null,
-            'cash_decimals'              => $this->request->getPost('cash_decimals', FILTER_SANITIZE_NUMBER_INT),
-            'cash_rounding_code'         => $this->request->getPost('cash_rounding_code'),
-            'financial_year'             => $this->request->getPost('financial_year', FILTER_SANITIZE_NUMBER_INT)
+            'currency_symbol'       => htmlspecialchars($currency_symbol ?? ''),
+            'currency_code'         => $this->request->getPost('currency_code'),
+            'language_code'         => $exploded[0],
+            'language'              => $exploded[1],
+            'rtl_language'          => $this->request->getPost('rtl_language') != null,
+            'timezone'              => $this->request->getPost('timezone'),
+            'dateformat'            => $this->request->getPost('dateformat'),
+            'timeformat'            => $this->request->getPost('timeformat'),
+            'thousands_separator'   => $this->request->getPost('thousands_separator') != null,
+            'number_locale'         => $this->request->getPost('number_locale'),
+            'currency_decimals'     => $this->request->getPost('currency_decimals', FILTER_SANITIZE_NUMBER_INT),
+            'tax_decimals'          => $this->request->getPost('tax_decimals', FILTER_SANITIZE_NUMBER_INT),
+            'quantity_decimals'     => $this->request->getPost('quantity_decimals', FILTER_SANITIZE_NUMBER_INT),
+            'country_codes'         => htmlspecialchars($this->request->getPost('country_codes')),
+            'payment_options_order' => $this->request->getPost('payment_options_order'),
+            'date_or_time_format'   => $this->request->getPost('date_or_time_format') != null,
+            'cash_decimals'         => $this->request->getPost('cash_decimals', FILTER_SANITIZE_NUMBER_INT),
+            'cash_rounding_code'    => $this->request->getPost('cash_rounding_code'),
+            'financial_year'        => $this->request->getPost('financial_year', FILTER_SANITIZE_NUMBER_INT)
         ];
 
         $success = $this->appconfig->batch_save($batch_save_data);
diff --git a/app/Controllers/Reports.php b/app/Controllers/Reports.php
index 0c9a884ca..b4ab3b67c 100644
--- a/app/Controllers/Reports.php
+++ b/app/Controllers/Reports.php
@@ -1312,7 +1312,7 @@ class Reports extends Secure_Controller
                     'sales/edit/' . $row['sale_id'],
                     '<i class="bi bi-pencil-square"></i>',
                     [
-                        'class'           => 'modal-dlg print_hide',
+                        'class'           => 'modal-launch print_hide',
                         $button_key       => $button_label,
                         'data-btn-submit' => lang('Common.submit'),
                         'title'           => lang('Sales.update')
@@ -1439,7 +1439,7 @@ class Reports extends Secure_Controller
                     'sales/edit/' . $row['sale_id'],
                     '<i class="bi bi-pencil-square"></i>',
                     [
-                        'class'           => 'modal-dlg print_hide',
+                        'class'           => 'modal-launch print_hide',
                         $button_key       => $button_label,
                         'data-btn-submit' => lang('Common.submit'),
                         'title'           => lang('Sales.update')
@@ -1571,7 +1571,7 @@ class Reports extends Secure_Controller
                     'sales/edit/' . $row['sale_id'],
                     '<i class="bi bi-pencil-square"></i>',
                     [
-                        'class'           => 'modal-dlg print_hide',
+                        'class'           => 'modal-launch print_hide',
                         $button_key       => $button_label,
                         'data-btn-submit' => lang('Common.submit'),
                         'title'           => lang('Sales.update')
@@ -1659,7 +1659,7 @@ class Reports extends Secure_Controller
                 'sales/edit/' . $report_data['sale_id'],
                 '<i class="bi bi-pencil-square"></i>',
                 [
-                    'class'           => 'modal-dlg print_hide',
+                    'class'           => 'modal-launch print_hide',
                     $button_key       => $button_label,
                     'data-btn-submit' => lang('Common.submit'),
                     'title'           => lang('Sales.update')
@@ -1835,7 +1835,7 @@ class Reports extends Secure_Controller
                     'sales/edit/' . $row['sale_id'],
                     '<i class="bi bi-pencil-square"></i>',
                     [
-                        'class'           => 'modal-dlg print_hide',
+                        'class'           => 'modal-launch print_hide',
                         $button_key       => $button_label,
                         'data-btn-submit' => lang('Common.submit'),
                         'title'           => lang('Sales.update')
@@ -1915,7 +1915,7 @@ class Reports extends Secure_Controller
                 'receivings/edit/' . $report_data['receiving_id'],
                 '<i class="bi bi-pencil-square"></i>',
                 [
-                    'class'           => 'modal-dlg print_hide',
+                    'class'           => 'modal-launch print_hide',
                     'data-btn-submit' => lang('Common.submit'),
                     'data-btn-delete' => lang('Common.delete'),
                     'title'           => lang('Receivings.update')
@@ -1975,7 +1975,7 @@ class Reports extends Secure_Controller
                     'receivings/edit/' . $row['receiving_id'],
                     '<i class="bi bi-pencil-square"></i>',
                     [
-                        'class'           => 'modal-dlg print_hide',
+                        'class'           => 'modal-launch print_hide',
                         'data-btn-delete' => lang('Common.delete'),
                         'data-btn-submit' => lang('Common.submit'),
                         'title'           => lang('Receivings.update')
diff --git a/app/Database/Migrations/sqlscripts/initial_schema.sql b/app/Database/Migrations/sqlscripts/initial_schema.sql
index 0823793a5..363757edc 100644
--- a/app/Database/Migrations/sqlscripts/initial_schema.sql
+++ b/app/Database/Migrations/sqlscripts/initial_schema.sql
@@ -79,10 +79,14 @@ INSERT INTO `ospos_app_config` (`key`, `value`) VALUES
     ('smtp_timeout', '5'),
     ('smtp_crypto', 'ssl'),
     ('receipt_template', 'receipt_default'),
-    ('theme', 'flatly'),
+    ('theme', 'bootstrap'),
     ('statistics', '1'),
     ('language', 'english'),
-    ('language_code', 'en');
+    ('language_code', 'en'),
+    ('rtl_language', '0'),
+    ('color_mode', 'light'),
+    ('config_menu_position', 'start'),
+    ('responsive_design', '1');
 
 
 -- --------------------------------------------------------
diff --git a/app/Helpers/tabular_helper.php b/app/Helpers/tabular_helper.php
index 3aa23fafd..068e6ee4b 100644
--- a/app/Helpers/tabular_helper.php
+++ b/app/Helpers/tabular_helper.php
@@ -132,7 +132,7 @@ function get_sale_data_row(object $sale): array
         "$controller/edit/$sale->sale_id",
         '<i class="bi bi-pencil-square"></i>',
         [
-            'class'           => 'modal-dlg print_hide',
+            'class'           => 'modal-launch print_hide',
             'data-btn-delete' => lang('Common.delete'),
             'data-btn-submit' => lang('Common.submit'),
             'title'           => lang(ucfirst($controller) . ".update")
@@ -234,7 +234,7 @@ function get_person_data_row(object $person): array
                 "Messages/view/$person->person_id",
                 '<i class="bi bi-telephone"></i>',
                 [
-                    'class'           => 'modal-dlg',
+                    'class'           => 'modal-launch',
                     'data-btn-submit' => lang('Common.submit'),
                     'title'           => lang('Messages.sms_send')
                 ]
@@ -243,7 +243,7 @@ function get_person_data_row(object $person): array
             "$controller/view/$person->person_id",
             '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . '.update')    // TODO: String interpolation
             ]
@@ -301,7 +301,7 @@ function get_customer_data_row(object $person, object $stats): array
                 "Messages/view/$person->person_id",
                 '<i class="bi bi-telephone"></i>',
                 [
-                    'class'           => 'modal-dlg',
+                    'class'           => 'modal-launch',
                     'data-btn-submit' => lang('Common.submit'),
                     'title'           => lang('Messages.sms_send')
                 ]
@@ -310,7 +310,7 @@ function get_customer_data_row(object $person, object $stats): array
             "$controller/view/$person->person_id",
             '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".update")
             ]
@@ -371,7 +371,7 @@ function get_supplier_data_row(object $supplier): array
                 "Messages/view/$supplier->person_id",
                 '<i class="bi bi-telephone"></i>',
                 [
-                    'class'           => "modal-dlg",
+                    'class'           => "modal-launch",
                     'data-btn-submit' => lang('Common.submit'),
                     'title'           => lang('Messages.sms_send')
                 ]
@@ -380,7 +380,7 @@ function get_supplier_data_row(object $supplier): array
             "$controller/view/$supplier->person_id",
             '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => "modal-dlg",
+                'class'           => "modal-launch",
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".update")
             ]
@@ -500,7 +500,7 @@ function get_item_data_row(object $item): array
             "$controller/inventory/$item->item_id",
             '<i class="bi bi-box"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".count")
             ]
@@ -509,7 +509,7 @@ function get_item_data_row(object $item): array
             "$controller/countDetails/$item->item_id",
             '<i class="bi bi-info-square"></i>',
             [
-                'class' => 'modal-dlg',
+                'class' => 'modal-launch',
                 'title' => lang(ucfirst($controller) . ".details_count")
             ]
         ),
@@ -517,7 +517,7 @@ function get_item_data_row(object $item): array
             "$controller/view/$item->item_id",
             '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".update")
             ]
@@ -563,7 +563,7 @@ function get_giftcard_data_row(object $giftcard): array
             "$controller/view/$giftcard->giftcard_id",
             '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".update")
             ]
@@ -609,7 +609,7 @@ function get_item_kit_data_row(object $item_kit): array
             "$controller/view/$item_kit->item_kit_id",
             '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".update")
             ]
@@ -717,7 +717,7 @@ function get_attribute_definition_data_row(object $attribute_row): array
             "$controller/view/$attribute_row->definition_id",
             '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".update")
             ]
@@ -757,7 +757,7 @@ function get_expense_category_data_row(object $expense_category): array
             "$controller/view/$expense_category->expense_category_id",
             '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".update")
             ]
@@ -811,7 +811,7 @@ function get_expenses_data_row(object $expense): array
             "$controller/view/$expense->expense_id",
             '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".update")
             ]
@@ -913,7 +913,7 @@ function get_cash_up_data_row(object $cash_up): array
             "$controller/view/$cash_up->cashup_id",
             '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller) . ".update")
             ]
diff --git a/app/Helpers/tax_helper.php b/app/Helpers/tax_helper.php
index 654ebfd76..501e1d65d 100644
--- a/app/Helpers/tax_helper.php
+++ b/app/Helpers/tax_helper.php
@@ -38,7 +38,7 @@ function get_tax_code_data_row($tax_code_row): array
             "$controller_name/view_tax_codes/$tax_code_row->tax_code",
             '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller_name) . ".update_tax_codes")
             ]
@@ -76,7 +76,7 @@ function get_tax_categories_data_row($tax_categories_row): array
             "$controller_name/view/$tax_categories_row->tax_category_id",
             '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller_name) . ".update")
             ]
@@ -113,7 +113,7 @@ function get_tax_jurisdictions_data_row($tax_jurisdiction_row): array
             "$controller_name/view/$tax_jurisdiction_row->jurisdiction_id",
             '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller_name) . ".update")
             ]
@@ -158,7 +158,7 @@ function get_tax_rates_data_row($tax_rates_row): array
             "$controller_name/view/$tax_rates_row->tax_rate_id",
             '<i class="bi bi-pencil-square"></i>',
             [
-                'class'           => 'modal-dlg',
+                'class'           => 'modal-launch',
                 'data-btn-submit' => lang('Common.submit'),
                 'title'           => lang(ucfirst($controller_name) . ".update")
             ]
diff --git a/app/Language/en/Config.php b/app/Language/en/Config.php
index 6ad5f033c..4a661b863 100644
--- a/app/Language/en/Config.php
+++ b/app/Language/en/Config.php
@@ -227,7 +227,7 @@ return [
     'os_timezone'                               => 'OSPOS Timezone:',
     'ospos_info'                                => 'OSPOS Installation Info',
     'payment_options_order'                     => 'Payment Options Order',
-    'payment_reference_code_length_limits'      => 'Payment Reference Code<br>Length Limits',
+    'payment_reference_code_length_limits'      => 'Payment Reference Code Length Limits',
     'payment_reference_code_length_max_label'   => 'Max',
     'payment_reference_code_length_min_label'   => 'Min',
     'perm_risk'                                 => 'Incorrect permissions leaves this software at risk.',
diff --git a/app/Views/attributes/form.php b/app/Views/attributes/form.php
index 345189dd8..a75dcb833 100644
--- a/app/Views/attributes/form.php
+++ b/app/Views/attributes/form.php
@@ -10,93 +10,75 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("attributes/saveDefinition/$definition_id", ['id' => 'attribute_form']) ?>
 
-<?= form_open("attributes/saveDefinition/$definition_id", ['id' => 'attribute_form', 'class' => 'form-horizontal']) ?>
-    <fieldset id="attribute_basic_info">
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Attributes.definition_name'), 'definition_name', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'  => 'definition_name',
-                    'id'    => 'definition_name',
-                    'class' => 'form-control input-sm',
-                    'value' => esc($definition_info->definition_name)
-                ]) ?>
-            </div>
+    <label for="definition_name" class="form-label"><?= lang('Attributes.definition_name'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="definition_name-icon"><i class="bi bi-star"></i></span>
+        <input type="text" class="form-control" name="definition_name" id="definition_name" aria-describedby="definition_name-icon" value="<?= esc($definition_info->definition_name); ?>">
+    </div>
+
+    <label for="definition_type" class="form-label"><?= lang('Attributes.definition_type'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="definition_type-icon"><i class="bi bi-list"></i></span>
+        <select class="form-select" name="definition_type" id="definition_type" aria-describedby="definition_type-icon">
+            <?php foreach (DEFINITION_TYPES as $key => $label): ?>
+                <option value="<?= $key ?>" <?= ($key === array_search($definition_info->definition_type, DEFINITION_TYPES)) ? 'selected' : '' ?>>
+                    <?= $label ?>
+                </option>
+            <?php endforeach; ?>
+        </select>
+    </div>
+
+    <label for="definition_group" class="form-label"><?= lang('Attributes.definition_group'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="definition_group-icon"><i class="bi bi-collection"></i></span>
+        <select class="form-select" name="definition_group" id="definition_group" aria-describedby="definition_group-icon" <?= empty($definition_group) ? 'disabled' : '' ?>>
+            <?php foreach ($definition_group as $key => $label): ?>
+                <option value="<?= $key ?>" <?= ($key == $definition_info->definition_fk) ? 'selected' : '' ?>>
+                    <?= $label ?>
+                </option>
+            <?php endforeach; ?>
+        </select>
+    </div>
+
+    <div class="toggle-hide d-none">
+        <label for="definition_flags" class="form-label"><?= lang('Attributes.definition_flags'); ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="definition_flags-icon"><i class="bi bi-eyeglasses"></i></span>
+            <select class="form-select" name="definition_flags[]" id="definition_flags" aria-describedby="definition_flags-icon" multiple>
+                <?php foreach ($definition_flags as $key => $label): ?>
+                    <option value="<?= $key ?>" <?= in_array($key, array_keys($selected_definition_flags)) ? 'selected' : '' ?>>
+                        <?= $label ?>
+                    </option>
+                <?php endforeach; ?>
+            </select>
         </div>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Attributes.definition_type'), 'definition_type', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_dropdown('definition_type', DEFINITION_TYPES, array_search($definition_info->definition_type, DEFINITION_TYPES), 'id="definition_type" class="form-control"') ?>
-            </div>
+    <div class="toggle-hide d-none">
+        <label for="definition_unit" class="form-label"><?= lang('Attributes.definition_unit'); ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="definition_unit-icon"><i class="bi bi-flask"></i></span>
+            <input type="text" class="form-control" name="definition_unit" id="definition_unit" aria-describedby="definition_unit-icon" value="<?= esc($definition_info->definition_unit); ?>">
         </div>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Attributes.definition_group'), 'definition_group', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_dropdown(
-                    'definition_group',
-                    $definition_group,
-                    $definition_info->definition_fk,
-                    'id="definition_group" class="form-control" ' . (empty($definition_group) ? 'disabled="disabled"' : '')
-                ) ?>
-            </div>
+    <div class="toggle-hide d-none">
+        <label for="definition_value" class="form-label"><?= lang('Attributes.definition_values'); ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="definition_value-icon"><i class="bi bi-list"></i></span>
+            <input type="text" class="form-control" name="definition_value" id="definition_value" aria-describedby="definition_value-icon">
+            <button type="button" class="btn btn-outline-secondary" id="add_attribute_value"><i class="bi bi-plus-circle"></i></button>
         </div>
+    </div>
 
-        <div class="form-group form-group-sm hidden">
-            <?= form_label(lang('Attributes.definition_flags'), 'definition_flags', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group">
-                    <?= form_multiselect('definition_flags[]', $definition_flags, array_keys($selected_definition_flags), [
-                        'id'                        => 'definition_flags',
-                        'class'                     => 'selectpicker show-menu-arrow',
-                        'data-none-selected-text'   => lang('Common.none_selected_text'),
-                        'data-selected-text-format' => 'count > 1',
-                        'data-style'                => 'btn-default btn-sm',
-                        'data-width'                => 'fit'
-                    ]) ?>
-                </div>
-            </div>
-        </div>
+    <div class="toggle-hide d-none">
+        <ul class="list-group" id="definition_list_group"></ul>
+    </div>
 
-        <div class="form-group form-group-sm hidden">
-            <?= form_label(lang('Attributes.definition_unit'), 'definition_units', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group">
-                    <?= form_input([
-                        'name'  => 'definition_unit',
-                        'value' => esc($definition_info->definition_unit),
-                        'class' => 'form-control input-sm',
-                        'id'    => 'definition_unit'
-                    ]) ?>
-                </div>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm hidden">
-            <?= form_label(lang('Attributes.definition_values'), 'definition_value', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group">
-                    <?= form_input(['name' => 'definition_value', 'class' => 'form-control input-sm', 'id' => 'definition_value']) ?>
-                    <span id="add_attribute_value" class="input-group-addon input-sm btn btn-default">
-                        <i class="bi bi-plus-circle"></i>
-                    </span>
-                </div>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm hidden">
-            <?= form_label('&nbsp;', 'definition_list_group', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <ul id="definition_list_group" class="list-group"></ul>
-            </div>
-        </div>
-
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -125,8 +107,8 @@
             if (definition_id == -1) {
                 $('#definition_name').prop("disabled", true);
                 $('#definition_type').prop("disabled", true);
-                $('#definition_group').parents('.form-group').toggleClass("hidden", true);
-                $('#definition_flags').parents('.form-group').toggleClass('hidden', true);
+                $('#definition_group').parents('.toggle-hide').toggleClass("d-none", true);
+                $('#definition_flags').parents('.toggle-hide').toggleClass("d-none", true);
             }
         }
         disable_category_dropdown();
@@ -137,21 +119,23 @@
             var is_no_group = $('#definition_type').val() !== '0';
             var is_category_dropdown = definition_id == -1;
 
-            $('#definition_value, #definition_list_group').parents('.form-group').toggleClass('hidden', is_dropdown);
-            $('#definition_unit').parents('.form-group').toggleClass('hidden', is_decimal);
+            $('#definition_value, #definition_list_group').parents('.toggle-hide').toggleClass('d-none', is_dropdown);
+            $('#definition_unit').parents('.toggle-hide').toggleClass('d-none', is_decimal);
 
             // Appropriately show definition flags if not category_dropdown
             if (definition_id != -1) {
-                $('#definition_flags').parents('.form-group').toggleClass('hidden', !is_no_group);
+                $('#definition_flags').parents('.toggle-hide').toggleClass('d-none', !is_no_group);
             }
         };
 
         $('#definition_type').change(show_hide_fields);
         show_hide_fields();
 
-        $('.selectpicker').each(function() {
-            var $selectpicker = $(this);
-            $.fn.selectpicker.call($selectpicker, $selectpicker.data());
+        new TomSelect('#definition_flags', {
+            plugins: ['checkbox_options', 'remove_button'],
+            placeholder: '<?= lang('Common.none_selected_text') ?>',
+            hidePlaceholder: true,
+            closeAfterSelect: false,
         });
 
         var remove_attribute_value = function() {
@@ -192,7 +176,7 @@
                 }
             }
 
-            $('#definition_list_group').append('<li class="list-group-item">' + DOMPurify.sanitize(value) + '<a href="javascript:void(0);"><i class="bi bi-trash pull-right"></i></a></li>')
+            $('#definition_list_group').append('<li class="list-group-item list-group-item-action d-flex justify-content-between">' + DOMPurify.sanitize(value) + '<a href="javascript:void(0);"><span class="text-danger"><i class="bi bi-trash"></i></span></a></li>')
                 .find(':last-child a').click(remove_attribute_value);
             $('#definition_value').val('');
         };
diff --git a/app/Views/attributes/item.php b/app/Views/attributes/item.php
index 7651bf335..292f942b8 100644
--- a/app/Views/attributes/item.php
+++ b/app/Views/attributes/item.php
@@ -7,96 +7,98 @@
  */
 ?>
 
-<div class="form-group form-group-sm">
-    <?= form_label(lang('Attributes.definition_name'), 'definition_name_label', ['class' => 'control-label col-xs-3']) ?>
-    <div class="col-xs-8">
-        <?= form_dropdown([
-            'name'     => 'definition_name',
-            'options'  => $definition_names,
-            'selected' => -1,
-            'class'    => 'form-control',
-            'id'       => 'definition_name'
-        ]) ?>
-    </div>
+<label for="definition_name" class="form-label"><?= lang('Attributes.definition_name'); ?></label>
+<div class="input-group mb-3">
+    <span class="input-group-text"><i class="bi bi-star"></i></span>
+    <select class="form-select" name="definition_name" id="definition_name">
+        <option value="-1" selected></option>
+        <?php foreach ($definition_names as $key => $value): ?>
+            <option value="<?= $key ?>"><?= $value ?></option>
+        <?php endforeach; ?>
+    </select>
 </div>
 
 <?php foreach ($definition_values as $definition_id => $definition_value) { ?>
 
-    <div class="form-group form-group-sm">
-        <?= form_label(esc($definition_value['definition_name']), esc($definition_value['definition_name']), ['class' => 'control-label col-xs-3']) ?>
-        <div class="col-xs-8">
-            <div class="input-group">
-                <?php
-                echo form_hidden("attribute_ids[$definition_id]", strval($definition_value['attribute_id']));
-                $attribute_value = $definition_value['attribute_value'];
+<span class="attribute_added">
+    <?php
+    $attribute_value = $definition_value['attribute_value'];
 
-                switch ($definition_value['definition_type']) {
-                    case DATE:
-                        $value = (empty($attribute_value) || empty($attribute_value->attribute_date)) ? NOW : strtotime($attribute_value->attribute_date);
-                        echo form_input([
-                            'name'               => "attribute_links[$definition_id]",
-                            'value'              => to_date($value),
-                            'class'              => 'form-control input-sm datetime',
-                            'data-definition-id' => $definition_id,
-                            'readonly'           => 'true'
-                        ]);
-                        break;
-                    case DROPDOWN:
-                        $selected_value = $definition_value['selected_value'];
-                        echo form_dropdown([
-                            'name'               => "attribute_links[$definition_id]",
-                            'options'            => $definition_value['values'],
-                            'selected'           => $selected_value,
-                            'class'              => 'form-control',
-                            'data-definition-id' => $definition_id
-                        ]);
-                        break;
-                    case TEXT:
-                        $value = (empty($attribute_value) || empty($attribute_value->attribute_value)) ? $definition_value['selected_value'] : $attribute_value->attribute_value;
-                        echo form_input([
-                            'name'               => "attribute_links[$definition_id]",
-                            'value'              => esc($value),
-                            'class'              => 'form-control valid_chars',
-                            'data-definition-id' => $definition_id
-                        ]);
-                        break;
-                    case DECIMAL:
-                        $value = (empty($attribute_value) || empty($attribute_value->attribute_decimal)) ? $definition_value['selected_value'] : $attribute_value->attribute_decimal;
-                        echo form_input([
-                            'name'               => "attribute_links[$definition_id]",
-                            'value'              => to_decimals((float)$value),
-                            'class'              => 'form-control valid_chars',
-                            'data-definition-id' => $definition_id
-                        ]);
-                        break;
-                    case CHECKBOX:
-                        $value = (empty($attribute_value) || empty($attribute_value->attribute_value)) ? $definition_value['selected_value'] : $attribute_value->attribute_value;
+    switch ($definition_value['definition_type']) {
 
-                        // Sends 0 if the box is unchecked instead of not sending anything.
-                        echo form_input([
-                            'type'               => 'hidden',
-                            'name'               => "attribute_links[$definition_id]",
-                            'id'                 => "attribute_links[$definition_id]",
-                            'value'              => 0,
-                            'data-definition-id' => $definition_id
-                        ]);
-                        echo form_checkbox([
-                            'name'               => "attribute_links[$definition_id]",
-                            'id'                 => "attribute_links[$definition_id]",
-                            'value'              => 1,
-                            'checked'            => $value == 1,
-                            'class'              => 'checkbox-inline',
-                            'data-definition-id' => $definition_id
-                        ]);
-                        break;
-                }
-                ?>
-                <span class="input-group-addon input-sm btn btn-default remove_attribute_btn">
-                    <i class="bi bi-trash"></i>
-                </span>
+        case DATE:
+            $value = (empty($attribute_value) || empty($attribute_value->attribute_date)) ? NOW : strtotime($attribute_value->attribute_date);
+            ?>
+            <label for="attribute_links[<?= $definition_id ?>]" class="form-label"><?= esc($definition_value['definition_name']) ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="attribute_links[<?= $definition_id ?>]-icon"><i class="bi bi-calendar2"></i></span>
+                <input type="hidden" name="attribute_ids[<?= $definition_id ?>]" value="<?= strval($definition_value['attribute_id']) ?>">
+                <input type="text" class="form-select datetime" name="attribute_links[<?= $definition_id ?>]" id="attribute_links[<?= $definition_id ?>]" aria-describedby="attribute_links[<?= $definition_id ?>]-icon" value="<?= to_date($value) ?>"  data-definition-id="<?= $definition_id ?>" readonly>
+                <button type="button" class="btn btn-outline-danger remove_attribute_btn"><i class="bi bi-trash"></i></button>
             </div>
-        </div>
-    </div>
+            <?php
+            break;
+
+        case DROPDOWN:
+            $selected_value = $definition_value['selected_value'];
+            ?>
+            <label for="attribute_links[<?= $definition_id ?>]" class="form-label"><?= esc($definition_value['definition_name']) ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="attribute_links[<?= $definition_id ?>]-icon"><i class="bi bi-menu-down"></i></span>
+                <input type="hidden" name="attribute_ids[<?= $definition_id ?>]" value="<?= strval($definition_value['attribute_id']) ?>">
+                <select class="form-select" name="attribute_links[<?= $definition_id ?>]" id="attribute_links[<?= $definition_id ?>]" data-definition-id="<?= $definition_id ?>">
+                    <?php foreach ($definition_value['values'] as $key => $val): ?>
+                        <option value="<?= $key ?>" <?= $selected_value == $key ? 'selected' : '' ?>><?= $val ?></option>
+                    <?php endforeach; ?>
+                </select>
+                <button type="button" class="btn btn-outline-danger remove_attribute_btn"><i class="bi bi-trash"></i></button>
+            </div>
+            <?php
+            break;
+
+        case TEXT:
+            $value = (empty($attribute_value) || empty($attribute_value->attribute_value)) ? $definition_value['selected_value'] : $attribute_value->attribute_value;
+            ?>
+            <label for="attribute_links[<?= $definition_id ?>]" class="form-label"><?= esc($definition_value['definition_name']) ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="attribute_links[<?= $definition_id ?>]-icon"><i class="bi bi-type"></i></span>
+                <input type="hidden" name="attribute_ids[<?= $definition_id ?>]" value="<?= strval($definition_value['attribute_id']) ?>">
+                <input type="text" name="attribute_links[<?= $definition_id ?>]" id="attribute_links[<?= $definition_id ?>]" value="<?= esc($value) ?>" class="form-control valid_chars" data-definition-id="<?= $definition_id ?>">
+                <button type="button" class="btn btn-outline-danger remove_attribute_btn"><i class="bi bi-trash"></i></button>
+            </div>
+            <?php
+            break;
+
+        case DECIMAL:
+            $value = (empty($attribute_value) || empty($attribute_value->attribute_decimal)) ? $definition_value['selected_value'] : $attribute_value->attribute_decimal;
+            ?>
+            <label for="attribute_links[<?= $definition_id ?>]" class="form-label"><?= esc($definition_value['definition_name']) ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="attribute_links[<?= $definition_id ?>]-icon"><i class="bi bi-dot"></i></span>
+                <input type="hidden" name="attribute_ids[<?= $definition_id ?>]" value="<?= strval($definition_value['attribute_id']) ?>">
+                <input type="text" name="attribute_links[<?= $definition_id ?>]" id="attribute_links[<?= $definition_id ?>]" value="<?= to_decimals((float)$value) ?>" class="form-control valid_chars" data-definition-id="<?= $definition_id ?>">
+                <button type="button" class="btn btn-outline-danger remove_attribute_btn"><i class="bi bi-trash"></i></button>
+            </div>
+            <?php
+            break;
+
+        case CHECKBOX:
+            $value = (empty($attribute_value) || empty($attribute_value->attribute_value)) ? $definition_value['selected_value'] : $attribute_value->attribute_value;
+            ?>
+            <div class="d-flex justify-content-between">
+                <div class="form-check form-check-inline mb-3">
+                    <input type="hidden" name="attribute_ids[<?= $definition_id ?>]" value="<?= strval($definition_value['attribute_id']) ?>">
+                    <input type="hidden" name="attribute_links_h1[<?= $definition_id ?>]" id="attribute_links_h1<?= $definition_id ?>" value="0" data-definition-id="<?= $definition_id ?>">
+                    <input type="checkbox" class="form-check-input" name="attribute_links[<?= $definition_id ?>]" id="attribute_links[<?= $definition_id ?>]" value="1" <?= $value == 1 ? 'checked' : '' ?> data-definition-id="<?= $definition_id ?>">
+                    <label class="form-check-label" for="attribute_links[<?= $definition_id ?>]"><?= esc($definition_value['definition_name']) ?></label>
+                </div>
+                <button type="button" class="btn btn-outline-danger remove_attribute_btn"><i class="bi bi-trash"></i></button>
+            </div>
+            <?php
+            break;
+    }
+    ?>
+</span>
 
 <?php } ?>
 
@@ -106,7 +108,7 @@
 
         var enable_delete = function() {
             $('.remove_attribute_btn').click(function() {
-                $(this).parents('.form-group').remove();
+                $(this).parents('.attribute_added').remove();
             });
         };
 
@@ -134,13 +136,13 @@
             $("[name*='attribute_links'").each(function() {
                 var definition_id = $(this).data('definition-id');
                 var element = $(this);
-                
+
                 // For checkboxes, use the visible checkbox, not the hidden input
                 if (element.attr('type') === 'hidden' && element.siblings('input[type="checkbox"]').length > 0) {
                     // Skip hidden inputs that have a corresponding checkbox
                     return;
                 }
-                
+
                 // For checkboxes, get the checked state
                 if (element.attr('type') === 'checkbox') {
                     result[definition_id] = element.prop('checked') ? '1' : '0';
diff --git a/app/Views/attributes/manage.php b/app/Views/attributes/manage.php
index 91e9e5478..5a4c6f82f 100644
--- a/app/Views/attributes/manage.php
+++ b/app/Views/attributes/manage.php
@@ -8,6 +8,11 @@
 
 <?= view('partial/header') ?>
 
+<?php
+$title_info['config_title'] = 'Attributes';
+echo view('configs/config_header', $title_info);
+?>
+
 <script type="text/javascript">
     $(document).ready(function() {
         <?= view('partial/bootstrap_tables_locale') ?>
@@ -21,16 +26,16 @@
     });
 </script>
 
-<div id="title_bar" class="btn-toolbar print_hide">
-    <button class="btn btn-info btn-sm pull-right modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("$controller_name/view") ?>" title="<?= lang(ucfirst($controller_name) . ".new") ?>">
-        <i class="bi bi-star icon-spacing"></i><?= lang(ucfirst($controller_name) . ".new") ?>
+<div class="d-flex gap-2 justify-content-end d-print-none">
+    <button type="button" class="btn btn-primary modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("$controller_name/view") ?>" title="<?= lang(ucfirst($controller_name) . ".new") ?>">
+        <i class="bi bi-star me-2"></i><?= lang(ucfirst($controller_name) . ".new") ?>
     </button>
 </div>
 
 <div id="toolbar">
-    <div class="pull-left form-inline" role="toolbar">
-        <button id="delete" class="btn btn-default btn-sm print_hide">
-            <i class="bi bi-trash icon-spacing"></i><?= lang('Common.delete') ?>
+    <div class="d-flex gap-2">
+        <button type="button" class="btn btn-secondary d-print-none" id="delete">
+            <i class="bi bi-trash"></i><span class="d-none d-sm-inline ms-2"><?= lang('Common.delete') ?></span>
         </button>
     </div>
 </div>
diff --git a/app/Views/cashups/form.php b/app/Views/cashups/form.php
index 9d69faa62..89ac17f64 100644
--- a/app/Views/cashups/form.php
+++ b/app/Views/cashups/form.php
@@ -7,244 +7,140 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open('cashups/save/' . $cash_ups_info->cashup_id, ['id' => 'cashups_edit_form'])    // TODO: String Interpolation ?>
 
-<?= form_open('cashups/save/' . $cash_ups_info->cashup_id, ['id' => 'cashups_edit_form', 'class' => 'form-horizontal'])    // TODO: String Interpolation ?>
-    <fieldset id="item_basic_info">
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Cashups.info'), 'cash_ups_info', ['class' => 'control-label col-xs-3']) ?>
-            <?= form_label(!empty($cash_ups_info->cashup_id) ? lang('Cashups.id') . ' ' . $cash_ups_info->cashup_id : '', 'cashup_id', ['class' => 'control-label col-xs-8', 'style' => 'text-align: left']) ?>
+    <div class="mb-3"><?= lang('Cashups.info') ?> <?= !empty($cash_ups_info->cashup_id) ? lang('Cashups.id') . " $cash_ups_info->cashup_id" : '' ?></div>
+
+    <label for="open_date" class="form-label"><?= lang('Cashups.open_date'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="open_date-icon"><i class="bi bi-calendar2-check"></i></span>
+        <input type="text" class="form-control datepicker" name="open_date" id="open_date" aria-describedby="open_date-icon" value="<?= to_datetime(strtotime($cash_ups_info->open_date)) ?>" required>
+    </div>
+
+    <label for="open_employee" class="form-label"><?= lang('Cashups.open_employee'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="open_employee-icon"><i class="bi bi-person"></i></span>
+        <select class="form-select" name="open_employee_id" id="open_employee_id">
+            <?php foreach ($employees as $id => $name): ?>
+                <option value="<?= $id ?>" <?= $id == $cash_ups_info->open_employee_id ? 'selected' : '' ?>><?= esc($name) ?></option>
+            <?php endforeach; ?>
+        </select>
+    </div>
+
+    <label for="open_amount_cash" class="form-label"><?= lang('Cashups.open_amount_cash'); ?></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="tax_amount-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+        <input class="form-control" name="open_amount_cash" id="open_amount_cash" aria-describedby="open_amount_cash-icon" value="<?= to_currency_no_money($cash_ups_info->open_amount_cash) ?>">
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="tax_amount-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+    </div>
+
+    <label for="transfer_amount_cash" class="form-label"><?= lang('Cashups.transfer_amount_cash'); ?></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="transfer_amount_cash-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+        <input class="form-control" name="transfer_amount_cash" id="transfer_amount_cash" aria-describedby="transfer_amount_cash-icon" value="<?= to_currency_no_money($cash_ups_info->transfer_amount_cash) ?>">
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="transfer_amount_cash-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+    </div>
+
+    <label for="close_date" class="form-label"><?= lang('Cashups.close_date'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="close_date-icon"><i class="bi bi-calendar2-x"></i></span>
+        <input type="text" class="form-control datepicker" name="close_date" id="close_date" aria-describedby="close_date-icon" value="<?= to_datetime(strtotime($cash_ups_info->close_date)) ?>" required>
+    </div>
+
+    <label for="close_employee" class="form-label"><?= lang('Cashups.close_employee'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="close_employee-icon"><i class="bi bi-person"></i></span>
+        <select class="form-select" name="close_employee_id" id="close_employee_id">
+            <?php foreach ($employees as $id => $name): ?>
+                <option value="<?= $id ?>" <?= $id == $cash_ups_info->close_employee_id ? 'selected' : '' ?>><?= esc($name) ?></option>
+            <?php endforeach; ?>
+        </select>
+    </div>
+
+    <label for="closed_amount_cash" class="form-label"><?= lang('Cashups.closed_amount_cash'); ?></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="closed_amount_cash-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+        <input class="form-control" name="closed_amount_cash" id="closed_amount_cash" aria-describedby="closed_amount_cash-icon" value="<?= to_currency_no_money($cash_ups_info->closed_amount_cash) ?>">
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="closed_amount_cash-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+    </div>
+
+    <div class="form-check mb-3">
+        <input class="form-check-input" type="checkbox" name="note" id="note" value="0" <?= $cash_ups_info->note == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="note"><?= lang('Cashups.note') ?></label>
+    </div>
+
+    <label for="closed_amount_due" class="form-label"><?= lang('Cashups.closed_amount_due'); ?></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="closed_amount_due-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+        <input class="form-control" name="closed_amount_due" id="closed_amount_due" aria-describedby="closed_amount_due-icon" value="<?= to_currency_no_money($cash_ups_info->closed_amount_due) ?>">
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="closed_amount_due-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+    </div>
+
+    <label for="closed_amount_card" class="form-label"><?= lang('Cashups.closed_amount_card'); ?></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="closed_amount_card-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+        <input class="form-control" name="closed_amount_card" id="closed_amount_card" aria-describedby="closed_amount_card-icon" value="<?= to_currency_no_money($cash_ups_info->closed_amount_card) ?>">
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="closed_amount_card-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+    </div>
+
+    <label for="closed_amount_check" class="form-label"><?= lang('Cashups.closed_amount_check'); ?></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="closed_amount_check-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+        <input class="form-control" name="closed_amount_check" id="closed_amount_check" aria-describedby="closed_amount_check-icon" value="<?= to_currency_no_money($cash_ups_info->closed_amount_check) ?>">
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="closed_amount_check-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+    </div>
+
+    <label for="closed_amount_total" class="form-label"><?= lang('Cashups.closed_amount_total'); ?></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="closed_amount_total-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+        <input type="hidden" name="closed_amount_total" id="closed_amount_total" aria-describedby="closed_amount_total-icon" value="<?= to_currency_no_money($cash_ups_info->closed_amount_total) ?>">
+        <input type="text" class="form-control" value="<?= to_currency_no_money($cash_ups_info->closed_amount_total) ?>" readonly disabled>
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="closed_amount_total-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+    </div>
+
+    <label for="description" class="form-label"><?= lang('Cashups.description'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-chat"></i></span>
+        <textarea class="form-control" name="description" id="description" rows="6"><?= $cash_ups_info->description ?></textarea>
+    </div>
+
+    <?php if (!empty($cash_ups_info->cashup_id)): ?>
+        <div class="form-check mb-3">
+            <input class="form-check-input" type="checkbox" name="deleted" id="deleted" value="1" <?= $cash_ups_info->deleted == 1 ? 'checked' : '' ?>>
+            <label class="form-check-label text-danger" for="deleted"><?= lang('Cashups.is_deleted') ?></label>
         </div>
+    <?php endif; ?>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Cashups.open_date'), 'open_date', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-6">
-                <div class="input-group">
-                    <span class="input-group-addon input-sm">
-                        <i class="bi bi-calendar2"></i>
-                    </span>
-                    <?= form_input([
-                        'name'  => 'open_date',
-                        'id'    => 'open_date',
-                        'class' => 'form-control input-sm datepicker',
-                        'value' => to_datetime(strtotime($cash_ups_info->open_date))
-                    ]) ?>
-                </div>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Cashups.open_employee'), 'open_employee', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-6">
-                <?= form_dropdown('open_employee_id', $employees, $cash_ups_info->open_employee_id, 'id="open_employee_id" class="form-control"') ?>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Cashups.open_amount_cash'), 'open_amount_cash', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'  => 'open_amount_cash',
-                        'id'    => 'open_amount_cash',
-                        'class' => 'form-control input-sm',
-                        'value' => to_currency_no_money($cash_ups_info->open_amount_cash)
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                </div>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Cashups.transfer_amount_cash'), 'transfer_amount_cash', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'  => 'transfer_amount_cash',
-                        'id'    => 'transfer_amount_cash',
-                        'class' => 'form-control input-sm',
-                        'value' => to_currency_no_money($cash_ups_info->transfer_amount_cash)
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                </div>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Cashups.close_date'), 'close_date', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-6">
-                <div class="input-group">
-                    <span class="input-group-addon input-sm">
-                        <i class="bi bi-calendar2"></i>
-                    </span>
-                    <?= form_input([
-                        'name'  => 'close_date',
-                        'id'    => 'close_date',
-                        'class' => 'form-control input-sm datepicker',
-                        'value' => to_datetime(strtotime($cash_ups_info->close_date))
-                    ]) ?>
-                </div>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Cashups.close_employee'), 'close_employee', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-6">
-                <?= form_dropdown('close_employee_id', $employees, $cash_ups_info->close_employee_id, 'id="close_employee_id" class="form-control"') ?>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Cashups.closed_amount_cash'), 'closed_amount_cash', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'  => 'closed_amount_cash',
-                        'id'    => 'closed_amount_cash',
-                        'class' => 'form-control input-sm',
-                        'value' => to_currency_no_money($cash_ups_info->closed_amount_cash)
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                </div>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Cashups.note'), 'note', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-6">
-                <?= form_checkbox([
-                    'name'    => 'note',
-                    'id'      => 'note',
-                    'value'   => 0,
-                    'checked' => $cash_ups_info->note == 1
-                ]) ?>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Cashups.closed_amount_due'), 'closed_amount_due', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'  => 'closed_amount_due',
-                        'id'    => 'closed_amount_due',
-                        'class' => 'form-control input-sm',
-                        'value' => to_currency_no_money($cash_ups_info->closed_amount_due)
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                </div>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Cashups.closed_amount_card'), 'closed_amount_card', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'  => 'closed_amount_card',
-                        'id'    => 'closed_amount_card',
-                        'class' => 'form-control input-sm',
-                        'value' => to_currency_no_money($cash_ups_info->closed_amount_card)
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                </div>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Cashups.closed_amount_check'), 'closed_amount_check', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'  => 'closed_amount_check',
-                        'id'    => 'closed_amount_check',
-                        'class' => 'form-control input-sm',
-                        'value' => to_currency_no_money($cash_ups_info->closed_amount_check)
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                </div>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Cashups.closed_amount_total'), 'closed_amount_total', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'     => 'closed_amount_total',
-                        'id'       => 'closed_amount_total',
-                        'readonly' => 'true',
-                        'class'    => 'form-control input-sm',
-                        'value'    => to_currency_no_money($cash_ups_info->closed_amount_total)
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                </div>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Cashups.description'), 'description', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-6">
-                <?= form_textarea([
-                    'name'  => 'description',
-                    'id'    => 'description',
-                    'class' => 'form-control input-sm',
-                    'value' => $cash_ups_info->description
-                ]) ?>
-            </div>
-        </div>
-
-        <?php if (!empty($cash_ups_info->cashup_id)) { ?>
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Cashups.is_deleted') . ':', 'deleted', ['class' => 'control-label col-xs-3']) ?>
-                <div class="col-xs-5">
-                    <?= form_checkbox([
-                        'name'    => 'deleted',
-                        'id'      => 'deleted',
-                        'value'   => 1,
-                        'checked' => $cash_ups_info->deleted == 1
-                    ]) ?>
-                </div>
-            </div>
-        <?php } ?>
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">
diff --git a/app/Views/cashups/manage.php b/app/Views/cashups/manage.php
index 21bef0284..9682df37c 100644
--- a/app/Views/cashups/manage.php
+++ b/app/Views/cashups/manage.php
@@ -12,6 +12,11 @@
 
 <?= view('partial/header') ?>
 
+<?php
+$title_info['config_title'] = 'Cashups';
+echo view('configs/config_header', $title_info);
+?>
+
 <script type="text/javascript">
     $(document).ready(function() {
         // Load the preset datarange picker
@@ -46,29 +51,36 @@
 
 <?= view('partial/print_receipt', ['print_after_sale' => false, 'selected_printer' => 'takings_printer']) ?>
 
-<div id="title_bar" class="print_hide btn-toolbar">
-    <button onclick="printdoc()" class="btn btn-info btn-sm pull-right">
-        <i class="bi bi-printer icon-spacing"></i><?= lang('Common.print') ?>
+<div id="title_bar" class="d-flex gap-2 justify-content-end d-print-none">
+    <button type="button" class="btn btn-primary modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "$controller_name/view" ?>" title="<?= lang(ucfirst($controller_name) . ".new") ?>">
+        <i class="bi bi-journal-check me-2"></i><?= lang(esc(ucfirst($controller_name)) . '.new')    // TODO: String Interpolation ?>
     </button>
-    <button class="btn btn-info btn-sm pull-right modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "$controller_name/view" ?>" title="<?= lang(ucfirst($controller_name) . ".new") ?>">
-        <i class="bi bi-journal-check icon-spacing"></i><?= lang(esc(ucfirst($controller_name)) . '.new')    // TODO: String Interpolation ?>
+    <button type="button" class="btn btn-primary" onclick="window.print()" title="<?= lang('Common.print') ?>">
+        <i class="bi bi-printer me-2"></i><?= lang('Common.print') ?>
     </button>
 </div>
 
 <div id="toolbar">
-    <div class="pull-left form-inline" role="toolbar">
-        <button id="delete" class="btn btn-default btn-sm print_hide">
-            <i class="bi bi-trash icon-spacing"></i><?= lang('Common.delete') ?>
+    <div class="d-flex gap-2">
+        <button type="button" id="delete" class="btn btn-secondary d-print-none">
+            <i class="bi bi-trash"></i><span class="d-none d-sm-inline ms-2"><?= lang('Common.delete') ?></span>
         </button>
-        <?= form_input(['name' => 'daterangepicker', 'class' => 'form-control input-sm', 'id' => 'daterangepicker']) ?>
-        <?= form_multiselect('filters[]', $filters, $selected_filters ?? [], [
-            'id'                        => 'filters',
-            'data-none-selected-text'   => lang('Common.none_selected_text'),
-            'class'                     => 'selectpicker show-menu-arrow',
-            'data-selected-text-format' => 'count > 1',
-            'data-style'                => 'btn-default btn-sm',
-            'data-width'                => 'fit'
-        ]) ?>
+
+        <div class="input-group w-auto">
+            <span class="input-group-text" id="daterangepicker-icon"><i class="bi bi-calendar2-range"></i></span>
+            <input type="text" class="form-select" name="daterangepicker" id="daterangepicker" aria-describedby="daterangepicker-icon">
+        </div>
+
+        <div class="input-group w-auto">
+            <span class="input-group-text" id="filters-icon"><i class="bi bi-funnel"></i></span>
+            <select class="form-select" name="filters[]" id="filters" aria-describedby="filters-icon" multiple>
+                <?php foreach ($filters as $key => $label): ?>
+                    <option value="<?= $key ?>" <?= in_array($key, $selected_filters ?? []) ? 'selected' : '' ?>>
+                        <?= esc($label) ?>
+                    </option>
+                <?php endforeach; ?>
+            </select>
+        </div>
     </div>
 </div>
 
@@ -77,3 +89,15 @@
 </div>
 
 <?= view('partial/footer') ?>
+
+<script type="text/javascript">
+    new TomSelect('#filters', {
+        plugins: ['checkbox_options', 'remove_button'],
+        placeholder: '<?= lang('Common.none_selected_text') ?>',
+        hidePlaceholder: true,
+        closeAfterSelect: false,
+        onChange: function() {
+            $('#table').bootstrapTable('refresh');
+        }
+    });
+</script>
diff --git a/app/Views/configs/appearance_config.php b/app/Views/configs/appearance_config.php
new file mode 100644
index 000000000..ca8758f99
--- /dev/null
+++ b/app/Views/configs/appearance_config.php
@@ -0,0 +1,124 @@
+<?php
+/**
+ *
+ */
+
+$beta = '<sup><span class="badge bg-secondary">BETA</span></sup>';
+?>
+
+<?= form_open('config/saveAppearance/', ['id' => 'appearance_config_form']) ?>
+
+    <?php
+    $title_info['config_title'] = 'Appearance';
+    echo view('configs/config_header', $title_info);
+    ?>
+
+    <ul id="error_message_box" class="appearance_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="theme-change" class="form-label"><?= lang('Config.theme'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-binoculars"></i></span>
+                <select class="form-select" name="theme" id="theme-change">
+                    <?php foreach ($themes as $value => $display): ?>
+                        <option value="<?= $value ?>" <?= $config['theme'] == $value ? 'selected' : '' ?>><?= $display ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="login_form" class="form-label"><?= lang('Config.login_form'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-view-stacked"></i></span>
+                <select class="form-select" name="login_form" id="login_form">
+                    <option value="floating_labels" <?= $config['login_form'] == 'floating_labels' ? 'selected' : '' ?>><?= lang('Config.floating_labels') ?></option>
+                    <option value="input_groups" <?= $config['login_form'] == 'input_groups' ? 'selected' : '' ?>><?= lang('Config.input_groups') ?></option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="color_mode" class="form-label">Color Mode <?= $beta; ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="color-mode-icon"><i class="bi bi-palette"></i></span>
+                <select class="form-select" id="color_mode" name="color_mode" aria-describedby="color-mode-icon">
+                    <option value="light" <?= $config['color_mode'] == 'light' ? 'selected' : '' ?>>Light</option>
+                    <option value="dark" <?= $config['color_mode'] == 'dark' ? 'selected' : '' ?>>Dark</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="notify_position" class="form-label"><?= lang('Config.notify_alignment'); ?></label>
+            <div class="row" id="notify_position">
+                <div class="col-6 mb-3">
+                    <div class="input-group">
+                        <span class="input-group-text"><i class="bi bi-arrow-down-up"></i></span>
+                        <select class="form-select" name="notify_vertical_position">
+                            <option value="top" <?= $config['notify_vertical_position'] == 'top' ? 'selected' : '' ?>><?= lang('Config.top') ?></option>
+                            <option value="bottom" <?= $config['notify_vertical_position'] == 'bottom' ? 'selected' : '' ?>><?= lang('Config.bottom') ?></option>
+                        </select>
+                    </div>
+                </div>
+                <div class="col-6 mb-3">
+                    <div class="input-group">
+                        <span class="input-group-text"><i class="bi bi-arrow-left-right"></i></span>
+                        <select class="form-select" name="notify_horizontal_position">
+                            <option value="left" <?= $config['notify_horizontal_position'] == 'left' ? 'selected' : '' ?>><?= lang('Config.left') ?></option>
+                            <option value="center" <?= $config['notify_horizontal_position'] == 'center' ? 'selected' : '' ?>><?= lang('Config.center') ?></option>
+                            <option value="right" <?= $config['notify_horizontal_position'] == 'right' ? 'selected' : '' ?>><?= lang('Config.right') ?></option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="config_menu_position" class="form-label">Configuration Menu Position</label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="config-menu-position-icon"><i class="bi bi-distribute-horizontal"></i></span>
+                <select class="form-select" id="config_menu_position" name="config_menu_position" aria-describedby="config-menu-position-icon">
+                    <option value="start" <?= $config['config_menu_position'] == 'start' ? 'selected' : '' ?>>Start</option>
+                    <option value="end" <?= $config['config_menu_position'] == 'end' ? 'selected' : '' ?>>End</option>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="responsive_design" name="responsive_design" value="responsive_design" <?= $config['responsive_design'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="responsive_design">Responsive Design <?= $beta; ?></label>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_appearance"><?= lang('Common.submit'); ?></button>
+    </div>
+
+<?= form_close() ?>
+
+<script type="application/javascript">
+    // Validation and submit handling
+    $(document).ready(function() {
+        $('#appearance_config_form').validate($.extend(form_support.handler, {
+            submitHandler: function(form) {
+                $(form).ajaxSubmit({
+                    success: function(response) {
+                        $.notify({
+                            icon: 'bi bi-bell-fill',
+                            message: response.message + '&nbsp;<em>Click to refresh.</em>',
+                            url: 'javascript:window.location.reload();',
+                            target: '_self'
+                        }, {
+                            type: response.success ? 'success' : 'danger'
+                        })
+                    },
+                    dataType: 'json'
+                });
+            },
+
+            errorLabelContainer: '.appearance_error_message_box'
+        }));
+    });
+</script>
diff --git a/app/Views/configs/barcode_config.php b/app/Views/configs/barcode_config.php
index 495675628..6b25f0c24 100644
--- a/app/Views/configs/barcode_config.php
+++ b/app/Views/configs/barcode_config.php
@@ -6,256 +6,194 @@
  */
 ?>
 
-<?= form_open('config/saveBarcode/', ['id' => 'barcode_config_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveBarcode/', ['id' => 'barcode_config_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="barcode_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.barcode_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_type'), 'barcode_type', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'barcode_type',
-                        $support_barcode,
-                        $config['barcode_type'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
+    <ul id="error_message_box" class="barcode_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="barcode_type" class="form-label"><?= lang('Config.barcode_type'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-braces"></i></span>
+                <select class="form-select" name="barcode_type" id="barcode_type">
+                    <?php foreach ($support_barcode as $key => $value): ?>
+                        <option value="<?= $key ?>" <?= $config['barcode_type'] == $key ? 'selected' : '' ?>><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select>
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_width'), 'barcode_width', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'step'  => '5',
-                        'max'   => '350',
-                        'min'   => '60',
-                        'type'  => 'number',
-                        'name'  => 'barcode_width',
-                        'id'    => 'barcode_width',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['barcode_width']
-                    ]) ?>
-                </div>
+        <div class="col-6 col-lg-3">
+            <label for="barcode_width" class="form-label"><?= lang('Config.barcode_width'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrows"></i></span>
+                <input type="number" class="form-control" step="5" max="350" min="60" name="barcode_width" id="barcode_width" value="<?= $config['barcode_width'] ?>" required>
+                <span class="input-group-text">px</span>
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_height'), 'barcode_height', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'type'  => 'number',
-                        'min'   => 10,
-                        'max'   => 120,
-                        'name'  => 'barcode_height',
-                        'id'    => 'barcode_height',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['barcode_height']
-                    ]) ?>
-                </div>
+        <div class="col-6 col-lg-3">
+            <label for="barcode_height" class="form-label"><?= lang('Config.barcode_height'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrows-vertical"></i></span>
+                <input type="number" class="form-control" min="10" max="120" name="barcode_height" id="barcode_height" value="<?= $config['barcode_height'] ?>" required>
+                <span class="input-group-text">px</span>
             </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_font'), 'barcode_font', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-sm-2">
-                    <?= form_dropdown(
-                        'barcode_font',
-                        $barcode_fonts,
-                        $config['barcode_font'],
-                        'class="form-control input-sm" required'
-                    ) ?>
-                </div>
-                <div class="col-sm-2">
-                    <?= form_input([
-                        'type'  => 'number',
-                        'min'   => '1',
-                        'max'   => '30',
-                        'name'  => 'barcode_font_size',
-                        'id'    => 'barcode_font_size',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['barcode_font_size']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.allow_duplicate_barcodes'), 'allow_duplicate_barcodes', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'allow_duplicate_barcodes',
-                        'id'      => 'allow_duplicate_barcodes',
-                        'value'   => 'allow_duplicate_barcodes',
-                        'checked' => $config['allow_duplicate_barcodes'] == 1
-                    ]) ?>
-                    &nbsp;
-                    <label class="control-label">
-                        <span class="bi bi-exclamation-triangle" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.barcode_tooltip') ?>"></span>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_content'), 'barcode_content', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-8">
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'barcode_content',
-                            'value'   => 'id',
-                            'checked' => $config['barcode_content'] == 'id'
-                        ]) ?>
-                        <?= lang('Config.barcode_id') ?>
-                    </label>
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'barcode_content',
-                            'value'   => 'number',
-                            'checked' => $config['barcode_content'] == 'number'
-                        ]) ?>
-                        <?= lang('Config.barcode_number') ?>
-                    </label>
-                    &nbsp;
-                    &nbsp;
-                    <label class="checkbox-inline">
-                        <?= form_checkbox([
-                            'name'    => 'barcode_generate_if_empty',
-                            'value'   => 'barcode_generate_if_empty',
-                            'checked' => $config['barcode_generate_if_empty'] == 1
-                        ]) ?>
-                        <?= lang('Config.barcode_generate_if_empty') ?>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_formats'), 'barcode_formats', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <?php
-                    $barcode_formats = json_decode(config('OSPOS')->settings['barcode_formats']);
-                    echo form_dropdown([
-                        'name'      => 'barcode_formats[]',
-                        'id'        => 'barcode_formats',
-                        'options'   => !empty($barcode_formats) ? array_combine($barcode_formats, $barcode_formats) : [],
-                        'multiple'  => 'multiple',
-                        'data-role' => 'tagsinput'
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_layout'), 'barcode_layout', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-sm-10">
-                    <div class="form-group form-group-sm row">
-                        <label class="control-label col-sm-1"><?= lang('Config.barcode_first_row') . ' ' ?></label>
-                        <div class="col-sm-2">
-                            <?= form_dropdown(
-                                'barcode_first_row',
-                                [
-                                    'not_show'     => lang('Config.none'),
-                                    'name'         => lang('Items.name'),
-                                    'category'     => lang('Items.category'),
-                                    'cost_price'   => lang('Items.cost_price'),
-                                    'unit_price'   => lang('Items.unit_price'),
-                                    'company_name' => lang('Suppliers.company_name')
-                                ],
-                                $config['barcode_first_row'],
-                                ['class' => 'form-control input-sm']
-                            ); ?>
-                        </div>
-                        <label class="control-label col-sm-1"><?= lang('Config.barcode_second_row') . ' ' ?></label>
-                        <div class="col-sm-2">
-                            <?= form_dropdown(
-                                'barcode_second_row',
-                                [
-                                    'not_show'     => lang('Config.none'),
-                                    'name'         => lang('Items.name'),
-                                    'category'     => lang('Items.category'),
-                                    'cost_price'   => lang('Items.cost_price'),
-                                    'unit_price'   => lang('Items.unit_price'),
-                                    'item_code'    => lang('Items.item_number'),
-                                    'company_name' => lang('Suppliers.company_name')
-                                ],
-                                $config['barcode_second_row'],
-                                ['class' => 'form-control input-sm']
-                            ) ?>
-                        </div>
-                        <label class="control-label col-sm-1"><?= lang('Config.barcode_third_row') . ' ' ?></label>
-                        <div class="col-sm-2">
-                            <?= form_dropdown(
-                                'barcode_third_row',
-                                [
-                                    'not_show'     => lang('Config.none'),
-                                    'name'         => lang('Items.name'),
-                                    'category'     => lang('Items.category'),
-                                    'cost_price'   => lang('Items.cost_price'),
-                                    'unit_price'   => lang('Items.unit_price'),
-                                    'item_code'    => lang('Items.item_number'),
-                                    'company_name' => lang('Suppliers.company_name')
-                                ],
-                                $config['barcode_third_row'],
-                                ['class' => 'form-control input-sm']
-                            ) ?>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_number_in_row'), 'barcode_num_in_row', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'type'  => 'number',
-                        'name'  => 'barcode_num_in_row',
-                        'id'    => 'barcode_num_in_row',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['barcode_num_in_row']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_page_width'), 'barcode_page_width', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-sm-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'type'  => 'number',
-                            'min'   => '0',
-                            'max'   => '100',
-                            'name'  => 'barcode_page_width',
-                            'id'    => 'barcode_page_width',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['barcode_page_width']
-                        ]) ?>
-                        <span class="input-group-addon input-sm">%</span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.barcode_page_cellspacing'), 'barcode_page_cellspacing', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-sm-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'type'  => 'number',
-                            'name'  => 'barcode_page_cellspacing',
-                            'id'    => 'barcode_page_cellspacing',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['barcode_page_cellspacing']
-                        ]) ?>
-                        <span class="input-group-addon input-sm">px</span>
-                    </div>
-                </div>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_barcode',
-                'id'    => 'submit_barcode',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+        </div>
     </div>
+
+    <div class="row">
+        <div class="col-6 col-lg-3">
+            <label for="barcode_font" class="form-label"><?= lang('Config.barcode_font'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-fonts"></i></span>
+                <select class="form-select" id="barcode_font" name="barcode_font" required>
+                    <?php foreach ($barcode_fonts as $key => $value): ?>
+                        <option value="<?= $key ?>" <?= $config['barcode_font'] == $key ? 'selected' : '' ?>><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-6 col-lg-3">
+            <label for="barcode_font_size" class="form-label">Font Size<sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrows-angle-expand"></i></span>
+                <input type="number" class="form-control" min="1" max="30" name="barcode_font_size" id="barcode_font_size" value="<?= $config['barcode_font_size'] ?>" required>
+                <span class="input-group-text">px</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="allow_duplicate_barcodes" name="allow_duplicate_barcodes" value="allow_duplicate_barcodes" <?= $config['allow_duplicate_barcodes'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="allow_duplicate_barcodes"><?= lang('Config.allow_duplicate_barcodes'); ?></label>
+        <div class="form-text"><i class="bi bi-info-square pe-1"></i><?= lang('Config.barcode_tooltip') ?></div>
+    </div>
+
+    <label for="barcode_content" class="form-label"><?= lang('Config.barcode_content'); ?></label>
+    <div class="row mb-3">
+        <div class="col-12">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="barcode_content" id="barcode_content_id" value="id" <?= $config['barcode_content'] == 'id' ? 'checked' : '' ?>>
+                <label class="form-check-label" for="barcode_content_id"><?= lang('Config.barcode_id') ?></label>
+            </div>
+
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="barcode_content" id="barcode_content_number" value="number" <?= $config['barcode_content'] == 'number' ? 'checked' : '' ?>>
+                <label class="form-check-label" for="barcode_content_number"><?= lang('Config.barcode_number') ?></label>
+            </div>
+
+            <div class="form-check form-check-inline form-switch">
+                <input class="form-check-input" type="checkbox" role="switch" id="barcode_generate_if_empty" name="barcode_generate_if_empty" value="barcode_generate_if_empty" <?= $config['barcode_generate_if_empty'] == 1 ? 'checked' : '' ?>>
+                <label class="form-check-label" for="barcode_generate_if_empty"><?= lang('Config.barcode_generate_if_empty'); ?></label>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="barcode_formats" class="form-label"><?= lang('Config.barcode_formats'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-code-square"></i></span>
+                <!-- <?php
+                $barcode_formats = json_decode(config('OSPOS')->settings['barcode_formats']);
+                $options = !empty($barcode_formats) ? array_combine($barcode_formats, $barcode_formats) : [];
+                ?>
+                <select class="form-select" id="barcode_formats" name="barcode_formats[]" data-role="tagsinput" multiple>
+                    <?php foreach ($options as $value): ?>
+                        <option value="<?= $value ?>" <?= in_array($value, $barcode_formats) ? 'selected' : '' ?>><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select> -->
+                <input type="text" class="form-control" disabled>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <label for="barcode_layout" class="form-label"><?= lang('Config.barcode_layout'); ?></label>
+        <div class="col-6 col-lg-3">
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-1-square"></i></span>
+                <select name="barcode_first_row" class="form-select">
+                    <option value="not_show" <?= $config['barcode_first_row'] == 'not_show' ? 'selected' : '' ?>><?= lang('Config.none') ?></option>
+                    <option value="name" <?= $config['barcode_first_row'] == 'name' ? 'selected' : '' ?>><?= lang('Items.name') ?></option>
+                    <option value="category" <?= $config['barcode_first_row'] == 'category' ? 'selected' : '' ?>><?= lang('Items.category') ?></option>
+                    <option value="cost_price" <?= $config['barcode_first_row'] == 'cost_price' ? 'selected' : '' ?>><?= lang('Items.cost_price') ?></option>
+                    <option value="unit_price" <?= $config['barcode_first_row'] == 'unit_price' ? 'selected' : '' ?>><?= lang('Items.unit_price') ?></option>
+                    <option value="company_name" <?= $config['barcode_first_row'] == 'company_name' ? 'selected' : '' ?>><?= lang('Suppliers.company_name') ?></option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-6 col-lg-3">
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-2-square"></i></span>
+                <select name="barcode_second_row" class="form-select">
+                    <option value="not_show" <?= $config['barcode_second_row'] == 'not_show' ? 'selected' : '' ?>><?= lang('Config.none') ?></option>
+                    <option value="name" <?= $config['barcode_second_row'] == 'name' ? 'selected' : '' ?>><?= lang('Items.name') ?></option>
+                    <option value="category" <?= $config['barcode_second_row'] == 'category' ? 'selected' : '' ?>><?= lang('Items.category') ?></option>
+                    <option value="cost_price" <?= $config['barcode_second_row'] == 'cost_price' ? 'selected' : '' ?>><?= lang('Items.cost_price') ?></option>
+                    <option value="unit_price" <?= $config['barcode_second_row'] == 'unit_price' ? 'selected' : '' ?>><?= lang('Items.unit_price') ?></option>
+                    <option value="item_code" <?= $config['barcode_second_row'] == 'item_code' ? 'selected' : '' ?>><?= lang('Items.item_number') ?></option>
+                    <option value="company_name" <?= $config['barcode_second_row'] == 'company_name' ? 'selected' : '' ?>><?= lang('Suppliers.company_name') ?></option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-6 col-lg-3">
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-3-square"></i></span>
+                <select name="barcode_third_row" class="form-select">
+                    <option value="not_show" <?= $config['barcode_third_row'] == 'not_show' ? 'selected' : '' ?>><?= lang('Config.none') ?></option>
+                    <option value="name" <?= $config['barcode_third_row'] == 'name' ? 'selected' : '' ?>><?= lang('Items.name') ?></option>
+                    <option value="category" <?= $config['barcode_third_row'] == 'category' ? 'selected' : '' ?>><?= lang('Items.category') ?></option>
+                    <option value="cost_price" <?= $config['barcode_third_row'] == 'cost_price' ? 'selected' : '' ?>><?= lang('Items.cost_price') ?></option>
+                    <option value="unit_price" <?= $config['barcode_third_row'] == 'unit_price' ? 'selected' : '' ?>><?= lang('Items.unit_price') ?></option>
+                    <option value="item_code" <?= $config['barcode_third_row'] == 'item_code' ? 'selected' : '' ?>><?= lang('Items.item_number') ?></option>
+                    <option value="company_name" <?= $config['barcode_third_row'] == 'company_name' ? 'selected' : '' ?>><?= lang('Suppliers.company_name') ?></option>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-6 col-lg-3">
+            <label for="barcode_num_in_row" class="form-label"><?= lang('Config.barcode_number_in_row'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-123"></i></span>
+                <input type="number" name="barcode_num_in_row" id="barcode_num_in_row" class="form-control" value="<?= $config['barcode_num_in_row'] ?>" required>
+            </div>
+        </div>
+
+        <div class="col-6 col-lg-3">
+            <label for="barcode_page_width" class="form-label"><?= lang('Config.barcode_page_width'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrows"></i></span>
+                <input type="number" min="0" max="100" name="barcode_page_width" id="barcode_page_width" class="form-control" value="<?= $config['barcode_page_width'] ?>" required>
+                <span class="input-group-text"><i class="bi bi-percent"></i></span>
+            </div>
+        </div>
+
+        <div class="col-6 col-lg-3">
+            <label for="barcode_page_cellspacing" class="form-label"><?= lang('Config.barcode_page_cellspacing'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-distribute-horizontal"></i></span>
+                <input type="number" name="barcode_page_cellspacing" id="barcode_page_cellspacing" class="form-control" value="<?= $config['barcode_page_cellspacing'] ?>" required>
+                <span class="input-group-text">px</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_barcode"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -263,7 +201,7 @@
     $(document).ready(function() {
         $('#barcode_config_form').validate($.extend(form_support.handler, {
 
-            errorLabelContainer: "#barcode_error_message_box",
+            errorLabelContainer: ".barcode_error_message_box",
 
             rules: {
                 barcode_width: {
diff --git a/app/Views/configs/config_header.php b/app/Views/configs/config_header.php
new file mode 100644
index 000000000..6da09a3f7
--- /dev/null
+++ b/app/Views/configs/config_header.php
@@ -0,0 +1,5 @@
+<div class="d-flex">
+    <h4 class="flex-grow-1 fw-bold"><?= $config_title; ?></h4>
+    <h5 class="link-secondary d-print-none" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Learn more in our docs"><i class="bi bi-journal-arrow-up"></i></h5>
+</div>
+<hr class="mt-0 d-print-none">
diff --git a/app/Views/configs/email_config.php b/app/Views/configs/email_config.php
index f7806d542..25a8a6550 100644
--- a/app/Views/configs/email_config.php
+++ b/app/Views/configs/email_config.php
@@ -4,138 +4,85 @@
  */
 ?>
 
-<?= form_open('config/saveEmail/', ['id' => 'email_config_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveEmail/', ['id' => 'email_config_form', 'enctype' => 'multipart/form-data']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="email_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.email_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.email_protocol'), 'protocol', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'protocol',
-                        [
-                            'mail'     => 'Mail',
-                            'sendmail' => 'Sendmail',
-                            'smtp'     => 'SMTP'
-                        ],
-                        $config['protocol'],
-                        'class="form-control input-sm" id="protocol"'
-                    ) ?>
-                </div>
+    <ul id="error_message_box" class="email_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="protocol" class="form-label"><?= lang('Config.email_protocol'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-mailbox"></i></span>
+                <?= form_dropdown('protocol', array('mail' => 'Mail', 'sendmail' => 'Sendmail', 'smtp' => 'SMTP'), $config['protocol'], array('class' => 'form-select', 'id' => 'protocol')); ?>
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.email_mailpath'), 'mailpath', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <?= form_input([
-                        'name'  => 'mailpath',
-                        'id'    => 'mailpath',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['mailpath']
-                    ]) ?>
-                </div>
+        <div class="col-12 col-lg-6">
+            <label for="mailpath" class="form-label"><?= lang('Config.email_mailpath'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-braces"></i></span>
+                <input type="text" name="mailpath" class="form-control" id="mailpath" value="<?= $config['mailpath']; ?>">
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.email_smtp_host'), 'smtp_host', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'smtp_host',
-                        'id'    => 'smtp_host',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['smtp_host']
-                    ]) ?>
-                </div>
+        <div class="col-12 col-lg-6">
+            <label for="smtp_host" class="form-label"><?= lang('Config.email_smtp_host'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-database"></i></span>
+                <input type="text" name="smtp_host" class="form-control" id="smtp_host" value="<?= $config['smtp_host']; ?>">
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.email_smtp_port'), 'smtp_port', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'type'  => 'number',
-                        'name'  => 'smtp_port',
-                        'id'    => 'smtp_port',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['smtp_port']
-                    ]) ?>
-                </div>
+        <div class="col-12 col-lg-6">
+            <label for="smtp_port" class="form-label"><?= lang('Config.email_smtp_port'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-door-open"></i></span>
+                <input type="number" name="smtp_port" class="form-control" id="smtp_port" value="<?= $config['smtp_port']; ?>">
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.email_smtp_crypto'), 'smtp_crypto', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'smtp_crypto',
-                        [
-                            ''    => 'None',
-                            'tls' => 'TLS',
-                            'ssl' => 'SSL'
-                        ],
-                        $config['smtp_crypto'],
-                        'class="form-control input-sm" id="smtp_crypto"'
-                    ) ?>
-                </div>
+        <div class="col-12 col-lg-6">
+            <label for="smtp_crypto" class="form-label"><?= lang('Config.email_smtp_crypto'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-shield-lock"></i></span>
+                <?= form_dropdown('smtp_crypto', array('' => 'None', 'tls' => 'TLS', 'ssl' => 'SSL'), $config['smtp_crypto'], array('class' => 'form-select', 'id' => 'smtp_crypto')); ?>
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.email_smtp_timeout'), 'smtp_timeout', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'type'  => 'number',
-                        'name'  => 'smtp_timeout',
-                        'id'    => 'smtp_timeout',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['smtp_timeout']
-                    ]) ?>
-                </div>
+        <div class="col-12 col-lg-6">
+            <label for="smtp_timeout" class="form-label"><?= lang('Config.email_smtp_timeout'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-stopwatch"></i></span>
+                <input type="number" name="smtp_timeout" class="form-control" id="smtp_timeout" value="<?= $config['smtp_timeout']; ?>">
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.email_smtp_user'), 'smtp_user', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <i class="bi bi-person"></i>
-                        </span>
-                        <?= form_input([
-                            'name'  => 'smtp_user',
-                            'id'    => 'smtp_user',
-                            'class' => 'form-control input-sm',
-                            'value' => $config['smtp_user']
-                        ]) ?>
-                    </div>
-                </div>
+        <div class="col-12 col-lg-6">
+            <label for="smtp_user" class="form-label"><?= lang('Config.email_smtp_user'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-person"></i></span>
+                <input type="text" name="smtp_user" class="form-control" id="smtp_user" value="<?= $config['smtp_user']; ?>">
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.email_smtp_pass'), 'smtp_pass', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <i class="bi bi-lock"></i>
-                        </span>
-                        <?= form_password([
-                            'name'  => 'smtp_pass',
-                            'id'    => 'smtp_pass',
-                            'class' => 'form-control input-sm',
-                            'value' => $config['smtp_pass']
-                        ]) ?>
-                    </div>
-                </div>
+        <div class="col-12 col-lg-6">
+            <label for="smtp_pass" class="form-label"><?= lang('Config.email_smtp_pass'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-lock"></i></span>
+                <input type="password" name="smtp_pass" class="form-control" id="smtp_pass" value="<?= $config['smtp_pass']; ?>">
             </div>
-
-            <?= form_submit([
-                'name'  => 'submit_email',
-                'id'    => 'submit_email',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+        </div>
     </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_email"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -164,6 +111,7 @@
                     },
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
@@ -175,7 +123,7 @@
                 });
             },
 
-            errorLabelContainer: '#email_error_message_box'
+            errorLabelContainer: '.email_error_message_box'
         }));
     });
 </script>
diff --git a/app/Views/configs/general_config.php b/app/Views/configs/general_config.php
index 2e5581edf..1afe4ae77 100644
--- a/app/Views/configs/general_config.php
+++ b/app/Views/configs/general_config.php
@@ -9,459 +9,209 @@
  */
 ?>
 
-<?= form_open('config/saveGeneral/', ['id' => 'general_config_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveGeneral/', ['id' => 'general_config_form', 'enctype' => 'multipart/form-data']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="general_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.general_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.theme'), 'theme', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-sm-10">
-                    <div class="form-group form-group-sm row">
-                        <div class="col-sm-3">
-                            <?= form_dropdown(
-                                'theme',
-                                $themes,
-                                $config['theme'],
-                                'class="form-control input-sm" id="theme-change"'
-                            ) ?>
-                        </div>
-                        <div class="col-sm-7">
-                            <a href="<?= 'https://bootswatch.com/3/' . ('bootstrap' == ($config['theme']) ? 'default' : esc($config['theme'])) ?>" target="_blank" rel=”noopener”>
-                                <span><?= lang('Config.theme_preview') . ' ' . ucfirst(esc($config['theme'])) . ' ' ?></span>
-                                <i class="bi bi-box-arrow-up-right"></i>
-                            </a>
-                        </div>
-                    </div>
-                </div>
+    <ul id="error_message_box" class="general_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="default_sales_discount" class="form-label"><?= lang('Config.default_sales_discount') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-cart-dash"></i></span>
+                <input class="form-control" type="number" min="0" max="100" name="default_sales_discount" id="default_sales_discount" value="<?= $config['default_sales_discount'] ?>" required>
+                <input type="radio" class="btn-check" name="default_sales_discount_type" id="dsd_type_1" value="1" <?= $config['default_sales_discount_type'] == 1 ? 'checked' : '' ?>>
+                <label class="btn btn-outline-primary fw-semibold" for="dsd_type_1"><?= $config['currency_symbol'] ?></label>
+                <input type="radio" class="btn-check" name="default_sales_discount_type" id="dsd_type_0" value="0" <?= $config['default_sales_discount_type'] == 0 ? 'checked' : '' ?>>
+                <label class="btn btn-outline-primary fw-semibold" for="dsd_type_0">%</label>
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.login_form'), 'login_form', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'login_form',
-                        [
-                            'floating_labels' => lang('Config.floating_labels'),
-                            'input_groups'    => lang('Config.input_groups')
-                        ],
-                        $config['login_form'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="default_receivings_discount" class="form-label"><?= lang('Config.default_receivings_discount') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-bag-dash"></i></span>
+                <input class="form-control" type="number" min="0" max="100" name="default_receivings_discount" id="default_receivings_discount" value="<?= $config['default_receivings_discount'] ?>" required>
+                <input type="radio" class="btn-check" name="default_receivings_discount_type" id="drd_type_1" value="1" <?= $config['default_receivings_discount_type'] == 1 ? 'checked' : '' ?>>
+                <label class="btn btn-outline-primary fw-semibold" for="drd_type_1"><?= $config['currency_symbol'] ?></label>
+                <input type="radio" class="btn-check" name="default_receivings_discount_type" id="drd_type_0" value="0" <?= $config['default_receivings_discount_type'] == 0 ? 'checked' : '' ?>>
+                <label class="btn btn-outline-primary fw-semibold" for="drd_type_0">%</label>
             </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.default_sales_discount'), 'default_sales_discount', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'name'  => 'default_sales_discount',
-                            'id'    => 'default_sales_discount',
-                            'class' => 'form-control input-sm required',
-                            'type'  => 'number',
-                            'min'   => 0,
-                            'max'   => 100,
-                            'value' => $config['default_sales_discount']
-                        ]) ?>
-                        <span class="input-group-btn">
-                            <?= form_checkbox([
-                                'id'           => 'default_sales_discount_type',
-                                'name'         => 'default_sales_discount_type',
-                                'value'        => 1,
-                                'data-toggle'  => 'toggle',
-                                'data-size'    => 'normal',
-                                'data-onstyle' => 'success',
-                                'data-on'      => '<b>' . $config['currency_symbol'] . '</b>',
-                                'data-off'     => '<b>%</b>',
-                                'checked'      => $config['default_sales_discount_type'] == 1
-                            ]) ?>
-                        </span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.default_receivings_discount'), 'default_receivings_discount', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'name'  => 'default_receivings_discount',
-                            'id'    => 'default_receivings_discount',
-                            'class' => 'form-control input-sm required',
-                            'type'  => 'number',
-                            'min'   => 0,
-                            'max'   => 100,
-                            'value' => $config['default_receivings_discount']
-                        ]) ?>
-                        <span class="input-group-btn">
-                            <?= form_checkbox([
-                                'id'           => 'default_receivings_discount_type',
-                                'name'         => 'default_receivings_discount_type',
-                                'value'        => 1,
-                                'data-toggle'  => 'toggle',
-                                'data-size'    => 'normal',
-                                'data-onstyle' => 'success',
-                                'data-on'      => '<b>' . $config['currency_symbol'] . '</b>',
-                                'data-off'     => '<b>%</b>',
-                                'checked'      => $config['default_receivings_discount_type'] == 1
-                            ]) ?>
-                        </span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.enforce_privacy'), 'enforce_privacy', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'enforce_privacy',
-                        'id'      => 'enforce_privacy',
-                        'value'   => 'enforce_privacy',
-                        'checked' => $config['enforce_privacy'] == 1
-                    ]) ?>
-                    &nbsp;
-                    <label class="control-label">
-                        <span class="bi bi-info-circle" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.enforce_privacy_tooltip') ?>"></span>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receiving_calculate_average_price'), 'receiving_calculate_average_price', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'receiving_calculate_average_price',
-                        'id'      => 'receiving_calculate_average_price',
-                        'value'   => 'receiving_calculate_average_price',
-                        'checked' => $config['receiving_calculate_average_price'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.lines_per_page'), 'lines_per_page', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'lines_per_page',
-                        'id'    => 'lines_per_page',
-                        'class' => 'form-control input-sm required',
-                        'type'  => 'number',
-                        'min'   => 10,
-                        'max'   => 1000,
-                        'value' => $config['lines_per_page']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.notify_alignment'), 'notify_horizontal_position', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-sm-10">
-                    <div class="form-group form-group-sm row">
-                        <div class="col-sm-2">
-                            <?= form_dropdown(
-                                'notify_vertical_position',
-                                [
-                                    'top'    => lang('Config.top'),
-                                    'bottom' => lang('Config.bottom')
-                                ],
-                                $config['notify_vertical_position'],
-                                'class="form-control input-sm"'
-                            ) ?>
-                        </div>
-                        <div class="col-sm-2">
-                            <?= form_dropdown(
-                                'notify_horizontal_position',
-                                [
-                                    'left'   => lang('Config.left'),
-                                    'center' => lang('Config.center'),
-                                    'right'  => lang('Config.right')
-                                ],
-                                $config['notify_horizontal_position'],
-                                'class="form-control input-sm"'
-                            ) ?>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.image_restrictions'), 'image_restrictions', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-sm-10">
-                    <div class="form-group form-group-sm row">
-                        <div class="col-sm-2">
-                            <div class="input-group">
-                                <span class="input-group-addon input-sm">
-                                    <i class="bi bi-arrows"></i>
-                                </span>
-                                <?= form_input([
-                                    'name'           => 'image_max_width',
-                                    'id'             => 'image_max_width',
-                                    'class'          => 'form-control input-sm required',
-                                    'type'           => 'number',
-                                    'min'            => 128,
-                                    'max'            => 3840,
-                                    'value'          => $config['image_max_width'],
-                                    'data-toggle'    => 'tooltip',
-                                    'data-placement' => 'top',
-                                    'title'          => lang('Config.image_max_width_tooltip')
-                                ]) ?>
-                            </div>
-                        </div>
-                        <div class="col-sm-2">
-                            <div class="input-group">
-                                <span class="input-group-addon input-sm">
-                                    <i class="bi bi-arrows-vertical"></i>
-                                </span>
-                                <?= form_input([
-                                    'name'           => 'image_max_height',
-                                    'id'             => 'image_max_height',
-                                    'class'          => 'form-control input-sm required',
-                                    'type'           => 'number',
-                                    'min'            => 128,
-                                    'max'            => 3840,
-                                    'value'          => $config['image_max_height'],
-                                    'data-toggle'    => 'tooltip',
-                                    'data-placement' => 'top',
-                                    'title'          => lang('Config.image_max_height_tooltip')
-                                ]) ?>
-                            </div>
-                        </div>
-                        <div class="col-sm-2">
-                            <div class="input-group">
-                                <span class="input-group-addon input-sm">
-                                    <i class="bi bi-hdd"></i>
-                                </span>
-                                <?= form_input([
-                                    'name'           => 'image_max_size',
-                                    'id'             => 'image_max_size',
-                                    'class'          => 'form-control input-sm required',
-                                    'type'           => 'number',
-                                    'min'            => 128,
-                                    'max'            => 2048,
-                                    'value'          => $config['image_max_size'],
-                                    'data-toggle'    => 'tooltip',
-                                    'data-placement' => 'top',
-                                    'title'          => lang('Config.image_max_size_tooltip')
-                                ]) ?>
-                            </div>
-                        </div>
-                        <div class="col-sm-4">
-                            <div class="input-group">
-                                <span class="input-group-addon input-sm"><?= lang('Config.image_allowed_file_types') ?></span>
-                                <?= form_multiselect([
-                                    'name'                      => 'image_allowed_types[]',
-                                    'options'                   => $image_allowed_types,
-                                    'selected'                  => $selected_image_allowed_types,
-                                    'id'                        => 'image_allowed_types',
-                                    'class'                     => 'selectpicker show-menu-arrow',
-                                    'data-none-selected-text'   => lang('Common.none_selected_text'),
-                                    'data-selected-text-format' => 'count > 1',
-                                    'data-style'                => 'btn-default btn-sm',
-                                    'data-width'                => '100%'
-                                ]) ?>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.gcaptcha_enable'), 'gcaptcha_enable', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'gcaptcha_enable',
-                        'id'      => 'gcaptcha_enable',
-                        'value'   => 'gcaptcha_enable',
-                        'checked' => $config['gcaptcha_enable'] == 1
-                    ]) ?>
-                    <label class="control-label">
-                        <a href="https://www.google.com/recaptcha/admin" target="_blank">
-                            <span class="bi bi-info-circle" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.gcaptcha_tooltip') ?>"></span>
-                        </a>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.gcaptcha_site_key'), 'config_gcaptcha_site_key', ['class' => 'required control-label col-xs-2', 'id' => 'config_gcaptcha_site_key']) ?>
-                <div class="col-xs-4">
-                    <?= form_input([
-                        'name'  => 'gcaptcha_site_key',
-                        'id'    => 'gcaptcha_site_key',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['gcaptcha_site_key']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.gcaptcha_secret_key'), 'config_gcaptcha_secret_key', ['class' => 'required control-label col-xs-2', 'id' => 'config_gcaptcha_secret_key']) ?>
-                <div class="col-xs-4">
-                    <?= form_input([
-                        'name'  => 'gcaptcha_secret_key',
-                        'id'    => 'gcaptcha_secret_key',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['gcaptcha_secret_key']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.suggestions_layout'), 'suggestions_layout', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-sm-10">
-                    <div class="form-group form-group-sm row">
-                        <div class="col-sm-3">
-                            <div class="input-group">
-                                <span class="input-group-addon input-sm"><?= lang('Config.suggestions_first_column') ?></span>
-                                <?= form_dropdown(
-                                    'suggestions_first_column',
-                                    [
-                                        'name'        => lang('Items.name'),
-                                        'item_number' => lang('Items.number_information'),
-                                        'unit_price'  => lang('Items.unit_price'),
-                                        'cost_price'  => lang('Items.cost_price')
-                                    ],
-                                    $config['suggestions_first_column'],
-                                    'class="form-control input-sm"'
-                                ) ?>
-                            </div>
-                        </div>
-                        <div class="col-sm-3">
-                            <div class="input-group">
-                                <span class="input-group-addon input-sm"><?= lang('Config.suggestions_second_column') ?></span>
-                                <?= form_dropdown(
-                                    'suggestions_second_column',
-                                    [
-                                        ''            => lang('Config.none'),
-                                        'name'        => lang('Items.name'),
-                                        'item_number' => lang('Items.number_information'),
-                                        'unit_price'  => lang('Items.unit_price'),
-                                        'cost_price'  => lang('Items.cost_price')
-                                    ],
-                                    $config['suggestions_second_column'],
-                                    'class="form-control input-sm"'
-                                ) ?>
-                            </div>
-                        </div>
-                        <div class="col-sm-3">
-                            <div class="input-group">
-                                <span class="input-group-addon input-sm"><?= lang('Config.suggestions_third_column') ?></span>
-                                <?= form_dropdown(
-                                    'suggestions_third_column',
-                                    [
-                                        ''            => lang('Config.none'),
-                                        'name'        => lang('Items.name'),
-                                        'item_number' => lang('Items.number_information'),
-                                        'unit_price'  => lang('Items.unit_price'),
-                                        'cost_price'  => lang('Items.cost_price')
-                                    ],
-                                    $config['suggestions_third_column'],
-                                    'class="form-control input-sm"'
-                                ) ?>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.giftcard_number'), 'giftcard_number', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-8">
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'giftcard_number',
-                            'value'   => 'series',
-                            'checked' => $config['giftcard_number'] == 'series'
-                        ]) ?>
-                        <?= lang('Config.giftcard_series') ?>
-                    </label>
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'giftcard_number',
-                            'value'   => 'random',
-                            'checked' => $config['giftcard_number'] == 'random'
-                        ]) ?>
-                        <?= lang('Config.giftcard_random') ?>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.derive_sale_quantity'), 'derive_sale_quantity', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'derive_sale_quantity',
-                        'id'      => 'derive_sale_quantity',
-                        'value'   => 'derive_sale_quantity',
-                        'checked' => $config['derive_sale_quantity'] == 1
-                    ]) ?>
-                    &nbsp;
-                    <label class="control-label">
-                        <span class="bi bi-info-circle" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.derive_sale_quantity_tooltip') ?>"></span>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.show_office_group'), 'show_office_group', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'show_office_group',
-                        'id'      => 'show_office_group',
-                        'value'   => 'show_office_group',
-                        'checked' => $show_office_group > 0
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.multi_pack_enabled'), 'multi_pack_enabled', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'multi_pack_enabled',
-                        'id'      => 'multi_pack_enabled',
-                        'value'   => 'multi_pack_enabled',
-                        'checked' => $config['multi_pack_enabled'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.include_hsn'), 'include_hsn', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'include_hsn',
-                        'id'      => 'include_hsn',
-                        'value'   => 'include_hsn',
-                        'checked' => $config['include_hsn'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.category_dropdown'), 'category_dropdown', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'category_dropdown',
-                        'id'      => 'category_dropdown',
-                        'value'   => 'category_dropdown',
-                        'checked' => $config['category_dropdown'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_general',
-                'id'    => 'submit_general',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+        </div>
     </div>
+
+    <div class="row">
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="lines_per_page" class="form-label"><?= lang('Config.lines_per_page'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-list"></i></span>
+                <input type="number" min="10" max="1000" name="lines_per_page" class="form-control" id="lines_per_page" value="<?= $config['lines_per_page']; ?>" required>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="enforce_privacy" name="enforce_privacy" <?= $config['enforce_privacy'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="enforce_privacy"><?= lang('Config.enforce_privacy'); ?></label>
+        <div class="form-text"><i class="bi bi-info-square pe-1"></i><?= lang('Config.enforce_privacy_tooltip') ?></div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="receiving_calculate_average_price" name="receiving_calculate_average_price" <?= $config['receiving_calculate_average_price'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="receiving_calculate_average_price"><?= lang('Config.receiving_calculate_average_price'); ?></label>
+    </div>
+
+    <div class="row">
+        <label class="form-label"><?= lang('Config.image_restrictions'); ?></label>
+        <div class="col-12 col-sm-6 col-xl-3">
+            <div class="input-group mb-3" data-bs-toggle="tooltip" title="<?= lang('Config.image_max_width_tooltip'); ?>">
+                <span class="input-group-text"><i class="bi bi-arrows"></i></span>
+                <input type="number" min="128" max="3840" name="image_max_width" id="image_max_width" class="form-control" value="<?= $config['image_max_width']; ?>" required>
+                <span class="input-group-text">px</span>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xl-3">
+            <div class="input-group mb-3" data-bs-toggle="tooltip" title="<?= lang('Config.image_max_height_tooltip'); ?>">
+                <span class="input-group-text"><i class="bi bi-arrows-vertical"></i></span>
+                <input type="number" min="128" max="3840" name="image_max_height" id="image_max_height" class="form-control" value="<?= $config['image_max_height']; ?>" required>
+                <span class="input-group-text">px</span>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xl-3">
+            <div class="input-group mb-3" data-bs-toggle="tooltip" title="<?= lang('Config.image_max_size_tooltip'); ?>">
+                <span class="input-group-text"><i class="bi bi-hdd"></i></span>
+                <input type="number" min="128" max="2048" name="image_max_size" id="image_max_size" class="form-control" value="<?= $config['image_max_size']; ?>" required>
+                <span class="input-group-text">kb</span>
+            </div>
+        </div>
+
+        <div class="col-12 col-xl-9">
+            <div class="input-group mb-3" data-bs-toggle="tooltip" title="<?= lang('Config.image_allowed_file_types'); ?>">
+                <span class="input-group-text"><i class="bi bi-images"></i></span>
+                <select name="image_allowed_types[]" id="image_allowed_types" class="form-select" multiple placeholder="<?= lang('Config.image_allowed_file_types'); ?>" required>
+                    <?php foreach($image_allowed_types as $type): ?>
+                    <option value="<?= $type; ?>" <?= in_array($type, $selected_image_allowed_types) ? 'selected' : ''; ?>>
+                        <?= $type; ?>
+                    </option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" name="gcaptcha_enable" id="gcaptcha_enable" value="gcaptcha_enable" <?= $config['gcaptcha_enable'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="gcaptcha_enable"><?= lang('Config.gcaptcha_enable') ?></label>
+        <a class="d-inline-block" href="https://google.com/recaptcha/admin" target="_blank" rel="noopener"><i class="bi bi-link-45deg link-secondary"></i></a>
+        <div class="form-text"><i class="bi bi-info-square pe-1"></i><?= lang('Config.gcaptcha_tooltip') ?></div>
+    </div>
+
+    <div class="row mb-3">
+        <div class="col-12 col-lg-6">
+            <label for="gcaptcha_site_key" class="form-label"><?= lang('Config.gcaptcha_site_key') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-key"></i></span>
+                <input type="text" class="form-control" name="gcaptcha_site_key" id="gcaptcha_site_key" required>
+            </div>
+        </div>
+        <div class="col-12 col-lg-6">
+            <label for="gcaptcha_secret_key" class="form-label"><?= lang('Config.gcaptcha_secret_key') ?></label>
+            <div class="input-group">
+                <span class="input-group-text"><i class="bi bi-stars"></i></span>
+                <input type="text" class="form-control" name="gcaptcha_secret_key" id="gcaptcha_secret_key" required>
+            </div>
+        </div>
+    </div>
+
+    <div class="row" id="suggestions_layout">
+        <label for="suggestions_layout" class="form-label"><?= lang('Config.suggestions_layout'); ?></label>
+        <div class="col-12 col-sm-6 col-xl-4 col-xxl-3 mb-3">
+            <div class="input-group">
+                <span class="input-group-text"><i class="bi bi-layout-three-columns"></i>&nbsp;1.</span>
+                <select class="form-select" name="suggestions_first_column">
+                    <option value="name" <?= $config['suggestions_first_column'] == 'name' ? 'selected' : '' ?>><?= lang('Items.name') ?></option>
+                    <option value="item_number" <?= $config['suggestions_first_column'] == 'item_number' ? 'selected' : '' ?>><?= lang('Items.number_information') ?></option>
+                    <option value="unit_price" <?= $config['suggestions_first_column'] == 'unit_price' ? 'selected' : '' ?>><?= lang('Items.unit_price') ?></option>
+                    <option value="cost_price" <?= $config['suggestions_first_column'] == 'cost_price' ? 'selected' : '' ?>><?= lang('Items.cost_price') ?></option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xl-4 col-xxl-3 mb-3">
+            <div class="input-group">
+                <span class="input-group-text"><i class="bi bi-layout-three-columns"></i>&nbsp;2.</span>
+                <select class="form-select" name="suggestions_second_column">
+                    <option value="" <?= $config['suggestions_second_column'] == null ? 'selected' : '' ?>><?= lang('Config.none') ?></option>
+                    <option value="name" <?= $config['suggestions_second_column'] == 'name' ? 'selected' : '' ?>><?= lang('Items.name') ?></option>
+                    <option value="item_number" <?= $config['suggestions_second_column'] == 'item_number' ? 'selected' : '' ?>><?= lang('Items.number_information') ?></option>
+                    <option value="unit_price" <?= $config['suggestions_second_column'] == 'unit_price' ? 'selected' : '' ?>><?= lang('Items.unit_price') ?></option>
+                    <option value="cost_price" <?= $config['suggestions_second_column'] == 'cost_price' ? 'selected' : '' ?>><?= lang('Items.cost_price') ?></option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xl-4 col-xxl-3 mb-3">
+            <div class="input-group">
+                <span class="input-group-text"><i class="bi bi-layout-three-columns"></i>&nbsp;3.</span>
+                <select class="form-select" name="suggestions_third_column">
+                    <option value="" <?= $config['suggestions_third_column'] == null ? 'selected' : '' ?>><?= lang('Config.none') ?></option>
+                    <option value="name" <?= $config['suggestions_third_column'] == 'name' ? 'selected' : '' ?>><?= lang('Items.name') ?></option>
+                    <option value="item_number" <?= $config['suggestions_third_column'] == 'item_number' ? 'selected' : '' ?>><?= lang('Items.number_information') ?></option>
+                    <option value="unit_price" <?= $config['suggestions_third_column'] == 'unit_price' ? 'selected' : '' ?>><?= lang('Items.unit_price') ?></option>
+                    <option value="cost_price" <?= $config['suggestions_third_column'] == 'cost_price' ? 'selected' : '' ?>><?= lang('Items.cost_price') ?></option>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <label for="giftcard_number" class="form-label"><?= lang('Config.giftcard_number'); ?></label>
+    <div class="mb-3">
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="giftcard_number" id="giftcard_series" value="series" <?= $config['giftcard_number'] == 'series' ? 'checked' : '' ?>>
+            <label class="form-check-label" for="giftcard_series"><?= lang('Config.giftcard_series') ?></label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="giftcard_number" id="giftcard_random" value="random" <?= $config['giftcard_number'] == 'random' ? 'checked' : '' ?>>
+            <label class="form-check-label" for="giftcard_random"><?= lang('Config.giftcard_random') ?></label>
+        </div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="derive_sale_quantity" name="derive_sale_quantity" value="derive_sale_quantity" <?= $config['derive_sale_quantity'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="derive_sale_quantity"><?= lang('Config.derive_sale_quantity'); ?></label>
+        <div class="form-text"><i class="bi bi-info-square pe-1"></i><?= lang('Config.derive_sale_quantity_tooltip') ?></div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="show_office_group" name="show_office_group" value="show_office_group" <?= $show_office_group > 0 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="show_office_group"><?= lang('Config.show_office_group'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="multi_pack_enabled" name="multi_pack_enabled" value="multi_pack_enabled" <?= $config['multi_pack_enabled'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="multi_pack_enabled"><?= lang('Config.multi_pack_enabled'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="include_hsn" name="include_hsn" value="include_hsn" <?= $config['include_hsn'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="include_hsn"><?= lang('Config.include_hsn'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="category_dropdown" name="category_dropdown" value="category_dropdown" <?= $config['category_dropdown'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="category_dropdown"><?= lang('Config.category_dropdown'); ?></label>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_general"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -484,7 +234,7 @@
 
         $('#general_config_form').validate($.extend(form_support.handler, {
 
-            errorLabelContainer: "#general_error_message_box",
+            errorLabelContainer: ".general_error_message_box",
 
             rules: {
                 lines_per_page: {
@@ -528,6 +278,7 @@
                     },
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
@@ -540,4 +291,11 @@
             }
         }));
     });
+
+    new TomSelect('#image_allowed_types', {
+        plugins: ['checkbox_options', 'remove_button'],
+        placeholder: '<?= lang('Common.none_selected_text') ?>',
+        hidePlaceholder: true,
+        closeAfterSelect: false,
+    });
 </script>
diff --git a/app/Views/configs/info_config.php b/app/Views/configs/info_config.php
index 76689a613..2966dd49e 100644
--- a/app/Views/configs/info_config.php
+++ b/app/Views/configs/info_config.php
@@ -6,154 +6,110 @@
  */
 ?>
 
-<?= form_open('config/saveInfo/', ['id' => 'info_config_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveInfo/', ['id' => 'info_config_form', 'enctype' => 'multipart/form-data', 'class' => 'needs-validation']) ?> <!-- TODO-BS5 add is-invalid and invalid-feeback from BS5 to boxes -->
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="info_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.info_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.company'), 'company', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-6">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <i class="bi bi-shop-window"></i>
-                        </span>
-                        <?= form_input([
-                            'name'  => 'company',
-                            'id'    => 'company',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['company']
-                        ]) ?>
-                    </div>
-                </div>
+    <ul id="error_message_box" class="info_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="info-company" class="form-label"><?= lang('Config.company'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-shop-window"></i></span>
+                <input type="text" class="form-control" name="company" id="info-company" value="<?= $config['company']; ?>" required> <!-- TODO-BS5 invalid-feedback makes input borders not rounded? -->
+                <div class="invalid-feedback"><?= lang('Config.company_required') ?></div>
             </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.company_logo'), 'company_logo', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-6">
-                    <div class="fileinput <?= $logo_exists ? 'fileinput-exists' : 'fileinput-new' ?>" data-provides="fileinput">
-                        <div class="fileinput-new thumbnail" style="width: 200px; height: 200px;"></div>
-                        <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 200px;">
-                            <img data-src="holder.js/100%x100%" alt="<?= esc(lang('Config.company_logo')) ?>" src="<?= $logo_src ?>" style="max-height: 100%; max-width: 100%;">
-                        </div>
-                        <div>
-                            <span class="btn btn-default btn-sm btn-file">
-                                <span class="fileinput-new"><?= lang('Config.company_select_image') ?></span>
-                                <span class="fileinput-exists"><?= lang('Config.company_change_image') ?></span>
-                                <input type="file" name="company_logo">
-                            </span>
-                            <a href="#" class="btn btn-default btn-sm fileinput-exists" data-dismiss="fileinput"><?= lang('Config.company_remove_image') ?></a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.address'), 'address', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-6">
-                    <?= form_textarea([
-                        'name'  => 'address',
-                        'id'    => 'address',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['address']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.website'), 'website', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-6">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <i class="bi bi-globe"></i>
-                        </span>
-                        <?= form_input([
-                            'name'  => 'website',
-                            'id'    => 'website',
-                            'class' => 'form-control input-sm',
-                            'value' => $config['website']
-                        ]) ?>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Common.email'), 'email', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-6">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <i class="bi bi-at"></i>
-                        </span>
-                        <?= form_input([
-                            'name'  => 'email',
-                            'id'    => 'email',
-                            'type'  => 'email',
-                            'class' => 'form-control input-sm',
-                            'value' => $config['email']
-                        ]) ?>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.phone'), 'phone', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-6">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <i class="bi bi-telephone"></i>
-                        </span>
-                        <?= form_input([
-                            'type'  => 'tel',
-                            'name'  => 'phone',
-                            'id'    => 'phone',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['phone']
-                        ]) ?>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.fax'), 'fax', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-6">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <i class="bi bi-printer"></i>
-                        </span>
-                        <?= form_input([
-                            'type'  => 'tel',
-                            'name'  => 'fax',
-                            'id'    => 'fax',
-                            'class' => 'form-control input-sm',
-                            'value' => $config['fax']
-                        ]) ?>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Common.return_policy'), 'return_policy', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-6">
-                    <?= form_textarea([
-                        'name'  => 'return_policy',
-                        'id'    => 'return_policy',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['return_policy']
-                    ]) ?>
-                </div>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_info',
-                'id'    => 'submit_info',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+        </div>
     </div>
+
+    <div class="row mb-3">
+        <label for="info-company_logo" class="form-label"><?= lang('Config.company_logo'); ?></label>
+        <div class="col-12 col-lg-6">
+            <div id="info-company_logo" class="w-100 fileinput <?= $logo_exists ? 'fileinput-exists' : 'fileinput-new'; ?>" data-provides="fileinput">
+                <div class="input-group mb-3" aria-describedby="company-logo-desc">
+                    <span class="input-group-text"><i class="bi bi-image"></i></span>
+                    <div class="fileinput-new form-control rounded-end mb-0" style="height: 200px; cursor: default;"></div>
+                    <div class="fileinput-exists fileinput-preview img-thumbnail form-control rounded-end mb-0 bg-light mh-100" style="height: 200px; cursor: default; background-size: 40px 40px; background-position: 0 0, 20px 20px; background-image: linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white), linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white);">
+                        <img class="mh-100 mw-100" data-src="holder.js/100%x100%" alt="<?= esc(lang('Config.company_logo')) ?>" src="<?= $logo_src ?>">
+                    </div>
+                </div>
+                <div type="button" class="btn btn-secondary btn-file me-2">
+                    <span class="fileinput-new"><i class="bi bi-hand-index me-2"></i><?= lang('Config.company_select_image') ?></span>
+                    <span class="fileinput-exists"><i class="bi bi-images me-2"></i><?= lang('Config.company_change_image') ?></span>
+                    <input type="file" name="company_logo">
+                </div>
+                <a type="button" class="btn btn-outline-secondary fileinput-exists" data-dismiss="fileinput">
+                    <i class="bi bi-eraser me-2"></i><?= lang('Config.company_remove_image') ?>
+                </a>
+            </div>
+        </div>
+        <div class="col-12 col-lg-6 form-text d-none d-lg-block" id="company-logo-desc">
+            <ul class="list-unstyled">
+                <li>&raquo; Supported file formats; gif, png, jpg</li> <!-- TODO-BS5 add to translations -->
+                <li>&raquo; Max upload size of 100kb</li> <!-- TODO-BS5 add to translations -->
+                <li>&raquo; Max dimensions of 200x200px</li> <!-- TODO-BS5 add to translations -->
+            </ul>
+        </div>
+    </div>
+
+    <label for="info-address" class="form-label"><?= lang('Config.address'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-house"></i></span>
+        <textarea class="form-control" name="address" id="info-address" rows="10" required><?= $config['address']; ?></textarea>
+        <div class="invalid-feedback"><?= lang('Config.address_required') ?></div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="info-website" class="form-label"><?= lang('Config.website'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-globe"></i></span>
+                <input class="form-control" name="website" id="info-website" value="<?= $config['website']; ?>">
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="info-email" class="form-label"><?= lang('Config.email'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-at"></i></span>
+                <input type="email" class="form-control" name="email" id="info-email" value="<?= $config['email']; ?>">
+                <div class="invalid-feedback"><?= lang('Common.email_invalid_format') ?></div>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="info-phone" class="form-label"><?= lang('Config.phone'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-telephone"></i></span>
+                <input type="tel" class="form-control" name="phone" id="info-phone" value="<?= $config['phone']; ?>" required>
+                <div class="invalid-feedback"><?= lang('Config.phone_required') ?></div>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="info-fax" class="form-label"><?= lang('Config.fax'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-printer"></i></span>
+                <input type="tel" class="form-control" name="fax" id="info-fax" value="<?= $config['fax']; ?>">
+            </div>
+        </div>
+    </div>
+
+    <label for="info-return_policy" class="form-label"><?= lang('Common.return_policy'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-box-arrow-in-down-left"></i></span>
+        <textarea class="form-control" name="return_policy" id="info-return_policy" rows="10" required><?= $config['return_policy']; ?></textarea>
+        <div class="invalid-feedback"><?= lang('Config.return_policy_required') ?></div>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_info"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -169,7 +125,7 @@
 
         $('#info_config_form').validate($.extend(form_support.handler, {
 
-            errorLabelContainer: "#info_error_message_box",
+            errorLabelContainer: ".info_error_message_box",
 
             rules: {
                 company: "required",
diff --git a/app/Views/configs/integrations_config.php b/app/Views/configs/integrations_config.php
index a494fba2c..5583c3bb0 100644
--- a/app/Views/configs/integrations_config.php
+++ b/app/Views/configs/integrations_config.php
@@ -5,64 +5,55 @@
  */
 ?>
 
-<?= form_open('config/saveMailchimp/', ['id' => 'mailchimp_config_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveMailchimp/', ['id' => 'mailchimp_config_form', 'enctype' => 'multipart/form-data']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <div id="integrations_header"><?= lang('Config.mailchimp_configuration') ?></div>
-            <ul id="mailchimp_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.integrations_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.mailchimp_api_key'), 'mailchimp_api_key', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <i class="bi bi-key"></i>
-                        </span>
-                        <?= form_input([
-                            'name'  => 'mailchimp_api_key',
-                            'id'    => 'mailchimp_api_key',
-                            'class' => 'form-control input-sm',
-                            'value' => $mailchimp['api_key']
-                        ]) ?>
-                    </div>
-                </div>
-                <div class="col-xs-1">
-                    <label class="control-label">
-                        <a href="https://eepurl.com/b9a05b" target="_blank">
-                            <span class="bi bi-info-circle" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.mailchimp_tooltip') ?>"></span>
-                        </a>
-                    </label>
-                </div>
+    <legend class="fs-5"><?= lang('Config.mailchimp_configuration') ?></legend>
+    <ul id="error_message_box" class="mailchimp_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="mailchimp_api_key" class="form-label">
+                <?= lang('Config.mailchimp_api_key'); ?>
+                <!--<a href="https://eepurl.com/dyijVH" target="_blank" rel="noopener">
+                    <i class="bi bi-info-circle-fill text-secondary" data-bs-toggle="tooltip" title="<?= lang('Config.mailchimp_tooltip'); ?>"></i>
+                </a>-->
+            </label>
+            <div class="input-group">
+                <span class="input-group-text" id="mailchimp-api-key-icon"><i class="bi bi-key"></i></span>
+                <input type="text" class="form-control" name="mailchimp_api_key" id="mailchimp_api_key" aria-describedby="mailchimp-api-key-icon" value="<?= $mailchimp['api_key']; ?>">
             </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.mailchimp_lists'), 'mailchimp_list_id', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <i class="bi bi-list-stars"></i>
-                        </span>
-                        <?= form_dropdown(
-                            'mailchimp_list_id',
-                            $mailchimp['lists'],
-                            $mailchimp['list_id'],
-                            'id="mailchimp_list_id" class="form-control input-sm"'
-                        ) ?>
-                    </div>
-                </div>
+            <div class="form-text mb-3">
+                <a class="link-secondary" href="https://eepurl.com/dyijVH" target="_blank" rel="noopener">
+                    <i class="bi bi-info-square pe-1"></i><?= lang('Config.mailchimp_tooltip') ?>
+                </a>
             </div>
+        </div>
 
-            <?= form_submit([
-                'name'  => 'submit_mailchimp',
-                'id'    => 'submit_mailchimp',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+        <div class="col-12 col-lg-6">
+            <label for="mailchimp_list_id" class="form-label"><?= lang('Config.mailchimp_lists'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="mailchimp-lists-icon"><i class="bi bi-list-stars"></i></span>
+                <select class="form-select" id="mailchimp_list_id" aria-describedby="mailchimp-lists-icon" <?= $mailchimp['api_key'] == null ? 'disabled' : '' ?>>
+                    <option>Choose...</option>
+                    <?php foreach($mailchimp['lists'] as $value => $display_text): ?>
+                        <option value="<?= $value; ?>" <?= $value == $mailchimp['list_id'] ? 'selected' : ''; ?>>
+                            <?= $display_text; ?>
+                        </option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
     </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="sumbit_mailchimp"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -74,6 +65,7 @@
                 },
                 function(response) {
                     $.notify({
+                        icon: 'bi bi-bell-fill',
                         message: response.message
                     }, {
                         type: response.success ? 'success' : 'danger'
@@ -102,7 +94,7 @@
                 });
             },
 
-            errorLabelContainer: '#mailchimp_error_message_box'
+            errorLabelContainer: '.mailchimp_error_message_box'
         }));
     });
 </script>
diff --git a/app/Views/configs/invoice_config.php b/app/Views/configs/invoice_config.php
index 760d936e8..a69c73c5b 100644
--- a/app/Views/configs/invoice_config.php
+++ b/app/Views/configs/invoice_config.php
@@ -6,193 +6,135 @@
  */
 ?>
 
-<?= form_open('config/saveInvoice/', ['id' => 'invoice_config_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveInvoice/', ['id' => 'invoice_config_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="invoice_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.invoice_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.invoice_enable'), 'invoice_enable', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'invoice_enable',
-                        'value'   => 'invoice_enable',
-                        'id'      => 'invoice_enable',
-                        'checked' => $config['invoice_enable'] == 1
-                    ]) ?>
-                </div>
-            </div>
+    <ul id="error_message_box" class="invoice_error_message_box alert alert-warning d-none"></ul>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.invoice_type'), 'invoice_type', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-3">
-                    <?= form_dropdown(
-                        'invoice_type',
-                        $invoice_type_options,
-                        $config['invoice_type'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.recv_invoice_format'), 'recv_invoice_format', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'recv_invoice_format',
-                        'id'    => 'recv_invoice_format',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['recv_invoice_format']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.invoice_default_comments'), 'invoice_default_comments', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-5">
-                    <?= form_textarea([
-                        'name'  => 'invoice_default_comments',
-                        'id'    => 'invoice_default_comments',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['invoice_default_comments']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.invoice_email_message'), 'invoice_email_message', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-5">
-                    <?= form_textarea([
-                        'name'  => 'invoice_email_message',
-                        'id'    => 'invoice_email_message',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['invoice_email_message']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.line_sequence'), 'line_sequence', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'line_sequence',
-                        $line_sequence_options,
-                        $config['line_sequence'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.sales_invoice_format'), 'sales_invoice_format', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'sales_invoice_format',
-                        'id'    => 'sales_invoice_format',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['sales_invoice_format']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.last_used_invoice_number'), 'last_used_invoice_number', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'type'  => 'number',
-                        'name'  => 'last_used_invoice_number',
-                        'id'    => 'last_used_invoice_number',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['last_used_invoice_number']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.sales_quote_format'), 'sales_quote_format', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'sales_quote_format',
-                        'id'    => 'sales_quote_format',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['sales_quote_format']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.last_used_quote_number'), 'last_used_quote_number', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'type'  => 'number',
-                        'name'  => 'last_used_quote_number',
-                        'id'    => 'last_used_quote_number',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['last_used_quote_number']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.quote_default_comments'), 'quote_default_comments', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-5">
-                    <?= form_textarea([
-                        'name'  => 'quote_default_comments',
-                        'id'    => 'quote_default_comments',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['quote_default_comments']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.work_order_enable'), 'work_order_enable', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'work_order_enable',
-                        'value'   => 'work_order_enable',
-                        'id'      => 'work_order_enable',
-                        'checked' => $config['work_order_enable'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.work_order_format'), 'work_order_format', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'work_order_format',
-                        'id'    => 'work_order_format',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['work_order_format']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.last_used_work_order_number'), 'last_used_work_order_number', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'type'  => 'number',
-                        'name'  => 'last_used_work_order_number',
-                        'id'    => 'last_used_work_order_number',
-                        'class' => 'form-control input-sm required',
-                        'value' => $config['last_used_work_order_number']
-                    ]) ?>
-                </div>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_invoice',
-                'id'    => 'submit_invoice',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="invoice_enable" name="invoice_enable" value="invoice_enable" <?= $config['invoice_enable'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="invoice_enable"><?= lang('Config.invoice_enable'); ?></label>
     </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="invoice_type" class="form-label"><?= lang('Config.invoice_type'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-file-code"></i></span>
+                <select class="form-select" name="invoice_type">
+                    <?php foreach ($invoice_type_options as $key => $value): ?>
+                        <option value="<?= $key ?>" <?= $key == $config['invoice_type'] ? 'selected' : '' ?>><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="recv_invoice_format" class="form-label"><?= lang('Config.recv_invoice_format'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-braces"></i></span>
+                <input type="text" class="form-control" name="recv_invoice_format" id="recv_invoice_format" value="<?= $config['recv_invoice_format']; ?>">
+            </div>
+        </div>
+    </div>
+
+    <label for="invoice_default_comments" class="form-label"><?= lang('Config.invoice_default_comments'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-file-text"></i></span>
+        <textarea class="form-control" name="invoice_default_comments" id="invoice_default_comments" rows="10" required><?= $config['invoice_default_comments']; ?></textarea>
+    </div>
+
+    <label for="invoice_email_message" class="form-label"><?= lang('Config.invoice_email_message'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-envelope-paper"></i></span>
+        <textarea class="form-control" name="invoice_email_message" id="invoice_email_message" rows="10" required><?= $config['invoice_email_message']; ?></textarea>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="line_sequence" class="form-label"><?= lang('Config.line_sequence'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-list-ol"></i></span>
+                <select class="form-select" name="line_sequence">
+                <?php foreach ($line_sequence_options as $key => $value): ?>
+                    <option value="<?= $key ?>" <?= $key == $config['line_sequence'] ? 'selected' : '' ?>><?= $value ?></option>
+                <?php endforeach; ?>
+            </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="sales_invoice_format" class="form-label"><?= lang('Config.sales_invoice_format'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-braces"></i></span>
+                <input type="text" class="form-control" name="sales_invoice_format" id="sales_invoice_format" value="<?= $config['sales_invoice_format']; ?>">
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="last_used_invoice_number" class="form-label"><?= lang('Config.last_used_invoice_number'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-123"></i></span>
+                <input type="number" class="form-control" name="last_used_invoice_number" id="last_used_invoice_number" value="<?= $config['last_used_invoice_number']; ?>">
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="sales_quote_format" class="form-label"><?= lang('Config.sales_quote_format'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-braces"></i></span>
+                <input type="text" class="form-control" name="sales_quote_format" id="sales_quote_format" value="<?= $config['sales_quote_format']; ?>">
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="last_used_quote_number" class="form-label"><?= lang('Config.last_used_quote_number'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-123"></i></span>
+                <input type="number" class="form-control" name="last_used_quote_number" id="last_used_quote_number" value="<?= $config['last_used_quote_number']; ?>">
+            </div>
+        </div>
+    </div>
+
+    <label for="quote_default_comments" class="form-label"><?= lang('Config.quote_default_comments'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-file-text"></i></span>
+        <textarea class="form-control" name="quote_default_comments" id="quote_default_comments" rows="10" required><?= $config['quote_default_comments']; ?></textarea>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="work_order_enable" name="work_order_enable" value="work_order_enable" <?= $config['work_order_enable'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="work_order_enable"><?= lang('Config.work_order_enable'); ?></label>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="work_order_format" class="form-label"><?= lang('Config.work_order_format'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-braces"></i></span>
+                <input type="text" class="form-control" name="work_order_format" id="work_order_format" value="<?= $config['work_order_format']; ?>">
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="last_used_work_order_number" class="form-label"><?= lang('Config.last_used_work_order_number'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-123"></i></span>
+                <input type="number" class="form-control" name="last_used_work_order_number" id="last_used_work_order_number" value="<?= $config['last_used_work_order_number']; ?>">
+            </div>
+        </div>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_invoice"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -225,7 +167,7 @@
 
         $("#invoice_config_form").validate($.extend(form_support.handler, {
 
-            errorLabelContainer: "#invoice_error_message_box",
+            errorLabelContainer: ".invoice_error_message_box",
 
             submitHandler: function(form) {
                 $(form).ajaxSubmit({
@@ -235,6 +177,7 @@
                     },
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
diff --git a/app/Views/configs/license_config.php b/app/Views/configs/license_config.php
index 0d5584b1e..f58f73f3f 100644
--- a/app/Views/configs/license_config.php
+++ b/app/Views/configs/license_config.php
@@ -4,29 +4,25 @@
  */
 ?>
 
-<?= form_open('', ['id' => 'license_config_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset>
+<?= form_open('', ['id' => 'license_config_form', 'enctype' => 'multipart/form-data']) ?>
 
-            <?php
-            $counter = 0;
-            foreach ($licenses as $license) {
-            ?>
-                <div class="form-group form-group-sm">
-                    <?= form_label($license['title'], 'license', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-6">
-                        <?= form_textarea([
-                            'name'     => 'license',
-                            'id'       => 'license_' . $counter++,    // TODO: String Interpolation
-                            'class'    => 'form-control font-monospace',
-                            'rows'     => '14',
-                            'readonly' => '',
-                            'value'    => $license['text']
-                        ]) ?>
-                    </div>
-                </div>
-            <?php } ?>
+    <?php
+    $title_info['config_title'] = lang('Config.license_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
+
+    <?php
+    $license_i = 0;
+    foreach ($licenses as $license) {
+    ?>
+
+        <div class="mb-3 mx-3 mx-lg-0">
+            <label for="license_<?= $license_i; ?>" class="form-label"><?= $license['title']; ?></label>
+            <textarea name="license" rows="10" id="license_<?= $license_i; ?>" class="form-control font-monospace" style="font-size: .875rem;" readonly><?= $license['text']; ?></textarea>
+        </div>
+
+    <?php
+    $license_i++; // Increment counter
+    } ?>
 
-        </fieldset>
-    </div>
 <?= form_close() ?>
diff --git a/app/Views/configs/locale_config.php b/app/Views/configs/locale_config.php
index 220cf6910..738253a8b 100644
--- a/app/Views/configs/locale_config.php
+++ b/app/Views/configs/locale_config.php
@@ -5,304 +5,264 @@
  * @var string $controller_name
  * @var array $config
  */
+
+ $beta = '<sup><span class="badge bg-secondary">BETA</span></sup>';
 ?>
 
-<?= form_open('config/saveLocale/', ['id' => 'locale_config_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveLocale/', ['id' => 'locale_config_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="locale_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.locale_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.number_locale'), 'number_locale', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_input([
-                        'name'  => 'number_locale',
-                        'id'    => 'number_locale',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['number_locale']
-                    ]) ?>
-                    <?= form_hidden(['name' => 'save_number_locale', 'value' => $config['number_locale']]) ?>
-                </div>
-                <div class="col-xs-2">
-                    <label class="control-label">
-                        <a href="https://github.com/opensourcepos/opensourcepos/wiki/Localisation-support" target="_blank">
-                            <span class="bi bi-info-circle" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.number_locale_tooltip') ?>"></span>
-                        </a>
-                        <span id="number_locale_example">
-                            &nbsp;&nbsp;<?= to_currency(1234567890.12300) ?>
-                        </span>
-                    </label>
-                </div>
+    <ul id="error_message_box" class="locale_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="number_locale" class="form-label"><?= lang('Config.number_locale') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-globe-americas"></i></span>
+                <input type="text" class="form-control" name="number_locale" id="number_locale" value="<?= $config['number_locale'] ?>">
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.thousands_separator'), 'thousands_separator', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_checkbox([
-                        'name'    => 'thousands_separator',
-                        'id'      => 'thousands_separator',
-                        'value'   => 'thousands_separator',
-                        'checked' => $config['thousands_separator'] == 1
-                    ]) ?>
-                </div>
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="number_locale_example" class="form-label">Localization Example</label>
+            <div class="mb-3" id="number_locale_example">
+                <?= to_currency(1234567890.12300) ?>&nbsp;
+                <a href="https://github.com/opensourcepos/opensourcepos/wiki/Localisation-support" target="_blank" rel="noopener">
+                    <i class="bi bi-link-45deg link-secondary" data-bs-toggle="tooltip" title="<?= lang('Config.number_locale_tooltip'); ?>"></i>
+                </a>
             </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.currency_symbol'), 'currency_symbol', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_input([
-                        'name'  => 'currency_symbol',
-                        'id'    => 'currency_symbol',
-                        'class' => 'form-control input-sm number_locale',
-                        'value' => $config['currency_symbol']
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.currency_code'), 'currency_code', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_input([
-                        'name'  => 'currency_code',
-                        'id'    => 'currency_code',
-                        'class' => 'form-control input-sm number_locale',
-                        'value' => $currency_code
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.currency_decimals'), 'currency_decimals', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'currency_decimals',
-                        [
-                            '0' => '0',
-                            '1' => '1',
-                            '2' => '2'
-                        ],
-                        $config['currency_decimals'],
-                        ['class' => 'form-control input-sm']
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.tax_decimals'), 'tax_decimals', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'tax_decimals',
-                        [
-                            '0' => '0',
-                            '1' => '1',
-                            '2' => '2',
-                            '3' => '3',
-                            '4' => '4'
-                        ],
-                        $config['tax_decimals'],
-                        ['class' => 'form-control input-sm']
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.quantity_decimals'), 'quantity_decimals', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'quantity_decimals',
-                        [
-                            '0' => '0',
-                            '1' => '1',
-                            '2' => '2',
-                            '3' => '3'
-                        ],
-                        $config['quantity_decimals'],
-                        ['class' => 'form-control input-sm']
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.cash_decimals'), 'cash_decimals', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'cash_decimals',
-                        [
-                            '-1' => '-1',
-                            '0'  => '0',
-                            '1'  => '1',
-                            '2'  => '2'
-                        ],
-                        $config['cash_decimals'],
-                        ['class' => 'form-control input-sm']
-                    ) ?>
-                </div>
-                <div class="col-xs-1">
-                    <label class="control-label">
-                        <span class="bi bi-info-circle" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.cash_decimals_tooltip') ?>"></span>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.cash_rounding'), 'cash_rounding_code', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'cash_rounding_code',
-                        $rounding_options,
-                        $config['cash_rounding_code'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.payment_options_order'), 'payment_options_order', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <?= form_dropdown(
-                        'payment_options_order',
-                        [
-                            'cashdebitcredit' => lang('Sales.cash') . ' / ' . lang('Sales.debit') . ' / ' . lang('Sales.credit'),
-                            'debitcreditcash' => lang('Sales.debit') . ' / ' . lang('Sales.credit') . ' / ' . lang('Sales.cash'),
-                            'debitcashcredit' => lang('Sales.debit') . ' / ' . lang('Sales.cash') . ' / ' . lang('Sales.credit'),
-                            'creditdebitcash' => lang('Sales.credit') . ' / ' . lang('Sales.debit') . ' / ' . lang('Sales.cash'),
-                            'creditcashdebit' => lang('Sales.credit') . ' / ' . lang('Sales.cash') . ' / ' . lang('Sales.debit')
-                        ],
-                        $config['payment_options_order'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm" style="display:flex; align-items:center">
-                <?= form_label(lang('Config.payment_reference_code_length_limits'), 'payment_reference_code_length', ['class' => 'control-label col-xs-2', 'style' => 'padding-top:0; line-height:1.4; margin-top:-8px']) ?>
-                <div class="col-xs-4">
-                    <div id="payment_reference_code_slider"></div>
-                    <div class="row" style="margin-top:6px">
-                        <div class="col-xs-6">
-                            <span class="control-label"><?= lang('Config.payment_reference_code_length_min_label') ?>: </span>
-                            <span id="payment_reference_code_min_display"><?= $config['payment_reference_code_min'] ?? 3 ?></span>
-                            <?= form_input(['type' => 'hidden', 'name' => 'payment_reference_code_min', 'id' => 'payment_reference_code_min', 'value' => $config['payment_reference_code_min'] ?? 3]) ?>
-                        </div>
-                        <div class="col-xs-6">
-                            <span class="control-label"><?= lang('Config.payment_reference_code_length_max_label') ?>: </span>
-                            <span id="payment_reference_code_max_display"><?= $config['payment_reference_code_max'] ?? 40 ?></span>
-                            <?= form_input(['type' => 'hidden', 'name' => 'payment_reference_code_max', 'id' => 'payment_reference_code_max', 'value' => $config['payment_reference_code_max'] ?? 40]) ?>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.country_codes'), 'country_codes', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_input([
-                        'name'  => 'country_codes',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['country_codes']
-                    ]) ?>
-                </div>
-                <div class="col-xs-1">
-                    <label class="control-label">
-                        <a href="https://wiki.openstreetmap.org/wiki/Nominatim/Country_Codes" target="_blank">
-                            <span class="bi bi-info-circle" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.country_codes_tooltip'); ?>"></span>
-                        </a>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.language'), 'language', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <?= form_dropdown(
-                        'language',
-                        get_languages(),
-                        current_language_code(true) . ':' . current_language(true),
-                        ['class' => 'form-control input-sm']
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.timezone'), 'timezone', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <?= form_dropdown(
-                        'timezone',
-                        get_timezones(),
-                        $config['timezone'] ? $config['timezone'] : date_default_timezone_get(),
-                        ['class' => 'form-control input-sm']
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.datetimeformat'), 'datetimeformat', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-sm-2">
-                    <?= form_dropdown(
-                        'dateformat',
-                        get_dateformats(),
-                        $config['dateformat'],
-                        ['class' => 'form-control input-sm']
-                    ) ?>
-                </div>
-                <div class="col-sm-2">
-                    <?= form_dropdown(
-                        'timeformat',
-                        get_timeformats(),
-                        $config['timeformat'],
-                        ['class' => 'form-control input-sm']
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.date_or_time_format'), 'date_or_time_format', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_checkbox([
-                        'name'    => 'date_or_time_format',
-                        'id'      => 'date_or_time_format',
-                        'value'   => 'date_or_time_format',
-                        'checked' => $config['date_or_time_format'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.financial_year'), 'financial_year', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'financial_year',
-                        [
-                            '1'  => lang('Config.financial_year_jan'),
-                            '2'  => lang('Config.financial_year_feb'),
-                            '3'  => lang('Config.financial_year_mar'),
-                            '4'  => lang('Config.financial_year_apr'),
-                            '5'  => lang('Config.financial_year_may'),
-                            '6'  => lang('Config.financial_year_jun'),
-                            '7'  => lang('Config.financial_year_jul'),
-                            '8'  => lang('Config.financial_year_aug'),
-                            '9'  => lang('Config.financial_year_sep'),
-                            '10' => lang('Config.financial_year_oct'),
-                            '11' => lang('Config.financial_year_nov'),
-                            '12' => lang('Config.financial_year_dec')
-                        ],
-                        $config['financial_year'],
-                        ['class' => 'form-control input-sm']
-                    ) ?>
-                </div>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_locale',
-                'id'    => 'submit_locale',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+        </div>
     </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="thousands_separator" name="thousands_separator" value="thousands_separator" <?= $config['thousands_separator'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="thousands_separator"><?= lang('Config.thousands_separator'); ?></label>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="currency_symbol" class="form-label"><?= lang('Config.currency_symbol') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-currency-exchange"></i></span>
+                <input type="text" class="form-control" name="currency_symbol" id="currency_symbol" value="<?= $config['currency_symbol'] ?>">
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="currency_code" class="form-label"><?= lang('Config.currency_code') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-cash"></i></span>
+                <input type="text" class="form-control" name="currency_code" id="currency_code" value="<?= $currency_code ?>">
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="currency_decimals" class="form-label"><?= lang('Config.currency_decimals') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-coin"></i></span>
+                <select class="form-select" name="currency_decimals" id="currency_decimals">
+                    <option value="0" <?= $config['currency_decimals'] == '0' ? 'selected' : '' ?>>0</option>
+                    <option value="1" <?= $config['currency_decimals'] == '1' ? 'selected' : '' ?>>1</option>
+                    <option value="2" <?= $config['currency_decimals'] == '2' ? 'selected' : '' ?>>2</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="tax_decimals" class="form-label"><?= lang('Config.tax_decimals') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-archive"></i></span>
+                <select class="form-select" name="tax_decimals" id="tax_decimals">
+                    <option value="0" <?= $config['tax_decimals'] == '0' ? 'selected' : '' ?>>0</option>
+                    <option value="1" <?= $config['tax_decimals'] == '1' ? 'selected' : '' ?>>1</option>
+                    <option value="2" <?= $config['tax_decimals'] == '2' ? 'selected' : '' ?>>2</option>
+                    <option value="3" <?= $config['tax_decimals'] == '3' ? 'selected' : '' ?>>3</option>
+                    <option value="4" <?= $config['tax_decimals'] == '4' ? 'selected' : '' ?>>4</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="quantity_decimals" class="form-label"><?= lang('Config.quantity_decimals') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-123"></i></span>
+                <select class="form-select" name="quantity_decimals" id="quantity_decimals">
+                    <option value="0" <?= $config['quantity_decimals'] == '0' ? 'selected' : '' ?>>0</option>
+                    <option value="1" <?= $config['quantity_decimals'] == '1' ? 'selected' : '' ?>>1</option>
+                    <option value="2" <?= $config['quantity_decimals'] == '2' ? 'selected' : '' ?>>2</option>
+                    <option value="3" <?= $config['quantity_decimals'] == '3' ? 'selected' : '' ?>>3</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="cash_decimals" class="form-label"><?= lang('Config.cash_decimals') ?>
+                <i class="bi bi-info-circle-fill text-secondary" data-bs-toggle="tooltip" title="<?= lang('Config.cash_decimals_tooltip'); ?>"></i>
+            </label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-cash-coin"></i></span>
+                <select class="form-select" name="cash_decimals" id="cash_decimals">
+                    <option value="0" <?= $config['cash_decimals'] == '0' ? 'selected' : '' ?>>0</option>
+                    <option value="1" <?= $config['cash_decimals'] == '1' ? 'selected' : '' ?>>1</option>
+                    <option value="2" <?= $config['cash_decimals'] == '2' ? 'selected' : '' ?>>2</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-sm-6 col-xxl-3">
+            <label for="cash_rounding_code" class="form-label"><?= lang('Config.cash_rounding') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrow-repeat"></i></span>
+                <select class="form-select" name="cash_rounding_code" id="cash_rounding_code">
+                    <?php foreach ($rounding_options as $code => $label): ?>
+                        <option value="<?= $code ?>" <?= $config['cash_rounding_code'] == $code ? 'selected' : '' ?>><?= $label ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="payment_options_order" class="form-label"><?= lang('Config.payment_options_order') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-credit-card"></i></span>
+                <select class="form-select" name="payment_options_order" id="payment_options_order">
+                    <option value="cashdebitcredit" <?= $config['payment_options_order'] == 'cashdebitcredit' ? 'selected' : '' ?>><?= lang('Sales.cash') ?> / <?= lang('Sales.debit') ?> / <?= lang('Sales.credit') ?></option>
+                    <option value="debitcreditcash" <?= $config['payment_options_order'] == 'debitcreditcash' ? 'selected' : '' ?>><?= lang('Sales.debit') ?> / <?= lang('Sales.credit') ?> / <?= lang('Sales.cash') ?></option>
+                    <option value="debitcashcredit" <?= $config['payment_options_order'] == 'debitcashcredit' ? 'selected' : '' ?>><?= lang('Sales.debit') ?> / <?= lang('Sales.cash') ?> / <?= lang('Sales.credit') ?></option>
+                    <option value="creditdebitcash" <?= $config['payment_options_order'] == 'creditdebitcash' ? 'selected' : '' ?>><?= lang('Sales.credit') ?> / <?= lang('Sales.debit') ?> / <?= lang('Sales.cash') ?></option>
+                    <option value="creditcashdebit" <?= $config['payment_options_order'] == 'creditcashdebit' ? 'selected' : '' ?>><?= lang('Sales.credit') ?> / <?= lang('Sales.cash') ?> / <?= lang('Sales.debit') ?></option>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="payment_reference_code_length" class="form-label"><?= lang('Config.payment_reference_code_length_limits') ?></label>
+            <div id="payment_reference_code_slider"></div>
+            <div class="d-flex justify-content-between">
+                <output for="payment_reference_code_max">
+                    <span><?= lang('Config.payment_reference_code_length_min_label') ?>: </span>
+                    <span id="payment_reference_code_min_display"><?= $config['payment_reference_code_min'] ?? 3 ?></span>
+                    <?= form_input(['type' => 'hidden', 'name' => 'payment_reference_code_min', 'id' => 'payment_reference_code_min', 'value' => $config['payment_reference_code_min'] ?? 3]) ?>
+                </output>
+                <output for="payment_reference_code_min">
+                    <span><?= lang('Config.payment_reference_code_length_max_label') ?>: </span>
+                    <span id="payment_reference_code_max_display"><?= $config['payment_reference_code_max'] ?? 40 ?></span>
+                    <?= form_input(['type' => 'hidden', 'name' => 'payment_reference_code_max', 'id' => 'payment_reference_code_max', 'value' => $config['payment_reference_code_max'] ?? 40]) ?>
+                </output>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="country_codes" class="form-label">
+                <?= lang('Config.country_codes') ?>
+                <a href="https://wiki.openstreetmap.org/wiki/Nominatim/Country_Codes" target="_blank" rel="noopener">
+                    <i class="bi bi-link-45deg text-secondary" data-bs-toggle="tooltip" title="<?= lang('Config.country_codes_tooltip'); ?>"></i>
+                </a>
+            </label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-code"></i></span>
+                <input type="text" class="form-control" name="country_codes" id="country_codes" value="<?= $config['country_codes'] ?>">
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="language" class="form-label"><?= lang('Config.language') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-translate"></i></span>
+                <select class="form-select" name="language" id="language">
+                    <?php foreach (get_languages() as $value => $label): ?>
+                        <option value="<?= esc($value) ?>" <?= $value === current_language_code(true) . ':' . current_language(true) ? 'selected' : '' ?>><?= esc($label) ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="rtl_language" name="rtl_language" value="rtl_language" <?= $config['rtl_language'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="rtl_language">RTL Language <?= $beta; ?></label>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="timezone" class="form-label"><?= lang('Config.timezone') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-clock"></i></span>
+                <?= form_dropdown(
+                    'timezone',
+                    get_timezones(),
+                    $config['timezone'] ? $config['timezone'] : date_default_timezone_get(),
+                    ['class' => 'form-select']
+                ) ?>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="datetimeformat" class="form-label"><?= lang('Config.datetimeformat') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-calendar2"></i></span>
+                <?= form_dropdown(
+                    'dateformat',
+                    get_dateformats(),
+                    $config['dateformat'],
+                    ['class' => 'form-select']
+                ) ?>
+                <?= form_dropdown(
+                    'timeformat',
+                    get_timeformats(),
+                    $config['timeformat'],
+                    ['class' => 'form-select']
+                ) ?>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="date_or_time_format" name="date_or_time_format" value="date_or_time_format" <?= $config['date_or_time_format'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="date_or_time_format"><?= lang('Config.date_or_time_format'); ?></label>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="financial_year" class="form-label"><?= lang('Config.financial_year') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-calendar2-month"></i></span>
+                <select class="form-select" name="financial_year" id="financial_year">
+                    <option value="1" <?= ($config['financial_year'] == '1' ? 'selected' : ''); ?>><?= lang('Config.financial_year_jan'); ?></option>
+                    <option value="2" <?= ($config['financial_year'] == '2' ? 'selected' : ''); ?>><?= lang('Config.financial_year_feb'); ?></option>
+                    <option value="3" <?= ($config['financial_year'] == '3' ? 'selected' : ''); ?>><?= lang('Config.financial_year_mar'); ?></option>
+                    <option value="4" <?= ($config['financial_year'] == '4' ? 'selected' : ''); ?>><?= lang('Config.financial_year_apr'); ?></option>
+                    <option value="5" <?= ($config['financial_year'] == '5' ? 'selected' : ''); ?>><?= lang('Config.financial_year_may'); ?></option>
+                    <option value="6" <?= ($config['financial_year'] == '6' ? 'selected' : ''); ?>><?= lang('Config.financial_year_jun'); ?></option>
+                    <option value="7" <?= ($config['financial_year'] == '7' ? 'selected' : ''); ?>><?= lang('Config.financial_year_jul'); ?></option>
+                    <option value="8" <?= ($config['financial_year'] == '8' ? 'selected' : ''); ?>><?= lang('Config.financial_year_aug'); ?></option>
+                    <option value="9" <?= ($config['financial_year'] == '9' ? 'selected' : ''); ?>><?= lang('Config.financial_year_sep'); ?></option>
+                    <option value="10" <?= ($config['financial_year'] == '10' ? 'selected' : ''); ?>><?= lang('Config.financial_year_oct'); ?></option>
+                    <option value="11" <?= ($config['financial_year'] == '11' ? 'selected' : ''); ?>><?= lang('Config.financial_year_nov'); ?></option>
+                    <option value="12" <?= ($config['financial_year'] == '12' ? 'selected' : ''); ?>><?= lang('Config.financial_year_dec'); ?></option>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_locale"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -396,7 +356,7 @@
                 }
             },
 
-            errorLabelContainer: '#locale_error_message_box'
+            errorLabelContainer: '.locale_error_message_box'
         }));
     });
 </script>
diff --git a/app/Views/configs/manage.php b/app/Views/configs/manage.php
index af71fc87b..4640667bb 100644
--- a/app/Views/configs/manage.php
+++ b/app/Views/configs/manage.php
@@ -1,85 +1,66 @@
+<?php
+$tabs = [
+    ['id' => 'info',         'icon' => 'bi-shop',                'label' => lang('Config.info'),         'title' => lang('Config.info_configuration')],
+    ['id' => 'general',      'icon' => 'bi-sliders',             'label' => lang('Config.general'),      'title' => lang('Config.general_configuration')],
+    ['id' => 'appearance',   'icon' => 'bi-eye',                 'label' => 'Appearance',                'title' => 'Appearance Configuration'],
+    ['id' => 'locale',       'icon' => 'bi-translate',           'label' => lang('Config.locale'),       'title' => lang('Config.locale_configuration')],
+    ['id' => 'tax',          'icon' => 'bi-piggy-bank',          'label' => lang('Config.tax'),          'title' => lang('Config.tax_configuration')],
+    ['id' => 'barcode',      'icon' => 'bi-upc-scan',            'label' => lang('Config.barcode'),      'title' => lang('Config.barcode_configuration')],
+    ['id' => 'stock',        'icon' => 'bi-truck',               'label' => lang('Config.location'),     'title' => lang('Config.location_configuration')],
+    ['id' => 'receipt',      'icon' => 'bi-receipt',             'label' => lang('Config.receipt'),      'title' => lang('Config.receipt_configuration')],
+    ['id' => 'invoice',      'icon' => 'bi-file-text',           'label' => lang('Config.invoice'),      'title' => lang('Config.invoice_configuration')],
+    ['id' => 'shortcuts',    'icon' => 'bi-shift',               'label' => lang('Config.shortcuts'),    'title' => lang('Config.shortcuts_configuration')],
+    ['id' => 'reward',       'icon' => 'bi-trophy',              'label' => lang('Config.reward'),       'title' => lang('Config.reward_configuration')],
+    ['id' => 'table',        'icon' => 'bi-cup-straw',           'label' => lang('Config.table'),        'title' => lang('Config.table_configuration')],
+    ['id' => 'email',        'icon' => 'bi-envelope',            'label' => lang('Config.email'),        'title' => lang('Config.email_configuration')],
+    ['id' => 'message',      'icon' => 'bi-chat',                'label' => lang('Config.message'),      'title' => lang('Config.message_configuration')],
+    ['id' => 'integrations', 'icon' => 'bi-gear-wide-connected', 'label' => lang('Config.integrations'), 'title' => lang('Config.integrations_configuration')],
+    ['id' => 'system',       'icon' => 'bi-info-circle',         'label' => lang('Config.system_info'),  'title' => lang('Config.system_info'), 'view' => 'configs/system_info'],
+    ['id' => 'license',      'icon' => 'bi-journal-check',       'label' => lang('Config.license'),      'title' => lang('Config.license_configuration')],
+];
+?>
 <?= view('partial/header') ?>
 
-<script type="text/javascript">
-    dialog_support.init("a.modal-dlg");
-</script>
+<script type="text/javascript" src="resources/clipboard/clipboard.min.js"></script>
 
-<ul class="nav nav-tabs" data-tabs="tabs">
-    <li class="active" role="presentation">
-        <a data-toggle="tab" href="#info_tab" title="<?= lang('Config.info_configuration') ?>"><?= lang('Config.info') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#general_tab" title="<?= lang('Config.general_configuration') ?>"><?= lang('Config.general') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#tax_tab" title="<?= lang('Config.tax_configuration') ?>"><?= lang('Config.tax') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#locale_tab" title="<?= lang('Config.locale_configuration') ?>"><?= lang('Config.locale') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#barcode_tab" title="<?= lang('Config.barcode_configuration') ?>"><?= lang('Config.barcode') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#stock_tab" title="<?= lang('Config.location_configuration') ?>"><?= lang('Config.location') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#receipt_tab" title="<?= lang('Config.receipt_configuration') ?>"><?= lang('Config.receipt') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#invoice_tab" title="<?= lang('Config.invoice_configuration') ?>"><?= lang('Config.invoice') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#shortcuts_tab" title="<?= lang('Config.shortcuts_configuration') ?>"><?= lang('Config.shortcuts') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#reward_tab" title="<?= lang('Config.reward_configuration') ?>"><?= lang('Config.reward') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#table_tab" title="<?= lang('Config.table_configuration') ?>"><?= lang('Config.table') ?></a>
-    </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#system_tab" title="<?= lang('Config.system_conf') ?>"><?= lang('Config.system_conf') ?></a>
-    </li>
-</ul>
+<div class="row">
+    <div class="col-lg-3 <?= $config['config_menu_position'] == 'start' ? '' : 'order-lg-2' ?>">
+        <div class="list-group d-none d-lg-block" role="tablist">
+            <?php foreach ($tabs as $i => $tab): ?>
+                <button type="button" class="list-group-item list-group-item-action text-truncate <?= $i === 0 ? 'active' : '' ?>" id="<?= $tab['id'] ?>-tab" data-bs-toggle="tab" data-bs-target="#<?= $tab['id'] ?>" role="tab" title="<?= $tab['title'] ?>">
+                    <i class="bi <?= $tab['icon'] ?> me-2"></i><?= $tab['label'] ?>
+                </button>
+            <?php endforeach ?>
+        </div>
 
-<div class="tab-content">
-    <div class="tab-pane fade in active" id="info_tab">
-        <?= view('configs/info_config') ?>
+        <div class="nav dropdown d-lg-none mb-3">
+            <button type="button" class="btn btn-primary w-100 dropdown-toggle text-truncate" id="configs-dropdown" data-bs-toggle="dropdown" aria-expanded="false">
+                <?= lang('Config.info') ?>
+            </button>
+            <ul class="dropdown-menu w-100" aria-labelledby="configs-dropdown">
+                <?php foreach ($tabs as $i => $tab): ?>
+                    <li>
+                        <a class="dropdown-item py-2 text-truncate <?= $i === 0 ? 'active' : '' ?>" data-bs-toggle="tab" data-bs-target="#<?= $tab['id'] ?>" role="tab" title="<?= $tab['title'] ?>">
+                            <i class="bi <?= $tab['icon'] ?> me-2"></i><?= $tab['label'] ?>
+                        </a>
+                    </li>
+                <?php endforeach ?>
+            </ul>
+        </div>
     </div>
-    <div class="tab-pane" id="general_tab">
-        <?= view('configs/general_config') ?>
-    </div>
-    <div class="tab-pane" id="tax_tab">
-        <?= view('configs/tax_config') ?>
-    </div>
-    <div class="tab-pane" id="locale_tab">
-        <?= view('configs/locale_config') ?>
-    </div>
-    <div class="tab-pane" id="barcode_tab">
-        <?= view('configs/barcode_config') ?>
-    </div>
-    <div class="tab-pane" id="stock_tab">
-        <?= view('configs/stock_config') ?>
-    </div>
-    <div class="tab-pane" id="receipt_tab">
-        <?= view('configs/receipt_config') ?>
-    </div>
-    <div class="tab-pane" id="invoice_tab">
-        <?= view('configs/invoice_config') ?>
-    </div>
-    <div class="tab-pane" id="shortcuts_tab">
-        <?= view('configs/shortcuts_config') ?>
-    </div>
-    <div class="tab-pane" id="reward_tab">
-        <?= view('configs/reward_config') ?>
-    </div>
-    <div class="tab-pane" id="table_tab">
-        <?= view('configs/table_config') ?>
-    </div>
-    <div class="tab-pane" id="system_tab">
-        <?= view('configs/system_config') ?>
+
+    <div class="col-lg-9 order-lg-1">
+        <div class="tab-content">
+            <?php foreach ($tabs as $i => $tab): ?>
+                <div class="tab-pane <?= $i === 0 ? 'active' : '' ?>" id="<?= $tab['id'] ?>" role="tabpanel" aria-labelledby="<?= $tab['id'] ?>-tab">
+                    <?= view($tab['view'] ?? 'configs/' . $tab['id'] . '_config') ?>
+                </div>
+            <?php endforeach ?>
+        </div>
     </div>
 </div>
 
+<script type="text/javascript" src="js/bs-tab_anchor_linking.js"></script>
+<script type="text/javascript" src="js/bs-validation.js"></script>
+
 <?= view('partial/footer') ?>
diff --git a/app/Views/configs/message_config.php b/app/Views/configs/message_config.php
index fcd6402f9..2da663f74 100644
--- a/app/Views/configs/message_config.php
+++ b/app/Views/configs/message_config.php
@@ -4,86 +4,51 @@
  */
 ?>
 
-<?= form_open('config/saveMessage/', ['id' => 'message_config_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveMessage/', ['id' => 'message_config_form', 'enctype' => 'multipart/form-data']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="message_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.message_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.msg_uid'), 'msg_uid', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-4">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <i class="bi bi-person"></i>
-                        </span>
-                        <?= form_input([
-                            'name'  => 'msg_uid',
-                            'id'    => 'msg_uid',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['msg_uid']
-                        ]) ?>
-                    </div>
-                </div>
+    <ul id="error_message_box" class="message_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-lg-6 mb-3">
+            <label for="msg_uid" class="form-label"><?= lang('Config.msg_uid'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group">
+                <span class="input-group-text" id="msg_uid-icon"><i class="bi bi-person"></i></span>
+                <input type="text" class="form-control" name="msg_uid" id="msg_uid" aria-describedby="msg_uid-icon" required value="<?= $config['msg_uid']; ?>">
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.msg_pwd'), 'msg_pwd', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-4">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <i class="bi bi-lock"></i>
-                        </span>
-                        <?= form_password([
-                            'name'  => 'msg_pwd',
-                            'id'    => 'msg_pwd',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['msg_pwd']
-                        ]) ?>
-                    </div>
-                </div>
+        <div class="col-12 col-lg-6 mb-3">
+            <label for="msg_pwd" class="form-label"><?= lang('Config.msg_pwd'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group">
+                <span class="input-group-text" id="msg_pwd-icon"><i class="bi bi-lock"></i></span>
+                <input type="password" class="form-control" name="msg_pwd" id="msg_pwd" aria-describedby="msg_pwd-icon" required value="<?= $config['msg_pwd']; ?>">
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.msg_src'), 'msg_src', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-4">
-                    <div class="input-group">
-                        <span class="input-group-addon input-sm">
-                            <i class="bi bi-megaphone"></i>
-                        </span>
-                        <?= form_input([
-                            'name'  => 'msg_src',
-                            'id'    => 'msg_src',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['msg_src'] == null ? $config['company'] : $config['msg_src']
-                        ]) ?>
-                    </div>
-                </div>
+        <div class="col-12 col-lg-6 mb-3">
+            <label for="msg_src" class="form-label"><?= lang('Config.msg_src'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group">
+                <span class="input-group-text" id="msg_src-icon"><i class="bi bi-megaphone"></i></span>
+                <input type="text" class="form-control" name="msg_src" id="msg_src" aria-describedby="msg_src-icon" required value="<?= $config['msg_src'] == null ? $config['company'] : $config['msg_src']; ?>">
             </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.msg_msg'), 'msg_msg', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
-                    <?= form_textarea([
-                        'name'        => 'msg_msg',
-                        'id'          => 'msg_msg',
-                        'class'       => 'form-control input-sm',
-                        'value'       => $config['msg_msg'],
-                        'placeholder' => lang('Config.msg_msg_placeholder')
-                    ]) ?>
-                </div>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_message',
-                'id'    => 'submit_message',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+        </div>
     </div>
+
+    <label for="msg_msg" class="form-label"><?= lang('Config.msg_msg'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-chat-quote"></i></span>
+        <textarea class="form-control" name="msg_msg" id="msg_msg" rows="10" placeholder="<?= lang('Config.msg_msg_placeholder'); ?>"><?= esc($config['msg_msg']); ?></textarea>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_message"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -91,7 +56,7 @@
     $(document).ready(function() {
         $('#message_config_form').validate($.extend(form_support.handler, {
 
-            errorLabelContainer: "#message_error_message_box",
+            errorLabelContainer: ".message_error_message_box",
 
             rules: {
                 msg_uid: "required",
diff --git a/app/Views/configs/receipt_config.php b/app/Views/configs/receipt_config.php
index 5301b9d9d..5130b1ced 100644
--- a/app/Views/configs/receipt_config.php
+++ b/app/Views/configs/receipt_config.php
@@ -4,334 +4,199 @@
  */
 ?>
 
-<?= form_open('config/saveReceipt/', ['id' => 'receipt_config_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveReceipt/', ['id' => 'receipt_config_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="receipt_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.receipt_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receipt_template'), 'receipt_template', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'receipt_template',
-                        [
-                            'receipt_default' => lang('Config.receipt_default'),
-                            'receipt_short'   => lang('Config.receipt_short')
-                        ],
-                        $config['receipt_template'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
+    <ul id="error_message_box" class="receipt_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="receipt_template" class="form-label"><?= lang('Config.receipt_template'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-file-code"></i></span>
+                <select class="form-select" name="receipt_template">
+                    <option value="receipt_default" <?= $config['receipt_template'] == 'receipt_default' ? 'selected' : '' ?>><?= lang('Config.receipt_default') ?></option>
+                    <option value="receipt_short" <?= $config['receipt_template'] == 'receipt_short' ? 'selected' : '' ?>><?= lang('Config.receipt_short') ?></option>
+                </select>
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receipt_font_size'), 'receipt_font_size', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'type'  => 'number',
-                            'min'   => '0',
-                            'max'   => '20',
-                            'name'  => 'receipt_font_size',
-                            'id'    => 'receipt_font_size',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['receipt_font_size']
-                        ]) ?>
-                        <span class="input-group-addon input-sm">px</span>
-                    </div>
-                </div>
+        <div class="col-6 col-lg-3">
+            <label for="receipt_font_size" class="form-label"><?= lang('Config.receipt_font_size'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrows-angle-expand"></i></span>
+                <input type="number" class="form-control" name="receipt_font_size" id="receipt_font_size" value="<?= $config['receipt_font_size']; ?>">
+                <span class="input-group-text">px</span>
             </div>
+        </div>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.print_delay_autoreturn'), 'print_delay_autoreturn', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'type'  => 'number',
-                            'min'   => '0',
-                            'max'   => '30',
-                            'name'  => 'print_delay_autoreturn',
-                            'id'    => 'print_delay_autoreturn',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['print_delay_autoreturn']
-                        ]) ?>
-                        <span class="input-group-addon input-sm">s</span>
-                    </div>
-                </div>
+        <div class="col-6 col-lg-3">
+            <label for="print_delay_autoreturn" class="form-label"><?= lang('Config.print_delay_autoreturn'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-stopwatch"></i></span>
+                <input type="number" class="form-control" name="print_delay_autoreturn" id="print_delay_autoreturn" value="<?= $config['print_delay_autoreturn']; ?>">
+                <span class="input-group-text">s</span>
             </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.email_receipt_check_behaviour'), 'email_receipt_check_behaviour', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-8">
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'email_receipt_check_behaviour',
-                            'value'   => 'always',
-                            'checked' => $config['email_receipt_check_behaviour'] == 'always'
-                        ]) ?>
-                        <?= lang('Config.email_receipt_check_behaviour_always') ?>
-                    </label>
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'email_receipt_check_behaviour',
-                            'value'   => 'never',
-                            'checked' => $config['email_receipt_check_behaviour'] == 'never'
-                        ]) ?>
-                        <?= lang('Config.email_receipt_check_behaviour_never') ?>
-                    </label>
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'email_receipt_check_behaviour',
-                            'value'   => 'last',
-                            'checked' => $config['email_receipt_check_behaviour'] == 'last'
-                        ]) ?>
-                        <?= lang('Config.email_receipt_check_behaviour_last') ?>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.print_receipt_check_behaviour'), 'print_receipt_check_behaviour', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-8">
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'print_receipt_check_behaviour',
-                            'value'   => 'always',
-                            'checked' => $config['print_receipt_check_behaviour'] == 'always'
-                        ]) ?>
-                        <?= lang('Config.print_receipt_check_behaviour_always') ?>
-                    </label>
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'print_receipt_check_behaviour',
-                            'value'   => 'never',
-                            'checked' => $config['print_receipt_check_behaviour'] == 'never'
-                        ]) ?>
-                        <?= lang('Config.print_receipt_check_behaviour_never') ?>
-                    </label>
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'print_receipt_check_behaviour',
-                            'value'   => 'last',
-                            'checked' => $config['print_receipt_check_behaviour'] == 'last'
-                        ]) ?>
-                        <?= lang('Config.print_receipt_check_behaviour_last') ?>
-                    </label>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receipt_show_company_name'), 'receipt_show_company_name', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'receipt_show_company_name',
-                        'value'   => 'receipt_show_company_name',
-                        'id'      => 'receipt_show_company_name',
-                        'checked' => $config['receipt_show_company_name'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receipt_show_taxes'), 'receipt_show_taxes', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'receipt_show_taxes',
-                        'value'   => 'receipt_show_taxes',
-                        'id'      => 'receipt_show_taxes',
-                        'checked' => $config['receipt_show_taxes'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receipt_show_tax_ind'), 'receipt_show_tax_ind', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'receipt_show_tax_ind',
-                        'value'   => 'receipt_show_tax_ind',
-                        'id'      => 'receipt_show_tax_ind',
-                        'checked' => $config['receipt_show_tax_ind'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receipt_show_total_discount'), 'receipt_show_total_discount', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'receipt_show_total_discount',
-                        'value'   => 'receipt_show_total_discount',
-                        'id'      => 'receipt_show_total_discount',
-                        'checked' => $config['receipt_show_total_discount'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receipt_show_description'), 'receipt_show_description', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'receipt_show_description',
-                        'value'   => 'receipt_show_description',
-                        'id'      => 'receipt_show_description',
-                        'checked' => $config['receipt_show_description'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receipt_show_serialnumber'), 'receipt_show_serialnumber', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'receipt_show_serialnumber',
-                        'value'   => 'receipt_show_serialnumber',
-                        'id'      => 'receipt_show_serialnumber',
-                        'checked' => $config['receipt_show_serialnumber'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.print_silently'), 'print_silently', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'print_silently',
-                        'id'      => 'print_silently',
-                        'value'   => 'print_silently',
-                        'checked' => $config['print_silently'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.print_header'), 'print_header', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'print_header',
-                        'id'      => 'print_header',
-                        'value'   => 'print_header',
-                        'checked' => $config['print_header'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.print_footer'), 'print_footer', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'print_footer',
-                        'id'      => 'print_footer',
-                        'value'   => 'print_footer',
-                        'checked' => $config['print_footer'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.receipt_printer'), 'config_receipt_printer', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown('receipt_printer', [], ' ', 'id="receipt_printer" class="form-control"') ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.invoice_printer'), 'config_invoice_printer', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown('invoice_printer', [], ' ', 'id="invoice_printer" class="form-control"') ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.takings_printer'), 'config_takings_printer', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown('takings_printer', [], ' ', 'id="takings_printer" class="form-control"') ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.print_top_margin'), 'print_top_margin', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'type'  => 'number',
-                            'min'   => '0',
-                            'max'   => '20',
-                            'name'  => 'print_top_margin',
-                            'id'    => 'print_top_margin',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['print_top_margin']
-                        ]) ?>
-                        <span class="input-group-addon input-sm">px</span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.print_left_margin'), 'print_left_margin', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'type'  => 'number',
-                            'min'   => '0',
-                            'max'   => '20',
-                            'name'  => 'print_left_margin',
-                            'id'    => 'print_left_margin',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['print_left_margin']
-                        ]) ?>
-                        <span class="input-group-addon input-sm">px</span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.print_bottom_margin'), 'print_bottom_margin', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'type'  => 'number',
-                            'min'   => '0',
-                            'max'   => '20',
-                            'name'  => 'print_bottom_margin',
-                            'id'    => 'print_bottom_margin',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['print_bottom_margin']
-                        ]) ?>
-                        <span class="input-group-addon input-sm">px</span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.print_right_margin'), 'print_right_margin', ['class' => 'control-label col-xs-2 required']) ?>
-                <div class="col-xs-2">
-                    <div class="input-group">
-                        <?= form_input([
-                            'type'  => 'number',
-                            'min'   => '0',
-                            'max'   => '20',
-                            'name'  => 'print_right_margin',
-                            'id'    => 'print_right_margin',
-                            'class' => 'form-control input-sm required',
-                            'value' => $config['print_right_margin']
-                        ]) ?>
-                        <span class="input-group-addon input-sm">px</span>
-                    </div>
-                </div>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_receipt',
-                'id'    => 'submit_receipt',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+        </div>
     </div>
+
+    <label for="email_receipt_check_behaviour" class="form-label"><?= lang('Config.email_receipt_check_behaviour'); ?></label>
+    <div class="row mb-3">
+        <div class="col-12">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="email_receipt_check_behaviour" id="email_receipt_check_behaviour_always" value="always" <?= $config['email_receipt_check_behaviour'] == 'always' ? 'checked' : '' ?>>
+                <label class="form-check-label" for="email_receipt_check_behaviour_always"><?= lang('Config.email_receipt_check_behaviour_always') ?></label>
+            </div>
+
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="email_receipt_check_behaviour" id="email_receipt_check_behaviour_never" value="never" <?= $config['email_receipt_check_behaviour'] == 'never' ? 'checked' : '' ?>>
+                <label class="form-check-label" for="email_receipt_check_behaviour_never"><?= lang('Config.email_receipt_check_behaviour_never') ?></label>
+            </div>
+
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="email_receipt_check_behaviour" id="email_receipt_check_behaviour_last" value="last" <?= $config['email_receipt_check_behaviour'] == 'last' ? 'checked' : '' ?>>
+                <label class="form-check-label" for="email_receipt_check_behaviour_last"><?= lang('Config.email_receipt_check_behaviour_last') ?></label>
+            </div>
+        </div>
+    </div>
+
+    <label for="print_receipt_check_behaviour" class="form-label"><?= lang('Config.print_receipt_check_behaviour'); ?></label>
+    <div class="row mb-3">
+        <div class="col-12">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="print_receipt_check_behaviour" id="print_receipt_check_behaviour_always" value="always" <?= $config['print_receipt_check_behaviour'] == 'always' ? 'checked' : '' ?>>
+                <label class="form-check-label" for="print_receipt_check_behaviour_always"><?= lang('Config.print_receipt_check_behaviour_always') ?></label>
+            </div>
+
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="print_receipt_check_behaviour" id="print_receipt_check_behaviour_never" value="never" <?= $config['print_receipt_check_behaviour'] == 'never' ? 'checked' : '' ?>>
+                <label class="form-check-label" for="print_receipt_check_behaviour_never"><?= lang('Config.print_receipt_check_behaviour_never') ?></label>
+            </div>
+
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="print_receipt_check_behaviour" id="print_receipt_check_behaviour_last" value="last" <?= $config['print_receipt_check_behaviour'] == 'last' ? 'checked' : '' ?>>
+                <label class="form-check-label" for="print_receipt_check_behaviour_last"><?= lang('Config.print_receipt_check_behaviour_last') ?></label>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="receipt_show_company_name" name="receipt_show_company_name" value="receipt_show_company_name" <?= $config['receipt_show_company_name'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="receipt_show_company_name"><?= lang('Config.receipt_show_company_name'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="receipt_show_taxes" name="receipt_show_taxes" value="receipt_show_taxes" <?= $config['receipt_show_taxes'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="receipt_show_taxes"><?= lang('Config.receipt_show_taxes'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="receipt_show_tax_ind" name="receipt_show_tax_ind" value="receipt_show_tax_ind" <?= $config['receipt_show_tax_ind'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="receipt_show_tax_ind"><?= lang('Config.receipt_show_tax_ind'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="receipt_show_total_discount" name="receipt_show_total_discount" value="receipt_show_total_discount" <?= $config['receipt_show_total_discount'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="receipt_show_total_discount"><?= lang('Config.receipt_show_total_discount'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="receipt_show_description" name="receipt_show_description" value="receipt_show_description" <?= $config['receipt_show_description'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="receipt_show_description"><?= lang('Config.receipt_show_description'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="receipt_show_serialnumber" name="receipt_show_serialnumber" value="receipt_show_serialnumber" <?= $config['receipt_show_serialnumber'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="receipt_show_serialnumber"><?= lang('Config.receipt_show_serialnumber'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="print_silently" name="print_silently" value="print_silently" <?= $config['print_silently'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="print_silently"><?= lang('Config.print_silently'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="print_header" name="print_header" value="print_header" <?= $config['print_header'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="print_header"><?= lang('Config.print_header'); ?></label>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="print_footer" name="print_footer" value="print_footer" <?= $config['print_footer'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="print_footer"><?= lang('Config.print_footer'); ?></label>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="receipt_printer" class="form-label"><?= lang('Config.receipt_printer'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-printer"></i></span>
+                <select class="form-select" name="receipt_printer" id="receipt_printer"></select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="invoice_printer" class="form-label"><?= lang('Config.invoice_printer'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-printer"></i></span>
+                <select class="form-select" name="invoice_printer" id="invoice_printer"></select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="takings_printer" class="form-label"><?= lang('Config.takings_printer'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-printer"></i></span>
+                <select class="form-select" name="takings_printer" id="takings_printer"></select>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-6 col-lg-3">
+            <label for="print_top_margin" class="form-label"><?= lang('Config.print_top_margin'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrow-bar-down"></i></span>
+                <input type="number" class="form-control" name="print_top_margin" id="print_top_margin" value="<?= $config['print_top_margin']; ?>">
+                <span class="input-group-text">px</span>
+            </div>
+        </div>
+
+        <div class="col-6 col-lg-3">
+            <label for="print_left_margin" class="form-label"><?= lang('Config.print_left_margin'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrow-bar-right"></i></span>
+                <input type="number" class="form-control" name="print_left_margin" id="print_left_margin" value="<?= $config['print_left_margin']; ?>">
+                <span class="input-group-text">px</span>
+            </div>
+        </div>
+
+        <div class="col-6 col-lg-3">
+            <label for="print_bottom_margin" class="form-label"><?= lang('Config.print_bottom_margin'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrow-bar-up"></i></span>
+                <input type="number" class="form-control" name="print_bottom_margin" id="print_bottom_margin" value="<?= $config['print_bottom_margin']; ?>">
+                <span class="input-group-text">px</span>
+            </div>
+        </div>
+
+        <div class="col-6 col-lg-3">
+            <label for="print_right_margin" class="form-label"><?= lang('Config.print_right_margin'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-arrow-bar-left"></i></span>
+                <input type="number" class="form-control" name="print_right_margin" id="print_right_margin" value="<?= $config['print_right_margin']; ?>">
+                <span class="input-group-text">px</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_receipt"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -370,6 +235,7 @@
                     },
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
@@ -379,7 +245,7 @@
                 });
             },
 
-            errorLabelContainer: "#receipt_error_message_box",
+            errorLabelContainer: ".receipt_error_message_box",
 
             rules: {
                 print_top_margin: {
diff --git a/app/Views/configs/reward_config.php b/app/Views/configs/reward_config.php
index c27ee32f1..50b0d3f25 100644
--- a/app/Views/configs/reward_config.php
+++ b/app/Views/configs/reward_config.php
@@ -5,38 +5,28 @@
  */
 ?>
 
-<?= form_open('config/saveRewards/', ['id' => 'reward_config_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveRewards/', ['id' => 'reward_config_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="reward_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.reward_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.customer_reward_enable'), 'customer_reward_enable', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'customer_reward_enable',
-                        'value'   => 'customer_reward_enable',
-                        'id'      => 'customer_reward_enable',
-                        'checked' => $config['customer_reward_enable'] == 1
-                    ]) ?>
-                </div>
-            </div>
+    <ul id="error_message_box" class="reward_error_message_box alert alert-warning d-none"></ul>
 
-            <div id="customer_rewards">
-                <?= view('partial/customer_rewards', ['customer_rewards' => $customer_rewards]) ?>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_reward',
-                'id'    => 'submit_reward',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="customer_reward_enable" name="customer_reward_enable" value="customer_reward_enable" <?= $config['customer_reward_enable'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="customer_reward_enable"><?= lang('Config.customer_reward_enable'); ?></label>
     </div>
+
+    <div class="row" id="customer_rewards">
+        <?= view('partial/customer_rewards', ['customer_rewards' => $customer_rewards]) ?>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_reward"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -76,9 +66,9 @@
             var new_block = block.insertAfter($(this).parent());
             var new_block_id = 'customer_reward_' + ++id;
             var new_block_id_next = 'reward_points_' + id;
-            $(new_block).find('label').html("<?= lang('Config.customer_reward') ?> " + ++table_count).attr('for', new_block_id).attr('class', 'control-label col-xs-2');
-            $(new_block).find("input[id='" + previous_id + "']").attr('id', new_block_id).removeAttr('disabled').attr('name', new_block_id).attr('class', 'form-control input-sm').val('');
-            $(new_block).find("input[id='" + previous_id_next + "']").attr('id', new_block_id_next).removeAttr('disabled').attr('name', new_block_id_next).attr('class', 'form-control input-sm').val('');
+            $(new_block).find('label').html("<?= lang('Config.customer_reward') ?> " + ++table_count).attr('for', new_block_id).attr('class', 'control-label col-xs-2'); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find("input[id='" + previous_id + "']").attr('id', new_block_id).removeAttr('disabled').attr('name', new_block_id).attr('class', 'form-control input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find("input[id='" + previous_id_next + "']").attr('id', new_block_id_next).removeAttr('disabled').attr('name', new_block_id_next).attr('class', 'form-control input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
             hide_show_remove();
         };
 
@@ -119,6 +109,7 @@
                     },
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
@@ -129,7 +120,7 @@
                 });
             },
 
-            errorLabelContainer: "#reward_error_message_box",
+            errorLabelContainer: ".reward_error_message_box",
 
             rules: {
                 <?php
diff --git a/app/Views/configs/shortcuts_config.php b/app/Views/configs/shortcuts_config.php
index 8ccb356f6..e6178a5c0 100644
--- a/app/Views/configs/shortcuts_config.php
+++ b/app/Views/configs/shortcuts_config.php
@@ -23,41 +23,32 @@ $shortcutLabels = [
 ];
 ?>
 
-<?= form_open('config/saveShortcuts', ['id' => 'shortcuts_config_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <div class="row">
-            <fieldset id="config_info">
-                <div class="col-md-8">
-                    <div id="required_fields_message"><?= esc(lang('Common.fields_required_message')) ?></div>
-                    <ul id="shortcuts_error_message_box" class="error_message_box"></ul>
+<?= form_open('config/saveShortcuts', ['id' => 'shortcuts_config_form']) ?>
 
-                    <?php foreach ($shortcutLabels as $name => $label): ?>
-                        <div class="form-group form-group-sm">
-                            <?= form_label($label, 'key_' . $name, ['class' => 'control-label col-xs-3']) ?>
-                            <div class="col-xs-4">
-                                <?php $keyboardShortcutSelectedValue = $keyboardShortcuts[$name]['value'] ?? ''; ?>
-                                <?= form_dropdown(
-                                    'key_' . $name,
-                                    $keyboardShortcutOptions,
-                                    $keyboardShortcutSelectedValue,
-                                    'class="form-control input-sm"'
-                                ) ?>
-                            </div>
-                        </div>
-                    <?php endforeach; ?>
+    <?php
+    $title_info['config_title'] = lang('Config.shortcuts_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-                    <div class="col-xs-12 clearfix">
-                        <?= form_submit([
-                            'name'  => 'submit_shortcuts',
-                            'id'    => 'submit_shortcuts',
-                            'value' => lang('Common.submit'),
-                            'class' => 'btn btn-primary btn-sm pull-right'
-                        ]) ?>
-                    </div>
+    <ul id="error_message_box" class="shortcuts_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <?php foreach ($shortcutLabels as $name => $label): ?>
+            <div class="col-12 col-lg-6">
+                <?= form_label($label, 'key_' . $name, ['class' => 'form-label']) ?>
+                <div class="input-group mb-3">
+                    <span class="input-group-text"><i class="bi bi-keyboard"></i></span>
+                    <?php $keyboardShortcutSelectedValue = $keyboardShortcuts[$name]['value'] ?? ''; ?>
+                    <?= form_dropdown('key_' . $name, $keyboardShortcutOptions, $keyboardShortcutSelectedValue, 'class="form-select"') ?>
                 </div>
-            </fieldset>
-        </div>
+            </div>
+        <?php endforeach; ?>
     </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_shortcuts"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -83,6 +74,6 @@ $shortcutLabels = [
             });
         },
 
-        errorLabelContainer: '#shortcuts_error_message_box'
+        errorLabelContainer: '.shortcuts_error_message_box'
     }));
 </script>
diff --git a/app/Views/configs/stock_config.php b/app/Views/configs/stock_config.php
index b49986ff1..371b4b8b7 100644
--- a/app/Views/configs/stock_config.php
+++ b/app/Views/configs/stock_config.php
@@ -4,26 +4,23 @@
  */
 ?>
 
-<?= form_open('config/saveLocations/', ['id' => 'location_config_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveLocations/', ['id' => 'location_config_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="stock_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.location_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div id="stock_locations">
-                <?= view('partial/stock_locations', ['stock_locations' => $stock_locations]) ?>
-            </div>
+    <ul id="error_message_box" class="stock_error_message_box alert alert-warning d-none"></ul>
 
-            <?= form_submit([
-                'name'  => 'submit_stock',
-                'id'    => 'submit_stock',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+    <div id="stock_locations">
+        <?= view('partial/stock_locations', ['stock_locations' => $stock_locations]) ?>
     </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_stock"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -43,8 +40,8 @@
             var block = $(this).parent().clone(true);
             var new_block = block.insertAfter($(this).parent());
             var new_block_id = 'stock_location[]';
-            $(new_block).find('label').html("<?= lang('Config.stock_location') ?> " + ++location_count).attr('for', new_block_id).attr('class', 'control-label col-xs-2');
-            $(new_block).find('input').attr('id', new_block_id).removeAttr('disabled').attr('name', new_block_id).attr('class', 'form-control input-sm').val('');
+            $(new_block).find('label').html("<?= lang('Config.stock_location') ?> " + ++location_count).attr('for', new_block_id).attr('class', 'control-label col-xs-2'); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find('input').attr('id', new_block_id).removeAttr('disabled').attr('name', new_block_id).attr('class', 'form-control input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
             hide_show_remove();
         };
 
@@ -79,6 +76,7 @@
                 $(form).ajaxSubmit({
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
@@ -89,7 +87,7 @@
                 });
             },
 
-            errorLabelContainer: "#stock_error_message_box",
+            errorLabelContainer: ".stock_error_message_box",
 
             rules: {
                 <?php
diff --git a/app/Views/configs/system_config.php b/app/Views/configs/system_config.php
deleted file mode 100644
index db97abc1c..000000000
--- a/app/Views/configs/system_config.php
+++ /dev/null
@@ -1,17 +0,0 @@
-<br>
-<div class="container-fluid">
-    <ul class="nav nav-tabs" id="myTabs" data-toggle="tab">
-        <li class="active"><a href="#system_tabs" data-toggle="tab" title="<?= lang('Config.system_conf') ?>"><?= lang('Config.system_conf') ?></a></li>
-        <li><a href="#email_tabs" data-toggle="tab" title="<?= lang('Config.email_configuration') ?>"><?= lang('Config.email') ?></a></li>
-        <li><a href="#message_tabs" data-toggle="tab" title="<?= lang('Config.message_configuration') ?>"><?= lang('Config.message') ?></a></li>
-        <li><a href="#integrations_tabs" data-toggle="tab" title="<?= lang('Config.integrations_configuration') ?>"><?= lang('Config.integrations') ?></a></li>
-        <li><a href="#license_tabs" data-toggle="tab" title="<?= lang('Config.license_configuration') ?>"><?= lang('Config.license') ?></a></li>
-    </ul>
-    <div class="tab-content">
-        <div class="tab-pane active" id="system_tabs"><?= view('configs/system_info') ?></div>
-        <div class="tab-pane" id="email_tabs"><?= view('configs/email_config') ?></div>
-        <div class="tab-pane" id="message_tabs"><?= view('configs/message_config') ?></div>
-        <div class="tab-pane" id="integrations_tabs"><?= view('configs/integrations_config') ?></div>
-        <div class="tab-pane" id="license_tabs"><br><?= view('configs/license_config') ?></div>
-    </div>
-</div>
diff --git a/app/Views/configs/system_info.php b/app/Views/configs/system_info.php
index 0b54c4dd6..b98f1e2bd 100644
--- a/app/Views/configs/system_info.php
+++ b/app/Views/configs/system_info.php
@@ -6,48 +6,97 @@
 
 use Config\OSPOS;
 
+
+$logs = WRITEPATH . 'logs/';
+$uploads = FCPATH . 'uploads/';
+$images = FCPATH . 'uploads/item_pics/';
+$importCustomers = WRITEPATH . '/uploads/importCustomers.csv';    //TODO: This variable does not follow naming conventions for the project.
+$bullet = '&raquo;' . '&nbsp;';
+$divider = ' &middot;' . '&nbsp;';
+$enabled = '<span class="text-success">&#10003; Enabled</span>';
+$disabled = '<span class="text-danger">&#10007; Disabled</span>';
+$writable = '<span class="text-success">&#10003; Writable</span>';
+$notwritable = '<span class="text-danger">&#10007; Not Writable</span>';
+$readable = '<span class="text-success">&#10003; Readable</span>';
+$notreadable = '<span class="text-danger">&#10007; Not Readable</span>';
+$permissions_check = '<span class="text-success">&#10003; Security Check Passed</span>';
+$permissions_fail = '<span class="text-danger">&#10007; Vulnerable or Incorrect Permissions</span>';
 ?>
 
-<style>
-    a:hover {
-        cursor: pointer;
-    }
+<?php
+$title_info['config_title'] = lang('Config.system_info');
+echo view('configs/config_header', $title_info);
+?>
 
-    hidden {
-        visibility: hidden;
-    }
-</style>
+<div class="mb-3"><?= lang('Config.server_notice'); ?></div>
 
-<script type="text/javascript" src="js/clipboard.min.js"></script>
+<form id="copy-issue">
 
-<div id="config_wrapper" class="col-sm-12">
-    <?= lang('Config.server_notice') ?>
-    <div class="container">
-        <div class="row">
-            <div class="col-sm-2" style="text-align: left;"><br>
-                <p style="min-height: 17.7em; font-weight: bold;">General Info</p>
-                <p style="min-height: 12.2em; font-weight: bold;">User Setup</p><br>
-                <p style="font-weight: bold;">Permissions</p>
+    <?php
+    if (!((substr(decoct(fileperms($logs)), -4) == 750)
+        && (substr(decoct(fileperms($uploads)), -4) == 750)
+        && (substr(decoct(fileperms($images)), -4) == 750)
+        && ((substr(decoct(fileperms($importCustomers)), -4) == 640)
+        || (substr(decoct(fileperms($importCustomers)), -4) == 660)))) {
+            echo '<div class="card border-danger-subtle mb-4">
+            <div class="card-header bg-danger-subtle border-danger-subtle fw-bold"><i class="bi bi-exclamation-circle"></i> ' . lang('Config.security_issue') . '</div>
+                <div class="card-body">
+                    <p class="card-text">' . lang('Config.perm_risk') . '</p>
+                    <ul class="list-unstyled mb-0">';
+        }
+        if (substr(decoct(fileperms($logs)), -4) != 750) {
+            echo '<li class="card-text">' . $bullet . '<code>writable/logs</code> ' . lang('Config.is_writable') . '</li>';
+        }
+
+        if (substr(decoct(fileperms($uploads)), -4) != 750) {
+            echo '<li class="card-text">' . $bullet . '<code>public/uploads</code> ' . lang('Config.is_writable') . '</li>';
+        }
+
+        if (substr(decoct(fileperms($images)), -4) != 750) {
+            echo '<li class="card-text">' . $bullet . '<code>public/uploads/item_pics</code> ' . lang('Config.is_writable') . '</li>';
+        }
+
+        if (!((substr(decoct(fileperms($importCustomers)), -4) == 640)
+            || (substr(decoct(fileperms($importCustomers)), -4) == 660))) {
+            echo '<li class="card-text">' . $bullet . '<code>importCustomers.csv</code> ' . lang('Config.is_readable') . '</li>';
+        }
+        echo '</div></div>';
+    ?>
+
+    <div class="row mb-3">
+        <label for="general-info" class="col-12 col-lg-2 form-label fw-bold">General Info</label>
+        <div class="col-12 col-lg-10" id="general-info">
+            <?= lang('Config.ospos_info') . ':&nbsp;' . esc(config('App')->application_version) . '&nbsp;-&nbsp;' . esc(substr(config(OSPOS::class)->commit_sha1, 0, 6)); ?><br>
+            <div>Language Code: <?= current_language_code(); ?></div><br>
+            <div id="time-error" class="row mb-3 d-none">
+                <div class="col-12 text-danger"><?= lang('Config.timezone_error'); ?></div>
+                <div class="col-6">
+                    <label for="timezone"><?= lang('Config.user_timezone'); ?></label>
+                    <div id="timezone"></div>
+                </div>
+                <div class="col-6">
+                    <label for="ostimezone"><?= lang('Config.os_timezone'); ?></label>
+                    <div id="ostimezone"><?= $config['timezone']; ?></div>
+                </div>
             </div>
-            <div class="col-sm-8" id="issuetemplate" style="text-align: left;"><br>
-                <?= lang('Config.ospos_info') . ':' ?>
-                <?= esc(config('App')->application_version) ?> - <?= esc(substr(config(OSPOS::class)->commit_sha1, 0, 6)) ?><br>
-                Language Code: <?= current_language_code() ?><br><br>
-                <div id="TimeError"></div>
-                Extensions & Modules:<br>
-                <?php
-                    echo "&#187; GD: ", extension_loaded('gd') ? '<span style="color: green;">Enabled &#x2713</span>' : '<span style="color: red;">Disabled &#x2717</span>', '<br>';
-                    echo "&#187; BC Math: ", extension_loaded('bcmath') ? '<span style="color: green;">Enabled &#x2713</span>' : '<span style="color: red;">Disabled &#x2717</span>', '<br>';
-                    echo "&#187; INTL: ", extension_loaded('intl') ? '<span style="color: green;">Enabled &#x2713</span>' : '<span style="color: red;">Disabled &#x2717</span>', '<br>';
-                    echo "&#187; OpenSSL: ", extension_loaded('openssl') ? '<span style="color: green;">Enabled &#x2713</span>' : '<span style="color: red;">Disabled &#x2717</span>', '<br>';
-                    echo "&#187; MBString: ", extension_loaded('mbstring') ? '<span style="color: green;">Enabled &#x2713</span>' : '<span style="color: red;">Disabled &#x2717</span>', '<br>';
-                    echo "&#187; Curl: ", extension_loaded('curl') ? '<span style="color: green;">Enabled &#x2713</span>' : '<span style="color: red;">Disabled &#x2717</span>', '<br>';
-                    echo "&#187; Json: ", extension_loaded('json') ? '<span style="color: green;">Enabled &#x2713</span>' : '<span style="color: red;">Disabled &#x2717</span>', '<br>';
-                    echo "&#187; Xml: ", extension_loaded('xml') ? '<span style="color: green;">Enabled &#x2713</span>' : '<span style="color: red;">Disabled &#x2717</span>', '<br><br>';
-                ?>
-                User Configuration:<br>
-                .Browser:
-                <?php
+            <span>Extensions & Modules:</span><br>
+            <ul class="list-unstyled">
+                <li><?= $bullet . 'GD: ', extension_loaded('gd') ? $enabled : $disabled; ?></li>
+                <li><?= $bullet . 'BC Math: ', extension_loaded('bcmath') ? $enabled : $disabled; ?></li>
+                <li><?= $bullet . 'INTL: ', extension_loaded('intl') ? $enabled : $disabled; ?></li>
+                <li><?= $bullet . 'OpenSSL: ', extension_loaded('openssl') ? $enabled : $disabled; ?></li>
+                <li><?= $bullet . 'MBString: ', extension_loaded('mbstring') ? $enabled : $disabled; ?></li>
+                <li><?= $bullet . 'Curl: ', extension_loaded('curl') ? $enabled : $disabled; ?></li>
+                <li><?= $bullet . 'Xml: ', extension_loaded('xml') ? $enabled : $disabled; ?></li>
+            </ul>
+        </div>
+    </div>
+
+    <div class="row mb-3">
+        <label for="user-setup" class="col-12 col-lg-2 form-label fw-bold">User Setup</label>
+        <div class="col-12 col-lg-10" id="user-setup">
+            <ul class="list-unstyled">
+            <?php
                 /**
                  * @param string $userAgent
                  * @return string
@@ -55,162 +104,169 @@ use Config\OSPOS;
                 function getBrowserNameAndVersion(string $userAgent): string
                 {
                     $browser = match (true) {
-                        strpos($userAgent, 'Opera')   !== false || strpos($userAgent, 'OPR/') !== false => 'Opera',
-                        strpos($userAgent, 'Edge')    !== false => 'Edge',
-                        strpos($userAgent, 'Chrome')  !== false => 'Chrome',
-                        strpos($userAgent, 'Safari')  !== false => 'Safari',
+                        strpos($userAgent, 'Opera') !== false || strpos($userAgent, 'OPR/') !== false => 'Opera',
+                        strpos($userAgent, 'Edge') !== false => 'Edge',
+                        strpos($userAgent, 'Chrome') !== false => 'Chrome',
+                        strpos($userAgent, 'Safari') !== false => 'Safari',
                         strpos($userAgent, 'Firefox') !== false => 'Firefox',
-                        strpos($userAgent, 'MSIE')    !== false || strpos($userAgent, 'Trident/7') !== false => 'Internet Explorer',
-                        default                       => 'Other',
+                        strpos($userAgent, 'MSIE') !== false || strpos($userAgent, 'Trident/7') !== false => 'Internet Explorer',
+                        default => 'Other',
                     };
 
                     $version = match ($browser) {
-                        'Opera'             => preg_match('/(Opera|OPR)\/([0-9.]+)/', $userAgent, $matches) ? $matches[2] : '',
-                        'Edge'              => preg_match('/Edge\/([0-9.]+)/', $userAgent, $matches) ? $matches[1] : '',
-                        'Chrome'            => preg_match('/Chrome\/([0-9.]+)/', $userAgent, $matches) ? $matches[1] : '',
-                        'Safari'            => preg_match('/Version\/([0-9.]+)/', $userAgent, $matches) ? $matches[1] : '',
-                        'Firefox'           => preg_match('/Firefox\/([0-9.]+)/', $userAgent, $matches) ? $matches[1] : '',
+                        'Opera' => preg_match('/(Opera|OPR)\/([0-9.]+)/', $userAgent, $matches) ? $matches[2] : '',
+                        'Edge' => preg_match('/Edge\/([0-9.]+)/', $userAgent, $matches) ? $matches[1] : '',
+                        'Chrome' => preg_match('/Chrome\/([0-9.]+)/', $userAgent, $matches) ? $matches[1] : '',
+                        'Safari' => preg_match('/Version\/([0-9.]+)/', $userAgent, $matches) ? $matches[1] : '',
+                        'Firefox' => preg_match('/Firefox\/([0-9.]+)/', $userAgent, $matches) ? $matches[1] : '',
                         'Internet Explorer' => preg_match('/(MSIE|rv:)([0-9.]+)/', $userAgent, $matches) ? $matches[2] : '',
-                        default             => '',
+                        default => '',
                     };
 
                     return $browser . ($version ? ' ' . $version : '');
                 }
-                echo esc(getBrowserNameAndVersion($_SERVER['HTTP_USER_AGENT']));
-                ?><br>
-                Server Software: <?= esc($_SERVER['SERVER_SOFTWARE']) ?><br>
-                PHP Version: <?= PHP_VERSION ?><br>
-                DB Version: <?= esc($dbVersion) ?><br>
-                Server Port: <?= esc($_SERVER['SERVER_PORT']) ?><br>
-                OS: <?= php_uname('s') . ' ' . php_uname('r') ?><br><br>
-                <br><br>
-
-                File Permissions:<br>
-                &#187; [writable/logs:]
-                <?php $logs = WRITEPATH . 'logs/';
-                $uploads = FCPATH. 'uploads/';
-                $images = FCPATH. 'uploads/item_pics/';
-                $importCustomers = WRITEPATH . '/uploads/importCustomers.csv';    // TODO: This variable does not follow naming conventions for the project.
-
-                if (is_writable($logs)) {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($logs)), -4) . ' |  ' . '<span style="color: green;">  Writable &#x2713 </span>';
-                } else {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($logs)), -4) . ' |  ' . '<span style="color: red;">    Not Writable &#x2717 </span>';
-                }
-
-                clearstatcache();
-                if (is_writable($logs) && substr(decoct(fileperms($logs)), -4) != 750) {
-                    echo ' | <span style="color: red;">Vulnerable or Incorrect Permissions &#x2717</span>';
-                } else {
-                    echo ' | <span style="color: green;">Security Check Passed &#x2713</span>';
-                }
-                clearstatcache();
-                ?>
-                <br>
-                &#187; [public/uploads:]
-                <?php
-                if (is_writable($uploads)) {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($uploads)), -4) . ' |  ' . '<span style="color: green;">     Writable &#x2713 </span>';
-                } else {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($uploads)), -4) . ' |  ' . '<span style="color: red;"> Not Writable &#x2717 </span>';
-                }
-
-                clearstatcache();
-
-                if (is_writable($uploads) && substr(decoct(fileperms($uploads)), -4) != 750) {
-                    echo ' | <span style="color: red;">Vulnerable or Incorrect Permissions &#x2717</span>';
-                } else {
-                    echo ' |  <span style="color: green;">Security Check Passed &#x2713 </span>';
-                }
-
-                clearstatcache();
-                ?>
-                <br>
-                &#187; [public/uploads/item_pics:]
-                <?php
-                if (is_writable($images)) {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($images)), -4) . ' |     ' . '<span style="color: green;"> Writable &#x2713 </span>';
-                } else {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($images)), -4) . ' |     ' . '<span style="color: red;"> Not Writable &#x2717 </span>';
-                }
-
-                clearstatcache();
-
-                if (substr(decoct(fileperms($images)), -4) != 750) {
-                    echo ' | <span style="color: red;">Vulnerable or Incorrect Permissions &#x2717</span>';
-                } else {
-                    echo ' | <span style="color: green;">Security Check Passed &#x2713 </span>';
-                }
-
-                clearstatcache();
-                ?>
-                <br>
-                &#187; [importCustomers.csv:]
-                <?php
-                if (is_readable($importCustomers)) {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($importCustomers)), -4) . ' |  ' . '<span style="color: green;">     Readable &#x2713 </span>';
-                } else {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($importCustomers)), -4) . ' |  ' . '<span style="color: red;"> Not Readable &#x2717 </span>';
-                }
-                clearstatcache();
-
-                if (!((substr(decoct(fileperms($importCustomers)), -4) == 640) || (substr(decoct(fileperms($importCustomers)), -4) == 660))) {
-                    echo ' | <span style="color: red;">Vulnerable or Incorrect Permissions &#x2717</span>';
-                } else {
-                    echo ' | <span style="color: green;">Security Check Passed &#x2713 </span>';
-                }
-                clearstatcache();
-                ?>
-                <br>
-                <?php
-                if (!((substr(decoct(fileperms($logs)), -4) == 750)
-                    && (substr(decoct(fileperms($uploads)), -4) == 750)
-                    && (substr(decoct(fileperms($images)), -4) == 750)
-                    && ((substr(decoct(fileperms($importCustomers)), -4) == 640)
-                        || (substr(decoct(fileperms($importCustomers)), -4) == 660)))) {
-                    echo '<br><span style="color: red;"><strong>' . lang('Config.security_issue') . '</strong> <br>' . lang('Config.perm_risk') . '</span><br>';
-                } else {
-                    echo '<br><span style="color: green;">' . lang('Config.no_risk') . '</strong> <br> </span>';
-                }
-
-                if (substr(decoct(fileperms($logs)), -4) != 750) {
-                    echo '<br><span style="color: red;"> &#187; [writable/logs:] ' . lang('Config.is_writable') . '</span>';
-                }
-
-                if (substr(decoct(fileperms($uploads)), -4) != 750) {
-                    echo '<br><span style="color: red;"> &#187; [writable/uploads:] ' . lang('Config.is_writable') . '</span>';
-                }
-
-                if (substr(decoct(fileperms($images)), -4) != 750) {
-                    echo '<br><span style="color: red;"> &#187; [writable/uploads/item_pics:] ' . lang('Config.is_writable') . '</span>';
-                }
-
-                if (!((substr(decoct(fileperms($importCustomers)), -4) == 640)
-                    || (substr(decoct(fileperms($importCustomers)), -4) == 660))) {
-                    echo '<br><span style="color: red;"> &#187; [importCustomers.csv:] ' . lang('Config.is_readable') . '</span>';
-                }
-                ?>
-            </div>
+            ?>
+                <li><?= $bullet . 'Browser: ' . esc(getBrowserNameAndVersion($_SERVER['HTTP_USER_AGENT'])); ?></li>
+                <li><?= $bullet . 'Server Software: ' . esc($_SERVER['SERVER_SOFTWARE']); ?></li>
+                <li><?= $bullet . 'PHP Version: ' . PHP_VERSION; ?></li>
+                <li><?= $bullet . 'DB Version: ' . esc($dbVersion); ?></li>
+                <li><?= $bullet . 'Server Port: ' . esc($_SERVER['SERVER_PORT']); ?></li>
+                <li><?= $bullet . 'OS: ' . php_uname('s') . ' ' . php_uname('r'); ?></li>
+            </ul>
         </div>
     </div>
+
+    <div class="row mb-3">
+        <label for="permissions" class="col-12 col-lg-2 form-label fw-bold">Permissions</label>
+        <div class="col-12 col-lg-10" id="permissions">
+            <ul class="list-unstyled">
+                <li>
+                    <?= $bullet; ?><code>writable/logs</code>
+                    <?php
+                    if (is_writable($logs)) {
+                        echo substr(sprintf("%o", fileperms($logs)), -4) . $divider . $writable;
+                    } else {
+                        echo substr(sprintf("%o", fileperms($logs)), -4) . $divider . $notwritable;
+
+                    }
+                    clearstatcache();
+
+                    echo $divider;
+
+                    if (is_writable($logs) && substr(decoct(fileperms($logs)), -4) != 750) {
+                        echo $permissions_fail;
+                    } else {
+                        echo $permissions_check;
+                    }
+                    clearstatcache();
+                    ?>
+                </li>
+                <li>
+                    <?= $bullet; ?><code>public/uploads</code>
+                    <?php
+                    if(is_writable($uploads)) {
+                        echo substr(sprintf("%o",fileperms($uploads)),-4) . $divider . $writable;
+                    } else {
+                        echo substr(sprintf("%o",fileperms($uploads)),-4) . $divider . $notwritable;
+                    }
+                    clearstatcache();
+
+                    echo $divider;
+
+                    if(is_writable($uploads) && substr(decoct(fileperms($uploads)), -4) != 750  ) {
+                        echo $permissions_fail;
+                    } else {
+                        echo $permissions_check;
+                    }
+                    clearstatcache();
+                    ?>
+                </li>
+                <li>
+                    <?= $bullet; ?><code>public/uploads/item_pics</code>
+                    <?php
+                    if (is_writable($images)) {
+                        echo substr(sprintf("%o", fileperms($images)), -4) . $divider . $writable;
+                    } else {
+                        echo substr(sprintf("%o", fileperms($images)), -4) . $divider . $notwritable;
+                    }
+                    clearstatcache();
+
+                    echo $divider;
+
+                    if (substr(decoct(fileperms($images)), -4) != 750) {
+                        echo $permissions_fail;
+                    } else {
+                        echo $permissions_check;
+                    }
+                    clearstatcache();
+
+                    ?>
+                </li>
+                <li>
+                    <?= $bullet; ?><code>importCustomers.csv</code>
+                    <?php
+                    if (is_readable($importCustomers)) {
+                        echo substr(sprintf("%o", fileperms($importCustomers)), -4) . $divider . $readable;
+                    } else {
+                        echo substr(sprintf("%o", fileperms($importCustomers)), -4) . $divider . $notreadable;
+                    }
+                    clearstatcache();
+
+                    echo $divider;
+
+                    if (!((substr(decoct(fileperms($importCustomers)), -4) == 640) || (substr(decoct(fileperms($importCustomers)), -4) == 660))) {
+                        echo $permissions_fail;
+                    } else {
+                        echo $permissions_check;
+                    }
+                    clearstatcache();
+
+                    ?>
+                </li>
+            </ul>
+            <?php
+            if (((substr(decoct(fileperms($logs)), -4) == 750) && (substr(decoct(fileperms($uploads)), -4) == 750) && (substr(decoct(fileperms($images)), -4) == 750) && ((substr(decoct(fileperms($importCustomers)), -4) == 640) || (substr(decoct(fileperms($importCustomers)), -4) == 660)))) {
+                echo '<span class="text-success">' . lang('Config.no_risk') . '</span>';
+            }
+            ?>
+        </div>
+    </div>
+</form>
+
+<div class="d-flex justify-content-center gap-3">
+    <button type="button" class="copy btn btn-secondary" data-clipboard-target="#copy-issue"><i class="bi bi-clipboard-plus"></i> Copy Info</button> <!-- TODO-BS5 add to translations -->
+    <a class="btn btn-secondary" href="https://github.com/opensourcepos/opensourcepos/issues/new" target="_blank" rel="noopener"><i class="bi bi-flag"></i> <?= lang('Config.report_an_issue') ?></a>
 </div>
 
-<div style="text-align: center;">
-    <a class="copy" data-clipboard-action="copy" data-clipboard-target="#issuetemplate">Copy Info</a> | <a href="https://github.com/opensourcepos/opensourcepos/issues/new" target="_blank"> <?= lang('Config.report_an_issue') ?></a>
-    <script type="text/javascript">
-        var clipboard = new ClipboardJS('.copy');
+<script type="text/javascript">
+    var clipboard = new ClipboardJS('.copy');
 
-        clipboard.on('success', function(e) {
-            document.getSelection().removeAllRanges();
+    clipboard.on('success', function(e) {
+        document.getSelection().removeAllRanges();
+        $.notify({
+            icon: 'bi bi-clipboard-check-fill',
+            message: 'System info successfully copied.'
+        }, {
+            type: 'success'
         });
+    });
 
-        $(function() {
-            $('#timezone').clone().appendTo('#timezoneE');
+    clipboard.on('error', function(e) {
+        $.notify({
+            icon: 'bi bi-clipboard-x-fill',
+            message: 'Something went wrong while copying.'
+        }, {
+            type: 'danger'
         });
+    });
 
-        if ($('#timezone').html() !== $('#ostimezone').html()) {
-            document.getElementById("timezone").innerText = Intl.DateTimeFormat().resolvedOptions().timeZone;
-            document.getElementById("TimeError").innerHTML = '<span style="color: red;"><?= lang('Config.timezone_error') ?></span><br><br><?= lang('Config.user_timezone') ?><div id="timezoneE" style="font-weight:600;"></div><br><?= lang('Config.os_timezone') ?><div id="ostimezoneE" style="font-weight:600;"><?= esc($config['timezone']) ?></div><br>';
-        }
-    </script>
-</div>
+    document.getElementById("timezone").innerText = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+    $(function() {
+        $('#timezone').clone().appendTo('#timezoneE');
+    });
+
+    if ($('#timezone').html() !== $('#ostimezone').html()) {
+        $('#time-error').removeClass('d-none');
+    };
+</script>
diff --git a/app/Views/configs/table_config.php b/app/Views/configs/table_config.php
index d54452283..f63bcd97a 100644
--- a/app/Views/configs/table_config.php
+++ b/app/Views/configs/table_config.php
@@ -5,38 +5,28 @@
  */
 ?>
 
-<?= form_open('config/saveTables/', ['id' => 'table_config_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveTables/', ['id' => 'table_config_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="table_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.table_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.dinner_table_enable'), 'dinner_table_enable', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-1">
-                    <?= form_checkbox([
-                        'name'    => 'dinner_table_enable',
-                        'value'   => 'dinner_table_enable',
-                        'id'      => 'dinner_table_enable',
-                        'checked' => $config['dinner_table_enable'] == 1
-                    ]) ?>
-                </div>
-            </div>
+    <ul id="error_message_box" class="table_error_message_box alert alert-warning d-none"></ul>
 
-            <div id="dinner_tables">
-                <?= view('partial/dinner_tables', ['dinner_tables' => $dinner_tables]) ?>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_table',
-                'id'    => 'submit_table',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="dinner_table_enable" name="dinner_table_enable" value="dinner_table_enable" <?= $config['dinner_table_enable'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="dinner_table_enable"><?= lang('Config.dinner_table_enable'); ?></label>
     </div>
+
+    <div class="row" id="dinner_tables">
+        <?= view('partial/dinner_tables', ['dinner_tables' => $dinner_tables]) ?>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_table"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -72,8 +62,8 @@
             var block = $(this).parent().clone(true);
             var new_block = block.insertAfter($(this).parent());
             var new_block_id = 'dinner_table_' + ++id;
-            $(new_block).find('label').html("<?= lang('Config.dinner_table') ?> " + ++table_count).attr('for', new_block_id).attr('class', 'control-label col-xs-2');
-            $(new_block).find('input').attr('id', new_block_id).removeAttr('disabled').attr('name', new_block_id).attr('class', 'form-control input-sm').val('');
+            $(new_block).find('label').html("<?= lang('Config.dinner_table') ?> " + ++table_count).attr('for', new_block_id).attr('class', 'control-label col-xs-2'); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find('input').attr('id', new_block_id).removeAttr('disabled').attr('name', new_block_id).attr('class', 'form-control input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
             hide_show_remove();
         };
 
@@ -114,6 +104,7 @@
                     },
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
diff --git a/app/Views/configs/tax_config.php b/app/Views/configs/tax_config.php
index 23248082c..ba0d7bfc8 100644
--- a/app/Views/configs/tax_config.php
+++ b/app/Views/configs/tax_config.php
@@ -8,136 +8,99 @@
  */
 ?>
 
-<?= form_open('config/saveTax/', ['id' => 'tax_config_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('config/saveTax/', ['id' => 'tax_config_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="tax_error_message_box" class="error_message_box"></ul>
+    <?php
+    $title_info['config_title'] = lang('Config.tax_configuration');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.tax_id'), 'tax_id', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'tax_id',
-                        'id'    => 'tax_id',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['tax_id']
-                    ]) ?>
-                </div>
+    <ul id="error_message_box" class="tax_error_message_box alert alert-warning d-none"></ul>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="tax_id" class="form-label"><?= lang('Config.tax_id'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-bank"></i></span>
+                <input type="text" name="tax_id" class="form-control" id="tax_id" value="<?= $config['tax_id']; ?>">
             </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.tax_included'), 'tax_included', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_checkbox([
-                        'name'    => 'tax_included',
-                        'id'      => 'tax_included',
-                        'value'   => 'tax_included',
-                        'checked' => $config['tax_included'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.default_tax_rate_1'), 'default_tax_1_rate', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'default_tax_1_name',
-                        'id'    => 'default_tax_1_name',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['default_tax_1_name'] !== false ? $config['default_tax_1_name'] : lang('Items.sales_tax_1')
-                    ]) ?>
-                </div>
-                <div class="col-xs-1 input-group">
-                    <?= form_input([
-                        'name'  => 'default_tax_1_rate',
-                        'id'    => 'default_tax_1_rate',
-                        'class' => 'form-control input-sm',
-                        'value' => to_tax_decimals($config['default_tax_1_rate'])
-                    ]) ?>
-                    <span class="input-group-addon input-sm">%</span>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.default_tax_rate_2'), 'default_tax_2_rate', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_input([
-                        'name'  => 'default_tax_2_name',
-                        'id'    => 'default_tax_2_name',
-                        'class' => 'form-control input-sm',
-                        'value' => $config['default_tax_2_name'] !== false ? $config['default_tax_2_name'] : lang('Items.sales_tax_2')
-                    ]) ?>
-                </div>
-                <div class="col-xs-1 input-group">
-                    <?= form_input([
-                        'name'  => 'default_tax_2_rate',
-                        'id'    => 'default_tax_2_rate',
-                        'class' => 'form-control input-sm',
-                        'value' => to_tax_decimals($config['default_tax_2_rate'])
-                    ]) ?>
-                    <span class="input-group-addon input-sm">%</span>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.use_destination_based_tax'), 'use_destination_based_tax', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_checkbox([
-                        'name'    => 'use_destination_based_tax',
-                        'id'      => 'use_destination_based_tax',
-                        'value'   => 'use_destination_based_tax',
-                        'checked' => $config['use_destination_based_tax'] == 1
-                    ]) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.default_tax_code'), 'default_tax_code', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'default_tax_code',
-                        $tax_code_options,
-                        $config['default_tax_code'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.default_tax_category'), 'default_tax_category', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'default_tax_category',
-                        $tax_category_options,
-                        $config['default_tax_category'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.default_tax_jurisdiction'), 'default_tax_jurisdiction', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-2">
-                    <?= form_dropdown(
-                        'default_tax_jurisdiction',
-                        $tax_jurisdiction_options,
-                        $config['default_tax_jurisdiction'],
-                        'class="form-control input-sm"'
-                    ) ?>
-                </div>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_tax',
-                'id'    => 'submit_tax',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+        </div>
     </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="tax_included" name="tax_included" <?= $config['tax_included'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="tax_included"><?= lang('Config.tax_included'); ?></label>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="default_tax_1_rate" class="form-label"><?= lang('Config.default_tax_rate_1') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-1-square"></i></span>
+                <input type="text" class="form-control w-25" id="default_tax_1_name" name="default_tax_1_name" value="<?= $config['default_tax_1_name'] !== false ? $config['default_tax_1_name'] : lang('Items.sales_tax_1') ?>">
+                <input type="text" class="form-control" id="default_tax_1_rate" name="default_tax_1_rate" value="<?= to_tax_decimals($config['default_tax_1_rate']) ?>">
+                <span class="input-group-text"><i class="bi bi-percent"></i></span>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="default_tax_2_rate" class="form-label"><?= lang('Config.default_tax_rate_2') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-2-square"></i></span>
+                <input type="text" class="form-control w-25" id="default_tax_2_name" name="default_tax_2_name" value="<?= $config['default_tax_2_name'] !== false ? $config['default_tax_2_name'] : lang('Items.sales_tax_2') ?>">
+                <input type="text" class="form-control" id="default_tax_2_rate" name="default_tax_2_rate" value="<?= to_tax_decimals($config['default_tax_2_rate']) ?>">
+                <span class="input-group-text"><i class="bi bi-percent"></i></span>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" role="switch" id="use_destination_based_tax" name="use_destination_based_tax" value="use_destination_based_tax" <?= $config['use_destination_based_tax'] == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="use_destination_based_tax"><?= lang('Config.use_destination_based_tax'); ?></label>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="default_tax_code" class="form-label"><?= lang('Config.default_tax_code'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-code"></i></span>
+                <select class="form-select" name="default_tax_code" id="default_tax_code">
+                    <?php foreach ($tax_code_options as $key => $value): ?>
+                        <option value="<?= $key ?>" <?= $config['default_tax_code'] == $key ? 'selected' : '' ?>><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="default_tax_category" class="form-label"><?= lang('Config.default_tax_category'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-bookmark"></i></span>
+                <select class="form-select" name="default_tax_category" id="default_tax_category">
+                    <?php foreach ($tax_category_options as $key => $value): ?>
+                        <option value="<?= $key ?>" <?= $config['default_tax_category'] == $key ? 'selected' : '' ?>><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="default_tax_jurisdiction" class="form-label"><?= lang('Config.default_tax_jurisdiction'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-globe"></i></span>
+                <select class="form-select" name="default_tax_jurisdiction" id="default_tax_jurisdiction">
+                    <?php foreach ($tax_jurisdiction_options as $key => $value): ?>
+                        <option value="<?= $key ?>" <?= $config['default_tax_jurisdiction'] == $key ? 'selected' : '' ?>><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_tax"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -168,6 +131,7 @@
                     },
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
diff --git a/app/Views/customers/form.php b/app/Views/customers/form.php
index 2aa45698d..c705e4dbd 100644
--- a/app/Views/customers/form.php
+++ b/app/Views/customers/form.php
@@ -11,433 +11,239 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("$controller_name/save/$person_info->person_id", ['id' => 'customer_form']) ?>
 
-<?= form_open("$controller_name/save/$person_info->person_id", ['id' => 'customer_form', 'class' => 'form-horizontal']) ?>
+    <?php if (!empty($stats) || (!empty($mailchimp_info) && !empty($mailchimp_activity))) { ?>
+        <ul class="nav nav-pills nav-justified mb-3" role="tablist">
+            <li class="nav-item" role="presentation">
+                <button type="button" class="nav-link active" data-bs-toggle="pill" data-bs-target="#customer_basic_info" role="tab"><?= lang('Customers.basic_information') ?></button>
+            </li>
+            <?php if (!empty($stats)) { ?>
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link" data-bs-toggle="pill" data-bs-target="#customer_stats_info" role="tab"><?= lang('Customers.stats_info') ?></button>
+                </li>
+            <?php } ?>
+            <?php if (!empty($mailchimp_info) && !empty($mailchimp_activity)) { ?>
+                <li class="nav-item" role="presentation">
+                    <button type="button" class="nav-link" data-bs-toggle="pill" data-bs-target="#customer_mailchimp_info" role="tab"><?= lang('Customers.mailchimp_info') ?></button>
+                </li>
+            <?php } ?>
+        </ul>
+    <?php } ?>
 
-    <ul class="nav nav-tabs nav-justified" data-tabs="tabs">
-        <li class="active" role="presentation">
-            <a data-toggle="tab" href="#customer_basic_info"><?= lang('Customers.basic_information') ?></a>
-        </li>
-        <?php if (!empty($stats)) { ?>
-            <li role="presentation">
-                <a data-toggle="tab" href="#customer_stats_info"><?= lang('Customers.stats_info') ?></a>
-            </li>
-        <?php } ?>
-        <?php if (!empty($mailchimp_info) && !empty($mailchimp_activity)) { ?>
-            <li role="presentation">
-                <a data-toggle="tab" href="#customer_mailchimp_info"><?= lang('Customers.mailchimp_info') ?></a>
-            </li>
-        <?php } ?>
-    </ul>
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
     <div class="tab-content">
-        <div class="tab-pane fade in active" id="customer_basic_info">
-            <fieldset>
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Customers.consent'), 'consent', ['class' => 'required control-label col-xs-3']) ?>
-                    <div class="col-xs-1">
-                        <?= form_checkbox('consent', 1, $person_info->consent == '' ? !$config['enforce_privacy'] : (bool)$person_info->consent) ?>
-                    </div>
+        <div class="tab-pane show active" id="customer_basic_info" role="tabpanel" tabindex="0">
+            <div class="form-check mb-3">
+                <input class="form-check-input" type="checkbox" name="consent" id="consent" value="1" required <?php $checked = ($person_info->consent == '' ? !$config['enforce_privacy'] : (bool)$person_info->consent); if ($checked) { echo 'checked';} ?>>
+                <label class="form-check-label" for="consent"><?= lang('Customers.consent') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            </div>
+
+            <?= view('people/form_basic_info') ?>
+
+            <label for="discount_type" class="form-label"><?= lang('Customers.discount_type') ?></label>
+            <div class="mb-3">
+                <div class="form-check form-check-inline">
+                    <input class="form-check-input" type="radio" name="discount_type" id="discount_type_percent" value="0" <?php if ($person_info->discount_type == PERCENT) echo 'checked'; ?>>
+                    <label class="form-check-label" for="discount_type_percent"><?= lang('Customers.discount_percent') ?></label>
+                </div>
+                <div class="form-check form-check-inline">
+                    <input class="form-check-input" type="radio" name="discount_type" id="discount_type_fixed" value="1" <?php if ($person_info->discount_type == FIXED) echo 'checked'; ?>>
+                    <label class="form-check-label" for="discount_type_fixed"><?= lang('Customers.discount_fixed') ?></label>
+                </div>
+            </div>
+
+            <label for="discount" class="form-label"><?= lang('Customers.discount'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="discount-icon"><i class="bi bi-patch-minus"></i></span>
+                <input type="number" step="any" class="form-control" name="discount" id="discount" aria-describedby="discount-icon" value="<?= $person_info->discount_type === FIXED ? to_currency_no_money($person_info->discount) : to_decimals($person_info->discount)?>">
+            </div>
+
+            <label for="company_name" class="form-label"><?= lang('Customers.company_name'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="company_name-icon"><i class="bi bi-building"></i></span>
+                <input type="text" class="form-control" name="company_name" id="company_name" aria-describedby="company_name-icon" value="<?= $person_info->company_name ?>">
+            </div>
+
+            <label for="account_number" class="form-label"><?= lang('Customers.account_number'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="account_number-icon"><i class="bi bi-hash"></i></span>
+                <input type="text" class="form-control" name="account_number" id="account_number" aria-describedby="account_number-icon" value="<?= $person_info->account_number ?>">
+            </div>
+
+            <label for="tax_id" class="form-label"><?= lang('Customers.tax_id'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="tax_id-icon"><i class="bi bi-bank"></i></span>
+                <input type="text" class="form-control" name="tax_id" id="tax_id" aria-describedby="tax_id-icon" value="<?= $person_info->tax_id ?>">
+            </div>
+
+            <?php if ($config['customer_reward_enable']): ?>
+                <label for="rewards" class="form-label"><?= lang('Customers.rewards_package'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text"><i class="bi bi-trophy"></i></span>
+                    <select class="form-select" name="package_id">
+                        <?php foreach ($packages as $id => $label): ?>
+                            <option value="<?= $id ?>" <?= $id == $selected_package ? 'selected' : '' ?>><?= $label ?></option>
+                        <?php endforeach; ?>
+                    </select>
                 </div>
 
-                <?= view('people/form_basic_info') ?>
-
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Customers.discount_type'), 'discount_type', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-8">
-                        <label class="radio-inline">
-                            <?= form_radio([
-                                'name'    => 'discount_type',
-                                'type'    => 'radio',
-                                'id'      => 'discount_type',
-                                'value'   => 0,
-                                'checked' => $person_info->discount_type == PERCENT
-                            ]) ?> <?= lang('Customers.discount_percent') ?>
-                        </label>
-                        <label class="radio-inline">
-                            <?= form_radio([
-                                'name'    => 'discount_type',
-                                'type'    => 'radio',
-                                'id'      => 'discount_type',
-                                'value'   => 1,
-                                'checked' => $person_info->discount_type == FIXED
-                            ]) ?> <?= lang('Customers.discount_fixed') ?>
-                        </label>
-                    </div>
+                <label for="available_points" class="form-label"><?= lang('Customers.available_points'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="available_points-icon"><i class="bi bi-hand-thumbs-up"></i></span>
+                    <input type="text" class="form-control" name="available_points" id="available_points" aria-describedby="available_points-icon" value="<?= $person_info->points ?>" disabled readonly>
                 </div>
+            <?php endif; ?>
 
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Customers.discount'), 'discount', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-3">
-                        <div class="input-group input-group-sm">
-                            <?= form_input([
-                                'name'    => 'discount',
-                                'id'      => 'discount',
-                                'class'   => 'form-control input-sm',
-                                'onClick' => 'this.select();',
-                                'value'   => $person_info->discount_type === FIXED ? to_currency_no_money($person_info->discount) : to_decimals($person_info->discount)
-                            ]) ?>
-                        </div>
-                    </div>
+            <div class="form-check mb-3">
+                <input class="form-check-input" type="checkbox" name="taxable" id="taxable" value="1" <?php if ($person_info->taxable == 1) echo 'checked'; ?>>
+                <label class="form-check-label" for="taxable"><?= lang('Customers.taxable') ?></label>
+            </div>
+
+            <?php if ($use_destination_based_tax): ?>
+                <label for="sales_tax_code_name" class="form-label"><?= lang('Customers.tax_code'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="sales_tax_code_name-icon"><i class="bi bi-bank"></i></span>
+                    <input type="hidden" name="sales_tax_code_id" value="<?= $person_info->sales_tax_code_id ?>">
+                    <input type="text" class="form-control" name="sales_tax_code_name" id="sales_tax_code_name" aria-describedby="sales_tax_code_name-icon" size="50" value="<?= $sales_tax_code_label ?>">
                 </div>
+            <?php endif; ?>
 
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Customers.company_name'), 'customer_company_name', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-8">
-                        <?= form_input([
-                            'name'  => 'company_name',
-                            'id'    => 'customer_company_name',
-                            'class' => 'form-control input-sm',
-                            'value' => $person_info->company_name
-                        ]) ?>
-                    </div>
-                </div>
+            <label for="datetime" class="form-label"><?= lang('Customers.date'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="datetime-icon"><i class="bi bi-calendar2"></i></span>
+                <input type="hidden" name="date" id="datetime" aria-describedby="datetime-icon" value="<?= to_datetime(strtotime($person_info->date)) ?>">
+                <input type="text" class="form-control" value="<?= to_datetime(strtotime($person_info->date)) ?>" disabled readonly>
+            </div>
 
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Customers.account_number'), 'account_number', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-4">
-                        <?= form_input([
-                            'name'  => 'account_number',
-                            'id'    => 'account_number',
-                            'class' => 'form-control input-sm',
-                            'value' => $person_info->account_number
-                        ]) ?>
-                    </div>
-                </div>
-
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Customers.tax_id'), 'tax_id', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-4">
-                        <?= form_input([
-                            'name'  => 'tax_id',
-                            'id'    => 'tax_id',
-                            'class' => 'form-control input-sm',
-                            'value' => $person_info->tax_id
-                        ]) ?>
-                    </div>
-                </div>
-
-                <?php if ($config['customer_reward_enable']): ?>
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.rewards_package'), 'rewards', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-8">
-                            <?= form_dropdown(
-                                'package_id',
-                                $packages,
-                                $selected_package,
-                                'class="form-control input-sm"'
-                            ) ?>
-                        </div>
-                    </div>
-
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.available_points'), 'available_points', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-4">
-                            <?= form_input([
-                                'name'     => 'available_points',
-                                'id'       => 'available_points',
-                                'class'    => 'form-control input-sm',
-                                'value'    => $person_info->points,
-                                'disabled' => ''
-                            ]) ?>
-                        </div>
-                    </div>
-                <?php endif; ?>
-
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Customers.taxable'), 'taxable', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-1">
-                        <?= form_checkbox('taxable', 1, $person_info->taxable == 1) ?>
-                    </div>
-                </div>
-
-                <?php if ($use_destination_based_tax) { ?>
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.tax_code'), 'sales_tax_code_name', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-8">
-                            <div class="input-group input-group-sm">
-                                <?= form_input([
-                                    'name'  => 'sales_tax_code_name',
-                                    'id'    => 'sales_tax_code_name',
-                                    'class' => 'form-control input-sm',
-                                    'size'  => '50',
-                                    'value' => $sales_tax_code_label
-                                ]) ?>
-                                <?= form_hidden('sales_tax_code_id', $person_info->sales_tax_code_id) ?>
-                            </div>
-                        </div>
-                    </div>
-                <?php } ?>
-
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Customers.date'), 'date', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-8">
-                        <div class="input-group">
-                            <span class="input-group-addon input-sm"><i class="bi bi-calendar2"></i></span>
-                            <?= form_input([
-                                'name'     => 'date',
-                                'id'       => 'datetime',
-                                'class'    => 'form-control input-sm',
-                                'value'    => to_datetime(strtotime($person_info->date)),
-                                'readonly' => 'true'
-                            ]) ?>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Customers.employee'), 'employee', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-8">
-                        <?= form_input([
-                            'name'     => 'employee',
-                            'id'       => 'employee',
-                            'class'    => 'form-control input-sm',
-                            'value'    => $employee,
-                            'readonly' => 'true'
-                        ]) ?>
-                    </div>
-                </div>
-
-                <?= form_hidden('employee_id', $person_info->employee_id) ?>
-            </fieldset>
+            <label for="employee" class="form-label"><?= lang('Customers.employee'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="employee-icon"><i class="bi bi-person"></i></span>
+                <input type="hidden" name="employee_id" value="<?= $person_info->employee_id ?>">
+                <input type="text" class="form-control" name="employee" id="employee" aria-describedby="employee-icon" value="<?= $employee ?>" disabled readonly>
+            </div>
         </div>
 
         <?php if (!empty($stats)) { ?>
-            <br>
-            <div class="tab-pane" id="customer_stats_info">
-                <fieldset>
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.total'), 'total', ['class' => 'control-label col-xs-5']) ?>
-                        <div class="col-xs-4">
-                            <div class="input-group input-group-sm">
-                                <?php if (!is_right_side_currency_symbol()): ?>
-                                    <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                                <?php endif; ?>
-                                <?= form_input([
-                                    'name'     => 'total',
-                                    'id'       => 'total',
-                                    'class'    => 'form-control input-sm',
-                                    'value'    => to_currency_no_money($stats->total),
-                                    'disabled' => ''
-                                ]) ?>
-                                <?php if (is_right_side_currency_symbol()): ?>
-                                    <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                                <?php endif; ?>
-                            </div>
-                        </div>
-                    </div>
+            <div class="tab-pane" id="customer_stats_info" role="tabpanel" tabindex="0">
+                <label for="total" class="form-label"><?= lang('Customers.total'); ?></label>
+                <div class="input-group mb-3">
+                    <?php if (!is_right_side_currency_symbol()): ?>
+                        <span class="input-group-text" id="total-icon"><?= esc($config['currency_symbol']) ?></span>
+                    <?php endif; ?>
+                    <input type="text" class="form-control" name="total" id="total" aria-describedby="total-icon" value="<?= to_currency_no_money($stats->total) ?>" disabled readonly>
+                    <?php if (is_right_side_currency_symbol()): ?>
+                        <span class="input-group-text" id="total-icon"><?= esc($config['currency_symbol']) ?></span>
+                    <?php endif; ?>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.max'), 'max', ['class' => 'control-label col-xs-5']) ?>
-                        <div class="col-xs-4">
-                            <div class="input-group input-group-sm">
-                                <?php if (!is_right_side_currency_symbol()): ?>
-                                    <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                                <?php endif; ?>
-                                <?= form_input([
-                                    'name'     => 'max',
-                                    'id'       => 'max',
-                                    'class'    => 'form-control input-sm',
-                                    'value'    => to_currency_no_money($stats->max),
-                                    'disabled' => ''
-                                ]) ?>
-                                <?php if (is_right_side_currency_symbol()): ?>
-                                    <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                                <?php endif; ?>
-                            </div>
-                        </div>
-                    </div>
+                <label for="max" class="form-label"><?= lang('Customers.max'); ?></label>
+                <div class="input-group mb-3">
+                    <?php if (!is_right_side_currency_symbol()): ?>
+                        <span class="input-group-text" id="max-icon"><?= esc($config['currency_symbol']) ?></span>
+                    <?php endif; ?>
+                    <input type="text" class="form-control" name="max" id="max" aria-describedby="max-icon" value="<?= to_currency_no_money($stats->max) ?>" disabled readonly>
+                    <?php if (is_right_side_currency_symbol()): ?>
+                        <span class="input-group-text" id="max-icon"><?= esc($config['currency_symbol']) ?></span>
+                    <?php endif; ?>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.min'), 'min', ['class' => 'control-label col-xs-5']) ?>
-                        <div class="col-xs-4">
-                            <div class="input-group input-group-sm">
-                                <?php if (!is_right_side_currency_symbol()): ?>
-                                    <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                                <?php endif; ?>
-                                <?= form_input([
-                                    'name'     => 'min',
-                                    'id'       => 'min',
-                                    'class'    => 'form-control input-sm',
-                                    'value'    => to_currency_no_money($stats->min),
-                                    'disabled' => ''
-                                ]) ?>
-                                <?php if (is_right_side_currency_symbol()): ?>
-                                    <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                                <?php endif; ?>
-                            </div>
-                        </div>
-                    </div>
+                <label for="min" class="form-label"><?= lang('Customers.min'); ?></label>
+                <div class="input-group mb-3">
+                    <?php if (!is_right_side_currency_symbol()): ?>
+                        <span class="input-group-text" id="min-icon"><?= esc($config['currency_symbol']) ?></span>
+                    <?php endif; ?>
+                    <input type="text" class="form-control" name="min" id="min" aria-describedby="min-icon" value="<?= to_currency_no_money($stats->min) ?>" disabled readonly>
+                    <?php if (is_right_side_currency_symbol()): ?>
+                        <span class="input-group-text" id="min-icon"><?= esc($config['currency_symbol']) ?></span>
+                    <?php endif; ?>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.average'), 'average', ['class' => 'control-label col-xs-5']) ?>
-                        <div class="col-xs-4">
-                            <div class="input-group input-group-sm">
-                                <?php if (!is_right_side_currency_symbol()): ?>
-                                    <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                                <?php endif; ?>
-                                <?= form_input([
-                                    'name'     => 'average',
-                                    'id'       => 'average',
-                                    'class'    => 'form-control input-sm',
-                                    'value'    => to_currency_no_money($stats->average),
-                                    'disabled' => ''
-                                ]) ?>
-                                <?php if (is_right_side_currency_symbol()): ?>
-                                    <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                                <?php endif; ?>
-                            </div>
-                        </div>
-                    </div>
+                <label for="average" class="form-label"><?= lang('Customers.average'); ?></label>
+                <div class="input-group mb-3">
+                    <?php if (!is_right_side_currency_symbol()): ?>
+                        <span class="input-group-text" id="average-icon"><?= esc($config['currency_symbol']) ?></span>
+                    <?php endif; ?>
+                    <input type="text" class="form-control" name="average" id="average" aria-describedby="average-icon" value="<?= to_currency_no_money($stats->average) ?>" disabled readonly>
+                    <?php if (is_right_side_currency_symbol()): ?>
+                        <span class="input-group-text" id="average-icon"><?= esc($config['currency_symbol']) ?></span>
+                    <?php endif; ?>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.quantity'), 'quantity', ['class' => 'control-label col-xs-5']) ?>
-                        <div class="col-xs-4">
-                            <div class="input-group input-group-sm">
-                                <span class="input-group-addon input-sm"><b><?= '>' ?></b></span>
-                                <?= form_input([
-                                    'name'     => 'quantity',
-                                    'id'       => 'quantity',
-                                    'class'    => 'form-control input-sm',
-                                    'value'    => to_quantity_decimals($stats->quantity),
-                                    'disabled' => ''
-                                ]) ?>
-                            </div>
-                        </div>
-                    </div>
+                <label for="quantity" class="form-label"><?= lang('Customers.quantity'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="quantity-icon"><i class="bi bi-123"></i></span>
+                    <input type="text" class="form-control" name="quantity" id="quantity" aria-describedby="quantity-icon" value="<?= to_quantity_decimals($stats->quantity) ?>" disabled readonly>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.avg_discount'), 'avg_discount', ['class' => 'control-label col-xs-5']) ?>
-                        <div class="col-xs-4">
-                            <div class="input-group input-group-sm">
-                                <?= form_input([
-                                    'name'     => 'avg_discount',
-                                    'id'       => 'avg_discount',
-                                    'class'    => 'form-control input-sm',
-                                    'value'    => to_decimals($stats->avg_discount),
-                                    'disabled' => ''
-                                ]) ?>
-                                <span class="input-group-addon input-sm"><b>%</b></span>
-                            </div>
-                        </div>
-                    </div>
-                </fieldset>
+                <label for="avg_discount" class="form-label"><?= lang('Customers.avg_discount'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="avg_discount-icon"><i class="bi bi-percent"></i></span>
+                    <input type="text" class="form-control" name="avg_discount" id="avg_discount" aria-describedby="avg_discount-icon" value="<?= to_decimals($stats->avg_discount) ?>" disabled readonly>
+                </div>
             </div>
         <?php } ?>
 
         <?php if (!empty($mailchimp_info) && !empty($mailchimp_activity)) { ?>
-            <div class="tab-pane" id="customer_mailchimp_info">
-                <fieldset>
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.mailchimp_status'), 'mailchimp_status', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-4">
-                            <?= form_dropdown(
-                                'mailchimp_status',
-                                [
-                                    'subscribed'   => 'subscribed',
-                                    'unsubscribed' => 'unsubscribed',
-                                    'cleaned'      => 'cleaned',
-                                    'pending'      => 'pending'
-                                ],
-                                $mailchimp_info['status'],
-                                ['id' => 'mailchimp_status', 'class' => 'form-control input-sm']
-                            ) ?>
-                        </div>
-                    </div>
+            <div class="tab-pane" id="customer_mailchimp_info" role="tabpanel" tabindex="0">
+                <label for="mailchimp_status" class="form-label"><?= lang('Customers.mailchimp_status'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text"><i class="bi bi-envelope-check"></i></span>
+                    <select class="form-select" name="mailchimp_status" id="mailchimp_status">
+                        <option value="subscribed" <?= $mailchimp_info['status'] === 'subscribed' ? 'selected' : '' ?>>Subscribed</option>
+                        <option value="unsubscribed" <?= $mailchimp_info['status'] === 'unsubscribed' ? 'selected' : '' ?>>Unsubscribed</option>
+                        <option value="cleaned" <?= $mailchimp_info['status'] === 'cleaned' ? 'selected' : '' ?>>Cleaned</option>
+                        <option value="pending" <?= $mailchimp_info['status'] === 'pending' ? 'selected' : '' ?>>Pending</option>
+                    </select>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.mailchimp_vip'), 'mailchimp_vip', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-1">
-                            <?= form_checkbox('mailchimp_vip', 1, $mailchimp_info['vip'] == 1) ?>
-                        </div>
-                    </div>
+                <div class="form-check mb-3">
+                    <input class="form-check-input" type="checkbox" name="mailchimp_vip" id="mailchimp_vip" value="1" <?= $mailchimp_info['vip'] == 1 ? 'checked' : '' ?>>
+                    <label class="form-check-label" for="mailchimp_vip"><?= lang('Customers.mailchimp_vip') ?></label>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.mailchimp_member_rating'), 'mailchimp_member_rating', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-4">
-                            <?= form_input([
-                                'name'     => 'mailchimp_member_rating',
-                                'class'    => 'form-control input-sm',
-                                'value'    => $mailchimp_info['member_rating'],
-                                'disabled' => ''
-                            ]) ?>
-                        </div>
-                    </div>
+                <label for="mailchimp_member_rating" class="form-label"><?= lang('Customers.mailchimp_member_rating'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="mailchimp_member_rating-icon"><i class="bi bi-hand-thumbs-up"></i></span>
+                    <input type="text" class="form-control" name="mailchimp_member_rating" id="mailchimp_member_rating" aria-describedby="mailchimp_member_rating-icon" value="<?= $mailchimp_info['member_rating'] ?>" disabled readonly>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.mailchimp_activity_total'), 'mailchimp_activity_total', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-4">
-                            <?= form_input([
-                                'name'     => 'mailchimp_activity_total',
-                                'class'    => 'form-control input-sm',
-                                'value'    => $mailchimp_activity['total'],
-                                'disabled' => ''
-                            ]) ?>
-                        </div>
-                    </div>
+                <label for="mailchimp_activity_total" class="form-label"><?= lang('Customers.mailchimp_activity_total'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="mailchimp_activity_total-icon"><i class="bi bi-envelope-arrow-up"></i></span>
+                    <input type="text" class="form-control" name="mailchimp_activity_total" id="mailchimp_activity_total" aria-describedby="mailchimp_activity_total-icon" value="<?= $mailchimp_activity['total'] ?>" disabled readonly>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.mailchimp_activity_lastopen'), 'mailchimp_activity_lastopen', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-4">
-                            <?= form_input([
-                                'name'     => 'mailchimp_activity_lastopen',
-                                'class'    => 'form-control input-sm',
-                                'value'    => $mailchimp_activity['lastopen'],
-                                'disabled' => ''
-                            ]) ?>
-                        </div>
-                    </div>
+                <label for="mailchimp_activity_lastopen" class="form-label"><?= lang('Customers.mailchimp_activity_lastopen'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="mailchimp_activity_lastopen-icon"><i class="bi bi-calendar2-check"></i></span>
+                    <input type="text" class="form-control" name="mailchimp_activity_lastopen" id="mailchimp_activity_lastopen" aria-describedby="mailchimp_activity_lastopen-icon" value="<?= $mailchimp_activity['lastopen'] ?>" disabled readonly>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.mailchimp_activity_open'), 'mailchimp_activity_open', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-4">
-                            <?= form_input([
-                                'name'     => 'mailchimp_activity_open',
-                                'class'    => 'form-control input-sm',
-                                'value'    => $mailchimp_activity['open'],
-                                'disabled' => ''
-                            ]) ?>
-                        </div>
-                    </div>
+                <label for="mailchimp_activity_open" class="form-label"><?= lang('Customers.mailchimp_activity_open'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="mailchimp_activity_open-icon"><i class="bi bi-envelope-open"></i></span>
+                    <input type="text" class="form-control" name="mailchimp_activity_open" id="mailchimp_activity_open" aria-describedby="mailchimp_activity_open-icon" value="<?= $mailchimp_activity['open'] ?>" disabled readonly>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.mailchimp_activity_click'), 'mailchimp_activity_click', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-4">
-                            <?= form_input([
-                                'name'     => 'mailchimp_activity_click',
-                                'class'    => 'form-control input-sm',
-                                'value'    => $mailchimp_activity['click'],
-                                'disabled' => ''
-                            ]) ?>
-                        </div>
-                    </div>
+                <label for="mailchimp_activity_click" class="form-label"><?= lang('Customers.mailchimp_activity_click'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="mailchimp_activity_click-icon"><i class="bi bi-hand-index"></i></span>
+                    <input type="text" class="form-control" name="mailchimp_activity_click" id="mailchimp_activity_click" aria-describedby="mailchimp_activity_click-icon" value="<?= $mailchimp_activity['click'] ?>" disabled readonly>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.mailchimp_activity_unopen'), 'mailchimp_activity_unopen', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-4">
-                            <?= form_input([
-                                'name'     => 'mailchimp_activity_unopen',
-                                'class'    => 'form-control input-sm',
-                                'value'    => $mailchimp_activity['unopen'],
-                                'disabled' => ''
-                            ]) ?>
-                        </div>
-                    </div>
+                <label for="mailchimp_activity_unopen" class="form-label"><?= lang('Customers.mailchimp_activity_unopen'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="mailchimp_activity_unopen-icon"><i class="bi bi-envelope-slash"></i></span>
+                    <input type="text" class="form-control" name="mailchimp_activity_unopen" id="mailchimp_activity_unopen" aria-describedby="mailchimp_activity_unopen-icon" value="<?= $mailchimp_activity['unopen'] ?>" disabled readonly>
+                </div>
 
-                    <div class="form-group form-group-sm">
-                        <?= form_label(lang('Customers.mailchimp_email_client'), 'mailchimp_email_client', ['class' => 'control-label col-xs-3']) ?>
-                        <div class="col-xs-4">
-                            <?= form_input([
-                                'name'     => 'mailchimp_email_client',
-                                'class'    => 'form-control input-sm',
-                                'value'    => $mailchimp_info['email_client'],
-                                'disabled' => ''
-                            ]) ?>
-                        </div>
-                    </div>
-                </fieldset>
+                <label for="mailchimp_email_client" class="form-label"><?= lang('Customers.mailchimp_email_client'); ?></label>
+                <div class="input-group mb-3">
+                    <span class="input-group-text" id="mailchimp_email_client-icon"><i class="bi bi-inbox"></i></span>
+                    <input type="text" class="form-control" name="mailchimp_email_client" id="mailchimp_email_client" aria-describedby="mailchimp_email_client-icon" value="<?= $mailchimp_info['email_client'] ?>" disabled readonly>
+                </div>
             </div>
         <?php } ?>
     </div>
diff --git a/app/Views/customers/form_csv_import.php b/app/Views/customers/form_csv_import.php
index 1ca85c018..8e4bd66d6 100644
--- a/app/Views/customers/form_csv_import.php
+++ b/app/Views/customers/form_csv_import.php
@@ -1,29 +1,22 @@
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open_multipart('customers/importCsvFile/', ['id' => 'csv_form']) ?>
 
-<?= form_open_multipart('customers/importCsvFile/', ['id' => 'csv_form', 'class' => 'form-horizontal']) ?>
-    <fieldset id="item_basic_info">
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <div class="col-xs-12">
-                <a href="<?= esc('customers/csv') ?>"><?= lang('Common.download_import_template') ?></a>
-            </div>
+    <a type="button" class="btn btn-secondary mb-3" href="<?= esc('customers/csv') ?>"><?= lang('Common.download_import_template') ?></a>
+
+    <div class="fileinput fileinput-new input-group mb-3" data-provides="fileinput">
+        <span class="input-group-text"><i class="bi bi-filetype-csv"></i></span>
+        <div class="form-control" data-trigger="fileinput">
+            <span class="fileinput-filename"></span>
         </div>
+        <span class="input-group-text fileinput-exists" data-dismiss="fileinput" style="cursor: pointer;"><?= lang('Common.import_remove_file') ?></span>
+        <span class="input-group-text btn-file">
+            <span class="fileinput-new"><?= lang('Common.import_select_file') ?></span>
+            <span class="fileinput-exists"><?= lang('Common.import_change_file') ?></span>
+            <input type="file" id="file_path" name="file_path" accept=".csv">
+        </span>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <div class="col-xs-12">
-                <div class="fileinput fileinput-new input-group" data-provides="fileinput">
-                    <div class="form-control" data-trigger="fileinput">
-                        <i class="bi bi-filetype-csv icon-spacing fileinput-exists"></i><span class="fileinput-filename"></span>
-                    </div>
-                    <span class="input-group-addon input-sm btn btn-default btn-file">
-                        <span class="fileinput-new"><?= lang('Common.import_select_file') ?></span><span class="fileinput-exists"><?= lang('Common.import_change_file') ?></span><input type="file" id="file_path" name="file_path" accept=".csv">
-                    </span>
-                    <a href="#" class="input-group-addon input-sm btn btn-default fileinput-exists" data-dismiss="fileinput"><?= lang('Common.import_remove_file') ?></a>
-                </div>
-            </div>
-        </div>
-
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">
diff --git a/app/Views/employees/form.php b/app/Views/employees/form.php
index 1a8e0a777..e4efc97cc 100644
--- a/app/Views/employees/form.php
+++ b/app/Views/employees/form.php
@@ -8,152 +8,125 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("$controller_name/save/$person_info->person_id", ['id' => 'employee_form']) ?>
 
-<?= form_open("$controller_name/save/$person_info->person_id", ['id' => 'employee_form', 'class' => 'form-horizontal']) ?>
-
-    <ul class="nav nav-tabs nav-justified" data-tabs="tabs">
-        <li class="active" role="presentation">
-            <a data-toggle="tab" href="#employee_basic_info"><?= lang('Employees.basic_information') ?></a>
+    <ul class="nav nav-pills nav-justified mb-3" role="tablist">
+        <li class="nav-item" role="presentation">
+            <button type="button" class="nav-link active" data-bs-toggle="pill" data-bs-target="#employee_basic_info" role="tab"><?= lang('Employees.basic_information') ?></button>
         </li>
-        <li role="presentation">
-            <a data-toggle="tab" href="#employee_login_info"><?= lang('Employees.login_info') ?></a>
+        <li class="nav-item" role="presentation">
+            <button type="button" class="nav-link" data-bs-toggle="pill" data-bs-target="#employee_login_info" role="tab"><?= lang('Employees.login_info') ?></button>
         </li>
-        <li role="presentation">
-            <a data-toggle="tab" href="#employee_permission_info"><?= lang('Employees.permission_info') ?></a>
+        <li class="nav-item" role="presentation">
+            <button type="button" class="nav-link" data-bs-toggle="pill" data-bs-target="#employee_permission_info" role="tab"><?= lang('Employees.permission_info') ?></button>
         </li>
     </ul>
 
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
+
     <div class="tab-content">
-        <div class="tab-pane fade in active" id="employee_basic_info">
-            <fieldset>
-                <?= view('people/form_basic_info') ?>
-            </fieldset>
+        <div class="tab-pane show active" id="employee_basic_info" role="tabpanel" tabindex="0">
+            <?= view('people/form_basic_info') ?>
         </div>
 
-        <div class="tab-pane" id="employee_login_info">
-            <fieldset>
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Employees.username'), 'username', ['class' => 'required control-label col-xs-3']) ?>
-                    <div class="col-xs-8">
-                        <div class="input-group">
-                            <span class="input-group-addon input-sm"><i class="bi bi-person"></i></span>
-                            <?= form_input([
-                                'name'  => 'username',
-                                'id'    => 'username',
-                                'class' => 'form-control input-sm',
-                                'value' => $person_info->username
-                            ]) ?>
-                        </div>
-                    </div>
-                </div>
+        <div class="tab-pane" id="employee_login_info" role="tabpanel" tabindex="0">
+            <label for="username" class="form-label"><?= lang('Employees.username'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="username-icon"><i class="bi bi-person"></i></span>
+                <input type="text" class="form-control" name="username" id="username" aria-describedby="username-icon" value="<?= $person_info->username; ?>" required>
+            </div>
 
-                <?php $password_label_attributes = $person_info->person_id == "" ? ['class' => 'required'] : []; ?>
+            <?php $password_label_attributes = $person_info->person_id == "" ? ['class' => 'required'] : []; ?>
+            <label for="password" class="form-label"><?= lang('Employees.password'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="password-icon"><i class="bi bi-lock"></i></span>
+                <input type="password" class="form-control" name="password" id="password" aria-describedby="password-icon" required>
+            </div>
 
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Employees.password'), 'password', array_merge($password_label_attributes, ['class' => 'control-label col-xs-3'])) ?>
-                    <div class="col-xs-8">
-                        <div class="input-group">
-                            <span class="input-group-addon input-sm"><i class="bi bi-lock"></i></span>
-                            <?= form_password([
-                                'name'  => 'password',
-                                'id'    => 'password',
-                                'class' => 'form-control input-sm'
-                            ]) ?>
-                        </div>
-                    </div>
-                </div>
+            <label for="repeat_password" class="form-label"><?= lang('Employees.repeat_password'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="repeat_password-icon"><i class="bi bi-lock"></i></span>
+                <input type="password" class="form-control" name="repeat_password" id="repeat_password" aria-describedby="repeat_password-icon" required>
+            </div>
 
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Employees.repeat_password'), 'repeat_password', array_merge($password_label_attributes, ['class' => 'control-label col-xs-3'])) ?>
-                    <div class="col-xs-8">
-                        <div class="input-group">
-                            <span class="input-group-addon input-sm"><i class="bi bi-lock"></i></span>
-                            <?= form_password([
-                                'name'  => 'repeat_password',
-                                'id'    => 'repeat_password',
-                                'class' => 'form-control input-sm'
-                            ]) ?>
-                        </div>
-                    </div>
-                </div>
+            <label for="language" class="form-label"><?= lang('Employees.language'); ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="language-icon"><i class="bi bi-globe"></i></span>
+                <?php
+                $languages = get_languages();
+                $languages[':'] = lang('Employees.system_language');
+                $language_code = current_language_code();
+                $language = current_language();
 
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Employees.language'), 'language', ['class' => 'control-label col-xs-3']) ?>
-                    <div class="col-xs-8">
-                        <div class="input-group">
-                            <?php
-                            $languages = get_languages();
-                            $languages[':'] = lang('Employees.system_language');
-                            $language_code = current_language_code();
-                            $language = current_language();
+                // If No language is set then it will display "System Language"
+                if ($language_code === current_language_code(true)) {
+                    $language_code = '';
+                    $language = '';
+                }
 
-                            // If No language is set then it will display "System Language"
-                            if ($language_code === current_language_code(true)) {
-                                $language_code = '';
-                                $language = '';
-                            }
-
-                            echo form_dropdown(
-                                'language',
-                                $languages,
-                                "$language_code:$language",
-                                ['class' => 'form-control input-sm']
-                            );
-                            ?>
-                        </div>
-                    </div>
-                </div>
-            </fieldset>
+                echo form_dropdown(
+                    'language',
+                    $languages,
+                    "$language_code:$language",
+                    ['class' => 'form-select']
+                );
+                ?>
+            </div>
         </div>
 
-        <div class="tab-pane" id="employee_permission_info">
-            <fieldset>
-                <p><?= lang('Employees.permission_desc') ?></p>
+        <div class="tab-pane" id="employee_permission_info" role="tabpanel" tabindex="0">
+            <div class="mb-3"><?= lang('Employees.permission_desc') ?></div>
+            <ul class="list-unstyled" id="permission_list">
+                <?php foreach ($all_modules as $module): ?>
+                    <li class="form-check">
+                        <input class="form-check-input module" type="checkbox" value="<?= $module->module_id ?>" name="grant_<?= $module->module_id ?>" id="grant_<?= $module->module_id ?>" <?= $module->grant == 1 ? 'checked' : '' ?>>
+                        <label class="form-check-label" for="grant_<?= $module->module_id ?>">
+                            <select class="form-select form-select-sm d-inline-block w-auto me-1 module" name="menu_group_<?= $module->module_id ?>">
+                                <option value="home" <?= $module->menu_group == 'home' ? 'selected' : '' ?>>
+                                    <?= lang('Module.home') ?>
+                                </option>
+                                <option value="office" <?= $module->menu_group == 'office' ? 'selected' : '' ?>>
+                                    <?= lang('Module.office') ?>
+                                </option>
+                                <option value="both" <?= $module->menu_group == 'both' ? 'selected' : '' ?>>
+                                    <?= lang('Module.both') ?>
+                                </option>
+                            </select>
+                            <span><?= lang("Module.$module->module_id") ?>:</span>
+                            <span class="fw-light fst-italic"><?= lang("Module.$module->module_id" . '_desc') ?></span>
+                        </label>
 
-                <ul id="permission_list">
-                    <?php foreach ($all_modules as $module) { ?>
-                        <li>
-                            <?= form_checkbox("grant_$module->module_id", $module->module_id, $module->grant == 1, 'class="module"') ?>
-                            <?= form_dropdown(
-                                "menu_group_$module->module_id",
-                                [
-                                    'home'   => lang('Module.home'),
-                                    'office' => lang('Module.office'),
-                                    'both'   => lang('Module.both')
-                                ],
-                                $module->menu_group,
-                                'class="module"'
-                            ) ?>
-
-                            <span class="medium"><?= lang("Module.$module->module_id") ?>:</span>
-                            <span class="small"><?= lang("Module.$module->module_id" . '_desc') ?></span>
+                        <?php foreach ($all_subpermissions as $permission): ?>
                             <?php
-                            foreach ($all_subpermissions as $permission) {
                                 $exploded_permission = explode('_', $permission->permission_id, 2);
-                                if ($permission->module_id == $module->module_id) {
-                                    $lang_key = $module->module_id . '.' . $exploded_permission[1];
-                                    $lang_line = lang(ucfirst($lang_key));
-                                    $lang_line = (lang(ucfirst($lang_key)) == $lang_line) ? ucwords(str_replace("_", " ", $exploded_permission[1])) : $lang_line;
-                                    if (!empty($lang_line)) {
-                            ?>
-                                        <ul>
-                                            <li>
-                                                <?= form_checkbox("grant_$permission->permission_id", $permission->permission_id, $permission->grant == 1) ?>
-                                                <?= form_hidden("menu_group_$permission->permission_id", "--") ?>
-                                                <span class="medium"><?= esc($lang_line) ?></span>
-                                            </li>
-                                        </ul>
-                            <?php
-                                    }
+
+                                if ($permission->module_id != $module->module_id) {
+                                    continue;
+                                }
+
+                                $lang_key = $module->module_id . '.' . $exploded_permission[1];
+                                $lang_line = lang(ucfirst($lang_key));
+
+                                // Fallback if language line doesn't exist
+                                if ($lang_line === lang(ucfirst($lang_key))) {
+                                    $lang_line = ucwords(str_replace("_", " ", $exploded_permission[1]));
+                                }
+
+                                if (empty($lang_line)) {
+                                    continue;
                                 }
-                            }
                             ?>
-                        </li>
-                    <?php } ?>
-                </ul>
-            </fieldset>
+                            <ul class="list-unstyled">
+                                <li class="form-check">
+                                    <input class="form-check-input module" type="checkbox" value="<?= $permission->permission_id ?>" name="grant_<?= $permission->permission_id ?>" id="grant_<?= $permission->permission_id ?>" <?= $permission->grant == 1 ? 'checked' : '' ?>>
+                                    <input type="hidden" name="menu_group_<?= $permission->permission_id ?>" value="--">
+                                    <label class="form-check-label" for="grant_<?= $permission->permission_id ?>"><?= esc($lang_line) ?></label>
+                                </li>
+                            </ul>
+                        <?php endforeach; ?>
+                    </li>
+                <?php endforeach; ?>
+            </ul>
         </div>
     </div>
 
diff --git a/app/Views/expenses/form.php b/app/Views/expenses/form.php
index a65f9decb..7bb494a80 100644
--- a/app/Views/expenses/form.php
+++ b/app/Views/expenses/form.php
@@ -9,159 +9,109 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("expenses/save/$expenses_info->expense_id", ['id' => 'expenses_edit_form']) ?>
 
-<?= form_open("expenses/save/$expenses_info->expense_id", ['id' => 'expenses_edit_form', 'class' => 'form-horizontal']) ?>
-    <fieldset id="item_basic_info">
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Expenses.info'), 'expenses_info', ['class' => 'control-label col-xs-3']) ?>
-            <?= form_label(!empty($expenses_info->expense_id) ? lang('Expenses.expense_id') . " $expenses_info->expense_id" : '', 'expenses_info_id', ['class' => 'control-label col-xs-8', 'style' => 'text-align: left']) ?>
+    <div class="mb-3"><?= lang('Expenses.info') ?> <?= !empty($expenses_info->expense_id) ? lang('Expenses.expense_id') . " $expenses_info->expense_id" : '' ?></div>
+
+    <label for="datetime" class="form-label"><?= lang('Expenses.date'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="datetime-icon"><i class="bi bi-calendar2"></i></span>
+        <input type="hidden" name="date" id="datetime" aria-describedby="datetime-icon" value="<?= to_datetime(strtotime($expenses_info->date)) ?>">
+        <input type="text" class="form-control" value="<?= to_datetime(strtotime($expenses_info->date)) ?>" disabled readonly>
+    </div>
+
+    <label for="supplier_name" class="form-label"><?= lang('Expenses.supplier_name'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="supplier_name-icon"><i class="bi bi-truck"></i></span>
+        <input type="hidden" name="supplier_id" id="supplier_id">
+        <input type="text" class="form-control"  name="supplier_name" id="supplier_name" aria-describedby="supplier_name-icon" value="<?= lang('Expenses.start_typing_supplier_name') ?>">
+        <button type="button" class="btn btn-outline-danger" id="remove_supplier_button" title="Remove Supplier"><i class="bi bi-x-circle"></i></button>
+    </div>
+
+    <label for="supplier_tax_code" class="form-label"><?= lang('Expenses.supplier_tax_code'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="supplier_tax_code-icon"><i class="bi bi-piggy-bank"></i></span>
+        <input type="text" class="form-control" name="supplier_tax_code" id="supplier_tax_code" aria-describedby="supplier_tax_code-icon" value="<?= $expenses_info->supplier_tax_code ?>">
+    </div>
+
+    <label for="amount" class="form-label"><?= lang('Expenses.amount'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="amount-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+        <input class="form-control" name="amount" id="amount" aria-describedby="amount-icon" value="<?= to_currency_no_money($expenses_info->amount) ?>" required>
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="amount-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+    </div>
+
+    <label for="tax_amount" class="form-label"><?= lang('Expenses.tax_amount'); ?></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="tax_amount-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+        <input class="form-control" name="tax_amount" id="tax_amount" aria-describedby="tax_amount-icon" value="<?= to_currency_no_money($expenses_info->tax_amount) ?>">
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="tax_amount-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+    </div>
+
+    <label for="payment_type" class="form-label"><?= lang('Expenses.payment'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="payment_type-icon"><i class="bi bi-wallet2"></i></span>
+        <select class="form-select" name="payment_type" id="payment_type" aria-describedby="payment_type-icon">
+            <?php foreach ($payment_options as $k => $v): ?>
+                <option value="<?= $k ?>" <?= $k == $expenses_info->payment_type ? 'selected' : '' ?>>
+                    <?= $v ?>
+                </option>
+            <?php endforeach; ?>
+        </select>
+    </div>
+
+    <label for="category" class="form-label"><?= lang('Expenses_categories.name'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="category-icon"><i class="bi bi-bookmark"></i></span>
+        <select class="form-select" name="expense_category_id" id="category" aria-describedby="category-icon">
+            <?php foreach ($expense_categories as $k => $v): ?>
+                <option value="<?= $k ?>" <?= $k == $expenses_info->expense_category_id ? 'selected' : '' ?>>
+                    <?= $v ?>
+                </option>
+            <?php endforeach; ?>
+        </select>
+    </div>
+
+    <label for="employee" class="form-label"><?= lang('Expenses.employee'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="employee-icon"><i class="bi bi-person"></i></span>
+        <?php if ($can_assign_employee): ?>
+            <select class="form-select" name="employee_id" id="employee_id">
+                <?php foreach ($employees as $k => $v): ?>
+                    <option value="<?= $k ?>" <?= $k == $expenses_info->employee_id ? 'selected' : '' ?>>
+                        <?= esc($v) ?>
+                    </option>
+                <?php endforeach; ?>
+            </select>
+        <?php else: ?>
+            <input type="hidden" name="employee_id" value="<?= $expenses_info->employee_id ?>">
+            <input type="text" class="form-control" name="employee" id="employee" aria-describedby="employee-icon" value="<?= esc($employees[$expenses_info->employee_id] ?? '') ?>" disabled readonly>
+        <?php endif; ?>
+    </div>
+
+    <label for="description" class="form-label"><?= lang('Expenses.description'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-chat"></i></span>
+        <textarea class="form-control" name="description" id="description" rows="6"><?= $expenses_info->description ?></textarea>
+    </div>
+
+    <?php if (!empty($expenses_info->expense_id)): ?>
+        <div class="form-check mb-3">
+            <input class="form-check-input" type="checkbox" name="deleted" id="deleted" value="1" <?= $expenses_info->deleted == 1 ? 'checked' : '' ?>>
+            <label class="form-check-label text-danger" for="deleted"><?= lang('Expenses.is_deleted') ?></label>
         </div>
+    <?php endif; ?>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Expenses.date'), 'date', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-6">
-                <div class="input-group">
-                    <span class="input-group-addon input-sm"><i class="bi bi-calendar2"></i></span>
-                    <?= form_input([
-                        'name'     => 'date',
-                        'class'    => 'form-control input-sm datetime',
-                        'value'    => to_datetime(strtotime($expenses_info->date)),
-                        'readonly' => 'readonly'
-                    ]) ?>
-                </div>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Expenses.supplier_name'), 'supplier_name', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-6">
-                <?= form_input([
-                    'name'  => 'supplier_name',
-                    'id'    => 'supplier_name',
-                    'class' => 'form-control input-sm',
-                    'value' => lang('Expenses.start_typing_supplier_name')
-                ]);
-                echo form_input([
-                    'type' => 'hidden',
-                    'name' => 'supplier_id',
-                    'id'   => 'supplier_id'
-                ]) ?>
-            </div>
-            <div class="col-xs-2">
-                <a id="remove_supplier_button" class="btn btn-danger btn-sm" title="Remove Supplier">
-                    <i class="bi bi-x-circle"></i>
-                </a>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Expenses.supplier_tax_code'), 'supplier_tax_code', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-6">
-                <?= form_input([
-                    'name'  => 'supplier_tax_code',
-                    'id'    => 'supplier_tax_code',
-                    'class' => 'form-control input-sm',
-                    'value' => $expenses_info->supplier_tax_code
-                ]) ?>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Expenses.amount'), 'amount', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-6">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'  => 'amount',
-                        'id'    => 'amount',
-                        'class' => 'form-control input-sm',
-                        'value' => to_currency_no_money($expenses_info->amount)
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                </div>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Expenses.tax_amount'), 'tax_amount', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-6">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'  => 'tax_amount',
-                        'id'    => 'tax_amount',
-                        'class' => 'form-control input-sm',
-                        'value' => to_currency_no_money($expenses_info->tax_amount)
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                </div>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Expenses.payment'), 'payment_type', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-6">
-                <?= form_dropdown('payment_type', $payment_options, $expenses_info->payment_type, ['class' => 'form-control', 'id' => 'payment_type']) ?>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Expenses_categories.name'), 'category', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-6">
-                <?= form_dropdown('expense_category_id', $expense_categories, $expenses_info->expense_category_id, ['class' => 'form-control', 'id' => 'category']) ?>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Expenses.employee'), 'employee', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-6">
-                <?php if ($can_assign_employee): ?>
-                    <?= form_dropdown('employee_id', $employees, $expenses_info->employee_id, 'id="employee_id" class="form-control"') ?>
-                <?php else: ?>
-                    <?= form_hidden('employee_id', $expenses_info->employee_id) ?>
-                    <?= form_input(['name' => 'employee_name', 'value' => esc($employees[$expenses_info->employee_id] ?? ''), 'class' => 'form-control', 'readonly' => 'readonly']) ?>
-                <?php endif; ?>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Expenses.description'), 'description', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-6">
-                <?= form_textarea([
-                    'name'  => 'description',
-                    'id'    => 'description',
-                    'class' => 'form-control input-sm',
-                    'value' => $expenses_info->description
-                ]) ?>
-            </div>
-        </div>
-
-        <?php if (!empty($expenses_info->expense_id)) { ?>
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Expenses.is_deleted') . ':', 'deleted', ['class' => 'control-label col-xs-3']) ?>
-                <div class="col-xs-5">
-                    <?= form_checkbox([
-                        'name'    => 'deleted',
-                        'id'      => 'deleted',
-                        'value'   => 1,
-                        'checked' => $expenses_info->deleted == 1
-                    ]) ?>
-                </div>
-            </div>
-        <?php } ?>
-
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">
diff --git a/app/Views/expenses/manage.php b/app/Views/expenses/manage.php
index 6ab360bd0..4e4d971f4 100644
--- a/app/Views/expenses/manage.php
+++ b/app/Views/expenses/manage.php
@@ -12,6 +12,11 @@
 
 <?= view('partial/header') ?>
 
+<?php
+$title_info['config_title'] = 'Expenses';
+echo view('configs/config_header', $title_info);
+?>
+
 <script type="text/javascript">
     $(document).ready(function() {
         // Load the preset datarange picker
@@ -54,29 +59,36 @@
 
 <?= view('partial/print_receipt', ['print_after_sale' => false, 'selected_printer' => 'takings_printer']) ?>
 
-<div id="title_bar" class="print_hide btn-toolbar">
-    <button onclick="printdoc()" class="btn btn-info btn-sm pull-right">
-        <i class="bi bi-printer icon-spacing"></i><?= lang('Common.print') ?>
+<div id="title_bar" class="d-flex gap-2 justify-content-end d-print-none">
+    <button type="button" class="btn btn-primary modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "$controller_name/view" ?>" title="<?= lang(ucfirst($controller_name) . ".new") ?>">
+        <i class="bi bi-journal-check me-2"></i><?= lang(esc(ucfirst($controller_name)) . '.new')    // TODO: String Interpolation ?>
     </button>
-    <button class="btn btn-info btn-sm pull-right modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "$controller_name/view" ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
-        <i class="bi bi-bag-check icon-spacing"></i><?= lang(ucfirst($controller_name) . '.new') ?>
+    <button type="button" class="btn btn-primary" onclick="window.print()" title="<?= lang('Common.print') ?>">
+        <i class="bi bi-printer me-2"></i><?= lang('Common.print') ?>
     </button>
 </div>
 
 <div id="toolbar">
-    <div class="pull-left form-inline" role="toolbar">
-        <button id="delete" class="btn btn-default btn-sm print_hide">
-            <i class="bi bi-trash icon-spacing"></i><?= lang('Common.delete') ?>
+    <div class="d-flex gap-2">
+        <button type="button" id="delete" class="btn btn-secondary d-print-none">
+            <i class="bi bi-trash"></i><span class="d-none d-sm-inline ms-2"><?= lang('Common.delete') ?></span>
         </button>
-        <?= form_input(['name' => 'daterangepicker', 'class' => 'form-control input-sm', 'id' => 'daterangepicker']) ?>
-        <?= form_multiselect('filters[]', esc($filters), $selected_filters ?? [], [
-            'id'                        => 'filters',
-            'data-none-selected-text'   => lang('Common.none_selected_text'),
-            'class'                     => 'selectpicker show-menu-arrow',
-            'data-selected-text-format' => 'count > 1',
-            'data-style'                => 'btn-default btn-sm',
-            'data-width'                => 'fit'
-        ]) ?>
+
+        <div class="input-group w-auto">
+            <span class="input-group-text" id="daterangepicker-icon"><i class="bi bi-calendar2-range"></i></span>
+            <input type="text" class="form-select" name="daterangepicker" id="daterangepicker" aria-describedby="daterangepicker-icon">
+        </div>
+
+        <div class="input-group w-auto">
+            <span class="input-group-text" id="filters-icon"><i class="bi bi-funnel"></i></span>
+            <select class="form-select" name="filters[]" id="filters" aria-describedby="filters-icon" multiple>
+                <?php foreach (esc($filters) as $value => $label) { ?>
+                    <option value="<?= $value ?>" <?= in_array($value, $selected_filters ?? []) ? 'selected' : '' ?>>
+                        <?= $label ?>
+                    </option>
+                <?php } ?>
+            </select>
+        </div>
     </div>
 </div>
 
@@ -87,3 +99,15 @@
 <div id="payment_summary"></div>
 
 <?= view('partial/footer') ?>
+
+<script type="text/javascript">
+    new TomSelect('#filters', {
+        plugins: ['checkbox_options', 'remove_button'],
+        placeholder: '<?= lang('Common.none_selected_text') ?>',
+        hidePlaceholder: true,
+        closeAfterSelect: false,
+        onChange: function() {
+            $('#table').bootstrapTable('refresh');
+        }
+    });
+</script>
diff --git a/app/Views/expenses_categories/form.php b/app/Views/expenses_categories/form.php
index 31246f57a..33b5e4747 100644
--- a/app/Views/expenses_categories/form.php
+++ b/app/Views/expenses_categories/form.php
@@ -5,37 +5,22 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("expenses_categories/save/$category_info->expense_category_id", ['id' => 'expense_category_edit_form']) ?>
 
-<?= form_open("expenses_categories/save/$category_info->expense_category_id", ['id' => 'expense_category_edit_form', 'class' => 'form-horizontal']) ?>
-    <fieldset id="expenses_categories">
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Expenses_categories.name'), 'category_name', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'  => 'category_name',
-                    'id'    => 'category_name',
-                    'class' => 'form-control input-sm',
-                    'value' => $category_info->category_name
-                ]) ?>
-            </div>
-        </div>
+    <label for="category_name" class="form-label"><?= lang('Expenses_categories.name'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="category_name-icon"><i class="bi bi-bookmark"></i></span>
+        <input type="text" class="form-control" name="category_name" id="category_name" aria-describedby="category_name-icon" value="<?= $category_info->category_name; ?>" required>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Expenses_categories.description'), 'category_description', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_textarea([
-                    'name'  => 'category_description',
-                    'id'    => 'category_description',
-                    'class' => 'form-control input-sm',
-                    'value' => $category_info->category_description
-                ]) ?>
-            </div>
-        </div>
+    <label for="category_description" class="form-label"><?= lang('Expenses_categories.description'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="category_description-icon"><i class="bi bi-card-text"></i></span>
+        <textarea class="form-control" name="category_description" id="category_description" rows="10" aria-describedby="category_description-icon"><?= $category_info->category_description ?></textarea>
+    </div>
 
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">
diff --git a/app/Views/expenses_categories/manage.php b/app/Views/expenses_categories/manage.php
index 8e8ef9b2f..9a12e4e3b 100644
--- a/app/Views/expenses_categories/manage.php
+++ b/app/Views/expenses_categories/manage.php
@@ -8,6 +8,11 @@
 
 <?= view('partial/header') ?>
 
+<?php
+$title_info['config_title'] = 'Expenses Categories';
+echo view('configs/config_header', $title_info);
+?>
+
 <script type="text/javascript">
     $(document).ready(function() {
         <?= view('partial/bootstrap_tables_locale') ?>
@@ -27,16 +32,16 @@
     });
 </script>
 
-<div id="title_bar" class="btn-toolbar">
-    <button class="btn btn-info btn-sm pull-right modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("$controller_name/view") ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
-        <i class="bi bi-bookmark-plus icon-spacing"></i><?= lang(ucfirst($controller_name) . '.new') ?>
+<div class="d-flex gap-2 justify-content-end">
+    <button type="button" class="btn btn-primary modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("$controller_name/view") ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
+        <i class="bi bi-bookmark-plus me-2"></i><?= lang(ucfirst($controller_name) . '.new') ?>
     </button>
 </div>
 
 <div id="toolbar">
-    <div class="pull-left form-inline" role="toolbar">
-        <button id="delete" class="btn btn-default btn-sm print_hide">
-            <i class="bi bi-trash icon-spacing"></i><?= lang('Common.delete') ?>
+    <div class="d-flex gap-2">
+        <button type="button" class="btn btn-secondary" id="delete">
+            <i class="bi bi-trash"></i><span class="d-none d-sm-inline ms-2"><?= lang('Common.delete') ?></span>
         </button>
     </div>
 </div>
diff --git a/app/Views/giftcards/form.php b/app/Views/giftcards/form.php
index 586c995c5..39c139fb4 100644
--- a/app/Views/giftcards/form.php
+++ b/app/Views/giftcards/form.php
@@ -10,65 +10,42 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("giftcards/save/$giftcard_id", ['id' => 'giftcard_form']) ?>
 
-<?= form_open("giftcards/save/$giftcard_id", ['id' => 'giftcard_form', 'class' => 'form-horizontal']) ?>
-    <fieldset id="giftcard_basic_info">
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Giftcards.person_id'), 'person_name', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'  => 'person_name',
-                    'id'    => 'person_name',
-                    'class' => 'form-control input-sm',
-                    'value' => $selected_person_name
-                ]) ?>
-                <?= form_hidden('person_id', (string)$selected_person_id) ?>
-            </div>
-        </div>
+    <label for="person_name" class="form-label"><?= lang('Giftcards.person_id'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="person_name-icon"><i class="bi bi-person"></i></span>
+        <input type="hidden" name="person_id" value="<?= (string)$selected_person_id ?>">
+        <input type="text" class="form-control" name="person_name" id="person_name" aria-describedby="person_name-icon" value="<?= $selected_person_name ?>">
+    </div>
 
-        <?php
-        $class = '';
-        if ($config['giftcard_number'] == 'series') {
-            $class = ' required';
-        }
-        ?>
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Giftcards.giftcard_number'), 'giftcard_number', ['class' => "control-label col-xs-3$class"]) ?>
-            <div class="col-xs-4">
-                <?= form_input([
-                    'name'  => 'giftcard_number',
-                    'id'    => 'giftcard_number',
-                    'class' => 'form-control input-sm',
-                    'value' => $giftcard_number
-                ]) ?>
-            </div>
-        </div>
+    <?php
+    $class = '';
+    $label = '';
+    if ($config['giftcard_number'] == 'series') {
+        $class = 'required';
+        $label = '<sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup>';
+    }
+    ?>
+    <label for="giftcard_number" class="form-label"><?= lang('Giftcards.giftcard_number'); ?><?= $label ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="giftcard_number-icon"><i class="bi bi-gift"></i></span>
+        <input type="text" class="form-control" name="giftcard_number" id="giftcard_number" aria-describedby="giftcard_number-icon" value="<?= $giftcard_number ?>" <?= $class ?>>
+    </div>
 
+    <label for="giftcard_amount" class="form-label"><?= lang('Giftcards.card_value') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="giftcard_amount-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+        <input type="number" class="form-control" name="giftcard_amount" id="giftcard_amount" aria-describedby="giftcard_amount-icon" value="<?= number_format((float)$giftcard_value, 2, '.', '') ?>" required>
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="giftcard_amount-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Giftcards.card_value'), 'giftcard_amount', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><?= esc($config['currency_symbol']) ?></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'  => 'giftcard_amount',
-                        'id'    => 'giftcard_amount',
-                        'class' => 'form-control input-sm',
-                        'value' => to_currency_no_money($giftcard_value)
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></span>
-                    <?php endif; ?>
-                </div>
-            </div>
-        </div>
-
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">
diff --git a/app/Views/giftcards/manage.php b/app/Views/giftcards/manage.php
index 4dc0b8fe9..a7f6d277e 100644
--- a/app/Views/giftcards/manage.php
+++ b/app/Views/giftcards/manage.php
@@ -8,6 +8,11 @@
 
 <?= view('partial/header') ?>
 
+<?php
+$title_info['config_title'] = 'Gift Cards';
+echo view('configs/config_header', $title_info);
+?>
+
 <script type="text/javascript">
     $(document).ready(function() {
         <?= view('partial/bootstrap_tables_locale') ?>
@@ -20,16 +25,16 @@
     });
 </script>
 
-<div id="title_bar" class="btn-toolbar">
-    <button class="btn btn-info btn-sm pull-right modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("$controller_name/view") ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
-        <i class="bi bi-gift icon-spacing"></i><?= lang(ucfirst($controller_name) . '.new') ?>
+<div class="d-flex gap-2 justify-content-end">
+    <button type="button" class="btn btn-primary modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("$controller_name/view") ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
+        <i class="bi bi-gift me-2"></i><?= lang(ucfirst($controller_name) .'.new') ?>
     </button>
 </div>
 
 <div id="toolbar">
-    <div class="pull-left btn-toolbar">
-        <button id="delete" class="btn btn-default btn-sm">
-            <i class="bi bi-trash icon-spacing"></i><?= lang('Common.delete') ?>
+    <div class="d-flex gap-2">
+        <button type="button" class="btn btn-secondary">
+            <i class="bi bi-trash"></i><span class="d-none d-sm-inline ms-2"><?= lang('Common.delete') ?></span>
         </button>
     </div>
 </div>
diff --git a/app/Views/home/form_change_password.php b/app/Views/home/form_change_password.php
deleted file mode 100644
index 53d0191fe..000000000
--- a/app/Views/home/form_change_password.php
+++ /dev/null
@@ -1,138 +0,0 @@
-<?php
-/**
- * @var object $person_info
- */
-?>
-
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
-
-<?= form_open("home/save/$person_info->person_id", ['id' => 'employee_form', 'class' => 'form-horizontal']) ?>
-    <div class="tab-content">
-        <div class="tab-pane fade in active" id="employee_login_info">
-            <fieldset>
-
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Employees.username'), 'username', ['class' => 'required control-label col-xs-3']) ?>
-                    <div class="col-xs-8">
-                        <div class="input-group">
-                            <span class="input-group-addon input-sm">
-                                <i class="bi bi-person"></i>
-                            </span>
-                            <?= form_input([
-                                'name'     => 'username',
-                                'id'       => 'username',
-                                'class'    => 'form-control input-sm',
-                                'value'    => $person_info->username,
-                                'readonly' => 'true'
-                            ]) ?>
-                        </div>
-                    </div>
-                </div>
-
-                <?php $password_label_attributes = $person_info->person_id == "" ? ['class' => 'required'] : []; ?>
-
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Employees.current_password'), 'current_password', array_merge($password_label_attributes, ['class' => 'control-label col-xs-3'])) ?>
-                    <div class="col-xs-8">
-                        <div class="input-group">
-                            <span class="input-group-addon input-sm">
-                                <i class="bi bi-lock"></i>
-                            </span>
-                            <?= form_password([
-                                'name'  => 'current_password',
-                                'id'    => 'current_password',
-                                'class' => 'form-control input-sm'
-                            ]) ?>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Employees.password'), 'password', array_merge($password_label_attributes, ['class' => 'control-label col-xs-3'])) ?>
-                    <div class="col-xs-8">
-                        <div class="input-group">
-                            <span class="input-group-addon input-sm">
-                                <i class="bi bi-lock"></i>
-                            </span>
-                            <?= form_password([
-                                'name'  => 'password',
-                                'id'    => 'password',
-                                'class' => 'form-control input-sm'
-                            ]) ?>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="form-group form-group-sm">
-                    <?= form_label(lang('Employees.repeat_password'), 'repeat_password', array_merge($password_label_attributes, ['class' => 'control-label col-xs-3'])) ?>
-                    <div class="col-xs-8">
-                        <div class="input-group">
-                            <span class="input-group-addon input-sm">
-                                <i class="bi bi-lock"></i>
-                            </span>
-                            <?= form_password([
-                                'name'  => 'repeat_password',
-                                'id'    => 'repeat_password',
-                                'class' => 'form-control input-sm'
-                            ]) ?>
-                        </div>
-                    </div>
-                </div>
-
-            </fieldset>
-        </div>
-    </div>
-<?= form_close() ?>
-
-<script type="text/javascript">
-    // Validation and submit handling
-    $(document).ready(function() {
-        $.validator.setDefaults({
-            ignore: []
-        });
-
-        $.validator.addMethod("notEqualTo", function(value, element, param) {
-            return this.optional(element) || value != $(param).val();
-        }, '<?= lang('Employees.password_not_must_match') ?>');
-
-        $('#employee_form').validate($.extend({
-            submitHandler: function(form) {
-                $(form).ajaxSubmit({
-                    success: function(response) {
-                        dialog_support.hide();
-                        $.notify(response.message, {
-                            type: response.success ? 'success' : 'danger'
-                        });
-                    },
-                    dataType: 'json'
-                });
-            },
-
-            rules: {
-                current_password: {
-                    required: true,
-                    minlength: 8
-                },
-                password: {
-                    required: true,
-                    minlength: 8,
-                    notEqualTo: "#current_password"
-                },
-                repeat_password: {
-                    equalTo: "#password"
-                }
-            },
-
-            messages: {
-                password: {
-                    required: "<?= lang('Employees.password_required') ?>",
-                    minlength: "<?= lang('Employees.password_minlength') ?>"
-                },
-                repeat_password: {
-                    equalTo: "<?= lang('Employees.password_must_match') ?>"
-                }
-            }
-        }, form_support.error));
-    });
-</script>
diff --git a/app/Views/home/home.php b/app/Views/home/home.php
index 84237c90f..1cc66f368 100644
--- a/app/Views/home/home.php
+++ b/app/Views/home/home.php
@@ -6,19 +6,6 @@
 
 <?= view('partial/header') ?>
 
-<script type="text/javascript">
-    dialog_support.init("a.modal-dlg");
-</script>
-
-<h3 class="text-center"><?= lang('Common.welcome_message') ?></h3>
-
-<div id="home_module_list">
-    <?php foreach($allowed_modules as $module) { ?>
-        <div class="module_item" title="<?= lang("Module.$module->module_id" . '_desc') ?>">
-            <a href="<?= base_url($module->module_id) ?>"><img src="<?= base_url("images/menubar/$module->module_id.svg") ?>" style="border-width: 0; height: 64px; max-width: 64px;" alt="Menubar Image"></a>
-            <a href="<?= base_url($module->module_id) ?>"><?= lang("Module.$module->module_id") ?></a>
-        </div>
-    <?php } ?>
-</div>
+<?= view('home/modules') ?>
 
 <?= view('partial/footer') ?>
diff --git a/app/Views/home/modules.php b/app/Views/home/modules.php
new file mode 100644
index 000000000..d1749cfa6
--- /dev/null
+++ b/app/Views/home/modules.php
@@ -0,0 +1,16 @@
+<h3 class="text-center pb-3 d-none d-lg-block"><?= lang('Common.welcome_message') ?></h3>
+
+<section class="container-fluid d-flex flex-wrap justify-content-center gap-3 p-0 py-1 py-lg-0">
+    <?php foreach ($allowed_modules as $module) { ?>
+        <div class="border border-primary rounded shadow-sm bg-primary-subtle text-center d-block" title="<?= lang("Module.$module->module_id" . '_desc') ?>">
+            <a href="<?= base_url($module->module_id) ?>">
+                <img class="d-block mx-auto p-2" src="<?= base_url("images/menubar/$module->module_id.svg") ?>" alt="Menubar Image"> <!-- TODO-BS5 alt text translatable -->
+            </a>
+            <a href="<?= base_url($module->module_id) ?>">
+                <div class="tile-text rounded-bottom d-block bg-primary text-light fw-bold p-2">
+                    <span><?= lang("Module.$module->module_id") ?></span>
+                </div>
+            </a>
+        </div>
+    <?php } ?>
+</section>
diff --git a/app/Views/home/office.php b/app/Views/home/office.php
index 8509c63dc..1cc66f368 100644
--- a/app/Views/home/office.php
+++ b/app/Views/home/office.php
@@ -6,19 +6,6 @@
 
 <?= view('partial/header') ?>
 
-<script type="text/javascript">
-    dialog_support.init("a.modal-dlg");
-</script>
-
-<h3 class="text-center"><?= lang('Common.welcome_message') ?></h3>
-
-<div id="office_module_list">
-    <?php foreach ($allowed_modules as $module) { ?>
-        <div class="module_item" title="<?= lang("Module.$module->module_id" . '_desc') ?>">
-            <a href="<?= base_url($module->module_id) ?>"><img src="<?= base_url("images/menubar/$module->module_id.svg") ?>" style="border-width: 0; height: 64px; max-width: 64px;" alt="Menubar Image"></a>
-            <a href="<?= base_url($module->module_id) ?>"><?= lang("Module.$module->module_id") ?></a>
-        </div>
-    <?php } ?>
-</div>
+<?= view('home/modules') ?>
 
 <?= view('partial/footer') ?>
diff --git a/app/Views/home/profile.php b/app/Views/home/profile.php
new file mode 100644
index 000000000..48f506e60
--- /dev/null
+++ b/app/Views/home/profile.php
@@ -0,0 +1,137 @@
+<?php
+$email = $user_info->email;
+$size = 96;
+$default = 'https://ui-avatars.com/api/?name=' . $user_info->first_name . '+' . $user_info->last_name . '&format=svg&size=' . $size;
+$grav_url = 'https://www.gravatar.com/avatar/' . md5(strtolower(trim($email))) . '?d=' . urlencode($default) . '&s=' . $size;
+?>
+
+<div class="modal fade" id="profile-modal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <ul class="nav nav-pills nav-justified w-100 me-1 gap-1">
+                    <li class="nav-item">
+                        <button type="button" id="modal-button-profile" onclick="modalSwitchProfile()" class="nav-link active">Profile</button>
+                    </li>
+                    <li class="nav-item" title="<?= lang('Employees.change_password'); ?>">
+                        <button type="button" id="modal-button-password" onclick="modalSwitchPassword()" class="nav-link"><?= lang('Employees.change_password'); ?></button>
+                    </li>
+                </ul>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body text-start">
+                <div id="modal-profile">
+                    <div class="container">
+                        <table>
+                            <tbody>
+                                <tr>
+                                    <td class="pe-2"><img class="img-thumbnail rounded-circle" src="<?= $default; ?>" style="height: 48px;"></td>
+                                    <td class="align-middle"><h5><?= $user_info->first_name . '&nbsp;' . $user_info->last_name; ?></h5></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <br>
+                        <table>
+                            <tbody>
+                                <tr>
+                                    <td class="pe-3">Username</td>
+                                    <td><?= $user_info->username; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.id'); ?></td>
+                                    <td><?= $user_info->person_id; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.email'); ?></td>
+                                    <td><?= $user_info->email; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.phone_number'); ?></td>
+                                    <td><?= $user_info->phone_number; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.gender'); ?></td>
+                                    <td><?= $user_info->gender; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.address_1'); ?></td>
+                                    <td><?= $user_info->address_1; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.address_2'); ?></td>
+                                    <td><?= $user_info->address_2; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.city'); ?></td>
+                                    <td><?= $user_info->city; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.state'); ?></td>
+                                    <td><?= $user_info->state; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.zip'); ?></td>
+                                    <td><?= $user_info->zip; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.country'); ?></td>
+                                    <td><?= $user_info->country; ?></td>
+                                </tr>
+                                <tr>
+                                    <td class="pe-3"><?= lang('Common.comments'); ?></td>
+                                    <td><?= $user_info->comments; ?></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div id="modal-password" class="d-none was-validated" novalidate>
+
+                    <div class="input-group mb-3">
+                        <span class="input-group-text"><i class="bi bi-person"></i></span>
+                        <div class="form-floating">
+                            <input name="username" id="input-username" type="text" class="form-control" placeholder="<?= lang('Login.username'); ?>" value="<?= $user_info->username; ?>" disabled>
+                            <label for="input-username"><?= lang('Login.username'); ?></label>
+                        </div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <span class="input-group-text"><i class="bi bi-lock"></i></span>
+                        <div class="form-floating is-invalid">
+                            <input name="password-current" id="input-password-current" type="password" class="form-control" placeholder="Current Password" required>
+                            <label for="input-password-current">Current Password</label>
+                        </div>
+                        <div class="invalid-feedback">Please fill in your current password.</div>
+                    </div>
+                    <div class="form-text">Must be 8-20 characters long</div>
+                    <div class="input-group mb-3">
+                        <span class="input-group-text"><i class="bi bi-lock"></i></span>
+                        <div class="form-floating is-invalid">
+                            <input name="password-new" id="input-password-new" type="password" class="form-control" placeholder="New Password" required>
+                            <label for="input-password-new">New Password</label>
+                        </div>
+                        <div class="invalid-feedback">Please fill in a new password.</div>
+                    </div>
+                    <div class="input-group mb-3">
+                        <span class="input-group-text"><i class="bi bi-lock"></i></span>
+                        <div class="form-floating is-invalid">
+                            <input name="password-repeat" id="input-password-repeat" type="password" class="form-control" placeholder="Repeat Password" required>
+                            <label for="input-password-repeat">Repeat Password</label>
+                        </div>
+                        <div class="invalid-feedback">Please repeat the new password.</div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <a type="button" id="modal-button-logout" class="btn btn-danger" href="home/logout">
+                    <i class="bi bi-power me-2"></i><?= lang('Login.logout'); ?>
+                </a>
+                <button type="button" id="modal-button-save" class="btn btn-primary d-none">
+                    <i class="bi bi-floppy me-2"></i>Save
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/app/Views/item_kits/form.php b/app/Views/item_kits/form.php
index f1eb486ca..05213661a 100644
--- a/app/Views/item_kits/form.php
+++ b/app/Views/item_kits/form.php
@@ -8,200 +8,114 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("item_kits/save/$item_kit_info->item_kit_id", ['id' => 'item_kit_form']) ?>
 
-<?= form_open("item_kits/save/$item_kit_info->item_kit_id", ['id' => 'item_kit_form', 'class' => 'form-horizontal']) ?>
-    <fieldset id="item_kit_basic_info">
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Item_kits.item_kit_number'), 'item_kit_number', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group">
-                    <span class="input-group-addon input-sm"><i class="bi bi-upc-scan"></i></span>
-                    <?= form_input([
-                        'name'  => 'item_kit_number',
-                        'id'    => 'item_kit_number',
-                        'class' => 'form-control input-sm',
-                        'value' => $item_kit_info->item_kit_number
-                    ]) ?>
-                </div>
-            </div>
+    <label for="item_kit_number" class="form-label"><?= lang('Item_kits.item_kit_number'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="item_kit_number-icon"><i class="bi bi-upc-scan"></i></span>
+        <input type="text" class="form-control" name="item_kit_number" id="item_kit_number" aria-describedby="item_kit_number-icon" value="<?= $item_kit_info->item_kit_number ?>">
+    </div>
+
+    <label for="name" class="form-label"><?= lang('Item_kits.name'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="name-icon"><i class="bi bi-tags"></i></span>
+        <input type="text" class="form-control" name="name" id="name" aria-describedby="name-icon" value="<?= $item_kit_info->name ?>" required>
+    </div>
+
+    <label for="item_name" class="form-label"><?= lang('Item_kits.find_kit_item'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="item_name-icon"><i class="bi bi-tag"></i></span>
+        <input type="hidden" name="kit_item_id" value="<?= (string)$selected_kit_item_id ?>">
+        <input type="text" class="form-control" name="item_name" id="item_name" aria-describedby="item_name-icon" value="<?= $selected_kit_item ?>">
+    </div>
+
+    <label for="kit_discount_type" class="form-label"><?= lang('Item_kits.discount_type') ?></label>
+    <div class="mb-3">
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="kit_discount_type" id="kit_discount_type_percent" value="0" <?= $item_kit_info->kit_discount_type == PERCENT ? 'checked' : '' ?>>
+            <label class="form-check-label" for="kit_discount_type_percent"><?= lang('Item_kits.discount_percent') ?></label>
         </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Item_kits.name'), 'name', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'  => 'name',
-                    'id'    => 'name',
-                    'class' => 'form-control input-sm',
-                    'value' => $item_kit_info->name
-                ]) ?>
-            </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="kit_discount_type" id="kit_discount_type_fixed" value="1" <?= $item_kit_info->kit_discount_type == FIXED ? 'checked' : '' ?>>
+            <label class="form-check-label" for="kit_discount_type_fixed"><?= lang('Item_kits.discount_fixed') ?></label>
         </div>
+    </div>
 
-        <div class="form-group  form-group-sm">
-            <?= form_label(lang('Item_kits.find_kit_item'), 'item_name', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group input-group-sm">
-                    <?= form_input([
-                        'name'  => 'item_name',
-                        'id'    => 'item_name',
-                        'class' => 'form-control input-sm',
-                        'size'  => '50',
-                        'value' => $selected_kit_item
-                    ]) ?>
-                    <?= form_hidden('kit_item_id', (string)$selected_kit_item_id) ?>
+    <label for="kit_discount" class="form-label"><?= lang('Item_kits.discount'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="kit_discount-icon"><i class="bi bi-patch-minus"></i></span>
+        <input type="number" step="any" class="form-control" name="kit_discount" id="kit_discount" aria-describedby="kit_discount-icon" value="<?= $item_kit_info->kit_discount_type === FIXED ? to_currency_no_money($item_kit_info->kit_discount) : to_decimals($item_kit_info->kit_discount) ?>">
+    </div>
 
-                </div>
-            </div>
+    <label for="price_option" class="form-label"><?= lang('Item_kits.price_option') ?> <?= !empty($basic_version) ? '<sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup>' : '' ?></label>
+    <div class="mb-3">
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="price_option" id="price_option_kit_and_components" value="0" <?= $item_kit_info->price_option == PRICE_ALL ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="price_option_kit_and_components"><?= lang('Item_kits.kit_and_components') ?></label>
         </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Item_kits.discount_type'), 'kit_discount_type', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'kit_discount_type',
-                        'type'    => 'radio',
-                        'value'   => 0,
-                        'checked' => $item_kit_info->kit_discount_type == PERCENT
-                    ]) ?> <?= lang('Item_kits.discount_percent') ?>
-                </label>
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'kit_discount_type',
-                        'type'    => 'radio',
-                        'value'   => 1,
-                        'checked' => $item_kit_info->kit_discount_type == FIXED
-                    ]) ?> <?= lang('Item_kits.discount_fixed') ?>
-                </label>
-            </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="price_option" id="price_option_kit_only" value="1" <?= $item_kit_info->price_option == PRICE_KIT ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="price_option_kit_only"><?= lang('Item_kits.kit_only') ?></label>
         </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Item_kits.discount'), 'kit_discount', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-3">
-                <div class="input-group input-group-sm">
-                    <?= form_input([
-                        'name'      => 'kit_discount',
-                        'size'      => '5',
-                        'maxlength' => '5',
-                        'id'        => 'kit_discount',
-                        'class'     => 'form-control input-sm',
-                        'value'     => $item_kit_info->kit_discount_type === FIXED ? to_currency_no_money($item_kit_info->kit_discount) : to_decimals($item_kit_info->kit_discount)
-                    ]) ?>
-                </div>
-            </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="price_option" id="price_option_kit_and_stock" value="2" <?= $item_kit_info->price_option == PRICE_KIT_ITEMS ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="price_option_kit_and_stock"><?= lang('Item_kits.kit_and_stock') ?></label>
         </div>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Item_kits.price_option'), 'price_option', !empty($basic_version) ? ['class' => 'required control-label col-xs-3'] : ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'price_option',
-                        'type'    => 'radio',
-                        'value'   => 0,
-                        'checked' => $item_kit_info->price_option == PRICE_ALL
-                    ]) ?> <?= lang('Item_kits.kit_and_components') ?>
-                </label>
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'price_option',
-                        'type'    => 'radio',
-                        'value'   => 1,
-                        'checked' => $item_kit_info->price_option == PRICE_KIT
-                    ]) ?> <?= lang('Item_kits.kit_only') ?>
-                </label>
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'price_option',
-                        'type'    => 'radio',
-                        'value'   => 2,
-                        'checked' => $item_kit_info->price_option == PRICE_KIT_ITEMS    // TODO: === for all of these?
-                    ]) ?> <?= lang('Item_kits.kit_and_stock') ?>
-                </label>
-            </div>
+    <label for="print_option" class="form-label"><?= lang('Item_kits.print_option') ?> <?= !empty($basic_version) ? '<sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup>' : '' ?></label>
+    <div class="mb-3">
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="print_option" id="print_option_all" value="0" <?= $item_kit_info->print_option == PRINT_ALL ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="print_option_all"><?= lang('Item_kits.all') ?></label>
         </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Item_kits.print_option'), 'print_option', !empty($basic_version) ? ['class' => 'required control-label col-xs-3'] : ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'print_option',
-                        'type'    => 'radio',
-                        'value'   => 0,
-                        'checked' => $item_kit_info->print_option == PRINT_ALL
-                    ]) ?> <?= lang('Item_kits.all') ?>
-                </label>
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'print_option',
-                        'type'    => 'radio',
-                        'value'   => 1,
-                        'checked' => $item_kit_info->print_option == PRINT_PRICED
-                    ]) ?> <?= lang('Item_kits.priced_only') ?>
-                </label>
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'print_option',
-                        'type'    => 'radio',
-                        'value'   => 2,
-                        'checked' => $item_kit_info->print_option == PRINT_KIT
-                    ]) ?> <?= lang('Item_kits.kit_only') ?>
-                </label>
-            </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="print_option" id="print_option_priced_only" value="1" <?= $item_kit_info->print_option == PRINT_PRICED ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="print_option_priced_only"><?= lang('Item_kits.priced_only') ?></label>
         </div>
-
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Item_kits.description'), 'description', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_textarea([
-                    'name'  => 'description',
-                    'id'    => 'description',
-                    'class' => 'form-control input-sm',
-                    'value' => $item_kit_info->description
-                ]) ?>
-            </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="print_option" id="print_option_kit_only" value="2" <?= $item_kit_info->print_option == PRINT_KIT ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="print_option_kit_only"><?= lang('Item_kits.kit_only') ?></label>
         </div>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Item_kits.add_item'), 'item', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'  => 'item',
-                    'id'    => 'item',
-                    'class' => 'form-control input-sm'
-                ]) ?>
-            </div>
-        </div>
+    <label for="description" class="form-label"><?= lang('Item_kits.description'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-chat"></i></span>
+        <textarea class="form-control" name="description" id="description" rows="6"><?= $item_kit_info->description ?></textarea>
+    </div>
 
-        <table id="item_kit_items" class="table table-striped table-hover">
-            <thead>
+    <label for="item" class="form-label"><?= lang('Item_kits.add_item'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="item-icon"><i class="bi bi-tag"></i></span>
+        <input type="text" class="form-control" name="item" id="item" aria-describedby="item-icon">
+    </div>
+
+    <div class="table-responsive">
+        <table class="table table-sm table-hover align-middle text-nowrap" id="item_kit_items">
+            <thead class="table-secondary">
                 <tr>
-                    <th style="width: 10%;"><?= lang('Common.delete') ?></th>
-                    <th style="width: 10%;"><?= lang('Item_kits.sequence') ?></th>
-                    <th style="width: 60%;"><?= lang('Item_kits.item') ?></th>
-                    <th style="width: 20%;"><?= lang('Item_kits.quantity') ?></th>
+                    <th scope="col"><?= lang('Common.delete') ?></th>
+                    <th scope="col"><?= lang('Item_kits.sequence') ?></th>
+                    <th scope="col"><?= lang('Item_kits.item') ?></th>
+                    <th scope="col"><?= lang('Item_kits.quantity') ?></th>
                 </tr>
             </thead>
             <tbody>
-                <?php foreach ($item_kit_items as $item_kit_item) { ?>
+                <?php foreach ($item_kit_items as $item_kit_item): ?>
                     <tr>
-                        <td><a href="#" onclick="return delete_item_kit_row(this);"><i class="bi bi-trash"></i></a></td>
-                        <td><input class="quantity form-control input-sm" id="item_seq_<?= $item_kit_item['item_id'] ?>" name="item_kit_seq[<?= $item_kit_item['item_id'] ?>]" value="<?= parse_decimals($item_kit_item['kit_sequence'], 0) ?>"></td>
+                        <td class="text-center"><a class="text-danger" href="#" onclick="return delete_item_kit_row(this);"><i class="bi bi-trash"></i></a></td>
+                        <td class="text-center"><input class="quantity form-control" id="item_seq_<?= $item_kit_item['item_id'] ?>" name="item_kit_seq[<?= $item_kit_item['item_id'] ?>]" value="<?= parse_decimals($item_kit_item['kit_sequence'], 0) ?>"></td>
                         <td><?= esc($item_kit_item['name']) ?></td>
-                        <td><input class="quantity form-control input-sm" id="item_qty_<?= $item_kit_item['item_id'] ?>" name="item_kit_qty[<?= $item_kit_item['item_id'] ?>]" value="<?= to_quantity_decimals($item_kit_item['quantity']) ?>"></td>
+                        <td class="text-center"><input class="quantity form-control" id="item_qty_<?= $item_kit_item['item_id'] ?>" name="item_kit_qty[<?= $item_kit_item['item_id'] ?>]" value="<?= to_quantity_decimals($item_kit_item['quantity']) ?>"></td>
                     </tr>
-                <?php } ?>
+                <?php endforeach; ?>
             </tbody>
         </table>
+    </div>
 
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -218,10 +132,10 @@
                     $('#item_kit_item_' + ui.item.value).val(parseFloat($('#item_kit_item_' + ui.item.value).val()) + 1);
                 } else {
                     $('#item_kit_items').append('<tr>' +
-                        '<td><a href="#" onclick="return delete_item_kit_row(this);"><i class="bi bi-trash"></i></a></td>' +
-                        '<td><input class="quantity form-control input-sm" id="item_seq_' + ui.item.value + '" name="item_kit_seq[' + ui.item.value + ']" value="0"></td>' +
+                        '<td class="text-center"><a class="text-danger" href="#" onclick="return delete_item_kit_row(this);"><i class="bi bi-trash"></i></a></td>' +
+                        '<td class="text-center"><input class="quantity form-control" id="item_seq_' + ui.item.value + '" name="item_kit_seq[' + ui.item.value + ']" value="0"></td>' +
                         '<td>' + DOMPurify.sanitize(ui.item.label) + '</td>' +
-                        '<td><input class="quantity form-control input-sm" id="item_qty_' + ui.item.value + '" name="item_kit_qty[' + ui.item.value + ']" value="1"></td>' +
+                        '<td class="text-center"><input class="quantity form-control" id="item_qty_' + ui.item.value + '" name="item_kit_qty[' + ui.item.value + ']" value="1"></td>' +
                         '</tr>');
                 }
                 $('#item').val('');
diff --git a/app/Views/item_kits/manage.php b/app/Views/item_kits/manage.php
index 99a401190..4078d2aa2 100644
--- a/app/Views/item_kits/manage.php
+++ b/app/Views/item_kits/manage.php
@@ -8,6 +8,11 @@
 
 <?= view('partial/header') ?>
 
+<?php
+$title_info['config_title'] = 'Item Kits';
+echo view('configs/config_header', $title_info);
+?>
+
 <script type="text/javascript">
     $(document).ready(function() {
         <?= view('partial/bootstrap_tables_locale') ?>
@@ -28,20 +33,19 @@
     });
 </script>
 
-<div id="title_bar" class="btn-toolbar">
-    <button class="btn btn-info btn-sm pull-right modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("$controller_name/view") ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
-        <i class="bi bi-tags icon-spacing"></i><?= lang(ucfirst($controller_name) . '.new') ?>
+<div class="d-flex gap-2 justify-content-end">
+    <button type="button" class="btn btn-primary modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("$controller_name/view") ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
+        <i class="bi bi-tags me-2"></i><?= lang(ucfirst($controller_name) . '.new') ?>
     </button>
 </div>
 
 <div id="toolbar">
-    <div class="pull-left btn-toolbar">
-        <button id="delete" class="btn btn-default btn-sm">
-            <i class="bi bi-trash icon-spacing"></i><?= lang('Common.delete') ?>
+    <div class="d-flex gap-2">
+        <button type="button" class="btn btn-secondary" id="delete">
+            <i class="bi bi-trash"></i><span class="d-none d-sm-inline ms-2"><?= lang('Common.delete') ?></span>
         </button>
-
-        <button id="generate_barcodes" class="btn btn-default btn-sm" data-href="<?= esc("$controller_name/generateBarcodes") ?>">
-            <i class="bi bi-upc-scan icon-spacing"></i><?= lang('Items.generate_barcodes') ?>
+        <button type="button" class="btn btn-secondary" id="generate_barcodes" data-href="<?= esc("$controller_name/generateBarcodes") ?>" title="<?= lang('Items.generate_barcodes') ?>">
+            <i class="bi bi-upc-scan"></i><span class="d-none d-sm-inline ms-2"><?= lang('Items.generate_barcodes') ?></span>
         </button>
     </div>
 </div>
diff --git a/app/Views/items/form.php b/app/Views/items/form.php
index 0912ee1ea..3cf3dedb3 100644
--- a/app/Views/items/form.php
+++ b/app/Views/items/form.php
@@ -25,434 +25,226 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("items/save/$item_info->item_id", ['id' => 'item_form', 'enctype' => 'multipart/form-data']) ?>
 
-<?= form_open("items/save/$item_info->item_id", ['id' => 'item_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
-    <fieldset id="item_basic_info">
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.item_number'), 'item_number', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group">
-                    <span class="input-group-addon input-sm">
-                        <i class="bi bi-upc-scan"></i>
-                    </span>
-                    <?= form_input([
-                        'name'  => 'item_number',
-                        'id'    => 'item_number',
-                        'class' => 'form-control input-sm',
-                        'value' => $item_info->item_number
-                    ]) ?>
-                </div>
-            </div>
-        </div>
+    <label for="item_number" class="form-label"><?= lang('Items.item_number'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="item_number-icon"><i class="bi bi-upc-scan"></i></span>
+        <input type="text" class="form-control" name="item_number" id="item_number" aria-describedby="item_number-icon" value="<?= $item_info->item_number ?>">
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.name'), 'name', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'  => 'name',
-                    'id'    => 'name',
-                    'class' => 'form-control input-sm',
-                    'value' => $item_info->name
-                ]) ?>
-            </div>
-        </div>
+    <label for="name" class="form-label"><?= lang('Items.name'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="name-icon"><i class="bi bi-tag"></i></span>
+        <input type="text" class="form-control" name="name" id="name" aria-describedby="name-icon" value="<?= $item_info->name ?>">
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.category'), 'category', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group">
-                    <span class="input-group-addon input-sm">
-                        <i class="bi bi-bookmark"></i>
-                    </span>
-                    <?php
-                    if ($config['category_dropdown']) {
-                        echo form_dropdown('category', $categories, $selected_category, ['class' => 'form-control']);
-                    } else {
-                        echo form_input([
-                            'name'  => 'category',
-                            'id'    => 'category',
-                            'class' => 'form-control input-sm',
-                            'value' => $item_info->category
-                        ]);
-                    }
-                    ?>
-                </div>
-            </div>
-        </div>
-
-        <div id="attributes">
-            <script type="text/javascript">
-                $('#attributes').load('<?= "items/attributes/$item_info->item_id" ?>');
-            </script>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.stock_type'), 'stock_type', !empty($basic_version) ? ['class' => 'required control-label col-xs-3'] : ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'stock_type',
-                        'type'    => 'radio',
-                        'id'      => 'stock_type',
-                        'value'   => 0,
-                        'checked' => $item_info->stock_type == HAS_STOCK
-                    ]) ?> <?= lang('Items.stock') ?>
-                </label>
-                <label class="radio-inline">
-                    <?= form_radio([
-                        'name'    => 'stock_type',
-                        'type'    => 'radio',
-                        'id'      => 'stock_type',
-                        'value'   => 1,
-                        'checked' => $item_info->stock_type == HAS_NO_STOCK
-                    ]) ?><?= lang('Items.nonstock') ?>
-                </label>
-            </div>
-        </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.type'), 'item_type', !empty($basic_version) ? ['class' => 'required control-label col-xs-3'] : ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <label class="radio-inline">
-                    <?php
-                    $radio_button = [
-                        'name'    => 'item_type',
-                        'type'    => 'radio',
-                        'id'      => 'item_type',
-                        'value'   => 0,
-                        'checked' => $item_info->item_type == ITEM
-                    ];
-
-                    if ($standard_item_locked) {
-                        $radio_button['disabled'] = true;
-                    }
-                    echo form_radio($radio_button) ?> <?= lang('Items.standard') ?>
-                </label>
-                <label class="radio-inline">
-                    <?php
-                    $radio_button = [
-                        'name'    => 'item_type',
-                        'type'    => 'radio',
-                        'id'      => 'item_type',
-                        'value'   => 1,
-                        'checked' => $item_info->item_type == ITEM_KIT
-                    ];
-
-                    if ($item_kit_disabled) {
-                        $radio_button['disabled'] = true;
-                    }
-                    echo form_radio($radio_button) ?> <?= lang('Items.kit') ?>
-                </label>
-                <?php if ($config['derive_sale_quantity'] == '1') { ?>
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'item_type',
-                            'type'    => 'radio',
-                            'id'      => 'item_type',
-                            'value'   => 2,
-                            'checked' => $item_info->item_type == ITEM_AMOUNT_ENTRY
-                        ]) ?><?= lang('Items.amount_entry') ?>
-                    </label>
+    <label for="category" class="form-label"><?= lang('Items.category'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="category-icon"><i class="bi bi-bookmark"></i></span>
+        <?php if ($config['category_dropdown']) { ?>
+            <select class="form-select" name="category" id="category" required>
+                <?php foreach ($categories as $key => $value) { ?>
+                    <option value="<?= $key ?>" <?= $selected_category == $key ? 'selected' : '' ?>><?= $value ?></option>
                 <?php } ?>
-                <?php if ($allow_temp_item == 1) { ?>
-                    <label class="radio-inline">
-                        <?= form_radio([
-                            'name'    => 'item_type',
-                            'type'    => 'radio',
-                            'id'      => 'item_type',
-                            'value'   => 3,
-                            'checked' => $item_info->item_type == ITEM_TEMP
-                        ]) ?> <?= lang('Items.temp') ?>
-                    </label>
-                <?php } ?>
-            </div>
+            </select>
+        <?php } else { ?>
+            <input type="text" class="form-control" name="category" id="category" aria-describedby="category-icon" value="<?= $item_info->category ?>" required>
+        <?php } ?>
+    </div>
+
+    <div id="attributes">
+        <script type="text/javascript">
+            $('#attributes').load('<?= "items/attributes/$item_info->item_id" ?>');
+        </script>
+    </div>
+
+    <label for="stock_type" class="form-label"><?= lang('Items.stock_type') ?><?= !empty($basic_version) ? '<sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup>' : '' ?></label>
+    <div class="mb-3">
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="stock_type" id="stock_type_stock" value="0" <?= $item_info->stock_type == HAS_STOCK ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="stock_type_stock"><?= lang('Items.stock') ?></label>
         </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.supplier'), 'supplier', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_dropdown('supplier_id', $suppliers, $selected_supplier, ['class' => 'form-control']) ?>
-            </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="stock_type" id="stock_type_nonstock" value="1" <?= $item_info->stock_type == HAS_NO_STOCK ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="stock_type_nonstock"><?= lang('Items.nonstock') ?></label>
         </div>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.cost_price'), 'cost_price', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'    => 'cost_price',
-                        'id'      => 'cost_price',
-                        'class'   => 'form-control input-sm',
-                        'onClick' => 'this.select();',
-                        'value'   => to_currency_no_money($item_info->cost_price)
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                </div>
-            </div>
+    <label for="item_type" class="form-label"><?= lang('Items.type') ?><?= !empty($basic_version) ? '<sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup>' : '' ?></label>
+    <div class="mb-3">
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="item_type" id="item_type_standard" value="0" <?= $item_info->item_type == ITEM ? 'checked' : '' ?> <?= $standard_item_locked ? 'disabled readonly' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="item_type_standard"><?= lang('Items.standard') ?></label>
         </div>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.unit_price'), 'unit_price', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'    => 'unit_price',
-                        'id'      => 'unit_price',
-                        'class'   => 'form-control input-sm',
-                        'onClick' => 'this.select();',
-                        'value'   => to_currency_no_money($item_info->unit_price)
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                </div>
-            </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" name="item_type" id="item_type_kit" value="1" <?= $item_info->item_type == ITEM_KIT ? 'checked' : '' ?> <?= $item_kit_disabled ? 'disabled readonly' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+            <label class="form-check-label" for="item_type_kit"><?= lang('Items.kit') ?></label>
         </div>
-
-        <?php if (!$use_destination_based_tax) { ?>
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Items.tax_1'), 'tax_percent_1', ['class' => 'control-label col-xs-3']) ?>
-                <div class="col-xs-4">
-                    <?= form_input([
-                        'name'  => 'tax_names[]',
-                        'id'    => 'tax_name_1',
-                        'class' => 'form-control input-sm',
-                        'value' => $item_tax_info[0]['name'] ?? $config['default_tax_1_name']
-                    ]) ?>
-                </div>
-                <div class="col-xs-4">
-                    <div class="input-group input-group-sm">
-                        <?= form_input([
-                            'name'  => 'tax_percents[]',
-                            'id'    => 'tax_percent_name_1',
-                            'class' => 'form-control input-sm',
-                            'value' => isset($item_tax_info[0]['percent']) ? to_tax_decimals($item_tax_info[0]['percent']) : to_tax_decimals($default_tax_1_rate)
-                        ]) ?>
-                        <span class="input-group-addon input-sm"><b>%</b></span>
-                    </div>
-                </div>
-            </div>
-
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Items.tax_2'), 'tax_percent_2', ['class' => 'control-label col-xs-3']) ?>
-                <div class="col-xs-4">
-                    <?= form_input([
-                        'name'  => 'tax_names[]',
-                        'id'    => 'tax_name_2',
-                        'class' => 'form-control input-sm',
-                        'value' => $item_tax_info[1]['name'] ?? $config['default_tax_2_name']
-                    ]) ?>
-                </div>
-                <div class="col-xs-4">
-                    <div class="input-group input-group-sm">
-                        <?= form_input([
-                            'name'  => 'tax_percents[]',
-                            'class' => 'form-control input-sm',
-                            'id'    => 'tax_percent_name_2',
-                            'value' => isset($item_tax_info[1]['percent']) ? to_tax_decimals($item_tax_info[1]['percent']) : to_tax_decimals($default_tax_2_rate)
-                        ]) ?>
-                        <span class="input-group-addon input-sm"><b>%</b></span>
-                    </div>
-                </div>
+        <?php if ($config['derive_sale_quantity'] == '1') { ?>
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="item_type" id="item_type_amount_entry" value="2" <?= $item_info->item_type == ITEM_AMOUNT_ENTRY ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+                <label class="form-check-label" for="item_type_amount_entry"><?= lang('Items.amount_entry') ?></label>
             </div>
         <?php } ?>
-
-        <?php if ($use_destination_based_tax): ?>
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Taxes.tax_category'), 'tax_category', ['class' => 'control-label col-xs-3']) ?>
-                <div class="col-xs-8">
-                    <div class="input-group input-group-sm">
-                        <?= form_input([
-                            'name'  => 'tax_category',
-                            'id'    => 'tax_category',
-                            'class' => 'form-control input-sm',
-                            'size'  => '50',
-                            'value' => $tax_category
-                        ]) ?>
-                        <?= form_hidden('tax_category_id', $tax_category_id) ?>
-                    </div>
-                </div>
+        <?php if ($allow_temp_item == 1) { ?>
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="item_type" id="item_type_temp" value="3" <?= $item_info->item_type == ITEM_TEMP ? 'checked' : '' ?> <?= !empty($basic_version) ? 'required' : '' ?>>
+                <label class="form-check-label" for="item_type_temp"><?= lang('Items.temp') ?></label>
             </div>
+        <?php } ?>
+    </div>
+
+    <label for="supplier_id" class="form-label"><?= lang('Items.supplier'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-truck"></i></span>
+        <select class="form-select" name="supplier_id" id="supplier_id">
+            <?php foreach ($suppliers as $key => $value) { ?>
+                <option value="<?= $key ?>" <?= $selected_supplier == $key ? 'selected' : '' ?>><?= $value ?></option>
+            <?php } ?>
+        </select>
+    </div>
+
+    <label for="cost_price" class="form-label"><?= lang('Items.cost_price') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="cost_price-icon"><?= esc($config['currency_symbol']) ?></span>
         <?php endif; ?>
-
-        <?php if ($include_hsn): ?>
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Items.hsn_code'), 'category', ['class' => 'control-label col-xs-3']) ?>
-                <div class="col-xs-8">
-                    <div class="input-group">
-                        <?= form_input([
-                            'name'  => 'hsn_code',
-                            'id'    => 'hsn_code',
-                            'class' => 'form-control input-sm',
-                            'value' => $hsn_code
-                        ]) ?>
-                    </div>
-                </div>
-            </div>
+        <input type="number" step="any" class="form-control" name="cost_price" id="cost_price" aria-describedby="cost_price-icon" value="<?= to_currency_no_money($item_info->cost_price) ?>" required>
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="cost_price-icon"><?= esc($config['currency_symbol']) ?></span>
         <?php endif; ?>
+    </div>
 
-        <?php foreach ($stock_locations as $key => $location_detail) { ?>
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Items.quantity') . ' ' . $location_detail['location_name'], "quantity_$key", ['class' => 'required control-label col-xs-3']) ?>
-                <div class="col-xs-4">
-                    <?= form_input([
-                        'name'    => "quantity_$key",
-                        'id'      => "quantity_$key",
-                        'class'   => 'required quantity form-control',
-                        'onClick' => 'this.select();',
-                        'value'   => isset($item_info->item_id) ? to_quantity_decimals($location_detail['quantity']) : to_quantity_decimals(0)
-                    ]) ?>
-                </div>
-            </div>
-        <?php } ?>
+    <label for="unit_price" class="form-label"><?= lang('Items.unit_price') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="unit_price-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+        <input type="number" step="any" class="form-control" name="unit_price" id="unit_price" aria-describedby="unit_price-icon" value="<?= to_currency_no_money($item_info->unit_price) ?>" required>
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="unit_price-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.receiving_quantity'), 'receiving_quantity', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <?= form_input([
-                    'name'    => 'receiving_quantity',
-                    'id'      => 'receiving_quantity',
-                    'class'   => 'required form-control input-sm',
-                    'onClick' => 'this.select();',
-                    'value'   => isset($item_info->item_id) ? to_quantity_decimals($item_info->receiving_quantity) : to_quantity_decimals(0)
-                ]) ?>
-            </div>
+    <?php if (!$use_destination_based_tax): ?>
+        <label for="tax_name_1" class="form-label"><?= lang('Items.tax_1') ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="tax_name_1-icon"><i class="bi bi-piggy-bank"></i></span>
+            <input type="text" class="form-control w-25" name="tax_names[]" id="tax_name_1" aria-describedby="tax_name_1-icon" value="<?= $item_tax_info[0]['name'] ?? $config['default_tax_1_name'] ?>">
+            <input type="number" step="any" min="0" max="100" class="form-control" name="tax_percents[]" id="tax_percent_name_1" aria-describedby="tax_percent_name_1-icon" value="<?= isset($item_tax_info[0]['percent']) ? to_tax_decimals($item_tax_info[0]['percent']) : to_tax_decimals($default_tax_1_rate) ?>">
+            <span class="input-group-text" id="tax_percent_name_1-icon"><i class="bi bi-percent"></i></span>
         </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.reorder_level'), 'reorder_level', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <?= form_input([
-                    'name'    => 'reorder_level',
-                    'id'      => 'reorder_level',
-                    'class'   => 'form-control input-sm',
-                    'onClick' => 'this.select();',
-                    'value'   => isset($item_info->item_id) ? to_quantity_decimals($item_info->reorder_level) : to_quantity_decimals(0)
-                ]) ?>
+        <label for="tax_name_2" class="form-label"><?= lang('Items.tax_2') ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="tax_name_2-icon"><i class="bi bi-piggy-bank"></i></span>
+            <input type="text" class="form-control w-25" name="tax_names[]" id="tax_name_2" aria-describedby="tax_name_2-icon" value="<?= $item_tax_info[1]['name'] ?? $config['default_tax_2_name'] ?>">
+            <input type="number" step="any" min="0" max="100" class="form-control" name="tax_percents[]" id="tax_percent_name_2" aria-describedby="tax_percent_name_2-icon" value="<?= isset($item_tax_info[1]['percent']) ? to_tax_decimals($item_tax_info[1]['percent']) : to_tax_decimals($default_tax_2_rate) ?>">
+            <span class="input-group-text" id="tax_percent_name_2-icon"><i class="bi bi-percent"></i></span>
+        </div>
+    <?php endif; ?>
+
+    <?php if ($use_destination_based_tax): ?>
+        <label for="tax_category" class="form-label"><?= lang('Taxes.tax_category') ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="tax_category-icon"><i class="bi bi-piggy-bank"></i></span>
+            <input type="hidden" name="tax_category_id" id="tax_category_id" value="<?= $tax_category_id ?>">
+            <input type="text" class="form-control" name="tax_category" id="tax_category" aria-describedby="tax_category-icon" value="<?= $tax_category ?>">
+        </div>
+    <?php endif; ?>
+
+    <?php if ($include_hsn): ?>
+        <label for="hsn_code" class="form-label"><?= lang('Items.hsn_code'); ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="hsn_code-icon"><i class="bi bi-123"></i></span>
+            <input type="text" class="form-control" name="hsn_code" id="hsn_code" aria-describedby="hsn_code-icon" value="<?= $hsn_code ?>">
+        </div>
+    <?php endif; ?>
+
+    <?php foreach ($stock_locations as $key => $location_detail): ?>
+        <label for="quantity_<?= $key ?>" class="form-label"><?= lang('Items.quantity') . ' ' . $location_detail['location_name'] ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="quantity_<?= $key ?>-icon"><i class="bi bi-boxes"></i></span>
+            <input type="text" class="form-control" name="quantity_<?= $key ?>" id="quantity_<?= $key ?>" aria-describedby="quantity_<?= $key ?>-icon" value="<?= isset($item_info->item_id) ? to_quantity_decimals($location_detail['quantity']) : to_quantity_decimals(0) ?>" required>
+        </div>
+    <?php endforeach; ?>
+
+    <label for="receiving_quantity" class="form-label"><?= lang('Items.receiving_quantity') ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="receiving_quantity-icon"><i class="bi bi-truck"></i></span>
+        <input type="text" class="form-control" name="receiving_quantity" id="receiving_quantity" aria-describedby="receiving_quantity-icon" value="<?= isset($item_info->item_id) ? to_quantity_decimals($item_info->receiving_quantity) : to_quantity_decimals(0) ?>">
+    </div>
+
+    <label for="reorder_level" class="form-label"><?= lang('Items.reorder_level') ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="reorder_level-icon"><i class="bi bi-list-ol"></i></span>
+        <input type="text" class="form-control" name="reorder_level" id="reorder_level" aria-describedby="reorder_level-icon" value="<?= isset($item_info->item_id) ? to_quantity_decimals($item_info->reorder_level) : to_quantity_decimals(0) ?>">
+    </div>
+
+    <label for="description" class="form-label"><?= lang('Items.description'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-chat"></i></span>
+        <textarea class="form-control" name="description" id="description" rows="6"><?= $item_info->description ?></textarea>
+    </div>
+
+    <label for="items_image" class="form-label"><?= lang('Items.image'); ?></label>
+    <div id="items_image" class="w-100 fileinput <?= $logo_exists ? 'fileinput-exists' : 'fileinput-new'; ?>" data-provides="fileinput">
+        <div class="input-group mb-3" aria-describedby="company-logo-desc">
+            <span class="input-group-text"><i class="bi bi-image"></i></span>
+            <div class="fileinput-new form-control rounded-end mb-0" style="height: 200px; cursor: default;"></div>
+            <div class="fileinput-exists fileinput-preview img-thumbnail form-control rounded-end mb-0 bg-light mh-100" style="height: 200px; cursor: default; background-size: 40px 40px; background-position: 0 0, 20px 20px; background-image: linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white), linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white);">
+                <img class="mh-100 mw-100" data-src="holder.js/100%x100%" alt="<?= esc(lang('Config.company_logo')) ?>" src="<?= $image_path ?>">
             </div>
         </div>
+        <div type="button" class="btn btn-secondary btn-file me-2">
+            <span class="fileinput-new"><i class="bi bi-hand-index me-2"></i><?= lang('Items.select_image') ?></span>
+            <span class="fileinput-exists"><i class="bi bi-images me-2"></i><?= lang('Items.change_image') ?></span>
+            <input type="file" name="items_image" accept="image/*">
+        </div>
+        <a type="button" class="btn btn-outline-secondary fileinput-exists" data-dismiss="fileinput">
+            <i class="bi bi-eraser me-2"></i><?= lang('Items.remove_image') ?>
+        </a>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.description'), 'description', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_textarea([
-                    'name'  => 'description',
-                    'id'    => 'description',
-                    'class' => 'form-control input-sm',
-                    'value' => $item_info->description
-                ]) ?>
-            </div>
+    <div class="form-check mb-3">
+        <input class="form-check-input" type="checkbox" name="allow_alt_description" id="allow_alt_description" value="1" <?= $item_info->allow_alt_description == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="allow_alt_description"><?= lang('Items.allow_alt_description') ?></label>
+    </div>
+
+    <div class="form-check mb-3">
+        <input class="form-check-input" type="checkbox" name="is_serialized" id="is_serialized" value="1" <?= $item_info->is_serialized == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label" for="is_serialized"><?= lang('Items.is_serialized') ?></label>
+    </div>
+
+    <?php if ($config['multi_pack_enabled'] == '1'): ?>
+        <label for="qty_per_pack" class="form-label"><?= lang('Items.qty_per_pack') ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="qty_per_pack-icon"><i class="bi bi-123"></i></span>
+            <input type="text" class="form-control" name="qty_per_pack" id="qty_per_pack" aria-describedby="qty_per_pack-icon" value="<?= isset($item_info->item_id) ? to_quantity_decimals($item_info->qty_per_pack) : to_quantity_decimals(0) ?>">
         </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.image'), 'items_image', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="fileinput <?= $logo_exists ? 'fileinput-exists' : 'fileinput-new' ?>" data-provides="fileinput">
-                    <div class="fileinput-new thumbnail" style="width: 100px; height: 100px;"></div>
-                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 100px; max-height: 100px;">
-                        <img data-src="holder.js/100%x100%" alt="<?= lang('Items.image') ?>"
-                            src="<?= $image_path ?>"
-                            style="max-height: 100%; max-width: 100%;">
-                    </div>
-                    <div>
-                        <span class="btn btn-default btn-sm btn-file">
-                            <span class="fileinput-new"><?= lang('Items.select_image') ?></span>
-                            <span class="fileinput-exists"><?= lang('Items.change_image') ?></span>
-                            <input type="file" name="items_image" accept="image/*">
-                        </span>
-                        <a href="#" class="btn btn-default btn-sm fileinput-exists" data-dismiss="fileinput"><?= lang('Items.remove_image') ?></a>
-                    </div>
-                </div>
-            </div>
+        <label for="pack_name" class="form-label"><?= lang('Items.pack_name') ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="pack_name-icon"><i class="bi bi-box2-heart"></i></span>
+            <input type="text" class="form-control" name="pack_name" id="pack_name" aria-describedby="pack_name-icon" value="<?= $item_info->pack_name ?>">
         </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.allow_alt_description'), 'allow_alt_description', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-1">
-                <?= form_checkbox([
-                    'name'    => 'allow_alt_description',
-                    'id'      => 'allow_alt_description',
-                    'value'   => 1,
-                    'checked' => $item_info->allow_alt_description == 1
-                ]) ?>
-            </div>
+        <label for="low_sell_item_name" class="form-label"><?= lang('Items.low_sell_item') ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text" id="pack_name-icon"><i class="bi bi-thermometer-low"></i></span>
+            <input type="hidden" name="low_sell_item_id" value="<?= $selected_low_sell_item_id ?>">
+            <input type="text" class="form-control" name="low_sell_item_name" id="low_sell_item_name" aria-describedby="low_sell_item_name-icon" value="<?= $selected_low_sell_item ?>">
         </div>
+    <?php endif; ?>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.is_serialized'), 'is_serialized', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-1">
-                <?= form_checkbox([
-                    'name'    => 'is_serialized',
-                    'id'      => 'is_serialized',
-                    'value'   => 1,
-                    'checked' => $item_info->is_serialized == 1
-                ]) ?>
-            </div>
-        </div>
+    <div class="form-check mb-3">
+        <input class="form-check-input" type="checkbox" name="is_deleted" id="is_deleted" value="1" <?= $item_info->deleted == 1 ? 'checked' : '' ?>>
+        <label class="form-check-label text-danger" for="is_deleted"><?= lang('Items.is_deleted') ?></label>
+    </div>
 
-        <?php if ($config['multi_pack_enabled'] == '1') { ?>
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Items.qty_per_pack'), 'qty_per_pack', ['class' => 'control-label col-xs-3']) ?>
-                <div class="col-xs-4">
-                    <?= form_input([
-                        'name'  => 'qty_per_pack',
-                        'id'    => 'qty_per_pack',
-                        'class' => 'form-control input-sm',
-                        'value' => isset($item_info->item_id) ? to_quantity_decimals($item_info->qty_per_pack) : to_quantity_decimals(0)
-                    ]) ?>
-                </div>
-            </div>
-            <div class="form-group form-group-sm">
-                <?= form_label(lang('Items.pack_name'), 'name', ['class' => 'control-label col-xs-3']) ?>
-                <div class="col-xs-8">
-                    <?= form_input([
-                        'name'  => 'pack_name',
-                        'id'    => 'pack_name',
-                        'class' => 'form-control input-sm',
-                        'value' => $item_info->pack_name
-                    ]) ?>
-                </div>
-            </div>
-            <div class="form-group  form-group-sm">
-                <?= form_label(lang('Items.low_sell_item'), 'low_sell_item_name', ['class' => 'control-label col-xs-3']) ?>
-                <div class="col-xs-8">
-                    <div class="input-group input-group-sm">
-                        <?= form_input([
-                            'name'  => 'low_sell_item_name',
-                            'id'    => 'low_sell_item_name',
-                            'class' => 'form-control input-sm',
-                            'value' => $selected_low_sell_item
-                        ]) ?>
-                        <?= form_hidden('low_sell_item_id', $selected_low_sell_item_id) ?>
-                    </div>
-                </div>
-            </div>
-        <?php } ?>
-
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.is_deleted'), 'is_deleted', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-1">
-                <?= form_checkbox([
-                    'name'    => 'is_deleted',
-                    'id'      => 'is_deleted',
-                    'value'   => 1,
-                    'checked' => $item_info->deleted == 1
-                ]) ?>
-            </div>
-        </div>
-
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">
diff --git a/app/Views/items/form_bulk.php b/app/Views/items/form_bulk.php
index 0e7bb394d..9ae920cbb 100644
--- a/app/Views/items/form_bulk.php
+++ b/app/Views/items/form_bulk.php
@@ -8,167 +8,104 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Items.edit_fields_you_want_to_update') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open('items/bulkUpdate/', ['id' => 'item_form']) ?>
 
-<?= form_open('items/bulkUpdate/', ['id' => 'item_form', 'class' => 'form-horizontal']) ?>
-    <fieldset id="bulk_item_basic_info">
+    <div class="mb-3"><?= lang('Items.edit_fields_you_want_to_update') ?></div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.name'), 'name', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'  => 'name',
-                    'id'    => 'name',
-                    'class' => 'form-control input-sm'
-                ]) ?>
-            </div>
-        </div>
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.category'), 'category', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group">
-                    <span class="input-group-addon input-sm">
-                        <i class="bi bi-tag"></i>
-                    </span>
-                    <?= form_input([
-                        'name'  => 'category',
-                        'id'    => 'category',
-                        'class' => 'form-control input-sm'
-                    ]) ?>
-                </div>
-            </div>
-        </div>
+    <label for="name" class="form-label"><?= lang('Items.name') ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="name-icon"><i class="bi bi-tag"></i></span>
+        <input type="text" class="form-control" name="name" id="name" aria-describedby="name-icon">
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.supplier'), 'supplier', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_dropdown('supplier_id', $suppliers, '', ['class' => 'form-control']) ?>
-            </div>
-        </div>
+    <label for="category" class="form-label"><?= lang('Items.category') ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="category-icon"><i class="bi bi-bookmark"></i></span>
+        <input type="text" class="form-control" name="category" id="category" aria-describedby="category-icon">
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.cost_price'), 'cost_price', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'  => 'cost_price',
-                        'id'    => 'cost_price',
-                        'class' => 'form-control input-sm'
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                </div>
-            </div>
-        </div>
+    <label for="supplier" class="form-label"><?= lang('Items.supplier'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-truck"></i></span>
+        <select class="form-select" name="supplier_id" id="supplier">
+            <?php foreach ($suppliers as $value => $label): ?>
+                <option value="<?= $value ?>"><?= $label ?></option>
+            <?php endforeach; ?>
+        </select>
+    </div>
 
-        <div class="form-group form-group">
-            <?= form_label(lang('Items.unit_price'), 'unit_price', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?php if (!is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                    <?= form_input([
-                        'name'  => 'unit_price',
-                        'id'    => 'unit_price',
-                        'class' => 'form-control input-sm'
-                    ]) ?>
-                    <?php if (is_right_side_currency_symbol()): ?>
-                        <span class="input-group-addon input-sm"><b><?= esc($config['currency_symbol']) ?></b></span>
-                    <?php endif; ?>
-                </div>
-            </div>
-        </div>
+    <label for="cost_price" class="form-label"><?= lang('Items.cost_price') ?></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="cost_price-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+        <input type="number" step="any" class="form-control" name="cost_price" id="cost_price" aria-describedby="cost_price-icon">
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="cost_price-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.tax_1'), 'tax_percent_1', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <?= form_input([
-                    'name'  => 'tax_names[]',
-                    'id'    => 'tax_name_1',
-                    'class' => 'form-control input-sm',
-                    'value' => $config['default_tax_1_name']
-                ]) ?>
-            </div>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?= form_input([
-                        'name'  => 'tax_percents[]',
-                        'id'    => 'tax_percent_name_1',
-                        'class' => 'form-control input-sm',
-                        'value' => to_tax_decimals($config['default_tax_1_rate'])
-                    ]) ?>
-                    <span class="input-group input-group-addon"><b>%</b></span>
-                </div>
-            </div>
-        </div>
+    <label for="unit_price" class="form-label"><?= lang('Items.unit_price') ?></label>
+    <div class="input-group mb-3">
+        <?php if (!is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="unit_price-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+        <input type="number" step="any" class="form-control" name="unit_price" id="unit_price" aria-describedby="unit_price-icon">
+        <?php if (is_right_side_currency_symbol()): ?>
+            <span class="input-group-text" id="unit_price-icon"><?= esc($config['currency_symbol']) ?></span>
+        <?php endif; ?>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.tax_2'), 'tax_percent_2', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <?= form_input([
-                    'name'  => 'tax_names[]',
-                    'id'    => 'tax_name_2',
-                    'class' => 'form-control input-sm',
-                    'value' => $config['default_tax_2_name']
-                ]) ?>
-            </div>
-            <div class="col-xs-4">
-                <div class="input-group input-group-sm">
-                    <?= form_input([
-                        'name'  => 'tax_percents[]',
-                        'id'    => 'tax_percent_name_2',
-                        'class' => 'form-control input-sm',
-                        'value' => to_tax_decimals($config['default_tax_2_rate'])
-                    ]) ?>
-                    <span class="input-group input-group-addon"><b>%</b></span>
-                </div>
-            </div>
-        </div>
+    <label for="tax_name_1" class="form-label"><?= lang('Items.tax_1') ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="tax_name_1-icon"><i class="bi bi-piggy-bank"></i></span>
+        <input type="text" class="form-control w-25" name="tax_names[]" id="tax_name_1" aria-describedby="tax_name_1-icon" value="<?= $config['default_tax_1_name'] ?>">
+        <input type="number" step="any" min="0" max="100" class="form-control" name="tax_percents[]" id="tax_percent_name_1" aria-describedby="tax_percent_name_1-icon" value="<?= to_tax_decimals($config['default_tax_1_rate']) ?>">
+        <span class="input-group-text" id="tax_percent_name_1-icon"><i class="bi bi-percent"></i></span>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.reorder_level'), 'reorder_level', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <?= form_input([
-                    'name'  => 'reorder_level',
-                    'id'    => 'reorder_level',
-                    'class' => 'form-control input-sm'
-                ]) ?>
-            </div>
-        </div>
+    <label for="tax_name_2" class="form-label"><?= lang('Items.tax_2') ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="tax_name_2-icon"><i class="bi bi-piggy-bank"></i></span>
+        <input type="text" class="form-control w-25" name="tax_names[]" id="tax_name_2" aria-describedby="tax_name_2-icon" value="<?= $config['default_tax_2_name'] ?>">
+        <input type="number" step="any" min="0" max="100" class="form-control" name="tax_percents[]" id="tax_percent_name_2" aria-describedby="tax_percent_name_2-icon" value="<?= to_tax_decimals($config['default_tax_2_rate']) ?>">
+        <span class="input-group-text" id="tax_percent_name_2-icon"><i class="bi bi-percent"></i></span>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.description'), 'description', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_textarea([
-                    'name'  => 'description',
-                    'id'    => 'description',
-                    'class' => 'form-control input-sm'
-                ]) ?>
-            </div>
-        </div>
+    <label for="reorder_level" class="form-label"><?= lang('Items.reorder_level') ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="reorder_level-icon"><i class="bi bi-list-ol"></i></span>
+        <input type="text" class="form-control" name="reorder_level" id="reorder_level" aria-describedby="reorder_level-icon">
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.allow_alt_description'), 'allow_alt_description', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_dropdown('allow_alt_description', $allow_alt_description_choices, '', ['class' => 'form-control']) ?>
-            </div>
-        </div>
+    <label for="description" class="form-label"><?= lang('Items.description'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-chat"></i></span>
+        <textarea class="form-control" name="description" id="description" rows="6"></textarea>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.is_serialized'), 'is_serialized', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_dropdown('is_serialized', $serialization_choices, '', ['class' => 'form-control']) ?>
-            </div>
-        </div>
+    <label for="allow_alt_description" class="form-label"><?= lang('Items.allow_alt_description'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-input-cursor-text"></i></span>
+        <select class="form-select" name="allow_alt_description" id="allow_alt_description">
+            <?php foreach ($allow_alt_description_choices as $value => $label): ?>
+                <option value="<?= $value ?>"><?= $label ?></option>
+            <?php endforeach; ?>
+        </select>
+    </div>
+
+    <label for="is_serialized" class="form-label"><?= lang('Items.is_serialized'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-123"></i></span>
+        <select class="form-select" name="is_serialized" id="is_serialized">
+            <?php foreach ($serialization_choices as $value => $label): ?>
+                <option value="<?= $value ?>"><?= $label ?></option>
+            <?php endforeach; ?>
+        </select>
+    </div>
 
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">
diff --git a/app/Views/items/form_count_details.php b/app/Views/items/form_count_details.php
index 7b35f6300..947ab3552 100644
--- a/app/Views/items/form_count_details.php
+++ b/app/Views/items/form_count_details.php
@@ -9,109 +9,74 @@ use App\Models\Employee;
 use App\Models\Inventory;
 ?>
 
-<?= form_open('items', ['id' => 'item_form', 'class' => 'form-horizontal']) ?>
-    <fieldset id="count_item_basic_info">
+<?= form_open('items', ['id' => 'item_form']) ?>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.item_number'), 'name', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group">
-                    <span class="input-group-addon input-sm">
-                        <i class="bi bi-upc-scan"></i>
-                    </span>
-                    <?= form_input([
-                        'name'     => 'item_number',
-                        'id'       => 'item_number',
-                        'class'    => 'form-control input-sm',
-                        'disabled' => '',
-                        'value'    => $item_info->item_number
-                    ]) ?>
-                </div>
-            </div>
-        </div>
+    <label for="item_number" class="form-label"><?= lang('Items.item_number'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="item_number-icon"><i class="bi bi-upc-scan"></i></span>
+        <input type="text" class="form-control" name="item_number" id="item_number" aria-describedby="item_number-icon" value="<?= $item_info->item_number ?>" disabled readonly>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.name'), 'name', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'     => 'name',
-                    'id'       => 'name',
-                    'class'    => 'form-control input-sm',
-                    'disabled' => '',
-                    'value'    => $item_info->name
-                ]) ?>
-            </div>
-        </div>
+    <label for="name" class="form-label"><?= lang('Items.name'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="name-icon"><i class="bi bi-tag"></i></span>
+        <input type="text" class="form-control" name="name" id="name" aria-describedby="name-icon" value="<?= $item_info->name ?>" disabled readonly>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.category'), 'category', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group">
-                    <span class="input-group-addon input-sm">
-                        <i class="bi bi-tag"></i>
-                    </span>
-                    <?= form_input([
-                        'name'     => 'category',
-                        'id'       => 'category',
-                        'class'    => 'form-control input-sm',
-                        'disabled' => '',
-                        'value'    => $item_info->category
-                    ]) ?>
-                </div>
-            </div>
-        </div>
+    <label for="category" class="form-label"><?= lang('Items.category'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="category-icon"><i class="bi bi-bookmark"></i></span>
+        <input type="text" class="form-control" name="category" id="category" aria-describedby="category-icon" value="<?= $item_info->category ?>" disabled readonly>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.stock_location'), 'stock_location', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_dropdown('stock_location', $stock_locations, current($stock_locations), ['onchange' => 'display_stock(this.value);', 'class' => 'form-control']) ?>
-            </div>
-        </div>
+    <label for="stock_location" class="form-label"><?= lang('Items.stock_location'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-boxes"></i></span>
+        <select class="form-select" name="stock_location" id="stock_location" onchange="display_stock(this.value)">
+            <?php foreach ($stock_locations as $value => $label): ?>
+                <option value="<?= $value ?>" <?= $value == current($stock_locations) ? 'selected' : '' ?>><?= $label ?></option>
+            <?php endforeach; ?>
+        </select>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.current_quantity'), 'quantity', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <?= form_input([
-                    'name'     => 'quantity',
-                    'id'       => 'quantity',
-                    'class'    => 'form-control input-sm',
-                    'disabled' => '',
-                    'value'    => to_quantity_decimals(current($item_quantities))
-                ]) ?>
-            </div>
-        </div>
+    <label for="quantity" class="form-label"><?= lang('Items.current_quantity'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="quantity-icon"><i class="bi bi-box"></i></span>
+        <input type="text" class="form-control" name="quantity" id="quantity" aria-describedby="quantity-icon" value="<?= to_quantity_decimals(current($item_quantities)) ?>" disabled readonly>
+    </div>
 
-    </fieldset>
 <?= form_close() ?>
 
-<table id="items_count_details" class="table table-striped table-hover">
-    <thead>
-        <tr style="background-color: #999 !important;">
-            <th colspan="4"><?= lang('Items.inventory_data_tracking') ?></th>
-        </tr>
-        <tr>
-            <th style="width: 30%;"><?= lang('Items.inventory_date') ?></th>
-            <th style="width: 20%;"><?= lang('Items.inventory_employee') ?></th>
-            <th style="width: 20%;"><?= lang('Items.inventory_in_out_quantity') ?></th>
-            <th style="width: 30%;"><?= lang('Items.inventory_remarks') ?></th>
-        </tr>
-    </thead>
-    <tbody id="inventory_result">
-        <?php
-        // The tbody content of the table will be filled in by the javascript (see bottom of page)
-        $employee = model(Employee::class);
-        $inventory = model(Inventory::class);
+<div class="table-responsive">
+    <table class="table table-sm table-hover align-middle text-nowrap" id="items_count_details">
+        <thead class="table-secondary">
+            <tr class="table-active">
+                <th colspan="4"><?= lang('Items.inventory_data_tracking') ?></th>
+            </tr>
+            <tr>
+                <th scope="col"><?= lang('Items.inventory_date') ?></th>
+                <th scope="col"><?= lang('Items.inventory_employee') ?></th>
+                <th scope="col" class="text-center" title="<?= lang('Items.inventory_in_out_quantity') ?>">#</th>
+                <th scope="col"><?= lang('Items.inventory_remarks') ?></th>
+            </tr>
+        </thead>
+        <tbody id="inventory_result">
+            <?php
+            // The tbody content of the table will be filled in by the javascript (see bottom of page)
+            $employee = model(Employee::class);
+            $inventory = model(Inventory::class);
 
-        $inventory_array = $inventory->get_inventory_data_for_item($item_info->item_id)->getResultArray();
-        $employee_name = [];
+            $inventory_array = $inventory->get_inventory_data_for_item($item_info->item_id)->getResultArray();
+            $employee_name = [];
 
-        foreach ($inventory_array as $row) {
-            $employee_data = $employee->get_info($row['trans_user']);
-            $employee_name[] = $employee_data->first_name . ' ' . $employee_data->last_name;
-        }
-        ?>
-    </tbody>
-</table>
+            foreach ($inventory_array as $row) {
+                $employee_data = $employee->get_info($row['trans_user']);
+                $employee_name[] = $employee_data->first_name . ' ' . $employee_data->last_name;
+            }
+            ?>
+        </tbody>
+    </table>
+</div>
 
 <script type="text/javascript">
     $(document).ready(function() {
@@ -149,7 +114,7 @@ use App\Models\Inventory;
 
                 td = document.createElement('td');
                 td.appendChild(document.createTextNode(parseFloat(data['trans_inventory']).toFixed(<?= quantity_decimals() ?>)));
-                td.setAttribute("style", "text-align: center");
+                td.setAttribute("class", "text-end");
                 tr.appendChild(td);
 
                 td = document.createElement('td');
diff --git a/app/Views/items/form_csv_import.php b/app/Views/items/form_csv_import.php
index cb4e1b985..028635ab3 100644
--- a/app/Views/items/form_csv_import.php
+++ b/app/Views/items/form_csv_import.php
@@ -1,27 +1,22 @@
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open_multipart('items/importCsvFile/', ['id' => 'csv_form']) ?>
 
-<?= form_open_multipart('items/importCsvFile/', ['id' => 'csv_form', 'class' => 'form-horizontal']) ?>
-    <fieldset id="item_basic_info">
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <div class="col-xs-12">
-                <a href="<?= esc('items/generateCsvFile', 'attr') ?>"><?= lang('Common.download_import_template') ?></a>
-            </div>
+    <a type="button" class="btn btn-secondary mb-3" href="<?= esc('items/generateCsvFile', 'attr') ?>"><?= lang('Common.download_import_template') ?></a>
+
+    <div class="fileinput fileinput-new input-group mb-3" data-provides="fileinput">
+        <span class="input-group-text"><i class="bi bi-filetype-csv"></i></span>
+        <div class="form-control" data-trigger="fileinput">
+            <span class="fileinput-filename"></span>
         </div>
+        <span class="input-group-text fileinput-exists" data-dismiss="fileinput" style="cursor: pointer;"><?= lang('Common.import_remove_file') ?></span>
+        <span class="input-group-text btn-file">
+            <span class="fileinput-new"><?= lang('Common.import_select_file') ?></span>
+            <span class="fileinput-exists"><?= lang('Common.import_change_file') ?></span>
+            <input type="file" id="file_path" name="file_path" accept=".csv">
+        </span>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <div class="col-xs-12">
-                <div class="fileinput fileinput-new input-group" data-provides="fileinput">
-                    <div class="form-control" data-trigger="fileinput"><i class="bi bi-filetype-csv icon-spacing fileinput-exists"></i><span class="fileinput-filename"></span></div>
-                    <span class="input-group-addon input-sm btn btn-default btn-file">
-                        <span class="fileinput-new"><?= lang('Common.import_select_file') ?></span><span class="fileinput-exists"><?= lang('Common.import_change_file') ?></span><input type="file" id="file_path" name="file_path" accept=".csv">
-                    </span>
-                    <a href="#" class="input-group-addon input-sm btn btn-default fileinput-exists" data-dismiss="fileinput"><?= lang('Common.import_remove_file') ?></a>
-                </div>
-            </div>
-        </div>
-
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">
diff --git a/app/Views/items/form_inventory.php b/app/Views/items/form_inventory.php
index 086c50537..7bc36710f 100644
--- a/app/Views/items/form_inventory.php
+++ b/app/Views/items/form_inventory.php
@@ -7,104 +7,56 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("items/saveInventory/$item_info->item_id", ['id' => 'item_form']) ?>
 
-<?= form_open("items/saveInventory/$item_info->item_id", ['id' => 'item_form', 'class' => 'form-horizontal']) ?>
-    <fieldset id="inv_item_basic_info">
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.item_number'), 'name', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group">
-                    <span class="input-group-addon input-sm">
-                        <i class="bi bi-upc-scan"></i>
-                    </span>
-                    <?= form_input([
-                        'name'     => 'item_number',
-                        'id'       => 'item_number',
-                        'class'    => 'form-control input-sm',
-                        'disabled' => '',
-                        'value'    => $item_info->item_number
-                    ]) ?>
-                </div>
-            </div>
-        </div>
+    <label for="item_number" class="form-label"><?= lang('Items.item_number'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="item_number-icon"><i class="bi bi-upc-scan"></i></span>
+        <input type="text" class="form-control" name="item_number" id="item_number" aria-describedby="item_number-icon" value="<?= $item_info->item_number ?>" disabled readonly>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.name'), 'name', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'     => 'name',
-                    'id'       => 'name',
-                    'class'    => 'form-control input-sm',
-                    'disabled' => '',
-                    'value'    => $item_info->name
-                ]) ?>
-            </div>
-        </div>
+    <label for="name" class="form-label"><?= lang('Items.name'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="name-icon"><i class="bi bi-tag"></i></span>
+        <input type="text" class="form-control" name="name" id="name" aria-describedby="name-icon" value="<?= $item_info->name ?>" disabled readonly>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.category'), 'category', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <div class="input-group">
-                    <span class="input-group-addon input-sm">
-                        <i class="bi bi-tag"></i>
-                    </span>
-                    <?= form_input([
-                        'name'     => 'category',
-                        'id'       => 'category',
-                        'class'    => 'form-control input-sm',
-                        'disabled' => '',
-                        'value'    => $item_info->category
-                    ]) ?>
-                </div>
-            </div>
-        </div>
+    <label for="category" class="form-label"><?= lang('Items.category'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="category-icon"><i class="bi bi-bookmark"></i></span>
+        <input type="text" class="form-control" name="category" id="category" aria-describedby="category-icon" value="<?= $item_info->category ?>" disabled readonly>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.stock_location'), 'stock_location', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_dropdown('stock_location', $stock_locations, current($stock_locations), ['onchange' => 'fill_quantity(this.value)', 'class' => 'form-control']) ?>
-            </div>
-        </div>
+    <label for="stock_location" class="form-label"><?= lang('Items.stock_location'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-boxes"></i></span>
+        <select class="form-select" name="stock_location" id="stock_location" onchange="fill_quantity(this.value)">
+            <?php foreach ($stock_locations as $value => $label): ?>
+                <option value="<?= $value ?>" <?= $value == current($stock_locations) ? 'selected' : '' ?>><?= $label ?></option>
+            <?php endforeach; ?>
+        </select>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.current_quantity'), 'quantity', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <?= form_input([
-                    'name'     => 'quantity',
-                    'id'       => 'quantity',
-                    'class'    => 'form-control input-sm',
-                    'disabled' => '',
-                    'value'    => to_quantity_decimals(current($item_quantities))
-                ]) ?>
-            </div>
-        </div>
+    <label for="quantity" class="form-label"><?= lang('Items.current_quantity'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="quantity-icon"><i class="bi bi-box"></i></span>
+        <input type="text" class="form-control" name="quantity" id="quantity" aria-describedby="quantity-icon" value="<?= to_quantity_decimals(current($item_quantities)) ?>" disabled readonly>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.add_minus'), 'quantity', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-4">
-                <?= form_input([
-                    'name'  => 'newquantity',
-                    'id'    => 'newquantity',
-                    'class' => 'form-control input-sm'
-                ]) ?>
-            </div>
-        </div>
+    <label for="newquantity" class="form-label"><?= lang('Items.add_minus'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="newquantity-icon"><i class="bi bi-plus-slash-minus"></i></span>
+        <input type="number" step="1" class="form-control" name="newquantity" id="newquantity" aria-describedby="newquantity-icon">
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.inventory_comments'), 'description', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_textarea([
-                    'name'  => 'trans_comment',
-                    'id'    => 'trans_comment',
-                    'class' => 'form-control input-sm'
-                ]) ?>
-            </div>
-        </div>
+    <label for="trans_comment" class="form-label"><?= lang('Items.inventory_comments'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-chat"></i></span>
+        <textarea class="form-control" name="trans_comment" id="trans_comment" rows="6"></textarea>
+    </div>
 
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">
diff --git a/app/Views/items/manage.php b/app/Views/items/manage.php
index e3e24ad9e..c150f11dc 100644
--- a/app/Views/items/manage.php
+++ b/app/Views/items/manage.php
@@ -16,6 +16,11 @@ use App\Models\Employee;
 
 <?= view('partial/header') ?>
 
+<?php
+$title_info['config_title'] = 'Items';
+echo view('configs/config_header', $title_info);
+?>
+
 <script type="text/javascript">
     $(document).ready(function() {
         $('#generate_barcodes').click(function() {
@@ -76,51 +81,57 @@ use App\Models\Employee;
 
 <?= view('partial/table_filter_persistence', ['additional_params' => ['stock_location']]) ?>
 
-<div id="title_bar" class="btn-toolbar print_hide">
-    <button class="btn btn-info btn-sm pull-right modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "$controller_name/csvImport" ?>" title="<?= lang('Items.import_items_csv') ?>">
-        <i class="bi bi-file-earmark-arrow-down icon-spacing"></i><?= lang('Common.import_csv') ?>
+<div class="d-flex gap-2 justify-content-end">
+    <button type="button" class="btn btn-primary modal-launch" data-btn-new="<?= lang('Common.new') ?>" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "$controller_name/view" ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
+        <i class="bi bi-tag me-2"></i><?= lang(ucfirst($controller_name) . '.new') ?>
     </button>
-
-    <button class="btn btn-info btn-sm pull-right modal-dlg" data-btn-new="<?= lang('Common.new') ?>" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "$controller_name/view" ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
-        <i class="bi bi-tag icon-spacing"></i><?= lang(ucfirst($controller_name) . '.new') ?>
+    <button type="button" class="btn btn-primary modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "$controller_name/csvImport" ?>" title="<?= lang('Items.import_items_csv') ?>">
+        <i class="bi bi-file-earmark-arrow-down me-2"></i><?= lang('Common.import_csv') ?>
     </button>
 </div>
 
 <div id="toolbar">
-    <div class="pull-left form-inline" role="toolbar">
-        <button id="delete" class="btn btn-default btn-sm print_hide">
-            <i class="bi bi-trash icon-spacing"></i><?= lang('Common.delete') ?>
+    <div class="d-flex gap-2">
+        <button type="button" class="btn btn-secondary d-print-none" id="delete">
+            <i class="bi bi-trash"></i><span class="d-none d-md-inline ms-2"><?= lang('Common.delete') ?></span>
         </button>
-        <button id="bulk_edit" class="btn btn-default btn-sm modal-dlg print_hide" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "items/bulkEdit" ?>" title="<?= lang('Items.edit_multiple_items') ?>">
-            <i class="bi bi-pencil-square icon-spacing"></i><?= lang('Items.bulk_edit') ?>
+
+        <button type="button" class="btn btn-secondary modal-launch d-print-none" id="bulk_edit" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "items/bulkEdit" ?>" title="<?= lang('Items.edit_multiple_items') ?>">
+            <i class="bi bi-pencil-square"></i><span class="d-none d-md-inline ms-2"><?= lang('Items.bulk_edit') ?></span>
         </button>
-        <button id="generate_barcodes" class="btn btn-default btn-sm print_hide" data-href="<?= "$controller_name/generateBarcodes" ?>" title="<?= lang('Items.generate_barcodes') ?>">
-            <i class="bi bi-upc-scan icon-spacing"></i><?= lang('Items.generate_barcodes') ?>
+
+        <button type="button" class="btn btn-secondary d-print-none" id="generate_barcodes" data-href="<?= "$controller_name/generateBarcodes" ?>" title="<?= lang('Items.generate_barcodes') ?>">
+            <i class="bi bi-upc-scan"></i><span class="d-none d-md-inline ms-2"><?= lang('Items.generate_barcodes') ?></span>
         </button>
-        <?= form_input(['name' => 'daterangepicker', 'class' => 'form-control input-sm', 'id' => 'daterangepicker']) ?>
-        <?= form_multiselect('filters[]', $filters, $selected_filters ?? [], [
-            'id'                        => 'filters',
-            'class'                     => 'selectpicker show-menu-arrow',
-            'data-none-selected-text'   => lang('Common.none_selected_text'),
-            'data-selected-text-format' => 'count > 1',
-            'data-style'                => 'btn-default btn-sm',
-            'data-width'                => 'fit'
-        ]) ?>
-        <?php
-        if (count($stock_locations) > 1) {
-            echo form_dropdown(
-                'stock_location',
-                $stock_locations,
-                $stock_location,
-                [
-                    'id'         => 'stock_location',
-                    'class'      => 'selectpicker show-menu-arrow',
-                    'data-style' => 'btn-default btn-sm',
-                    'data-width' => 'fit'
-                ]
-            );
-        }
-        ?>
+
+        <div class="input-group w-auto">
+            <span class="input-group-text" id="daterangepicker-icon"><i class="bi bi-calendar2-range"></i></span>
+            <input type="text" class="form-select" name="daterangepicker" id="daterangepicker" aria-describedby="daterangepicker-icon">
+        </div>
+
+        <div class="input-group w-auto">
+            <span class="input-group-text" id="filters-icon"><i class="bi bi-funnel"></i></span>
+            <select class="form-select" name="filters[]" id="filters" aria-describedby="filters-icon" multiple>
+                <?php foreach ($filters as $key => $label): ?>
+                    <option value="<?= $key ?>" <?= in_array($key, $selected_filters ?? []) ? 'selected' : '' ?>>
+                        <?= esc($label) ?>
+                    </option>
+                <?php endforeach; ?>
+            </select>
+        </div>
+
+        <?php if (count($stock_locations) > 1): ?>
+            <div class="input-group w-auto">
+                <span class="input-group-text" id="stock_location-icon"><i class="bi bi-boxes"></i></span>
+                <select class="form-select" name="stock_location" id="stock_location" aria-describedby="stock_location-icon" multiple>
+                    <?php foreach ($stock_locations as $value => $label): ?>
+                        <option value="<?= $value ?>" <?= $value == $stock_location ? 'selected' : '' ?>>
+                            <?= $label ?>
+                        </option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        <?php endif; ?>
     </div>
 </div>
 
@@ -129,3 +140,25 @@ use App\Models\Employee;
 </div>
 
 <?= view('partial/footer') ?>
+
+<script type="text/javascript">
+    new TomSelect('#filters', {
+        plugins: ['checkbox_options', 'remove_button'],
+        placeholder: '<?= lang('Common.none_selected_text') ?>',
+        hidePlaceholder: true,
+        closeAfterSelect: false,
+        onChange: function() {
+            $('#table').bootstrapTable('refresh');
+        }
+    });
+
+    new TomSelect('#stock_location', {
+        plugins: ['checkbox_options', 'remove_button'],
+        placeholder: '<?= lang('Common.none_selected_text') ?>',
+        hidePlaceholder: true,
+        closeAfterSelect: false,
+        onChange: function() {
+            $('#table').bootstrapTable('refresh');
+        }
+    });
+</script>
diff --git a/app/Views/login.php b/app/Views/login.php
index ea18614aa..f84f62853 100644
--- a/app/Views/login.php
+++ b/app/Views/login.php
@@ -13,32 +13,83 @@
 use Config\Services;
 
 $request = Services::request();
+
+// Manually setting some error messages for testing
+// $validation->setError('test', 'The test error is testing.');
+// $validation->setError('email', 'The email field is required.');
+// $has_errors = $validation->hasError('email');
+// $has_errors = $validation->hasError('test');
+
+// Manually set database migration message to show
+// $is_new_install = true;
+// $is_latest = false;
+// $latest_version = '1.0.0';
+
+// Manually set language for page, doesn't work for dynamic elements
+// \Config\Services::language()->setLocale('de-DE');
+
+// Manually set login form appearence
+// $config['login_form'] = 'input_groups';
+
+// Manually set theme
+// $config['theme'] = 'flatly';
+
+$theme = (empty($config['theme']) ? 'bootstrap' : $config['theme']);
+
+$themeColors = [
+    'bootstrap'  => '#0d6efd',
+    'flatly'     => '#2c3e50',
+    'darkly'     => '#375a7f',
+    'cosmo'      => '#2780e3',
+    'cerulean'   => '#2fa4e7',
+    'journal'    => '#eb6864',
+    'litera'     => '#4582ec',
+    'lumen'      => '#158cba',
+    'lux'        => '#1a1a1a',
+    'materia'    => '#2196f3',
+    'minty'      => '#78c2ad',
+    'morph'      => '#378dfc',
+    'pulse'      => '#593196',
+    'quartz'     => '#6d45bb',
+    'sandstone'  => '#93c54b',
+    'simplex'    => '#d9230f',
+    'sketchy'    => '#333333',
+    'slate'      => '#3a3f44',
+    'solar'      => '#b58900',
+    'spacelab'   => '#446e9b',
+    'superhero'  => '#df6919',
+    'united'     => '#e95420',
+    'vapor'      => '#6f42c1',
+    'yeti'       => '#008cba',
+    'zephyr'     => '#3459e6',
+];
+
+$themeColor = $themeColors[$theme] ?? '#0d6efd';
+
 ?>
 
 <!doctype html>
-<html lang="<?= current_language_code() ?>">
+<html lang="<?= current_language_code() ?>" data-bs-theme="<?= esc($config['color_mode'] ?? 'light') ?>" <?= esc($config['rtl_language'] ?? 0) == 1 ? 'dir="rtl"' : '' ?>>
 
 <head>
     <meta charset="utf-8">
     <base href="<?= base_url() ?>">
     <title><?= esc($config['company']) . '&nbsp;|&nbsp;' . esc(lang('Common.software_short')) . '&nbsp;|&nbsp;' . esc(lang('Login.login')) ?></title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <?= ($config['responsive_design'] ?? 0) == 1 ? '<meta name="viewport" content="width=device-width, initial-scale=1">' : '' ?>
     <meta name="robots" content="noindex, nofollow">
     <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
-    <?php
-    $theme = (empty($config['theme'])
-        || 'paper' == $config['theme']
-        || 'readable' == $config['theme']
-        ? 'flatly'
-        : $config['theme']);
-    ?>
-    <link rel="stylesheet" href="resources/bootswatch5/<?= "$theme" ?>/bootstrap.min.css">
+    <link rel="stylesheet" href="resources/bootswatch/<?= $theme ?>/bootstrap<?= esc($config['rtl_language'] ?? 0) == 1 ? '.rtl' : '' ?>.min.css">
     <link rel="stylesheet" href="resources/bootstrap-icons/bootstrap-icons.min.css">
     <link rel="stylesheet" href="css/login.css">
-    <meta name="theme-color" content="#2c3e50">
+    <meta name="theme-color" content="<?= $themeColor ?>">
 </head>
 
 <body class="bg-secondary-subtle d-flex flex-column">
+    <!-- BS5 WIP message -->
+    <div data-notify="container" class="col-11 col-sm-9 col-md-7 col-lg-6 col-xl-5 col-xxl-4 alert alert-warning position-absolute top-0 mt-3 start-50 translate-middle-x" role="alert">
+        <span data-notify="icon" class="me-2" role="img"><i class="bi bi-exclamation-diamond-fill"></i></span>
+        <span data-notify="message">WIP conversion to Bootstrap 5</span>
+    </div>
     <main class="d-flex justify-content-around align-items-center flex-grow-1">
         <div class="container-login container-fluid d-flex flex-column flex-md-row bg-body shadow rounded m-3 p-4 p-md-0">
             <div class="box-logo d-flex flex-column justify-content-center align-items-center border-end border-secondary-subtle px-4 pb-3 p-md-4">
@@ -55,97 +106,94 @@ $request = Services::request();
             <section class="box-login d-flex flex-column justify-content-center align-items-center p-md-4">
                 <?= form_open('login', ['id' => 'login-form']) ?>
 
-                <h3 id="form-heading" class="text-center m-0">
-                    <?php if ($isNewInstall): ?>
-                        <?= lang('Login.initialization_required') ?>
-                    <?php elseif (!$isLatest): ?>
-                        <?= lang('Login.migration_required') ?>
-                    <?php else: ?>
-                        <?= lang('Login.welcome', [lang('Common.software_short')]) ?>
-                    <?php endif; ?>
-                </h3>
+                    <h3 id="form-heading" class="text-center m-0">
+                        <?php if ($isNewInstall): ?>
+                            <?= lang('Login.initialization_required') ?>
+                        <?php elseif (!$isLatest): ?>
+                            <?= lang('Login.migration_required') ?>
+                        <?php else: ?>
+                            <?= lang('Login.welcome', [lang('Common.software_short')]) ?>
+                        <?php endif; ?>
+                    </h3>
 
-                <div id="migration-warning" class="alert alert-warning mt-3<?= ($isNewInstall || !$isLatest) ? '' : ' d-none' ?>">
-                    <strong>
+                    <div id="migration-warning" class="alert alert-info mt-3<?= ($isNewInstall || !$isLatest) ? '' : ' d-none' ?>">
                         <?php if ($isNewInstall): ?>
                             <?= lang('Login.initialization_message') ?>
                         <?php else: ?>
                             <?= lang('Login.migration_auth_message', [$latestVersion]) ?>
                         <?php endif; ?>
-                    </strong>
-                </div>
-
-                <?php if ($hasErrors): ?>
-                    <?php foreach ($validation->getErrors() as $error): ?>
-                        <div class="alert alert-danger mt-3">
-                            <?= $error ?>
-                        </div>
-                    <?php endforeach; ?>
-                <?php endif; ?>
-
-                <div id="migration-success" class="alert alert-success d-none mt-3">
-                    <strong><?= lang('Login.migration_complete') ?></strong> <?= lang('Login.migration_complete_login') ?>
-                </div>
-
-                <div id="migration-progress" class="d-none mt-4">
-                    <h3 class="text-center mb-4"><?= lang('Login.migration_initializing') ?></h3>
-                    <div class="progress mb-3" style="height: 30px;">
-                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
-                             role="progressbar"
-                             style="width: 100%">
-                        </div>
                     </div>
-                    <p class="text-center text-muted" id="migration-status">
-                        <?= lang('Login.migration_running') ?>
-                    </p>
-                </div>
 
-                <div id="migration-error" class="alert alert-danger d-none mt-3" role="alert">
-                    <strong>Error:</strong> <span id="migration-error-message"></span>
-                </div>
-
-                <div id="login-fields" class="w-100<?= $isNewInstall ? ' d-none' : '' ?>">
-                    <?php if (empty($config['login_form']) || 'floating_labels' == ($config['login_form'])): ?>
-                        <div class="form-floating mt-3">
-                            <input class="form-control" id="input-username" name="username" type="text" placeholder="<?= lang('Login.username') ?>" <?php if (ENVIRONMENT == "testing") echo 'value="admin"'; ?>>
-                            <label for="input-username"><?= lang('Login.username') ?></label>
-                        </div>
-                        <div class="form-floating mb-3">
-                            <input class="form-control" id="input-password" name="password" type="password" placeholder="<?= lang('Login.password') ?>" <?php if (ENVIRONMENT == "testing") echo 'value="pointofsale"'; ?>>
-                            <label for="input-password"><?= lang('Login.password') ?></label>
-                        </div>
-                    <?php elseif ('input_groups' == ($config['login_form'])): ?>
-                        <div class="input-group mt-3">
-                            <span class="input-group-text" id="input-username">
-                                <i class="bi bi-person" title="<?= lang('Common.icon') . '&nbsp;' . lang('Login.username') ?>"></i>
-                            </span>
-                            <input class="form-control" name="username" type="text" placeholder="<?= lang('Login.username'); ?>" aria-label="<?= lang('Login.username') ?>" aria-describedby="input-username" <?php if (ENVIRONMENT == "testing") echo 'value="admin"'; ?>>
-                        </div>
-                        <div class="input-group mb-3">
-                            <span class="input-group-text" id="input-password">
-                                <i class="bi bi-lock" title="<?= lang('Common.icon') . '&nbsp;' . lang('Login.password') ?>"></i>
-                            </span>
-                            <input class="form-control" name="password" type="password" placeholder="<?= lang('Login.password') ?>" aria-label="<?= lang('Login.password') ?>" aria-describedby="input-password" <?php if (ENVIRONMENT == "testing") echo 'value="pointofsale"'; ?>>
-                        </div>
+                    <?php if ($hasErrors): ?>
+                        <?php foreach ($validation->getErrors() as $error): ?>
+                            <div class="alert alert-danger mt-3">
+                                <?= $error ?>
+                            </div>
+                        <?php endforeach; ?>
                     <?php endif; ?>
 
-                    <?php if ($gcaptchaEnabled): ?>
-                        <script src="https://www.google.com/recaptcha/api.js"></script>
-                        <div class="g-recaptcha mb-3" style="text-align: center;" data-sitekey="<?= esc($config['gcaptcha_site_key']) ?>"></div>
-                    <?php endif; ?>
-                </div>
+                    <div id="migration-success" class="alert alert-success d-none mt-3">
+                        <strong><?= lang('Login.migration_complete') ?></strong>
+                        <?= lang('Login.migration_complete_login') ?>
+                    </div>
 
-                <div class="d-grid">
-                    <button id="submit-button" class="btn btn-lg btn-primary" name="login-button" type="submit">
-                        <?php if ($isNewInstall): ?>
-                            <?= lang('Login.initialize') ?>
-                        <?php elseif (!$isLatest): ?>
-                            <?= lang('Module.migrate') ?>
-                        <?php else: ?>
-                            <?= lang('Login.go') ?>
+                    <div id="migration-progress" class="d-none w-100">
+                        <div class="text-center fw-bold mb-3 mt-3"><?= lang('Login.migration_initializing') ?></div>
+                        <div class="progress" role="progressbar">
+                            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%"></div>
+                        </div>
+                        <p class="text-center text-muted mt-3" id="migration-status">
+                            <?= lang('Login.migration_running') ?>
+                        </p>
+                    </div>
+
+                    <div id="migration-error" class="alert alert-danger d-none mt-3" role="alert">
+                        <strong>Error:</strong> <span id="migration-error-message"></span>
+                    </div>
+
+                    <div id="login-fields" class="w-100<?= $isNewInstall ? ' d-none' : '' ?>">
+                        <?php if (empty($config['login_form']) || 'floating_labels' == ($config['login_form'])): ?>
+                            <div class="form-floating mt-3">
+                                <input class="form-control" id="input-username" name="username" type="text" placeholder="<?= lang('Login.username') ?>" <?php if (ENVIRONMENT == "testing") echo 'value="admin"'; ?>>
+                                <label for="input-username"><?= lang('Login.username') ?></label>
+                            </div>
+                            <div class="form-floating mb-3">
+                                <input class="form-control" id="input-password" name="password" type="password" placeholder="<?= lang('Login.password') ?>" <?php if (ENVIRONMENT == "testing") echo 'value="pointofsale"'; ?>>
+                                <label for="input-password"><?= lang('Login.password') ?></label>
+                            </div>
+                        <?php elseif ('input_groups' == ($config['login_form'])): ?>
+                            <div class="input-group mt-3">
+                                <span class="input-group-text" id="input-username">
+                                    <i class="bi bi-person" title="<?= lang('Common.icon') . '&nbsp;' . lang('Login.username') ?>"></i>
+                                </span>
+                                <input class="form-control" name="username" type="text" placeholder="<?= lang('Login.username'); ?>" aria-label="<?= lang('Login.username') ?>" aria-describedby="input-username" <?php if (ENVIRONMENT == "testing") echo 'value="admin"'; ?>>
+                            </div>
+                            <div class="input-group mb-3">
+                                <span class="input-group-text" id="input-password">
+                                    <i class="bi bi-lock" title="<?= lang('Common.icon') . '&nbsp;' . lang('Login.password') ?>"></i>
+                                </span>
+                                <input class="form-control" name="password" type="password" placeholder="<?= lang('Login.password') ?>" aria-label="<?= lang('Login.password') ?>" aria-describedby="input-password" <?php if (ENVIRONMENT == "testing") echo 'value="pointofsale"'; ?>>
+                            </div>
                         <?php endif; ?>
-                    </button>
-                </div>
+
+                        <?php if ($gcaptchaEnabled): ?>
+                            <script src="https://www.google.com/recaptcha/api.js"></script>
+                            <div class="g-recaptcha mb-3" style="text-align: center;" data-sitekey="<?= esc($config['gcaptcha_site_key'] ?? '') ?>"></div>
+                        <?php endif; ?>
+                    </div>
+
+                    <div class="d-grid">
+                        <button type="submit" id="submit-button" class="btn btn-lg btn-primary" name="login-button">
+                            <?php if ($isNewInstall): ?>
+                                <?= lang('Login.initialize') ?>
+                            <?php elseif (!$isLatest): ?>
+                                <?= lang('Module.migrate') ?>
+                            <?php else: ?>
+                                <?= lang('Login.go') ?>
+                            <?php endif; ?>
+                        </button>
+                    </div>
+
                 <?= form_close() ?>
             </section>
         </div>
diff --git a/app/Views/messages/form_sms.php b/app/Views/messages/form_sms.php
index 04270ba1c..bc1694b78 100644
--- a/app/Views/messages/form_sms.php
+++ b/app/Views/messages/form_sms.php
@@ -6,44 +6,34 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("messages/send_form/$person_info->person_id", ['id' => 'send_sms_form']) ?>
 
-<?= form_open("messages/send_form/$person_info->person_id", ['id' => 'send_sms_form', 'class' => 'form-horizontal']) ?>
-    <fieldset>
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Messages.first_name'), 'first_name_label', ['for' => 'first_name', 'class' => 'control-label col-xs-2']) ?>
-            <div class="col-xs-10">
-                <?= form_input(['class' => 'form-control input-sm', 'type' => 'text', 'name' => 'first_name', 'value' => $person_info->first_name, 'readonly' => 'true']) ?>
-            </div>
-        </div>
+    <label for="first_name" class="form-label"><?= lang('Messages.first_name'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="first_name-icon"><i class="bi bi-person-square"></i></span>
+        <input type="text" class="form-control" name="first_name" id="first_name" aria-describedby="first_name-icon" value="<?= $person_info->first_name; ?>" disabled readonly>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Messages.last_name'), 'last_name_label', ['for' => 'last_name', 'class' => 'control-label col-xs-2']) ?>
-            <div class="col-xs-10">
-                <?= form_input(['class' => 'form-control input-sm', 'type' => 'text', 'name' => 'last_name', 'value' => $person_info->last_name, 'readonly' => 'true']) ?>
-            </div>
-        </div>
+    <label for="last_name" class="form-label"><?= lang('Messages.last_name'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="last_name-icon"><i class="bi bi-person-square"></i></span>
+        <input type="text" class="form-control" name="last_name" id="last_name" aria-describedby="last_name-icon" value="<?= $person_info->last_name; ?>" disabled readonly>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Messages.phone'), 'phone_label', ['for' => 'phone', 'class' => 'control-label col-xs-2 required']) ?>
-            <div class="col-xs-10">
-                <div class="input-group">
-                    <span class="input-group-addon input-sm"><i class="bi bi-telephone"></i></span>
-                    <?= form_input(['class' => 'form-control input-sm required', 'type' => 'text', 'name' => 'phone', 'value' => $person_info->phone_number]) ?>
-                </div>
-            </div>
-        </div>
+    <label for="phone" class="form-label"><?= lang('Messages.phone'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="phone-icon"><i class="bi bi-telephone"></i></span>
+        <input type="text" class="form-control" name="phone" id="phone" aria-describedby="phone-icon" value="<?= $person_info->phone_number; ?>">
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Messages.message'), 'message_label', ['for' => 'message', 'class' => 'control-label col-xs-2 required']) ?>
-            <div class="col-xs-10">
-                <?= form_textarea(['class' => 'form-control input-sm required', 'name' => 'message', 'id' => 'message', 'value' => $config['msg_msg']]) ?>
-            </div>
-        </div>
+    <label for="message" class="form-label"><?= lang('Messages.message'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="message-icon"><i class="bi bi-chat-dots"></i></span>
+        <textarea class="form-control" name="message" id="message" rows="10" aria-describedby="message-icon"><?= $config['msg_msg'] ?></textarea>
+    </div>
 
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">
diff --git a/app/Views/messages/sms.php b/app/Views/messages/sms.php
index ab330111c..8943ed929 100644
--- a/app/Views/messages/sms.php
+++ b/app/Views/messages/sms.php
@@ -1,39 +1,34 @@
 <?= view('partial/header') ?>
 
-<script type="text/javascript">
-    dialog_support.init("a.modal-dlg");
-</script>
+<?= form_open("messages/send/", ['id' => 'send_sms_form', 'enctype' => 'multipart/form-data', 'method' => 'post']) ?>
 
-<div class="jumbotron" style="max-width: 60%; margin: auto;">
-    <?= form_open("messages/send/", ['id' => 'send_sms_form', 'enctype' => 'multipart/form-data', 'method' => 'post', 'class' => 'form-horizontal']) ?>
-        <fieldset>
+    <?php
+    $title_info['config_title'] = lang('Messages.sms_send');
+    echo view('configs/config_header', $title_info);
+    ?>
 
-            <legend style="text-align: center;"><?= lang('Messages.sms_send') ?></legend>
-            <div class="form-group form-group-sm">
-                <label for="phone" class="col-xs-3 control-label"><?= lang('Messages.phone') ?></label>
-                <div class="col-xs-9">
-                    <input class="form-control input-sm" type="text" name="phone" placeholder="<?= lang('Messages.phone_placeholder') ?>">
-                    <span class="help-block" style="text-align: center;"><?= lang('Messages.multiple_phones') ?></span>
-                </div>
-            </div>
+    <div class="col mb-3">
+        <label for="message-recipients" class="form-label"><?= lang('Messages.phone'); ?></label>
+        <div class="input-group">
+            <span class="input-group-text" id="message-icon"><i class="bi bi-phone"></i></span>
+            <input type="text" name="phone" class="form-control" id="message-recipients" aria-describedby="message-icon" required placeholder="<?= lang('Messages.phone_placeholder'); ?>">
+        </div>
+        <span class="form-text"><?= lang('Messages.multiple_phones'); ?></span>
+    </div>
 
-            <div class="form-group form-group-sm">
-                <label for="message" class="col-xs-3 control-label"><?= lang('Messages.message') ?></label>
-                <div class="col-xs-9">
-                    <textarea class="form-control input-sm" rows="3" id="message" name="message" placeholder="<?= lang('Messages.message_placeholder') ?>"></textarea>
-                </div>
-            </div>
+    <div class="col mb-3">
+        <label for="text-message" class="form-label"><?= lang('Messages.message'); ?></label>
+        <div class="input-group">
+            <span class="input-group-text"><i class="bi bi-chat-quote"></i></span>
+            <textarea class="form-control" name="message" id="text-message" rows="10" placeholder="<?= lang('Messages.message_placeholder'); ?>"></textarea>
+        </div>
+    </div>
 
-            <?= form_submit([
-                'name'  => 'submit_form',
-                'id'    => 'submit_form',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" id="submit_form" name="submit_form">Send</button>
+    </div>
 
-        </fieldset>
-    <?= form_close() ?>
-</div>
+<?= form_close() ?>
 
 <?= view('partial/footer') ?>
 
@@ -45,6 +40,7 @@
                 $(form).ajaxSubmit({
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
diff --git a/app/Views/partial/customer_rewards.php b/app/Views/partial/customer_rewards.php
index 677752769..ac76bdba9 100644
--- a/app/Views/partial/customer_rewards.php
+++ b/app/Views/partial/customer_rewards.php
@@ -4,6 +4,10 @@
  */
 ?>
 
+<span class="d-flex justify-content-start add_customer_reward">
+    <button type="button" class="btn btn-outline-success mb-3"><i class="bi bi-plus-lg"></i>&nbsp;Add reward</button> <!-- TODO-BS5 translate -->
+</span>
+
 <?php
 $i = 0;
 
@@ -14,33 +18,14 @@ foreach ($customer_rewards as $reward_key => $reward_category) {
     ++$i;
 ?>
 
-    <div class="form-group form-group-sm" style="<?= $reward_category['deleted'] ? 'display: none;' : 'display: block;' ?>">
-        <?= form_label(lang('Config.customer_reward') . " $i", "customer_reward_$i", ['class' => 'required control-label col-xs-2']) ?>
-        <div class="col-xs-2">
-            <?php $form_data = [
-                'name'  => 'customer_reward_' . $customer_reward_id,
-                'id'    => 'customer_reward_' . $customer_reward_id,
-                'class' => 'customer_reward valid_chars form-control input-sm required',
-                'value' => $customer_reward_name
-            ];
-            $reward_category['deleted'] && $form_data['disabled'] = 'disabled';
-            echo form_input($form_data);
-            ?>
+    <div class="col-12 col-lg-6 <?= $reward_category['deleted'] ? 'd-none' : '' ?>">
+        <label for="customer_reward_<?= $i ?>" class="form-label"><?= lang('Config.customer_reward') . " $i"; ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text"><?= $customer_reward_id ?>.</span>
+            <input type="text" class="form-control customer_reward valid_chars w-25" name="customer_reward_<?= $customer_reward_id ?>" id="customer_reward_<?= $customer_reward_id ?>" value="<?= $customer_reward_name ?>" required <?= $reward_category['deleted'] ? 'disabled' : '' ?>>
+            <input type="number" min="0" class="form-control customer_reward valid_chars" name="reward_points_<?= $customer_reward_id ?>" id="reward_points_<?= $customer_reward_id ?>" value="<?= $customer_points_percent ?>" required <?= $reward_category['deleted'] ? 'disabled' : '' ?>>
+            <button type="button" class="btn btn-outline-danger remove_customer_reward"><i class="bi bi-x-lg"></i></button>
         </div>
-        <div class="col-xs-2">
-            <?php $form_data = [
-                'name'  => 'reward_points_' . $customer_reward_id,
-                'id'    => 'reward_points_' . $customer_reward_id,
-                'class' => 'customer_reward valid_chars form-control input-sm required',
-                'value' => $customer_points_percent
-            ];
-            $reward_category['deleted'] && $form_data['disabled'] = 'disabled';
-            echo form_input($form_data);
-            ?>
-        </div>
-        <span class="add_customer_reward bi bi-plus-circle" style="padding-top: 0.5em; display: inline-block; cursor: pointer;"></span>
-        <span>&nbsp;&nbsp;</span>
-        <span class="remove_customer_reward bi bi-dash-circle" style="padding-top: 0.5em; display: inline-block; cursor: pointer;"></span>
     </div>
 
 <?php } ?>
diff --git a/app/Views/partial/daterangepicker.php b/app/Views/partial/daterangepicker.php
index d91e79722..a6bf23534 100644
--- a/app/Views/partial/daterangepicker.php
+++ b/app/Views/partial/daterangepicker.php
@@ -5,206 +5,209 @@
 ?>
 
 <?php if (empty($config['date_or_time_format'])) { ?>
-    $('#daterangepicker').css("width", "180");
     var start_date = "<?= date('Y-m-d') ?>";
     var end_date = "<?= date('Y-m-d') ?>";
 
     $('#daterangepicker').daterangepicker({
-    "ranges": {
-    "<?= lang('Datepicker.today') ?>": [
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d"), date("Y"))) ?>",
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") + 1, date("Y")) - 1) ?>"
-    ],
-    "<?= lang('Datepicker.today_last_year') ?>": [
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d"), date("Y") - 1)) ?>",
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") + 1, date("Y") - 1) - 1) ?>"
-    ],
-    "<?= lang('Datepicker.yesterday') ?>": [
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") - 1, date("Y"))) ?>",
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d"), date("Y")) - 1) ?>"
-    ],
-    "<?= lang('Datepicker.last_7') ?>": [
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") - 6, date("Y"))) ?>",
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") + 1, date("Y")) - 1) ?>"
-    ],
-    "<?= lang('Datepicker.last_30') ?>": [
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") - 29, date("Y"))) ?>",
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") + 1, date("Y")) - 1) ?>"
-    ],
-    "<?= lang('Datepicker.this_month') ?>": [
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), 1, date("Y"))) ?>",
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m") + 1, 1, date("Y")) - 1) ?>"
-    ],
-    "<?= lang('Datepicker.same_month_to_same_day_last_year') ?>": [
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), 1, date("Y") - 1)) ?>",
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") + 1, date("Y") - 1) - 1) ?>"
-    ],
-    "<?= lang('Datepicker.same_month_last_year') ?>": [
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), 1, date("Y") - 1)) ?>",
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m") + 1, 1, date("Y") - 1) - 1) ?>"
-    ],
-    "<?= lang('Datepicker.last_month') ?>": [
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m") - 1, 1, date("Y"))) ?>",
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), 1, date("Y")) - 1) ?>"
-    ],
-    "<?= lang('Datepicker.this_year') ?>": [
-    "<?= date($config['dateformat'], mktime(0, 0, 0, 1, 1, date("Y"))) ?>",
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), 1, date("Y") + 1) - 1) ?>"
-    ],
-    "<?= lang('Datepicker.last_year') ?>": [
-    "<?= date($config['dateformat'], mktime(0, 0, 0, 1, 1, date("Y") - 1)) ?>",
-    "<?= date($config['dateformat'], mktime(0, 0, 0, 1, 1, date("Y")) - 1) ?>"
-    ],
-    "<?= lang('Datepicker.this_financial_year') ?>": [
-    "<?= date($config['dateformat'], mktime(0, 0, 0, $config['financial_year'], 1, date("Y"))) ?>",
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), 1, date("Y") + 1) - 1) ?>"
-    ],
-    "<?= lang('Datepicker.last_financial_year') ?>": [
-    "<?= date($config['dateformat'], mktime(0, 0, 0, $config['financial_year'], 1, date("Y") - 1)) ?>",
-    "<?= date($config['dateformat'], mktime(0, 0, 0, $config['financial_year'], 1, date("Y")) - 1) ?>"
-    ],
-    "<?= lang('Datepicker.all_time') ?>": [
-    "<?= date($config['dateformat'], mktime(0, 0, 0, 1, 1, 2010)) ?>",
-    "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") + 1, date("Y")) - 1) ?>"
-    ],
+        "ranges": {
+            "<?= lang('Datepicker.today') ?>": [
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d"), date("Y"))) ?>",
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") + 1, date("Y")) - 1) ?>"
+            ],
+            "<?= lang('Datepicker.today_last_year') ?>": [
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d"), date("Y") - 1)) ?>",
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") + 1, date("Y") - 1) - 1) ?>"
+            ],
+            "<?= lang('Datepicker.yesterday') ?>": [
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") - 1, date("Y"))) ?>",
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d"), date("Y")) - 1) ?>"
+            ],
+            "<?= lang('Datepicker.last_7') ?>": [
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") - 6, date("Y"))) ?>",
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") + 1, date("Y")) - 1) ?>"
+            ],
+            "<?= lang('Datepicker.last_30') ?>": [
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") - 29, date("Y"))) ?>",
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") + 1, date("Y")) - 1) ?>"
+            ],
+            "<?= lang('Datepicker.this_month') ?>": [
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), 1, date("Y"))) ?>",
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m") + 1, 1, date("Y")) - 1) ?>"
+            ],
+            "<?= lang('Datepicker.same_month_to_same_day_last_year') ?>": [
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), 1, date("Y") - 1)) ?>",
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") + 1, date("Y") - 1) - 1) ?>"
+            ],
+            "<?= lang('Datepicker.same_month_last_year') ?>": [
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), 1, date("Y") - 1)) ?>",
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m") + 1, 1, date("Y") - 1) - 1) ?>"
+            ],
+            "<?= lang('Datepicker.last_month') ?>": [
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m") - 1, 1, date("Y"))) ?>",
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), 1, date("Y")) - 1) ?>"
+            ],
+            "<?= lang('Datepicker.this_year') ?>": [
+                "<?= date($config['dateformat'], mktime(0, 0, 0, 1, 1, date("Y"))) ?>",
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), 1, date("Y") + 1) - 1) ?>"
+            ],
+            "<?= lang('Datepicker.last_year') ?>": [
+                "<?= date($config['dateformat'], mktime(0, 0, 0, 1, 1, date("Y") - 1)) ?>",
+                "<?= date($config['dateformat'], mktime(0, 0, 0, 1, 1, date("Y")) - 1) ?>"
+            ],
+            "<?= lang('Datepicker.this_financial_year') ?>": [
+                "<?= date($config['dateformat'], mktime(0, 0, 0, $config['financial_year'], 1, date("Y"))) ?>",
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), 1, date("Y") + 1) - 1) ?>"
+            ],
+            "<?= lang('Datepicker.last_financial_year') ?>": [
+                "<?= date($config['dateformat'], mktime(0, 0, 0, $config['financial_year'], 1, date("Y") - 1)) ?>",
+                "<?= date($config['dateformat'], mktime(0, 0, 0, $config['financial_year'], 1, date("Y")) - 1) ?>"
+            ],
+            "<?= lang('Datepicker.all_time') ?>": [
+                "<?= date($config['dateformat'], mktime(0, 0, 0, 1, 1, 2010)) ?>",
+                "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") + 1, date("Y")) - 1) ?>"
+            ],
+        },
+        "locale": {
+            "format": '<?= dateformat_momentjs($config['dateformat']) ?>',
+            "separator": " - ",
+            "applyLabel": "<?= lang('Datepicker.apply') ?>",
+            "cancelLabel": "<?= lang('Datepicker.cancel') ?>",
+            "fromLabel": "<?= lang('Datepicker.from') ?>",
+            "toLabel": "<?= lang('Datepicker.to') ?>",
+            "customRangeLabel": "<?= lang('Datepicker.custom') ?>",
+            "daysOfWeek": [
+                "<?= lang('Calendar.su') ?>",
+                "<?= lang('Calendar.mo') ?>",
+                "<?= lang('Calendar.tu') ?>",
+                "<?= lang('Calendar.we') ?>",
+                "<?= lang('Calendar.th') ?>",
+                "<?= lang('Calendar.fr') ?>",
+                "<?= lang('Calendar.sa') ?>"
+            ],
+            "monthNames": [
+                "<?= lang('Calendar.january') ?>",
+                "<?= lang('Calendar.february') ?>",
+                "<?= lang('Calendar.march') ?>",
+                "<?= lang('Calendar.april') ?>",
+                "<?= lang('Calendar.may') ?>",
+                "<?= lang('Calendar.june') ?>",
+                "<?= lang('Calendar.july') ?>",
+                "<?= lang('Calendar.august') ?>",
+                "<?= lang('Calendar.september') ?>",
+                "<?= lang('Calendar.october') ?>",
+                "<?= lang('Calendar.november') ?>",
+                "<?= lang('Calendar.december') ?>"
+            ],
+            "firstDay": <?= lang('Datepicker.weekstart') ?>
+        },
+        "alwaysShowCalendars": true,
+        "startDate": "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") + 1, date("Y")) - 1) ?>",
+        "endDate": "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") + 1, date("Y")) - 1) ?>",
+        "minDate": "<?= date($config['dateformat'], mktime(0, 0, 0, 01, 01, 2010)) ?>",
+        "maxDate": "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") + 1, date("Y")) - 1) ?>",
+        "buttonClasses": "btn",
+        "applyButtonClasses": "btn-primary",
+        "cancelClass": "btn-secondary"
     },
-    "locale": {
-    "format": '<?= dateformat_momentjs($config['dateformat']) ?>',
-    "separator": " - ",
-    "applyLabel": "<?= lang('Datepicker.apply') ?>",
-    "cancelLabel": "<?= lang('Datepicker.cancel') ?>",
-    "fromLabel": "<?= lang('Datepicker.from') ?>",
-    "toLabel": "<?= lang('Datepicker.to') ?>",
-    "customRangeLabel": "<?= lang('Datepicker.custom') ?>",
-    "daysOfWeek": [
-    "<?= lang('Calendar.su') ?>",
-    "<?= lang('Calendar.mo') ?>",
-    "<?= lang('Calendar.tu') ?>",
-    "<?= lang('Calendar.we') ?>",
-    "<?= lang('Calendar.th') ?>",
-    "<?= lang('Calendar.fr') ?>",
-    "<?= lang('Calendar.sa') ?>"
-    ],
-    "monthNames": [
-    "<?= lang('Calendar.january') ?>",
-    "<?= lang('Calendar.february') ?>",
-    "<?= lang('Calendar.march') ?>",
-    "<?= lang('Calendar.april') ?>",
-    "<?= lang('Calendar.may') ?>",
-    "<?= lang('Calendar.june') ?>",
-    "<?= lang('Calendar.july') ?>",
-    "<?= lang('Calendar.august') ?>",
-    "<?= lang('Calendar.september') ?>",
-    "<?= lang('Calendar.october') ?>",
-    "<?= lang('Calendar.november') ?>",
-    "<?= lang('Calendar.december') ?>"
-    ],
-    "firstDay": <?= lang('Datepicker.weekstart') ?>
-    },
-    "alwaysShowCalendars": true,
-    "startDate": "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") + 1, date("Y")) - 1) ?>",
-    "endDate": "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") + 1, date("Y")) - 1) ?>",
-    "minDate": "<?= date($config['dateformat'], mktime(0, 0, 0, 01, 01, 2010)) ?>",
-    "maxDate": "<?= date($config['dateformat'], mktime(0, 0, 0, date("m"), date("d") + 1, date("Y")) - 1) ?>"
-    }, function(start, end, label) {
-    start_date = start.format('YYYY-MM-DD');
-    end_date = end.format('YYYY-MM-DD');
+    function(start, end, label) {
+        start_date = start.format('YYYY-MM-DD');
+        end_date = end.format('YYYY-MM-DD');
     });
 <?php } else { ?>
     $('#daterangepicker').css("width", "305");
     var start_date = "<?= date('Y-m-d H:i:s', mktime(0, 0, 0, date("m"), date("d"), date("Y"))) ?>";
     var end_date = "<?= date('Y-m-d H:i:s', mktime(23, 59, 59, date("m"), date("d"), date("Y"))) ?>";
     $('#daterangepicker').daterangepicker({
-    "ranges": {
-    "<?= lang('Datepicker.today') ?>": [
-    "<?= date($config['dateformat'] . ' ' . $config['dateformat'], mktime(0, 0, 0, date("m"), date("d"), date("Y"))) ?>",
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d"), date("Y"))) ?>"
-    ],
-    "<?= lang('Datepicker.today_last_year') ?>": [
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, date("m"), date("d"), date("Y") - 1)) ?>",
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d"), date("Y") - 1)) ?>"
-    ],
-    "<?= lang('Datepicker.yesterday') ?>": [
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, date("m"), date("d") - 1, date("Y"))) ?>",
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d") - 1, date("Y"))) ?>"
-    ],
-    "<?= lang('Datepicker.last_7') ?>": [
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, date("m"), date("d") - 6, date("Y"))) ?>",
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d"), date("Y"))) ?>"
-    ],
-    "<?= lang('Datepicker.last_30') ?>": [
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, date("m"), date("d") - 29, date("Y"))) ?>",
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d"), date("Y"))) ?>"
-    ],
-    "<?= lang('Datepicker.this_month') ?>": [
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, date("m"), 1, date("Y"))) ?>",
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d"), date("Y"))) ?>"
-    ],
-    "<?= lang('Datepicker.same_month_to_same_day_last_year') ?>": [
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, date("m"), 1, date("Y") - 1)) ?>",
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d"), date("Y") - 1)) ?>"
-    ],
-    "<?= lang('Datepicker.same_month_last_year') ?>": [
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, date("m"), 1, date("Y") - 1)) ?>",
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m") + 1, 0, date("Y") - 1)) ?>"
-    ],
-    "<?= lang('Datepicker.last_month') ?>": [
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, date("m") - 1, 1, date("Y"))) ?>",
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), 0, date("Y"))) ?>"
-    ],
-    "<?= lang('Datepicker.this_year') ?>": [
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, 1, 1, date("Y"))) ?>",
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m") + 1, 0, date("Y"))) ?>"
-    ],
-    "<?= lang('Datepicker.last_year') ?>": [
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, 1, 1, date("Y") - 1)) ?>",
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, 12, 31, date("Y") - 1)) ?>"
-    ],
-    "<?= lang('Datepicker.this_financial_year') ?>": [
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, $config['financial_year'], 1, date("Y"))) ?>",
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m") + 1, 0, date("Y"))) ?>"
-    ],
-    "<?= lang('Datepicker.last_financial_year') ?>": [
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, $config['financial_year'], 1, date("Y") - 1)) ?>",
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, $config['financial_year'], 0, date("Y"))) ?>"
-    ],
-    "<?= lang('Datepicker.all_time') ?>": [
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, 1, 1, 2010)) ?>",
-    "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d"), date("Y"))) ?>"
-    ],
+        "ranges": {
+            "<?= lang('Datepicker.today') ?>": [
+            "<?= date($config['dateformat'] . ' ' . $config['dateformat'], mktime(0, 0, 0, date("m"), date("d"), date("Y"))) ?>",
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d"), date("Y"))) ?>"
+        ],
+        "<?= lang('Datepicker.today_last_year') ?>": [
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, date("m"), date("d"), date("Y") - 1)) ?>",
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d"), date("Y") - 1)) ?>"
+        ],
+        "<?= lang('Datepicker.yesterday') ?>": [
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, date("m"), date("d") - 1, date("Y"))) ?>",
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d") - 1, date("Y"))) ?>"
+        ],
+        "<?= lang('Datepicker.last_7') ?>": [
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, date("m"), date("d") - 6, date("Y"))) ?>",
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d"), date("Y"))) ?>"
+        ],
+        "<?= lang('Datepicker.last_30') ?>": [
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, date("m"), date("d") - 29, date("Y"))) ?>",
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d"), date("Y"))) ?>"
+        ],
+        "<?= lang('Datepicker.this_month') ?>": [
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, date("m"), 1, date("Y"))) ?>",
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d"), date("Y"))) ?>"
+        ],
+        "<?= lang('Datepicker.same_month_to_same_day_last_year') ?>": [
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, date("m"), 1, date("Y") - 1)) ?>",
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d"), date("Y") - 1)) ?>"
+        ],
+        "<?= lang('Datepicker.same_month_last_year') ?>": [
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, date("m"), 1, date("Y") - 1)) ?>",
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m") + 1, 0, date("Y") - 1)) ?>"
+        ],
+        "<?= lang('Datepicker.last_month') ?>": [
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, date("m") - 1, 1, date("Y"))) ?>",
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), 0, date("Y"))) ?>"
+        ],
+        "<?= lang('Datepicker.this_year') ?>": [
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, 1, 1, date("Y"))) ?>",
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m") + 1, 0, date("Y"))) ?>"
+        ],
+        "<?= lang('Datepicker.last_year') ?>": [
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, 1, 1, date("Y") - 1)) ?>",
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, 12, 31, date("Y") - 1)) ?>"
+        ],
+        "<?= lang('Datepicker.this_financial_year') ?>": [
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, $config['financial_year'], 1, date("Y"))) ?>",
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m") + 1, 0, date("Y"))) ?>"
+        ],
+        "<?= lang('Datepicker.last_financial_year') ?>": [
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, $config['financial_year'], 1, date("Y") - 1)) ?>",
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, $config['financial_year'], 0, date("Y"))) ?>"
+        ],
+        "<?= lang('Datepicker.all_time') ?>": [
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, 1, 1, 2010)) ?>",
+            "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d"), date("Y"))) ?>"
+        ],
     },
     "locale": {
-    "format": '<?= dateformat_momentjs($config['dateformat'] . ' ' . $config['timeformat']) ?>',
-    "separator": " - ",
-    "applyLabel": "<?= lang('Datepicker.apply') ?>",
-    "cancelLabel": "<?= lang('Datepicker.cancel') ?>",
-    "fromLabel": "<?= lang('Datepicker.from') ?>",
-    "toLabel": "<?= lang('Datepicker.to') ?>",
-    "customRangeLabel": "<?= lang('Datepicker.custom') ?>",
-    "daysOfWeek": [
-    "<?= lang('Calendar.su') ?>",
-    "<?= lang('Calendar.mo') ?>",
-    "<?= lang('Calendar.tu') ?>",
-    "<?= lang('Calendar.we') ?>",
-    "<?= lang('Calendar.th') ?>",
-    "<?= lang('Calendar.fr') ?>",
-    "<?= lang('Calendar.sa') ?>"
-    ],
-    "monthNames": [
-    "<?= lang('Calendar.january') ?>",
-    "<?= lang('Calendar.february') ?>",
-    "<?= lang('Calendar.march') ?>",
-    "<?= lang('Calendar.april') ?>",
-    "<?= lang('Calendar.may') ?>",
-    "<?= lang('Calendar.june') ?>",
-    "<?= lang('Calendar.july') ?>",
-    "<?= lang('Calendar.august') ?>",
-    "<?= lang('Calendar.september') ?>",
-    "<?= lang('Calendar.october') ?>",
-    "<?= lang('Calendar.november') ?>",
-    "<?= lang('Calendar.december') ?>"
-    ],
-    "firstDay": <?= lang('Datepicker.weekstart') ?>
+        "format": '<?= dateformat_momentjs($config['dateformat'] . ' ' . $config['timeformat']) ?>',
+        "separator": " - ",
+        "applyLabel": "<?= lang('Datepicker.apply') ?>",
+        "cancelLabel": "<?= lang('Datepicker.cancel') ?>",
+        "fromLabel": "<?= lang('Datepicker.from') ?>",
+        "toLabel": "<?= lang('Datepicker.to') ?>",
+        "customRangeLabel": "<?= lang('Datepicker.custom') ?>",
+        "daysOfWeek": [
+            "<?= lang('Calendar.su') ?>",
+            "<?= lang('Calendar.mo') ?>",
+            "<?= lang('Calendar.tu') ?>",
+            "<?= lang('Calendar.we') ?>",
+            "<?= lang('Calendar.th') ?>",
+            "<?= lang('Calendar.fr') ?>",
+            "<?= lang('Calendar.sa') ?>"
+        ],
+        "monthNames": [
+            "<?= lang('Calendar.january') ?>",
+            "<?= lang('Calendar.february') ?>",
+            "<?= lang('Calendar.march') ?>",
+            "<?= lang('Calendar.april') ?>",
+            "<?= lang('Calendar.may') ?>",
+            "<?= lang('Calendar.june') ?>",
+            "<?= lang('Calendar.july') ?>",
+            "<?= lang('Calendar.august') ?>",
+            "<?= lang('Calendar.september') ?>",
+            "<?= lang('Calendar.october') ?>",
+            "<?= lang('Calendar.november') ?>",
+            "<?= lang('Calendar.december') ?>"
+        ],
+        "firstDay": <?= lang('Datepicker.weekstart') ?>
     },
     "timePicker": true,
     "timePickerSeconds": true,
@@ -212,9 +215,13 @@
     "startDate": "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, date("m"), date("d"), date("Y"))) ?>",
     "endDate": "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d"), date("Y"))) ?>",
     "minDate": "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(0, 0, 0, 01, 01, 2010)) ?>",
-    "maxDate": "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d"), date("Y"))) ?>"
-    }, function(start, end, label) {
-    start_date = start.format('YYYY-MM-DD HH:mm:ss');
-    end_date = end.format('YYYY-MM-DD HH:mm:ss');
+    "maxDate": "<?= date($config['dateformat'] . ' ' . $config['timeformat'], mktime(23, 59, 59, date("m"), date("d"), date("Y"))) ?>",
+    "buttonClasses": "btn",
+    "applyButtonClasses": "btn-primary",
+    "cancelClass": "btn-secondary"
+    },
+    function(start, end, label) {
+        start_date = start.format('YYYY-MM-DD HH:mm:ss');
+        end_date = end.format('YYYY-MM-DD HH:mm:ss');
     });
 <?php } ?>
diff --git a/app/Views/partial/dinner_tables.php b/app/Views/partial/dinner_tables.php
index 949d86c1f..26f2958d3 100644
--- a/app/Views/partial/dinner_tables.php
+++ b/app/Views/partial/dinner_tables.php
@@ -4,6 +4,10 @@
  */
 ?>
 
+<span class="d-flex justify-content-start add_dinner_table">
+    <button type="button" class="btn btn-outline-success mb-3"><i class="bi bi-plus-lg"></i>&nbsp;Add table</button> <!-- TODO-BS5 translate -->
+</span>
+
 <?php
 $i = 0;
 
@@ -13,24 +17,13 @@ foreach ($dinner_tables as $table_key => $table) {
     ++$i;
 ?>
 
-    <div class="form-group form-group-sm" style="<?= $table['deleted'] ? 'display: none;' : 'display: block;' ?>">
-        <?= form_label(lang('Config.dinner_table') . " $i", "dinner_table_$i", ['class' => 'required control-label col-xs-2']) ?>
-
-
-        <div class="col-xs-2">
-            <?php $form_data = [
-                'name'  => "dinner_table_$dinner_table_id",
-                'id'    => "dinner_table_$dinner_table_id",
-                'class' => 'dinner_table valid_chars form-control input-sm required',
-                'value' => $dinner_table_name
-            ];
-            $table['deleted'] && $form_data['disabled'] = 'disabled';
-            echo form_input($form_data);
-            ?>
+    <div class="col-12 col-lg-6 <?= $table['deleted'] ? 'd-none' : '' ?>">
+        <label for="dinner_table_<?= $dinner_table_id ?>" class="form-label"><?= lang('Config.dinner_table') . " $i"; ?></label>
+        <div class="input-group mb-3">
+            <span class="input-group-text"><?= $dinner_table_id ?>.</span>
+            <input type="text" class="form-control dinner_table valid_chars" name="dinner_table_<?= $dinner_table_id ?>" id="dinner_table_<?= $dinner_table_id ?>" value="<?= $dinner_table_name ?>" required <?= $table['deleted'] && $form_data['disabled'] = 'disabled' ?>>
+            <button type="button" class="btn btn-outline-danger remove_dinner_table"><i class="bi bi-x-lg"></i></button>
         </div>
-        <span class="add_dinner_table bi bi-plus-circle" style="padding-top: 0.5em; display: inline-block; cursor: pointer;"></span>
-        <span>&nbsp;&nbsp;</span>
-        <span class="remove_dinner_table bi bi-dash-circle" style="padding-top: 0.5em; display: inline-block; cursor: pointer;"></span>
     </div>
 
 <?php } ?>
diff --git a/app/Views/partial/footer.php b/app/Views/partial/footer.php
index ed1caa7e5..7828fce86 100644
--- a/app/Views/partial/footer.php
+++ b/app/Views/partial/footer.php
@@ -4,20 +4,27 @@ use Config\OSPOS;
 
 ?>
 
-            </div>
-        </div>
+    </main>
 
-        <div id="footer">
-            <div class="jumbotron push-spaces">
-                <strong>
-                    <?= lang('Common.copyrights', [date('Y')]) ?> ·
-                    <a href="https://opensourcepos.org" target="_blank"><?= lang('Common.website') ?></a> ·
-                    <?= esc(config('App')->application_version) ?> -
-                    <a target="_blank" href="https://github.com/opensourcepos/opensourcepos/commit/<?= esc(config(OSPOS::class)->commit_sha1) ?>">
-                        <?= esc(substr(config(OSPOS::class)->commit_sha1, 0, 6)); ?>
-                    </a>
-                </strong>.
+    <footer class="flex-shrink-0 text-body-secondary small fw-semibold bg-secondary-subtle py-3 d-print-none">
+        <div class="container-lg d-flex flex-wrap justify-content-center align-items-center">
+            <div>
+                <span><?= lang('Common.copyrights', [date('Y')]) ?></span>
+            </div>
+            <div>
+                <span class="d-none d-xl-block">&nbsp;·&nbsp;<a href="https://opensourcepos.org" class="text-body-secondary" target="_blank" rel="noopener"><?= lang('Common.website') ?></a>&nbsp;·&nbsp;</span>
+                <span class="d-xl-none">&nbsp;·&nbsp;<?= lang('Common.website') ?>&nbsp;·&nbsp;</span>
+            </div>
+            <div>
+                <span><?= esc(config('App')->application_version) ?>&nbsp;-</span>
+                <span class="d-none d-xl-inline"><a href="https://github.com/opensourcepos/opensourcepos/commit/<?= esc(config(OSPOS::class)->commit_sha1) ?>" class="text-body-secondary" target="_blank" rel="noopener"><?= esc(substr(config(OSPOS::class)->commit_sha1, 0, 6)); ?></a></span>
+                <span class="d-xl-none"><?= esc(substr(config(OSPOS::class)->commit_sha1, 0, 6)); ?></span>
             </div>
         </div>
-    </body>
+    </footer>
+
+    <script type="text/javascript" src="js/bs-tooltips.js"></script>
+    <script type="text/javascript" src="js/bs-modal_switch_content.js"></script>
+</body>
+
 </html>
diff --git a/app/Views/partial/header.php b/app/Views/partial/header.php
index 3af784554..254b2b58d 100644
--- a/app/Views/partial/header.php
+++ b/app/Views/partial/header.php
@@ -9,20 +9,56 @@
 use Config\Services;
 
 $request = Services::request();
+
+// Services::language()->setLocale('de-DE');
+
+$theme = (empty($config['theme']) ? 'bootstrap' : $config['theme']);
+
+$themeColors = [
+    'bootstrap'  => '#0d6efd',
+    'flatly'     => '#2c3e50',
+    'darkly'     => '#375a7f',
+    'cosmo'      => '#2780e3',
+    'cerulean'   => '#2fa4e7',
+    'journal'    => '#eb6864',
+    'litera'     => '#4582ec',
+    'lumen'      => '#158cba',
+    'lux'        => '#1a1a1a',
+    'materia'    => '#2196f3',
+    'minty'      => '#78c2ad',
+    'morph'      => '#378dfc',
+    'pulse'      => '#593196',
+    'quartz'     => '#6d45bb',
+    'sandstone'  => '#93c54b',
+    'simplex'    => '#d9230f',
+    'sketchy'    => '#333333',
+    'slate'      => '#3a3f44',
+    'solar'      => '#b58900',
+    'spacelab'   => '#446e9b',
+    'superhero'  => '#df6919',
+    'united'     => '#e95420',
+    'vapor'      => '#6f42c1',
+    'yeti'       => '#008cba',
+    'zephyr'     => '#3459e6',
+];
+
+$themeColor = $themeColors[$theme] ?? '#0d6efd';
+
 ?>
 
 <!doctype html>
-<html lang="<?= current_language_code() ?>">
+<html lang="<?= current_language_code() ?>" data-bs-theme="<?= $config['color_mode'] ?>" <?= $config['rtl_language'] == 1 ? 'dir="rtl"' : '' ?>>
 
 <head>
     <meta charset="utf-8">
     <base href="<?= base_url() ?>">
     <title><?= esc($config['company']) . ' | ' . lang('Common.powered_by') . ' OSPOS ' . esc(config('App')->application_version) ?></title>
+    <?= $config['responsive_design'] == 1 ? '<meta name="viewport" content="width=device-width, initial-scale=1">' : '' ?>
     <meta name="robots" content="noindex, nofollow">
     <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
-    <?php $theme = (empty($config['theme']) ? 'flatly' : esc($config['theme'])); ?>
-    <link rel="stylesheet" href="resources/bootswatch/<?= "$theme" ?>/bootstrap.min.css">
+    <link rel="stylesheet" href="resources/bootswatch/<?= $theme ?>/bootstrap<?= esc($config['rtl_language']) == 1 ? '.rtl' : '' ?>.min.css">
     <link rel="stylesheet" href="resources/bootstrap-icons/bootstrap-icons.min.css">
+    <meta name="theme-color" content="<?= $themeColor ?>">
 
     <?php if (ENVIRONMENT == 'development' || get_cookie('debug') == 'true' || $request->getGet('debug') == 'true') : ?>
         <!-- inject:debug:css -->
@@ -30,13 +66,8 @@ $request = Services::request();
         <!-- inject:debug:js -->
         <!-- endinject -->
     <?php else : ?>
-        <!--inject:prod:css -->
+        <!-- inject:prod:css -->
         <!-- endinject -->
-
-        <!-- Tweaks to the UI for a particular theme should drop here  -->
-        <?php if ($config['theme'] != 'flatly' && file_exists($_SERVER['DOCUMENT_ROOT'] . '/public/css/' . esc($config['theme']) . '.css')) { ?>
-            <link rel="stylesheet" href="<?= 'css/' . esc($config['theme']) . '.css' ?>">
-        <?php } ?>
         <!-- inject:prod:js -->
         <!-- endinject -->
     <?php endif; ?>
@@ -44,60 +75,51 @@ $request = Services::request();
     <?= view('partial/header_js') ?>
     <?= view('partial/lang_lines') ?>
 
-    <style>
-        html {
-            overflow: auto;
-        }
-    </style>
 </head>
 
-<body>
-    <div class="wrapper">
-        <div class="topbar">
-            <div class="container">
-                <div class="navbar-left">
-                    <div id="liveclock"><?= date($config['dateformat'] . ' ' . $config['timeformat']) ?></div>
-                </div>
-
-                <div class="navbar-right" style="margin: 0;">
-                    <?= anchor("home/changePassword/$user_info->person_id", "$user_info->first_name $user_info->last_name", ['class' => 'modal-dlg', 'data-btn-submit' => lang('Common.submit'), 'title' => lang('Employees.change_password')]) ?>
-                    <span>&nbsp;|&nbsp;</span>
-                    <?= anchor('home/logout', lang('Login.logout')) ?>
-                </div>
-
-                <div class="navbar-center" style="text-align: center;">
-                    <strong><?= esc($config['company']) ?></strong>
-                </div>
+<body class="d-flex flex-column">
+    <header class="flex-shrink-0 small bg-secondary-subtle py-1 d-print-none">
+        <div class="container-lg container-navbar d-flex flex-wrap-reverse justify-content-between align-items-center">
+            <div class="flex-grow-1 d-none d-md-block ps-md-3 ps-lg-0">
+                <span id="liveclock"><?= date($config['dateformat'] . ' ' . $config['timeformat']) ?></span>
+            </div>
+            <div class="fw-bold ps-3 ps-md-0">
+                <?= esc($config['company']) ?>
+            </div>
+            <div class="flex-grow-1 text-end pe-3 pe-lg-0">
+                <button type="button" class="btn btn-sm btn-outline-primary" onclick="removeAnimationBg()" data-bs-toggle="modal" data-bs-target="#profile-modal" title="<?= lang('Employees.change_password'); ?>">
+                    <?= $user_info->first_name . '&nbsp;' . $user_info->last_name; ?>
+                </button>
+                <?= view('home/profile'); ?>
             </div>
         </div>
+    </header>
 
-        <div class="navbar navbar-default" role="navigation">
-            <div class="container">
-                <div class="navbar-header">
-                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
-                        <span class="sr-only">Toggle navigation</span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                    </button>
+    <nav class="navbar navbar-dark navbar-expand-lg bg-primary py-0 d-print-none">
+        <div class="container-lg container-navbar">
+            <a class="navbar-brand py-2 pe-1 ps-3 ps-lg-0 fs-4" href="<?= site_url() ?>"><i class="bi bi-house-fill"></i></a>
+            <button type="button" class="navbar-toggler my-2 mx-3" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
 
-                    <a class="navbar-brand hidden-sm" href="<?= site_url() ?>">OSPOS</a>
-                </div>
-
-                <div class="navbar-collapse collapse">
-                    <ul class="nav navbar-nav navbar-right">
-                        <?php foreach ($allowed_modules as $module): ?>
-                            <li class="<?= $module->module_id == $request->getUri()->getSegment(1) ? 'active' : '' ?>">
-                                <a href="<?= base_url($module->module_id) ?>" title="<?= lang("Module.$module->module_id") ?>" class="menu-icon">
-                                    <img src="<?= base_url("images/menubar/$module->module_id.svg") ?>" style="border: none;" alt="Module Icon"><br>
-                                    <?= lang('Module.' . $module->module_id) ?>
-                                </a>
-                            </li>
-                        <?php endforeach; ?>
-                    </ul>
-                </div>
+            <div class="collapse navbar-collapse" id="navbar">
+                <ul class="navbar-nav ms-0 ms-lg-auto">
+                    <?php foreach($allowed_modules as $module): ?>
+                    <li class="d-none d-lg-block nav-item ms-1 <?= $module->module_id == $request->getUri()->getSegment(1) ? 'active bg-light bg-opacity-25' : '' ?>" data-bs-toggle="tooltip" data-bs-placement="bottom" title="<?= lang("Module.$module->module_id") ?>">
+                        <a class="nav-link p-2" href="<?= base_url($module->module_id) ?>">
+                            <img src="<?= base_url("images/menubar/$module->module_id.svg") ?>" alt="<?= lang('Common.icon') . '&nbsp;' . lang("Module.$module->module_id") ?>">
+                        </a>
+                    </li>
+                    <li class="d-lg-none nav-item py-1 <?= $module->module_id == $request->getUri()->getSegment(1) ? 'active bg-light bg-opacity-25' : '' ?>">
+                        <a class="nav-link p-0" href="<?= base_url($module->module_id) ?>">
+                            <img class="ps-3 pe-1 my-1" src="<?= base_url("images/menubar/$module->module_id.svg") ?>" alt="<?= lang('Common.icon') . '&nbsp;' . lang("Module.$module->module_id") ?>">
+                            <span class="align-middle text-light"><?= lang("Module.$module->module_id") ?></span>
+                        </a>
+                    </li>
+                    <?php endforeach; ?>
+                </ul>
             </div>
         </div>
+    </nav>
 
-        <div class="container">
-            <div class="row">
+    <main class="container-lg flex-grow-1 py-3">
diff --git a/app/Views/partial/stock_locations.php b/app/Views/partial/stock_locations.php
index aa0a563ea..0863f4935 100644
--- a/app/Views/partial/stock_locations.php
+++ b/app/Views/partial/stock_locations.php
@@ -4,6 +4,10 @@
  */
 ?>
 
+<span class="d-flex justify-content-start add_stock_location">
+    <button type="button" class="btn btn-outline-success mb-3"><i class="bi bi-plus-lg"></i>&nbsp;Add location</button> <!-- TODO-BS5 translate -->
+</span>
+
 <?php
 $i = 0;
 
@@ -13,22 +17,13 @@ foreach ($stock_locations as $location => $location_data) {
     ++$i;
 ?>
 
-    <div class="form-group form-group-sm" style="<?= $location_data['deleted'] ? 'display: none;' : 'display: block;' ?>">
-        <?= form_label(lang('Config.stock_location') . " $i", "stock_location_$i", ['class' => 'required control-label col-xs-2']) ?>
-        <div class="col-xs-2">
-            <?php $form_data = [
-                'name'  => "stock_location[$location_id]",
-                'id'    => "stock_location[$location_id]",
-                'class' => 'stock_location valid_chars form-control input-sm required',
-                'value' => $location_name
-            ];
-            $location_data['deleted'] && $form_data['disabled'] = 'disabled';
-            echo form_input($form_data);
-            ?>
-        </div>
-        <span class="add_stock_location bi bi-plus-circle" style="padding-top: 0.5em; display: inline-block; cursor: pointer;"></span>
-        <span>&nbsp;&nbsp;</span>
-        <span class="remove_stock_location bi bi-dash-circle" style="padding-top: 0.5em; display: inline-block; cursor: pointer;"></span>
+<div class="col-12 col-lg-6 <?= $location_data['deleted'] ? 'd-none' : '' ?>">
+    <label for="stock_location_<?= $i ?>" class="form-label"><?= lang('Config.stock_location') . " $i"; ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><?= $location_id ?>.</span>
+        <input type="text" class="form-control stock_location valid_chars" name="stock_location<?= $location_id ?>" id="stock_location<?= $location_id ?>" value="<?= $location_name ?>" required <?= $location_data['deleted'] ? 'disabled' : '' ?>>
+        <button type="button" class="btn btn-outline-danger remove_stock_location"><i class="bi bi-x-lg"></i></button>
     </div>
+</div>
 
 <?php } ?>
diff --git a/app/Views/partial/visibility_js.php b/app/Views/partial/visibility_js.php
index 7fcb3e4d1..6a15d374d 100644
--- a/app/Views/partial/visibility_js.php
+++ b/app/Views/partial/visibility_js.php
@@ -93,6 +93,6 @@ applySummaryVisibility();
 var init_dialog = function () {
 <?php if (isset($editable)): ?>
         table_support.submit_handler('<?php echo site_url("reports/get_detailed_{$editable}_row") ?>');
-    dialog_support.init("a.modal-dlg");
+    dialog_support.init("a.modal-launch");
 <?php endif; ?>
 };
diff --git a/app/Views/people/form_basic_info.php b/app/Views/people/form_basic_info.php
index bab79cff7..a37ec2f99 100644
--- a/app/Views/people/form_basic_info.php
+++ b/app/Views/people/form_basic_info.php
@@ -5,171 +5,87 @@
  */
 ?>
 
-<div class="form-group form-group-sm">
-    <?= form_label(lang('Common.first_name'), 'first_name', ['class' => 'required control-label col-xs-3']) ?>
-    <div class="col-xs-8">
-        <?= form_input([
-            'name'  => 'first_name',
-            'id'    => 'first_name',
-            'class' => 'form-control input-sm',
-            'value' => $person_info->first_name
-        ]) ?>
-    </div>
+<label for="first_name" class="form-label"><?= lang('Common.first_name'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+<div class="input-group mb-3">
+    <span class="input-group-text" id="first_name-icon"><i class="bi bi-person-square"></i></span>
+    <input type="text" class="form-control" name="first_name" id="first_name" aria-describedby="first_name-icon" value="<?= $person_info->first_name; ?>" required>
 </div>
 
-<div class="form-group form-group-sm">
-    <?= form_label(lang('Common.last_name'), 'last_name', ['class' => 'required control-label col-xs-3']) ?>
-    <div class="col-xs-8">
-        <?= form_input([
-            'name'  => 'last_name',
-            'id'    => 'last_name',
-            'class' => 'form-control input-sm',
-            'value' => $person_info->last_name
-        ]) ?>
-    </div>
+<label for="last_name" class="form-label"><?= lang('Common.last_name'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+<div class="input-group mb-3">
+    <span class="input-group-text" id="last_name-icon"><i class="bi bi-person-square"></i></span>
+    <input type="text" class="form-control" name="last_name" id="last_name" aria-describedby="last_name-icon" value="<?= $person_info->last_name; ?>" required>
 </div>
 
-<div class="form-group form-group-sm">
-    <?= form_label(lang('Common.gender'), 'gender', !empty($basic_version) ? ['class' => 'required control-label col-xs-3'] : ['class' => 'control-label col-xs-3']) ?>
-    <div class="col-xs-4">
-        <label class="radio-inline">
-            <?= form_radio([
-                'name'    => 'gender',
-                'type'    => 'radio',
-                'id'      => 'gender',
-                'value'   => 1,
-                'checked' => $person_info->gender === '1'
-            ]) ?> <?= lang('Common.gender_male') ?>
-        </label>
-        <label class="radio-inline">
-            <?= form_radio([
-                'name'    => 'gender',
-                'type'    => 'radio',
-                'id'      => 'gender',
-                'value'   => 0,
-                'checked' => $person_info->gender === '0'
-            ]) ?> <?= lang('Common.gender_female') ?>
-        </label>
-
-    </div>
-</div>
-
-<div class="form-group form-group-sm">
-    <?= form_label(lang('Common.email'), 'email', ['class' => 'control-label col-xs-3']) ?>
-    <div class="col-xs-8">
+<label for="gender" class="form-label"><?= lang('Common.gender'); ?><?php if (!empty($basic_version)): ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup><?php endif ?></label>
+<div class="row mb-3">
+    <div class="col-12">
         <div class="input-group">
-            <span class="input-group-addon input-sm">
-                <i class="bi bi-envelope"></i>
-            </span>
-            <?= form_input([
-                'name'  => 'email',
-                'id'    => 'email',
-                'class' => 'form-control input-sm',
-                'value' => $person_info->email
-            ]) ?>
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="gender" id="gender_male" value="1" <?= $person_info->gender === '1' ? 'checked' : '' ?>>
+                <label class="form-check-label" for="gender_male"><i class="bi bi-gender-male me-1"></i><?= lang('Common.gender_male') ?></label>
+            </div>
+
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="gender" id="gender_female" value="0" <?= $person_info->gender === '0' ? 'checked' : '' ?>>
+                <label class="form-check-label" for="gender_female"><i class="bi bi-gender-female me-1"></i><?= lang('Common.gender_female') ?></label>
+            </div>
         </div>
     </div>
 </div>
 
-<div class="form-group form-group-sm">
-    <?= form_label(lang('Common.phone_number'), 'phone_number', ['class' => 'control-label col-xs-3']) ?>
-    <div class="col-xs-8">
-        <div class="input-group">
-            <span class="input-group-addon input-sm">
-                <i class="bi bi-telephone"></i>
-            </span>
-            <?= form_input([
-                'name'  => 'phone_number',
-                'id'    => 'phone_number',
-                'class' => 'form-control input-sm',
-                'value' => $person_info->phone_number
-            ]) ?>
-        </div>
-    </div>
+<label for="email" class="form-label"><?= lang('Common.email'); ?></label>
+<div class="input-group mb-3">
+    <span class="input-group-text" id="email-icon"><i class="bi bi-envelope"></i></span>
+    <input type="email" class="form-control" name="email" id="email" aria-describedby="email-icon" value="<?= $person_info->email; ?>">
 </div>
 
-<div class="form-group form-group-sm">
-    <?= form_label(lang('Common.address_1'), 'address_1', ['class' => 'control-label col-xs-3']) ?>
-    <div class="col-xs-8">
-        <?= form_input([
-            'name'  => 'address_1',
-            'id'    => 'address_1',
-            'class' => 'form-control input-sm',
-            'value' => $person_info->address_1
-        ]) ?>
-    </div>
+<label for="phone_number" class="form-label"><?= lang('Common.phone_number'); ?></label>
+<div class="input-group mb-3">
+    <span class="input-group-text" id="phone_number-icon"><i class="bi bi-telephone"></i></span>
+    <input type="tel" class="form-control" name="phone_number" id="phone_number" aria-describedby="phone_number-icon" value="<?= $person_info->phone_number; ?>">
 </div>
 
-<div class="form-group form-group-sm">
-    <?= form_label(lang('Common.address_2'), 'address_2', ['class' => 'control-label col-xs-3']) ?>
-    <div class="col-xs-8">
-        <?= form_input([
-            'name'  => 'address_2',
-            'id'    => 'address_2',
-            'class' => 'form-control input-sm',
-            'value' => $person_info->address_2
-        ]) ?>
-    </div>
+<label for="address_1" class="form-label"><?= lang('Common.address_1'); ?></label>
+<div class="input-group mb-3">
+    <span class="input-group-text" id="address_1-icon"><i class="bi bi-geo-alt"></i></span>
+    <input type="text" class="form-control" name="address_1" id="address_1" aria-describedby="address_1-icon" value="<?= $person_info->address_1; ?>">
 </div>
 
-<div class="form-group form-group-sm">
-    <?= form_label(lang('Common.city'), 'city', ['class' => 'control-label col-xs-3']) ?>
-    <div class="col-xs-8">
-        <?= form_input([
-            'name'  => 'city',
-            'id'    => 'city',
-            'class' => 'form-control input-sm',
-            'value' => $person_info->city
-        ]) ?>
-    </div>
+<label for="address_2" class="form-label"><?= lang('Common.address_2'); ?></label>
+<div class="input-group mb-3">
+    <span class="input-group-text" id="address_2-icon"><i class="bi bi-geo-alt"></i></span>
+    <input type="text" class="form-control" name="address_2" id="address_2" aria-describedby="address_2-icon" value="<?= $person_info->address_2; ?>">
 </div>
 
-<div class="form-group form-group-sm">
-    <?= form_label(lang('Common.state'), 'state', ['class' => 'control-label col-xs-3']) ?>
-    <div class="col-xs-8">
-        <?= form_input([
-            'name'  => 'state',
-            'id'    => 'state',
-            'class' => 'form-control input-sm',
-            'value' => $person_info->state
-        ]) ?>
-    </div>
+<label for="city" class="form-label"><?= lang('Common.city'); ?></label>
+<div class="input-group mb-3">
+    <span class="input-group-text" id="city-icon"><i class="bi bi-geo-alt"></i></span>
+    <input type="text" class="form-control" name="city" id="city" aria-describedby="city-icon" value="<?= $person_info->city; ?>">
 </div>
 
-<div class="form-group form-group-sm">
-    <?= form_label(lang('Common.zip'), 'zip', ['class' => 'control-label col-xs-3']) ?>
-    <div class="col-xs-8">
-        <?= form_input([
-            'name'  => 'zip',
-            'id'    => 'postcode',
-            'class' => 'form-control input-sm',
-            'value' => $person_info->zip
-        ]) ?>
-    </div>
+<label for="state" class="form-label"><?= lang('Common.state'); ?></label>
+<div class="input-group mb-3">
+    <span class="input-group-text" id="state-icon"><i class="bi bi-geo-alt"></i></span>
+    <input type="text" class="form-control" name="state" id="state" aria-describedby="state-icon" value="<?= $person_info->state; ?>">
 </div>
 
-<div class="form-group form-group-sm">
-    <?= form_label(lang('Common.country'), 'country', ['class' => 'control-label col-xs-3']) ?>
-    <div class="col-xs-8">
-        <?= form_input([
-            'name'  => 'country',
-            'id'    => 'country',
-            'class' => 'form-control input-sm',
-            'value' => $person_info->country
-        ]) ?>
-    </div>
+<label for="postcode" class="form-label"><?= lang('Common.zip'); ?></label>
+<div class="input-group mb-3">
+    <span class="input-group-text" id="zip-icon"><i class="bi bi-geo-alt"></i></span>
+    <input type="text" class="form-control" name="zip" id="postcode" aria-describedby="zip-icon" value="<?= $person_info->zip; ?>">
 </div>
 
-<div class="form-group form-group-sm">
-    <?= form_label(lang('Common.comments'), 'comments', ['class' => 'control-label col-xs-3']) ?>
-    <div class="col-xs-8">
-        <?= form_textarea([
-            'name'  => 'comments',
-            'id'    => 'comments',
-            'class' => 'form-control input-sm',
-            'value' => $person_info->comments
-        ]) ?>
-    </div>
+<label for="country" class="form-label"><?= lang('Common.country'); ?></label>
+<div class="input-group mb-3">
+    <span class="input-group-text" id="country-icon"><i class="bi bi-globe-americas"></i></span>
+    <input type="text" class="form-control" name="country" id="country" aria-describedby="country-icon" value="<?= $person_info->country; ?>">
+</div>
+
+<label for="comments" class="form-label"><?= lang('Common.comments'); ?></label>
+<div class="input-group mb-3">
+    <span class="input-group-text"><i class="bi bi-chat"></i></span>
+    <textarea class="form-control" name="comments" id="comments" rows="6"><?= $person_info->comments; ?></textarea>
 </div>
 
 <script type="text/javascript">
diff --git a/app/Views/people/manage.php b/app/Views/people/manage.php
index e87ba52e3..23c6bfa6c 100644
--- a/app/Views/people/manage.php
+++ b/app/Views/people/manage.php
@@ -8,6 +8,11 @@
 
 <?= view('partial/header') ?>
 
+<?php
+$title_info['config_title'] = 'People';
+echo view('configs/config_header', $title_info);
+?>
+
 <script type="text/javascript">
     $(document).ready(function() {
         <?= view('partial/bootstrap_tables_locale') ?>
@@ -32,24 +37,24 @@
     });
 </script>
 
-<div id="title_bar" class="btn-toolbar">
-    <?php if ($controller_name === 'customers') { ?>
-        <button class="btn btn-info btn-sm pull-right modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "$controller_name/csvImport" ?>" title="<?= lang(ucfirst($controller_name) . '.import_items_csv') ?>">
-            <i class="bi bi-file-earmark-arrow-down icon-spacing"></i><?= lang('Common.import_csv') ?>
-        </button>
-    <?php } ?>
-    <button class="btn btn-info btn-sm pull-right modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "$controller_name/view" ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
-        <i class="bi bi-person-add icon-spacing"></i><?= lang(ucfirst($controller_name) . '.new') ?>
+<div class="d-flex gap-2 justify-content-end">
+    <button type="button" class="btn btn-primary modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "$controller_name/view" ?>" title="<?= lang(ucfirst($controller_name) . '.new') ?>">
+        <i class="bi bi-person-add me-2"></i><?= lang(ucfirst($controller_name) . '.new') ?>
     </button>
+    <?php if ($controller_name == 'customers') { ?>
+    <button type="button" class="btn btn-primary modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "$controller_name/csvImport" ?>" title="<?= lang(ucfirst($controller_name) . '.import_items_csv') ?>">
+        <i class="bi bi-file-earmark-arrow-down me-2"></i><?= lang('Common.import_csv') ?>
+    </button>
+    <?php } ?>
 </div>
 
 <div id="toolbar">
-    <div class="pull-left btn-toolbar">
-        <button id="delete" class="btn btn-default btn-sm">
-            <i class="bi bi-trash icon-spacing"></i><?= lang('Common.delete') ?>
+    <div class="d-flex gap-2">
+        <button type="button" class="btn btn-secondary" id="delete">
+            <i class="bi bi-trash"></i><span class="d-none d-sm-inline ms-2"><?= lang('Common.delete') ?></span>
         </button>
-        <button id="email" class="btn btn-default btn-sm">
-            <i class="bi bi-envelope icon-spacing"></i><?= lang('Common.email') ?>
+        <button type="button" class="btn btn-secondary" id="email">
+            <i class="bi bi-envelope"></i><span class="d-none d-sm-inline ms-2"><?= lang('Common.email') ?></span>
         </button>
     </div>
 </div>
diff --git a/app/Views/receivings/receipt.php b/app/Views/receivings/receipt.php
index 549d0de0e..f64829241 100644
--- a/app/Views/receivings/receipt.php
+++ b/app/Views/receivings/receipt.php
@@ -28,9 +28,9 @@ echo view('partial/print_receipt', ['print_after_sale', $print_after_sale, 'sele
 
 <div class="print_hide" id="control_buttons" style="text-align: right;">
     <a href="javascript:printdoc();">
-        <div class="btn btn-info btn-sm" id="show_print_button"><?= '<i class="bi bi-printer icon-spacing"></i>' . lang('Common.print') ?></div>
+        <div class="btn btn-info btn-sm" id="show_print_button"><?= '<i class="bi bi-printer me-2"></i>' . lang('Common.print') ?></div>
     </a>
-    <?= anchor("receivings", '<i class="bi bi-box icon-spacing"></i>' . lang('Receivings.register'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_sales_button']) ?>
+    <?= anchor("receivings", '<i class="bi bi-box me-2"></i>' . lang('Receivings.register'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_sales_button']) ?>
 </div>
 
 <div id="receipt_wrapper">
diff --git a/app/Views/receivings/receiving.php b/app/Views/receivings/receiving.php
index d646f3272..df61a5bf6 100644
--- a/app/Views/receivings/receiving.php
+++ b/app/Views/receivings/receiving.php
@@ -46,7 +46,7 @@ if (isset($success)) {
                 <label class="control-label"><?= lang(ucfirst($controller_name) . '.mode') ?></label>
             </li>
             <li class="pull-left">
-                <?= form_dropdown('mode', $modes, $mode, ['onchange' => "$('#mode_form').submit();", 'class' => 'selectpicker show-menu-arrow', 'data-style' => 'btn-default btn-sm', 'data-width' => 'fit']) ?>
+                <?= form_dropdown('mode', $modes, $mode, ['onchange' => "$('#mode_form').submit();", 'class' => 'selectpicker', 'data-style' => 'btn-default btn-sm', 'data-width' => 'fit']) ?>
             </li>
 
             <?php if ($show_stock_locations) { ?>
@@ -54,7 +54,7 @@ if (isset($success)) {
                     <label class="control-label"><?= lang(ucfirst($controller_name) . '.stock_source') ?></label>
                 </li>
                 <li class="pull-left">
-                    <?= form_dropdown('stock_source', $stock_locations, $stock_source, ['onchange' => "$('#mode_form').submit();", 'class' => 'selectpicker show-menu-arrow', 'data-style' => 'btn-default btn-sm', 'data-width' => 'fit']) ?>
+                    <?= form_dropdown('stock_source', $stock_locations, $stock_source, ['onchange' => "$('#mode_form').submit();", 'class' => 'selectpicker', 'data-style' => 'btn-default btn-sm', 'data-width' => 'fit']) ?>
                 </li>
 
                 <?php if ($mode == 'requisition') { ?>
@@ -62,7 +62,7 @@ if (isset($success)) {
                         <label class="control-label"><?= lang(ucfirst($controller_name) . '.stock_destination') ?></label>
                     </li>
                     <li class="pull-left">
-                        <?= form_dropdown('stock_destination', $stock_locations, $stock_destination, ['onchange' => "$('#mode_form').submit();", 'class' => 'selectpicker show-menu-arrow', 'data-style' => 'btn-default btn-sm', 'data-width' => 'fit']) ?>
+                        <?= form_dropdown('stock_destination', $stock_locations, $stock_destination, ['onchange' => "$('#mode_form').submit();", 'class' => 'selectpicker', 'data-style' => 'btn-default btn-sm', 'data-width' => 'fit']) ?>
                     </li>
             <?php
                 }
@@ -92,8 +92,8 @@ if (isset($success)) {
             </li>
 
             <li class="pull-right">
-                <button id="new_item_button" class="btn btn-info btn-sm pull-right modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-btn-new="<?= lang('Common.new') ?>" data-href="<?= "items/view" ?>" title="<?= lang('Sales.new_item') ?>">
-                    <i class="bi bi-tag icon-spacing"></i><?= lang('Sales.new_item') ?>
+                <button id="new_item_button" class="btn btn-info btn-sm pull-right modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-btn-new="<?= lang('Common.new') ?>" data-href="<?= "items/view" ?>" title="<?= lang('Sales.new_item') ?>">
+                    <i class="bi bi-tag me-2"></i><?= lang('Sales.new_item') ?>
                 </button>
             </li>
         </ul>
@@ -178,7 +178,7 @@ if (isset($success)) {
                                             'id'           => 'discount_toggle',
                                             'name'         => 'discount_toggle',
                                             'value'        => 1,
-                                            'data-toggle'  => "toggle",
+                                            'data-toggle'  => 'toggle',
                                             'data-size'    => 'small',
                                             'data-onstyle' => 'success',
                                             'data-on'      => '<b>' . $config['currency_symbol'] . '</b>',
@@ -272,7 +272,7 @@ if (isset($success)) {
 
             <?= anchor(
                 "$controller_name/removeSupplier",
-                '<i class="bi bi-x-circle icon-spacing"></i>' . lang('Common.remove') . ' ' . lang('Suppliers.supplier'),
+                '<i class="bi bi-x-circle me-2"></i>' . lang('Common.remove') . ' ' . lang('Suppliers.supplier'),
                 [
                     'class' => 'btn btn-danger btn-sm',
                     'id'    => 'remove_supplier_button',
@@ -295,8 +295,8 @@ if (isset($success)) {
                     'value' => lang(ucfirst($controller_name) . '.start_typing_supplier_name')
                 ]) ?>
 
-                <button id="new_supplier_button" class="btn btn-info btn-sm modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "suppliers/view" ?>" title="<?= lang(ucfirst($controller_name) . '.new_supplier') ?>">
-                    <i class="bi bi-building-add icon-spacing"></i><?= lang(ucfirst($controller_name) . '.new_supplier') ?>
+                <button id="new_supplier_button" class="btn btn-info btn-sm modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "suppliers/view" ?>" title="<?= lang(ucfirst($controller_name) . '.new_supplier') ?>">
+                    <i class="bi bi-building-add me-2"></i><?= lang(ucfirst($controller_name) . '.new_supplier') ?>
                 </button>
 
             </div>
@@ -334,10 +334,10 @@ if (isset($success)) {
                         ]) ?>
 
                         <div class="btn btn-sm btn-danger pull-left" id="cancel_receiving_button">
-                            <i class="bi bi-x-circle icon-spacing"></i><?= lang(ucfirst($controller_name) . '.cancel_receiving') ?>
+                            <i class="bi bi-x-circle me-2"></i><?= lang(ucfirst($controller_name) . '.cancel_receiving') ?>
                         </div>
                         <div class="btn btn-sm btn-success pull-right" id="finish_receiving_button">
-                            <i class="bi bi-check-circle icon-spacing"></i><?= lang(ucfirst($controller_name) . '.complete_receiving') ?>
+                            <i class="bi bi-check-circle me-2"></i><?= lang(ucfirst($controller_name) . '.complete_receiving') ?>
                         </div>
                     </div>
 
@@ -393,7 +393,7 @@ if (isset($success)) {
                                             [],
                                             [
                                                 'id'         => 'payment_types',
-                                                'class'      => 'selectpicker show-menu-arrow',
+                                                'class'      => 'selectpicker',
                                                 'data-style' => 'btn-default btn-sm',
                                                 'data-width' => 'auto'
                                             ]
@@ -415,10 +415,10 @@ if (isset($success)) {
                         </div>
 
                         <div class="btn btn-sm btn-danger pull-left" id="cancel_receiving_button">
-                            <i class="bi bi-x-circle icon-spacing"></i><?= lang(ucfirst($controller_name) . '.cancel_receiving') ?>
+                            <i class="bi bi-x-circle me-2"></i><?= lang(ucfirst($controller_name) . '.cancel_receiving') ?>
                         </div>
                         <div class="btn btn-sm btn-success pull-right" id="finish_receiving_button">
-                            <i class="bi bi-check-circle icon-spacing"></i><?= lang(ucfirst($controller_name) . '.complete_receiving') ?>
+                            <i class="bi bi-check-circle me-2"></i><?= lang(ucfirst($controller_name) . '.complete_receiving') ?>
                         </div>
                     </div>
 
@@ -489,7 +489,7 @@ if (isset($success)) {
             }
         });
 
-        dialog_support.init("a.modal-dlg, button.modal-dlg");
+        dialog_support.init("a.modal-launch, button.modal-launch");
 
         $('#supplier').blur(function() {
             $(this).attr('value', "<?= lang(ucfirst($controller_name) . '.start_typing_supplier_name') ?>");
diff --git a/app/Views/reports/date_input.php b/app/Views/reports/date_input.php
index b565bd2b1..2630e8fd2 100644
--- a/app/Views/reports/date_input.php
+++ b/app/Views/reports/date_input.php
@@ -7,12 +7,10 @@
 
 <?= view('partial/header') ?>
 
-<script type="text/javascript">
-    dialog_support.init("a.modal-dlg");
-</script>
-
-
-<div id="page_title"><?= lang('Reports.report_input') ?></div>
+<?php
+$title_info['config_title'] = lang('Reports.report_input');
+echo view('configs/config_header', $title_info);
+?>
 
 <?php
 if (isset($error)) {
@@ -20,69 +18,76 @@ if (isset($error)) {
 }
 ?>
 
-<?= form_open('#', ['id' => 'item_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
+<?= form_open('#', ['id' => 'item_form', 'enctype' => 'multipart/form-data']) ?>
 
-    <div class="form-group form-group-sm">
-        <?= form_label(lang('Reports.date_range'), 'report_date_range_label', ['class' => 'control-label col-xs-2 required']) ?>
-        <div class="col-xs-3">
-            <?= form_input(['name' => 'daterangepicker', 'class' => 'form-control input-sm', 'id' => 'daterangepicker']) ?>
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="daterangepicker" class="form-label"><?= lang('Reports.date_range') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="daterangepicker-icon"><i class="bi bi-calendar2-range"></i></span>
+                <input type="text" class="form-select" name="daterangepicker" id="daterangepicker" aria-describedby="daterangepicker-icon">
+            </div>
         </div>
-    </div>
 
-    <?php if (!empty($mode)) { ?>
-        <div class="form-group form-group-sm">
-            <?php if ($mode == 'sale') { ?>
-                <?= form_label(lang('Reports.sale_type'), 'reports_sale_type_label', ['class' => 'required control-label col-xs-2']) ?>
-                <div id="report_sale_type" class="col-xs-3">
-                    <?= form_dropdown('sale_type', $sale_type_options, 'complete', ['id' => 'input_type', 'class' => 'form-control']) ?>
-                </div>
-            <?php } elseif ($mode == 'receiving') { ?>
-                <?= form_label(lang('Reports.receiving_type'), 'reports_receiving_type_label', ['class' => 'required control-label col-xs-2']) ?>
-                <div id="report_receiving_type" class="col-xs-3">
-                    <?= form_dropdown(
-                        'receiving_type',
-                        [
-                            'all'          => lang('Reports.all'),
-                            'receiving'    => lang('Reports.receivings'),
-                            'returns'      => lang('Reports.returns'),
-                            'requisitions' => lang('Reports.requisitions')
-                        ],
-                        'all',
-                        ['id' => 'input_type', 'class' => 'form-control']
-                    ) ?>
-                </div>
+        <div class="col-12 col-lg-6">
+            <?php if (!empty($mode)) { ?>
+                    <?php if ($mode == 'sale') { ?>
+                        <label for="reports_sale_type_label" class="form-label"><?= lang('Reports.sale_type') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+                        <div class="input-group mb-3" id="report_sale_type">
+                            <span class="input-group-text"><i class="bi bi-receipt"></i></span>
+                            <select class="form-select" name="sale_type" id="input_type" required>
+                                <?php foreach ($sale_type_options as $value => $label) { ?>
+                                    <option value="<?= $value ?>" <?= $value === 'complete' ? 'selected' : '' ?>><?= $label ?></option>
+                                <?php } ?>
+                            </select>
+                        </div>
+                    <?php } elseif ($mode == 'receiving') { ?>
+                        <label for="reports_receiving_type_label" class="form-label"><?= lang('Reports.receiving_type') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+                        <div class="input-group mb-3" id="report_receiving_type">
+                            <span class="input-group-text"><i class="bi bi-truck"></i></span>
+                            <select class="form-select" name="receiving_type" id="input_type" required>
+                                <option value="all" <?= 'all' === 'all' ? 'selected' : '' ?>><?= lang('Reports.all') ?></option>
+                                <option value="receiving"><?= lang('Reports.receivings') ?></option>
+                                <option value="returns"><?= lang('Reports.returns') ?></option>
+                                <option value="requisitions"><?= lang('Reports.requisitions') ?></option>
+                            </select>
+                        </div>
+                    <?php } ?>
             <?php } ?>
         </div>
-    <?php } ?>
 
-    <?php if (isset($discount_type_options)) { ?>
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Reports.discount_type'), 'reports_discount_type_label', ['class' => 'required control-label col-xs-2']) ?>
-            <div id="report_discount_type" class="col-xs-3">
-                <?= form_dropdown('discount_type', $discount_type_options, $config['default_sales_discount_type'], ['id' => 'discount_type_id', 'class' => 'form-control']) ?>
+        <?php if (isset($discount_type_options)) { ?>
+            <div class="col-12 col-lg-6">
+                <label for="reports_discount_type_label" class="form-label"><?= lang('Reports.discount_type') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+                <div class="input-group mb-3" id="report_discount_type">
+                    <span class="input-group-text"><i class="bi bi-plus-slash-minus"></i></span>
+                    <select class="form-select" name="discount_type" id="discount_type_id" required>
+                        <?php foreach ($discount_type_options as $value => $label) { ?>
+                            <option value="<?= $value ?>" <?= $value == $config['default_sales_discount_type'] ? 'selected' : '' ?>><?= $label ?></option>
+                        <?php } ?>
+                    </select>
+                </div>
             </div>
-        </div>
-    <?php } ?>
+        <?php } ?>
 
-    <?php if (!empty($stock_locations) && count($stock_locations) > 2) { ?>
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Reports.stock_location'), 'reports_stock_location_label', ['class' => 'required control-label col-xs-2']) ?>
-            <div id="report_stock_location" class="col-xs-3">
-                <?= form_dropdown('stock_location', $stock_locations, 'all', ['id' => 'location_id', 'class' => 'form-control']) ?>
+        <?php if (!empty($stock_locations) && count($stock_locations) > 2) { ?>
+            <div class="col-12 col-lg-6">
+                <label for="reports_stock_location_label" class="form-label"><?= lang('Reports.stock_location') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+                <div class="input-group mb-3" id="report_stock_location">
+                    <span class="input-group-text"><i class="bi bi-boxes"></i></span>
+                    <select class="form-select" name="stock_location" id="location_id" required>
+                        <?php foreach ($stock_locations as $value => $label) { ?>
+                            <option value="<?= $value ?>" <?= $value === 'all' ? 'selected' : '' ?>><?= $label ?></option>
+                        <?php } ?>
+                    </select>
+                </div>
             </div>
-        </div>
-    <?php } ?>
+        <?php } ?>
+    </div>
 
-    <?php
-    echo form_button(
-        [
-            'name'    => 'generate_report',
-            'id'      => 'generate_report',
-            'content' => lang('Common.submit'),
-            'class'   => 'btn btn-primary btn-sm'
-        ]
-    );
-    ?>
+    <div class="d-flex justify-content-end">
+        <button type="button" class="btn btn-primary" name="generate_report" id="generate_report"><?= lang('Common.submit'); ?></button>
+    </div>
 
 <?= form_close() ?>
 
diff --git a/app/Views/reports/graphical.php b/app/Views/reports/graphical.php
index f4ff62f5d..fb4e130d1 100644
--- a/app/Views/reports/graphical.php
+++ b/app/Views/reports/graphical.php
@@ -9,24 +9,18 @@
 
 <?= view('partial/header') ?>
 
-<script type="text/javascript">
-    dialog_support.init("a.modal-dlg");
-</script>
+<?php
+$title_info['config_title'] = esc($title);
+echo view('configs/config_header', $title_info);
+?>
 
-<div id="page_title"><?= esc($title) ?></div>
-
-<div id="page_subtitle"><?= esc($subtitle) ?></div>
+<h5><?= esc($subtitle) ?></h5>
 
 <div class="ct-chart ct-golden-section" id="chart1"></div>
 
-<div id="toolbar">
-    <div class="pull-left form-inline" role="toolbar">
-        <!-- Toggle Button -->
-        <button id="toggleCostProfitButton" class="btn btn-default btn-sm print_hide">
-            <?php echo lang('Reports.toggle_cost_and_profit'); ?>
-        </button>
-    </div>
-</div>
+<button type="button" class="btn btn-secondary d-print-none" id="toggleCostProfitButton">
+    <i class="bi bi-toggles"></i><span class="d-none d-sm-inline ms-2"><?= lang('Reports.toggle_cost_and_profit') ?></span>
+</button>
 
 <?= view($chart_type) ?>
 
diff --git a/app/Views/reports/inventory_summary_input.php b/app/Views/reports/inventory_summary_input.php
index 722666df0..5689a2b2f 100644
--- a/app/Views/reports/inventory_summary_input.php
+++ b/app/Views/reports/inventory_summary_input.php
@@ -7,11 +7,10 @@
 
 <?= view('partial/header') ?>
 
-<script type="text/javascript">
-    dialog_support.init("a.modal-dlg");
-</script>
-
-<div id="page_title"><?= lang('Reports.report_input') ?></div>
+<?php
+$title_info['config_title'] = lang('Reports.report_input');
+echo view('configs/config_header', $title_info);
+?>
 
 <?php
 if (isset($error)) {
@@ -19,30 +18,38 @@ if (isset($error)) {
 }
 ?>
 
-<?= form_open('#', ['id' => 'item_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
+<?= form_open('#', ['id' => 'item_form', 'enctype' => 'multipart/form-data']) ?>
 
-    <div class="form-group form-group-sm">
-        <?= form_label(lang('Reports.stock_location'), 'reports_stock_location_label', ['class' => 'required control-label col-xs-2']) ?>
-        <div id="report_stock_location" class="col-xs-3">
-            <?= form_dropdown('stock_location', $stock_locations, 'all', 'id="location_id" class="form-control"') ?>
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="reports_stock_location_label" class="form-label"><?= lang('Reports.stock_location') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3" id="report_stock_location">
+                <span class="input-group-text"><i class="bi bi-boxes"></i></span>
+                <select class="form-select" name="stock_location" id="location_id" required>
+                    <?php foreach ($stock_locations as $value => $label) { ?>
+                        <option value="<?= $value ?>" <?= $value === 'all' ? 'selected' : '' ?>><?= $label ?></option>
+                    <?php } ?>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="reports_item_count_label" class="form-label"><?= lang('Reports.item_count') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3" id="report_item_count">
+                <span class="input-group-text"><i class="bi bi-funnel"></i></span>
+                <select class="form-select" name="item_count" id="item_count" required>
+                    <?php foreach ($item_count as $value => $label) { ?>
+                        <option value="<?= $value ?>" <?= $value === 'all' ? 'selected' : '' ?>><?= $label ?></option>
+                    <?php } ?>
+                </select>
+            </div>
         </div>
     </div>
 
-    <div class="form-group form-group-sm">
-        <?= form_label(lang('Reports.item_count'), 'reports_item_count_label', ['class' => 'required control-label col-xs-2']) ?>
-        <div id="report_item_count" class="col-xs-3">
-            <?= form_dropdown('item_count', $item_count, 'all', 'id="item_count" class="form-control"') ?>
-        </div>
+    <div class="d-flex justify-content-end">
+        <button type="button" class="btn btn-primary" name="generate_report" id="generate_report"><?= lang('Common.submit'); ?></button>
     </div>
 
-    <?php
-    echo form_button([
-        'name'    => 'generate_report',
-        'id'      => 'generate_report',
-        'content' => lang('Common.submit'),
-        'class'   => 'btn btn-primary btn-sm'
-    ]) ?>
-
 <?= form_close() ?>
 
 <?= view('partial/footer') ?>
diff --git a/app/Views/reports/listing.php b/app/Views/reports/listing.php
index 69fefcd5f..8aa7af8b9 100644
--- a/app/Views/reports/listing.php
+++ b/app/Views/reports/listing.php
@@ -17,88 +17,84 @@ $detailed_reports = [
 
 <?= view('partial/header') ?>
 
-<script type="text/javascript">
-    dialog_support.init("a.modal-dlg");
-</script>
-
 <?php
-if (isset($error)) {
-    echo '<div class="alert alert-dismissible alert-danger">' . esc($error) . '</div>';
-}
+$title_info['config_title'] = 'Reports';
+echo view('configs/config_header', $title_info);
 ?>
 
+<?php if (isset($error)) { ?>
+    <div class="alert alert-danger alert-dismissible" role="alert">
+        <?= esc($error) ?>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
+<?php } ?>
+
 <div class="row">
-    <div class="col-md-4">
-        <div class="panel panel-primary">
-            <div class="panel-heading">
-                <h3 class="panel-title"><i class="bi bi-bar-chart icon-spacing"></i><?= lang('Reports.graphical_reports') ?></h3>
+    <div class="col-12 col-md-6 col-lg-4 mb-3">
+        <div class="card bg-primary">
+            <div class="card-header text-light text-truncate">
+                <i class="bi bi-bar-chart me-2"></i><?= lang('Reports.graphical_reports'); ?>
             </div>
-            <div class="list-group">
+            <div class="list-group list-group-flush">
                 <?php foreach ($permission_ids as $permission_id) {
                     if (can_show_report($permission_id, ['inventory', 'receiving'])) {
-                        $link = get_report_link($permission_id, 'graphical_summary');
-                ?>
-                        <a class="list-group-item" href="<?= $link['path'] ?>"><?= esc($link['label']) ?></a>
-                <?php
-                    }
-                }
-                ?>
+                        $link = get_report_link($permission_id, 'graphical_summary'); ?>
+                    <a class="list-group-item list-group-item-action text-truncate" href="<?= $link['path'] ?>"><?= esc($link['label']) ?></a>
+                <?php }} ?>
             </div>
         </div>
     </div>
 
-    <div class="col-md-4">
-        <div class="panel panel-primary">
-            <div class="panel-heading">
-                <h3 class="panel-title"><i class="bi bi-card-list icon-spacing"></i><?= lang('Reports.summary_reports') ?></h3>
+    <div class="col-12 col-md-6 col-lg-4 mb-3">
+        <div class="card bg-primary">
+            <div class="card-header text-light text-truncate">
+                <i class="bi bi-card-list me-2"></i><?= lang('Reports.summary_reports'); ?>
             </div>
-            <div class="list-group">
+            <div class="list-group list-group-flush">
                 <?php foreach ($permission_ids as $permission_id) {
                     if (can_show_report($permission_id, ['inventory', 'receiving'])) {
-                        $link = get_report_link($permission_id, 'summary');
-                ?>
-                        <a class="list-group-item" href="<?= $link['path'] ?>"><?= esc($link['label']) ?></a>
-                <?php
-                    }
-                }
-                ?>
+                        $link = get_report_link($permission_id, 'summary'); ?>
+                    <a class="list-group-item list-group-item-action text-truncate" href="<?= $link['path'] ?>"><?= esc($link['label']) ?></a>
+                <?php }} ?>
             </div>
         </div>
     </div>
 
-    <div class="col-md-4">
-        <div class="panel panel-primary">
-            <div class="panel-heading">
-                <h3 class="panel-title"><i class="bi bi-card-checklist icon-spacing"></i><?= lang('Reports.detailed_reports') ?></h3>
+    <div class="col-12 col-lg-4">
+        <div class="row">
+            <div class="col-12 col-md-6 col-lg-12 mb-3">
+                <div class="card bg-primary">
+                    <div class="card-header text-light text-truncate">
+                        <i class="bi bi-card-checklist me-2"></i><?= lang('Reports.detailed_reports') ?>
+                    </div>
+                    <div class="list-group list-group-flush">
+                        <?php foreach ($detailed_reports as $report_name => $prefix) {
+                            if (in_array($report_name, $permission_ids, true)) {
+                                $link = get_report_link($report_name, $prefix); ?>
+                            <a class="list-group-item list-group-item-action text-truncate" href="<?= $link['path'] ?>"><?= esc($link['label']) ?></a>
+                        <?php }} ?>
+                    </div>
+                </div>
             </div>
-            <div class="list-group">
-                <?php foreach ($detailed_reports as $report_name => $prefix) {
-                    if (in_array($report_name, $permission_ids, true)) {
-                        $link = get_report_link($report_name, $prefix);
-                ?>
-                        <a class="list-group-item" href="<?= $link['path'] ?>"><?= esc($link['label']) ?></a>
-                <?php
-                    }
-                }
-                ?>
-            </div>
-        </div>
 
-        <?php if (in_array('reports_inventory', $permission_ids, true)) { ?>
-            <div class="panel panel-primary">
-                <div class="panel-heading">
-                    <h3 class="panel-title"><i class="bi bi-box icon-spacing"></i><?= lang('Reports.inventory_reports') ?></h3>
+            <?php if (in_array('reports_inventory', $permission_ids, true)) { ?>
+                <div class="col-12 col-md-6 col-lg-12 mb-3">
+                    <div class="card bg-primary">
+                        <div class="card-header text-light text-truncate">
+                            <i class="bi bi-box me-2"></i><?= lang('Reports.inventory_reports') ?>
+                        </div>
+                        <div class="list-group list-group-flush">
+                            <?php
+                            $inventory_low_report = get_report_link('reports_inventory_low');
+                            $inventory_summary_report = get_report_link('reports_inventory_summary');
+                            ?>
+                            <a class="list-group-item list-group-item-action text-truncate" href="<?= $inventory_low_report['path'] ?>"><?= esc($inventory_low_report['label']) ?></a>
+                            <a class="list-group-item list-group-item-action text-truncate" href="<?= $inventory_summary_report['path'] ?>"><?= esc($inventory_summary_report['label']) ?></a>
+                        </div>
+                    </div>
                 </div>
-                <div class="list-group">
-                    <?php
-                    $inventory_low_report = get_report_link('reports_inventory_low');
-                    $inventory_summary_report = get_report_link('reports_inventory_summary');
-                    ?>
-                    <a class="list-group-item" href="<?= $inventory_low_report['path'] ?>"><?= esc($inventory_low_report['label']) ?></a>
-                    <a class="list-group-item" href="<?= $inventory_summary_report['path'] ?>"><?= esc($inventory_summary_report['label']) ?></a>
-                </div>
-            </div>
-        <?php } ?>
+            <?php } ?>
+        </div>
     </div>
 </div>
 
diff --git a/app/Views/reports/specific_customer_input.php b/app/Views/reports/specific_customer_input.php
index 925077f8c..f701eaf3c 100644
--- a/app/Views/reports/specific_customer_input.php
+++ b/app/Views/reports/specific_customer_input.php
@@ -9,11 +9,10 @@
 
 <?= view('partial/header') ?>
 
-<script type="text/javascript">
-    dialog_support.init("a.modal-dlg");
-</script>
-
-<div id="page_title"><?= lang('Reports.report_input') ?></div>
+<?php
+$title_info['config_title'] = lang('Reports.report_input');
+echo view('configs/config_header', $title_info);
+?>
 
 <?php
 if (isset($error)) {
@@ -21,49 +20,68 @@ if (isset($error)) {
 }
 ?>
 
-<?= form_open('#', ['id' => 'item_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
+<?= form_open('#', ['id' => 'item_form', 'enctype' => 'multipart/form-data']) ?>
 
-    <div class="form-group form-group-sm">
-        <?= form_label(lang('Reports.date_range'), 'report_date_range_label', ['class' => 'control-label col-xs-2 required']) ?>
-        <div class="col-xs-3">
-            <?= form_input(['name' => 'daterangepicker', 'class' => 'form-control input-sm', 'id' => 'daterangepicker']) ?>
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="daterangepicker" class="form-label"><?= lang('Reports.date_range') ?></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="daterangepicker-icon"><i class="bi bi-calendar2-range"></i></span>
+                <input type="text" class="form-select" name="daterangepicker" id="daterangepicker" aria-describedby="daterangepicker-icon">
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="specific_input_data" class="form-label"><?= $specific_input_name ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text"><i class="bi bi-person"></i></span>
+                <select class="form-select" name="specific_input_data" id="specific_input_data" required>
+                    <?php foreach ($specific_input_data as $key => $value): ?>
+                        <option value="<?= $key ?>"><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="input_type" class="form-label"><?= lang('Reports.sale_type') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3 report_sale_type">
+                <span class="input-group-text"><i class="bi bi-receipt"></i></span>
+                <select class="form-select" name="sale_type" id="input_type" required>
+                    <?php foreach ($sale_type_options as $key => $value): ?>
+                        <option value="<?= $key ?>" <?= $key === 'complete' ? 'selected' : '' ?>><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="input_payment_type" class="form-label"><?= lang('Reports.payment_type') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3 report_sale_type">
+                <span class="input-group-text"><i class="bi bi-receipt"></i></span>
+                <select class="form-select" name="payment_type" id="input_payment_type" required>
+                    <?php foreach ($payment_type as $key => $value): ?>
+                        <option value="<?= $key ?>"><?= $value ?></option>
+                    <?php endforeach; ?>
+                </select>
+            </div>
         </div>
     </div>
 
-    <div class="form-group form-group-sm" id="report_specific_input_data">
-        <?= form_label($specific_input_name, 'specific_input_name_label', ['class' => 'required control-label col-xs-2']) ?>
-        <div class="col-xs-3">
-            <?= form_dropdown('specific_input_data', $specific_input_data, '', 'id="specific_input_data" class="form-control selectpicker" data-live-search="true"') ?>
-        </div>
+    <div class="d-flex justify-content-end">
+        <button type="button" class="btn btn-primary" name="generate_report" id="generate_report"><?= lang('Common.submit'); ?></button>
     </div>
 
-    <div class="form-group form-group-sm">
-        <?= form_label(lang('Reports.sale_type'), 'reports_sale_type_label', ['class' => 'required control-label col-xs-2']) ?>
-        <div id="report_sale_type" class="col-xs-3">
-            <?= form_dropdown('sale_type', $sale_type_options, 'complete', 'id="input_type" class="form-control"') ?>
-        </div>
-    </div>
-
-    <div class="form-group form-group-sm">
-        <?= form_label(lang('Reports.payment_type'), 'reports_payment_type_label', ['class' => 'required control-label col-xs-2']) ?>
-        <div class="col-xs-3">
-            <?= form_dropdown('payment_type', $payment_type, '', 'id="input_payment_type" class="form-control"') ?>
-        </div>
-    </div>
-
-    <?php
-    echo form_button([
-        'name'    => 'generate_report',
-        'id'      => 'generate_report',
-        'content' => lang('Common.submit'),
-        'class'   => 'btn btn-primary btn-sm'
-    ]);    ?>
-
 <?= form_close() ?>
 
 <?= view('partial/footer') ?>
 
 <script type="text/javascript">
+    new TomSelect('#specific_input_data',{
+        plugins: ['dropdown_input'],
+        placeholder: 'Type to search...',
+    });
+
     $(document).ready(function() {
         <?= view('partial/daterangepicker') ?>
 
diff --git a/app/Views/reports/specific_input.php b/app/Views/reports/specific_input.php
index a94aa7d6e..967abaad6 100644
--- a/app/Views/reports/specific_input.php
+++ b/app/Views/reports/specific_input.php
@@ -9,11 +9,10 @@
 
 <?= view('partial/header') ?>
 
-<script type="text/javascript">
-    dialog_support.init("a.modal-dlg");
-</script>
-
-<div id="page_title"><?= lang('Reports.report_input') ?></div>
+<?php
+$title_info['config_title'] = lang('Reports.report_input');
+echo view('configs/config_header', $title_info);
+?>
 
 <?php
 if (isset($error)) {
@@ -21,58 +20,65 @@ if (isset($error)) {
 }
 ?>
 
-<?= form_open('#', ['id' => 'item_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
+<?= form_open('#', ['id' => 'item_form', 'enctype' => 'multipart/form-data']) ?>
 
-    <div class="form-group form-group-sm">
-        <?= form_label(lang('Reports.date_range'), 'report_date_range_label', ['class' => 'control-label col-xs-2 required']) ?>
-        <div class="col-xs-3">
-            <?= form_input(['name' => 'daterangepicker', 'class' => 'form-control input-sm', 'id' => 'daterangepicker']) ?>
-        </div>
-    </div>
-
-    <?php if (isset($discount_type_options)) { ?>
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Reports.discount_type'), 'reports_discount_type_label', ['class' => 'required control-label col-xs-2']) ?>
-            <div id="report_discount_type" class="col-xs-3">
-                <?= form_dropdown('discount_type', $discount_type_options, $config['default_sales_discount_type'], ['id' => 'discount_type_id', 'class' => 'form-control']) ?>
+    <div class="row">
+        <div class="col-12 col-lg-6">
+            <label for="daterangepicker" class="form-label"><?= lang('Reports.date_range') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3">
+                <span class="input-group-text" id="daterangepicker-icon"><i class="bi bi-calendar2-range"></i></span>
+                <input type="text" class="form-select" name="daterangepicker" id="daterangepicker" aria-describedby="daterangepicker-icon" required>
             </div>
         </div>
-    <?php } ?>
-
-    <div class="form-group form-group-sm" id="report_specific_input_data">
-        <?= form_label($specific_input_name, 'specific_input_name_label', ['class' => 'required control-label col-xs-2']) ?>
-        <div class="col-xs-3 discount_percent">
-            <?= form_dropdown('specific_input_data', $specific_input_data, '', 'id="specific_input_data" class="form-control"') ?>
-        </div>
 
         <?php if (isset($discount_type_options)) { ?>
-            <div class="col-xs-3 discount_fixed">
-                <?= form_input([
-                    'name'  => 'discount_fixed',
-                    'id'    => 'discount_fixed',
-                    'class' => 'form-control input-sm required',
-                    'type'  => 'number',
-                    'min'   => 0,
-                    'value' => $config['default_sales_discount']
-                ]) ?>
+            <div class="col-12 col-lg-6">
+                <label for="reports_discount_type_label" class="form-label"><?= lang('Reports.discount_type') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+                <div class="input-group mb-3" id="report_discount_type">
+                    <span class="input-group-text"><i class="bi bi-patch-minus"></i></span>
+                    <select class="form-select" name="discount_type" id="discount_type_id" required>
+                        <?php foreach ($discount_type_options as $value => $label) { ?>
+                            <option value="<?= $value ?>" <?= $value == $config['default_sales_discount_type'] ? 'selected' : '' ?>><?= $label ?></option>
+                        <?php } ?>
+                    </select>
+                </div>
             </div>
         <?php } ?>
-    </div>
 
-    <div class="form-group form-group-sm">
-        <?= form_label(lang('Reports.sale_type'), 'reports_sale_type_label', ['class' => 'required control-label col-xs-2']) ?>
-        <div id="report_sale_type" class="col-xs-3">
-            <?= form_dropdown('sale_type', $sale_type_options, 'complete', 'id="input_type" class="form-control"') ?>
+        <div class="col-12 col-lg-6">
+            <label for="specific_input_name_label" class="form-label"><?= $specific_input_name ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3 discount_percent">
+                <span class="input-group-text"><i class="bi bi-dot"></i></span>
+                <select class="form-select w-25" name="specific_input_data" id="specific_input_data" required>
+                    <?php foreach ($specific_input_data as $value => $label) { ?>
+                        <option value="<?= $value ?>"><?= $label ?></option>
+                    <?php } ?>
+                </select>
+            </div>
+            <?php if (isset($discount_type_options)) { ?>
+                <div class="input-group mb-3 discount_fixed">
+                    <span class="input-group-text"><i class="bi bi-cash"></i></span>
+                    <input type="number" min="0" name="discount_fixed" id="discount_fixed" class="form-control" value="<?= $config['default_sales_discount'] ?>" required>
+                </div>
+            <?php } ?>
+        </div>
+
+        <div class="col-12 col-lg-6">
+            <label for="reports_sale_type_label" class="form-label"><?= lang('Reports.sale_type') ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+            <div class="input-group mb-3" id="report_sale_type">
+                <span class="input-group-text"><i class="bi bi-receipt"></i></span>
+                <select class="form-select" name="sale_type" id="input_type" required>
+                        <?php foreach ($sale_type_options as $value => $label) { ?>
+                            <option value="<?= $value ?>" <?= $value === 'complete' ? 'selected' : '' ?>><?= $label ?></option>
+                        <?php } ?>
+                </select>
+            </div>
         </div>
     </div>
 
-    <?php
-    echo form_button([
-        'name'    => 'generate_report',
-        'id'      => 'generate_report',
-        'content' => lang('Common.submit'),
-        'class'   => 'btn btn-primary btn-sm'
-    ]) ?>
+    <div class="d-flex justify-content-end">
+        <button type="button" class="btn btn-primary" name="generate_report" id="generate_report"><?= lang('Common.submit'); ?></button>
+    </div>
 
 <?= form_close() ?>
 
@@ -88,7 +94,7 @@ if (isset($error)) {
 
         $("#generate_report").click(function() {
             var specific_input_data = $('#specific_input_data').val();
-            if (!$(".discount_percent").is(":visible")) {
+            if ($('#discount_fixed').length && !$("#discount_percent").is(":visible")) {
                 specific_input_data = $('#discount_fixed').val();
             }
 
diff --git a/app/Views/reports/tabular.php b/app/Views/reports/tabular.php
index 02393513c..71866998b 100644
--- a/app/Views/reports/tabular.php
+++ b/app/Views/reports/tabular.php
@@ -11,18 +11,17 @@
 
 <?= view('partial/header') ?>
 
-<script type="text/javascript">
-    dialog_support.init("a.modal-dlg");
-</script>
+<?php
+$title_info['config_title'] = esc($title);
+echo view('configs/config_header', $title_info);
+?>
 
-<div id="page_title"><?= esc($title) ?></div>
-
-<div id="page_subtitle"><?= esc($subtitle) ?></div>
+<h5><?= esc($subtitle) ?></h5>
 
 <div id="toolbar">
-    <div class="pull-left form-inline" role="toolbar">
-        <button id="toggleCostProfitButton" class="btn btn-default btn-sm print_hide">
-            <?php echo lang('Reports.toggle_cost_and_profit'); ?>
+    <div class="d-flex gap-2">
+        <button type="button" class="btn btn-secondary d-print-none" id="toggleCostProfitButton">
+            <i class="bi bi-toggles"></i><span class="d-none d-sm-inline ms-2"><?= lang('Reports.toggle_cost_and_profit') ?></span>
         </button>
     </div>
 </div>
@@ -54,6 +53,7 @@
             .addClass("table-striped")
             .addClass("table-bordered")
             .bootstrapTable({
+                toolbar: '#toolbar',
                 columns: applyColumnVisibility(<?= transform_headers(esc($headers), true, false) ?>),
                 stickyHeader: true,
                 stickyHeaderOffsetLeft: $('#table').offset().left + 'px',
@@ -66,10 +66,13 @@
                 pagination: true,
                 showColumns: true,
                 data: <?= json_encode($data) ?>,
-                iconSize: 'sm',
                 paginationVAlign: 'bottom',
                 escape: true,
-                search: true
+                search: true,
+                loadingTemplate: function (loadingMessage) {
+                    return '<div class="w-100 h-100 bg-body text-center pt-2"><div class="spinner-grow spinner-grow-sm"></div><span class="ps-1" role="status">' + loadingMessage + '</span></div>'
+                },
+                loadingFontSize: '1em'
             });
     });
 </script>
diff --git a/app/Views/reports/tabular_details.php b/app/Views/reports/tabular_details.php
index 281b9e1b9..993a66291 100644
--- a/app/Views/reports/tabular_details.php
+++ b/app/Views/reports/tabular_details.php
@@ -12,15 +12,17 @@
 
 <?= view('partial/header') ?>
 
-<div id="page_title"><?= esc($title) ?></div>
+<?php
+$title_info['config_title'] = esc($title);
+echo view('configs/config_header', $title_info);
+?>
 
-<div id="page_subtitle"><?= esc($subtitle) ?></div>
+<h5><?= esc($subtitle) ?></h5>
 
 <div id="toolbar">
-    <div class="pull-left form-inline" role="toolbar">
-        <!-- Toggle Button -->
-        <button id="toggleCostProfitButton" class="btn btn-default btn-sm print_hide">
-            <?php echo lang('Reports.toggle_cost_and_profit'); ?>
+    <div class="d-flex gap-2">
+        <button type="button" class="btn btn-secondary d-print-none" id="toggleCostProfitButton">
+            <i class="bi bi-toggles"></i><span class="d-none d-sm-inline ms-2"><?= lang('Reports.toggle_cost_and_profit') ?></span>
         </button>
     </div>
 </div>
@@ -48,7 +50,7 @@
         var init_dialog = function () {
             <?php if (isset($editable)) { ?>
                 table_support.submit_handler('<?= esc(site_url("reports/get_detailed_$editable" . '_row')) ?>');
-                dialog_support.init("a.modal-dlg");
+                dialog_support.init("a.modal-launch");
             <?php } ?>
         };
 
@@ -56,6 +58,7 @@
             .addClass("table-striped")
             .addClass("table-bordered")
             .bootstrapTable({
+                toolbar: '#toolbar',
                 columns: applyColumnVisibility(<?= transform_headers(esc($headers['summary']), true) ?>),
                 stickyHeader: true,
                 stickyHeaderOffsetLeft: $('#table').offset().left + 'px',
@@ -69,14 +72,17 @@
                 exportDataType: 'all',
                 exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf'],
                 data: <?= json_encode($summary_data) ?>,
-                iconSize: 'sm',
+                loadingTemplate: function (loadingMessage) {
+                    return '<div class="w-100 h-100 bg-body text-center pt-2"><div class="spinner-grow spinner-grow-sm"></div><span class="ps-1" role="status">' + loadingMessage + '</span></div>'
+                },
+                loadingFontSize: '1em',
                 paginationVAlign: 'bottom',
                 detailView: true,
                 escape: true,
                 search: true,
                 onPageChange: init_dialog,
                 onPostBody: function () {
-                    dialog_support.init("a.modal-dlg");
+                    dialog_support.init("a.modal-launch");
                 },
                 onExpandRow: function (index, row, $detail) {
                     $detail.html('<table></table>').find("table").bootstrapTable({
diff --git a/app/Views/sales/form.php b/app/Views/sales/form.php
index 56c4a2555..f2bfa2922 100644
--- a/app/Views/sales/form.php
+++ b/app/Views/sales/form.php
@@ -165,8 +165,9 @@
                 if (confirm("<?= lang('Sales.invoice_confirm') . ' ' . $sale_info['email'] ?>")) {
                     $.get("<?= esc("$controller_name/sendPdf/" . $sale_info['sale_id']) ?>",
                         function(response) {
-                            BootstrapDialog.closeAll();
+                            dialog_support.hide();
                             $.notify({
+                                icon: 'bi bi-bell-fill',
                                 message: response.message
                             }, {
                                 type: response.success ? 'success' : 'danger'
diff --git a/app/Views/sales/help.php b/app/Views/sales/help.php
index 5c9cc82e8..8882b5f03 100644
--- a/app/Views/sales/help.php
+++ b/app/Views/sales/help.php
@@ -21,9 +21,9 @@ $shortcut_labels = [
 
 <div class="container-fluid">
 
-    <ul class="nav nav-tabs" id="SCTabs" data-toggle="tab">
-        <li class="active"><a href="#system_shortcuts" data-toggle="tab" title="<?= lang('Sales.key_system'); ?>"><?= lang('Sales.key_system'); ?></a></li>
-        <li><a href="#browser_shortcuts" data-toggle="tab" title="<?= lang('Sales.key_browser'); ?>"><?= lang('Sales.key_browser'); ?></a></li>
+    <ul class="nav nav-tabs" id="SCTabs" data-bs-toggle="tab">
+        <li class="active"><a href="#system_shortcuts" data-bs-toggle="tab" title="<?= lang('Sales.key_system'); ?>"><?= lang('Sales.key_system'); ?></a></li>
+        <li><a href="#browser_shortcuts" data-bs-toggle="tab" title="<?= lang('Sales.key_browser'); ?>"><?= lang('Sales.key_browser'); ?></a></li>
     </ul>
 
     <div class="tab-content">
diff --git a/app/Views/sales/invoice.php b/app/Views/sales/invoice.php
index 559e9a7b9..05e16f6ae 100644
--- a/app/Views/sales/invoice.php
+++ b/app/Views/sales/invoice.php
@@ -36,6 +36,7 @@ if (isset($error_message)) {
                 $.get('<?= site_url() . "sales/sendPdf/$sale_id_num" ?>',
                     function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
@@ -57,20 +58,20 @@ if (isset($error_message)) {
 
 <div class="print_hide" id="control_buttons" style="text-align: right;">
     <a href="javascript:printdoc();">
-        <div class="btn btn-info btn-sm" id="show_print_button"><?= '<i class="bi bi-printer icon-spacing"></i>' . lang('Common.print') ?></div>
+        <div class="btn btn-info btn-sm" id="show_print_button"><?= '<i class="bi bi-printer me-2"></i>' . lang('Common.print') ?></div>
     </a>
     <?php
     /* This line will allow to print and go back to sales automatically.
-     * echo anchor('sales', '<i class="bi bi-printer icon-spacing"></i>' . lang('Common.print'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_print_button', 'onclick' => 'window.print();'));
+     * echo anchor('sales', '<i class="bi bi-printer me-2"></i>' . lang('Common.print'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_print_button', 'onclick' => 'window.print();'));
      */
 ?>
     <?php if (isset($customer_email) && !empty($customer_email)): ?>
         <a href="javascript:void(0);">
-            <div class="btn btn-info btn-sm" id="show_email_button"><?= '<i class="bi bi-envelope icon-spacing"></i>' . lang('Sales.send_invoice') ?></div>
+            <div class="btn btn-info btn-sm" id="show_email_button"><?= '<i class="bi bi-envelope me-2"></i>' . lang('Sales.send_invoice') ?></div>
         </a>
     <?php endif; ?>
-    <?= anchor("sales", '<i class="bi bi-cart2 icon-spacing"></i>' . lang('Sales.register'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_sales_button']) ?>
-    <?= anchor("sales/manage", '<i class="bi bi-receipt-cutoff icon-spacing"></i>' . lang('Sales.takings'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_takings_button']) ?>
+    <?= anchor("sales", '<i class="bi bi-cart2 me-2"></i>' . lang('Sales.register'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_sales_button']) ?>
+    <?= anchor("sales/manage", '<i class="bi bi-receipt-cutoff me-2"></i>' . lang('Sales.takings'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_takings_button']) ?>
 </div>
 
 <div id="page-wrap">
diff --git a/app/Views/sales/manage.php b/app/Views/sales/manage.php
index d01797040..e96102032 100644
--- a/app/Views/sales/manage.php
+++ b/app/Views/sales/manage.php
@@ -12,6 +12,11 @@
 
 <?= view('partial/header') ?>
 
+<?php
+$title_info['config_title'] = 'Sales';
+echo view('configs/config_header', $title_info);
+?>
+
 <script type="text/javascript">
     $(document).ready(function() {
         // When any filter is clicked and the dropdown window is closed
@@ -72,28 +77,36 @@
 
 <?= view('partial/print_receipt', ['print_after_sale' => false, 'selected_printer' => 'takings_printer']) ?>
 
-<div id="title_bar" class="print_hide btn-toolbar">
-    <button onclick="printdoc()" class="btn btn-info btn-sm pull-right">
-        <i class="bi bi-printer icon-spacing"></i><?= lang('Common.print') ?>
+<div class="d-flex gap-2 justify-content-end d-print-none">
+    <a type="button" class="btn btn-primary" href="sales" title="<?= lang('Sales.register') ?>">
+        <i class="bi bi-arrow-left-circle me-2"></i><?= lang('Sales.register') ?>
+    </a>
+    <button type="button" class="btn btn-primary" onclick="window.print()" title="<?= lang('Common.print') ?>">
+        <i class="bi bi-printer me-2"></i><?= lang('Common.print') ?>
     </button>
-    <?= anchor("sales", '<i class="bi bi-cart2 icon-spacing"></i>' . lang('Sales.register'), ['class' => 'btn btn-info btn-sm pull-right', 'id' => 'show_sales_button']) ?>
 </div>
 
 <div id="toolbar">
-    <div class="pull-left form-inline" role="toolbar">
-        <button id="delete" class="btn btn-default btn-sm print_hide">
-            <i class="bi bi-trash icon-spacing"></i><?= lang('Common.delete') ?>
+    <div class="d-flex gap-2">
+        <button type="button" id="delete" class="btn btn-secondary d-print-none">
+            <i class="bi bi-trash"></i><span class="d-none d-sm-inline ms-2"><?= lang('Common.delete') ?></span>
         </button>
 
-        <?= form_input(['name' => 'daterangepicker', 'class' => 'form-control input-sm', 'id' => 'daterangepicker']) ?>
-        <?= form_multiselect('filters[]', $filters, $selected_filters, [
-            'id'                        => 'filters',
-            'data-none-selected-text'   => lang('Common.none_selected_text'),
-            'class'                     => 'selectpicker show-menu-arrow',
-            'data-selected-text-format' => 'count > 1',
-            'data-style'                => 'btn-default btn-sm',
-            'data-width'                => 'fit'
-        ]) ?>
+        <div class="input-group w-auto">
+            <span class="input-group-text" id="daterangepicker-icon"><i class="bi bi-calendar2-range"></i></span>
+            <input type="text" class="form-select" name="daterangepicker" id="daterangepicker" aria-describedby="daterangepicker-icon">
+        </div>
+
+        <div class="input-group w-auto">
+            <span class="input-group-text" id="filters-icon"><i class="bi bi-funnel"></i></span>
+            <select class="form-select" name="filters[]" id="filters" aria-describedby="filters-icon" multiple>
+                <?php foreach (esc($filters) as $value => $label) { ?>
+                    <option value="<?= $value ?>" <?= in_array($value, $selected_filters ?? []) ? 'selected' : '' ?>>
+                        <?= $label ?>
+                    </option>
+                <?php } ?>
+            </select>
+        </div>
     </div>
 </div>
 
@@ -105,3 +118,15 @@
 </div>
 
 <?= view('partial/footer') ?>
+
+<script type="text/javascript">
+    new TomSelect('#filters', {
+        plugins: ['checkbox_options', 'remove_button'],
+        placeholder: '<?= lang('Common.none_selected_text') ?>',
+        hidePlaceholder: true,
+        closeAfterSelect: false,
+        onChange: function() {
+            $('#table').bootstrapTable('refresh');
+        }
+    });
+</script>
diff --git a/app/Views/sales/quote.php b/app/Views/sales/quote.php
index 4e793dfa8..d89fd0320 100644
--- a/app/Views/sales/quote.php
+++ b/app/Views/sales/quote.php
@@ -32,6 +32,7 @@ if (isset($error_message)) {
                 $.get('<?= site_url() . esc("/sales/sendPdf/$sale_id_num/quote") ?>',
                     function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
@@ -53,20 +54,20 @@ if (isset($error_message)) {
 
 <div class="print_hide" id="control_buttons" style="text-align: right;">
     <a href="javascript:printdoc();">
-        <div class="btn btn-info btn-sm" id="show_print_button"><?= '<i class="bi bi-printer icon-spacing"></i>' . lang('Common.print') ?></div>
+        <div class="btn btn-info btn-sm" id="show_print_button"><?= '<i class="bi bi-printer me-2"></i>' . lang('Common.print') ?></div>
     </a>
     <?php
     /* This line will allow to print and go back to sales automatically.
-     * echo anchor('sales', '<i class="bi bi-printer icon-spacing"></i>' . lang('Common.print'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_print_button', 'onclick' => 'window.print();'));
+     * echo anchor('sales', '<i class="bi bi-printer me-2"></i>' . lang('Common.print'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_print_button', 'onclick' => 'window.print();'));
      */
     ?>
     <?php if (isset($customer_email) && !empty($customer_email)): ?>
         <a href="javascript:void(0);">
-            <div class="btn btn-info btn-sm" id="show_email_button"><?= '<i class="bi bi-envelope icon-spacing"></i>' . lang('Sales.send_quote') ?></div>
+            <div class="btn btn-info btn-sm" id="show_email_button"><?= '<i class="bi bi-envelope me-2"></i>' . lang('Sales.send_quote') ?></div>
         </a>
     <?php endif; ?>
-    <?= anchor('sales', '<i class="bi bi-cart2 icon-spacing"></i>' . lang('Sales.register'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_sales_button']) ?>
-    <?= anchor('sales/discardsuspendedsale', '<i class="bi bi-x-circle icon-spacing"></i>' . lang('Sales.discard'), ['class' => 'btn btn-danger btn-sm', 'id' => 'discard_quote_button']) ?>
+    <?= anchor('sales', '<i class="bi bi-cart2 me-2"></i>' . lang('Sales.register'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_sales_button']) ?>
+    <?= anchor('sales/discardsuspendedsale', '<i class="bi bi-x-circle me-2"></i>' . lang('Sales.discard'), ['class' => 'btn btn-danger btn-sm', 'id' => 'discard_quote_button']) ?>
 </div>
 
 <div id="page-wrap">
diff --git a/app/Views/sales/receipt.php b/app/Views/sales/receipt.php
index fec0508c0..1c220d50c 100644
--- a/app/Views/sales/receipt.php
+++ b/app/Views/sales/receipt.php
@@ -28,6 +28,7 @@ if (isset($error_message)) {
                 $.get('<?= site_url() . esc("/sales/sendPdf/$sale_id_num/receipt") ?>',
                     function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
@@ -49,18 +50,18 @@ if (isset($error_message)) {
 
 <div class="print_hide" id="control_buttons" style="text-align: right;">
     <a href="javascript:printdoc();">
-        <div class="btn btn-info btn-sm" id="show_print_button"><?= '<i class="bi bi-printer icon-spacing"></i>' . lang('Common.print') ?></div>
+        <div class="btn btn-info btn-sm" id="show_print_button"><?= '<i class="bi bi-printer me-2"></i>' . lang('Common.print') ?></div>
     </a>
     <?php if (!empty($customer_email)): ?>
         <a href="javascript:void(0);">
-            <div class="btn btn-info btn-sm" id="show_email_button"><?= '<i class="bi bi-envelope icon-spacing"></i>' . lang('Sales.send_receipt') ?></div>
+            <div class="btn btn-info btn-sm" id="show_email_button"><?= '<i class="bi bi-envelope me-2"></i>' . lang('Sales.send_receipt') ?></div>
         </a>
     <?php endif; ?>
-    <?= anchor('sales', '<i class="bi bi-cart2 icon-spacing"></i>' . lang('Sales.register'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_sales_button']) ?>
+    <?= anchor('sales', '<i class="bi bi-cart2 me-2"></i>' . lang('Sales.register'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_sales_button']) ?>
     <?php
     $employee = model(Employee::class);
     if ($employee->has_grant('reports_sales', session('person_id'))): ?>
-        <?= anchor('sales/manage', '<i class="bi bi-receipt-cutoff icon-spacing"></i>' . lang('Sales.takings'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_takings_button']) ?>
+        <?= anchor('sales/manage', '<i class="bi bi-receipt-cutoff me-2"></i>' . lang('Sales.takings'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_takings_button']) ?>
     <?php endif; ?>
 </div>
 
diff --git a/app/Views/sales/register.php b/app/Views/sales/register.php
index 85e03ebd3..97f3ad233 100644
--- a/app/Views/sales/register.php
+++ b/app/Views/sales/register.php
@@ -45,6 +45,11 @@ use App\Models\Employee;
 
 <?= view('partial/header') ?>
 
+<?php
+$title_info['config_title'] = 'Sales Register';
+echo view('configs/config_header', $title_info);
+?>
+
 <?php
 if (isset($error)) {
     echo '<div class="alert alert-dismissible alert-danger">' . esc($error) . '</div>';
@@ -61,552 +66,259 @@ if (isset($success)) {
 helper('url');
 ?>
 
-<div id="register_wrapper">
+<div class="mw-register">
+    <?= form_open("$controller_name/changeMode", ['id' => 'mode_form', 'class' => 'mw-register card bg-secondary-subtle rounded-bottom-0']) ?>
 
-    <!-- Top register controls -->
-    <?= form_open("$controller_name/changeMode", ['id' => 'mode_form', 'class' => 'form-horizontal panel panel-default']) ?>
-        <div class="panel-body form-group">
-            <ul>
-                <li class="pull-left first_li">
-                    <label class="control-label"><?= lang(ucfirst($controller_name) . '.mode') ?></label>
-                </li>
-                <li class="pull-left">
-                    <?= form_dropdown('mode', $modes, $mode, ['onchange' => "$('#mode_form').submit();", 'class' => 'selectpicker show-menu-arrow', 'data-style' => 'btn-default btn-sm', 'data-width' => 'fit']) ?>
-                </li>
-                <?php if ($config['dinner_table_enable']) { ?>
-                    <li class="pull-left first_li">
-                        <label class="control-label"><?= lang(ucfirst($controller_name) . '.table') ?></label>
-                    </li>
-                    <li class="pull-left">
-                        <?= form_dropdown('dinner_table', $empty_tables, $selected_table, ['onchange' => "$('#mode_form').submit();", 'class' => 'selectpicker show-menu-arrow', 'data-style' => 'btn-default btn-sm', 'data-width' => 'fit']) ?>
-                    </li>
-                <?php } ?>
-                <?php if (count($stock_locations) > 1) { ?>
-                    <li class="pull-left">
-                        <label class="control-label"><?= lang(ucfirst($controller_name) . '.stock_location') ?></label>
-                    </li>
-                    <li class="pull-left">
-                        <?= form_dropdown('stock_location', $stock_locations, $stock_location, ['onchange' => "$('#mode_form').submit();", 'class' => 'selectpicker show-menu-arrow', 'data-style' => 'btn-default btn-sm', 'data-width' => 'fit']) ?>
-                    </li>
-                <?php } ?>
-
-                <li class="pull-right">
-                    <button class="btn btn-default btn-sm modal-dlg" id="show_suspended_sales_button" data-href="<?= esc("$controller_name/suspended") ?>" title="<?= lang(ucfirst($controller_name) . '.suspended_sales') ?>">
-                        <i class="bi bi-pause-circle icon-spacing"></i><?= lang(ucfirst($controller_name) . '.suspended_sales') ?>
+        <!-- Top register controls -->
+        <div class="card-body">
+            <div class="d-flex">
+                <div class="me-auto pe-2">
+                    <div class="input-group">
+                        <span class="input-group-text" id="mode_select"><?= lang(ucfirst($controller_name) .'.mode') ?></span>
+                        <?= form_dropdown('mode', $modes, $mode, ['onchange' => "$('#mode_form').submit();", 'class' => 'form-select', 'aria-describedby' => 'mode_select']) ?>
+                    <?php if ($config['dinner_table_enable']) { ?>
+                        <span class="input-group-text" id="dinner_table_select"><?= lang(ucfirst($controller_name) .'.table') ?></span>
+                        <?= form_dropdown('dinner_table', $empty_tables, $selected_table, ['onchange' => "$('#mode_form').submit();", 'class' => 'form-select', 'aria-describedby' => 'dinner_table_select']) ?>
+                    <?php } ?>
+                    <?php if (count($stock_locations) > 1) { ?>
+                        <span class="input-group-text" id="stock_location_select"><?= lang(ucfirst($controller_name) .'.stock_location') ?></span>
+                        <?= form_dropdown('stock_location', $stock_locations, $stock_location, ['onchange' => "$('#mode_form').submit();", 'class' => 'form-select', 'aria-describedby' => 'stock_location_select']) ?>
+                    <?php } ?>
+                    </div>
+                </div>
+                <div class="d-flex gap-2">
+                    <?php
+                    $employee = model(Employee::class);
+                    if ($employee->has_grant('reports_sales', session('person_id'))) {
+                    ?>
+                        <a type="button" class="btn btn-primary" id="sales_takings_button" href="<?= base_url("$controller_name/manage") ?>" title="<?= lang(ucfirst($controller_name) .'.takings') ?>">
+                            <i class="bi bi-receipt-cutoff me-2"></i><?= lang(ucfirst($controller_name) .'.takings') ?>
+                        </a>
+                    <?php } ?>
+                    <button type="button" class="btn btn-primary modal-launch" id="show_suspended_sales_button" data-href="<?= esc("$controller_name/suspended") ?>" title="<?= lang(ucfirst($controller_name) .'.suspended_sales') ?>">
+                        <i class="bi bi-pause-circle me-2"></i><?= lang(ucfirst($controller_name) .'.suspended_sales') ?>
                     </button>
-                </li>
-
-                <?php
-                $employee = model(Employee::class);
-                if ($employee->has_grant('reports_sales', session('person_id'))) {
-                ?>
-                    <li class="pull-right">
-                        <?= anchor(
-                            "$controller_name/manage",
-                            '<i class="bi bi-receipt-cutoff icon-spacing"></i>' . lang(ucfirst($controller_name) . '.takings'),
-                            array('class' => 'btn btn-primary btn-sm', 'id' => 'sales_takings_button', 'title' => lang(ucfirst($controller_name) . '.takings'))
-                        ) ?>
-                    </li>
-                <?php } ?>
-            </ul>
+                </div>
+            </div>
         </div>
     <?= form_close() ?>
 
     <?php $tabindex = 0; ?>
 
-    <?= form_open("$controller_name/add", ['id' => 'add_item_form', 'class' => 'form-horizontal panel panel-default']) ?>
-        <div class="panel-body form-group">
-            <ul>
-                <li class="pull-left first_li">
-                    <label for="item" class="control-label"><?= lang(ucfirst($controller_name) . '.find_or_scan_item_or_receipt') ?></label>
-                </li>
-                <li class="pull-left">
-                    <?= form_input(['name' => 'item', 'id' => 'item', 'class' => 'form-control input-sm', 'size' => '50', 'tabindex' => ++$tabindex]) ?>
-                    <span class="ui-helper-hidden-accessible" role="status"></span>
-                </li>
-                <li class="pull-right">
-                    <button id="new_item_button" class="btn btn-info btn-sm pull-right modal-dlg" data-btn-new="<?= lang('Common.new') ?>" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "items/view" ?>" title="<?= lang(ucfirst($controller_name) . ".new_item") ?>">
-                        <i class="bi bi-tag icon-spacing"></i><?= lang(ucfirst($controller_name) . ".new_item") ?>
-                    </button>
-                </li>
-            </ul>
-        </div>
-    <?= form_close() ?>
-
-
-    <!-- Sale Items List -->
-
-    <table class="sales_table_100" id="register">
-        <thead>
-            <tr>
-                <th style="width: 5%;"><?= lang('Common.delete') ?></th>
-                <th style="width: 15%;"><?= lang(ucfirst($controller_name) . '.item_number') ?></th>
-                <th style="width: 30%;"><?= lang(ucfirst($controller_name) . '.item_name') ?></th>
-                <th style="width: 10%;"><?= lang(ucfirst($controller_name) . '.price') ?></th>
-                <th style="width: 10%;"><?= lang(ucfirst($controller_name) . '.quantity') ?></th>
-                <th style="width: 15%;"><?= lang(ucfirst($controller_name) . '.discount') ?></th>
-                <th style="width: 10%;"><?= lang(ucfirst($controller_name) . '.total') ?></th>
-                <th style="width: 5%;"><?= lang(ucfirst($controller_name) . '.update') ?></th>
-            </tr>
-        </thead>
-
-        <tbody id="cart_contents">
-            <?php if (count($cart) == 0) { ?>
-                <tr>
-                    <td colspan="8">
-                        <div class="alert alert-dismissible alert-info"><?= lang(ucfirst($controller_name) . '.no_items_in_cart') ?></div>
-                    </td>
-                </tr>
-            <?php
-            } else {
-                foreach (array_reverse($cart, true) as $line => $item) {
-            ?>
-                    <?= form_open("$controller_name/editItem/$line", ['class' => 'form-horizontal', 'id' => "cart_$line"]) ?>
-                        <tr>
-                            <td>
-                                <?php
-                                echo anchor("$controller_name/deleteItem/$line", '<i class="bi bi-trash"></i>');
-                                echo form_hidden('location', (string)$item['item_location']);
-                                echo form_input(['type' => 'hidden', 'name' => 'item_id', 'value' => $item['item_id']]);
-                                ?>
-                            </td>
-                            <?php if ($item['item_type'] == ITEM_TEMP) { ?>
-                                <td><?= form_input(['name' => 'item_number', 'id' => 'item_number', 'class' => 'form-control input-sm', 'value' => $item['item_number'], 'tabindex' => ++$tabindex]) ?></td>
-                                <td style="text-align: center;">
-                                    <?= form_input(['name' => 'name', 'id' => 'name', 'class' => 'form-control input-sm', 'value' => $item['name'], 'tabindex' => ++$tabindex]) ?>
-                                </td>
-                            <?php } else { ?>
-                                <td><?= esc($item['item_number']) ?></td>
-                                <td style="text-align: center;">
-                                    <?= esc($item['name']) . ' ' . esc(implode(' ', [$item['attribute_values'], $item['attribute_dtvalues']])) ?>
-                                    <br>
-                                    <?php if ($item['stock_type'] == '0'): echo '[' . to_quantity_decimals($item['in_stock']) . ' in ' . esc($item['stock_name']) . ']';
-                                    endif; ?>
-                                </td>
-                            <?php } ?>
-
-                            <td>
-                                <?php
-                                if ($items_module_allowed && $change_price) {
-                                    echo form_input(['name' => 'price', 'class' => 'form-control input-sm', 'value' => to_currency_no_money($item['price']), 'tabindex' => ++$tabindex, 'onClick' => 'this.select();']);
-                                } else {
-                                    echo to_currency($item['price']);
-                                    echo form_hidden('price', to_currency_no_money($item['price']));
-                                }
-                                ?>
-                            </td>
-
-                            <td>
-                                <?php
-                                if ($item['is_serialized']) {
-                                    echo to_quantity_decimals($item['quantity']);
-                                    echo form_hidden('quantity', $item['quantity']);
-                                } else {
-                                    echo form_input(['name' => 'quantity', 'class' => 'form-control input-sm', 'value' => to_quantity_decimals($item['quantity']), 'tabindex' => ++$tabindex, 'onClick' => 'this.select();']);
-                                }
-                                ?>
-                            </td>
-
-                            <td>
-                                <div class="input-group">
-                                    <?= form_input(['name' => 'discount', 'class' => 'form-control input-sm', 'value' => $item['discount_type'] ? to_currency_no_money($item['discount']) : to_decimals($item['discount']), 'tabindex' => ++$tabindex, 'onClick' => 'this.select();']) ?>
-                                    <span class="input-group-btn">
-                                        <?= form_checkbox(['id' => 'discount_toggle', 'name' => 'discount_toggle', 'value' => 1, 'data-toggle' => "toggle", 'data-size' => 'small', 'data-onstyle' => 'success', 'data-on' => '<b>' . $config['currency_symbol'] . '</b>', 'data-off' => '<b>%</b>', 'data-line' => $line, 'checked' => $item['discount_type'] == 1]) ?>
-                                    </span>
-                                </div>
-                            </td>
-
-                            <td>
-                                <?php
-                                if ($item['item_type'] == ITEM_AMOUNT_ENTRY) {    // TODO: === ?
-                                    echo form_input(['name' => 'discounted_total', 'class' => 'form-control input-sm', 'value' => to_currency_no_money($item['discounted_total']), 'tabindex' => ++$tabindex, 'onClick' => 'this.select();']);
-                                } else {
-                                    echo to_currency($item['discounted_total']);
-                                }
-                                ?>
-                            </td>
-
-                            <td>
-                                <a href="javascript:document.getElementById('<?= "cart_$line" ?>').submit();" title="<?= lang(ucfirst($controller_name) . '.update') ?>">
-                                    <i class="bi bi-arrow-repeat"></i>
-                                </a>
-                            </td>
-                        </tr>
-                        <tr>
-                            <?php if ($item['item_type'] == ITEM_TEMP) { ?>
-                                <td><?= form_input(['type' => 'hidden', 'name' => 'item_id', 'value' => $item['item_id']]) ?></td>
-                                <td style="text-align: center;" colspan="6">
-                                    <?= form_input(['name' => 'item_description', 'id' => 'item_description', 'class' => 'form-control input-sm', 'value' => $item['description'], 'tabindex' => ++$tabindex]) ?>
-                                </td>
-                                <td> </td>
-                            <?php } else { ?>
-                                <td>&nbsp;</td>
-                                <?php if ($item['allow_alt_description']) { ?>
-                                    <td style="color: #2F4F4F;"><?= lang(ucfirst($controller_name) . '.description_abbrv') ?></td>
-                                <?php } ?>
-
-                                <td colspan="2" style="text-align: left;">
-                                    <?php
-                                    if ($item['allow_alt_description']) {
-                                        echo form_input(['name' => 'description', 'class' => 'form-control input-sm', 'value' => $item['description'], 'onClick' => 'this.select();']);
-                                    } else {
-                                        if ($item['description'] != '') {
-                                            echo esc($item['description']);
-                                            echo form_hidden('description', $item['description']);
-                                        } else {
-                                            echo lang(ucfirst($controller_name) . '.no_description');
-                                            echo form_hidden('description', '');
-                                        }
-                                    }
-                                    ?>
-                                </td>
-                                <td>&nbsp;</td>
-                                <td style="color: #2F4F4F;">
-                                    <?php
-                                    if ($item['is_serialized']) {
-                                        echo lang(ucfirst($controller_name) . '.serial');
-                                    }
-                                    ?>
-                                </td>
-                                <td colspan="4" style="text-align: left;">
-                                    <?php
-                                    if ($item['is_serialized']) {
-                                        echo form_input(['name' => 'serialnumber', 'class' => 'form-control input-sm', 'value' => $item['serialnumber'], 'onClick' => 'this.select();']);
-                                    } else {
-                                        echo form_hidden('serialnumber', '');
-                                    }
-                                    ?>
-                                </td>
-                            <?php } ?>
-                        </tr>
-                    <?= form_close() ?>
-            <?php
-                }
-            }
-            ?>
-        </tbody>
-    </table>
-</div>
-
-<!-- Overall Sale -->
-
-<div id="overall_sale" class="panel panel-default">
-    <div class="panel-body">
-        <?= form_open("$controller_name/selectCustomer", ['id' => 'select_customer_form', 'class' => 'form-horizontal']) ?>
-            <?php if (isset($customer)) { ?>
-                <table class="sales_table_100">
-                    <tr>
-                        <th style="width: 55%;"><?= lang(ucfirst($controller_name) . '.customer') ?></th>
-                        <th style="width: 45%; text-align: right;"><?= anchor("customers/view/$customer_id", esc($customer), ['class' => 'modal-dlg', 'data-btn-submit' => lang('Common.submit'), 'title' => lang('Customers.update')]) ?></th>
-                    </tr>
-                    <?php if (!empty($customer_email)) { ?>
-                        <tr>
-                            <th style="width: 55%;"><?= lang(ucfirst($controller_name) . '.customer_email') ?></th>
-                            <th style="width: 45%; text-align: right;"><?= esc($customer_email) ?></th>
-                        </tr>
-                    <?php } ?>
-                    <?php if (!empty($customer_address)) { ?>
-                        <tr>
-                            <th style="width: 55%;"><?= lang(ucfirst($controller_name) . '.customer_address') ?></th>
-                            <th style="width: 45%; text-align: right;"><?= esc($customer_address) ?></th>
-                        </tr>
-                    <?php } ?>
-                    <?php if (!empty($customer_location)) { ?>
-                        <tr>
-                            <th style="width: 55%;"><?= lang(ucfirst($controller_name) . '.customer_location') ?></th>
-                            <th style="width: 45%; text-align: right;"><?= esc($customer_location) ?></th>
-                        </tr>
-                    <?php } ?>
-                    <tr>
-                        <th style="width: 55%;"><?= lang(ucfirst($controller_name) . '.customer_discount') ?></th>
-                        <th style="width: 45%; text-align: right;"><?= ($customer_discount_type == FIXED) ? to_currency($customer_discount) : $customer_discount . '%' ?></th>
-                    </tr>
-                    <?php if ($config['customer_reward_enable']): ?>
-                        <?php if (!empty($customer_rewards)) { ?>
-                            <tr>
-                                <th style="width: 55%;"><?= lang(ucfirst($controller_name) . '.rewards_package') ?></th>
-                                <th style="width: 45%; text-align: right;"><?= esc($customer_rewards['package_name']) ?></th>
-                            </tr>
-                            <tr>
-                                <th style="width: 55%;"><?= lang('Customers.available_points') ?></th>
-                                <th style="width: 45%; text-align: right;"><?= esc($customer_rewards['points']) ?></th>
-                            </tr>
-                        <?php } ?>
-                    <?php endif; ?>
-                    <tr>
-                        <th style="width: 55%;"><?= lang(ucfirst($controller_name) . '.customer_total') ?></th>
-                        <th style="width: 45%; text-align: right;"><?= to_currency($customer_total) ?></th>
-                    </tr>
-                    <?php if (!empty($mailchimp_info)) { ?>
-                        <tr>
-                            <th style="width: 55%;"><?= lang(ucfirst($controller_name) . '.customer_mailchimp_status') ?></th>
-                            <th style="width: 45%; text-align: right;"><?= esc($mailchimp_info['status']) ?></th>
-                        </tr>
-                    <?php } ?>
-                </table>
-
-                <?= anchor(
-                    "$controller_name/removeCustomer",
-                    '<i class="bi bi-x-circle icon-spacing"></i>' . lang('Common.remove') . ' ' . lang('Customers.customer'),
-                    ['class' => 'btn btn-danger btn-sm', 'id' => 'remove_customer_button', 'title' => lang('Common.remove') . ' ' . lang('Customers.customer')]
-                )
-                ?>
-            <?php } else { ?>
-                <div class="form-group" id="select_customer">
-                    <label id="customer_label" for="customer" class="control-label" style="margin-bottom: 1em; margin-top: -1em;">
-                        <?= lang(ucfirst($controller_name) . '.select_customer') . esc(" $customer_required") ?>
-                    </label>
-                    <?= form_input(['name' => 'customer', 'id' => 'customer', 'class' => 'form-control input-sm', 'value' => lang(ucfirst($controller_name) . '.start_typing_customer_name')]) ?>
-
-                    <button class="btn btn-info btn-sm modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= "customers/view" ?>" title="<?= lang(ucfirst($controller_name) . ".new_customer") ?>">
-                        <i class="bi bi-person-add icon-spacing"></i><?= lang(ucfirst($controller_name) . ".new_customer") ?>
-                    </button>
-                    <button class="btn btn-default btn-sm modal-dlg" id="show_keyboard_help" data-href="<?= esc("$controller_name/salesKeyboardHelp") ?>" title="<?= lang(ucfirst($controller_name) . '.key_title') ?>">
-                        <i class="bi bi-keyboard icon-spacing"></i><?= lang(ucfirst($controller_name) . '.key_help') ?>
-                    </button>
-                </div>
-            <?php } ?>
-        <?= form_close() ?>
-
-        <table class="sales_table_100" id="sale_totals">
-            <tr>
-                <th style="width: 55%;"><?= lang(ucfirst($controller_name) . '.quantity_of_items', [$item_count]) ?></th>
-                <th style="width: 45%; text-align: right;"><?= $total_units ?></th>
-            </tr>
-            <tr>
-                <th style="width: 55%;"><?= lang(ucfirst($controller_name) . '.sub_total') ?></th>
-                <th style="width: 45%; text-align: right;"><?= to_currency($subtotal) ?></th>
-            </tr>
-            <?php foreach ($taxes as $tax_group_index => $tax) { ?>
-                <tr>
-                    <th style="width: 55%;"><?= (float)$tax['tax_rate'] . '% ' . $tax['tax_group'] ?></th>
-                    <th style="width: 45%; text-align: right;"><?= to_currency_tax($tax['sale_tax_amount']) ?></th>
-                </tr>
-            <?php } ?>
-            <tr>
-                <th style="width: 55%; font-size: 150%"><?= lang(ucfirst($controller_name) . '.total') ?></th>
-                <th style="width: 45%; font-size: 150%; text-align: right;"><span id="sale_total"><?= to_currency($total) ?></span></th>
-            </tr>
-        </table>
-
-        <?php if (count($cart) > 0) { // Only show this part if there are Items already in the register ?>
-            <table class="sales_table_100" id="payment_totals">
-                <tr>
-                    <th style="width: 55%;"><?= lang(ucfirst($controller_name) . '.payments_total') ?></th>
-                    <th style="width: 45%; text-align: right;"><?= to_currency($payments_total) ?></th>
-                </tr>
-                <tr>
-                    <th style="width: 55%; font-size: 120%"><?= lang(ucfirst($controller_name) . '.amount_due') ?></th>
-                    <th style="width: 45%; font-size: 120%; text-align: right;"><span id="sale_amount_due"><?= to_currency($amount_due) ?></span></th>
-                </tr>
-            </table>
-
-            <div id="payment_details">
-                <?php if ($payments_cover_total) { // Show Complete sale button instead of Add Payment if there is no amount due left ?>
-                    <?= form_open("$controller_name/addPayment", ['id' => 'add_payment_form', 'class' => 'form-horizontal']) ?>
-                        <input type="hidden" name="complete_after_payment" value="0">
-                        <table class="sales_table_100">
-                            <tr>
-                                <td><?= lang(ucfirst($controller_name) . '.payment') ?></td>
-                                <td>
-                                    <?= form_dropdown('payment_type', $payment_options, $selected_payment_type, ['id' => 'payment_types', 'class' => 'selectpicker show-menu-arrow', 'data-style' => 'btn-default btn-sm', 'data-width' => '100%', 'disabled' => 'disabled']) ?>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td><span id="amount_tendered_label"><?= lang(ucfirst($controller_name) . '.amount_tendered') ?></span></td>
-                                <td>
-                                    <?= form_input([
-                                        'name' => 'amount_tendered',
-                                        'id' => 'amount_tendered',
-                                        'class' => 'form-control input-sm disabled',
-                                        'disabled' => 'disabled',
-                                        'value' => '0',
-                                        'size' => '5',
-                                        'tabindex' => ++$tabindex,
-                                        'onClick' => 'this.select();'
-                                    ]) ?>
-                                </td>
-                            </tr>
-                            <tr class="reference-code-input reference-code-input-hidden">
-                                <td style="padding-top: 8px;"><span id='reference_code_label'><?= lang('Sales.reference_code') ?></span></td>
-                                <td style="padding-top: 8px;">
-                                    <?php echo form_input(array(
-                                        'name'	=> 'reference_code',
-                                        'id'	=> 'reference_code',
-                                        'class'	=> 'form-control input-sm non-giftcard-input',
-                                        'disabled' => true,
-                                        'value'	=> '',
-                                        'size' => 5,
-                                        'tabindex'	=> ++$tabindex,
-                                        'onClick'	=> 'this.select();'));
-                                    ?>
-                                </td>
-                            </tr>
-                        </table>
-                    <?= form_close() ?>
-
-                    <?php
-                    // Only show this part if in sale or return mode
-                    if ($pos_mode) {
-                        $due_payment = false;
-
-                        if (count($payments) > 0) {
-                            foreach ($payments as $payment_id => $payment) {
-                                if ($payment['payment_type'] == lang(ucfirst($controller_name) . '.due')) {
-                                    $due_payment = true;
-                                }
-                            }
-                        }
-
-                        if (!$due_payment || ($due_payment && isset($customer))) {    // TODO: $due_payment is not needed because the first clause insures that it will always be true if it gets to this point.  Can be shortened to if (!$due_payment || isset($customer))
-                    ?>
-                            <div class="btn btn-sm btn-success pull-right" id="finish_sale_button" tabindex="<?= ++$tabindex ?>">
-                                <i class="bi bi-check-circle icon-spacing"></i><?= lang(ucfirst($controller_name) . '.complete_sale') ?>
+    <div class="row">
+        <div class="col-8">
+            <div class="row">
+                <div class="col-12 pe-0">
+                    <?= form_open("$controller_name/add", ['id' => 'add_item_form', 'class' => 'card bg-primary-subtle border-top-0 border-bottom-0 rounded-0']) ?>
+                        <div class="card-body d-flex gap-2">
+                            <div class="input-group">
+                                <span class="input-group-text text-primary border-primary-subtle" data-bs-toggle="tooltip" data-bs-placement="right" title="<?= lang(ucfirst($controller_name) .'.find_or_scan_item_or_receipt') ?>">
+                                    <i class="bi bi-search"></i>
+                                </span>
+                                <input type="text" name="item" id="item" class="form-control border-primary-subtle" tabindex="<?= ++$tabindex ?>">
                             </div>
-                    <?php
-                        }
-                    }
-                    ?>
-                <?php } else { ?>
-                    <?= form_open("$controller_name/addPayment", ['id' => 'add_payment_form', 'class' => 'form-horizontal']) ?>
-                        <input type="hidden" name="complete_after_payment" value="0">
-                        <table class="sales_table_100">
-                            <tr>
-                                <td><?= lang(ucfirst($controller_name) . '.payment') ?></td>
-                                <td>
-                                    <?= form_dropdown('payment_type', $payment_options,  $selected_payment_type, ['id' => 'payment_types', 'class' => 'selectpicker show-menu-arrow', 'data-style' => 'btn-default btn-sm', 'data-width' => '100%']) ?>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td><span id="amount_tendered_label"><?= lang(ucfirst($controller_name) . '.amount_tendered') ?></span></td>
-                                <td>
-                                    <?= form_input(['name' => 'amount_tendered', 'id' => 'amount_tendered', 'class' => 'form-control input-sm non-giftcard-input', 'value' => to_currency_no_money($amount_due), 'size' => '5', 'tabindex' => ++$tabindex, 'onClick' => 'this.select();']) ?>
-                                    <?= form_input(['name' => 'amount_tendered', 'id' => 'amount_tendered', 'class' => 'form-control input-sm giftcard-input', 'disabled' => true, 'value' => to_currency_no_money($amount_due), 'size' => '5', 'tabindex' => ++$tabindex]) ?>
-                                </td>
-                            </tr>
-                            <tr class="reference-code-input reference-code-input-hidden">
-                                <td style="padding-top: 8px;"><span id='reference_code_label'><?= lang('Sales.reference_code') ?></span></td>
-                                <td style="padding-top: 8px;">
-                                    <?php echo form_input(array(
-                                        'name'     => 'reference_code',
-                                        'id'       => 'reference_code',
-                                        'class'    => 'form-control input-sm non-giftcard-input',
-                                        'disabled' => true,
-                                        'value'    => '',
-                                        'size'     => 5,
-                                        'tabindex' => ++$tabindex,
-                                        'onClick'  => 'this.select();'));
-                                    ?>
-                                </td>
-                            </tr>
-                        </table>
+                            <button type="button" class="btn btn-primary ms-auto text-nowrap modal-launch" id="new_item_button" data-btn-new="<?= lang('Common.new') ?>" data-btn-submit="<?= lang('Common.submit') ?>" data-href='<?= "items/view" ?>' title="<?= lang(ucfirst($controller_name) .".new_item") ?>">
+                                <i class="bi bi-tag me-2"></i><?= lang(ucfirst($controller_name) .".new_item") ?>
+                            </button>
+                        </div>
                     <?= form_close() ?>
-
-                    <div class="btn btn-sm btn-success pull-right" id="add_payment_button" tabindex="<?= ++$tabindex ?>">
-                        <i class="bi bi-cash-coin icon-spacing"></i><?= lang(ucfirst($controller_name) . '.add_payment') ?>
-                    </div>
-                <?php } ?>
-
-                <?php if (count($payments) > 0) { // Only show this part if there is at least one payment entered. ?>
-                    <table class="sales_table_100" id="register">
-                        <thead>
-                            <tr>
-                                <th style="width: 10%;"><?= lang('Common.delete') ?></th>
-                                <th style="width: 60%;"><?= lang(ucfirst($controller_name) . '.payment_type') ?></th>
-                                <th style="width: 20%;"><?= lang(ucfirst($controller_name) . '.payment_amount') ?></th>
-                            </tr>
-                        </thead>
-
-                        <tbody id="payment_contents">
-                            <?php foreach ($payments as $payment_id => $payment) { ?>
+                </div>
+                <div class="col-12 pe-0">
+                    <!-- Sale Items List -->
+                    <div class="card table-responsive rounded-end-0 rounded-top-0" style="min-height: 250px;">
+                        <table class="table <?php if(count($cart) > 0) { ?>table-striped table-hover<?php } else { ?>table-borderless<?php } ?>">
+                            <thead>
                                 <tr>
-                                    <td><?= anchor("$controller_name/deletePayment/". esc(base64url_encode($payment_id), 'url'), '<i class="bi bi-trash"></i>') ?></td>
-                                    <td><?= $payment['payment_type'] ?></td>
-                                    <td style="text-align: right;"><?= to_currency($payment['payment_amount']) ?></td>
+                                    <th scope="col" style="width: 3%;"><i class="bi bi-trash"></i></th>
+                                    <th scope="col" style="width: 10%;"><?= lang(ucfirst($controller_name) .'.item_number') ?></th>
+                                    <th scope="col" style="width: 37%;"><?= lang(ucfirst($controller_name) .'.item_name') ?></th>
+                                    <th scope="col" style="width: 10%;"><?= lang(ucfirst($controller_name) .'.price') ?></th>
+                                    <th scope="col" style="width: 10%;"><?= lang(ucfirst($controller_name) .'.quantity') ?></th>
+                                    <th scope="col" style="width: 15%;"><?= lang(ucfirst($controller_name) .'.discount') ?></th>
+                                    <th scope="col" style="width: 10%;"><?= lang(ucfirst($controller_name) .'.total') ?></th>
+                                    <th scope="col" style="width: 5%;"><?= lang(ucfirst($controller_name) .'.update') ?></th>
+                                </tr>
+                            </thead>
+
+                            <tbody id="cart_contents">
+                                <?php if (count($cart) == 0) { ?>
+                                    <tr>
+                                        <td colspan="8">
+                                            <div class="alert alert-primary m-0"><?= lang(ucfirst($controller_name) .'.no_items_in_cart') ?></div>
+                                        </td>
+                                    </tr>
+                                <?php } else { foreach (array_reverse($cart, true) as $line => $item) { ?>
+                                    <?= form_open("$controller_name/editItem/$line", ['class' => 'form-horizontal', 'id' => "cart_$line"]) ?>
+                                        <tr>
+                                            <td>
+                                                <?php
+                                                echo anchor("$controller_name/deleteItem/$line", '<span class="link-danger"><i class="bi bi-trash"></i></span>');
+                                                echo form_hidden('location', (string)$item['item_location']);
+                                                echo form_input(['type' => 'hidden', 'name' => 'item_id', 'value' => $item['item_id']]);
+                                                ?>
+                                            </td>
+                                                <?php if ($item['item_type'] == ITEM_TEMP) { ?>
+                                                    <td><?= form_input(['name' => 'item_number', 'id' => 'item_number', 'class' => 'form-control input-sm', 'value' => $item['item_number'], 'tabindex' => ++$tabindex]) ?></td>
+                                                    <td style="text-align: center;">
+                                                        <?= form_input(['name' => 'name', 'id' => 'name', 'class' => 'form-control input-sm', 'value' => $item['name'], 'tabindex' => ++$tabindex]) ?>
+                                                    </td>
+                                                <?php } else { ?>
+                                                    <td><?= esc($item['item_number']) ?></td>
+                                                    <td style="text-align: center;">
+                                                        <?= esc($item['name']) . ' ' . esc(implode(' ', [$item['attribute_values'], $item['attribute_dtvalues']])) ?>
+                                                        <br>
+                                                        <?php if ($item['stock_type'] == '0'): echo '[' . to_quantity_decimals($item['in_stock']) . ' in ' . esc($item['stock_name']) . ']';
+                                                        endif; ?>
+                                                    </td>
+                                                <?php } ?>
+
+                                                <td>
+                                                    <?php
+                                                    if ($items_module_allowed && $change_price) {
+                                                        echo form_input(['name' => 'price', 'class' => 'form-control input-sm', 'value' => to_currency_no_money($item['price']), 'tabindex' => ++$tabindex, 'onClick' => 'this.select();']);
+                                                    } else {
+                                                        echo to_currency($item['price']);
+                                                        echo form_hidden('price', to_currency_no_money($item['price']));
+                                                    }
+                                                    ?>
+                                                </td>
+
+                                                <td>
+                                                    <?php
+                                                    if ($item['is_serialized']) {
+                                                        echo to_quantity_decimals($item['quantity']);
+                                                        echo form_hidden('quantity', $item['quantity']);
+                                                    } else {
+                                                        echo form_input(['name' => 'quantity', 'class' => 'form-control input-sm', 'value' => to_quantity_decimals($item['quantity']), 'tabindex' => ++$tabindex, 'onClick' => 'this.select();']);
+                                                    }
+                                                    ?>
+                                                </td>
+
+                                                <td>
+                                                    <div class="input-group">
+                                                        <?= form_input(['name' => 'discount', 'class' => 'form-control input-sm', 'value' => $item['discount_type'] ? to_currency_no_money($item['discount']) : to_decimals($item['discount']), 'tabindex' => ++$tabindex, 'onClick' => 'this.select();']) ?>
+                                                        <span class="input-group-btn">
+                                                            <?= form_checkbox(['id' => 'discount_toggle', 'name' => 'discount_toggle', 'value' => 1, 'data-toggle' => 'toggle', 'data-size' => 'small', 'data-onstyle' => 'success', 'data-on' => '<b>' . $config['currency_symbol'] . '</b>', 'data-off' => '<b>%</b>', 'data-line' => $line, 'checked' => $item['discount_type'] == 1]) ?>
+                                                        </span>
+                                                    </div>
+                                                </td>
+
+                                                <td>
+                                                    <?php
+                                                    if ($item['item_type'] == ITEM_AMOUNT_ENTRY) {    // TODO: === ?
+                                                        echo form_input(['name' => 'discounted_total', 'class' => 'form-control input-sm', 'value' => to_currency_no_money($item['discounted_total']), 'tabindex' => ++$tabindex, 'onClick' => 'this.select();']);
+                                                    } else {
+                                                        echo to_currency($item['discounted_total']);
+                                                    }
+                                                    ?>
+                                                </td>
+
+                                                <td>
+                                                    <a href="javascript:document.getElementById('<?= "cart_$line" ?>').submit();" title="<?= lang(ucfirst($controller_name) . '.update') ?>">
+                                                        <i class="bi bi-arrow-repeat"></i>
+                                                    </a>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <?php if ($item['item_type'] == ITEM_TEMP) { ?>
+                                                    <td><?= form_input(['type' => 'hidden', 'name' => 'item_id', 'value' => $item['item_id']]) ?></td>
+                                                    <td style="text-align: center;" colspan="6">
+                                                        <?= form_input(['name' => 'item_description', 'id' => 'item_description', 'class' => 'form-control input-sm', 'value' => $item['description'], 'tabindex' => ++$tabindex]) ?>
+                                                    </td>
+                                                    <td> </td>
+                                                <?php } else { ?>
+                                                    <td>&nbsp;</td>
+                                                    <?php if ($item['allow_alt_description']) { ?>
+                                                        <td style="color: #2F4F4F;"><?= lang(ucfirst($controller_name) . '.description_abbrv') ?></td>
+                                                    <?php } ?>
+
+                                                    <td colspan="2" style="text-align: left;">
+                                                        <?php
+                                                        if ($item['allow_alt_description']) {
+                                                            echo form_input(['name' => 'description', 'class' => 'form-control input-sm', 'value' => $item['description'], 'onClick' => 'this.select();']);
+                                                        } else {
+                                                            if ($item['description'] != '') {
+                                                                echo esc($item['description']);
+                                                                echo form_hidden('description', $item['description']);
+                                                            } else {
+                                                                echo lang(ucfirst($controller_name) . '.no_description');
+                                                                echo form_hidden('description', '');
+                                                            }
+                                                        }
+                                                        ?>
+                                                    </td>
+                                                    <td>&nbsp;</td>
+                                                    <td style="color: #2F4F4F;">
+                                                        <?php
+                                                        if ($item['is_serialized']) {
+                                                            echo lang(ucfirst($controller_name) . '.serial');
+                                                        }
+                                                        ?>
+                                                    </td>
+                                                    <td colspan="4" style="text-align: left;">
+                                                        <?php
+                                                        if ($item['is_serialized']) {
+                                                            echo form_input(['name' => 'serialnumber', 'class' => 'form-control input-sm', 'value' => $item['serialnumber'], 'onClick' => 'this.select();']);
+                                                        } else {
+                                                            echo form_hidden('serialnumber', '');
+                                                        }
+                                                        ?>
+                                                    </td>
+                                                <?php } ?>
+                                            </tr>
+                                        <?= form_close() ?>
+                                <?php
+                                    }
+                                }
+                                ?>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-4 ps-0">
+            <!-- Overall Sale -->
+            <?= form_open("$controller_name/selectCustomer", ['id' => 'select_customer_form', 'class' => 'card border-top-0 border-start-0 rounded-top-0 rounded-start-0', 'style' => 'min-height: 320px;']) ?>
+                <div class="card-body" id="select_customer">
+                    <div class="mb-3">
+                        <label id="customer_label" for="customer" class="form-label"><?= lang(ucfirst($controller_name) .'.select_customer') . '&nbsp;' . esc("$customer_required") ?></label>
+                        <input type="text" name="customer" id="customer" class="form-control" value="<?= lang(ucfirst($controller_name) . '.start_typing_customer_name') ?>">
+                    </div>
+                    <div class="d-flex gap-2 justify-content-center mb-3">
+                        <button type="button" class="btn btn-primary modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("customers/view") ?>" title="<?= lang(ucfirst($controller_name) .'.new_customer') ?>">
+                            <i class="bi bi-person-add me-2"></i><?= lang(ucfirst($controller_name) .'.new_customer') ?>
+                        </button>
+                        <button type="button" class="btn btn-secondary modal-launch" id="show_keyboard_help" data-href="<?= esc("$controller_name/salesKeyboardHelp") ?>" title="<?= lang(ucfirst($controller_name) .'.key_title') ?>">
+                            <i class="bi bi-shift me-2"></i><?= lang(ucfirst($controller_name) .'.key_help') ?>
+                        </button>
+                    </div>
+
+                    <table class="table table-borderless table-sm" id="sale_totals">
+                        <tbody>
+                            <tr>
+                                <td class="px-0"><?= lang(ucfirst($controller_name) .'.quantity_of_items', [$item_count]) ?></td>
+                                <td class="px-0 text-end"><?= $total_units ?></td>
+                            </tr>
+                            <tr>
+                                <td class="px-0"><?= lang(ucfirst($controller_name) .'.sub_total') ?></td>
+                                <td class="px-0 text-end"><?= to_currency($subtotal) ?></td>
+                            </tr>
+                            <?php foreach ($taxes as $tax_group_index=>$tax) { ?>
+                                <tr>
+                                    <td class="px-0"><?= (float)$tax['tax_rate'] . '% ' . $tax['tax_group'] ?></td>
+                                    <td class="px-0 text-end"><?= to_currency_tax($tax['sale_tax_amount']) ?></td>
                                 </tr>
                             <?php } ?>
+                            <tr>
+                                <td class="fs-5 fw-semibold px-0"><?= lang(ucfirst($controller_name) .'.total') ?></td>
+                                <td class="fs-5 fw-semibold px-0 text-end"><span id="sale_total"><?= to_currency($total) ?></span></td>
+                            </tr>
                         </tbody>
                     </table>
-                <?php } ?>
-            </div>
-
-            <?= form_open("$controller_name/cancel", ['id' => 'buttons_form']) ?>
-            <div class="form-group" id="buttons_sale">
-                <div class="btn btn-sm btn-default pull-left" id="suspend_sale_button">
-                    <i class="bi bi-pause-circle icon-spacing"></i><?= lang(ucfirst($controller_name) . '.suspend_sale') ?>
                 </div>
-                <?php if (!$pos_mode && isset($customer)) { // Only show this part if the payment covers the total ?>
-                    <div class="btn btn-sm btn-success" id="finish_invoice_quote_button">
-                        <i class="bi bi-check-circle icon-spacing"></i><?= esc($mode_label) ?>
-                    </div>
-                <?php } ?>
-
-                <div class="btn btn-sm btn-danger pull-right" id="cancel_sale_button">
-                    <i class="bi bi-x-circle icon-spacing"></i><?= lang(ucfirst($controller_name) . '.cancel_sale') ?>
-                </div>
-            </div>
             <?= form_close() ?>
-
-            <?php if ($payments_cover_total || !$pos_mode) { // Only show this part if the payment cover the total ?>
-                <div class="container-fluid">
-                    <div class="no-gutter row">
-                        <div class="form-group form-group-sm">
-                            <div class="col-xs-12">
-                                <?= form_label(lang('Common.comments'), 'comments', ['class' => 'control-label', 'id' => 'comment_label', 'for' => 'comment']) ?>
-                                <?= form_textarea(['name' => 'comment', 'id' => 'comment', 'class' => 'form-control input-sm', 'value' => $comment, 'rows' => '2']) ?>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="form-group form-group-sm">
-                            <div class="col-xs-6">
-                                <label for="sales_print_after_sale" class="control-label checkbox">
-                                    <?= form_checkbox(['name' => 'sales_print_after_sale', 'id' => 'sales_print_after_sale', 'value' => 1, 'checked' => $print_after_sale]) ?>
-                                    <?= lang(ucfirst($controller_name) . '.print_after_sale') ?>
-                                </label>
-                            </div>
-
-                            <?php if (!empty($customer_email)) { ?>
-                                <div class="col-xs-6">
-                                    <label for="email_receipt" class="control-label checkbox">
-                                        <?= form_checkbox(['name' => 'email_receipt', 'id' => 'email_receipt', 'value' => 1, 'checked' => $email_receipt]) ?>
-                                        <?= lang(ucfirst($controller_name) . '.email_receipt') ?>
-                                    </label>
-                                </div>
-                            <?php } ?>
-                            <?php if ($mode == 'sale_work_order') { ?>
-                                <div class="col-xs-6">
-                                    <label for="price_work_orders" class="control-label checkbox">
-                                        <?= form_checkbox(['name' => 'price_work_orders', 'id' => 'price_work_orders', 'value' => 1, 'checked' => $price_work_orders]) ?>
-                                        <?= lang(ucfirst($controller_name) . '.include_prices') ?>
-                                    </label>
-                                </div>
-                            <?php } ?>
-                        </div>
-                    </div>
-                    <?php if (($mode == 'sale_invoice') && $config['invoice_enable']) { ?>
-                        <div class="row">
-                            <div class="form-group form-group-sm">
-                                <div class="col-xs-6">
-                                    <label for="sales_invoice_number" class="control-label checkbox">
-                                        <?= lang(ucfirst($controller_name) . '.invoice_enable') ?>
-                                    </label>
-                                </div>
-
-                                <div class="col-xs-6">
-                                    <div class="input-group input-group-sm">
-                                        <span class="input-group-addon input-sm">#</span>
-                                        <?= form_input(['name' => 'sales_invoice_number', 'id' => 'sales_invoice_number', 'class' => 'form-control input-sm', 'value' => $invoice_number]) ?>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    <?php } ?>
-                </div>
-        <?php
-            }
-        }
-        ?>
+        </div>
     </div>
 </div>
 
@@ -836,10 +548,11 @@ helper('url');
             }
         });
 
-        dialog_support.init('a.modal-dlg, button.modal-dlg');
+        dialog_support.init('a.modal-launch, button.modal-launch');
 
         table_support.handle_submit = function(resource, response, stay_open) {
             $.notify({
+                icon: 'bi bi-bell-fill',
                 message: response.message
             }, {
                 type: response.success ? 'success' : 'danger'
diff --git a/app/Views/sales/suspended.php b/app/Views/sales/suspended.php
index 120dd3d46..76a1da9b1 100644
--- a/app/Views/sales/suspended.php
+++ b/app/Views/sales/suspended.php
@@ -11,7 +11,7 @@ $this->dinner_table = model(Dinner_table::class);
 
 <style>
     @media (min-width: 768px) {
-        .modal-dlg .modal-dialog {
+        .modal-launch .modal-dialog {
             width: 750px !important;
         }
     }
diff --git a/app/Views/sales/tax_invoice.php b/app/Views/sales/tax_invoice.php
index 7cc95e99e..1292a067d 100644
--- a/app/Views/sales/tax_invoice.php
+++ b/app/Views/sales/tax_invoice.php
@@ -36,6 +36,7 @@ if (isset($error_message)) {
                 $.get('<?= esc("/sales/sendPdf/$sale_id_num") ?>',
                     function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
@@ -57,20 +58,20 @@ if (isset($error_message)) {
 
 <div class="print_hide" id="control_buttons" style="text-align: right;">
     <a href="javascript:printdoc();">
-        <div class="btn btn-info btn-sm" id="show_print_button"><?= '<i class="bi bi-printer icon-spacing"></i>' . lang('Common.print') ?></div>
+        <div class="btn btn-info btn-sm" id="show_print_button"><?= '<i class="bi bi-printer me-2"></i>' . lang('Common.print') ?></div>
     </a>
     <?php
     /* This line will allow to print and go back to sales automatically.
-     * echo anchor('sales', '<i class="bi bi-printer icon-spacing"></i>' . lang('Common.print'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_print_button', 'onclick' => 'window.print();'));
+     * echo anchor('sales', '<i class="bi bi-printer me-2"></i>' . lang('Common.print'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_print_button', 'onclick' => 'window.print();'));
      */
     ?>
     <?php if (isset($customer_email) && !empty($customer_email)): ?>
         <a href="javascript:void(0);">
-            <div class="btn btn-info btn-sm" id="show_email_button"><?= '<i class="bi bi-envelope icon-spacing"></i>' . lang('Sales.send_invoice') ?></div>
+            <div class="btn btn-info btn-sm" id="show_email_button"><?= '<i class="bi bi-envelope me-2"></i>' . lang('Sales.send_invoice') ?></div>
         </a>
     <?php endif; ?>
-    <?= anchor("sales", '<i class="bi bi-cart2 icon-spacing"></i>' . lang('Sales.register'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_sales_button']) ?>
-    <?= anchor("sales/manage", '<i class="bi bi-receipt-cutoff icon-spacing"></i>' . lang('Sales.takings'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_takings_button']) ?>
+    <?= anchor("sales", '<i class="bi bi-cart2 me-2"></i>' . lang('Sales.register'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_sales_button']) ?>
+    <?= anchor("sales/manage", '<i class="bi bi-receipt-cutoff me-2"></i>' . lang('Sales.takings'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_takings_button']) ?>
 </div>
 
 <div id="page-wrap">
diff --git a/app/Views/sales/work_order.php b/app/Views/sales/work_order.php
index fd5a18e31..d275db536 100644
--- a/app/Views/sales/work_order.php
+++ b/app/Views/sales/work_order.php
@@ -34,6 +34,7 @@ if (isset($error_message)) {
                 $.get('<?= esc("/sales/sendPdf/$sale_id_num/work_order") ?>',
                     function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
@@ -55,20 +56,20 @@ if (isset($error_message)) {
 
 <div class="print_hide" id="control_buttons" style="text-align: right;">
     <a href="javascript:printdoc();">
-        <div class="btn btn-info btn-sm" id="show_print_button"><?= '<i class="bi bi-printer icon-spacing"></i>' . lang('Common.print') ?></div>
+        <div class="btn btn-info btn-sm" id="show_print_button"><?= '<i class="bi bi-printer me-2"></i>' . lang('Common.print') ?></div>
     </a>
     <?php
     /* This line will allow to print and go back to sales automatically.
-     * echo anchor('sales', '<i class="bi bi-printer icon-spacing"></i>' . lang('Common.print'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_print_button', 'onclick' => 'window.print();'));
+     * echo anchor('sales', '<i class="bi bi-printer me-2"></i>' . lang('Common.print'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_print_button', 'onclick' => 'window.print();'));
      */
     ?>
     <?php if (isset($customer_email) && !empty($customer_email)): ?>
         <a href="javascript:void(0);">
-            <div class="btn btn-info btn-sm" id="show_email_button"><?= '<i class="bi bi-envelope icon-spacing"></i>' . lang('Sales.send_work_order') ?></div>
+            <div class="btn btn-info btn-sm" id="show_email_button"><?= '<i class="bi bi-envelope me-2"></i>' . lang('Sales.send_work_order') ?></div>
         </a>
     <?php endif; ?>
-    <?= anchor("sales", '<i class="bi bi-cart2 icon-spacing"></i>' . lang('Sales.register'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_sales_button']) ?>
-    <?= anchor("sales/discard_suspended_sale", '<i class="bi bi-x-circle icon-spacing"></i>' . lang('Sales.discard'), ['class' => 'btn btn-danger btn-sm', 'id' => 'discard_work_order_button']) ?>
+    <?= anchor("sales", '<i class="bi bi-cart2 me-2"></i>' . lang('Sales.register'), ['class' => 'btn btn-info btn-sm', 'id' => 'show_sales_button']) ?>
+    <?= anchor("sales/discard_suspended_sale", '<i class="bi bi-x-circle me-2"></i>' . lang('Sales.discard'), ['class' => 'btn btn-danger btn-sm', 'id' => 'discard_work_order_button']) ?>
 </div>
 
 <div id="page-wrap">
diff --git a/app/Views/suppliers/form.php b/app/Views/suppliers/form.php
index 441b1f03f..166f406cc 100644
--- a/app/Views/suppliers/form.php
+++ b/app/Views/suppliers/form.php
@@ -6,70 +6,46 @@
  */
 ?>
 
-<div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("$controller_name/save/$person_info->person_id", ['id' => 'supplier_form']) ?>
 
-<?= form_open("$controller_name/save/$person_info->person_id", ['id' => 'supplier_form', 'class' => 'form-horizontal']) ?>
-    <fieldset id="supplier_basic_info">
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Suppliers.company_name'), 'company_name', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'  => 'company_name',
-                    'id'    => 'company_name_input',
-                    'class' => 'form-control input-sm',
-                    'value' => html_entity_decode($person_info->company_name)
-                ]) ?>
-            </div>
-        </div>
+    <label for="company_name" class="form-label"><?= lang('Suppliers.company_name'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="company_name-icon"><i class="bi bi-building"></i></span>
+        <input type="text" class="form-control" name="company_name" id="company_name" aria-describedby="company_name-icon" value="<?= html_entity_decode($person_info->company_name) ?>" required>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Suppliers.category'), 'category', ['class' => 'required control-label col-xs-3']) ?>
-            <div class="col-xs-6">
-                <?= form_dropdown('category', $categories, $person_info->category, ['class' => 'form-control', 'id' => 'category']) ?>
-            </div>
-        </div>
+    <label for="category" class="form-label"><?= lang('Suppliers.category'); ?><sup><span class="badge text-primary"><i class="bi bi-asterisk"></i></span></sup></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text"><i class="bi bi-truck"></i></span>
+        <select class="form-select" name="category" id="category" required>
+            <?php foreach ($categories as $key => $label): ?>
+                <option value="<?= $key ?>" <?= $person_info->category == $key ? 'selected' : '' ?>><?= $label ?></option>
+            <?php endforeach; ?>
+        </select>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Suppliers.agency_name'), 'agency_name', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'  => 'agency_name',
-                    'id'    => 'agency_name_input',
-                    'class' => 'form-control input-sm',
-                    'value' => $person_info->agency_name
-                ]) ?>
-            </div>
-        </div>
+    <label for="agency_name" class="form-label"><?= lang('Suppliers.agency_name'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="agency_name-icon"><i class="bi bi-building"></i></span>
+        <input type="text" class="form-control" name="agency_name" id="agency_name" aria-describedby="agency_name-icon" value="<?= $person_info->agency_name ?>">
+    </div>
 
-        <?= view('people/form_basic_info') ?>
+    <?= view('people/form_basic_info') ?>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Suppliers.account_number'), 'account_number', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'  => 'account_number',
-                    'id'    => 'account_number',
-                    'class' => 'form-control input-sm',
-                    'value' => $person_info->account_number
-                ]) ?>
-            </div>
-        </div>
+    <label for="account_number" class="form-label"><?= lang('Suppliers.account_number'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="account_number-icon"><i class="bi bi-hash"></i></span>
+        <input type="text" class="form-control" name="account_number" id="account_number" aria-describedby="account_number-icon" value="<?= $person_info->account_number ?>">
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Suppliers.tax_id'), 'tax_id', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-8">
-                <?= form_input([
-                    'name'  => 'tax_id',
-                    'id'    => 'tax_id',
-                    'class' => 'form-control input-sm',
-                    'value' => $person_info->tax_id
-                ]) ?>
-            </div>
-        </div>
+    <label for="tax_id" class="form-label"><?= lang('Suppliers.tax_id'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="tax_id-icon"><i class="bi bi-bank"></i></span>
+        <input type="text" class="form-control" name="tax_id" id="tax_id" aria-describedby="tax_id-icon" value="<?= $person_info->tax_id ?>">
+    </div>
 
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">
diff --git a/app/Views/taxes/manage.php b/app/Views/taxes/manage.php
index c79468d90..a5ffdc064 100644
--- a/app/Views/taxes/manage.php
+++ b/app/Views/taxes/manage.php
@@ -6,44 +6,45 @@
 
 <?= view('partial/header') ?>
 
-<script type="text/javascript">
-    dialog_support.init("a.modal-dlg");
-</script>
+<?php
+$title_info['config_title'] = 'Taxes';
+echo view('configs/config_header', $title_info);
+?>
 
-<ul class="nav nav-tabs" data-tabs="tabs">
-    <li class="active" role="presentation">
-        <a data-toggle="tab" href="#tax_codes_tab" title="<?= lang(ucfirst($controller_name) . '.tax_codes_configuration') ?>">
+<ul class="nav nav-tabs mb-3" role="tablist">
+    <li class="nav-item" role="presentation">
+        <button type="button" class="nav-link active" id="codes-tab" data-bs-toggle="tab" data-bs-target="#tax_codes_tab" role="tab" aria-controls="tax_codes_tab" title="<?= lang(ucfirst($controller_name) . '.tax_codes_configuration') ?>">
             <?= lang(ucfirst($controller_name) . '.tax_codes') ?>
-        </a>
+        </button>
     </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#tax_jurisdictions_tab" title="<?= lang(ucfirst($controller_name) . '.tax_jurisdictions_configuration') ?>">
+    <li class="nav-item" role="presentation">
+        <button type="button" class="nav-link" id="jurisdictions-tab" data-bs-toggle="tab" data-bs-target="#tax_jurisdictions_tab" role="tab" aria-controls="tax_jurisdictions_tab" title="<?= lang(ucfirst($controller_name) . '.tax_jurisdictions_configuration') ?>">
             <?= lang(ucfirst($controller_name) . '.tax_jurisdictions') ?>
-        </a>
+        </button>
     </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#tax_categories_tab" title="<?= lang(ucfirst($controller_name) . '.tax_categories_configuration') ?>">
+    <li class="nav-item" role="presentation">
+        <button type="button" class="nav-link" id="categories-tab" data-bs-toggle="tab" data-bs-target="#tax_categories_tab" role="tab" aria-controls="tax_categories_tab" title="<?= lang(ucfirst($controller_name) . '.tax_categories_configuration') ?>">
             <?= lang(ucfirst($controller_name) . '.tax_categories') ?>
-        </a>
+        </button>
     </li>
-    <li role="presentation">
-        <a data-toggle="tab" href="#tax_rates_tab" title="<?= lang(ucfirst($controller_name) . '.tax_rate_configuration') ?>">
+    <li class="nav-item" role="presentation">
+        <button type="button" class="nav-link" id="rates-tab" data-bs-toggle="tab" data-bs-target="#tax_rates_tab" role="tab" aria-controls="tax_rates_tab" title="<?= lang(ucfirst($controller_name) . '.tax_rate_configuration') ?>">
             <?= lang(ucfirst($controller_name) . '.tax_rates') ?>
-        </a>
+        </button>
     </li>
 </ul>
 
 <div class="tab-content">
-    <div class="tab-pane fade in active" id="tax_codes_tab">
+    <div class="tab-pane active" id="tax_codes_tab" role="tabpanel" aria-labelledby="codes-tab" tabindex="0">
         <?= view('taxes/tax_codes') ?>
     </div>
-    <div class="tab-pane" id="tax_jurisdictions_tab">
+    <div class="tab-pane" id="tax_jurisdictions_tab" role="tabpanel" aria-labelledby="jurisdictions-tab" tabindex="0">
         <?= view('taxes/tax_jurisdictions') ?>
     </div>
-    <div class="tab-pane" id="tax_categories_tab">
+    <div class="tab-pane" id="tax_categories_tab" role="tabpanel" aria-labelledby="categories-tab" tabindex="0">
         <?= view('taxes/tax_categories') ?>
     </div>
-    <div class="tab-pane" id="tax_rates_tab">
+    <div class="tab-pane" id="tax_rates_tab" role="tabpanel" aria-labelledby="rates-tab" tabindex="0">
         <?= view('taxes/tax_rates') ?>
     </div>
 </div>
diff --git a/app/Views/taxes/tax_categories.php b/app/Views/taxes/tax_categories.php
index 5ebc4b98a..47dbff1f9 100644
--- a/app/Views/taxes/tax_categories.php
+++ b/app/Views/taxes/tax_categories.php
@@ -4,26 +4,18 @@
  */
 ?>
 
-<?= form_open('taxes/save_tax_categories/', ['id' => 'tax_categories_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('taxes/save_tax_categories/', ['id' => 'tax_categories_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="tax_categories_error_message_box" class="error_message_box"></ul>
+    <ul id="tax_categories_error_message_box" class="alert alert-warning d-none"></ul>
 
-            <div id="tax_categories">
-                <?= view('partial/tax_categories') ?>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_tax_categories',
-                'id'    => 'submit_tax_categories',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+    <div id="tax_categories">
+        <?= view('partial/tax_categories') ?>
     </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_tax_categories"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -52,9 +44,9 @@
             ++tax_categories_count;
             var new_tax_category_id = 'tax_category_' + tax_categories_count;
 
-            $(new_block).find('label').html("<?= lang('Taxes.tax_category') ?> " + tax_categories_count).attr('for', new_tax_category_id).attr('class', 'control-label col-xs-2');
-            $(new_block).find("input[name='tax_category[]']").attr('id', new_tax_category_id).removeAttr('disabled').attr('class', 'form-control input-sm required').val('');
-            $(new_block).find("input[name='tax_group_sequence[]']").removeAttr('disabled').attr('class', 'form-control input-sm').val('');
+            $(new_block).find('label').html("<?= lang('Taxes.tax_category') ?> " + tax_categories_count).attr('for', new_tax_category_id).attr('class', 'control-label col-xs-2'); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find("input[name='tax_category[]']").attr('id', new_tax_category_id).removeAttr('disabled').attr('class', 'form-control input-sm required').val(''); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find("input[name='tax_group_sequence[]']").removeAttr('disabled').attr('class', 'form-control input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
             $(new_block).find("input[name='tax_category_id[]']").val('-1');
             hide_show_remove_tax_category();
         };
@@ -98,6 +90,7 @@
                 $(form).ajaxSubmit({
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
diff --git a/app/Views/taxes/tax_codes.php b/app/Views/taxes/tax_codes.php
index 5de1b09b4..22ef8df1d 100644
--- a/app/Views/taxes/tax_codes.php
+++ b/app/Views/taxes/tax_codes.php
@@ -4,26 +4,18 @@
  */
 ?>
 
-<?= form_open('taxes/save_tax_codes/', ['id' => 'tax_codes_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('taxes/save_tax_codes/', ['id' => 'tax_codes_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="tax_codes_error_message_box" class="error_message_box"></ul>
+    <ul id="tax_codes_error_message_box" class="alert alert-warning d-none"></ul>
 
-            <div id="tax_codes">
-                <?= view('partial/tax_codes', ['tax_codes' => $tax_codes]) ?>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_tax_codes',
-                'id'    => 'submit_tax_codes',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+    <div id="tax_codes">
+        <?= view('partial/tax_codes', ['tax_codes' => $tax_codes]) ?>
     </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_tax_codes"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -51,11 +43,11 @@
             ++tax_code_count;
             var new_tax_code_id = 'tax_code_' + tax_code_count;
 
-            $(new_block).find('label').html("<?= lang('Taxes.tax_code') ?> " + tax_code_count).attr('for', new_tax_code_id).attr('class', 'control-label col-xs-2');
-            $(new_block).find("input[name='tax_code[]']").attr('id', new_tax_code_id).removeAttr('disabled').attr('class', 'form-control text-uppercase required input-sm').val('');
-            $(new_block).find("input[name='tax_code_name[]']").removeAttr('disabled').attr('class', 'form-control required input-sm').val('');
-            $(new_block).find("input[name='city[]']").removeAttr('disabled').attr('class', 'form-control input-sm').val('');
-            $(new_block).find("input[name='state[]']").removeAttr('disabled').attr('class', 'form-control input-sm').val('');
+            $(new_block).find('label').html("<?= lang('Taxes.tax_code') ?> " + tax_code_count).attr('for', new_tax_code_id).attr('class', 'control-label col-xs-2'); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find("input[name='tax_code[]']").attr('id', new_tax_code_id).removeAttr('disabled').attr('class', 'form-control text-uppercase required input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find("input[name='tax_code_name[]']").removeAttr('disabled').attr('class', 'form-control required input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find("input[name='city[]']").removeAttr('disabled').attr('class', 'form-control input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find("input[name='state[]']").removeAttr('disabled').attr('class', 'form-control input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
             $(new_block).find("input[name='tax_code_id[]']").val('-1');
 
             hide_show_remove_tax_code();
@@ -98,6 +90,7 @@
                 $(form).ajaxSubmit({
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
diff --git a/app/Views/taxes/tax_jurisdictions.php b/app/Views/taxes/tax_jurisdictions.php
index 63469d3bc..bb27015f8 100644
--- a/app/Views/taxes/tax_jurisdictions.php
+++ b/app/Views/taxes/tax_jurisdictions.php
@@ -5,26 +5,18 @@
  */
 ?>
 
-<?= form_open('taxes/save_tax_jurisdictions/', ['id' => 'tax_jurisdictions_form', 'class' => 'form-horizontal']) ?>
-    <div id="config_wrapper">
-        <fieldset id="config_info">
+<?= form_open('taxes/save_tax_jurisdictions/', ['id' => 'tax_jurisdictions_form']) ?>
 
-            <div id="required_fields_message"><?= lang('Common.fields_required_message') ?></div>
-            <ul id="tax_jurisdictions_error_message_box" class="error_message_box"></ul>
+    <ul id="tax_jurisdictions_error_message_box" class="alert alert-warning d-none"></ul>
 
-            <div id="tax_jurisdictions">
-                <?= view('partial/tax_jurisdictions') ?>
-            </div>
-
-            <?= form_submit([
-                'name'  => 'submit_tax_jurisdictions',
-                'id'    => 'submit_tax_jurisdictions',
-                'value' => lang('Common.submit'),
-                'class' => 'btn btn-primary btn-sm pull-right'
-            ]) ?>
-
-        </fieldset>
+    <div id="tax_jurisdictions">
+        <?= view('partial/tax_jurisdictions') ?>
     </div>
+
+    <div class="d-flex justify-content-end">
+        <button type="submit" class="btn btn-primary" name="submit_tax_jurisdictions"><?= lang('Common.submit'); ?></button>
+    </div>
+
 <?= form_close() ?>
 
 <script type="text/javascript">
@@ -54,13 +46,13 @@
             ++tax_jurisdictions_count;
             var new_jurisdiction_name_id = 'jurisdiction_name_' + tax_jurisdictions_count;
 
-            $(new_block).find('label').html("<?= lang('Taxes.tax_jurisdiction') ?> " + tax_jurisdictions_count).attr('for', new_jurisdiction_name_id).attr('class', 'control-label col-xs-2');
-            $(new_block).find("input[name='jurisdiction_name[]']").attr('id', new_jurisdiction_name_id).removeAttr('disabled').attr('class', 'form-control required input-sm').val('');
-            $(new_block).find("input[name='tax_group[]']").removeAttr('disabled').attr('class', 'form-control required input-sm').val('');
-            $(new_block).find("select[name='tax_type[]']").removeAttr('disabled').attr('class', 'form-control required input-sm').val('');
-            $(new_block).find("input[name='reporting_authority[]']").removeAttr('disabled').attr('class', 'form-control input-sm').val('');
-            $(new_block).find("input[name='tax_group_sequence[]']").removeAttr('disabled').attr('class', 'form-control input-sm').val('');
-            $(new_block).find("input[name='cascade_sequence[]']").removeAttr('disabled').attr('class', 'form-control input-sm').val('');
+            $(new_block).find('label').html("<?= lang('Taxes.tax_jurisdiction') ?> " + tax_jurisdictions_count).attr('for', new_jurisdiction_name_id).attr('class', 'control-label col-xs-2'); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find("input[name='jurisdiction_name[]']").attr('id', new_jurisdiction_name_id).removeAttr('disabled').attr('class', 'form-control required input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find("input[name='tax_group[]']").removeAttr('disabled').attr('class', 'form-control required input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find("select[name='tax_type[]']").removeAttr('disabled').attr('class', 'form-control required input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find("input[name='reporting_authority[]']").removeAttr('disabled').attr('class', 'form-control input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find("input[name='tax_group_sequence[]']").removeAttr('disabled').attr('class', 'form-control input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
+            $(new_block).find("input[name='cascade_sequence[]']").removeAttr('disabled').attr('class', 'form-control input-sm').val(''); // TODO-BS5 change classes from bs3 to bs5
             $(new_block).find("input[name='jurisdiction_id[]']").val('-1');
             hide_show_remove_tax_jurisdiction();
         };
@@ -102,6 +94,7 @@
                 $(form).ajaxSubmit({
                     success: function(response) {
                         $.notify({
+                            icon: 'bi bi-bell-fill',
                             message: response.message
                         }, {
                             type: response.success ? 'success' : 'danger'
diff --git a/app/Views/taxes/tax_rates.php b/app/Views/taxes/tax_rates.php
index 1c4331464..17154901f 100644
--- a/app/Views/taxes/tax_rates.php
+++ b/app/Views/taxes/tax_rates.php
@@ -18,16 +18,16 @@
     });
 </script>
 
-<div id="title_bar" class="btn-toolbar">
-    <button class="btn btn-info btn-sm pull-right modal-dlg" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("$controller_name/view") ?>" title="<?= lang(ucfirst($controller_name) . ".new") ?>">
-        <i class="bi bi-piggy-bank icon-spacing"></i><?= lang(ucfirst($controller_name) . ".new") ?>
+<div class="d-flex gap-2 justify-content-end d-print-none">
+    <button type="button" class="btn btn-primary modal-launch" data-btn-submit="<?= lang('Common.submit') ?>" data-href="<?= esc("$controller_name/view") ?>" title="<?= lang(ucfirst($controller_name) . ".new") ?>">
+        <i class="bi bi-piggy-bank me-2"></i><?= lang(ucfirst($controller_name) . ".new") ?>
     </button>
 </div>
 
 <div id="toolbar">
-    <div class="pull-left btn-toolbar">
-        <button id="delete" class="btn btn-default btn-sm">
-            <i class="bi bi-trash icon-spacing"></i><?= lang('Common.delete') ?>
+    <div class="d-flex gap-2">
+        <button type="button" class="btn btn-secondary d-print-none" id="delete">
+            <i class="bi bi-trash"></i><span class="d-none d-sm-inline ms-2"><?= lang('Common.delete') ?></span>
         </button>
     </div>
 </div>
diff --git a/app/Views/taxes/tax_rates_form.php b/app/Views/taxes/tax_rates_form.php
index 8e90acf4c..9519a55d1 100644
--- a/app/Views/taxes/tax_rates_form.php
+++ b/app/Views/taxes/tax_rates_form.php
@@ -13,54 +13,57 @@
  */
 ?>
 
-<ul id="error_message_box" class="error_message_box"></ul>
+<?= form_open("taxes/save/$tax_rate_id", ['id' => 'tax_code_form']) ?>
 
-<?= form_open("taxes/save/$tax_rate_id", ['id' => 'tax_code_form', 'class' => 'form-horizontal']) ?>
-    <fieldset id="tax_rate_info">
+    <ul id="error_message_box" class="alert alert-warning d-none"></ul>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Taxes.tax_code'), 'rate_tax_code_id', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-5">
-                <?= form_dropdown('rate_tax_code_id', $tax_code_options, $rate_tax_code_id, ['class' => 'form-control input-sm']) ?>
-            </div>
-        </div>
+    <label for="rate_tax_code_id" class="form-label"><?= lang('Taxes.tax_code'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="rate_tax_code_id-icon"><i class="bi bi-code"></i></span>
+        <select class="form-select" name="rate_tax_code_id" id="rate_tax_code_id">
+            <?php foreach ($tax_code_options as $id => $label): ?>
+                <option value="<?= $id ?>" <?= $id == $rate_tax_code_id ? 'selected' : '' ?>><?= esc($label) ?></option>
+            <?php endforeach; ?>
+        </select>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Taxes.tax_category'), 'rate_tax_category_id', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-5">
-                <?= form_dropdown('rate_tax_category_id', $tax_category_options, $rate_tax_category_id, ['class' => 'form-control input-sm']) ?>
-            </div>
-        </div>
+    <label for="rate_tax_category_id" class="form-label"><?= lang('Taxes.tax_category'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="rate_tax_category_id-icon"><i class="bi bi-bookmark"></i></span>
+        <select class="form-select" name="rate_tax_category_id" id="rate_tax_category_id">
+            <?php foreach ($tax_category_options as $id => $label): ?>
+                <option value="<?= $id ?>" <?= $id == $rate_tax_category_id ? 'selected' : '' ?>><?= esc($label) ?></option>
+            <?php endforeach; ?>
+        </select>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Taxes.tax_jurisdiction'), 'rate_jurisdiction_id', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-5">
-                <?= form_dropdown('rate_jurisdiction_id', $tax_jurisdiction_options, $rate_jurisdiction_id, ['class' => 'form-control input-sm']) ?>
-            </div>
-        </div>
+    <label for="rate_jurisdiction_id" class="form-label"><?= lang('Taxes.tax_jurisdiction'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="rate_jurisdiction_id-icon"><i class="bi bi-globe"></i></span>
+        <select class="form-select" name="rate_jurisdiction_id" id="rate_jurisdiction_id">
+            <?php foreach ($tax_jurisdiction_options as $id => $label): ?>
+                <option value="<?= $id ?>" <?= $id == $rate_jurisdiction_id ? 'selected' : '' ?>><?= esc($label) ?></option>
+            <?php endforeach; ?>
+        </select>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Taxes.tax_rate'), 'tax_rate', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-5 input-group" style="padding-left: 15px;">
-                <?= form_input([
-                    'name'  => 'tax_rate',
-                    'id'    => 'tax_rate',
-                    'class' => 'form-control input-sm text-uppercase',
-                    'value' => $tax_rate
-                ]) ?>
-                <span class="input-group-addon input-sm">%</span>
-            </div>
+    <label for="tax_rate" class="form-label"><?= lang('Taxes.tax_rate'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="tax_rate-icon"><i class="bi bi-bank"></i></span>
+        <input type="text" class="form-control" name="tax_rate" id="tax_rate" aria-describedby="tax_rate-icon" value="<?= $tax_rate ?>">
+        <span class="input-group-text" id="tax_rate-icon"><i class="bi bi-percent"></i></span>
+    </div>
 
-        </div>
+    <label for="tax_rounding_code" class="form-label"><?= lang('Taxes.tax_rounding'); ?></label>
+    <div class="input-group mb-3">
+        <span class="input-group-text" id="tax_rounding_code-icon"><i class="bi bi-arrow-repeat"></i></span>
+        <select class="form-select" name="tax_rounding_code" id="tax_rounding_code">
+            <?php foreach ($rounding_options as $id => $label): ?>
+                <option value="<?= $id ?>" <?= $id == $tax_rounding_code ? 'selected' : '' ?>><?= esc($label) ?></option>
+            <?php endforeach; ?>
+        </select>
+    </div>
 
-        <div class="form-group form-group-sm">
-            <?= form_label(lang('Taxes.tax_rounding'), 'tax_rounding_code', ['class' => 'control-label col-xs-3']) ?>
-            <div class="col-xs-5">
-                <?= form_dropdown('tax_rounding_code', $rounding_options, $tax_rounding_code, ['class' => 'form-control input-sm']) ?>
-            </div>
-        </div>
-
-    </fieldset>
 <?= form_close() ?>
 
 <script type="text/javascript">
diff --git a/gulpfile.js b/gulpfile.js
index 9e91a4932..d76bdfb72 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -48,47 +48,43 @@ gulp.task('update-licenses', function() {
 
 // Copy the bootswatch styles into their own folder so OSPOS can select one from the collection
 gulp.task('copy-bootswatch', function() {
-    pipeline(gulp.src('./node_modules/bootswatch/cerulean/*.min.css'),gulp.dest('public/resources/bootswatch/cerulean'));
-    pipeline(gulp.src('./node_modules/bootswatch/cosmo/*.min.css'),gulp.dest('public/resources/bootswatch/cosmo'));
-    pipeline(gulp.src('./node_modules/bootswatch/cyborg/*.min.css'),gulp.dest('public/resources/bootswatch/cyborg'));
-    pipeline(gulp.src('./node_modules/bootswatch/darkly/*.min.css'),gulp.dest('public/resources/bootswatch/darkly'));
-    pipeline(gulp.src('./node_modules/bootswatch/flatly/*.min.css'),gulp.dest('public/resources/bootswatch/flatly'));
-    pipeline(gulp.src('./node_modules/bootswatch/journal/*.min.css'),gulp.dest('public/resources/bootswatch/journal'));
-    pipeline(gulp.src('./node_modules/bootswatch/lumen/*.min.css'),gulp.dest('public/resources/bootswatch/lumen'));
-    pipeline(gulp.src('./node_modules/bootswatch/paper/*.min.css'),gulp.dest('public/resources/bootswatch/paper'));
-    pipeline(gulp.src('./node_modules/bootswatch/readable/*.min.css'),gulp.dest('public/resources/bootswatch/readable'));
-    pipeline(gulp.src('./node_modules/bootswatch/sandstone/*.min.css'),gulp.dest('public/resources/bootswatch/sandstone'));
-    pipeline(gulp.src('./node_modules/bootswatch/simplex/*.min.css'),gulp.dest('public/resources/bootswatch/simplex'));
-    pipeline(gulp.src('./node_modules/bootswatch/slate/*.min.css'),gulp.dest('public/resources/bootswatch/slate'));
-    pipeline(gulp.src('./node_modules/bootswatch/spacelab/*.min.css'),gulp.dest('public/resources/bootswatch/spacelab'));
-    pipeline(gulp.src('./node_modules/bootswatch/superhero/*.min.css'),gulp.dest('public/resources/bootswatch/superhero'));
-    pipeline(gulp.src('./node_modules/bootswatch/united/*.min.css'),gulp.dest('public/resources/bootswatch/united'));
-    return pipeline(gulp.src('./node_modules/bootswatch/yeti/*.min.css'),gulp.dest('public/resources/bootswatch/yeti'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/brite/*.min.css*'),gulp.dest('public/resources/bootswatch/brite'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/cerulean/*.min.css*'),gulp.dest('public/resources/bootswatch/cerulean'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/cosmo/*.min.css*'),gulp.dest('public/resources/bootswatch/cosmo'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/cyborg/*.min.css*'),gulp.dest('public/resources/bootswatch/cyborg'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/darkly/*.min.css*'),gulp.dest('public/resources/bootswatch/darkly'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/flatly/*.min.css*'),gulp.dest('public/resources/bootswatch/flatly'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/journal/*.min.css*'),gulp.dest('public/resources/bootswatch/journal'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/litera/*.min.css*'),gulp.dest('public/resources/bootswatch/litera'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/lumen/*.min.css*'),gulp.dest('public/resources/bootswatch/lumen'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/lux/*.min.css*'),gulp.dest('public/resources/bootswatch/lux'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/materia/*.min.css*'),gulp.dest('public/resources/bootswatch/materia'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/minty/*.min.css*'),gulp.dest('public/resources/bootswatch/minty'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/morph/*.min.css*'),gulp.dest('public/resources/bootswatch/morph'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/pulse/*.min.css*'),gulp.dest('public/resources/bootswatch/pulse'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/quartz/*.min.css*'),gulp.dest('public/resources/bootswatch/quartz'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/sandstone/*.min.css*'),gulp.dest('public/resources/bootswatch/sandstone'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/simplex/*.min.css*'),gulp.dest('public/resources/bootswatch/simplex'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/sketchy/*.min.css*'),gulp.dest('public/resources/bootswatch/sketchy'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/slate/*.min.css*'),gulp.dest('public/resources/bootswatch/slate'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/solar/*.min.css*'),gulp.dest('public/resources/bootswatch/solar'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/spacelab/*.min.css*'),gulp.dest('public/resources/bootswatch/spacelab'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/superhero/*.min.css*'),gulp.dest('public/resources/bootswatch/superhero'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/united/*.min.css*'),gulp.dest('public/resources/bootswatch/united'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/vapor/*.min.css*'),gulp.dest('public/resources/bootswatch/vapor'));
+    pipeline(gulp.src('./node_modules/bootswatch/dist/yeti/*.min.css*'),gulp.dest('public/resources/bootswatch/yeti'));
+    return pipeline(gulp.src('./node_modules/bootswatch/dist/zephyr/*.min.css*'),gulp.dest('public/resources/bootswatch/zephyr'));
 });
 
-// Copy the bootswatch styles into their own folder so OSPOS can select one from the collection
-gulp.task('copy-bootswatch5', function() {
-    pipeline(gulp.src('./node_modules/bootswatch5/dist/cerulean/*.min.css'),gulp.dest('public/resources/bootswatch5/cerulean'));
-    pipeline(gulp.src('./node_modules/bootswatch5/dist/cosmo/*.min.css'),gulp.dest('public/resources/bootswatch5/cosmo'));
-    pipeline(gulp.src('./node_modules/bootswatch5/dist/cyborg/*.min.css'),gulp.dest('public/resources/bootswatch5/cyborg'));
-    pipeline(gulp.src('./node_modules/bootswatch5/dist/darkly/*.min.css'),gulp.dest('public/resources/bootswatch5/darkly'));
-    pipeline(gulp.src('./node_modules/bootswatch5/dist/flatly/*.min.css'),gulp.dest('public/resources/bootswatch5/flatly'));
-    pipeline(gulp.src('./node_modules/bootswatch5/dist/journal/*.min.css'),gulp.dest('public/resources/bootswatch5/journal'));
-    pipeline(gulp.src('./node_modules/bootswatch5/dist/lumen/*.min.css'),gulp.dest('public/resources/bootswatch5/lumen'));
-    pipeline(gulp.src('./node_modules/bootswatch5/dist/sandstone/*.min.css'),gulp.dest('public/resources/bootswatch5/sandstone'));
-    pipeline(gulp.src('./node_modules/bootswatch5/dist/simplex/*.min.css'),gulp.dest('public/resources/bootswatch5/simplex'));
-    pipeline(gulp.src('./node_modules/bootswatch5/dist/slate/*.min.css'),gulp.dest('public/resources/bootswatch5/slate'));
-    pipeline(gulp.src('./node_modules/bootswatch5/dist/spacelab/*.min.css'),gulp.dest('public/resources/bootswatch5/spacelab'));
-    pipeline(gulp.src('./node_modules/bootswatch5/dist/superhero/*.min.css'),gulp.dest('public/resources/bootswatch5/superhero'));
-    pipeline(gulp.src('./node_modules/bootswatch5/dist/united/*.min.css'),gulp.dest('public/resources/bootswatch5/united'));
-    return pipeline(gulp.src('./node_modules/bootswatch5/dist/yeti/*.min.css'),gulp.dest('public/resources/bootswatch5/yeti'));
+
+gulp.task('copy-js', function() {
+    return pipeline(gulp.src('./node_modules/clipboard/dist/clipboard.min.js'),gulp.dest('public/resources/clipboard'));
 });
 
 // Copy the bootstrap style into its own folder so OSPOS can select it from the collection
 gulp.task('copy-bootstrap', function() {
     pipeline(gulp.src('./node_modules/bootstrap/dist/css/bootstrap.min.css*'),gulp.dest('public/resources/bootswatch/bootstrap'));
-    pipeline(gulp.src('./node_modules/bootstrap5/dist/css/bootstrap.min.css*'),gulp.dest('public/resources/bootswatch5/bootstrap'));
-    return pipeline(gulp.src('./node_modules/bootstrap5/dist/css/bootstrap.rtl.min.css*'),gulp.dest('public/resources/bootswatch5/bootstrap'));
+    return pipeline(gulp.src('./node_modules/bootstrap/dist/css/bootstrap.rtl.min.css*'),gulp.dest('public/resources/bootswatch/bootstrap'));
 });
 
 // /public/resources/ospos - contains the minimized files to be packed into opensourcepos.min.[css/js]
@@ -105,11 +101,10 @@ gulp.task('debug-js', function() {
         './node_modules/jquery-form/src/jquery.form.js',
         './node_modules/jquery-validation/dist/jquery.validate.js',
         './node_modules/jquery-ui-dist/jquery-ui.js',
-        './node_modules/bootstrap/dist/js/bootstrap.js',
-        './node_modules/bootstrap3-dialog/dist/js/bootstrap-dialog.js',
+        './node_modules/bootstrap/dist/js/bootstrap.bundle.js',
         './node_modules/jasny-bootstrap/dist/js/jasny-bootstrap.js',
         './node_modules/bootstrap-datetime-picker/js/bootstrap-datetimepicker.js',
-        './node_modules/bootstrap-select/dist/js/bootstrap-select.js',
+        './node_modules/tom-select/dist/js/tom-select.complete.js',
         './node_modules/bootstrap-table/dist/bootstrap-table.js',
         './node_modules/bootstrap-table/dist/extensions/export/bootstrap-table-export.js',
         './node_modules/bootstrap-table/dist/extensions/mobile/bootstrap-table-mobile.js',
@@ -130,8 +125,7 @@ gulp.task('debug-js', function() {
         './node_modules/chartist-plugin-barlabels/dist/chartist-plugin-barlabels.js',
         './node_modules/bootstrap-notify/bootstrap-notify.js',
         './node_modules/bootstrap-tagsinput-2021/dist/bootstrap-tagsinput.js',
-        './node_modules/bootstrap-toggle/js/bootstrap-toggle.js',
-        './node_modules/clipboard/dist/clipboard.js',
+        './node_modules/bootstrap5-toggle/js/bootstrap5-toggle.ecmas.js',
         './public/js/imgpreview.full.jquery.js',
         './public/js/manage_tables.js',
         './public/js/nominatim.autocomplete.js']).pipe(rev()).pipe(gulp.dest('public/resources/js'));
@@ -142,16 +136,15 @@ gulp.task('prod-js', function() {
 
     var prod0js = gulp.src('./node_modules/jquery/dist/jquery.min.js').pipe(rev()).pipe(gulp.dest('public/resources'));
 
-    var opensourcepos1js = gulp.src(['./node_modules/bootstrap/dist/js/bootstrap.min.js',
+    var opensourcepos1js = gulp.src(['./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
         './node_modules/bootstrap-table/dist/bootstrap-table.min.js',
         './node_modules/moment/min/moment.min.js',
         './node_modules/jquery-ui-dist/jquery-ui.min.js',
-        './node_modules/bootstrap3-dialog/dist/js/bootstrap-dialog.min.js',
         './node_modules/jasny-bootstrap/dist/js/jasny-bootstrap.min.js',
-        './node_modules/bootstrap-select/dist/js/bootstrap-select.min.js',
+        './node_modules/tom-select/dist/js/tom-select.complete.min.js',
         './node_modules/bootstrap-table/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.js',
         './node_modules/bootstrap-tagsinput-2021/dist/bootstrap-tagsinput.min.js',
-        './node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js',
+        './node_modules/bootstrap5-toggle/js/bootstrap5-toggle.ecmas.min.js',
         './node_modules/bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js',
         './node_modules/bootstrap-table/dist/extensions/mobile/bootstrap-table-mobile.min.js',
         './node_modules/bootstrap-notify/bootstrap-notify.min.js',
@@ -208,24 +201,21 @@ gulp.task('prod-login-js', function() {
 
 gulp.task('debug-css', function() {
     var debugcss = gulp.src(['./node_modules/jquery-ui-dist/jquery-ui.css',
-        './node_modules/bootstrap3-dialog/dist/css/bootstrap-dialog.css',
         './node_modules/jasny-bootstrap/dist/css/jasny-bootstrap.css',
         './node_modules/bootstrap-datetime-picker/css/bootstrap-datetimepicker.css',
-        './node_modules/bootstrap-select/dist/css/bootstrap-select.css',
+        './node_modules/tom-select/dist/css/tom-select.bootstrap5.css',
         './node_modules/bootstrap-table/dist/bootstrap-table.css',
         './node_modules/bootstrap-table/dist/extensions/sticky-header/bootstrap-table-sticky-header.css',
         './node_modules/bootstrap-daterangepicker/daterangepicker.css',
         './node_modules/chartist/dist/chartist.css',
         './node_modules/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.css',
         './node_modules/bootstrap-tagsinput-2021/src/bootstrap-tagsinput.css',
-        './node_modules/bootstrap-toggle/css/bootstrap-toggle.css',
+        './node_modules/bootstrap5-toggle/css/bootstrap5-toggle.css',
         './public/css/bootstrap.autocomplete.css',
+        './public/css/interface.css',
         './public/css/invoice.css',
         './public/css/ospos_print.css',
-        './public/css/ospos.css',
-        './public/css/popupbox.css',
         './public/css/receipt.css',
-        './public/css/register.css',
         './public/css/reports.css'
     ]).pipe(rev()).pipe(gulp.dest('public/resources/css'));
     return gulp.src('./app/Views/partial/header.php').pipe(inject(debugcss,{addRootSlash: false, ignorePath: '/public/', starttag: '<!-- inject:debug:css -->'})).pipe(gulp.dest('./app/Views/partial'));
@@ -234,29 +224,26 @@ gulp.task('debug-css', function() {
 
 gulp.task('prod-css', function() {
     var opensourcepos1css = gulp.src(['./node_modules/jquery-ui-dist/jquery-ui.min.css',
-        './node_modules/bootstrap3-dialog/dist/css/bootstrap-dialog.min.css',
         './node_modules/jasny-bootstrap/dist/css/jasny-bootstrap.min.css',
         './node_modules/bootstrap-datetime-picker/css/bootstrap-datetimepicker.min.css']);
 
     var opensourcepos2css = gulp.src(['./node_modules/bootstrap-daterangepicker/daterangepicker.css',
         './node_modules/bootstrap-tagsinput-2021/src/bootstrap-tagsinput.css']).pipe(cleanCSS({compatibility: 'ie8'}));
 
-    var opensourcepos3css = gulp.src(['./node_modules/bootstrap-select/dist/css/bootstrap-select.min.css',
+    var opensourcepos3css = gulp.src(['./node_modules/tom-select/dist/css/tom-select.bootstrap5.min.css',
         './node_modules/bootstrap-table/dist/bootstrap-table.min.css',
         './node_modules/bootstrap-table/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.css',
-        './node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css',
+        './node_modules/bootstrap5-toggle/css/bootstrap5-toggle.min.css',
         './node_modules/chartist/dist/chartist.min.css']);
 
     var opensourcepos4css = gulp.src('./node_modules/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.css').pipe(cleanCSS({compatibility: 'ie8'}));
 
     var opensourcepos5css = gulp.src(['./node_modules/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.css',
         './public/css/bootstrap.autocomplete.css',
+        './public/css/interface.css',
         './public/css/invoice.css',
-        './public/css/ospos.css',
         './public/css/ospos_print.css',
-        './public/css/popupbox.css',
         './public/css/receipt.css',
-        './public/css/register.css',
         './public/css/reports.css'
     ]).pipe(cleanCSS({compatibility: 'ie8'}));
 
@@ -301,8 +288,8 @@ gulp.task('default',
     gulp.series('clean',
         'update-licenses',
         'copy-bootswatch',
-        'copy-bootswatch5',
         'copy-bootstrap',
+        'copy-js',
         'debug-js',
         'prod-js',
         'debug-login-js',
diff --git a/package-lock.json b/package-lock.json
index a9b32134b..9f7d61246 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,19 +9,15 @@
             "version": "3.4.2",
             "license": "MIT",
             "dependencies": {
-                "bootstrap": "^3.4.1",
-                "bootstrap-daterangepicker": "^2.1.27",
+                "bootstrap": "^5.3.8",
+                "bootstrap-daterangepicker": "^3.1.0",
                 "bootstrap-datetime-picker": "2.4.4",
                 "bootstrap-icons": "^1.13.1",
-                "bootstrap-notify": "^3.1.3",
-                "bootstrap-select": "^1.13.18",
-                "bootstrap-table": "^1.23.5",
+                "bootstrap-notify": "github:BudsieBuds/bootstrap-notify#master",
+                "bootstrap-table": "^1.27.3",
                 "bootstrap-tagsinput-2021": "^0.8.6",
-                "bootstrap-toggle": "^2.2.2",
-                "bootstrap3-dialog": "github:nakupanda/bootstrap3-dialog#master",
-                "bootstrap5": "npm:bootstrap@^5.3.8",
-                "bootswatch": "^3.4.1",
-                "bootswatch5": "npm:bootswatch@^5.3.8",
+                "bootstrap5-toggle": "^5.4.1",
+                "bootswatch": "^5.3.8",
                 "chartist": "^0.11.4",
                 "chartist-plugin-axistitle": "^0.0.7",
                 "chartist-plugin-barlabels": "^0.0.5",
@@ -34,14 +30,15 @@
                 "es6-promise": "^4.2.8",
                 "file-saver": "^2.0.5",
                 "html2canvas": "^1.4.1",
-                "jasny-bootstrap": "^3.1.3",
+                "jasny-bootstrap": "^4.0.0",
                 "jquery": "^3.7.1",
                 "jquery-form": "^4.3.0",
                 "jquery-ui-dist": "^1.12.1",
                 "jquery-validation": "^1.19.5",
                 "jspdf": "^4.2.1",
                 "jspdf-autotable": "^5.0.7",
-                "tableexport.jquery.plugin": "^1.30.0"
+                "tableexport.jquery.plugin": "^1.30.0",
+                "tom-select": "^2.6.2"
             },
             "devDependencies": {
                 "gulp": "^5.0.1",
@@ -58,8 +55,8 @@
                 "gulp-tar": "^5.0.0",
                 "gulp-uglify": "^3.0.2",
                 "gulp-zip": "^6.1.0",
-                "license-report": "^6.8.2",
-                "npm-check-updates": "^22.1.1",
+                "license-report": "^6.8.5",
+                "npm-check-updates": "^22.2.9",
                 "readable-stream": "^4.4.2",
                 "stream-series": "^0.1.1"
             }
@@ -182,6 +179,21 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/@orchidjs/sifter": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@orchidjs/sifter/-/sifter-1.1.0.tgz",
+            "integrity": "sha512-mYwHCfr736cIWWdhhSZvDbf90AKt2xyrJspKFC3qyIJG1LtrJeJunYEqCGG4Aq2ijENbc4WkOjszcvNaIAS/pQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@orchidjs/unicode-variants": "^1.1.2"
+            }
+        },
+        "node_modules/@orchidjs/unicode-variants": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@orchidjs/unicode-variants/-/unicode-variants-1.1.2.tgz",
+            "integrity": "sha512-5DobW1CHgnBROOEpFlEXytED5OosEWESFvg/VYmH0143oXcijYTprRYJTs+55HzGM4IqxiLFSuqEzu9mPNwVsA==",
+            "license": "Apache-2.0"
+        },
         "node_modules/@pkgjs/parseargs": {
             "version": "0.11.0",
             "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -211,13 +223,13 @@
             "license": "MIT"
         },
         "node_modules/@sindresorhus/is": {
-            "version": "7.2.0",
-            "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-7.2.0.tgz",
-            "integrity": "sha512-P1Cz1dWaFfR4IR+U13mqqiGsLFf1KbayybWwdd2vfctdV6hDpUkgCY0nKOLLTMSoRd/jJNjtbqzf13K8DCCXQw==",
+            "version": "8.1.0",
+            "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-8.1.0.tgz",
+            "integrity": "sha512-2SX/1jW6CIMAiebvVv5ZInoCEuWQmMyBoJXXGC6Vjakjp/fpxP5eHs7/V6WKuPEIbuK06+VpjH+vjLQhr98rDQ==",
             "dev": true,
             "license": "MIT",
             "engines": {
-                "node": ">=18"
+                "node": ">=22"
             },
             "funding": {
                 "url": "https://github.com/sindresorhus/is?sponsor=1"
@@ -824,17 +836,29 @@
             }
         },
         "node_modules/bootstrap": {
-            "version": "3.4.1",
-            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.4.1.tgz",
-            "integrity": "sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA==",
-            "engines": {
-                "node": ">=6"
+            "version": "5.3.8",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
+            "integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/twbs"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/bootstrap"
+                }
+            ],
+            "license": "MIT",
+            "peerDependencies": {
+                "@popperjs/core": "^2.11.8"
             }
         },
         "node_modules/bootstrap-daterangepicker": {
-            "version": "2.1.30",
-            "resolved": "https://registry.npmjs.org/bootstrap-daterangepicker/-/bootstrap-daterangepicker-2.1.30.tgz",
-            "integrity": "sha512-lZAmyQxwsthEbsIBKl2KVcUca+b/O8uAJxxY8AvlsCYF9dQlIY7WjskuqMJ3b/1YdXUgxHN/R6HFdVVNFSgeVQ==",
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/bootstrap-daterangepicker/-/bootstrap-daterangepicker-3.1.0.tgz",
+            "integrity": "sha512-oaQZx6ZBDo/dZNyXGVi2rx5GmFXThyQLAxdtIqjtLlYVaQUfQALl5JZMJJZzyDIX7blfy4ppZPAJ10g8Ma4d/g==",
+            "license": "MIT",
             "dependencies": {
                 "jquery": ">=1.10",
                 "moment": "^2.9.0"
@@ -862,26 +886,17 @@
             "license": "MIT"
         },
         "node_modules/bootstrap-notify": {
-            "version": "3.1.3",
-            "resolved": "https://registry.npmjs.org/bootstrap-notify/-/bootstrap-notify-3.1.3.tgz",
-            "integrity": "sha512-cnTactFVG8aHri03+RmuZ5sl9VcA+jTTM/mTdEOQN+R1V9u4YBu8Ca+Pf6NGeVfieGv0Z6CxK8FzlWg59omzyg=="
-        },
-        "node_modules/bootstrap-select": {
-            "version": "1.13.18",
-            "resolved": "https://registry.npmjs.org/bootstrap-select/-/bootstrap-select-1.13.18.tgz",
-            "integrity": "sha512-V1IzK4rxBq5FrJtkzSH6RmFLFBsjx50byFbfAf8jYyXROWs7ZpprGjdHeoyq2HSsHyjJhMMwjsQhRoYAfxCGow==",
-            "peerDependencies": {
-                "bootstrap": ">=3.0.0",
-                "jquery": "1.9.1 - 3"
-            }
+            "version": "5.0.0",
+            "resolved": "git+ssh://git@github.com/BudsieBuds/bootstrap-notify.git#6138177296203f734116ae32db367329409fc8dc",
+            "license": "MIT"
         },
         "node_modules/bootstrap-table": {
-            "version": "1.23.5",
-            "resolved": "https://registry.npmjs.org/bootstrap-table/-/bootstrap-table-1.23.5.tgz",
-            "integrity": "sha512-9WByoSpJvA73gi2YYIlX6IWR74oZtBmSixul/Th8FTBtBd/kZRpbKESGTjhA3BA3AYTnfyY8Iy1KeRWPlV2GWQ==",
+            "version": "1.27.3",
+            "resolved": "https://registry.npmjs.org/bootstrap-table/-/bootstrap-table-1.27.3.tgz",
+            "integrity": "sha512-XB+8E5g72tdd18qcoV00pnz5PDl/w+sAaDrliJy11YZrJp3nj3Uw1KogblHYMsbeQW+FhAMJOu9HG8l0M8LyQA==",
             "license": "MIT",
             "peerDependencies": {
-                "jquery": "3"
+                "jquery": "3 || 4"
             }
         },
         "node_modules/bootstrap-tagsinput-2021": {
@@ -889,45 +904,39 @@
             "resolved": "https://registry.npmjs.org/bootstrap-tagsinput-2021/-/bootstrap-tagsinput-2021-0.8.6.tgz",
             "integrity": "sha512-/ZbR3Hl6BtpbuVuoXPxiyoh4a4fKyoyKn4pFXyL4fGEEQ3uwPS4/urrJ5O9ew2WkfBkJUdHnCLtNuVeUlz6HoA=="
         },
-        "node_modules/bootstrap-toggle": {
-            "version": "2.2.2",
-            "resolved": "https://registry.npmjs.org/bootstrap-toggle/-/bootstrap-toggle-2.2.2.tgz",
-            "integrity": "sha512-AkYD/i3NGCEksIb/PmmUrrxpa0DYi7Si30e9Ldhou2t1HTd9npoXUsxJJjFPvlV7iLUptlysWTcYD7i3DKV6qg=="
-        },
-        "node_modules/bootstrap3-dialog": {
-            "version": "1.35.4",
-            "resolved": "git+ssh://git@github.com/nakupanda/bootstrap3-dialog.git#a491a98c97921114883ad44e5715fe28396dbaea"
-        },
-        "node_modules/bootstrap5": {
-            "name": "bootstrap",
-            "version": "5.3.8",
-            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
-            "integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==",
-            "funding": [
-                {
-                    "type": "github",
-                    "url": "https://github.com/sponsors/twbs"
-                },
-                {
-                    "type": "opencollective",
-                    "url": "https://opencollective.com/bootstrap"
-                }
-            ],
+        "node_modules/bootstrap5-toggle": {
+            "version": "5.4.1",
+            "resolved": "https://registry.npmjs.org/bootstrap5-toggle/-/bootstrap5-toggle-5.4.1.tgz",
+            "integrity": "sha512-+Em3YLPINxGeXxMbgIG0Q7H4VfPSnnLfr9Ocr4uJGzaX1tXNUNRZb/yDZ10kA2IM2Y1g7bYRinZEOObFkNSE9g==",
             "license": "MIT",
+            "engines": {
+                "node": ">=22 <25",
+                "npm": ">=10"
+            },
+            "funding": {
+                "type": "GitHub Sponsors",
+                "url": "https://github.com/sponsors/palcarazm"
+            },
+            "optionalDependencies": {
+                "jquery": "^4.0.0"
+            },
             "peerDependencies": {
-                "@popperjs/core": "^2.11.8"
+                "bootstrap": ">=5 <6"
+            },
+            "peerDependenciesMeta": {
+                "bootstrap": {
+                    "optional": false
+                }
             }
         },
+        "node_modules/bootstrap5-toggle/node_modules/jquery": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/jquery/-/jquery-4.0.0.tgz",
+            "integrity": "sha512-TXCHVR3Lb6TZdtw1l3RTLf8RBWVGexdxL6AC8/e0xZKEpBflBsjh9/8LXw+dkNFuOyW9B7iB3O1sP7hS0Kiacg==",
+            "license": "MIT",
+            "optional": true
+        },
         "node_modules/bootswatch": {
-            "version": "3.4.1",
-            "resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-3.4.1.tgz",
-            "integrity": "sha512-0hL4A8OUiqABgPipGrojf/hyhr5RS257xCNARlbK34HaMfhV5fXvwEooN4/ri9+jgX47J4Wg24ZPmfZ2xD2cKw==",
-            "engines": {
-                "node": ">= 0.10.0"
-            }
-        },
-        "node_modules/bootswatch5": {
-            "name": "bootswatch",
             "version": "5.3.8",
             "resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-5.3.8.tgz",
             "integrity": "sha512-88mnH9tv+x6DV+scBxYFOpM4YSDVhyfEgbhqaEfvkHNctKI9qRcACxIP9nmBZ5mSeLXtsgax1VsRkUs1eWjlAQ==",
@@ -1030,16 +1039,16 @@
             }
         },
         "node_modules/cacheable-request": {
-            "version": "13.0.18",
-            "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-13.0.18.tgz",
-            "integrity": "sha512-rFWadDRKJs3s2eYdXlGggnBZKG7MTblkFBB0YllFds+UYnfogDp2wcR6JN97FhRkHTvq59n2vhNoHNZn29dh/Q==",
+            "version": "13.0.19",
+            "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-13.0.19.tgz",
+            "integrity": "sha512-SVXGH037+Mo1aIMO5B2UcleR43FGjFdN+M8JObSyEoQ2Mn4CODRWx28gN5jiTF0n5ItsgtIZfyargMNs8GX4kg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@types/http-cache-semantics": "^4.0.4",
+                "@types/http-cache-semantics": "^4.2.0",
                 "get-stream": "^9.0.1",
                 "http-cache-semantics": "^4.2.0",
-                "keyv": "^5.5.5",
+                "keyv": "^5.6.0",
                 "mimic-response": "^4.0.0",
                 "normalize-url": "^8.1.1",
                 "responselike": "^4.0.2"
@@ -1187,6 +1196,19 @@
                 "fsevents": "~2.3.2"
             }
         },
+        "node_modules/chunk-data": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/chunk-data/-/chunk-data-0.1.0.tgz",
+            "integrity": "sha512-zFyPtyC0SZ6Zu79b9sOYtXZcgrsXe0RpePrzRyj52hYVFG1+Rk6rBqjjOEk+GNQwc3PIX+86teQMok970pod1g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=20"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/clean-css": {
             "version": "4.2.3",
             "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -2126,16 +2148,6 @@
                 "url": "https://github.com/sponsors/isaacs"
             }
         },
-        "node_modules/form-data-encoder": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/form-data-encoder/-/form-data-encoder-4.1.0.tgz",
-            "integrity": "sha512-G6NsmEW15s0Uw9XnCg+33H3ViYRyiM0hMrMhhqQOR8NFc5GhYrI+6I3u7OTw7b91J2g8rtvMBZJDbcGb2YUniw==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">= 18"
-            }
-        },
         "node_modules/frac": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
@@ -2422,27 +2434,27 @@
             }
         },
         "node_modules/got": {
-            "version": "14.6.6",
-            "resolved": "https://registry.npmjs.org/got/-/got-14.6.6.tgz",
-            "integrity": "sha512-QLV1qeYSo5l13mQzWgP/y0LbMr5Plr5fJilgAIwgnwseproEbtNym8xpLsDzeZ6MWXgNE6kdWGBjdh3zT/Qerg==",
+            "version": "15.1.0",
+            "resolved": "https://registry.npmjs.org/got/-/got-15.1.0.tgz",
+            "integrity": "sha512-DG+DAAkRtno+oDr/GBsliAkhN9+zczOPM5qXk3efDZY3qvyRnZU+NwQlb/IOY6cSnxxTR9z3aHCcShJyjb0hJA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@sindresorhus/is": "^7.0.1",
+                "@sindresorhus/is": "^8.0.0",
                 "byte-counter": "^0.1.0",
                 "cacheable-lookup": "^7.0.0",
-                "cacheable-request": "^13.0.12",
+                "cacheable-request": "^13.0.18",
+                "chunk-data": "^0.1.0",
                 "decompress-response": "^10.0.0",
-                "form-data-encoder": "^4.0.2",
                 "http2-wrapper": "^2.2.1",
-                "keyv": "^5.5.3",
-                "lowercase-keys": "^3.0.0",
-                "p-cancelable": "^4.0.1",
+                "keyv": "^5.6.0",
+                "lowercase-keys": "^4.0.1",
                 "responselike": "^4.0.2",
-                "type-fest": "^4.26.1"
+                "type-fest": "^5.6.0",
+                "uint8array-extras": "^1.5.0"
             },
             "engines": {
-                "node": ">=20"
+                "node": ">=22"
             },
             "funding": {
                 "url": "https://github.com/sindresorhus/got?sponsor=1"
@@ -4060,9 +4072,10 @@
             }
         },
         "node_modules/jasny-bootstrap": {
-            "version": "3.1.3",
-            "resolved": "https://registry.npmjs.org/jasny-bootstrap/-/jasny-bootstrap-3.1.3.tgz",
-            "integrity": "sha512-i2O5dUFuYV56Pyl6aZ5hWmsttTySXRBp+4X4kFlKYHLsJeaeiT3IkpbCPMdrDa1zQbm856cuLoxMEh+3fSOVaQ=="
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/jasny-bootstrap/-/jasny-bootstrap-4.0.0.tgz",
+            "integrity": "sha512-NDaZxaxizDjnH/5XESqC8inuas7aAuOn8RkCma4z9xAYfT/UQpZRvnH92oXtAbPA4Hn3jyjqWHzTmd2cyD+DDA==",
+            "license": "Apache-2.0"
         },
         "node_modules/jquery": {
             "version": "3.7.1",
@@ -4195,9 +4208,9 @@
             }
         },
         "node_modules/license-report": {
-            "version": "6.8.2",
-            "resolved": "https://registry.npmjs.org/license-report/-/license-report-6.8.2.tgz",
-            "integrity": "sha512-eWzJujDhPm5bKTrolTBt8mvL6YW3c5SY1kpqnt7GmTLU01rOtzjqe3sevOQLF2dPY7dV+VnSZIWV774Cgqz/Eg==",
+            "version": "6.8.5",
+            "resolved": "https://registry.npmjs.org/license-report/-/license-report-6.8.5.tgz",
+            "integrity": "sha512-mUOQD1C1yEHShuPeZBjv7y/EXn7kYEfq7roY1lQmVtYm4FCE81aMn65gGrtU7Cw+YRuwchkoMYegoF3wdeZNLQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -4205,10 +4218,10 @@
                 "debug": "^4.4.3",
                 "eol": "^0.10.0",
                 "find-up-simple": "^1.0.1",
-                "got": "^14.6.6",
-                "ini": "^6.0.0",
+                "got": "^15.0.5",
+                "ini": "^7.0.0",
                 "rc": "^1.2.8",
-                "semver": "^7.7.4",
+                "semver": "^7.8.0",
                 "tablemark": "^4.1.0",
                 "text-table": "^0.2.0",
                 "visit-values": "^2.0.0"
@@ -4221,13 +4234,13 @@
             }
         },
         "node_modules/license-report/node_modules/ini": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/ini/-/ini-6.0.0.tgz",
-            "integrity": "sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ==",
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/ini/-/ini-7.0.0.tgz",
+            "integrity": "sha512-ifK0CgjALofS5bkrcTy4RaQ9Vx2Knf/eLeIO+NaswQEpH1UblrtTSCIvN71qQDMq0PeQ/SSPojvEJp9vvvfr+w==",
             "dev": true,
             "license": "ISC",
             "engines": {
-                "node": "^20.17.0 || >=22.9.0"
+                "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
             }
         },
         "node_modules/liftoff": {
@@ -4405,13 +4418,13 @@
             }
         },
         "node_modules/lowercase-keys": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-3.0.0.tgz",
-            "integrity": "sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==",
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-4.0.1.tgz",
+            "integrity": "sha512-wI9Nui/L8VfADa/cr/7NQruaASk1k23/Uh1khQ02BCVYiiy8F4AhOGnQzJy3Fl/c44GnYSbZHv8g7EcG3kJ1Qg==",
             "dev": true,
             "license": "MIT",
             "engines": {
-                "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+                "node": ">=20"
             },
             "funding": {
                 "url": "https://github.com/sponsors/sindresorhus"
@@ -4600,9 +4613,9 @@
             }
         },
         "node_modules/npm-check-updates": {
-            "version": "22.1.1",
-            "resolved": "https://registry.npmjs.org/npm-check-updates/-/npm-check-updates-22.1.1.tgz",
-            "integrity": "sha512-uWSxJW25dy5ZM4SdLsi0VBgPSJlo7u+jARQ6Xql+85YYCoqXU2ZaympAZ6237/oybCq/I4nXddE9S9BTwBfBXA==",
+            "version": "22.2.9",
+            "resolved": "https://registry.npmjs.org/npm-check-updates/-/npm-check-updates-22.2.9.tgz",
+            "integrity": "sha512-DVeZ0KirHfliSsHuR2o7cHE+tW439sVHfJjF6cGWeDiY0Wyl3BI/jS4zV0eixtcMOquFbcF1Su/FsxOvk5MoYA==",
             "dev": true,
             "license": "Apache-2.0",
             "bin": {
@@ -4710,16 +4723,6 @@
                 "wrappy": "1"
             }
         },
-        "node_modules/p-cancelable": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-4.0.1.tgz",
-            "integrity": "sha512-wBowNApzd45EIKdO1LaU+LrMBwAcjfPaYtVzV3lmfM3gf8Z4CHZsiIqlM8TZZ8okYvh5A1cP6gTfCRQtwUpaUg==",
-            "dev": true,
-            "license": "MIT",
-            "engines": {
-                "node": ">=14.16"
-            }
-        },
         "node_modules/package-json-from-dist": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
@@ -5214,6 +5217,19 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/responselike/node_modules/lowercase-keys": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-3.0.0.tgz",
+            "integrity": "sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/restructure": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/restructure/-/restructure-2.0.1.tgz",
@@ -5358,9 +5374,9 @@
             "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
         },
         "node_modules/semver": {
-            "version": "7.7.4",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
-            "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+            "version": "7.8.5",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+            "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
             "dev": true,
             "license": "ISC",
             "bin": {
@@ -5955,6 +5971,19 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/tagged-tag": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",
+            "integrity": "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=20"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/tar-stream": {
             "version": "3.2.0",
             "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.2.0.tgz",
@@ -6104,19 +6133,39 @@
                 "node": ">=10.13.0"
             }
         },
+        "node_modules/tom-select": {
+            "version": "2.6.2",
+            "resolved": "https://registry.npmjs.org/tom-select/-/tom-select-2.6.2.tgz",
+            "integrity": "sha512-eiXIkk82XzzUTOVQDFpy+ZGejuqdTvMukyUyeZBQaKnqW42UoTiTZnrod/eX0rkqJEc4rZY9DZ3zdjV07i29wQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@orchidjs/sifter": "^1.1.0",
+                "@orchidjs/unicode-variants": "^1.1.2"
+            },
+            "engines": {
+                "node": "*"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/tom-select"
+            }
+        },
         "node_modules/tslib": {
             "version": "2.6.2",
             "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
             "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
         },
         "node_modules/type-fest": {
-            "version": "4.41.0",
-            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
-            "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+            "version": "5.8.0",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-5.8.0.tgz",
+            "integrity": "sha512-YGYEVz3Fm5iy/AybuA0oyNFq7H4CgQNfRp/qfe8nurE1kuCeNm3/vfm9X4Mtl+qLyaKJUh5xrFZwogr41SMjYA==",
             "dev": true,
             "license": "(MIT OR CC0-1.0)",
+            "dependencies": {
+                "tagged-tag": "^1.0.0"
+            },
             "engines": {
-                "node": ">=16"
+                "node": ">=20"
             },
             "funding": {
                 "url": "https://github.com/sponsors/sindresorhus"
@@ -6134,6 +6183,19 @@
                 "node": ">=0.8.0"
             }
         },
+        "node_modules/uint8array-extras": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/uint8array-extras/-/uint8array-extras-1.5.0.tgz",
+            "integrity": "sha512-rvKSBiC5zqCCiDZ9kAOszZcDvdAHwwIKJG33Ykj43OKcWsnmcBRL09YTU4nOeHZ8Y2a7l1MgTd08SBe9A8Qj6A==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/unc-path-regex": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
diff --git a/package.json b/package.json
index 4a54197c1..4aac840a8 100644
--- a/package.json
+++ b/package.json
@@ -29,19 +29,15 @@
         "gulp": "gulp"
     },
     "dependencies": {
-        "bootstrap": "^3.4.1",
-        "bootstrap-daterangepicker": "^2.1.27",
+        "bootstrap": "^5.3.8",
+        "bootstrap-daterangepicker": "^3.1.0",
         "bootstrap-datetime-picker": "2.4.4",
         "bootstrap-icons": "^1.13.1",
-        "bootstrap-notify": "^3.1.3",
-        "bootstrap-select": "^1.13.18",
-        "bootstrap-table": "^1.23.5",
+        "bootstrap-notify": "github:BudsieBuds/bootstrap-notify#master",
+        "bootstrap-table": "^1.27.3",
         "bootstrap-tagsinput-2021": "^0.8.6",
-        "bootstrap-toggle": "^2.2.2",
-        "bootstrap3-dialog": "github:nakupanda/bootstrap3-dialog#master",
-        "bootstrap5": "npm:bootstrap@^5.3.8",
-        "bootswatch": "^3.4.1",
-        "bootswatch5": "npm:bootswatch@^5.3.8",
+        "bootstrap5-toggle": "^5.4.1",
+        "bootswatch": "^5.3.8",
         "chartist": "^0.11.4",
         "chartist-plugin-axistitle": "^0.0.7",
         "chartist-plugin-barlabels": "^0.0.5",
@@ -54,14 +50,15 @@
         "es6-promise": "^4.2.8",
         "file-saver": "^2.0.5",
         "html2canvas": "^1.4.1",
-        "jasny-bootstrap": "^3.1.3",
+        "jasny-bootstrap": "^4.0.0",
         "jquery": "^3.7.1",
         "jquery-form": "^4.3.0",
         "jquery-ui-dist": "^1.12.1",
         "jquery-validation": "^1.19.5",
         "jspdf": "^4.2.1",
         "jspdf-autotable": "^5.0.7",
-        "tableexport.jquery.plugin": "^1.30.0"
+        "tableexport.jquery.plugin": "^1.30.0",
+        "tom-select": "^2.6.2"
     },
     "devDependencies": {
         "gulp": "^5.0.1",
@@ -78,8 +75,8 @@
         "gulp-tar": "^5.0.0",
         "gulp-uglify": "^3.0.2",
         "gulp-zip": "^6.1.0",
-        "license-report": "^6.8.2",
-        "npm-check-updates": "^22.1.1",
+        "license-report": "^6.8.5",
+        "npm-check-updates": "^22.2.9",
         "readable-stream": "^4.4.2",
         "stream-series": "^0.1.1"
     },
diff --git a/public/css/interface.css b/public/css/interface.css
new file mode 100644
index 000000000..af6df231e
--- /dev/null
+++ b/public/css/interface.css
@@ -0,0 +1,71 @@
+/* Standard Desktop Styling */
+html {
+    height: -webkit-fill-available; /* Prevent mobile webkit browsers from dropping footer behind the navigation bar */
+}
+
+body {
+    min-height: 100vh;
+    min-height: -webkit-fill-available; /* Prevent mobile webkit browsers from dropping footer behind the navigation bar */
+}
+
+@media (min-width: 1640px) {
+    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+        max-width: 1560px;
+    }
+}
+
+nav img {
+    height: 2.5em;
+}
+
+nav li:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+main {
+    overflow-x: auto;
+}
+
+section>div {
+    flex-basis: 10%;
+    white-space: nowrap;
+}
+
+section a {
+    text-decoration: none;
+}
+
+section>div img {
+    transition: all 0.1s ease-in-out;
+}
+
+section>div:hover img {
+    transform: scale(1.05);
+}
+
+section>div:hover .tile-text span {
+    color: rgba(255, 255, 255, 0.75)
+}
+
+section img {
+    height: 6em;
+}
+
+@media (max-width: 991.98px) {
+    .container-navbar {
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    nav img {
+        height: 1.5em;
+    }
+
+    #navbar:last-child {
+        padding-bottom: 0.5em;
+    }
+}
+
+.mw-register {
+    min-width: 1114px;
+}
diff --git a/public/css/ospos.css b/public/css/ospos.css
deleted file mode 100644
index ed0bd5304..000000000
--- a/public/css/ospos.css
+++ /dev/null
@@ -1,186 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-}
-
-html,
-body {
-    height: 100%;
-}
-
-a.none {
-    text-decoration: none;
-}
-
-.topbar {
-    color: #eee;
-    font-size: 12px;
-    background: #182735;
-    padding: 0.2em;
-}
-
-/* Add container-xxl width from Bootstrap 5 */
-@media (min-width: 1400px) {
-    .container {
-        width: 1320px;
-    }
-}
-
-.navbar {
-    border-radius: 0;
-}
-
-.tab-pane {
-    padding-top: 10px;
-}
-
-.navbar-default .navbar-nav>.active>a,
-.navbar-default .navbar-nav>.active>a:hover,
-.navbar-default .navbar-nav>.active>a:focus {
-    color: #2C3E50;
-    background-color: #FFFFFF;
-}
-
-.jumbotron.push-spaces {
-    margin: 0; /* Add this */
-}
-
-.navbar .menu-icon {
-    text-align: center;
-    font-size: 12px;
-}
-
-.navbar .menu-icon img {
-    width: 24px;
-}
-
-.wrapper {
-    font-size: 13px;
-}
-
-#title_bar {
-    position: relative;
-    width: 100%;
-    height: 3em;
-}
-
-#page_title {
-    font-size: 22px;
-    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-weight: 400;
-}
-
-#page_subtitle {
-    margin-bottom: 0.5em;
-    font-size: 16px;
-    font-weight: bold;
-    text-align: center;
-}
-
-#home_module_list,
-#office_module_list {
-    position: relative;
-    padding: 2em 0;
-    text-align: center;
-}
-
-.module_item {
-    min-width: 7em;
-    display: inline-block;
-    text-align: center;
-}
-
-.module_item a {
-    display: block;
-}
-
-#config_wrapper {
-    text-align: center;
-}
-
-#config_info {
-    text-align: left;
-}
-
-#config_info .wide {
-    width: 30%;
-}
-
-#integrations_header {
-    margin: 10px 0;
-    text-align: center;
-    font-size: 1.4em;
-    font-weight: normal;
-    padding: 10px 0
-}
-
-#footer {
-    margin-top: 5em;
-    position: relative;
-    text-align: center;
-    font-size: 11px;
-    color: #777777;
-    clear: both;
-}
-
-a.rollover img {
-    padding: 3px;
-}
-
-#filters.btn-group {
-    vertical-align: none;
-}
-
-button.btn.dropdown-toggle.btn-sm {
-    background-color: white;
-    color: black;
-    border: 2px solid #dce4ec;
-}
-
-.dropdown-menu {
-    font-size: 13px;
-}
-
-.bootstrap-tagsinput {
-    background-color: white;
-    color: black;
-    border: 2px solid #dce4ec;
-    box-shadow: none;
-}
-
-label.required {
-    color: red;
-}
-
-@media (min-width: 768px) {
-    .navbar-nav>li>a {
-        padding: 10px 10px 9px;
-    }
-
-    .modal-dlg .modal-dialog {
-        width: 500px;
-    }
-
-    .modal-dlg-wide .modal-dialog {
-        width: 750px;
-    }
-}
-
-.modal-body {
-    max-height: calc(100vh - 212px);
-    overflow-y: auto;
-}
-
-.no-gutter [class*="-1"] {
-    padding-right: 0;
-    padding-left: 0;
-}
-
-.icon-spacing {
-    margin-right: .5em;
-}
-
-/* Recreate font-monospace class from Bootstrap 5 */
-.font-monospace {
-    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-}
diff --git a/public/css/popupbox.css b/public/css/popupbox.css
deleted file mode 100644
index 1073a3483..000000000
--- a/public/css/popupbox.css
+++ /dev/null
@@ -1,86 +0,0 @@
-#required_fields_message {
-    width: 100%;
-    text-align: center;
-    margin-bottom: 3px;
-    font-style: italic;
-}
-
-.error_message_box {
-    margin-bottom: 7px;
-    margin-left: 20px;
-    color: red;
-    font-weight: bold;
-}
-
-#customer_basic_info,
-#item_basic_info,
-#item_number_info,
-#supplier_basic_info,
-#sale_basic_info,
-#employee_basic_info,
-#employee_login_info,
-#employee_permission_info {
-    padding: 5px;
-}
-
-#info_provided_by {
-    display: none;
-    font-weight: bold;
-}
-
-#permission_list {
-    list-style: none;
-}
-
-#permission_list li {
-    padding: 5px;
-}
-
-#permission_list ul li {
-    padding-left: 20px;
-    padding-bottom: 0px;
-    list-style: none;
-}
-
-#permission_list input {
-    top: 3px;
-}
-
-#employee_permission_info p {
-    font-weight: bold;
-}
-
-#employee_permission_info span.small {
-    font-style: italic;
-    font-size: 80%;
-}
-
-#item_kit_items,
-#items_count_details {
-    font-size: 80%;
-}
-
-#item_kit_items,
-#items_count_details,
-#tax_rates {
-    width: 100%;
-}
-
-#item_kit_items thead tr,
-#items_count_details thead tr,
-#tax_rates thead tr {
-    background-color: #CCC;
-}
-
-#item_kit_items th,
-#items_count_details th,
-#tax_rates th {
-    text-align: center;
-    font-weight: bold;
-}
-
-#item_kit_items td,
-#items_count_details td,
-#tax_rates td {
-    text-align: center;
-}
diff --git a/public/css/receipt.css b/public/css/receipt.css
index be194af4f..32078f445 100644
--- a/public/css/receipt.css
+++ b/public/css/receipt.css
@@ -6,11 +6,6 @@
     text-align: center;
 }
 
-#company_name {
-    font-size: 150%;
-    font-weight: bold;
-}
-
 #company_name img {
     max-width: 150px;
     max-height: 150px;
diff --git a/public/css/register.css b/public/css/register.css
deleted file mode 100644
index bad07b60f..000000000
--- a/public/css/register.css
+++ /dev/null
@@ -1,117 +0,0 @@
-#register_wrapper {
-    float: left;
-    width: 70%;
-    font-size: 13px;
-}
-
-#mode_form,
-#add_item_form {
-    margin: 0;
-}
-
-#mode_form .panel-body,
-#add_item_form .panel-body {
-    padding: 0.7em;
-    margin: 0;
-}
-
-#mode_form ul,
-#add_item_form ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-#mode_form ul li,
-#add_item_form ul li {
-    margin-left: 1em;
-}
-
-.first_li {
-    margin-left: 0.2em !important;
-}
-
-#mode_form ul.dropdown-menu.inner,
-#add_item_form ul.dropdown-menu.inner {
-    margin-left: -1em !important;
-}
-
-#register {
-    padding: 0;
-    border-collapse: collapse;
-}
-
-#register th {
-    padding: 5px;
-    text-align: center;
-}
-
-#register td {
-    padding: 3px;
-    text-align: center;
-}
-
-#overall_sale {
-    width: 29%;
-    float: left;
-    margin-left: 0.1em;
-    padding-bottom: 1em;
-    padding-top: 1em;
-    font-size: 13px;
-    text-align: center;
-}
-
-#overall_sale .panel-body {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-
-#overall_sale .form-group {
-    margin: 0;
-}
-
-#overall_sale .btn {
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-}
-
-#payment_details,
-#buttons_sale,
-#suspended_sales_table {
-    width: 100%;
-}
-
-.sales_table_100 {
-    width: 100%;
-}
-
-#sale_totals,
-#payment_totals {
-    border-top: 1px solid #000;
-}
-
-input#amount_tendered:disabled {
-    display: none;
-}
-
-#payment_details {
-    float: left;
-    border-top: 1px solid #000;
-    margin-top: 0.2em;
-    padding: 0.5em;
-    text-align: left;
-    clear: both;
-}
-
-#buttons_sale {
-    padding-right: 0.5em;
-}
-
-.alert {
-    margin-bottom: 5px;
-}
-
-#add_payment_button,
-#buttons_sale .btn {
-    min-width: 120px;
-}
diff --git a/public/js/bs-modal_switch_content.js b/public/js/bs-modal_switch_content.js
new file mode 100644
index 000000000..7a5d7870b
--- /dev/null
+++ b/public/js/bs-modal_switch_content.js
@@ -0,0 +1,17 @@
+function modalSwitchProfile() {
+    document.getElementById("modal-profile").classList.remove("d-none");
+    document.getElementById("modal-password").classList.add("d-none");
+    document.getElementById("modal-button-profile").classList.add("active");
+    document.getElementById("modal-button-password").classList.remove("active");
+    document.getElementById("modal-button-save").classList.add("d-none");
+    document.getElementById("modal-button-logout").classList.remove("d-none");
+}
+
+function modalSwitchPassword() {
+    document.getElementById("modal-password").classList.remove("d-none");
+    document.getElementById("modal-profile").classList.add("d-none");
+    document.getElementById("modal-button-password").classList.add("active");
+    document.getElementById("modal-button-profile").classList.remove("active");
+    document.getElementById("modal-button-logout").classList.add("d-none");
+    document.getElementById("modal-button-save").classList.remove("d-none");
+}
diff --git a/public/js/bs-tab_anchor_linking.js b/public/js/bs-tab_anchor_linking.js
new file mode 100644
index 000000000..c1da83fc1
--- /dev/null
+++ b/public/js/bs-tab_anchor_linking.js
@@ -0,0 +1,37 @@
+(function () {
+    'use strict';
+
+    document.addEventListener('DOMContentLoaded', function () {
+
+        const triggers = Array.from(document.querySelectorAll('[data-bs-toggle="tab"][data-bs-target]'));
+        const dropdownBtn = document.getElementById('configs-dropdown');
+
+        // --- Sync active state and dropdown label on every tab change ---
+        document.addEventListener('shown.bs.tab', function (e) {
+            const target = e.target.getAttribute('data-bs-target');
+
+            triggers.forEach(function (el) {
+                el.classList.toggle('active', el.getAttribute('data-bs-target') === target);
+            });
+
+            if (dropdownBtn) {
+                dropdownBtn.textContent = e.target.textContent.trim();
+            }
+
+            history.replaceState(null, null, location.pathname + location.search + target);
+        });
+
+        // --- Deep linking: activate correct tab on page load from URL hash ---
+        if (location.hash) {
+            const trigger = triggers.find(function (el) {
+                return el.getAttribute('data-bs-target') === location.hash;
+            });
+
+            if (trigger) {
+                bootstrap.Tab.getOrCreateInstance(trigger).show();
+            }
+        }
+
+    });
+
+}());
diff --git a/public/js/bs-tooltips.js b/public/js/bs-tooltips.js
new file mode 100644
index 000000000..638371369
--- /dev/null
+++ b/public/js/bs-tooltips.js
@@ -0,0 +1,3 @@
+// Bootstrap 5 - Initialize all tooltips on a page - from https://getbootstrap.com/docs/5.3/components/tooltips/#enable-tooltips
+const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
diff --git a/public/js/bs-validation.js b/public/js/bs-validation.js
new file mode 100644
index 000000000..ed49fd180
--- /dev/null
+++ b/public/js/bs-validation.js
@@ -0,0 +1,20 @@
+// Bootstrap 5 - from https://getbootstrap.com/docs/5.3/forms/validation/#custom-styles
+// Example starter JavaScript for disabling form submissions if there are invalid fields
+(() => {
+    'use strict'
+
+    // Fetch all the forms we want to apply custom Bootstrap validation styles to
+    const forms = document.querySelectorAll('.needs-validation')
+
+    // Loop over them and prevent submission
+    Array.from(forms).forEach(form => {
+      form.addEventListener('submit', event => {
+        if (!form.checkValidity()) {
+          event.preventDefault()
+          event.stopPropagation()
+        }
+
+        form.classList.add('was-validated')
+      }, false)
+    })
+  })()
diff --git a/public/js/clipboard.min.js b/public/js/clipboard.min.js
deleted file mode 100644
index 1e6a96f4e..000000000
--- a/public/js/clipboard.min.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/*!
- * clipboard.js v2.0.6
- * https://clipboardjs.com/
- * 
- * Licensed MIT © Zeno Rocha
- */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ClipboardJS=e():t.ClipboardJS=e()}(this,function(){return o={},r.m=n=[function(t,e){t.exports=function(t){var e;if("SELECT"===t.nodeName)t.focus(),e=t.value;else if("INPUT"===t.nodeName||"TEXTAREA"===t.nodeName){var n=t.hasAttribute("readonly");n||t.setAttribute("readonly",""),t.select(),t.setSelectionRange(0,t.value.length),n||t.removeAttribute("readonly"),e=t.value}else{t.hasAttribute("contenteditable")&&t.focus();var o=window.getSelection(),r=document.createRange();r.selectNodeContents(t),o.removeAllRanges(),o.addRange(r),e=o.toString()}return e}},function(t,e){function n(){}n.prototype={on:function(t,e,n){var o=this.e||(this.e={});return(o[t]||(o[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){var o=this;function r(){o.off(t,r),e.apply(n,arguments)}return r._=e,this.on(t,r,n)},emit:function(t){for(var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),o=0,r=n.length;o<r;o++)n[o].fn.apply(n[o].ctx,e);return this},off:function(t,e){var n=this.e||(this.e={}),o=n[t],r=[];if(o&&e)for(var i=0,a=o.length;i<a;i++)o[i].fn!==e&&o[i].fn._!==e&&r.push(o[i]);return r.length?n[t]=r:delete n[t],this}},t.exports=n,t.exports.TinyEmitter=n},function(t,e,n){var d=n(3),h=n(4);t.exports=function(t,e,n){if(!t&&!e&&!n)throw new Error("Missing required arguments");if(!d.string(e))throw new TypeError("Second argument must be a String");if(!d.fn(n))throw new TypeError("Third argument must be a Function");if(d.node(t))return s=e,f=n,(u=t).addEventListener(s,f),{destroy:function(){u.removeEventListener(s,f)}};if(d.nodeList(t))return a=t,c=e,l=n,Array.prototype.forEach.call(a,function(t){t.addEventListener(c,l)}),{destroy:function(){Array.prototype.forEach.call(a,function(t){t.removeEventListener(c,l)})}};if(d.string(t))return o=t,r=e,i=n,h(document.body,o,r,i);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList");var o,r,i,a,c,l,u,s,f}},function(t,n){n.node=function(t){return void 0!==t&&t instanceof HTMLElement&&1===t.nodeType},n.nodeList=function(t){var e=Object.prototype.toString.call(t);return void 0!==t&&("[object NodeList]"===e||"[object HTMLCollection]"===e)&&"length"in t&&(0===t.length||n.node(t[0]))},n.string=function(t){return"string"==typeof t||t instanceof String},n.fn=function(t){return"[object Function]"===Object.prototype.toString.call(t)}},function(t,e,n){var a=n(5);function i(t,e,n,o,r){var i=function(e,n,t,o){return function(t){t.delegateTarget=a(t.target,n),t.delegateTarget&&o.call(e,t)}}.apply(this,arguments);return t.addEventListener(n,i,r),{destroy:function(){t.removeEventListener(n,i,r)}}}t.exports=function(t,e,n,o,r){return"function"==typeof t.addEventListener?i.apply(null,arguments):"function"==typeof n?i.bind(null,document).apply(null,arguments):("string"==typeof t&&(t=document.querySelectorAll(t)),Array.prototype.map.call(t,function(t){return i(t,e,n,o,r)}))}},function(t,e){if("undefined"!=typeof Element&&!Element.prototype.matches){var n=Element.prototype;n.matches=n.matchesSelector||n.mozMatchesSelector||n.msMatchesSelector||n.oMatchesSelector||n.webkitMatchesSelector}t.exports=function(t,e){for(;t&&9!==t.nodeType;){if("function"==typeof t.matches&&t.matches(e))return t;t=t.parentNode}}},function(t,e,n){"use strict";n.r(e);var o=n(0),r=n.n(o),i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};function a(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function c(t){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,c),this.resolveOptions(t),this.initSelection()}var l=(function(t,e,n){return e&&a(t.prototype,e),n&&a(t,n),t}(c,[{key:"resolveOptions",value:function(t){var e=0<arguments.length&&void 0!==t?t:{};this.action=e.action,this.container=e.container,this.emitter=e.emitter,this.target=e.target,this.text=e.text,this.trigger=e.trigger,this.selectedText=""}},{key:"initSelection",value:function(){this.text?this.selectFake():this.target&&this.selectTarget()}},{key:"selectFake",value:function(){var t=this,e="rtl"==document.documentElement.getAttribute("dir");this.removeFake(),this.fakeHandlerCallback=function(){return t.removeFake()},this.fakeHandler=this.container.addEventListener("click",this.fakeHandlerCallback)||!0,this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[e?"right":"left"]="-9999px";var n=window.pageYOffset||document.documentElement.scrollTop;this.fakeElem.style.top=n+"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,this.container.appendChild(this.fakeElem),this.selectedText=r()(this.fakeElem),this.copyText()}},{key:"removeFake",value:function(){this.fakeHandler&&(this.container.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(this.container.removeChild(this.fakeElem),this.fakeElem=null)}},{key:"selectTarget",value:function(){this.selectedText=r()(this.target),this.copyText()}},{key:"copyText",value:function(){var e=void 0;try{e=document.execCommand(this.action)}catch(t){e=!1}this.handleResult(e)}},{key:"handleResult",value:function(t){this.emitter.emit(t?"success":"error",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})}},{key:"clearSelection",value:function(){this.trigger&&this.trigger.focus(),document.activeElement.blur(),window.getSelection().removeAllRanges()}},{key:"destroy",value:function(){this.removeFake()}},{key:"action",set:function(t){var e=0<arguments.length&&void 0!==t?t:"copy";if(this._action=e,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function(){return this._action}},{key:"target",set:function(t){if(void 0!==t){if(!t||"object"!==(void 0===t?"undefined":i(t))||1!==t.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&t.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(t.hasAttribute("readonly")||t.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=t}},get:function(){return this._target}}]),c),u=n(1),s=n.n(u),f=n(2),d=n.n(f),h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},p=function(t,e,n){return e&&y(t.prototype,e),n&&y(t,n),t};function y(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}var m=(function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(v,s.a),p(v,[{key:"resolveOptions",value:function(t){var e=0<arguments.length&&void 0!==t?t:{};this.action="function"==typeof e.action?e.action:this.defaultAction,this.target="function"==typeof e.target?e.target:this.defaultTarget,this.text="function"==typeof e.text?e.text:this.defaultText,this.container="object"===h(e.container)?e.container:document.body}},{key:"listenClick",value:function(t){var e=this;this.listener=d()(t,"click",function(t){return e.onClick(t)})}},{key:"onClick",value:function(t){var e=t.delegateTarget||t.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new l({action:this.action(e),target:this.target(e),text:this.text(e),container:this.container,trigger:e,emitter:this})}},{key:"defaultAction",value:function(t){return b("action",t)}},{key:"defaultTarget",value:function(t){var e=b("target",t);if(e)return document.querySelector(e)}},{key:"defaultText",value:function(t){return b("text",t)}},{key:"destroy",value:function(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)}}],[{key:"isSupported",value:function(t){var e=0<arguments.length&&void 0!==t?t:["copy","cut"],n="string"==typeof e?[e]:e,o=!!document.queryCommandSupported;return n.forEach(function(t){o=o&&!!document.queryCommandSupported(t)}),o}}]),v);function v(t,e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,v);var n=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(v.__proto__||Object.getPrototypeOf(v)).call(this));return n.resolveOptions(e),n.listenClick(t),n}function b(t,e){var n="data-clipboard-"+t;if(e.hasAttribute(n))return e.getAttribute(n)}e.default=m}],r.c=o,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=6).default;function r(t){if(o[t])return o[t].exports;var e=o[t]={i:t,l:!1,exports:{}};return n[t].call(e.exports,e,e.exports,r),e.l=!0,e.exports}var n,o});
diff --git a/public/js/manage_tables.js b/public/js/manage_tables.js
index b5a5d0c7c..f5928dd98 100644
--- a/public/js/manage_tables.js
+++ b/public/js/manage_tables.js
@@ -3,7 +3,7 @@
     var btn_id, dialog_ref;
 
     var hide = function() {
-        dialog_ref && dialog_ref.close();
+        dialog_ref && dialog_ref.hide();
     };
 
     var clicked_id = function() {
@@ -11,13 +11,13 @@
     };
 
     var submit = function(button_id) {
-        return function(dlog_ref) {
-            const form = $('form', dlog_ref.$modalBody).first();
+        return function() {
+            const $modalBody = $(dialog_ref._element).find('.modal-body');
+            const form = $('form', $modalBody).first();
             const validator = form.data('validator');
             const submitted = validator && validator.formSubmitted;
 
             btn_id = button_id;
-            dialog_ref = dlog_ref;
 
             if (button_id == 'submit' && (!submitted && btn_id != "btnNew")) {
                 form.submit();
@@ -36,28 +36,14 @@
 
         var buttons = function(event) {
             var buttons = [];
-            var dialog_class = 'modal-dlg';
-            $.each($(this).attr('class').split(/\s+/), function(classIndex, className) {
-                var width_class = className.split("modal-dlg-");
-                if (width_class && width_class.length > 1) {
-                    dialog_class = className;
-                }
-            });
-
-            var has_new_btn = "btnNew" in $(this).data();
             $.each($(this).data(), function(name, value) {
                 var btn_class = name.split("btn");
                 if (btn_class && btn_class.length > 1) {
                     var btn_name = btn_class[1].toLowerCase();
-                    var is_submit = btn_name == 'submit';
-                    var is_new = btn_name === 'new';
-                    var is_enter = has_new_btn ? is_new: is_submit;
                     buttons.push({
                         id: btn_name,
                         label: value,
-                        cssClass: button_class[btn_name],
-                        hotkey: is_enter ? 13 : undefined, // Enter
-                        action: submit(btn_name)
+                        cssClass: button_class[btn_name] || 'btn-secondary'
                     });
                 }
             });
@@ -65,32 +51,85 @@
             !buttons.length && buttons.push({
                 id: 'close',
                 label: lang.line('common_close'),
-                cssClass: 'btn-primary',
-                action: function(dialog_ref) {
-                    dialog_ref.close();
-                }
+                cssClass: 'btn-secondary'
             });
-            return { buttons: buttons.sort(function(a, b) {
-                return ($(b).text()) < ($(a).text()) ? -1 : 1;
-            }), cssClass: dialog_class};
+            return buttons;
         };
 
         $(selector).each(function(index, $element) {
 
             return $(selector).off('click').on('click', function(event) {
                 var $link = $(event.target);
-                $link = !$link.is("a, button") ? $link.parents("a, button") : $link ;
-                BootstrapDialog.show($.extend({
-                    title: $link.attr('title'),
-                    message: (function() {
-                        var node = $('<div></div>');
-                        $.get($link.attr('href') || $link.data('href'), function(data) {
-                            node.html(data);
-                        });
-                        return node;
-                    })
-                }, buttons.call(this, event)));
+                $link = !$link.is("a, button") ? $link.parents("a, button") : $link;
 
+                // Build modal HTML
+                var modalId = 'dynamicModal';
+                var $existing = $('#' + modalId);
+                $existing.length && $existing.remove();
+
+                var btns = buttons.call(this, event);
+                var btnHtml = btns.map(function(b) {
+                    return '<button type="button" class="btn ' + b.cssClass + '" data-btn-id="' + b.id + '">' + b.label + '</button>';
+                }).join('');
+
+                // Determine modal size from class (e.g. modal-launch-lg → modal-lg)
+                var sizeClass = '';
+                $.each($link[0].classList || [], function(i, cls) {
+                    var m = cls.match(/^modal-launch-(.+)$/);
+                    if (m) sizeClass = 'modal-' + m[1];
+                });
+
+                var $modal = $([
+                    '<div class="modal fade" id="' + modalId + '" tabindex="-1">',
+                    '  <div class="modal-dialog' + sizeClass + '">',
+                    '    <div class="modal-content">',
+                    '      <div class="modal-header">',
+                    '        <h1 class="modal-title fs-5">' + ($link.attr('title') || '') + '</h1>',
+                    '        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>',
+                    '      </div>',
+                    '      <div class="modal-body"></div>',
+                    '      <div class="modal-footer">' + btnHtml + '</div>',
+                    '    </div>',
+                    '  </div>',
+                    '</div>'
+                ].join(''));
+
+                $('body').append($modal);
+
+                // Load remote content into body
+                $.get($link.attr('href') || $link.data('href'), function(data) {
+                    $modal.find('.modal-body').html(data);
+                    dialog_support.init("a.modal-launch");
+                });
+
+                var modal = new bootstrap.Modal($modal[0]);
+                dialog_ref = modal;
+
+                // Wire up footer buttons
+                $modal.on('click', '[data-btn-id]', function() {
+                    btn_id = $(this).data('btn-id');
+                    if (btn_id === 'close') {
+                        modal.hide();
+                    } else {
+                        submit(btn_id)();
+                    }
+                });
+
+                // Enter key support: find the "primary" button
+                $modal.on('keypress', function(e) {
+                    if (e.which === 13) {
+                        var has_new_btn = btns.some(function(b) { return b.id === 'new'; });
+                        var enter_btn = has_new_btn ? 'new' : 'submit';
+                        $modal.find('[data-btn-id="' + enter_btn + '"]').trigger('click');
+                    }
+                });
+
+                // Cleanup on close
+                $modal.on('hidden.bs.modal', function() {
+                    $modal.remove();
+                });
+
+                modal.show();
                 return false;
             });
         });
@@ -187,7 +226,7 @@
         return function(response) {
             typeof options.load_callback == 'function' && options.load_callback();
             options.load_callback = undefined;
-            dialog_support.init("a.modal-dlg");
+            dialog_support.init("a.modal-launch");
             typeof callback == 'function' && callback.call(this, response);
         }
     };
@@ -249,10 +288,13 @@
                 user_settings[options.resource] = user_settings[options.resource] || {};
                 user_settings[options.resource][field] = checked;
                 localStorage[options.employee_id] = JSON.stringify(user_settings);
-                dialog_support.init("a.modal-dlg");
+                dialog_support.init("a.modal-launch");
             },
+            loadingTemplate: function (loadingMessage) {
+                return '<div class="w-100 h-100 bg-body text-center pt-2"><div class="spinner-grow spinner-grow-sm"></div><span class="ps-1" role="status">' + loadingMessage + '</span></div>'
+            },
+            loadingFontSize: '1em',
             queryParamsType: 'limit',
-            iconSize: 'sm',
             silentSort: true,
             paginationVAlign: 'bottom',
             escape: true
@@ -261,7 +303,7 @@
         init_delete();
         init_restore();
         toggle_column_visibility();
-        dialog_support.init("button.modal-dlg");
+        dialog_support.init("button.modal-launch");
     };
 
     var init_delete = function (confirmMessage) {
@@ -296,7 +338,7 @@
                             var id = $(element).data('uniqueid');
                             table().updateByUniqueId({id: id, row: response[id] || response});
                         });
-                        dialog_support.init("a.modal-dlg");
+                        dialog_support.init("a.modal-launch");
                         highlight_row(ids);
                     }, 'json');
                 } else {
@@ -336,10 +378,14 @@
         errorLabelContainer: "#error_message_box",
         wrapper: "li",
         highlight: function (e) {
-            $(e).closest('.form-group').addClass('has-error');
+            $(e).closest('.input-group').addClass('has-error');
+            $("#error_message_box").removeClass('d-none');
         },
         unhighlight: function (e) {
-            $(e).closest('.form-group').removeClass('has-error');
+            $(e).closest('.input-group').removeClass('has-error');
+            if ($("#error_message_box li").length === 0) {
+                $("#error_message_box").addClass('d-none');
+            }
         }
     };