diff --git a/app/Views/attributes/form.php b/app/Views/attributes/form.php
index 43f68c730..1459cc028 100644
--- a/app/Views/attributes/form.php
+++ b/app/Views/attributes/form.php
@@ -17,7 +17,7 @@
     <fieldset id="attribute_basic_info">
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Attributes.definition_name'), 'definition_name', ['class' => 'required control-label col-xs-3']) ?>
+            <?= form_label(lang('Attributes.definition_name'), 'definition_name', ['class' => 'control-label col-xs-3 text-danger required']) ?>
             <div class="col-xs-8">
                 <?= form_input([
                     'name'  => 'definition_name',
@@ -29,7 +29,7 @@
         </div>
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Attributes.definition_type'), 'definition_type', ['class' => 'required control-label col-xs-3']) ?>
+            <?= form_label(lang('Attributes.definition_type'), 'definition_type', ['class' => 'control-label col-xs-3 text-danger required']) ?>
             <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>
diff --git a/app/Views/cashups/form.php b/app/Views/cashups/form.php
index cbfe8f757..b16fb01ea 100644
--- a/app/Views/cashups/form.php
+++ b/app/Views/cashups/form.php
@@ -19,7 +19,7 @@
         </div>
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Cashups.open_date'), 'open_date', ['class' => 'required control-label col-xs-3']) ?>
+            <?= form_label(lang('Cashups.open_date'), 'open_date', ['class' => 'control-label col-xs-3 text-danger required']) ?>
             <div class="col-xs-6">
                 <div class="input-group">
                     <span class="input-group-addon input-sm">
@@ -83,7 +83,7 @@
         </div>
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Cashups.close_date'), 'close_date', ['class' => 'required control-label col-xs-3']) ?>
+            <?= form_label(lang('Cashups.close_date'), 'close_date', ['class' => 'control-label col-xs-3 text-danger required']) ?>
             <div class="col-xs-6">
                 <div class="input-group">
                     <span class="input-group-addon input-sm">
diff --git a/app/Views/configs/barcode_config.php b/app/Views/configs/barcode_config.php
index 0a30f505a..a2577ce8e 100644
--- a/app/Views/configs/barcode_config.php
+++ b/app/Views/configs/barcode_config.php
@@ -14,8 +14,8 @@
             <ul id="barcode_error_message_box" class="error_message_box"></ul>
 
             <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_label(lang('Config.barcode_type'), 'barcode_type', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <?= form_dropdown(
                         'barcode_type',
                         $support_barcode,
@@ -26,8 +26,8 @@
             </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_label(lang('Config.barcode_width'), 'barcode_width', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <?= form_input([
                         'step'  => '5',
                         'max'   => '350',
@@ -42,8 +42,8 @@
             </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_label(lang('Config.barcode_height'), 'barcode_height', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <?= form_input([
                         'type'  => 'number',
                         'min'   => 10,
@@ -57,8 +57,8 @@
             </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_label(lang('Config.barcode_font'), 'barcode_font', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-4 col-sm-3 col-md-2">
                     <?= form_dropdown(
                         'barcode_font',
                         $barcode_fonts,
@@ -66,7 +66,7 @@
                         'class="form-control input-sm" required'
                     ) ?>
                 </div>
-                <div class="col-sm-2">
+                <div class="col-xs-4 col-sm-3 col-md-2">
                     <?= form_input([
                         'type'  => 'number',
                         'min'   => '1',
@@ -80,8 +80,8 @@
             </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_label(lang('Config.allow_duplicate_barcodes'), 'allow_duplicate_barcodes', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'allow_duplicate_barcodes',
                         'id'      => 'allow_duplicate_barcodes',
@@ -96,8 +96,8 @@
             </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">
+                <?= form_label(lang('Config.barcode_content'), 'barcode_content', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-10">
                     <label class="radio-inline">
                         <?= form_radio([
                             'name'    => 'barcode_content',
@@ -128,8 +128,8 @@
             </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">
+                <?= form_label(lang('Config.barcode_formats'), 'barcode_formats', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <?php
                     $barcode_formats = json_decode(config('OSPOS')->settings['barcode_formats']);
                     echo form_dropdown([
@@ -143,66 +143,68 @@
             </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>
+                <?= form_label(lang('Config.barcode_layout'), 'barcode_layout', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-3">
+                    <div class="input-group">
+                        <span class="input-group-addon input-sm"><?= lang('Config.barcode_first_row') ?></span>
+                        <?= 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>
+                </div>
+                <div class="col-xs-3">
+                    <div class="input-group">
+                        <span class="input-group-addon input-sm"><?= lang('Config.barcode_second_row') ?></span>
+                        <?= 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>
+                </div>
+                <div class="col-xs-3">
+                    <div class="input-group">
+                        <span class="input-group-addon input-sm"><?= lang('Config.barcode_third_row') ?></span>
+                        <?= 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 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_label(lang('Config.barcode_number_in_row'), 'barcode_num_in_row', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <?= form_input([
                         'type'  => 'number',
                         'name'  => 'barcode_num_in_row',
@@ -214,8 +216,8 @@
             </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">
+                <?= form_label(lang('Config.barcode_page_width'), 'barcode_page_width', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <div class="input-group">
                         <?= form_input([
                             'type'  => 'number',
@@ -232,8 +234,8 @@
             </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">
+                <?= form_label(lang('Config.barcode_page_cellspacing'), 'barcode_page_cellspacing', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <div class="input-group">
                         <?= form_input([
                             'type'  => 'number',
diff --git a/app/Views/configs/email_config.php b/app/Views/configs/email_config.php
index 46d0f26b1..52e838efd 100644
--- a/app/Views/configs/email_config.php
+++ b/app/Views/configs/email_config.php
@@ -13,8 +13,8 @@
             <ul id="email_error_message_box" class="error_message_box"></ul>
 
             <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_label(lang('Config.email_protocol'), 'protocol', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-4 col-md-3 col-lg-2">
                     <?= form_dropdown(
                         'protocol',
                         [
@@ -29,8 +29,8 @@
             </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_label(lang('Config.email_mailpath'), 'mailpath', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <?= form_input([
                         'name'  => 'mailpath',
                         'id'    => 'mailpath',
@@ -41,8 +41,8 @@
             </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_label(lang('Config.email_smtp_host'), 'smtp_host', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <?= form_input([
                         'name'  => 'smtp_host',
                         'id'    => 'smtp_host',
@@ -53,8 +53,8 @@
             </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_label(lang('Config.email_smtp_port'), 'smtp_port', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-4 col-md-3 col-lg-2">
                     <?= form_input([
                         'type'  => 'number',
                         'name'  => 'smtp_port',
@@ -66,8 +66,8 @@
             </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_label(lang('Config.email_smtp_crypto'), 'smtp_crypto', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-4 col-md-3 col-lg-2">
                     <?= form_dropdown(
                         'smtp_crypto',
                         [
@@ -82,8 +82,8 @@
             </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_label(lang('Config.email_smtp_timeout'), 'smtp_timeout', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-4 col-md-3 col-lg-2">
                     <?= form_input([
                         'type'  => 'number',
                         'name'  => 'smtp_timeout',
@@ -95,8 +95,8 @@
             </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">
+                <?= form_label(lang('Config.email_smtp_user'), 'smtp_user', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <div class="input-group">
                         <span class="input-group-addon input-sm">
                             <span class="glyphicon glyphicon-user"></span>
@@ -112,8 +112,8 @@
             </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">
+                <?= form_label(lang('Config.email_smtp_pass'), 'smtp_pass', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <div class="input-group">
                         <span class="input-group-addon input-sm">
                             <span class="glyphicon glyphicon-asterisk"></span>
diff --git a/app/Views/configs/general_config.php b/app/Views/configs/general_config.php
index df7ef179b..dd9c4e940 100644
--- a/app/Views/configs/general_config.php
+++ b/app/Views/configs/general_config.php
@@ -17,30 +17,28 @@
             <ul id="general_error_message_box" class="error_message_box"></ul>
 
             <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>
-                                <span class="glyphicon glyphicon-new-window"></span>
-                            </a>
-                        </div>
-                    </div>
+                <?= form_label(lang('Config.theme'), 'theme', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-5 col-sm-4 col-md-3 col-lg-2">
+                    <?= form_dropdown(
+                        'theme',
+                        $themes,
+                        $config['theme'],
+                        'class="form-control input-sm" id="theme-change"'
+                    ) ?>
+                </div>
+                <div class="col-xs-4 col-sm-6 col-md-7 col-lg-8">
+                    <p class="form-control-static">
+                        <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>
+                            <span class="glyphicon glyphicon-new-window"></span>
+                        </a>
+                    </p>
                 </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_label(lang('Config.login_form'), 'login_form', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-4 col-md-3 col-lg-2">
                     <?= form_dropdown(
                         'login_form',
                         [
@@ -54,8 +52,8 @@
             </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">
+                <?= form_label(lang('Config.default_sales_discount'), 'default_sales_discount', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-4 col-md-3 col-lg-2">
                     <div class="input-group">
                         <?= form_input([
                             'name'  => 'default_sales_discount',
@@ -72,10 +70,10 @@
                                 'name'         => 'default_sales_discount_type',
                                 'value'        => 1,
                                 'data-toggle'  => 'toggle',
-                                'data-size'    => 'normal',
+                                'data-size'    => 'small',
                                 'data-onstyle' => 'success',
-                                'data-on'      => '<b>' . $config['currency_symbol'] . '</b>',
-                                'data-off'     => '<b>%</b>',
+                                'data-on'      => '<strong>' . $config['currency_symbol'] . '</strong>',
+                                'data-off'     => '<strong>%</strong>',
                                 'checked'      => $config['default_sales_discount_type'] == 1
                             ]) ?>
                         </span>
@@ -84,8 +82,8 @@
             </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">
+                <?= form_label(lang('Config.default_receivings_discount'), 'default_receivings_discount', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-4 col-md-3 col-lg-2">
                     <div class="input-group">
                         <?= form_input([
                             'name'  => 'default_receivings_discount',
@@ -102,7 +100,7 @@
                                 'name'         => 'default_receivings_discount_type',
                                 'value'        => 1,
                                 'data-toggle'  => 'toggle',
-                                'data-size'    => 'normal',
+                                'data-size'    => 'small',
                                 'data-onstyle' => 'success',
                                 'data-on'      => '<b>' . $config['currency_symbol'] . '</b>',
                                 'data-off'     => '<b>%</b>',
@@ -114,8 +112,8 @@
             </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_label(lang('Config.enforce_privacy'), 'enforce_privacy', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'enforce_privacy',
                         'id'      => 'enforce_privacy',
@@ -130,8 +128,8 @@
             </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_label(lang('Config.receiving_calculate_average_price'), 'receiving_calculate_average_price', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'receiving_calculate_average_price',
                         'id'      => 'receiving_calculate_average_price',
@@ -142,8 +140,8 @@
             </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_label(lang('Config.lines_per_page'), 'lines_per_page', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-4 col-md-3 col-lg-2">
                     <?= form_input([
                         'name'  => 'lines_per_page',
                         'id'    => 'lines_per_page',
@@ -157,126 +155,119 @@
             </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>
+                <?= form_label(lang('Config.notify_alignment'), 'notify_horizontal_position', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-4 col-md-3 col-lg-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-xs-4 col-md-3 col-lg-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 class="form-group form-group-sm">
+                <?= form_label(lang('Config.image_restrictions'), 'image_restrictions', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-2">
+                    <div class="input-group">
+                        <span class="input-group-addon input-sm">
+                            <span class="glyphicon glyphicon-resize-horizontal"></span>
+                        </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-xs-2">
+                    <div class="input-group">
+                        <span class="input-group-addon input-sm">
+                            <span class="glyphicon glyphicon-resize-vertical"></span>
+                        </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-xs-2">
+                    <div class="input-group">
+                        <span class="input-group-addon input-sm">
+                            <span class="glyphicon glyphicon-hdd"></span>
+                        </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-xs-3 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 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">
-                                    <span class="glyphicon glyphicon-resize-horizontal"></span>
-                                </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">
-                                    <span class="glyphicon glyphicon-resize-vertical"></span>
-                                </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">
-                                    <span class="glyphicon glyphicon-hdd"></span>
-                                </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_label(lang('Config.gcaptcha_enable'), 'gcaptcha_enable', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'gcaptcha_enable',
                         'id'      => 'gcaptcha_enable',
                         'value'   => 'gcaptcha_enable',
                         'checked' => $config['gcaptcha_enable'] == 1
                     ]) ?>
+                    &nbsp;
                     <label class="control-label">
                         <a href="https://www.google.com/recaptcha/admin" target="_blank">
                             <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.gcaptcha_tooltip') ?>"></span>
@@ -286,8 +277,8 @@
             </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_label(lang('Config.gcaptcha_site_key'), 'config_gcaptcha_site_key', ['class' => 'control-label col-xs-3 col-sm-2 required', 'id' => 'config_gcaptcha_site_key']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <?= form_input([
                         'name'  => 'gcaptcha_site_key',
                         'id'    => 'gcaptcha_site_key',
@@ -298,8 +289,8 @@
             </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_label(lang('Config.gcaptcha_secret_key'), 'config_gcaptcha_secret_key', ['class' => 'control-label col-xs-3 col-sm-2 required', 'id' => 'config_gcaptcha_secret_key']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <?= form_input([
                         'name'  => 'gcaptcha_secret_key',
                         'id'    => 'gcaptcha_secret_key',
@@ -310,66 +301,62 @@
             </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>
+                <?= form_label(lang('Config.suggestions_layout'), 'suggestions_layout', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-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-xs-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-xs-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 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">
+                <?= form_label(lang('Config.giftcard_number'), 'giftcard_number', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <label class="radio-inline">
                         <?= form_radio([
                             'name'    => 'giftcard_number',
@@ -390,8 +377,8 @@
             </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_label(lang('Config.derive_sale_quantity'), 'derive_sale_quantity', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'derive_sale_quantity',
                         'id'      => 'derive_sale_quantity',
@@ -406,8 +393,8 @@
             </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_label(lang('Config.show_office_group'), 'show_office_group', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'show_office_group',
                         'id'      => 'show_office_group',
@@ -418,8 +405,8 @@
             </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_label(lang('Config.multi_pack_enabled'), 'multi_pack_enabled', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'multi_pack_enabled',
                         'id'      => 'multi_pack_enabled',
@@ -430,8 +417,8 @@
             </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_label(lang('Config.include_hsn'), 'include_hsn', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'include_hsn',
                         'id'      => 'include_hsn',
@@ -442,8 +429,8 @@
             </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_label(lang('Config.category_dropdown'), 'category_dropdown', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'category_dropdown',
                         'id'      => 'category_dropdown',
@@ -470,11 +457,11 @@
         const enable_disable_gcaptcha_enable = (function() {
             const gcaptcha_enable = $("#gcaptcha_enable").is(":checked");
             if (gcaptcha_enable) {
-                $("#gcaptcha_site_key, #gcaptcha_secret_key").prop("disabled", !gcaptcha_enable).addClass("required");
-                $("#config_gcaptcha_site_key, #config_gcaptcha_secret_key").addClass("required");
+                $("#gcaptcha_site_key, #gcaptcha_secret_key").prop("disabled", !gcaptcha_enable).addClass("text-danger required");
+                $("#config_gcaptcha_site_key, #config_gcaptcha_secret_key").addClass("text-danger required");
             } else {
-                $("#gcaptcha_site_key, #gcaptcha_secret_key").prop("disabled", gcaptcha_enable).removeClass("required");
-                $("#config_gcaptcha_site_key, #config_gcaptcha_secret_key").removeClass("required");
+                $("#gcaptcha_site_key, #gcaptcha_secret_key").prop("disabled", gcaptcha_enable).removeClass("text-danger required");
+                $("#config_gcaptcha_site_key, #config_gcaptcha_secret_key").removeClass("text-danger required");
             }
 
             return arguments.callee;
diff --git a/app/Views/configs/info_config.php b/app/Views/configs/info_config.php
index 1a7051844..9be7bd177 100644
--- a/app/Views/configs/info_config.php
+++ b/app/Views/configs/info_config.php
@@ -14,8 +14,8 @@
             <ul id="info_error_message_box" class="error_message_box"></ul>
 
             <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">
+                <?= form_label(lang('Config.company'), 'company', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <div class="input-group">
                         <span class="input-group-addon input-sm">
                             <span class="glyphicon glyphicon-home"></span>
@@ -31,8 +31,8 @@
             </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">
+                <?= form_label(lang('Config.company_logo'), 'company_logo', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <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;">
@@ -51,20 +51,21 @@
             </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_label(lang('Config.address'), 'address', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <?= form_textarea([
                         'name'  => 'address',
                         'id'    => 'address',
                         'class' => 'form-control input-sm required',
+                        'style'    => 'resize: vertical',
                         '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">
+                <?= form_label(lang('Config.website'), 'website', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <div class="input-group">
                         <span class="input-group-addon input-sm">
                             <span class="glyphicon glyphicon-globe"></span>
@@ -80,8 +81,8 @@
             </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">
+                <?= form_label(lang('Common.email'), 'email', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <div class="input-group">
                         <span class="input-group-addon input-sm">
                             <span class="glyphicon glyphicon-envelope"></span>
@@ -98,8 +99,8 @@
             </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">
+                <?= form_label(lang('Config.phone'), 'phone', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <div class="input-group">
                         <span class="input-group-addon input-sm">
                             <span class="glyphicon glyphicon-phone-alt"></span>
@@ -116,8 +117,8 @@
             </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">
+                <?= form_label(lang('Config.fax'), 'fax', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <div class="input-group">
                         <span class="input-group-addon input-sm">
                             <span class="glyphicon glyphicon-phone-alt"></span>
@@ -134,12 +135,13 @@
             </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_label(lang('Common.return_policy'), 'return_policy', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <?= form_textarea([
                         'name'  => 'return_policy',
                         'id'    => 'return_policy',
                         'class' => 'form-control input-sm required',
+                        'style'    => 'resize: vertical',
                         'value' => $config['return_policy']
                     ]) ?>
                 </div>
diff --git a/app/Views/configs/integrations_config.php b/app/Views/configs/integrations_config.php
index 7e8f24909..3e9463026 100644
--- a/app/Views/configs/integrations_config.php
+++ b/app/Views/configs/integrations_config.php
@@ -14,8 +14,8 @@
             <ul id="mailchimp_error_message_box" class="error_message_box"></ul>
 
             <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">
+                <?= form_label(lang('Config.mailchimp_api_key'), 'mailchimp_api_key', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-8 col-sm-6 col-md-5 col-lg-4">
                     <div class="input-group">
                         <span class="input-group-addon input-sm">
                             <span class="glyphicon glyphicon-cloud"></span>
@@ -29,18 +29,18 @@
                                autocomplete="off">
                     </div>
                 </div>
-                <div class="col-xs-1">
-                    <label class="control-label">
+                <div class="col-xs-1 col-sm-4 col-md-5 col-lg-6">
+                    <p class="form-control-static">
                         <a href="https://eepurl.com/b9a05b" target="_blank">
                             <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.mailchimp_tooltip') ?>"></span>
                         </a>
-                    </label>
+                    </p>
                 </div>
             </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">
+                <?= form_label(lang('Config.mailchimp_lists'), 'mailchimp_list_id', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <div class="input-group">
                         <span class="input-group-addon input-sm">
                             <span class="glyphicon glyphicon-user"></span>
diff --git a/app/Views/configs/invoice_config.php b/app/Views/configs/invoice_config.php
index 128855739..1f0822e3a 100644
--- a/app/Views/configs/invoice_config.php
+++ b/app/Views/configs/invoice_config.php
@@ -14,8 +14,8 @@
             <ul id="invoice_error_message_box" class="error_message_box"></ul>
 
             <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_label(lang('Config.invoice_enable'), 'invoice_enable', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'invoice_enable',
                         'value'   => 'invoice_enable',
@@ -26,8 +26,8 @@
             </div>
 
             <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_label(lang('Config.invoice_type'), 'invoice_type', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <?= form_dropdown(
                         'invoice_type',
                         $invoice_type_options,
@@ -38,8 +38,8 @@
             </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_label(lang('Config.recv_invoice_format'), 'recv_invoice_format', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <?= form_input([
                         'name'  => 'recv_invoice_format',
                         'id'    => 'recv_invoice_format',
@@ -50,32 +50,34 @@
             </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_label(lang('Config.invoice_default_comments'), 'invoice_default_comments', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <?= form_textarea([
                         'name'  => 'invoice_default_comments',
                         'id'    => 'invoice_default_comments',
                         'class' => 'form-control input-sm',
+                        'style' => 'resize: vertical',
                         '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_label(lang('Config.invoice_email_message'), 'invoice_email_message', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <?= form_textarea([
                         'name'  => 'invoice_email_message',
                         'id'    => 'invoice_email_message',
                         'class' => 'form-control input-sm',
+                        'style' => 'resize: vertical',
                         '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_label(lang('Config.line_sequence'), 'line_sequence', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <?= form_dropdown(
                         'line_sequence',
                         $line_sequence_options,
@@ -86,8 +88,8 @@
             </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_label(lang('Config.sales_invoice_format'), 'sales_invoice_format', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <?= form_input([
                         'name'  => 'sales_invoice_format',
                         'id'    => 'sales_invoice_format',
@@ -98,8 +100,8 @@
             </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_label(lang('Config.last_used_invoice_number'), 'last_used_invoice_number', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <?= form_input([
                         'type'  => 'number',
                         'name'  => 'last_used_invoice_number',
@@ -111,8 +113,8 @@
             </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_label(lang('Config.sales_quote_format'), 'sales_quote_format', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <?= form_input([
                         'name'  => 'sales_quote_format',
                         'id'    => 'sales_quote_format',
@@ -123,8 +125,8 @@
             </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_label(lang('Config.last_used_quote_number'), 'last_used_quote_number', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <?= form_input([
                         'type'  => 'number',
                         'name'  => 'last_used_quote_number',
@@ -136,20 +138,21 @@
             </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_label(lang('Config.quote_default_comments'), 'quote_default_comments', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <?= form_textarea([
                         'name'  => 'quote_default_comments',
                         'id'    => 'quote_default_comments',
                         'class' => 'form-control input-sm',
+                        'style' => 'resize: vertical',
                         '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_label(lang('Config.work_order_enable'), 'work_order_enable', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'work_order_enable',
                         'value'   => 'work_order_enable',
@@ -160,8 +163,8 @@
             </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_label(lang('Config.work_order_format'), 'work_order_format', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <?= form_input([
                         'name'  => 'work_order_format',
                         'id'    => 'work_order_format',
@@ -172,8 +175,8 @@
             </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_label(lang('Config.last_used_work_order_number'), 'last_used_work_order_number', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <?= form_input([
                         'type'  => 'number',
                         'name'  => 'last_used_work_order_number',
diff --git a/app/Views/configs/license_config.php b/app/Views/configs/license_config.php
index 0d5584b1e..6dbf70e1b 100644
--- a/app/Views/configs/license_config.php
+++ b/app/Views/configs/license_config.php
@@ -13,12 +13,13 @@
             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_label($license['title'], 'license', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                    <div class="col-xs-9 col-lg-8">
                         <?= form_textarea([
                             'name'     => 'license',
                             'id'       => 'license_' . $counter++,    // TODO: String Interpolation
                             'class'    => 'form-control font-monospace',
+                            'style'    => 'resize: vertical',
                             'rows'     => '14',
                             'readonly' => '',
                             'value'    => $license['text']
diff --git a/app/Views/configs/locale_config.php b/app/Views/configs/locale_config.php
index 52159f85d..3265d497c 100644
--- a/app/Views/configs/locale_config.php
+++ b/app/Views/configs/locale_config.php
@@ -15,8 +15,8 @@
             <ul id="locale_error_message_box" class="error_message_box"></ul>
 
             <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_label(lang('Config.number_locale'), 'number_locale', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-4 col-sm-3 col-md-2">
                     <?= form_input([
                         'name'  => 'number_locale',
                         'id'    => 'number_locale',
@@ -25,21 +25,21 @@
                     ]) ?>
                     <?= 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">
+                <div class="col-xs-5 col-sm-7 col-md-8">
+                    <p class="form-control-static">
+                        <a href="https://github.com/opensourcepos/opensourcepos/wiki/Localisation-support" target="_blank" style="text-decoration: none;">
                             <span class="glyphicon glyphicon-info-sign" 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 id="number_locale_example" style="padding-left: 1em;">
+                            <?= to_currency(1234567890.12300) ?>
                         </span>
-                    </label>
+                    </p>
                 </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_label(lang('Config.thousands_separator'), 'thousands_separator', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'thousands_separator',
                         'id'      => 'thousands_separator',
@@ -50,8 +50,8 @@
             </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_label(lang('Config.currency_symbol'), 'currency_symbol', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <?= form_input([
                         'name'  => 'currency_symbol',
                         'id'    => 'currency_symbol',
@@ -62,8 +62,8 @@
             </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_label(lang('Config.currency_code'), 'currency_code', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <?= form_input([
                         'name'  => 'currency_code',
                         'id'    => 'currency_code',
@@ -74,8 +74,8 @@
             </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_label(lang('Config.currency_decimals'), 'currency_decimals', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <?= form_dropdown(
                         'currency_decimals',
                         [
@@ -90,8 +90,8 @@
             </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_label(lang('Config.tax_decimals'), 'tax_decimals', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <?= form_dropdown(
                         'tax_decimals',
                         [
@@ -108,8 +108,8 @@
             </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_label(lang('Config.quantity_decimals'), 'quantity_decimals', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <?= form_dropdown(
                         'quantity_decimals',
                         [
@@ -125,8 +125,8 @@
             </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_label(lang('Config.cash_decimals'), 'cash_decimals', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-8 col-sm-3 col-md-2">
                     <?= form_dropdown(
                         'cash_decimals',
                         [
@@ -139,16 +139,16 @@
                         ['class' => 'form-control input-sm']
                     ) ?>
                 </div>
-                <div class="col-xs-1">
-                    <label class="control-label">
+                <div class="col-xs-1 col-sm-7 col-md-8">
+                    <p class="form-control-static">
                         <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.cash_decimals_tooltip') ?>"></span>
-                    </label>
+                    </p>
                 </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_label(lang('Config.cash_rounding'), 'cash_rounding_code', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <?= form_dropdown(
                         'cash_rounding_code',
                         $rounding_options,
@@ -159,8 +159,8 @@
             </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_label(lang('Config.payment_options_order'), 'payment_options_order', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <?= form_dropdown(
                         'payment_options_order',
                         [
@@ -177,8 +177,8 @@
             </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">
+                <?= form_label(lang('Config.payment_reference_code_length_limits'), 'payment_reference_code_length', ['class' => 'control-label col-xs-3 col-sm-2', 'style' => 'padding-top:0; line-height:1.4; margin-top:-8px']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <div id="payment_reference_code_slider"></div>
                     <div class="row" style="margin-top:6px">
                         <div class="col-xs-6">
@@ -196,26 +196,26 @@
             </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_label(lang('Config.country_codes'), 'country_codes', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-8 col-sm-3 col-md-2">
                     <?= form_input([
                         'name'  => 'country_codes',
                         'class' => 'form-control input-sm',
                         'value' => $config['country_codes']
                     ]) ?>
                 </div>
-                <div class="col-xs-1">
-                    <label class="control-label">
+                <div class="col-xs-1 col-sm-7 col-md-8">
+                    <p class="form-control-static">
                         <a href="https://wiki.openstreetmap.org/wiki/Nominatim/Country_Codes" target="_blank">
                             <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="right" title="<?= lang('Config.country_codes_tooltip'); ?>"></span>
                         </a>
-                    </label>
+                    </p>
                 </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_label(lang('Config.language'), 'language', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <?= form_dropdown(
                         'language',
                         get_languages(),
@@ -226,8 +226,8 @@
             </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_label(lang('Config.timezone'), 'timezone', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <?= form_dropdown(
                         'timezone',
                         get_timezones(),
@@ -238,8 +238,8 @@
             </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_label(lang('Config.datetimeformat'), 'datetimeformat', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-4 col-sm-3 col-md-2">
                     <?= form_dropdown(
                         'dateformat',
                         get_dateformats(),
@@ -247,7 +247,7 @@
                         ['class' => 'form-control input-sm']
                     ) ?>
                 </div>
-                <div class="col-sm-2">
+                <div class="col-xs-4 col-sm-3 col-md-2">
                     <?= form_dropdown(
                         'timeformat',
                         get_timeformats(),
@@ -258,8 +258,8 @@
             </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_label(lang('Config.date_or_time_format'), 'date_or_time_format', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'date_or_time_format',
                         'id'      => 'date_or_time_format',
@@ -270,8 +270,8 @@
             </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_label(lang('Config.financial_year'), 'financial_year', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <?= form_dropdown(
                         'financial_year',
                         [
diff --git a/app/Views/configs/message_config.php b/app/Views/configs/message_config.php
index 190628789..7dec07388 100644
--- a/app/Views/configs/message_config.php
+++ b/app/Views/configs/message_config.php
@@ -13,8 +13,8 @@
             <ul id="message_error_message_box" class="error_message_box"></ul>
 
             <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">
+                <?= form_label(lang('Config.msg_uid'), 'msg_uid', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <div class="input-group">
                         <span class="input-group-addon input-sm">
                             <span class="glyphicon glyphicon-user"></span>
@@ -30,8 +30,8 @@
             </div>
 
             <div class="form-group form-group-sm">
-                <?= form_label(lang('Config.msg_pwd'), 'msg_pwd', ['class' => 'control-label col-xs-2']) ?>
-                <div class="col-xs-4">
+                <?= form_label(lang('Config.msg_pwd'), 'msg_pwd', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <div class="input-group">
                         <span class="input-group-addon input-sm">
                             <span class="glyphicon glyphicon-lock"></span>
@@ -47,8 +47,8 @@
             </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">
+                <?= form_label(lang('Config.msg_src'), 'msg_src', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <div class="input-group">
                         <span class="input-group-addon input-sm">
                             <span class="glyphicon glyphicon-bullhorn"></span>
@@ -64,13 +64,14 @@
             </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_label(lang('Config.msg_msg'), 'msg_msg', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-6 col-md-5 col-lg-4">
                     <?= form_textarea([
                         'name'        => 'msg_msg',
                         'id'          => 'msg_msg',
                         'class'       => 'form-control input-sm',
                         'value'       => $config['msg_msg'],
+                        'style'       => 'resize: vertical',
                         'placeholder' => lang('Config.msg_msg_placeholder')
                     ]) ?>
                 </div>
diff --git a/app/Views/configs/receipt_config.php b/app/Views/configs/receipt_config.php
index 2b916b767..46b1c8a0e 100644
--- a/app/Views/configs/receipt_config.php
+++ b/app/Views/configs/receipt_config.php
@@ -12,8 +12,8 @@
             <ul id="receipt_error_message_box" class="error_message_box"></ul>
 
             <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_label(lang('Config.receipt_template'), 'receipt_template', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <?= form_dropdown(
                         'receipt_template',
                         [
@@ -27,8 +27,8 @@
             </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">
+                <?= form_label(lang('Config.receipt_font_size'), 'receipt_font_size', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <div class="input-group">
                         <?= form_input([
                             'type'  => 'number',
@@ -45,8 +45,8 @@
             </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">
+                <?= form_label(lang('Config.print_delay_autoreturn'), 'print_delay_autoreturn', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <div class="input-group">
                         <?= form_input([
                             'type'  => 'number',
@@ -63,8 +63,8 @@
             </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">
+                <?= form_label(lang('Config.email_receipt_check_behaviour'), 'email_receipt_check_behaviour', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <label class="radio-inline">
                         <?= form_radio([
                             'name'    => 'email_receipt_check_behaviour',
@@ -93,8 +93,8 @@
             </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">
+                <?= form_label(lang('Config.print_receipt_check_behaviour'), 'print_receipt_check_behaviour', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <label class="radio-inline">
                         <?= form_radio([
                             'name'    => 'print_receipt_check_behaviour',
@@ -123,8 +123,8 @@
             </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_label(lang('Config.receipt_show_company_name'), 'receipt_show_company_name', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'receipt_show_company_name',
                         'value'   => 'receipt_show_company_name',
@@ -135,8 +135,8 @@
             </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_label(lang('Config.receipt_show_taxes'), 'receipt_show_taxes', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'receipt_show_taxes',
                         'value'   => 'receipt_show_taxes',
@@ -147,8 +147,8 @@
             </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_label(lang('Config.receipt_show_tax_ind'), 'receipt_show_tax_ind', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'receipt_show_tax_ind',
                         'value'   => 'receipt_show_tax_ind',
@@ -159,8 +159,8 @@
             </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_label(lang('Config.receipt_show_total_discount'), 'receipt_show_total_discount', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'receipt_show_total_discount',
                         'value'   => 'receipt_show_total_discount',
@@ -171,8 +171,8 @@
             </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_label(lang('Config.receipt_show_description'), 'receipt_show_description', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'receipt_show_description',
                         'value'   => 'receipt_show_description',
@@ -183,8 +183,8 @@
             </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_label(lang('Config.receipt_show_serialnumber'), 'receipt_show_serialnumber', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'receipt_show_serialnumber',
                         'value'   => 'receipt_show_serialnumber',
@@ -195,8 +195,8 @@
             </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_label(lang('Config.print_silently'), 'print_silently', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'print_silently',
                         'id'      => 'print_silently',
@@ -207,8 +207,8 @@
             </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_label(lang('Config.print_header'), 'print_header', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'print_header',
                         'id'      => 'print_header',
@@ -219,8 +219,8 @@
             </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_label(lang('Config.print_footer'), 'print_footer', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'print_footer',
                         'id'      => 'print_footer',
@@ -231,29 +231,29 @@
             </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_label(lang('Config.receipt_printer'), 'config_receipt_printer', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-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_label(lang('Config.invoice_printer'), 'config_invoice_printer', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-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_label(lang('Config.takings_printer'), 'config_takings_printer', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-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">
+                <?= form_label(lang('Config.print_top_margin'), 'print_top_margin', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <div class="input-group">
                         <?= form_input([
                             'type'  => 'number',
@@ -270,8 +270,8 @@
             </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">
+                <?= form_label(lang('Config.print_left_margin'), 'print_left_margin', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <div class="input-group">
                         <?= form_input([
                             'type'  => 'number',
@@ -288,8 +288,8 @@
             </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">
+                <?= form_label(lang('Config.print_bottom_margin'), 'print_bottom_margin', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <div class="input-group">
                         <?= form_input([
                             'type'  => 'number',
@@ -306,8 +306,8 @@
             </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">
+                <?= form_label(lang('Config.print_right_margin'), 'print_right_margin', ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+                <div class="col-xs-9 col-sm-3 col-md-2">
                     <div class="input-group">
                         <?= form_input([
                             'type'  => 'number',
diff --git a/app/Views/configs/reward_config.php b/app/Views/configs/reward_config.php
index db533e830..de8f6c8fd 100644
--- a/app/Views/configs/reward_config.php
+++ b/app/Views/configs/reward_config.php
@@ -13,8 +13,8 @@
             <ul id="reward_error_message_box" class="error_message_box"></ul>
 
             <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_label(lang('Config.customer_reward_enable'), 'customer_reward_enable', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'customer_reward_enable',
                         'value'   => 'customer_reward_enable',
@@ -76,9 +76,9 @@
             const new_block = block.insertAfter($(this).parent());
             const new_block_id = 'customer_reward_' + ++id;
             const 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-3 col-sm-2 text-danger required');
+            $(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 required').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 required').val('');
             hide_show_remove();
         };
 
diff --git a/app/Views/configs/shortcuts_config.php b/app/Views/configs/shortcuts_config.php
index 8ccb356f6..2f0d65547 100644
--- a/app/Views/configs/shortcuts_config.php
+++ b/app/Views/configs/shortcuts_config.php
@@ -25,38 +25,33 @@ $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>
+        <fieldset id="config_info">
 
-                    <?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; ?>
+            <div id="required_fields_message"><?= esc(lang('Common.fields_required_message')) ?></div>
+            <ul id="shortcuts_error_message_box" class="error_message_box"></ul>
 
-                    <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'
-                        ]) ?>
+            <?php foreach ($shortcutLabels as $name => $label): ?>
+                <div class="form-group form-group-sm">
+                    <?= form_label($label, 'key_' . $name, ['class' => 'control-label col-xs-6 col-sm-5 col-md-4 col-lg-3']) ?>
+                    <div class="col-xs-6 col-sm-3 col-md-2">
+                        <?php $keyboardShortcutSelectedValue = $keyboardShortcuts[$name]['value'] ?? ''; ?>
+                        <?= form_dropdown(
+                            'key_' . $name,
+                            $keyboardShortcutOptions,
+                            $keyboardShortcutSelectedValue,
+                            'class="form-control input-sm"'
+                        ) ?>
                     </div>
                 </div>
-            </fieldset>
-        </div>
+            <?php endforeach; ?>
+
+            <?= form_submit([
+                'name'  => 'submit_shortcuts',
+                'id'    => 'submit_shortcuts',
+                'value' => lang('Common.submit'),
+                'class' => 'btn btn-primary btn-sm pull-right'
+            ]) ?>
+        </fieldset>
     </div>
 <?= form_close() ?>
 
diff --git a/app/Views/configs/stock_config.php b/app/Views/configs/stock_config.php
index af0e15a7a..75aafe77a 100644
--- a/app/Views/configs/stock_config.php
+++ b/app/Views/configs/stock_config.php
@@ -43,8 +43,8 @@
             const block = $(this).parent().clone(true);
             const new_block = block.insertAfter($(this).parent());
             const 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-3 col-sm-2 text-danger required');
+            $(new_block).find('input').attr('id', new_block_id).removeAttr('disabled').attr('name', new_block_id).attr('class', 'form-control input-sm required').val('');
             hide_show_remove();
         };
 
diff --git a/app/Views/configs/system_config.php b/app/Views/configs/system_config.php
index db97abc1c..a8935c84b 100644
--- a/app/Views/configs/system_config.php
+++ b/app/Views/configs/system_config.php
@@ -1,7 +1,6 @@
-<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>
+<div class="container-fluid" style="padding-inline: 0;">
+    <ul class="nav nav-tabs" id="myTabs">
+        <li class="active"><a href="#system_tabs" data-toggle="tab" title="<?= lang('Config.system_info') ?>"><?= lang('Config.system_info') ?></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>
diff --git a/app/Views/configs/system_info.php b/app/Views/configs/system_info.php
index 10df45685..285a2f72e 100644
--- a/app/Views/configs/system_info.php
+++ b/app/Views/configs/system_info.php
@@ -8,45 +8,37 @@ use Config\OSPOS;
 
 ?>
 
-<style>
-    a:hover {
-        cursor: pointer;
-    }
-
-    hidden {
-        visibility: hidden;
-    }
-</style>
-
 <script type="text/javascript" src="js/clipboard.min.js"></script>
 
-<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>
-            </div>
-            <div class="col-sm-8" id="issuetemplate" style="text-align: left;"><br>
+<form id="config_wrapper" class="form-horizontal">
+    <p><?= lang('Config.server_notice') ?></p>
+
+    <div id="issuetemplate">
+        <div class="form-group form-group-sm">
+            <label class="control-label col-xs-3 col-sm-2">General Info</label>
+            <div class="text-left col-xs-9 col-sm-10">
                 <?= 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>
+                <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>';
+                    echo "&#187; GD: ", extension_loaded('gd') ? '<span class="text-success">&#x2713 Enabled</span>' : '<span class="text-danger">&#x2717 Disabled</span>', '<br>';
+                    echo "&#187; BC Math: ", extension_loaded('bcmath') ? '<span class="text-success">&#x2713 Enabled</span>' : '<span class="text-danger">&#x2717 Disabled</span>', '<br>';
+                    echo "&#187; intl: ", extension_loaded('intl') ? '<span class="text-success">&#x2713 Enabled</span>' : '<span class="text-danger">&#x2717 Disabled</span>', '<br>';
+                    echo "&#187; OpenSSL: ", extension_loaded('openssl') ? '<span class="text-success">&#x2713 Enabled</span>' : '<span class="text-danger">&#x2717 Disabled</span>', '<br>';
+                    echo "&#187; Multibyte String: ", extension_loaded('mbstring') ? '<span class="text-success">&#x2713 Enabled</span>' : '<span class="text-danger">&#x2717 Disabled</span>', '<br>';
+                    echo "&#187; cURL: ", extension_loaded('curl') ? '<span class="text-success">&#x2713 Enabled</span>' : '<span class="text-danger">&#x2717 Disabled</span>', '<br>';
+                    echo "&#187; JSON: ", extension_loaded('json') ? '<span class="text-success">&#x2713 Enabled</span>' : '<span class="text-danger">&#x2717 Disabled</span>', '<br>';
+                    echo "&#187; XML: ", extension_loaded('xml') ? '<span class="text-success">&#x2713 Enabled</span>' : '<span class="text-danger">&#x2717 Disabled</span>', '<br><br>';
                 ?>
-                User Configuration:<br>
-                .Browser:
+            </div>
+        </div>
+
+        <div class="form-group form-group-sm">
+            <label class="control-label col-xs-3 col-sm-2">User Setup</label>
+            <div class="text-left col-xs-9 col-sm-10">
+                Browser:
                 <?php
                 /**
                  * @param string $userAgent
@@ -83,81 +75,84 @@ use Config\OSPOS;
                 DB Version: <?= esc($dbVersion) ?><br>
                 Server Port: <?= esc($_SERVER['SERVER_PORT']) ?><br>
                 OS: <?= php_uname('s') . ' ' . php_uname('r') ?><br><br>
-                <br><br>
+            </div>
+        </div>
 
-                File Permissions:<br>
-                &#187; [writable/logs:]
+        <div class="form-group form-group-sm">
+            <label class="control-label col-xs-3 col-sm-2">Permissions</label>
+            <div class="text-left col-xs-9 col-sm-10">
+                &#187; <code>[writable/logs]</code>
                 <?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>';
+                    echo substr(sprintf("%o", fileperms($logs)), -4) . ' · ' . '<span class="text-success">&#x2713 Writable</span>';
                 } else {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($logs)), -4) . ' |  ' . '<span style="color: red;">    Not Writable &#x2717 </span>';
+                    echo substr(sprintf("%o", fileperms($logs)), -4) . ' · ' . '<span class="text-danger">&#x2717 Not Writable</span>';
                 }
 
                 clearstatcache();
                 if (is_writable($logs) && substr(decoct(fileperms($logs)), -4) != 750) {
-                    echo ' | <span style="color: red;">Vulnerable or Incorrect Permissions &#x2717</span>';
+                    echo ' · <span class="text-danger">&#x2717 Vulnerable or Incorrect Permissions</span>';
                 } else {
-                    echo ' | <span style="color: green;">Security Check Passed &#x2713</span>';
+                    echo ' · <span class="text-success">&#x2713 Security Check Passed</span>';
                 }
                 clearstatcache();
                 ?>
                 <br>
-                &#187; [public/uploads:]
+                &#187; <code>[public/uploads]</code>
                 <?php
                 if (is_writable($uploads)) {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($uploads)), -4) . ' |  ' . '<span style="color: green;">     Writable &#x2713 </span>';
+                    echo substr(sprintf("%o", fileperms($uploads)), -4) . ' · ' . '<span class="text-success">&#x2713 Writable</span>';
                 } else {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($uploads)), -4) . ' |  ' . '<span style="color: red;"> Not Writable &#x2717 </span>';
+                    echo substr(sprintf("%o", fileperms($uploads)), -4) . ' · ' . '<span class="text-danger">&#x2717 Not Writable</span>';
                 }
 
                 clearstatcache();
 
                 if (is_writable($uploads) && substr(decoct(fileperms($uploads)), -4) != 750) {
-                    echo ' | <span style="color: red;">Vulnerable or Incorrect Permissions &#x2717</span>';
+                    echo ' · <span class="text-danger">&#x2717 Vulnerable or Incorrect Permissions</span>';
                 } else {
-                    echo ' |  <span style="color: green;">Security Check Passed &#x2713 </span>';
+                    echo ' · <span class="text-success">&#x2713 Security Check Passed</span>';
                 }
 
                 clearstatcache();
                 ?>
                 <br>
-                &#187; [public/uploads/item_pics:]
+                &#187; <code>[public/uploads/item_pics]</code>
                 <?php
                 if (is_writable($images)) {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($images)), -4) . ' |     ' . '<span style="color: green;"> Writable &#x2713 </span>';
+                    echo substr(sprintf("%o", fileperms($images)), -4) . ' · ' . '<span class="text-success">&#x2713 Writable</span>';
                 } else {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($images)), -4) . ' |     ' . '<span style="color: red;"> Not Writable &#x2717 </span>';
+                    echo substr(sprintf("%o", fileperms($images)), -4) . ' · ' . '<span class="text-danger">&#x2717 Not Writable</span>';
                 }
 
                 clearstatcache();
 
                 if (substr(decoct(fileperms($images)), -4) != 750) {
-                    echo ' | <span style="color: red;">Vulnerable or Incorrect Permissions &#x2717</span>';
+                    echo ' · <span class="text-danger">&#x2717 Vulnerable or Incorrect Permissions</span>';
                 } else {
-                    echo ' | <span style="color: green;">Security Check Passed &#x2713 </span>';
+                    echo ' · <span class="text-success">&#x2713 Security Check Passed</span>';
                 }
 
                 clearstatcache();
                 ?>
                 <br>
-                &#187; [importCustomers.csv:]
+                &#187; <code>[importCustomers.csv]</code>
                 <?php
                 if (is_readable($importCustomers)) {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($importCustomers)), -4) . ' |  ' . '<span style="color: green;">     Readable &#x2713 </span>';
+                    echo substr(sprintf("%o", fileperms($importCustomers)), -4) . ' · ' . '<span class="text-success">&#x2713 Readable</span>';
                 } else {
-                    echo ' -  ' . substr(sprintf("%o", fileperms($importCustomers)), -4) . ' |  ' . '<span style="color: red;"> Not Readable &#x2717 </span>';
+                    echo substr(sprintf("%o", fileperms($importCustomers)), -4) . ' · ' . '<span class="text-danger">&#x2717 Not Readable</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>';
+                    echo ' · <span class="text-danger">&#x2717 Vulnerable or Incorrect Permissions</span>';
                 } else {
-                    echo ' | <span style="color: green;">Security Check Passed &#x2713 </span>';
+                    echo ' · <span class="text-success">&#x2713 Security Check Passed</span>';
                 }
                 clearstatcache();
                 ?>
@@ -168,49 +163,51 @@ use Config\OSPOS;
                     && (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>';
+                    echo '<br><span class="text-danger"><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>';
+                    echo '<br><span class="text-success"><strong>' . lang('Config.no_risk') . '</strong></span><br>';
                 }
 
                 if (substr(decoct(fileperms($logs)), -4) != 750) {
-                    echo '<br><span style="color: red;"> &#187; [writable/logs:] ' . lang('Config.is_writable') . '</span>';
+                    echo '<br><span class="text-danger">&#187; <code>[writable/logs]</code> ' . 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>';
+                    echo '<br><span class="text-danger">&#187; <code>[public/uploads]</code> ' . 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>';
+                    echo '<br><span class="text-danger">&#187; <code>[public/uploads/item_pics]</code> ' . 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>';
+                    echo '<br><span class="text-danger">&#187; <code>[importCustomers.csv]</code> ' . lang('Config.is_readable') . '</span>';
                 }
                 ?>
             </div>
         </div>
     </div>
-</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">
-        const clipboard = new ClipboardJS('.copy');
-
-        clipboard.on('success', function(e) {
-            document.getSelection().removeAllRanges();
-        });
-
-        $(function() {
-            $('#timezone').clone().appendTo('#timezoneE');
-        });
-
-        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>
+
+</form>
+
+<div class="row">
+    <div class="col-xs-12 text-center">
+        <br>
+        <a class="copy" role="button" data-clipboard-action="copy" data-clipboard-target="#issuetemplate">Copy Info</a> | <a href="https://github.com/opensourcepos/opensourcepos/issues/new?template=bug+report.yml" target="_blank"> <?= lang('Config.report_an_issue') ?></a>
+        <script type="text/javascript">
+            const clipboard = new ClipboardJS('.copy');
+
+            clipboard.on('success', function(e) {
+                document.getSelection().removeAllRanges();
+            });
+
+            const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            const osTimezone = '<?= esc(!empty($config['timezone']) ? $config['timezone'] : date_default_timezone_get()) ?>';
+
+            if (userTimezone !== osTimezone) {
+                document.getElementById("timeerror").innerHTML = '<div><span class="text-danger"><?= lang('Config.timezone_error') ?></span><br><?= lang('Config.user_timezone') ?> <strong>' + userTimezone + '</strong><br><?= lang('Config.os_timezone') ?> <strong>' + osTimezone + '</strong></div><br>';
+            }
+        </script>
+    </div>
 </div>
diff --git a/app/Views/configs/table_config.php b/app/Views/configs/table_config.php
index ce71ca268..4b1705c6f 100644
--- a/app/Views/configs/table_config.php
+++ b/app/Views/configs/table_config.php
@@ -13,8 +13,8 @@
             <ul id="table_error_message_box" class="error_message_box"></ul>
 
             <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_label(lang('Config.dinner_table_enable'), 'dinner_table_enable', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'dinner_table_enable',
                         'value'   => 'dinner_table_enable',
@@ -72,8 +72,8 @@
             const block = $(this).parent().clone(true);
             const new_block = block.insertAfter($(this).parent());
             const 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-3 col-sm-2 text-danger required');
+            $(new_block).find('input').attr('id', new_block_id).removeAttr('disabled').attr('name', new_block_id).attr('class', 'form-control input-sm required').val('');
             hide_show_remove();
         };
 
diff --git a/app/Views/configs/tax_config.php b/app/Views/configs/tax_config.php
index 822126ea1..dd192293e 100644
--- a/app/Views/configs/tax_config.php
+++ b/app/Views/configs/tax_config.php
@@ -16,8 +16,8 @@
             <ul id="tax_error_message_box" class="error_message_box"></ul>
 
             <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_label(lang('Config.tax_id'), 'tax_id', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-4 col-md-3 col-lg-2">
                     <?= form_input([
                         'name'  => 'tax_id',
                         'id'    => 'tax_id',
@@ -28,8 +28,8 @@
             </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_label(lang('Config.tax_included'), 'tax_included', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'tax_included',
                         'id'      => 'tax_included',
@@ -40,8 +40,8 @@
             </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_label(lang('Config.default_tax_rate_1'), 'default_tax_1_rate', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                     <?= form_input([
                         'name'  => 'default_tax_1_name',
                         'id'    => 'default_tax_1_name',
@@ -49,20 +49,22 @@
                         '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 class="col-xs-3 col-sm-2">
+                    <div class="input-group input-group-sm">
+                        <?= 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>
 
             <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_label(lang('Config.default_tax_rate_2'), 'default_tax_2_rate', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                     <?= form_input([
                         'name'  => 'default_tax_2_name',
                         'id'    => 'default_tax_2_name',
@@ -70,20 +72,22 @@
                         '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 class="col-xs-3 col-sm-2">
+                    <div class="input-group input-group-sm">
+                        <?= 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>
 
             <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_label(lang('Config.use_destination_based_tax'), 'use_destination_based_tax', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9">
                     <?= form_checkbox([
                         'name'    => 'use_destination_based_tax',
                         'id'      => 'use_destination_based_tax',
@@ -94,8 +98,8 @@
             </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_label(lang('Config.default_tax_code'), 'default_tax_code', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-4 col-md-3 col-lg-2">
                     <?= form_dropdown(
                         'default_tax_code',
                         $tax_code_options,
@@ -106,8 +110,8 @@
             </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_label(lang('Config.default_tax_category'), 'default_tax_category', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-4 col-md-3 col-lg-2">
                     <?= form_dropdown(
                         'default_tax_category',
                         $tax_category_options,
@@ -118,8 +122,8 @@
             </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_label(lang('Config.default_tax_jurisdiction'), 'default_tax_jurisdiction', ['class' => 'control-label col-xs-3 col-sm-2']) ?>
+                <div class="col-xs-9 col-sm-4 col-md-3 col-lg-2">
                     <?= form_dropdown(
                         'default_tax_jurisdiction',
                         $tax_jurisdiction_options,
diff --git a/app/Views/customers/form.php b/app/Views/customers/form.php
index b348d98da..6c6e5b96f 100644
--- a/app/Views/customers/form.php
+++ b/app/Views/customers/form.php
@@ -36,7 +36,7 @@
         <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']) ?>
+                    <?= form_label(lang('Customers.consent'), 'consent', ['class' => 'control-label col-xs-3 text-danger required']) ?>
                     <div class="col-xs-1">
                         <?= form_checkbox('consent', 1, $person_info->consent == '' ? !$config['enforce_privacy'] : (bool)$person_info->consent) ?>
                     </div>
diff --git a/app/Views/employees/form.php b/app/Views/employees/form.php
index 625219b1f..006ba619a 100644
--- a/app/Views/employees/form.php
+++ b/app/Views/employees/form.php
@@ -35,7 +35,7 @@
         <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']) ?>
+                    <?= form_label(lang('Employees.username'), 'username', ['class' => 'control-label col-xs-3 text-danger required']) ?>
                     <div class="col-xs-8">
                         <div class="input-group">
                             <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-user"></span></span>
diff --git a/app/Views/expenses/form.php b/app/Views/expenses/form.php
index 8169cc8a9..cbeddbd38 100644
--- a/app/Views/expenses/form.php
+++ b/app/Views/expenses/form.php
@@ -21,7 +21,7 @@
         </div>
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Expenses.date'), 'date', ['class' => 'required control-label col-xs-3']) ?>
+            <?= form_label(lang('Expenses.date'), 'date', ['class' => 'control-label col-xs-3 text-danger required']) ?>
             <div class="col-xs-6">
                 <div class="input-group">
                     <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-calendar"></span></span>
@@ -70,7 +70,7 @@
         </div>
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Expenses.amount'), 'amount', ['class' => 'required control-label col-xs-3']) ?>
+            <?= form_label(lang('Expenses.amount'), 'amount', ['class' => 'control-label col-xs-3 text-danger required']) ?>
             <div class="col-xs-6">
                 <div class="input-group input-group-sm">
                     <?php if (!is_right_side_currency_symbol()): ?>
diff --git a/app/Views/expenses_categories/form.php b/app/Views/expenses_categories/form.php
index 31246f57a..2e8443126 100644
--- a/app/Views/expenses_categories/form.php
+++ b/app/Views/expenses_categories/form.php
@@ -12,7 +12,7 @@
     <fieldset id="expenses_categories">
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Expenses_categories.name'), 'category_name', ['class' => 'required control-label col-xs-3']) ?>
+            <?= form_label(lang('Expenses_categories.name'), 'category_name', ['class' => 'control-label col-xs-3 text-danger required']) ?>
             <div class="col-xs-8">
                 <?= form_input([
                     'name'  => 'category_name',
diff --git a/app/Views/giftcards/form.php b/app/Views/giftcards/form.php
index 38c8130c4..666b9b789 100644
--- a/app/Views/giftcards/form.php
+++ b/app/Views/giftcards/form.php
@@ -49,7 +49,7 @@
 
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Giftcards.card_value'), 'giftcard_amount', ['class' => 'required control-label col-xs-3']) ?>
+            <?= form_label(lang('Giftcards.card_value'), 'giftcard_amount', ['class' => 'control-label col-xs-3 text-danger required']) ?>
             <div class="col-xs-4">
                 <div class="input-group input-group-sm">
                     <?php if (!is_right_side_currency_symbol()): ?>
diff --git a/app/Views/home/form_change_password.php b/app/Views/home/form_change_password.php
index 71d431cbe..f15e7f6ad 100644
--- a/app/Views/home/form_change_password.php
+++ b/app/Views/home/form_change_password.php
@@ -13,7 +13,7 @@
             <fieldset>
 
                 <div class="form-group form-group-sm">
-                    <?= form_label(lang('Employees.username'), 'username', ['class' => 'required control-label col-xs-3']) ?>
+                    <?= form_label(lang('Employees.username'), 'username', ['class' => 'control-label col-xs-3 text-danger required']) ?>
                     <div class="col-xs-8">
                         <div class="input-group">
                             <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-user"></span></span>
diff --git a/app/Views/item_kits/form.php b/app/Views/item_kits/form.php
index 51d90188c..1b5f36e06 100644
--- a/app/Views/item_kits/form.php
+++ b/app/Views/item_kits/form.php
@@ -30,7 +30,7 @@
         </div>
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Item_kits.name'), 'name', ['class' => 'required control-label col-xs-3']) ?>
+            <?= form_label(lang('Item_kits.name'), 'name', ['class' => 'control-label col-xs-3 text-danger required']) ?>
             <div class="col-xs-8">
                 <?= form_input([
                     'name'  => 'name',
@@ -97,7 +97,7 @@
         </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']) ?>
+            <?= form_label(lang('Item_kits.price_option'), 'price_option', !empty($basic_version) ? ['class' => 'control-label col-xs-3 text-danger required'] : ['class' => 'control-label col-xs-3']) ?>
             <div class="col-xs-8">
                 <label class="radio-inline">
                     <?= form_radio([
@@ -127,7 +127,7 @@
         </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']) ?>
+            <?= form_label(lang('Item_kits.print_option'), 'print_option', !empty($basic_version) ? ['class' => 'control-label col-xs-3 text-danger required'] : ['class' => 'control-label col-xs-3']) ?>
             <div class="col-xs-8">
                 <label class="radio-inline">
                     <?= form_radio([
diff --git a/app/Views/items/form.php b/app/Views/items/form.php
index be2e9b3c5..e078fe123 100644
--- a/app/Views/items/form.php
+++ b/app/Views/items/form.php
@@ -47,7 +47,7 @@
         </div>
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.name'), 'name', ['class' => 'required control-label col-xs-3']) ?>
+            <?= form_label(lang('Items.name'), 'name', ['class' => 'control-label col-xs-3 text-danger required']) ?>
             <div class="col-xs-8">
                 <?= form_input([
                     'name'  => 'name',
@@ -59,7 +59,7 @@
         </div>
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.category'), 'category', ['class' => 'required control-label col-xs-3']) ?>
+            <?= form_label(lang('Items.category'), 'category', ['class' => 'control-label col-xs-3 text-danger required']) ?>
             <div class="col-xs-8">
                 <div class="input-group">
                     <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-tag"></span></span>
@@ -86,7 +86,7 @@
         </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']) ?>
+            <?= form_label(lang('Items.stock_type'), 'stock_type', !empty($basic_version) ? ['class' => 'control-label col-xs-3 text-danger required'] : ['class' => 'control-label col-xs-3']) ?>
             <div class="col-xs-8">
                 <label class="radio-inline">
                     <?= form_radio([
@@ -110,7 +110,7 @@
         </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']) ?>
+            <?= form_label(lang('Items.type'), 'item_type', !empty($basic_version) ? ['class' => 'control-label col-xs-3 text-danger required'] : ['class' => 'control-label col-xs-3']) ?>
             <div class="col-xs-8">
                 <label class="radio-inline">
                     <?php
@@ -175,7 +175,7 @@
         </div>
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.cost_price'), 'cost_price', ['class' => 'required control-label col-xs-3']) ?>
+            <?= form_label(lang('Items.cost_price'), 'cost_price', ['class' => 'control-label col-xs-3 text-danger required']) ?>
             <div class="col-xs-4">
                 <div class="input-group input-group-sm">
                     <?php if (!is_right_side_currency_symbol()): ?>
@@ -196,7 +196,7 @@
         </div>
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.unit_price'), 'unit_price', ['class' => 'required control-label col-xs-3']) ?>
+            <?= form_label(lang('Items.unit_price'), 'unit_price', ['class' => 'control-label col-xs-3 text-danger required']) ?>
             <div class="col-xs-4">
                 <div class="input-group input-group-sm">
                     <?php if (!is_right_side_currency_symbol()): ?>
@@ -300,7 +300,7 @@
 
         <?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']) ?>
+                <?= form_label(lang('Items.quantity') . ' ' . $location_detail['location_name'], "quantity_$key", ['class' => 'control-label col-xs-3 text-danger required']) ?>
                 <div class="col-xs-4">
                     <?= form_input([
                         'name'    => "quantity_$key",
@@ -314,7 +314,7 @@
         <?php } ?>
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.receiving_quantity'), 'receiving_quantity', ['class' => 'required control-label col-xs-3']) ?>
+            <?= form_label(lang('Items.receiving_quantity'), 'receiving_quantity', ['class' => 'control-label col-xs-3 text-danger required']) ?>
             <div class="col-xs-4">
                 <?= form_input([
                     'name'    => 'receiving_quantity',
@@ -327,7 +327,7 @@
         </div>
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.reorder_level'), 'reorder_level', ['class' => 'required control-label col-xs-3']) ?>
+            <?= form_label(lang('Items.reorder_level'), 'reorder_level', ['class' => 'control-label col-xs-3 text-danger required']) ?>
             <div class="col-xs-4">
                 <?= form_input([
                     'name'    => 'reorder_level',
diff --git a/app/Views/items/form_inventory.php b/app/Views/items/form_inventory.php
index 886075ba9..8fc460947 100644
--- a/app/Views/items/form_inventory.php
+++ b/app/Views/items/form_inventory.php
@@ -79,7 +79,7 @@
         </div>
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Items.add_minus'), 'quantity', ['class' => 'required control-label col-xs-3']) ?>
+            <?= form_label(lang('Items.add_minus'), 'quantity', ['class' => 'control-label col-xs-3 text-danger required']) ?>
             <div class="col-xs-4">
                 <?= form_input([
                     'name'  => 'newquantity',
diff --git a/app/Views/messages/form_sms.php b/app/Views/messages/form_sms.php
index cacb64bef..f6642bcca 100644
--- a/app/Views/messages/form_sms.php
+++ b/app/Views/messages/form_sms.php
@@ -27,7 +27,7 @@
         </div>
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Messages.phone'), 'phone_label', ['for' => 'phone', 'class' => 'control-label col-xs-2 required']) ?>
+            <?= form_label(lang('Messages.phone'), 'phone_label', ['for' => 'phone', 'class' => 'control-label col-xs-2 text-danger required']) ?>
             <div class="col-xs-10">
                 <div class="input-group">
                     <span class="input-group-addon input-sm"><span class="glyphicon glyphicon-phone-alt"></span></span>
@@ -37,7 +37,7 @@
         </div>
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Messages.message'), 'message_label', ['for' => 'message', 'class' => 'control-label col-xs-2 required']) ?>
+            <?= form_label(lang('Messages.message'), 'message_label', ['for' => 'message', 'class' => 'control-label col-xs-2 text-danger required']) ?>
             <div class="col-xs-10">
                 <?= form_textarea(['class' => 'form-control input-sm required', 'name' => 'message', 'id' => 'message', 'value' => $config['msg_msg']]) ?>
             </div>
diff --git a/app/Views/partial/customer_rewards.php b/app/Views/partial/customer_rewards.php
index d6631f349..161b4b906 100644
--- a/app/Views/partial/customer_rewards.php
+++ b/app/Views/partial/customer_rewards.php
@@ -15,8 +15,8 @@ foreach ($customer_rewards as $reward_key => $reward_category) {
 ?>
 
     <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">
+        <?= form_label(lang('Config.customer_reward') . " $i", "customer_reward_$i", ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+        <div class="col-xs-4 col-md-3">
             <?php $form_data = [
                 'name'  => 'customer_reward_' . $customer_reward_id,
                 'id'    => 'customer_reward_' . $customer_reward_id,
@@ -27,7 +27,7 @@ foreach ($customer_rewards as $reward_key => $reward_category) {
             echo form_input($form_data);
             ?>
         </div>
-        <div class="col-xs-2">
+        <div class="col-xs-3 col-md-2">
             <?php $form_data = [
                 'name'  => 'reward_points_' . $customer_reward_id,
                 'id'    => 'reward_points_' . $customer_reward_id,
diff --git a/app/Views/partial/dinner_tables.php b/app/Views/partial/dinner_tables.php
index 899a9aaeb..9ec040e7d 100644
--- a/app/Views/partial/dinner_tables.php
+++ b/app/Views/partial/dinner_tables.php
@@ -14,10 +14,8 @@ foreach ($dinner_tables as $table_key => $table) {
 ?>
 
     <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">
+        <?= form_label(lang('Config.dinner_table') . " $i", "dinner_table_$i", ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+        <div class="col-xs-7 col-sm-4 col-md-3">
             <?php $form_data = [
                 'name'  => "dinner_table_$dinner_table_id",
                 'id'    => "dinner_table_$dinner_table_id",
diff --git a/app/Views/partial/stock_locations.php b/app/Views/partial/stock_locations.php
index 356212728..d0d50f991 100644
--- a/app/Views/partial/stock_locations.php
+++ b/app/Views/partial/stock_locations.php
@@ -14,8 +14,8 @@ foreach ($stock_locations as $location => $location_data) {
 ?>
 
     <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">
+        <?= form_label(lang('Config.stock_location') . " $i", "stock_location_$i", ['class' => 'control-label col-xs-3 col-sm-2 text-danger required']) ?>
+        <div class="col-xs-7 col-sm-4 col-md-3">
             <?php $form_data = [
                 'name'  => "stock_location[$location_id]",
                 'id'    => "stock_location[$location_id]",
diff --git a/app/Views/people/form_basic_info.php b/app/Views/people/form_basic_info.php
index d3822a452..456f24294 100644
--- a/app/Views/people/form_basic_info.php
+++ b/app/Views/people/form_basic_info.php
@@ -6,7 +6,7 @@
 ?>
 
 <div class="form-group form-group-sm">
-    <?= form_label(lang('Common.first_name'), 'first_name', ['class' => 'required control-label col-xs-3']) ?>
+    <?= form_label(lang('Common.first_name'), 'first_name', ['class' => 'control-label col-xs-3 text-danger required']) ?>
     <div class="col-xs-8">
         <?= form_input([
             'name'  => 'first_name',
@@ -18,7 +18,7 @@
 </div>
 
 <div class="form-group form-group-sm">
-    <?= form_label(lang('Common.last_name'), 'last_name', ['class' => 'required control-label col-xs-3']) ?>
+    <?= form_label(lang('Common.last_name'), 'last_name', ['class' => 'control-label col-xs-3 text-danger required']) ?>
     <div class="col-xs-8">
         <?= form_input([
             'name'  => 'last_name',
@@ -30,7 +30,7 @@
 </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']) ?>
+    <?= form_label(lang('Common.gender'), 'gender', !empty($basic_version) ? ['class' => 'control-label col-xs-3 text-danger required'] : ['class' => 'control-label col-xs-3']) ?>
     <div class="col-xs-4">
         <label class="radio-inline">
             <?= form_radio([
diff --git a/app/Views/reports/date_input.php b/app/Views/reports/date_input.php
index b565bd2b1..541b3cddf 100644
--- a/app/Views/reports/date_input.php
+++ b/app/Views/reports/date_input.php
@@ -23,7 +23,7 @@ if (isset($error)) {
 <?= form_open('#', ['id' => 'item_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
 
     <div class="form-group form-group-sm">
-        <?= form_label(lang('Reports.date_range'), 'report_date_range_label', ['class' => 'control-label col-xs-2 required']) ?>
+        <?= form_label(lang('Reports.date_range'), 'report_date_range_label', ['class' => 'control-label col-xs-2 text-danger required']) ?>
         <div class="col-xs-3">
             <?= form_input(['name' => 'daterangepicker', 'class' => 'form-control input-sm', 'id' => 'daterangepicker']) ?>
         </div>
@@ -32,12 +32,12 @@ if (isset($error)) {
     <?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']) ?>
+                <?= form_label(lang('Reports.sale_type'), 'reports_sale_type_label', ['class' => 'control-label col-xs-2 text-danger required']) ?>
                 <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']) ?>
+                <?= form_label(lang('Reports.receiving_type'), 'reports_receiving_type_label', ['class' => 'control-label col-xs-2 text-danger required']) ?>
                 <div id="report_receiving_type" class="col-xs-3">
                     <?= form_dropdown(
                         'receiving_type',
@@ -57,7 +57,7 @@ if (isset($error)) {
 
     <?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']) ?>
+            <?= form_label(lang('Reports.discount_type'), 'reports_discount_type_label', ['class' => 'control-label col-xs-2 text-danger required']) ?>
             <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>
@@ -66,7 +66,7 @@ if (isset($error)) {
 
     <?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']) ?>
+            <?= form_label(lang('Reports.stock_location'), 'reports_stock_location_label', ['class' => 'control-label col-xs-2 text-danger required']) ?>
             <div id="report_stock_location" class="col-xs-3">
                 <?= form_dropdown('stock_location', $stock_locations, 'all', ['id' => 'location_id', 'class' => 'form-control']) ?>
             </div>
diff --git a/app/Views/reports/inventory_summary_input.php b/app/Views/reports/inventory_summary_input.php
index 722666df0..4a0107ccf 100644
--- a/app/Views/reports/inventory_summary_input.php
+++ b/app/Views/reports/inventory_summary_input.php
@@ -22,14 +22,14 @@ if (isset($error)) {
 <?= form_open('#', ['id' => 'item_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
 
     <div class="form-group form-group-sm">
-        <?= form_label(lang('Reports.stock_location'), 'reports_stock_location_label', ['class' => 'required control-label col-xs-2']) ?>
+        <?= form_label(lang('Reports.stock_location'), 'reports_stock_location_label', ['class' => 'control-label col-xs-2 text-danger required']) ?>
         <div id="report_stock_location" class="col-xs-3">
             <?= form_dropdown('stock_location', $stock_locations, 'all', 'id="location_id" class="form-control"') ?>
         </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']) ?>
+        <?= form_label(lang('Reports.item_count'), 'reports_item_count_label', ['class' => 'control-label col-xs-2 text-danger required']) ?>
         <div id="report_item_count" class="col-xs-3">
             <?= form_dropdown('item_count', $item_count, 'all', 'id="item_count" class="form-control"') ?>
         </div>
diff --git a/app/Views/reports/specific_customer_input.php b/app/Views/reports/specific_customer_input.php
index 925077f8c..0fdbc84ba 100644
--- a/app/Views/reports/specific_customer_input.php
+++ b/app/Views/reports/specific_customer_input.php
@@ -24,28 +24,28 @@ if (isset($error)) {
 <?= form_open('#', ['id' => 'item_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
 
     <div class="form-group form-group-sm">
-        <?= form_label(lang('Reports.date_range'), 'report_date_range_label', ['class' => 'control-label col-xs-2 required']) ?>
+        <?= form_label(lang('Reports.date_range'), 'report_date_range_label', ['class' => 'control-label col-xs-2 text-danger required']) ?>
         <div class="col-xs-3">
             <?= form_input(['name' => 'daterangepicker', 'class' => 'form-control input-sm', 'id' => 'daterangepicker']) ?>
         </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']) ?>
+        <?= form_label($specific_input_name, 'specific_input_name_label', ['class' => 'control-label col-xs-2 text-danger required']) ?>
         <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>
 
     <div class="form-group form-group-sm">
-        <?= form_label(lang('Reports.sale_type'), 'reports_sale_type_label', ['class' => 'required control-label col-xs-2']) ?>
+        <?= form_label(lang('Reports.sale_type'), 'reports_sale_type_label', ['class' => 'control-label col-xs-2 text-danger required']) ?>
         <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']) ?>
+        <?= form_label(lang('Reports.payment_type'), 'reports_payment_type_label', ['class' => 'control-label col-xs-2 text-danger required']) ?>
         <div class="col-xs-3">
             <?= form_dropdown('payment_type', $payment_type, '', 'id="input_payment_type" class="form-control"') ?>
         </div>
diff --git a/app/Views/reports/specific_input.php b/app/Views/reports/specific_input.php
index 7bc00d48d..813b9964a 100644
--- a/app/Views/reports/specific_input.php
+++ b/app/Views/reports/specific_input.php
@@ -24,7 +24,7 @@ if (isset($error)) {
 <?= form_open('#', ['id' => 'item_form', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) ?>
 
     <div class="form-group form-group-sm">
-        <?= form_label(lang('Reports.date_range'), 'report_date_range_label', ['class' => 'control-label col-xs-2 required']) ?>
+        <?= form_label(lang('Reports.date_range'), 'report_date_range_label', ['class' => 'control-label col-xs-2 text-danger required']) ?>
         <div class="col-xs-3">
             <?= form_input(['name' => 'daterangepicker', 'class' => 'form-control input-sm', 'id' => 'daterangepicker']) ?>
         </div>
@@ -32,7 +32,7 @@ if (isset($error)) {
 
     <?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']) ?>
+            <?= form_label(lang('Reports.discount_type'), 'reports_discount_type_label', ['class' => 'control-label col-xs-2 text-danger required']) ?>
             <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>
@@ -40,7 +40,7 @@ if (isset($error)) {
     <?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']) ?>
+        <?= form_label($specific_input_name, 'specific_input_name_label', ['class' => 'control-label col-xs-2 text-danger required']) ?>
         <div class="col-xs-3 discount_percent">
             <?= form_dropdown('specific_input_data', $specific_input_data, '', 'id="specific_input_data" class="form-control"') ?>
         </div>
@@ -60,7 +60,7 @@ if (isset($error)) {
     </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']) ?>
+        <?= form_label(lang('Reports.sale_type'), 'reports_sale_type_label', ['class' => 'control-label col-xs-2 text-danger required']) ?>
         <div id="report_sale_type" class="col-xs-3">
             <?= form_dropdown('sale_type', $sale_type_options, 'complete', 'id="input_type" class="form-control"') ?>
         </div>
diff --git a/app/Views/suppliers/form.php b/app/Views/suppliers/form.php
index 441b1f03f..c04a04107 100644
--- a/app/Views/suppliers/form.php
+++ b/app/Views/suppliers/form.php
@@ -13,7 +13,7 @@
     <fieldset id="supplier_basic_info">
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Suppliers.company_name'), 'company_name', ['class' => 'required control-label col-xs-3']) ?>
+            <?= form_label(lang('Suppliers.company_name'), 'company_name', ['class' => 'control-label col-xs-3 text-danger required']) ?>
             <div class="col-xs-8">
                 <?= form_input([
                     'name'  => 'company_name',
@@ -25,7 +25,7 @@
         </div>
 
         <div class="form-group form-group-sm">
-            <?= form_label(lang('Suppliers.category'), 'category', ['class' => 'required control-label col-xs-3']) ?>
+            <?= form_label(lang('Suppliers.category'), 'category', ['class' => 'control-label col-xs-3 text-danger required']) ?>
             <div class="col-xs-6">
                 <?= form_dropdown('category', $categories, $person_info->category, ['class' => 'form-control', 'id' => 'category']) ?>
             </div>
diff --git a/package-lock.json b/package-lock.json
index acb1b5fff..897a23416 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57,7 +57,7 @@
                 "gulp-tar": "^5.0.0",
                 "gulp-uglify": "^3.0.2",
                 "gulp-zip": "^6.1.0",
-                "license-report": "^6.8.2",
+                "license-report": "^6.8.5",
                 "npm-check-updates": "^22.1.1",
                 "readable-stream": "^4.4.2",
                 "stream-series": "^0.1.1"
@@ -213,13 +213,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"
@@ -1008,16 +1008,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"
@@ -1153,6 +1153,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",
@@ -2085,16 +2098,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/fs-mkdirp-stream": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/fs-mkdirp-stream/-/fs-mkdirp-stream-2.0.1.tgz",
@@ -2373,27 +2376,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"
@@ -4146,9 +4149,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": {
@@ -4156,10 +4159,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"
@@ -4172,13 +4175,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": {
@@ -4358,13 +4361,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"
@@ -4554,9 +4557,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": {
@@ -4664,16 +4667,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",
@@ -5168,6 +5161,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",
@@ -5312,9 +5318,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": {
@@ -5898,6 +5904,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",
@@ -6053,13 +6072,16 @@
             "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.10.0",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-5.10.0.tgz",
+            "integrity": "sha512-NoSdpq/WEiAg5sjmBkmV/hfxv6HJH4NqPNrqjtSO5CwRmpsDfaf4begxW34KdJykH/l1yHtwBWQkCRdoXO8mPA==",
             "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"
@@ -6077,6 +6099,19 @@
                 "node": ">=0.8.0"
             }
         },
+        "node_modules/uint8array-extras": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/uint8array-extras/-/uint8array-extras-1.6.0.tgz",
+            "integrity": "sha512-8iAasVS4wUx0gPLjH8Xtz2PeDzTSiy8QiLGu2DT3X5GU+egFEQhpnbtkehbAwjvDcxIERmCYcysiODFmE3Ud0Q==",
+            "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 51beed1f4..9ae950bf1 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
         "gulp-tar": "^5.0.0",
         "gulp-uglify": "^3.0.2",
         "gulp-zip": "^6.1.0",
-        "license-report": "^6.8.2",
+        "license-report": "^6.8.5",
         "npm-check-updates": "^22.1.1",
         "readable-stream": "^4.4.2",
         "stream-series": "^0.1.1"
diff --git a/public/css/ospos.css b/public/css/ospos.css
index b283b3a24..1d4c1269c 100644
--- a/public/css/ospos.css
+++ b/public/css/ospos.css
@@ -148,10 +148,6 @@ button.btn.dropdown-toggle.btn-sm {
     box-shadow: none;
 }
 
-label.required {
-    color: red;
-}
-
 @media (min-width: 768px) {
     .navbar-nav>li>a {
         padding: 10px 10px 9px;