diff --git a/app/Controllers/ClientController.php b/app/Controllers/ClientController.php
index b5d1706c..55dbc147 100755
--- a/app/Controllers/ClientController.php
+++ b/app/Controllers/ClientController.php
@@ -903,7 +903,7 @@ class ClientController extends AdminController
     {
 
         $this->myLogger->logme('error', 'Edit Client Onboarding function called');
-        $headerData['tab_name'] = 'Edit Client Onboarding';
+        $headerData['tab_name'] = 'Clients';
         $headerData['page_name'] = 'Clients';
 
         $editData['RM']             = $this->userModel->where('is_active', 1)->findAll();
diff --git a/app/Controllers/RuleImportController.php b/app/Controllers/RuleImportController.php
index 3a6c53e4..9eb95d35 100644
--- a/app/Controllers/RuleImportController.php
+++ b/app/Controllers/RuleImportController.php
@@ -759,6 +759,7 @@ class RuleImportController extends AdminController
 
     public function ruleList($id)
     {   
+        $data['tab_name'] = "Rule Manager";
         $data['page_name'] = "Rule Manager";
         $data['departments'] = $this->departments;
         $data['commission_file_id'] = $id;
diff --git a/app/Views/DashBoard.php b/app/Views/DashBoard.php
index d09b90c7..5e2b1ee1 100755
--- a/app/Views/DashBoard.php
+++ b/app/Views/DashBoard.php
@@ -170,7 +170,7 @@
     #client_add .tab-content-styles{
         background-color:#F4F4F4;
         margin-right:20px; 
-        margin-top:0px !important;
+        margin-top:12px !important; /**        margin-top:0px !important; */
         border-radius:25px!important;
         min-height: 70vh !important;
     }
diff --git a/app/Views/batch_list.php b/app/Views/batch_list.php
index 7b1b0f6f..f368adcd 100755
--- a/app/Views/batch_list.php
+++ b/app/Views/batch_list.php
@@ -67,28 +67,54 @@
     padding: 4px 12px;
     font-size: 12px;
 }
+
+/* Keep DataTable controls aligned like reference UI */
+#tpa_variation_modal .dataTables_wrapper .dt-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 6px;
+}
+
+#tpa_variation_modal .dataTables_wrapper .dt-bottom {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-top: 6px;
+}
+
+#tpa_variation_modal .dataTables_wrapper .dt-top .dataTables_length,
+#tpa_variation_modal .dataTables_wrapper .dt-top .dataTables_filter,
+#tpa_variation_modal .dataTables_wrapper .dt-bottom .dataTables_paginate {
+    float: none;
+    margin: 0;
+}
+
+#tpa_variation_modal .dataTables_wrapper .dt-top .dataTables_filter {
+    text-align: right;
+}
 /* Compact table + buttons (NHance) */
-#datatable-buttons thead th,
-#datatable-buttons tbody td {
+#tickets-table thead th,
+#tickets-table tbody td {
     padding: 5px 11px !important;
     font-size: 13px;
     line-height: 1.25;
 }
 
 /* Action dropdown toggle in rows */
-#datatable-buttons .dropdown-toggle.btn-sm {
+#tickets-table .dropdown-toggle.btn-sm {
     padding: 4px 9px !important;
     font-size: 13px;
     line-height: 1.2;
 }
 
 /* DataTables toolbar buttons (Export/Filter/Clear Filter) */
-#datatable-buttons_wrapper .dt-buttons .btn {
+#tickets-table_wrapper .dt-buttons .btn {
     padding: 6px 13px !important;
     font-size: 13px;
 }
 
-#datatable-buttons_wrapper .dt-buttons .btn .btn-custom {
+#tickets-table_wrapper .dt-buttons .btn .btn-custom {
     font-size: 13px;
 }
 
@@ -104,10 +130,10 @@
 
             </div>
             <div class="table-responsive">
-                <table data-custom-table-css="table" id="datatable-buttons" class="table table-hover m-0 table-centered dt-responsive w-100">
+                <table data-custom-table-css="table" id="tickets-table" class="table table-hover m-0 table-centered dt-responsive w-100">
                     <thead class="bg-light">
                         <tr>
-                            <th class="font-weight-medium">S.No&nbsp;</th>
+                            <th class="font-weight-medium">S.No&nbsp;</th> 
                             <th class="font-weight-medium">Batch Code&nbsp;</th>
                             <th class="font-weight-medium">File Name&nbsp;</th>
                             <th class="font-weight-medium">Client&nbsp;</th>
@@ -489,9 +515,8 @@
         renderVariationTable('#not_in_tpa_table', notInTpa, tpaVariationColumns.not_in_tpa);
         renderVariationTable('#need_to_review_table', reviewData, tpaVariationColumns.need_to_review);
 
-        initVariationDataTable('#not_in_nhance_table');
-        initVariationDataTable('#not_in_tpa_table');
-        initVariationDataTable('#need_to_review_table');
+        const activeId = $('#tpaVariationTabs .nav-link.active').attr('id') || 'not-in-nhance-tab';
+        adjustVariationTableByTabId(activeId);
     }
 
     function showTPAVariationModal() {
@@ -506,18 +531,85 @@
         updateTPAProceedButton($activeTab.attr('id'));
     }
 
-    function initVariationDataTable(tableSelector) {
-        const $table = $(tableSelector);
-
-        $table.DataTable({
+    function getVariationDataTableConfig() {
+        return {
+            dom: "<'dt-top'lf>" +
+                "rt" +
+                "<'dt-bottom'p>",
             pageLength: 20,
             lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
             searching: true,
             paging: true,
             ordering: false,
-            info: true,
-            autoWidth: false
+            info: false,
+            autoWidth: false,
+            language: {
+                search: `
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
+                        _INPUT_
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none; cursor:pointer;"></i>
+                    </div>`,
+                searchPlaceholder: "Search"
+            }
+        };
+    }
+
+    function bindVariationSearchIcons($table) {
+        const $wrapper = $table.closest('.dataTables_wrapper');
+        const $searchInput = $wrapper.find('.dataTables_filter input');
+        const $magnify = $wrapper.find('.datatable-search-icon');
+        const $clear = $wrapper.find('.datatable-clear-icon');
+
+        if (!$searchInput.length) {
+            return;
+        }
+
+        $searchInput.off('input.variationSearch').on('input.variationSearch', function () {
+            const hasValue = !!$(this).val();
+            $magnify.toggle(!hasValue);
+            $clear.toggle(hasValue);
         });
+
+        $clear.off('click.variationSearch').on('click.variationSearch', function () {
+            $searchInput.val('').trigger('input').trigger('keyup');
+        });
+
+        const hasInitialValue = !!$searchInput.val();
+        $magnify.toggle(!hasInitialValue);
+        $clear.toggle(hasInitialValue);
+    }
+
+    function initVariationDataTable(tableSelector) {
+        const $table = $(tableSelector);
+        if (!$table.length) {
+            return;
+        }
+
+        if (!$.fn.DataTable.isDataTable($table)) {
+            $table.DataTable(getVariationDataTableConfig());
+        }
+
+        const dt = $table.DataTable();
+        dt.columns.adjust().draw(false);
+        bindVariationSearchIcons($table);
+    }
+
+    function adjustVariationTableByTabId(tabId) {
+        const tabToTableMap = {
+            'not-in-nhance-tab': '#not_in_nhance_table',
+            'not-in-tpa-tab': '#not_in_tpa_table',
+            'need-to-review-tab': '#need_to_review_table'
+        };
+
+        const tableSelector = tabToTableMap[tabId];
+        if (!tableSelector) {
+            return;
+        }
+
+        initVariationDataTable(tableSelector);
     }
 
     function destroyVariationDataTable(tableSelector) {
@@ -550,13 +642,25 @@
 
     $(document).ready(function() {
 
-        // Update proceed button label/visibility on tab change
+        // Update proceed button label/visibility and ensure datatable is rendered on tab change
         $('#tpaVariationTabs a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
             const activeId = $(e.target).attr('id');
             updateTPAProceedButton(activeId);
+            adjustVariationTableByTabId(activeId);
         });
 
-        $('#datatable-buttons').DataTable({
+        $('#tpa_variation_modal').on('shown.bs.modal', function () {
+            const activeId = $('#tpaVariationTabs .nav-link.active').attr('id') || 'not-in-nhance-tab';
+            adjustVariationTableByTabId(activeId);
+        });
+
+        $('#tpa_variation_modal').on('hidden.bs.modal', function () {
+            destroyVariationDataTable('#not_in_nhance_table');
+            destroyVariationDataTable('#not_in_tpa_table');
+            destroyVariationDataTable('#need_to_review_table');
+        });
+
+        const batchListTable = $('#tickets-table').DataTable({
             dom: "<'row'<'col-sm-7'f><'col-sm-5 text-right'B>>" + // Filter left, buttons right
                 "<'row'<'col-sm-12'tr>>" +
                 "<'row align-items-center'<'col-5 text-start'i><'col-7 d-flex justify-content-end align-items-center'<'me-2'l>p>>",            lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
@@ -591,19 +695,35 @@
             ],
             language: {
                 search: `
-                <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
-                    _INPUT_
-                    <i class="mdi mdi-magnify datatable-search-icon" 
-                    style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
-                    <i class="mdi mdi-close-circle datatable-clear-icon" 
-                    style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
-                </div>`,
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
+                        _INPUT_
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
+                    </div>`,
                 searchPlaceholder: "Search",
                 emptyTable: '<div class="text-center text-muted">No Data found</div>'
             },
-            paging: true
+            autoWidth: false,
+            paging: true,
+            responsive: false
         });
 
+        // Keep TH and TD widths in sync after any table redraw (search/sort/paginate).
+        batchListTable.on('draw.dt', function () {
+            batchListTable.columns.adjust();
+        });
+
+        $(window).on('resize', function () {
+            batchListTable.columns.adjust();
+        });
+
+        // Initial alignment after DataTable renders buttons/filter layout.
+        setTimeout(function () {
+            batchListTable.columns.adjust();
+        }, 0);
+
     });
 
     // Function to format a number in Indian Rupees format
diff --git a/app/Views/client_basic_info.php b/app/Views/client_basic_info.php
index 2227c841..d2bae3a3 100755
--- a/app/Views/client_basic_info.php
+++ b/app/Views/client_basic_info.php
@@ -1,4 +1,52 @@
 <style>
+.image-preview {
+    
+    border: 1px solid #00999E;
+    border-radius: 12px;
+    width: 70px;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* margin-right: 15px; */
+}
+
+.image-preview img {
+    width: 50px;
+    height: 50px;
+    object-fit: contain;
+    transition: transform 0.2s ease-in-out;
+}
+
+.image-preview:hover img {
+    transform: scale(1.2);
+    cursor: zoom-in;
+}
+
+.upload-btn {
+    background-color: #00999E;
+    color: #fff;
+    border: none;
+    border-radius: 25px;
+    padding: 6px 20px;
+    margin-right: 10px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.helper-text {
+    font-size: 12px;
+    color: #666;
+    margin-top: 8px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    white-space: normal;
+    max-width: 285px;
+}
+
+.hidden-input {
+    display: none;
+}
 .switch {
   position: relative;
   display: inline-block;
@@ -70,7 +118,7 @@ input:checked + .slider:before {
                 <input type="hidden" name="PrimaryKey" id="general_PrimaryKey" value="<?= isset($client['id']) ? $client['id'] : '' ?>"/>
                     <input type="hidden" name="client_id" id="client_id" />
                     <div class="form-group">
-                        <div class="form-row">
+                        <!-- <div class="form-row">
                             <div class="form-group">
                                 <label for="">Upload Your Logo</label> <br>
                                 <img 
@@ -87,7 +135,47 @@ input:checked + .slider:before {
                             <br>
 
                             </div>
-                        </div>
+                        </div> -->
+
+                        <!-- Client Logo -->
+                        <div class="form-group col-md-12">
+                                        <label for="client_logo">Upload Your Logo</label>
+                                        <div class="row align-items-center">
+                                            <!-- Left column: Image -->
+                                            <div class="col-auto">
+                                                <div class="image-preview">
+                                                        <img src="<?= isset($client['client_logo']) && !empty($client['client_logo']) ? base_url() . "public/uploads/logo/" . $client['client_logo'] : base_url() . "public/assets/images/avatar_2x.png" ?>" 
+                                                        id="uploadPreview0" 
+                                                        class="avatar img-circle img-thumbnail" 
+                                                        alt="Client Logo" onerror="this.src='<?= base_url() . 'public/assets/images/avatar_2x.png' ?>'" />
+                                                </div>
+                                            </div>
+
+                                            <!-- Right column: Buttons + text -->
+                                            <div class="col">
+                                                <div class="d-flex">
+                                                    <button type="button" class="upload-btn" onclick="document.getElementById('client_logo').click();">Upload</button>
+                                                    <!-- <button type="button" class="delete-btn" onclick="removeImage0();">Delete</button> -->
+                                                </div>
+                                                <div class="helper-text" id="fileNameText0">
+                                                    <?= isset($client['client_logo']) && !empty($client['client_logo']) ? $client['client_logo'] : '( Upload Your Logo )' ?>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <small class="mt-1 text-muted d-block">Allowed: PNG, JPG, JPEG. Size : 200KB Dimension : 100 X 100 Pixels</small>
+                                        <div id="client_logo_error_container"></div>
+
+                                        <!-- Hidden File Input -->
+                                        <input type="file" class="hidden-input" 
+                                                id="client_logo" name="client_logo" 
+                                                accept="image/jpeg, image/jpg, image/png" 
+                                                onchange="PreviewImage0(event);"
+                                                data-parsley-max-file-size="200"
+                                                data-parsley-file-extension="jpg,jpeg,png"
+                                                data-parsley-errors-container="#client_logo_error_container"
+                                                />
+                                    </div>
+                                    <!-- TPA Logo Ends -->
                         <div class="form-row">
                             <div class="form-group col-md-4">
                                 <label for="entity_type_id">Entity Type <span
@@ -110,13 +198,15 @@ input:checked + .slider:before {
                             <div class="form-group col-md-4">
                                 <label for="client_name">Client Name<span
                                         class="text-danger">*</span></label>
-                                <input type="text" class="form-control" id="client_name"  data-old-name="<?= isset($client['client_name']) ? $client['client_name'] : '' ?>"
-                                    placeholder="Enter Client Name" value="<?= isset($client['client_name']) ? $client['client_name'] : '' ?>" name="client_name" required>
+                                <input type="text" class="form-control" id="client_name" data-old-name="<?= isset($client['client_name']) ? $client['client_name'] : '' ?>"
+                                    placeholder="Enter Client Name" value="<?= isset($client['client_name']) ? $client['client_name'] : '' ?>" name="client_name"
+                                    required maxlength="255" data-parsley-maxlength="255">
                             </div>
                             <div class="form-group col-md-4">
                                 <label for="short_name">Client Short Name<span
                                         class="text-danger">*</span></label>
                                 <input type="text" class="form-control" id="short_name"
+                                    maxlength="100" data-parsley-maxlength="100"
                                     data-old-short="<?= isset($client['short_name']) ? $client['short_name'] : '' ?>"
                                     placeholder="Enter Short Name" value="<?= isset($client['short_name']) ? $client['short_name'] : '' ?>" name="short_name" onkeyup="validateInput(this, 'clients', 'short_name', 'clientBtnSubmit')" required>
                             </div>
@@ -125,7 +215,8 @@ input:checked + .slider:before {
                         <div class="form-row">
                             <div class="form-group col-md-4">
                                 <label for="pan">PAN<span class="text-danger"></span></label>
-                                <input type="text" class="form-control" id="pan" placeholder="Enter PAN Number" data-parsley-error-message="Invalid PAN Number. Example: ABCDE1234F" value="<?= isset($client['pan']) ? $client['pan'] : '' ?>"  name="pan"  data-parsley-trigger="change" data-parsley-pattern="^[A-Z]{5}[0-9]{4}[A-Z]$">
+                                <input type="text" class="form-control" id="pan" placeholder="Enter PAN Number" data-parsley-error-message="Invalid PAN Number. Example: ABCDE1234F" value="<?= isset($client['pan']) ? $client['pan'] : '' ?>"  name="pan"
+                                    maxlength="10" data-parsley-maxlength="10" data-parsley-trigger="change" data-parsley-pattern="^[A-Z]{5}[0-9]{4}[A-Z]$">
                             </div>
                             <!-- <div class="form-group col-md-4">
                                 <label for="gst">GST<span class="text-danger">*</span></label>
@@ -151,7 +242,7 @@ input:checked + .slider:before {
                                             type="radio"
                                             name="hr_file_processed_by"
                                             id="hr_processed"
-                                            value="1" <?php echo(isset($client['hr_file_processed_by']) && $client['hr_file_processed_by'] == 1) ? 'checked' : '' ?>>
+                                            value="1" required <?php echo(isset($client['hr_file_processed_by']) && $client['hr_file_processed_by'] == 1) ? 'checked' : '' ?>>
                                         <label class="form-check-label" for="hr_processed">HR</label>
                                     </div>
 
@@ -196,7 +287,17 @@ input:checked + .slider:before {
 </div>
 <!-- end -->
 
-
+<!-- Image Preview Modal -->
+<div class="modal fade" id="imagePreviewModal" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content" style="background: transparent; border: 0;">
+            <div class="modal-body text-center p-0">
+                <img src="" id="modalImage" class="img-fluid rounded" alt="Full-size preview" style="max-height: 90vh; cursor: zoom-out;">
+            </div>
+        </div>
+    </div>
+</div>
+<!-- /.modal -->
                                             
 <script>
     document.addEventListener("DOMContentLoaded", function() {
@@ -211,8 +312,30 @@ input:checked + .slider:before {
         
     });
 </script>
+<script>function PreviewImage0(event) {
+        const input = event.target;
+        const file = input.files[0];
+        if (file) {
+            // Show preview
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                document.getElementById('uploadPreview0').src = e.target.result;
+            };
+            reader.readAsDataURL(file);
 
+            // Show file name
+            document.getElementById('fileNameText0').innerText = file.name;
+        }
+    }
 
+    function removeImage0() {
+        // Reset preview to default
+        document.getElementById('uploadPreview0').src = "<?= base_url() . 'public/assets/images/avatar_2x.png' ?>";
+        document.getElementById('fileNameText0').innerText = '( Upload Your TPA Logo )';
+        document.getElementById('client_logo').value = ""; // clear file input
+    }
+
+</script>
 <script>
 
     var PrimaryKey  = $('#general_PrimaryKey').val();
@@ -224,6 +347,21 @@ input:checked + .slider:before {
             return;
         });
         $('#parent_client_id').select2();
+
+        // Handle image preview click to open modal
+        $('.image-preview').on('click', function() {
+            const imgSrc = $(this).find('img').attr('src');
+            // Don't open modal for the placeholder image
+            if (imgSrc && !imgSrc.includes('avatar_2x.png')) {
+                $('#modalImage').attr('src', imgSrc);
+                $('#imagePreviewModal').modal('show');
+            }
+        });
+
+        // Close modal on click (either on image or backdrop)
+        $('#imagePreviewModal').on('click', function() {
+            $(this).modal('hide');
+        });
     });
 
     $(document).ready(function () {
@@ -327,7 +465,7 @@ input:checked + .slider:before {
                                 $.each(res.data, function (index, item) {
                                     var row = `<tr>
                                                 <td> ${item.file_name}</td>
-                                                <td id="form_${item.id}" style=""><form class="ajax" ><input class="file-input__input" type="file" name="file_name" accept=".jpg,.jpeg,.png">
+                                                <td id="form_${item.id}" style=""><form class="ajax" ><input class="file-input__input" type="file" name="file_name" accept=".jpg,.jpeg,.png"><br><small class="text-muted">Allowed: PNG, JPG, JPEG.</small>
                                                     <input type="hidden" class="form-control" value="<?= csrf_hash() ?>" name="<?= csrf_token() ?>" />
                                                     <input type="hidden" class="form-control" value="${item.id}" name="kyc_doc_type_id" />
                                                     <input type="hidden" name="client_id" id="id_for_kyc_file" value="${client_id_for_file}"/>
@@ -392,30 +530,6 @@ input:checked + .slider:before {
     }
 
 
-    function PreviewImage() {
-        console.log('function called');
-        var fileInput = document.getElementById("client_logo");
-        var file = fileInput.files[0];
-
-        if (file) {
-            var allowedExtensions = ["jpg", "jpeg", "png"];
-            var fileExtension = file.name.split('.').pop().toLowerCase();
-
-            if (!allowedExtensions.includes(fileExtension) || file.size > 200 * 1024) {
-                toastr.warning('Maximum file size allowed is 200KB.', 'File size exceeds limit.');
-                fileInput.value = ""; // Clear the file input
-                document.getElementById("uploadPreview").src = "<?= base_url()?>/public/assets/images/avatar_2x.png"; // Remove the preview image
-            } else {
-                var reader = new FileReader();
-                reader.readAsDataURL(file);
-
-                reader.onload = function (event) {
-                    document.getElementById("uploadPreview").src = event.target.result;
-                };
-            }
-        }
-    }
-
 
     function validateFile(input) {
     if (!input.files || !input.files[0]) return;
diff --git a/app/Views/client_deposit_list.php b/app/Views/client_deposit_list.php
index e9cc7d7f..c5302d9e 100755
--- a/app/Views/client_deposit_list.php
+++ b/app/Views/client_deposit_list.php
@@ -1,7 +1,7 @@
 <script>
-    var pageSubTitle = 'Client Deposit - <?= $clientName[0]["client_name"]; ?>';
-    
-    var pageBackButton = '<a href="<?= base_url("client/list"); ?>" data-toggle="tooltip" data-placement="top" title="Back to Client List"><i class="mdi mdi-arrow-left" style="font-size: 17px;"></i></a>';
+    var pageHideMainNavTitle = true;
+    var pageTitle = 'Client Deposit - <?= $clientName[0]["client_name"]; ?>';
+    var pageBackButton = '<a href="<?= base_url("client/list"); ?>" class="topbar-icon-btn" data-toggle="tooltip" data-placement="top" title="Back to Client List" aria-label="Back to Client List"><i class="ri-arrow-left-s-line"></i></a>';
 </script>
 <div class="row" id="client_list">
     <div class="col-12">
diff --git a/app/Views/client_list.php b/app/Views/client_list.php
index 670d1111..ebf4c85f 100755
--- a/app/Views/client_list.php
+++ b/app/Views/client_list.php
@@ -67,6 +67,23 @@ table.dataTable thead th {
 
 .dataTables_length label {height: 21px !important;}
 
+#tickets-table .btn-group.dropdown,
+#tickets-table .dropdown {
+    position: relative;
+}
+
+#tickets-table .dropdown-menu {
+    z-index: 30000 !important;
+    max-height: 170px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+}
+
+#tickets-table .dropdown-menu.show {
+    z-index: 30000 !important;
+}
+
 
 
 
@@ -408,6 +425,40 @@ $('#toggleButtons').on('change', function() {
     
 }) 
 
+// Client list specific guard: keep action menu above table header
+// and always show from the top (prevents first item from appearing hidden).
+$(document).on('show.bs.dropdown', '#tickets-table tbody .dropdown', function () {
+    var $dd = $(this);
+    var $menu = $dd.children('.dropdown-menu');
+    var $row = $dd.closest('tr');
+    var $tbodyRows = $row.closest('tbody').children('tr:visible');
+    var $toggle = $dd.children('[data-toggle="dropdown"]').first();
+    var toggleEl = $toggle[0];
+
+    $dd.closest('.card-body').css('overflow', 'visible');
+    $dd.closest('.table-responsive').css('overflow', 'visible');
+
+    if (toggleEl && toggleEl.getClientRects().length) {
+        var rect = toggleEl.getBoundingClientRect();
+        var below = Math.max(0, window.innerHeight - rect.bottom - 8);
+        var above = Math.max(0, rect.top - 8);
+        var menuHeight = ($menu.outerHeight() || 150);
+        var openUp = (below < menuHeight && above > below);
+        $dd.toggleClass('dropup', openUp);
+    }
+
+    if ($menu.length) {
+        $menu.css('z-index', '30000');
+        $menu.scrollTop(0);
+    }
+});
+
+$(document).on('hidden.bs.dropdown', '#tickets-table tbody .dropdown', function () {
+    var $dd = $(this);
+    $dd.removeClass('dropup');
+    $dd.children('.dropdown-menu').scrollTop(0).css('z-index', '');
+});
+
     function renderRows(incomingData) {
         
         let actualList = [];
diff --git a/app/Views/client_onboarding.php b/app/Views/client_onboarding.php
index 96697d78..bd97277a 100755
--- a/app/Views/client_onboarding.php
+++ b/app/Views/client_onboarding.php
@@ -272,8 +272,9 @@
         <div class="card">
             <div class="card-body">
                 <script>
-                        var pageSubTitle = 'Client Onboarding <span id="client_heading"><?php if (isset($client)) { echo ' - ' . addslashes($client['client_name']); } ?></span>';
-                        var pageBackButton = '<a href="<?= base_url("client/list"); ?>" aria-label="Back to list"><i class="mdi mdi-arrow-left" style="font-size: 17px;"></i></a>';
+                        var pageHideMainNavTitle = true;
+                        var pageTitle = 'Client Onboarding <span id="client_heading"><?php if (isset($client)) { echo ' - ' . addslashes($client['client_name']); } ?></span>';
+                        var pageBackButton = '<a href="<?= base_url("client/list"); ?>" class="topbar-icon-btn" data-toggle="tooltip" data-placement="top" title="Back" aria-label="Back to list"><i class="ri-arrow-left-s-line"></i></a>';
                 </script>
                 <!-- <div class="row" style="padding-bottom: 10px;">
                     <div class="col-6" style="align-self: center;">
@@ -296,7 +297,7 @@
                         </li>
                         <li class="nav-item">
                             <a href="#general-q-tab" data-toggle="tab" aria-expanded="false"
-                                class="nav-link px-3 py-2 active" id="general_tab">
+                                class="nav-link px-3 py-2 active-tab active" id="general_tab">
                                 <span class="mr-1"><i class="mdi mdi-contacts"></i></span>
                                 <span class="d-none d-sm-inline-block">General</span>
                             </a>
diff --git a/app/Views/errors/403.php b/app/Views/errors/403.php
new file mode 100755
index 00000000..79344fe8
--- /dev/null
+++ b/app/Views/errors/403.php
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+    <meta charset="utf-8" />
+    <title><?= isset($page_name) ? $page_name : 'NHance'; ?></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta content="" name="description" />
+    <meta content="NHANCE" name="NHANCE" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+    <!-- App favicon -->
+    <link rel="shortcut icon" href="<?= base_url()."public"; ?>/assets/images/Nhance_Favi.svg">
+
+
+    <style>
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
+
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    body {
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: 'Poppins', sans-serif;
+        color: #103245;
+        background-color: #ffffff;
+        background-image: radial-gradient(circle at 0 0, rgba(87, 233, 255, 0.16) 0, rgba(87, 233, 255, 0.16) 180px, transparent 180px), radial-gradient(circle at 100% 100%, rgba(87, 233, 255, 0.16) 0, rgba(87, 233, 255, 0.16) 220px, transparent 220px);
+        padding: 24px;
+    }
+
+    .error-wrapper {
+        width: 100%;
+        max-width: 900px;
+        text-align: center;
+    }
+
+    .error-image {
+        width: min(100%, 560px);
+        height: auto;
+        display: block;
+        margin: 0 auto 10px auto;
+    }
+
+    .error-title {
+        font-size: clamp(34px, 3.8vw, 54px);
+        line-height: 1.2;
+        letter-spacing: 0.02em;
+        margin-bottom: 10px;
+        font-weight: 700;
+        text-transform: uppercase;
+        color: #0f2f44;
+    }
+
+    .error-subtitle {
+        font-size: clamp(15px, 1.4vw, 32px);
+        color: #415b69;
+        margin-bottom: 24px;
+        font-weight: 400;
+    }
+
+    .go-back-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 142px;
+        height: 48px;
+        border: 0;
+        border-radius: 10px;
+        background: #00a9c5;
+        color: #ffffff;
+        font-size: 16px;
+        font-weight: 600;
+        text-decoration: none;
+        cursor: pointer;
+        transition: transform 0.2s ease, background-color 0.2s ease;
+    }
+
+    .go-back-btn:hover {
+        background: #008ea6;
+        transform: translateY(-1px);
+    }
+
+    .go-back-btn:focus-visible {
+        outline: 3px solid rgba(0, 169, 197, 0.35);
+        outline-offset: 2px;
+    }
+
+    @media screen and (max-width: 640px) {
+        body {
+            padding: 20px;
+            background-image: radial-gradient(circle at 0 0, rgba(87, 233, 255, 0.12) 0, rgba(87, 233, 255, 0.12) 120px, transparent 120px), radial-gradient(circle at 100% 100%, rgba(87, 233, 255, 0.12) 0, rgba(87, 233, 255, 0.12) 140px, transparent 140px);
+        }
+
+        .error-image {
+            margin-bottom: 20px;
+        }
+
+        .error-subtitle {
+            margin-bottom: 24px;
+        }
+    }
+    </style>
+
+</head>
+
+
+<body>
+    <main class="error-wrapper">
+        <img class="error-image" src="<?= base_url()."public"; ?>/assets/images/errors/403_illustration.jpeg" alt="403 access denied">
+        <h1 class="error-title">ACCESS DENIED</h1>
+        <p class="error-subtitle">
+            <?= isset($message) && !empty($message) ? $message : "You don't have permission to access this page." ?>
+        </p>
+        <a class="go-back-btn" href="javascript:history.back()">Go Back</a>
+    </main>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/app/Views/errors/404.php b/app/Views/errors/404.php
index 69c6d42e..7bb7897f 100755
--- a/app/Views/errors/404.php
+++ b/app/Views/errors/404.php
@@ -15,7 +15,7 @@
 
 
     <style>
-    @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
 
     * {
         margin: 0;
@@ -24,134 +24,86 @@
     }
 
     body {
-        position: relative;
+        min-height: 100vh;
         display: flex;
-        justify-content: center;
         align-items: center;
-        height: 100vh;
-        background: #22232e;
+        justify-content: center;
         font-family: 'Poppins', sans-serif;
+        color: #103245;
+        background-color: #ffffff;
+        background-image: radial-gradient(circle at 0 0, rgba(87, 233, 255, 0.16) 0, rgba(87, 233, 255, 0.16) 180px, transparent 180px), radial-gradient(circle at 100% 100%, rgba(87, 233, 255, 0.16) 0, rgba(87, 233, 255, 0.16) 220px, transparent 220px);
+        padding: 24px;
     }
 
-    a {
-        text-decoration: none;
-    }
-
-    ul {
-        list-style: disc;
-        color: #e0ffff;
-    }
-
-    section {
+    .error-wrapper {
         width: 100%;
+        max-width: 900px;
+        text-align: center;
     }
 
-    .container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: row;
-        column-gap: 20px;
-    }
-
-    .container img {
-        width: 420px;
-    }
-
-    .text {
+    .error-image {
+        width: min(100%, 560px);
+        height: auto;
         display: block;
-        padding: 40px 40px;
-        width: 450px;
+        margin: 0 auto 10px auto;
     }
 
-    .text h1 {
-        color: #00c2cb;
-        font-size: 35px;
+    .error-title {
+        font-size: clamp(34px, 3.8vw, 54px);
+        line-height: 1.2;
+        letter-spacing: 0.02em;
+        margin-bottom: 10px;
         font-weight: 700;
-        margin-bottom: 15px;
+        text-transform: uppercase;
+        color: #0f2f44;
     }
 
-    .text p {
-        font-size: 15px;
-        color: #e0ffff;
-        margin-bottom: 15px;
-        line-height: 1.5rem;
-        margin-bottom: 15px;
+    .error-subtitle {
+        font-size: clamp(15px, 1.4vw, 32px);
+        color: #415b69;
+        margin-bottom: 24px;
+        font-weight: 400;
     }
 
-    .text .input-box {
-        position: relative;
-        display: flex;
-        width: 100%;
-    }
-
-    .input-box input {
-        width: 85%;
-        height: 40px;
-        padding: 5px 15px;
-        font-family: 'Jost', sans-serif;
-        font-size: 16px;
-        color: #22232e;
-        border-radius: 5px 0px 0px 5px;
-        border: 2px solid #42455a;
-        outline: none;
-    }
-
-    .input-box button {
-        display: flex;
-        width: 15%;
-        border: 1px solid #004958;
-        border-radius: 0px 5px 5px 0px;
-        background: #004958;
-        color: #e0ffff;
-        font-size: 22px;
+    .go-back-btn {
+        display: inline-flex;
         align-items: center;
         justify-content: center;
+        min-width: 142px;
+        height: 48px;
+        border: 0;
+        border-radius: 10px;
+        background: #00a9c5;
+        color: #ffffff;
+        font-size: 16px;
+        font-weight: 600;
+        text-decoration: none;
         cursor: pointer;
+        transition: transform 0.2s ease, background-color 0.2s ease;
     }
 
-    .menu {
-        display: flex;
-        flex-direction: column;
-        margin-top: 15px;
-        margin-left: 30px;
+    .go-back-btn:hover {
+        background: #008ea6;
+        transform: translateY(-1px);
     }
 
-    .menu li a {
-        display: flex;
-        font-size: 1rem;
-        color: #00c2cb;
-        transition: 0.1s;
+    .go-back-btn:focus-visible {
+        outline: 3px solid rgba(0, 169, 197, 0.35);
+        outline-offset: 2px;
     }
 
-    @media screen and (max-width:600px) {
-        .container {
-            display: flex;
-            flex-direction: column-reverse;
+    @media screen and (max-width: 640px) {
+        body {
+            padding: 20px;
+            background-image: radial-gradient(circle at 0 0, rgba(87, 233, 255, 0.12) 0, rgba(87, 233, 255, 0.12) 120px, transparent 120px), radial-gradient(circle at 100% 100%, rgba(87, 233, 255, 0.12) 0, rgba(87, 233, 255, 0.12) 140px, transparent 140px);
         }
 
-        .text,
-        .image {
-            width: 100%;
+        .error-image {
+            margin-bottom: 20px;
         }
 
-        .container {
-            min-width: 200px;
-            padding: 40px 0px;
-        }
-
-        .text {
-            display: block;
-            width: 100%;
-            padding: 20px 40px;
-        }
-
-        .image {
-            display: flex;
-            width: 200px;
-            align-self: center;
-            justify-content: center;
-            margin: auto;
+        .error-subtitle {
+            margin-bottom: 24px;
         }
     }
     </style>
@@ -160,16 +112,14 @@
 
 
 <body>
-    <section>
-        <div class="container">
-            <div class="text" style="text-align: center;">
-                <h1><?= isset($message) && !empty($message) ? $message : '404 PAGE NOT FOUND' ?></h1>
-            </div>
-            <div><img class="image" src="https://omjsblog.files.wordpress.com/2023/07/errorimg.png" alt=""></div>
-        </div>
-        </div>
-    </section>
-
+    <main class="error-wrapper">
+        <img class="error-image" src="<?= base_url()."public"; ?>/assets/images/errors/404_illustration.jpg" alt="404 page not found illustration">
+        <h1 class="error-title">PAGE NOT FOUND</h1>
+        <p class="error-subtitle">
+            <?= isset($message) && !empty($message) ? $message : "Sorry, the page you're looking for doesn't exist or has been moved." ?>
+        </p>
+        <a class="go-back-btn" href="javascript:history.back()">Go Back</a>
+    </main>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/app/Views/errors/404_old.php b/app/Views/errors/404_old.php
new file mode 100755
index 00000000..69c6d42e
--- /dev/null
+++ b/app/Views/errors/404_old.php
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+    <meta charset="utf-8" />
+    <title><?= isset($page_name) ? $page_name : 'NHance'; ?></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta content="" name="description" />
+    <meta content="NHANCE" name="NHANCE" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+    <!-- App favicon -->
+    <link rel="shortcut icon" href="<?= base_url()."public"; ?>/assets/images/Nhance_Favi.svg">
+
+
+    <style>
+    @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    body {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        background: #22232e;
+        font-family: 'Poppins', sans-serif;
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    ul {
+        list-style: disc;
+        color: #e0ffff;
+    }
+
+    section {
+        width: 100%;
+    }
+
+    .container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: row;
+        column-gap: 20px;
+    }
+
+    .container img {
+        width: 420px;
+    }
+
+    .text {
+        display: block;
+        padding: 40px 40px;
+        width: 450px;
+    }
+
+    .text h1 {
+        color: #00c2cb;
+        font-size: 35px;
+        font-weight: 700;
+        margin-bottom: 15px;
+    }
+
+    .text p {
+        font-size: 15px;
+        color: #e0ffff;
+        margin-bottom: 15px;
+        line-height: 1.5rem;
+        margin-bottom: 15px;
+    }
+
+    .text .input-box {
+        position: relative;
+        display: flex;
+        width: 100%;
+    }
+
+    .input-box input {
+        width: 85%;
+        height: 40px;
+        padding: 5px 15px;
+        font-family: 'Jost', sans-serif;
+        font-size: 16px;
+        color: #22232e;
+        border-radius: 5px 0px 0px 5px;
+        border: 2px solid #42455a;
+        outline: none;
+    }
+
+    .input-box button {
+        display: flex;
+        width: 15%;
+        border: 1px solid #004958;
+        border-radius: 0px 5px 5px 0px;
+        background: #004958;
+        color: #e0ffff;
+        font-size: 22px;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+    }
+
+    .menu {
+        display: flex;
+        flex-direction: column;
+        margin-top: 15px;
+        margin-left: 30px;
+    }
+
+    .menu li a {
+        display: flex;
+        font-size: 1rem;
+        color: #00c2cb;
+        transition: 0.1s;
+    }
+
+    @media screen and (max-width:600px) {
+        .container {
+            display: flex;
+            flex-direction: column-reverse;
+        }
+
+        .text,
+        .image {
+            width: 100%;
+        }
+
+        .container {
+            min-width: 200px;
+            padding: 40px 0px;
+        }
+
+        .text {
+            display: block;
+            width: 100%;
+            padding: 20px 40px;
+        }
+
+        .image {
+            display: flex;
+            width: 200px;
+            align-self: center;
+            justify-content: center;
+            margin: auto;
+        }
+    }
+    </style>
+
+</head>
+
+
+<body>
+    <section>
+        <div class="container">
+            <div class="text" style="text-align: center;">
+                <h1><?= isset($message) && !empty($message) ? $message : '404 PAGE NOT FOUND' ?></h1>
+            </div>
+            <div><img class="image" src="https://omjsblog.files.wordpress.com/2023/07/errorimg.png" alt=""></div>
+        </div>
+        </div>
+    </section>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/app/Views/file_list.php b/app/Views/file_list.php
index ca52b04d..759cdba6 100755
--- a/app/Views/file_list.php
+++ b/app/Views/file_list.php
@@ -220,6 +220,7 @@
                     <input type="hidden" id="file_upload_actions" name="upload-action-type">
                     <input type="file" id="fileInput" name="emplist" required
                         accept=" application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,application/vnd.oasis.opendocument.spreadsheet">
+                    <small class="text-muted d-block">Allowed: XLS, XLSX. Size : 25MB Dimension : 100 X 100</small>
                     <button type="submit" class="btn btn-primary">Upload</button>
                 </form>
             </div>
diff --git a/app/Views/hr_file_upload.php b/app/Views/hr_file_upload.php
index 51f008b4..62979743 100644
--- a/app/Views/hr_file_upload.php
+++ b/app/Views/hr_file_upload.php
@@ -1,9 +1,57 @@
 <style>
+    .table th,
+    .table td {
+        padding: 8px;
+    }
+    table.dataTable tbody td {
+        padding: 4px 4px !important;
+    }
     .select2-container .select2-selection--multiple .select2-selection__choice {
         padding: 5px 7px 5px 0 !important;
         color: #000000;
     }
     .dataTables_length label {height: 21px !important;}
+    #hr_tickets_table {
+        width: 100% !important;
+    }
+    #hr_tickets_table thead th {
+        white-space: nowrap;
+        vertical-align: middle;
+    }
+    #hr_tickets_table_wrapper .dataTables_filter {
+        margin-bottom: 12px;
+    }
+    #hr_tickets_table_wrapper .datatable-search-wrapper {
+        width: auto !important;
+    }
+    #hr_tickets_table_wrapper .dataTables_filter input {
+        width: 220px !important;
+        background: #F0F0F0;
+        border: none;
+        border-radius: 8px;
+        padding-right: 34px !important;
+    }
+    #hr_tickets_table_wrapper .datatable-search-icon,
+    #hr_tickets_table_wrapper .datatable-clear-icon {
+        right: 11px !important;
+    }
+    #hr_tickets_table_wrapper .dt-buttons {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+    }
+    #hr_tickets_table_wrapper .dt-buttons .app-btn-secondary,
+    #hr_tickets_table_wrapper .dt-buttons .btn-secondary {
+        border-radius: 10px;
+    }
+    #hr_tickets_table_wrapper .dataTables_scrollHeadInner,
+    #hr_tickets_table_wrapper .dataTables_scrollHeadInner table,
+    #hr_tickets_table_wrapper .dataTables_scrollBody table {
+        width: 100% !important;
+    }
+    #hr_tickets_table tbody tr:hover {
+        background-color: #e0e0e0;
+    }
 
 </style>
 
@@ -117,7 +165,8 @@
                 </div>
 
             </div>
-            <table data-custom-table-css="table" class="table table-hover m-0 table-centered dt-responsive w-100" cellspacing="0"
+            <div class="table-responsive">
+            <table data-custom-table-css="table" class="table mb-0 nowrap w-100 table-centered" cellspacing="0"
                 id="hr_tickets_table">
                 <thead class="bg-light">
                     <tr>
@@ -155,6 +204,7 @@
 
                 </tbody>
             </table>
+            </div>
         </div>
     </div>
 </div><!-- end col -->
@@ -180,6 +230,7 @@
                     <input type="hidden" id="hr_file_upload_actions" name="upload-action-type">
                     <input type="file" id="fileInput" name="emplist" required
                         accept=" application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,application/vnd.oasis.opendocument.spreadsheet">
+                    <small class="text-muted d-block">Allowed: XLS, XLSX. Size : 25MB Dimension : 100 X 100</small>
                     <button type="submit" class="btn btn-primary">Upload</button>
                 </form>
             </div>
@@ -276,13 +327,26 @@
                     tbody = `<tr><td colspan="9" class="text-center">No records found</td></tr>`;
                 }
 
-                $("#hr_tickets_table tbody").html(tbody);
+                if (window.hrFileTableInstance) {
+                    window.hrFileTableInstance.clear();
+                    $("#hr_tickets_table tbody").html(tbody);
+                    window.hrFileTableInstance.rows.add($("#hr_tickets_table tbody tr")).draw();
+                    window.hrFileTableInstance.columns.adjust().draw(false);
+                } else {
+                    $("#hr_tickets_table tbody").html(tbody);
+                }
             },
             error: function (xhr, status, error) {
                 console.error("Error:", error);
-                $("#hr_tickets_table tbody").html(
-                    `<tr><td colspan="9" class="text-center text-danger">Something went wrong</td></tr>`
-                );
+                const errorRow = `<tr><td colspan="9" class="text-center text-danger">Something went wrong</td></tr>`;
+                if (window.hrFileTableInstance) {
+                    window.hrFileTableInstance.clear();
+                    $("#hr_tickets_table tbody").html(errorRow);
+                    window.hrFileTableInstance.rows.add($("#hr_tickets_table tbody tr")).draw();
+                    window.hrFileTableInstance.columns.adjust().draw(false);
+                } else {
+                    $("#hr_tickets_table tbody").html(errorRow);
+                }
             },
         });
         });
@@ -357,8 +421,27 @@
     // ----------------------------------------------------------------------------------------------
 
     // for datatable 
+    window.hrFileTableInstance = window.hrFileTableInstance || null;
+    function fixHrUploadTableHeaderWidth() {
+        const $wrapper = $('#hr_tickets_table_wrapper');
+        if (!$wrapper.length) {
+            return;
+        }
+        $wrapper.find('.dataTables_scrollHeadInner, .dataTables_scrollHeadInner table, .dataTables_scrollBody table')
+            .css('width', '100%');
+
+        if (window.hrFileTableInstance) {
+            window.hrFileTableInstance.columns.adjust().draw(false);
+        }
+    }
+
     $(document).ready(function() {
-        $('#hr_tickets_table').DataTable({
+        if (window.hrFileTableInstance) {
+            return;
+        }
+        window.hrFileTableInstance = $('#hr_tickets_table').DataTable({
+            scrollX: false,
+            autoWidth: false,
             // dom: "<'row'<'col-12 d-flex justify-content-between align-items-center'<'datatable-search dataTables_filter'f><'datatable-buttons dt-buttons'B>>>" +
             //     "<'row'<'col-sm-12'tr>>" +
             //     "<'row'<'col-sm-5'i><'col-sm-7'p>>",
@@ -396,7 +479,20 @@
                     emptyTable: '<div class="text-center text-muted">No Data found</div>'
             },
             paging: true,
+            ordering: false,
         });
+        $('.dataTables_filter input').css({
+            'background': '#F0F0F0',
+            'border': 'none',
+            'border-radius': '8px',
+            'padding-right': '34px'
+        });
+
+        setTimeout(fixHrUploadTableHeaderWidth, 0);
+    });
+
+    $(document).on('shown.bs.tab shown.bs.collapse shown.bs.modal', function() {
+        setTimeout(fixHrUploadTableHeaderWidth, 50);
     });
 
     //for initialize the file upload for the files table
diff --git a/app/Views/insurer_branch.php b/app/Views/insurer_branch.php
index e5456255..aea9c8c6 100755
--- a/app/Views/insurer_branch.php
+++ b/app/Views/insurer_branch.php
@@ -10,6 +10,17 @@
     margin-top: 5px;         
     color: #6c757d;         
 }
+
+.field-error {
+    color: #dc3545;
+    font-size: 12px;
+    margin-top: 4px;
+    display: block;
+}
+
+.is-invalid {
+    border-color: #dc3545 !important;
+}
 </style>
 <!-- Optional CSS -->
 <style>
@@ -76,13 +87,13 @@
       <div class="modal-header flex-column">
         <div class="d-flex w-100 justify-content-between align-items-center">
           <h4 class="modal-title mb-0" id="modalLabel">New Branch</h4>
-          <button type="button" class="close js-branch-modal-close" data-dismiss="modal" data-bs-dismiss="modal" aria-hidden="true">×</button>
+          <button type="button" class="close js-branch-modal-close" data-dismiss="modal" data-bs-dismiss="modal" aria-hidden="true" onclick="hideBranchModal()">×</button>
         </div>
       </div>
       
       <!-- Modal Body -->
       <div class="modal-body">
-        <form id="insurer_branch_form" role="form" class="parsley-examples" method="post"  action="" enctype="multipart/form-data">
+        <form id="insurer_branch_form" role="form" class="parsley-examples" novalidate method="post"  action="" enctype="multipart/form-data">
             <input type="hidden" class="form-control" value="<?= csrf_hash() ?>" name="<?= csrf_token() ?>" />    
             <input type="hidden" name="PrimaryKey" id="insurer_Branch_PrimaryKey"  />
             <input type="hidden" name="insurer_id" id="insurer_id_branch" value="<?= isset($insurer['id']) ? $insurer['id'] : '' ?>"/>
@@ -143,16 +154,16 @@
                     </div>
                     <div class="form-group col-md-6">
                     <label for="pincode">Pincode <span class="text-danger">*</span></label>
-                    <input type="text" class="form-control" id="pincode" placeholder="Enter Pincode" name="pincode" required>
+                    <input type="text" class="form-control" id="pincode" placeholder="Enter Pincode" name="pincode" required maxlength="6" inputmode="numeric">
                     </div>
                 </div>
 
                 <!-- Submit / Cancel -->
                     <div class="form-row">
                     <!-- <div class="form-group col-md-12 mt-2"> -->
-                    <div style="margin-top: 85px;">
+                    <div class="w-100 d-flex justify-content-end" style="margin-top: 85px;">
                         <button type="submit" class="btn btn-primary mr-2" id="btnSubmit">Submit</button>
-                        <button type="button" class="btn app-btn-outline-secondary btnBack" id="btnBack" data-dismiss="modal" data-bs-dismiss="modal" aria-hidden="true">Cancel</button>
+                        <button type="button" class="btn app-btn-outline-secondary btnBack" id="btnBack" data-dismiss="modal" data-bs-dismiss="modal" aria-hidden="true" onclick="hideBranchModal()">Cancel</button>
                     </div>
                     <!-- </div> -->
                     </div>
@@ -326,46 +337,63 @@
 
     function hideBranchModal() {
         var $m = $('#insurerBranchModal');
-        if (typeof jQuery !== 'undefined' && jQuery.fn && typeof jQuery.fn.modal === 'function') {
-            $m.modal('hide');
+        var modalEl = document.getElementById('insurerBranchModal');
+        if (!modalEl) {
             return;
         }
-        var modalEl = document.getElementById('insurerBranchModal');
-        if (window.bootstrap && bootstrap.Modal) {
-            if (typeof bootstrap.Modal.getOrCreateInstance === 'function') {
-                bootstrap.Modal.getOrCreateInstance(modalEl).hide();
-                return;
+
+        var closed = false;
+
+        try {
+            if (typeof jQuery !== 'undefined' && jQuery.fn && typeof jQuery.fn.modal === 'function') {
+                $m.modal('hide');
+                closed = true;
             }
-            if (typeof bootstrap.Modal.getInstance === 'function') {
-                var existing = bootstrap.Modal.getInstance(modalEl);
-                if (existing) {
-                    existing.hide();
-                    return;
+            if (!closed && window.bootstrap && bootstrap.Modal && modalEl) {
+                if (typeof bootstrap.Modal.getOrCreateInstance === 'function') {
+                    bootstrap.Modal.getOrCreateInstance(modalEl).hide();
+                    closed = true;
+                }
+                if (!closed && typeof bootstrap.Modal.getInstance === 'function') {
+                    var existing = bootstrap.Modal.getInstance(modalEl);
+                    if (existing) {
+                        existing.hide();
+                        closed = true;
+                    }
+                }
+                if (!closed) {
+                    (new bootstrap.Modal(modalEl)).hide();
+                    closed = true;
                 }
             }
-            try {
-                (new bootstrap.Modal(modalEl)).hide();
-            } catch (e) {}
+        } catch (e) {
+            console.error(branchDebugPrefix + ' hide modal failed; forcing close', e);
+        }
+
+        // Guarantee immediate close even if modal plugin state is broken.
+        if (!closed || modalEl.classList.contains('show')) {
+            forceHideBranchModal();
         }
     }
 
-    function resetInsurerBranchFormState() {
-        var $form = $('#insurer_branch_form');
-        if ($form.length && $form[0] && typeof $form[0].reset === 'function') {
-            $form[0].reset();
+    function forceHideBranchModal() {
+        var modalEl = document.getElementById('insurerBranchModal');
+        if (!modalEl) {
+            return;
         }
 
-        if ($form.length && typeof $form.parsley === 'function') {
-            try {
-                $form.parsley().reset();
-            } catch (e) {}
-        }
+        modalEl.classList.remove('show');
+        modalEl.style.display = 'none';
+        modalEl.setAttribute('aria-hidden', 'true');
+        modalEl.removeAttribute('aria-modal');
+        document.body.classList.remove('modal-open');
+        document.body.style.removeProperty('padding-right');
 
-        contactCount = 1;
-        $('#container').empty();
-        $('#contact_1_wrapper input').val('');
-        $('#insurer_Branch_PrimaryKey').val('');
-        toggleAddButton();
+        $('.modal-backdrop').remove();
+    }
+
+    function setBranchModalTitle(title) {
+        $('#modalLabel').text(title || 'New Branch');
     }
 
     function renderBranchRows(rows) {
@@ -385,6 +413,121 @@
         $('#insurer_branch_list').html(html);
     }
 
+    function getFieldKey($field) {
+        var name = ($field.attr('name') || '').trim();
+        var id = ($field.attr('id') || '').trim();
+
+        if (name === 'name[]') return 'contact_name';
+        if (name === 'designation[]') return 'designation';
+        if (name === 'email[]') return 'email';
+        if (name === 'mobile[]') return 'mobile';
+
+        if (id) return id;
+        return name.replace(/\[\]$/, '');
+    }
+
+    function getErrorMessage(key, value) {
+        var v = (value || '').toString().trim();
+        var alphaHyphenSpace = /^[a-zA-Z\s\-]+$/;
+        var alphaNumHyphenSpace = /^[a-zA-Z0-9\s\-]+$/;
+        var contactNamePattern = /^[a-zA-Z0-9\s_-]+$/;
+        var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+        switch (key) {
+            case 'branch_name':
+                return '';
+            case 'branch_code':
+                return '';
+            case 'address1':
+                return '';
+            case 'state':
+                if (!alphaHyphenSpace.test(v)) return 'State name can only contain letters, spaces, and hyphens.';
+                return '';
+            case 'district':
+                if (!alphaNumHyphenSpace.test(v)) return 'District can contain letters, numbers, spaces, and hyphens.';
+                return '';
+            case 'branch_city':
+                if (!alphaNumHyphenSpace.test(v)) return 'City can contain letters, numbers, spaces, and hyphens.';
+                return '';
+            case 'pincode':
+                if (!/^\d+$/.test(v)) return 'Pincode must be digits only.';
+                if (!/^\d{6}$/.test(v)) return 'Pincode must be exactly 6 digits.';
+                return '';
+            case 'contact_name':
+                if (v.length < 2) return 'Contact name must be at least 2 characters';
+                if (!contactNamePattern.test(v)) return 'Contact name is invalid Format';
+                return '';
+            case 'designation':
+                return '';
+            case 'email':
+                if (!emailPattern.test(v)) return 'Please enter a valid email format (e.g., name@domain.com).';
+                return '';
+            case 'mobile':
+                if (!/^\d+$/.test(v)) return 'Mobile must contain only digits';
+                if (!/^\d{10}$/.test(v)) return 'Mobile number must be exactly 10 digits';
+                return '';
+            default:
+                return '';
+        }
+    }
+
+    function getErrorElement($field) {
+        var $next = $field.next('.field-error');
+        if ($next.length) return $next;
+
+        var $error = $('<small class="field-error"></small>');
+        $field.after($error);
+        return $error;
+    }
+
+    function validateField($field) {
+        if (!$field || !$field.length) return true;
+
+        var key = getFieldKey($field);
+        var value = $field.val();
+        if (key === 'state') {
+            var selectedText = ($field.find('option:selected').text() || '').trim();
+            value = (selectedText === 'Select State') ? '' : selectedText;
+        }
+        var message = getErrorMessage(key, value);
+        var $error = getErrorElement($field);
+
+        if (message) {
+            $field.addClass('is-invalid');
+            $error.text(message);
+            return false;
+        }
+
+        $field.removeClass('is-invalid');
+        $error.text('');
+        return true;
+    }
+
+    function validateInsurerBranchForm() {
+        var isValid = true;
+        var selectors = [
+            '#branch_name',
+            '#branch_code',
+            '#address1',
+            '#state',
+            '#district',
+            '#branch_city',
+            '#pincode',
+            'input[name="name[]"]',
+            'input[name="designation[]"]',
+            'input[name="email[]"]',
+            'input[name="mobile[]"]'
+        ];
+
+        $(selectors.join(',')).each(function () {
+            if (!validateField($(this))) {
+                isValid = false;
+            }
+        });
+
+        return isValid;
+    }
+
     function initBranchDataTable() {
         if ($.fn.DataTable.isDataTable('#branch-datatable')) {
             $('#branch-datatable').DataTable().destroy();
@@ -431,6 +574,7 @@
 
             insurer_branch_form_action = '<?= base_url("master/insurer/branch/create"); ?>';
             contactCount = 1;
+            setBranchModalTitle('New Branch');
 
             showBranchModal();
 
@@ -494,8 +638,18 @@
             }
         });
 
-        $('#insurerBranchModal').on('hidden.bs.modal', function () {
-            resetInsurerBranchFormState();
+        $(document).on('input change', '#insurer_branch_form input, #insurer_branch_form select', function () {
+            validateField($(this));
+        });
+
+        $(document).on('input', '#pincode', function () {
+            this.value = (this.value || '').replace(/\D/g, '').slice(0, 6);
+            validateField($(this));
+        });
+
+        $(document).on('input', 'input[name="mobile[]"]', function () {
+            this.value = (this.value || '').replace(/\D/g, '').slice(0, 10);
+            validateField($(this));
         });
     });
 
@@ -503,8 +657,32 @@
         if (e && typeof e.preventDefault === 'function') {
             e.preventDefault();
         }
+
+        var $fb = $('#insurer_branch_form');
+        if ($fb.length && $fb[0] && typeof $fb[0].reset === 'function') {
+            $fb[0].reset();
+        }
+
+        contactCount = 1
         hideBranchModal();
-    });
+        // $('#add_branch').hide();
+        // $('#branch_table').show();
+        // $('.btnBack').hide();
+        // $('#btnBranchAdd').show();
+
+        $('#branch_name').val('');
+        $('#branch_code').val('');
+        $('#state').val('');
+        $('#district').val('');
+        $('#branch_city').val('');
+
+        $('#name').val('');
+        $('#email').val('');
+        $('#mobile').val('');
+        $('#designation').val('');
+        $('#container').empty(); $('#contact_1_wrapper input').val('');
+        
+    })
 
     $(document).on('click', '.js-branch-modal-close', function(e){
         if (e && typeof e.preventDefault === 'function') {
@@ -517,7 +695,7 @@
     $("#insurer_branch_form").submit(function(events) {
         console.log(1, insurer_branch_form_action);
         events.preventDefault(); 
-        var isValid = $('#insurer_branch_form').parsley().validate();
+        var isValid = validateInsurerBranchForm();
         if (isValid) {
 
             var formData = new FormData($('#insurer_branch_form')[0]);
@@ -580,6 +758,7 @@
         $('#insurer_Branch_PrimaryKey').val(branch_id);
 
         insurer_branch_form_action = '<?= base_url("master/insurer/branch/edit"); ?>';
+        setBranchModalTitle('Edit Branch');
 
         console.log(insurer_branch_form_action)
 
diff --git a/app/Views/insurer_export_templete.php b/app/Views/insurer_export_templete.php
index ebc38a46..73d725e1 100755
--- a/app/Views/insurer_export_templete.php
+++ b/app/Views/insurer_export_templete.php
@@ -47,6 +47,21 @@
     #dynamic-form-container::-webkit-scrollbar-track {
         background-color: #f1f1f1; /* Background color of the scrollbar track */
     }
+
+    #template_modal {
+        padding-right: 0 !important;
+        z-index: 1060;
+    }
+
+    #template_modal.show {
+        display: flex !important;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .modal-backdrop {
+        z-index: 1050;
+    }
 </style>
 
 <div class="tab-pane fade" id="template-tab" style="padding-left: 25px;">
@@ -120,12 +135,12 @@
 
 <!-- Center modal content -->
 <div class="modal fade" id="template_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
-    aria-hidden="true" aria-modal="true" data-backdrop="static" style="padding-right: 15px">
-    <div class="modal-dialog modal-full-width">
+    aria-hidden="true" aria-modal="true" data-backdrop="static">
+    <div class="modal-dialog modal-full-width modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">
                 <h4 class="modal-title" id="myCenterModalLabel">Create Template</h4>
-                <button type="button" id="close_btn" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                <button type="button" id="close_btn" class="close js-template-modal-close" data-dismiss="modal" data-bs-dismiss="modal" aria-hidden="true" onclick="hideTemplateModal()">×</button>
             </div>
             <div class="modal-body">
             <form class="parsley-examples" method="post" id="templateForm" enctype="multipart/form-data">
@@ -260,27 +275,136 @@
 
 <script>
     var insurerTemplateDataTable = null;
+    var templateDebugPrefix = '[InsurerTemplate]';
 
     function showTemplateModal() {
+        var $modal = $('#template_modal');
         var modalEl = document.getElementById('template_modal');
+        if (!modalEl) {
+            return;
+        }
+
+        if (typeof jQuery !== 'undefined' && jQuery.fn && typeof jQuery.fn.modal === 'function') {
+            try {
+                $modal.modal('show');
+                setTimeout(function () {
+                    if (!$modal.hasClass('show') || !$modal.is(':visible')) {
+                        forceShowTemplateModal();
+                    }
+                }, 120);
+            } catch (e) {
+                console.error(templateDebugPrefix + ' jQuery.modal show failed:', e);
+                forceShowTemplateModal();
+            }
+            return;
+        }
+
         if (window.bootstrap && bootstrap.Modal) {
             if (typeof bootstrap.Modal.getOrCreateInstance === 'function') {
-                bootstrap.Modal.getOrCreateInstance(modalEl).show();
+                try {
+                    bootstrap.Modal.getOrCreateInstance(modalEl).show();
+                } catch (e) {
+                    console.error(templateDebugPrefix + ' bootstrap getOrCreateInstance show failed:', e);
+                    forceShowTemplateModal();
+                }
                 return;
             }
             if (typeof bootstrap.Modal.getInstance === 'function') {
                 var existing = bootstrap.Modal.getInstance(modalEl);
                 if (existing) {
-                    existing.show();
+                    try {
+                        existing.show();
+                    } catch (e) {
+                        console.error(templateDebugPrefix + ' bootstrap existing show failed:', e);
+                        forceShowTemplateModal();
+                    }
                     return;
                 }
             }
             try {
                 (new bootstrap.Modal(modalEl)).show();
                 return;
-            } catch (e) {}
+            } catch (e) {
+                console.error(templateDebugPrefix + ' bootstrap constructor show failed:', e);
+                forceShowTemplateModal();
+                return;
+            }
         }
-        $('#template_modal').modal('show');
+
+        forceShowTemplateModal();
+    }
+
+    function forceShowTemplateModal() {
+        var modalEl = document.getElementById('template_modal');
+        if (!modalEl) {
+            return;
+        }
+
+        modalEl.style.display = 'block';
+        modalEl.classList.add('show');
+        modalEl.removeAttribute('aria-hidden');
+        modalEl.setAttribute('aria-modal', 'true');
+        document.body.classList.add('modal-open');
+
+        if (!document.querySelector('.modal-backdrop')) {
+            var backdrop = document.createElement('div');
+            backdrop.className = 'modal-backdrop fade show';
+            document.body.appendChild(backdrop);
+        }
+    }
+
+    function hideTemplateModal() {
+        var $modal = $('#template_modal');
+        var modalEl = document.getElementById('template_modal');
+        if (!modalEl) {
+            return;
+        }
+
+        var closed = false;
+        try {
+            if (typeof jQuery !== 'undefined' && jQuery.fn && typeof jQuery.fn.modal === 'function') {
+                $modal.modal('hide');
+                closed = true;
+            }
+            if (!closed && window.bootstrap && bootstrap.Modal) {
+                if (typeof bootstrap.Modal.getOrCreateInstance === 'function') {
+                    bootstrap.Modal.getOrCreateInstance(modalEl).hide();
+                    closed = true;
+                }
+                if (!closed && typeof bootstrap.Modal.getInstance === 'function') {
+                    var existing = bootstrap.Modal.getInstance(modalEl);
+                    if (existing) {
+                        existing.hide();
+                        closed = true;
+                    }
+                }
+                if (!closed) {
+                    (new bootstrap.Modal(modalEl)).hide();
+                    closed = true;
+                }
+            }
+        } catch (e) {
+            console.error(templateDebugPrefix + ' hide modal failed:', e);
+        }
+
+        if (!closed || modalEl.classList.contains('show')) {
+            forceHideTemplateModal();
+        }
+    }
+
+    function forceHideTemplateModal() {
+        var modalEl = document.getElementById('template_modal');
+        if (!modalEl) {
+            return;
+        }
+
+        modalEl.classList.remove('show');
+        modalEl.style.display = 'none';
+        modalEl.setAttribute('aria-hidden', 'true');
+        modalEl.removeAttribute('aria-modal');
+        document.body.classList.remove('modal-open');
+        document.body.style.removeProperty('padding-right');
+        $('.modal-backdrop').remove();
     }
 
     function initInsurerTemplateDataTable() {
diff --git a/app/Views/insurer_onboarding.php b/app/Views/insurer_onboarding.php
index a999e8ce..b025d775 100755
--- a/app/Views/insurer_onboarding.php
+++ b/app/Views/insurer_onboarding.php
@@ -1,6 +1,7 @@
 <script>
-    var pageSubTitle = 'Insurer';
-    var pageBackButton = '<a href="#" onclick="history.back(); return false;" data-toggle="tooltip" data-placement="top" title="Back"><i class="mdi mdi-arrow-left" style="font-size: 17px;"></i></a>';
+    var pageHideMainNavTitle = true;
+    var pageTitle = 'Insurer';
+    var pageBackButton = '<a href="<?= base_url('master/insurer/list') ?>" class="topbar-icon-btn" data-toggle="tooltip" data-placement="top" title="Back" aria-label="Back"><i class="ri-arrow-left-s-line"></i></a>';
 </script>
 <div class="row" id="insurer_add">
     <div class="col-12">
diff --git a/app/Views/kyc_docs.php b/app/Views/kyc_docs.php
index 4fae8dca..4a1d81f3 100755
--- a/app/Views/kyc_docs.php
+++ b/app/Views/kyc_docs.php
@@ -12,12 +12,32 @@
 #table-kyc-docs_wrapper .datatable-clear-icon{
     right: 11px !important;
 }
+
+/* Unset position on datatables filter to fix alignment issues */
+#table-kyc-docs_wrapper div.dataTables_filter {
+  position: unset !important;
+}
+
+#kycdocsModal {
+    padding-right: 0 !important;
+    z-index: 1060;
+}
+
+#kycdocsModal.show {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-backdrop {
+    z-index: 1050;
+}
 </style>
 
 <div class="tab-pane fade" id="branch-tab">
     
     <div class="row float-right" style="padding-bottom: 10px;position: relative;right: 13px;">
-            <button type="button" id="btnBranchAdd" class="btn btn-primary waves-effect waves-light btn-sm"><span class="mdi mdi-plus-box-outline" aria-hidden="true" style="padding: 5px 10px;"></span>Add KYC Docs</button>                
+            <button type="button" id="btnKycDocsAdd" class="btn btn-primary waves-effect waves-light btn-sm"><span class="mdi mdi-plus-box-outline" aria-hidden="true" style="padding: 5px 10px;"></span>Add KYC Docs</button>                
     </div>
 
     <div class="table-responsive" id="branch_table" >
@@ -80,7 +100,7 @@
       <div class="modal-header flex-column">
         <div class="d-flex w-100 justify-content-between align-items-center">
           <h4 class="modal-title mb-0" id="modalLabel">KYC Docs</h4>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <button type="button" class="close js-kyc-docs-close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">×</span>
           </button>
         </div>
@@ -104,11 +124,11 @@
           </div>
 
           <!-- Form Actions -->
-          <div class="form-group text-right mb-0">
-            <button type="button" class="btn app-btn-outline-secondary  waves-effect btnBack" id="btnBack" data-dismiss="modal">
+          <div class="form-group d-flex justify-content-end mb-0" id="hide_smbt_btn">
+            <button type="button" class="btn app-btn-outline-secondary mr-2 waves-effect js-kyc-docs-cancel" data-bs-dismiss="modal">
               Cancel
             </button>
-            <button type="submit" class="btn btn-primary  waves-effect waves-light mr-1" id="btnSubmit">
+            <button type="submit" class="btn app-btn-secondary waves-effect waves-light" id="btnSubmit">
               Submit
             </button>
           </div>
@@ -124,101 +144,249 @@
 
 $(document).ready(function () {
 
-    var kyc_Docs_PrimaryKey = $('#kyc_type_id').val();
+    var kyc_Docs_PrimaryKey = $('#kyc_General_PrimaryKey').val();
     var kyc_docs_form_action = '';
     var kycDocsTable = null;
-    var myModal = new bootstrap.Modal(document.getElementById('kycdocsModal'));
-        myModal.hide();
+
+    var kycDocsDebugPrefix = '[KYCDocs]';
+
+    function resetKYCDocsForm() {
+        console.log(kycDocsDebugPrefix + ' resetKYCDocsForm() called.');
+        var $form = $('#kyc_docs_form');
+
+        // Reset the form fields
+        if ($form.length && typeof $form[0].reset === 'function') {
+            $form[0].reset();
+        }
+
+        // Reset Parsley validation state
+        if ($form.length && typeof $form.parsley === 'function') {
+            try {
+                $form.parsley().reset();
+            } catch (e) {
+                console.warn(kycDocsDebugPrefix + ' Could not reset parsley form.', e);
+            }
+        }
+
+        // Explicitly clear fields just in case .reset() fails or they are not part of the form
+        $('#file_name').val('');
+        $('#kyc_Docs_PrimaryKey').val('');
+    }
+
+    function normalizeKYCDocsRows(response) {
+        if (!response) return [];
+        if (Array.isArray(response)) return response;
+        if (Array.isArray(response.kyc_docs)) return response.kyc_docs;
+        if (Array.isArray(response.data)) return response.data;
+        if (response.data && Array.isArray(response.data.kyc_docs)) return response.data.kyc_docs;
+        return [];
+    }
+
+    function renderKYCDocsTableRows(rows) {
+        var html = '';
+        $.each(rows || [], function(index, item) {
+            var fileName = (item && (item.file_name || item.fileName || item.document_name || item.name)) || '';
+            var rowId = (item && (item.id || item.primarykey || item.PrimaryKey)) || '';
+            html += `
+                <tr>
+                    <td>${fileName}</td>
+                    <td>
+                        <a class="btnBranchEdit" data-id="${rowId}" href="#"><i data-id="${rowId}" class="mdi mdi-lead-pencil btnBranchEdit" style="font-size:18px;"></i></a>
+                        <a style="color:#02a8b5" data-id="${rowId}" onclick="removeKYCDocs(this)"><i data-id="${rowId}" class="mdi mdi-delete" style="font-size:18px;"></i></a>
+                    </td>
+                </tr>
+            `;
+        });
+        $('#kyc_docs_list').html(html);
+    }
+
+    window.forceHideKYCDocsModal = function () {
+        console.log(kycDocsDebugPrefix + ' forceHideKYCDocsModal() called.');
+        var modalEl = document.getElementById('kycdocsModal');
+        if (modalEl) {
+            modalEl.classList.remove('show');
+            modalEl.classList.remove('in');
+            modalEl.style.display = 'none';
+            modalEl.setAttribute('aria-hidden', 'true');
+            modalEl.removeAttribute('aria-modal');
+        }
+        document.body.classList.remove('modal-open');
+        document.body.style.removeProperty('padding-right');
+        $('.modal-backdrop').remove();
+        console.log(kycDocsDebugPrefix + ' forceHideKYCDocsModal() finished.');
+    };
+
+    window.forceShowKYCDocsModal = function () {
+        console.log(kycDocsDebugPrefix + ' forceShowKYCDocsModal() called.');
+        var modalEl = document.getElementById('kycdocsModal');
+        if (!modalEl) {
+            console.log(kycDocsDebugPrefix + ' Modal element not found. Aborting.');
+            return;
+        }
+
+        console.log(kycDocsDebugPrefix + ' Displaying modal element.');
+        modalEl.style.display = 'block';
+        modalEl.classList.add('show');
+        modalEl.removeAttribute('aria-hidden');
+        modalEl.setAttribute('aria-modal', 'true');
+        document.body.classList.add('modal-open');
+
+        if (!document.querySelector('.modal-backdrop')) {
+            console.log(kycDocsDebugPrefix + ' Creating and appending modal-backdrop.');
+            var backdrop = document.createElement('div');
+            backdrop.className = 'modal-backdrop fade show';
+            document.body.appendChild(backdrop);
+        } else {
+            console.log(kycDocsDebugPrefix + ' Modal-backdrop already exists.');
+        }
+        console.log(kycDocsDebugPrefix + ' forceShowKYCDocsModal() finished.');
+    };
+
+    window.showKYCDocsModal = function () {
+        console.log(kycDocsDebugPrefix + ' showKYCDocsModal() called.');
+        var $modal = $('#kycdocsModal');
+        var modalEl = document.getElementById('kycdocsModal');
+        try {
+            console.log(kycDocsDebugPrefix + ' Trying to show modal using jQuery/Bootstrap.');
+            if (typeof jQuery !== 'undefined' && jQuery.fn && typeof jQuery.fn.modal === 'function') {
+                console.log(kycDocsDebugPrefix + ' Using jQuery modal("show").');
+                $modal.modal('show');
+                console.log(kycDocsDebugPrefix + ' Setting timeout to check if modal is visible.');
+                setTimeout(function () {
+                    console.log(kycDocsDebugPrefix + ' Timeout check: Modal has "show" class:', $modal.hasClass('show'), 'Is visible:', $modal.is(':visible'));
+                    if (!$modal.hasClass('show') || !$modal.is(':visible')) {
+                        console.log(kycDocsDebugPrefix + ' Modal not visible after timeout, forcing show.');
+                        window.forceShowKYCDocsModal();
+                    }
+                }, 120);
+                console.log(kycDocsDebugPrefix + ' showKYCDocsModal() finished via jQuery path.');
+                return;
+            }
+            console.log(kycDocsDebugPrefix + ' jQuery modal not available. Checking for Bootstrap 5 API.');
+            if (window.bootstrap && bootstrap.Modal && modalEl) {
+                if (typeof bootstrap.Modal.getOrCreateInstance === 'function') {
+                    console.log(kycDocsDebugPrefix + ' Using bootstrap.Modal.getOrCreateInstance().show().');
+                    bootstrap.Modal.getOrCreateInstance(modalEl).show();
+                    console.log(kycDocsDebugPrefix + ' showKYCDocsModal() finished via BS5 getOrCreateInstance.');
+                    return;
+                }
+                if (typeof bootstrap.Modal.getInstance === 'function') {
+                    console.log(kycDocsDebugPrefix + ' Using bootstrap.Modal.getInstance().');
+                    var existing = bootstrap.Modal.getInstance(modalEl);
+                    if (existing) {
+                        console.log(kycDocsDebugPrefix + ' Existing BS5 instance found, calling show().');
+                        existing.show();
+                        console.log(kycDocsDebugPrefix + ' showKYCDocsModal() finished via existing BS5 instance.');
+                        return;
+                    }
+                }
+                console.log(kycDocsDebugPrefix + ' Using new bootstrap.Modal().show().');
+                (new bootstrap.Modal(modalEl)).show();
+                console.log(kycDocsDebugPrefix + ' showKYCDocsModal() finished via new BS5 instance.');
+                return;
+            }
+        } catch (e) {
+            console.error('[KYCDocs] Failed to show modal:', e);
+            console.log(kycDocsDebugPrefix + ' Falling back to forceShowKYCDocsModal().');
+            window.forceShowKYCDocsModal();
+            return;
+        }
+        console.log(kycDocsDebugPrefix + ' No standard modal methods found, falling back to forceShowKYCDocsModal().');
+        window.forceShowKYCDocsModal();
+    };
+
+    window.hideKYCDocsModal = function () {
+        console.log(kycDocsDebugPrefix + ' hideKYCDocsModal() called.');
+        var $modal = $('#kycdocsModal');
+        var modalEl = document.getElementById('kycdocsModal');
+        if (!modalEl) {
+            console.log(kycDocsDebugPrefix + ' Modal element not found. Aborting.');
+            return;
+        }
+
+        var closed = false;
+        try {
+            console.log(kycDocsDebugPrefix + ' Trying to hide modal using jQuery/Bootstrap.');
+            if (typeof jQuery !== 'undefined' && jQuery.fn && typeof jQuery.fn.modal === 'function') {
+                console.log(kycDocsDebugPrefix + ' Using jQuery modal("hide").');
+                $modal.modal('hide');
+                closed = true;
+            }
+            if (!closed && window.bootstrap && bootstrap.Modal && modalEl) {
+                console.log(kycDocsDebugPrefix + ' jQuery modal not available/failed. Checking for Bootstrap 5 API.');
+                if (typeof bootstrap.Modal.getOrCreateInstance === 'function') {
+                    console.log(kycDocsDebugPrefix + ' Using bootstrap.Modal.getOrCreateInstance().hide().');
+                    bootstrap.Modal.getOrCreateInstance(modalEl).hide();
+                    closed = true;
+                }
+                if (!closed && typeof bootstrap.Modal.getInstance === 'function') {
+                    console.log(kycDocsDebugPrefix + ' Using bootstrap.Modal.getInstance().');
+                    var existing = bootstrap.Modal.getInstance(modalEl);
+                    if (existing) {
+                        console.log(kycDocsDebugPrefix + ' Existing BS5 instance found, calling hide().');
+                        existing.hide();
+                        closed = true;
+                    }
+                }
+                if (!closed) {
+                    console.log(kycDocsDebugPrefix + ' Using new bootstrap.Modal().hide().');
+                    (new bootstrap.Modal(modalEl)).hide();
+                    closed = true;
+                }
+            }
+        } catch (e) {
+            console.error('[KYCDocs] Failed to hide modal, using fallback:', e);
+        }
+
+        // In mixed Bootstrap environments, plugin hide() can return without visually closing.
+        // Validate with class and visibility checks, then force cleanup if needed.
+        setTimeout(function () {
+            var stillVisible = $modal.is(':visible');
+            var stillOpen = modalEl.classList.contains('show') || modalEl.classList.contains('in');
+            if (!closed || stillVisible || stillOpen) {
+                console.log(kycDocsDebugPrefix + ' Modal still open after hide attempt, forcing close.');
+                window.forceHideKYCDocsModal();
+            }
+        }, 120);
+    };
     // $('#add_branch').hide();
     // $('.btnBack').hide();
 
     loadKYCDocsList();
 
 
-    $('#btnBranchAdd').click(function(e){
-        if (e && typeof e.preventDefault === 'function') {
-            e.preventDefault();
-        }
-
+    $('#btnKycDocsAdd').click(function(){
+        console.log(kycDocsDebugPrefix + ' #btnKycDocsAdd clicked.');
         kyc_docs_form_action = '<?= base_url("master/kyc/kycdocs/createpost"); ?>';
-        var myModal = new bootstrap.Modal(document.getElementById('kycdocsModal'));
-        myModal.show();
-        // $('#add_branch').show();
-        // $('#branch_table').hide();
-        // $('.btnBack').show();
-        // $('#btnBranchAdd').hide();
+        console.log(kycDocsDebugPrefix + ' Set form action to:', kyc_docs_form_action);
 
-        $('#file_name').val('');
-        $('#state').val('');
-        $('#district').val('');
-        $('#branch_city').val('');
-        
-        $('#name0').val('');
-        $('#email0').val('');
-        $('#mobile0').val('');
-        $('#designation0').val('');
+        // Reset form before showing to ensure it's clean
+        resetKYCDocsForm();
 
-        $('#name1').val('');
-        $('#email1').val('');
-        $('#mobile1').val('');
-        $('#designation1').val('');
+        console.log(kycDocsDebugPrefix + ' Calling showKYCDocsModal().');
+        window.showKYCDocsModal();
+        console.log(kycDocsDebugPrefix + ' #btnKycDocsAdd click handler finished.');
+    });
 
-        $('#name2').val('');
-        $('#email2').val('');
-        $('#mobile2').val('');
-        $('#designation2').val('');
-    })    
+    // When the modal is completely hidden, reset the form.
+    // This is the recommended Bootstrap way to handle cleanup.
+    $('#kycdocsModal').on('hidden.bs.modal', function () {
+        console.log(kycDocsDebugPrefix + ' #kycdocsModal hidden.bs.modal event fired.');
+        resetKYCDocsForm();
+    });
 
-    $('.btnBack').click(function(e){
-        if (e && typeof e.preventDefault === 'function') {
-            e.preventDefault();
-        }
-        var myModal = new bootstrap.Modal(document.getElementById('kycdocsModal'));
-        myModal.hide();
-        // $('#add_branch').hide();
-        // $('#branch_table').show();
-        // $('.btnBack').hide();
-        // $('#btnBranchAdd').show();
-
-        $('#file_name').val('');
-        $('#state').val('');
-        $('#district').val('');
-        $('#branch_city').val('');
-        
-        $('#name0').val('');
-        $('#email0').val('');
-        $('#mobile0').val('');
-        $('#designation0').val('');
-
-        $('#name1').val('');
-        $('#email1').val('');
-        $('#mobile1').val('');
-        $('#designation1').val('');
-
-        $('#name2').val('');
-        $('#email2').val('');
-        $('#mobile2').val('');
-        $('#designation2').val('');
-
-    })
+    // Add explicit click handlers for close/cancel buttons as data-bs-dismiss might be unreliable.
+    // This makes it consistent with the working insurer_branch.php modal.
+    $(document).on('click', '.js-kyc-docs-close, .js-kyc-docs-cancel', function (e) {
+        e.preventDefault();
+        window.hideKYCDocsModal();
+    });
  
 
     if(kyc_Docs_PrimaryKey !== ''){
 
-        var branchTable = '';
-        var data  = <?= isset($kyc_docs) ? json_encode($kyc_docs) : '[]' ?>;
-        $.each(data, function(index, item) {
-            branchTable += `
-                <tr>
-                    <td>${item.file_name}</td>
-                    <td>
-                    <a class="btnBranchEdit" data-id="${item.id}" href="#"><i data-id="${item.id}" class="mdi mdi-lead-pencil btnBranchEdit"  style="font-size:18px;"></i></a>
-                    <a style="color:#02a8b5" data-id="${item.id}" onclick="removeKYCDocs(this)"><i data-id="${item.id}" class="mdi mdi-delete"  style="font-size:18px;"></i></a>
-                    </td>
-                </tr>
-            `;   
-        });
-        $('#kyc_docs_list').append(branchTable); 
+        var data  = <?= isset($insurer_branch) ? json_encode($insurer_branch) : '[]' ?>;
+        renderKYCDocsTableRows(data);
     }
 
 
@@ -249,22 +417,14 @@ $(document).ready(function () {
                         $('.loader-mask').delay(350).fadeOut('slow');
                     }, 1000);
                     console.log(res);
-                    $('#kyc_docs_list tr').remove();
-                    var insurerBranchTableInsert = ''
-                    $.each(res.data, function(index, item) {
-                        insurerBranchTableInsert += `
-                            <tr>
-                                <td>${item.file_name}</td>
-                                <td>
-                                    <a class="btnBranchEdit" data-id="${item.id}" href="#"><i data-id="${item.id}" class="mdi mdi-lead-pencil btnBranchEdit"  style="font-size:18px;"></i></a>
-                                    <a style="color:#02a8b5" data-id="${item.id}" onclick="removeKYCDocs(this)"><i data-id="${item.id}" class="mdi mdi-delete"  style="font-size:18px;"></i></a>
-                                </td>
-                            </tr>
-                        `;   
-                    });
-                    $('#kyc_docs_list').append(insurerBranchTableInsert); 
-                    var myModal = new bootstrap.Modal(document.getElementById('kycdocsModal'));
-                    myModal.hide();
+                    var rows = normalizeKYCDocsRows(res);
+                    if (rows.length) {
+                        renderKYCDocsTableRows(rows);
+                    } else {
+                        // Edit API may return only status/message; refresh from list endpoint.
+                        loadKYCDocsList();
+                    }
+                    window.hideKYCDocsModal();
                     // $('#add_branch').hide();
                     // $('#branch_table').show();
                     // $('.btnBack').hide();
@@ -320,8 +480,7 @@ $(document).ready(function () {
                     $('.loader-mask').delay(350).fadeOut('slow');
                 }, 1000);
                 console.log("right.........");
-                var myModal = new bootstrap.Modal(document.getElementById('kycdocsModal'));
-                myModal.show();
+                window.showKYCDocsModal();
                 // $('#add_branch').show();
                 // $('#branch_table').hide();
                 // $('.btnBack').show();
@@ -367,19 +526,10 @@ $(document).ready(function () {
         });
     });
 
-
-    $('body').on('click', '#btnSubmit', function() {
-        $('#kyc_docs_list').html("");
-        console.log($('#kyc_docs_list')[0]);
-        setTimeout(function() {
-            console.log("hjknjkhiulhjulihj----------------------");
-            // loadKYCDocsList();
-        }, 1000) });
-
     function loadKYCDocsList() {
         var base_url = '<?= base_url("master/kyc/kycdocs/list/"); ?>';
 
-        var kyc_Docs_PrimaryKey_1 = $('#kyc_type_id').val(); 
+        var kyc_Docs_PrimaryKey_1 = $('#kyc_General_PrimaryKey').val(); 
 
         // console.log("kyc_Docs_PrimaryKey_1");
         // console.log(kyc_Docs_PrimaryKey_1);
@@ -402,20 +552,8 @@ $(document).ready(function () {
                         $('.loader').fadeOut();
                         $('.loader-mask').delay(350).fadeOut('slow');
                     }, 1000);
-                    var insurerBranchTableInsert = '';
-                    $.each(res.kyc_docs, function(index, item) {
-                        insurerBranchTableInsert += `
-                            <tr>
-                                <td>${item.file_name}</td>
-                                <td>
-                                <a class="btnBranchEdit" data-id="${item.id}"><i data-id="${item.id}" class="mdi mdi-lead-pencil btnBranchEdit"  style="font-size:18px;"></i></a>
-                                <a style="color:#02a8b5" data-id="${item.id}" onclick="removeKYCDocs(this)"><i data-id="${item.id}" class="mdi mdi-delete"  style="font-size:18px;"></i></a>
-                                </td>
-                            </tr>
-                        `;   
-                    });
-                    console.log($('#kyc_docs_list')[0]);
-                    $('#kyc_docs_list').append(insurerBranchTableInsert); 
+                    var rows = normalizeKYCDocsRows(res);
+                    renderKYCDocsTableRows(rows);
                 },
                     error: function (xhr, status, error) {
                         console.error(xhr.responseText);
diff --git a/app/Views/kyc_onboarding.php b/app/Views/kyc_onboarding.php
index 427676aa..bcd661c2 100755
--- a/app/Views/kyc_onboarding.php
+++ b/app/Views/kyc_onboarding.php
@@ -29,8 +29,9 @@
     }
 </style>
 <script>
-    var pageSubTitle = 'KYC Entity Type';
-    var pageBackButton = '<a href="#" onclick="history.back(); return false;" data-toggle="tooltip" data-placement="top" title="Back"><i class="mdi mdi-arrow-left" style="font-size: 17px;"></i></a>';
+    var pageHideMainNavTitle = true;
+    var pageTitle = 'KYC Entity Type';
+    var pageBackButton = '<a href="<?= base_url('master/kyc/list') ?>" class="topbar-icon-btn" data-toggle="tooltip" data-placement="top" title="Back" aria-label="Back"><i class="ri-arrow-left-s-line"></i></a>';
 </script>
 <div class="row" id="insurer_add">
     <div class="col-12">
@@ -91,23 +92,32 @@
 <script>
     function policy_type_branch_contact() {
         var check_policy_type_id = $('#kyc_General_PrimaryKey');
+        var branchBackBtn = $('#btnBranchBack');
+        var branchAddBtn = $('#btnBranchAdd');
 
         console.log(check_policy_type_id.val());
-        if (check_policy_type_id[0].value == '' || check_policy_type_id[0].value == null || check_policy_type_id[0].value == 0) {
-            $('#btnBranchAdd').hide();
+        if (!check_policy_type_id.length || check_policy_type_id[0].value == '' || check_policy_type_id[0].value == null || check_policy_type_id[0].value == 0) {
+            if (branchAddBtn.length) {
+                branchAddBtn.hide();
+            }
             toastr.warning('First Add the KYC Entity Type!', 'Warning', {
                 timeOut: 2000
             });
         } else {
-            if ($('#btnBranchBack')[0].style.display == 'none') {
-                $('#btnBranchAdd').show();
+            if (!branchBackBtn.length || branchBackBtn[0].style.display == 'none') {
+                if (branchAddBtn.length) {
+                    branchAddBtn.show();
+                }
             }
         }
 
     }
 
-    document.getElementById("kyc_docs_id").addEventListener("click", function(event) {
-        event.preventDefault();
-        policy_type_branch_contact();
-    });
+    var kycDocsTab = document.getElementById("kyc_docs_id");
+    if (kycDocsTab) {
+        kycDocsTab.addEventListener("click", function(event) {
+            event.preventDefault();
+            policy_type_branch_contact();
+        });
+    }
 </script>
\ No newline at end of file
diff --git a/app/Views/layout/footer.php b/app/Views/layout/footer.php
index a6ea4a3d..86fd530e 100755
--- a/app/Views/layout/footer.php
+++ b/app/Views/layout/footer.php
@@ -264,52 +264,53 @@
     };
 </script>
 <script>
-    // ── setNavSubtitle: OUTSIDE ready so any page script can call it ──
-    window.setNavSubtitle = function(subtitle, backUrl) {
-        $('#nav-sub-text').html(subtitle);
-        $('#nav-back-btn').attr('href', backUrl);
-        $('#nav-sub-row').removeClass('hidden');
-    };
-</script>
+    window.__navPageName = "<?= esc($page_name ?? '') ?>";
+    window.__navUserName = "<?= esc(get_session_userdata()->first_name ?? 'NOT SET') ?>";
 
-<script>
-    $(document).ready(function() {
-
-        var pageName = "<?= esc($page_name ?? '') ?>";
-        var userName = "<?= esc(get_session_userdata()->first_name ?? 'NOT SET') ?>";
-        
-        // These are set by individual view files BEFORE footer loads
-        var subTitle = (typeof pageSubTitle !== 'undefined') ? pageSubTitle : false;
-        var backButton = (typeof pageBackButton !== 'undefined') ? pageBackButton : false;    
+    window.applyTopNavbarTitle = function() {
+        var pageName = window.__navPageName || "";
+        var userName = window.__navUserName || "";
+        var extraTitle = (typeof pageTitle !== 'undefined') ? pageTitle : false;
+        var backButton = (typeof pageBackButton !== 'undefined') ? pageBackButton : false;
         var titleHtml = "";
         var $titleEl  = $(".top-navbar-title");
         var $navDiv  = $(".top-navbar-div");
 
-            if (pageName && pageName == "Dashboard") {
-                titleHtml = `<h6 style="margin-right:5px !important;">Welcome ${userName}</h6>
-                            <h3>Dashboard</h3>`;
-                $titleEl.css({ display: "block", bottom: "12px" });
-                $navDiv.css({ marginTop: "20px" }); // single title → default 20px
+        if (pageName && pageName == "Dashboard") {
+            titleHtml = `<h6 style="margin-right:5px !important;">Welcome ${userName}</h6>
+                        <h3>Dashboard</h3>`;
+            $titleEl.css({ display: "block", bottom: "12px" });
+            $navDiv.css({ marginTop: "20px" });
+        } else if (pageName && extraTitle && typeof pageHideMainNavTitle !== 'undefined' && pageHideMainNavTitle && !backButton) {
+            titleHtml = `<h3 style="margin-right:5px !important;">${extraTitle}</h3>`;
+            $titleEl.css({ display: "block", bottom: "12px" });
+            $navDiv.css({ marginTop: "20px" });
+        } else if (pageName && backButton && extraTitle && typeof pageHideMainNavTitle !== 'undefined' && pageHideMainNavTitle) {
+            titleHtml = `<h3 class="d-flex align-items-center" style="margin-right:5px !important; gap:12px;">${backButton}<span>${extraTitle}</span></h3>`;
+            $titleEl.css({ display: "block", bottom: "12px" });
+            $navDiv.css({ marginTop: "20px" });
+        } else if (pageName && backButton && extraTitle) {
+            titleHtml  = `<h3 style="margin-right:5px !important;">${pageName}</h3>`;
+            titleHtml += `<h6>${backButton}&nbsp;${extraTitle}</h6>`;
+            $titleEl.css({ display: "block", bottom: "12px" });
+            $navDiv.css({ marginTop: "0px" });
+        } else if (pageName && extraTitle) {
+            titleHtml  = `<h3 style="margin-right:5px !important;">${pageName}</h3>`;
+            titleHtml += `<h6>${extraTitle}</h6>`;
+            $titleEl.css({ display: "block", bottom: "12px" });
+            $navDiv.css({ marginTop: "0px" });
+        } else {
+            titleHtml = `<h3 style="margin-right:5px !important;">${pageName}</h3>`;
+            $titleEl.css({ display: "flex",  bottom: "0px" });
+            $navDiv.css({ marginTop: "20px" });
+        }
 
-            } else if (pageName && backButton && subTitle) {
-                titleHtml  = `<h3 style="margin-right:5px !important;">${pageName}</h3>`;
-                titleHtml += `<h6>${backButton}&nbsp;${subTitle}</h6>`;
-                $titleEl.css({ display: "block", bottom: "12px" });
-                $navDiv.css({ marginTop: "0px" });  // double title → 0
+        $titleEl.html(titleHtml);
+    };
 
-            } else if (pageName && subTitle) {
-                titleHtml  = `<h3 style="margin-right:5px !important;">${pageName}</h3>`;
-                titleHtml += `<h6>${subTitle}</h6>`;
-                $titleEl.css({ display: "block", bottom: "12px" });
-                $navDiv.css({ marginTop: "0px" });  // double title → 0
+    $(document).ready(function() {
 
-            } else {
-                titleHtml = `<h3 style="margin-right:5px !important;">${pageName}</h3>`;
-                $titleEl.css({ display: "flex",  bottom: "0px" });
-                $navDiv.css({ marginTop: "20px" }); // single title → default 20px
-            }
-
-            $titleEl.html(titleHtml);
+        applyTopNavbarTitle();
 
     
         // var pageName = "<?= esc($page_name ?? '') ?>";
@@ -1441,6 +1442,35 @@ $(function(){
             });
         }
 
+        function nhApplyMenuScrollLimit($menu, usableSpace) {
+            if (!$menu || !$menu.length) {
+                return;
+            }
+            var $items = $menu.children('.dropdown-item:visible, a:visible, button:visible');
+            var visibleItems = 3;
+            var fixedMenuMax = 0;
+            if ($items.length) {
+                $items.slice(0, visibleItems).each(function () {
+                    fixedMenuMax += $(this).outerHeight(true) || 0;
+                });
+            }
+            if (!fixedMenuMax) {
+                fixedMenuMax = 132; // safe default for 3 items
+            }
+            fixedMenuMax += 14; // include menu paddings/borders
+            var viewportMax = Math.max(140, usableSpace - 12);
+            var finalMax = Math.max(132, Math.min(fixedMenuMax, viewportMax));
+
+            $menu.css({
+                maxHeight: finalMax + 'px',
+                overflowY: 'auto',
+                overflowX: 'hidden',
+                scrollBehavior: 'smooth',
+                overscrollBehavior: 'contain',
+                zIndex: '20050'
+            });
+        }
+
         function nhNormalizeActionCells(tableApi) {
             if (!tableApi) {
                 return;
@@ -1457,26 +1487,13 @@ $(function(){
             });
         }
 
-        function nhApplyBottomRowDropup(tableApi) {
+        function nhClearForcedDropup(tableApi) {
             if (!tableApi) {
                 return;
             }
             var $table = $(tableApi.table().node());
-            var rows = tableApi.rows({ page: 'current' }).nodes().toArray();
             $table.find('tbody tr').removeClass('nh-force-dropup');
-            $table.find('tbody td.table-action-cell .btn-group.dropdown').removeClass('dropup');
-
-            var target = 0;
-            for (var i = rows.length - 1; i >= 0 && target < 2; i--) {
-                var $row = $(rows[i]);
-                var $group = $row.find('td.table-action-cell .btn-group.dropdown').first();
-                if (!$group.length) {
-                    continue;
-                }
-                $row.addClass('nh-force-dropup');
-                $group.addClass('dropup');
-                target++;
-            }
+            $table.find('tbody td.table-action-cell .btn-group.dropdown, tbody td.table-action-cell .dropdown').removeClass('dropup');
         }
 
         $(function () {
@@ -1491,7 +1508,7 @@ $(function(){
             nhRowActionDropdownOpts();
             var dt = $(this).DataTable();
             nhNormalizeActionCells(dt);
-            nhApplyBottomRowDropup(dt);
+            nhClearForcedDropup(dt);
         });
 
         $(document).on('show.bs.dropdown', '.dataTables_wrapper table.dataTable tbody .dropdown', function () {
@@ -1499,16 +1516,6 @@ $(function(){
             var $toggle = $dd.children('[data-toggle="dropdown"]').first();
             var $menu = $dd.children('.dropdown-menu').first();
             var el = $toggle[0];
-            var $row = $dd.closest('tr');
-            var isForcedDropup = $row.hasClass('nh-force-dropup');
-            if (!isForcedDropup) {
-                // Fallback: if row marker is missing, still force dropup on the last 2 visible rows.
-                var $tbodyRows = $row.closest('tbody').children('tr:visible');
-                if ($tbodyRows.length) {
-                    var rowIdx = $tbodyRows.index($row);
-                    isForcedDropup = rowIdx >= ($tbodyRows.length - 2);
-                }
-            }
             var $scroll = $dd.closest('.dataTables_scrollBody');
             if ($scroll.length) {
                 $scroll.data('nh-prev-overflow', $scroll.css('overflow'));
@@ -1546,9 +1553,7 @@ $(function(){
 
             // Pick direction by space; prefer the side that can fit the full menu.
             var openUp = false;
-            if (isForcedDropup) {
-                openUp = true;
-            } else if (menuHeight > 0) {
+            if (menuHeight > 0) {
                 if (below >= menuHeight) {
                     openUp = false;
                 } else if (above >= menuHeight) {
@@ -1560,34 +1565,20 @@ $(function(){
                 openUp = below < 150 && above > below;
             }
 
-            // Keep explicit per-row dropup (set by nhApplyBottomRowDropup / page scripts).
-            if (!isForcedDropup) {
-                $dd.removeClass('dropup');
-            }
+            $dd.removeClass('dropup');
             $dd.removeData('nh-auto-dropup');
 
             if (openUp) {
                 $dd.addClass('dropup');
-                if (!isForcedDropup) {
-                    $dd.data('nh-auto-dropup', 1);
-                }
+                $dd.data('nh-auto-dropup', 1);
             }
 
-            // If there still isn't enough room, keep all actions reachable via scroll.
+            // Keep height capped to ~3 items and allow vertical scroll for extra actions.
             if ($menu.length && menuHeight > 0) {
                 var usableSpace = openUp ? above : below;
-                var maxVisible = Math.max(140, usableSpace - 12);
-                if (menuHeight > maxVisible) {
-                    $menu.css({
-                        maxHeight: maxVisible + 'px',
-                        overflowY: 'auto'
-                    });
-                } else {
-                    $menu.css({
-                        maxHeight: '',
-                        overflowY: ''
-                    });
-                }
+                nhApplyMenuScrollLimit($menu, usableSpace);
+                $menu.addClass('nh-action-menu-elevated');
+                $menu.scrollTop(0);
             }
         });
 
@@ -1623,8 +1614,12 @@ $(function(){
             }
             $dd.children('.dropdown-menu').css({
                 maxHeight: '',
-                overflowY: ''
-            });
+                overflowY: '',
+                overflowX: '',
+                scrollBehavior: '',
+                overscrollBehavior: '',
+                zIndex: ''
+            }).removeClass('nh-action-menu-elevated');
         });
 
         $(document).on('shown.bs.dropdown', '.dataTables_wrapper .dropdown', function () {
@@ -1732,7 +1727,7 @@ $(function(){
             try {
                 var dt = $(settings.nTable).DataTable();
                 nhNormalizeActionCells(dt);
-                nhApplyBottomRowDropup(dt);
+                nhClearForcedDropup(dt);
             } catch (err) {
                 // keep page running if a table has non-standard setup
             }
diff --git a/app/Views/layout/footer_new.php b/app/Views/layout/footer_new.php
index 1642a758..5840483d 100644
--- a/app/Views/layout/footer_new.php
+++ b/app/Views/layout/footer_new.php
@@ -1216,6 +1216,44 @@ $(function(){
         table.search('').draw();   
     });
 
+    // Global listing dropdown behavior: no forced last-row dropup.
+    (function () {
+        if (typeof jQuery === 'undefined') {
+            return;
+        }
+        var $ = jQuery;
+
+        function clearForcedDropup($scope) {
+            $scope.find('tbody tr').removeClass('nh-force-dropup');
+            $scope.find('tbody .btn-group.dropdown, tbody .dropdown').removeClass('dropup');
+        }
+
+        $(document).on('init.dt draw.dt', 'table.dataTable', function () {
+            clearForcedDropup($(this));
+        });
+
+        $(document).on('show.bs.dropdown', 'table tbody .dropdown', function () {
+            var $dd = $(this);
+            var $toggle = $dd.children('[data-toggle="dropdown"]').first();
+            var $menu = $dd.children('.dropdown-menu').first();
+            var el = $toggle[0];
+
+            $dd.removeClass('dropup');
+            if (!el || !el.getClientRects().length) {
+                return;
+            }
+
+            var rect = el.getBoundingClientRect();
+            var below = Math.max(0, window.innerHeight - rect.bottom - 8);
+            var above = Math.max(0, rect.top - 8);
+            var menuHeight = $menu.outerHeight() || 150;
+
+            if (below < menuHeight && above > below) {
+                $dd.addClass('dropup');
+            }
+        });
+    })();
+
 </script>
 
 
diff --git a/app/Views/layout/header.php b/app/Views/layout/header.php
index d4082e93..36ead7b7 100755
--- a/app/Views/layout/header.php
+++ b/app/Views/layout/header.php
@@ -799,9 +799,9 @@
             width: 100% !important;
         }
 
-        table[data-custom-table-css="table"].dataTable thead th {
+        /* table[data-custom-table-css="table"].dataTable thead th {
             padding: 15px !important;
-        }
+        } */
 
         table[data-custom-table-css="table"] thead.bg-light {
             background-color: transparent !important;
@@ -1932,38 +1932,6 @@ body[data-sidebar-size="condensed"] .footer {
         overflow: hidden;
         line-height: 1;
 }
-.nav-main-title {
-    font-size: 15px;
-    font-weight: 700;
-    color: #101828;
-    line-height: 1.2;
-    white-space: nowrap;
-}
-
- .nav-welcome {
-        font-size: 11px;
-        color: #98a2b3;
-        margin-top: 2px;
-        font-weight: 400;
-    }
-    .nav-sub-row {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        margin-top: 2px;
-    }
-    .nav-sub-row.hidden { display: none; }
-    .nav-sub-text {
-        font-size: 12px;
-        color: #5a6a7a;
-        font-weight: 500;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 500px;
-    }
-.btn-back { background: none; border: none; font-size: 22px; cursor: pointer; color: #888; width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
-.btn-back:hover { background: #f0f0f0; color: #333; }    
 /** Newly Implemented */    
 </style>
 
diff --git a/app/Views/leads_form.php b/app/Views/leads_form.php
index db790225..9e561ad4 100644
--- a/app/Views/leads_form.php
+++ b/app/Views/leads_form.php
@@ -12,6 +12,19 @@
         color: #666;
     }
 
+    .input-icon {
+        position: relative;
+    }
+
+    .input-icon .additional-icon {
+        position: absolute;
+        top: 50%;
+        right: 12px;
+        transform: translateY(-50%);
+        pointer-events: none;
+        color: #495057;
+    }
+
     hr.solid {
         border-top: 3px solid #bbb;
     }
@@ -35,9 +48,6 @@
         margin-right: 5px;
     }
 
-    hr {
-        display: none !important;
-    }
 </style>
 
 <style>
@@ -119,11 +129,12 @@
 </style>
 <?php
     $isLeadEditEb = isset($lead_edit_data) && ! empty($lead_edit_data);
-    $ebSubtitle   = $isLeadEditEb ? 'Edit Opportunities - (EB)' : 'Add Opportunities - (EB)';
+    $ebPageTitle   = $isLeadEditEb ? 'Edit Opportunities - (EB)' : 'Add Opportunities - (EB)';
 ?>
 <script>
-    var pageSubTitle = '<?= $ebSubtitle ?>';
-    var pageBackButton = '<a href="<?= base_url('leads/list') ?>" data-toggle="tooltip" data-placement="top" title="Back"><i class="mdi mdi-arrow-left" style="font-size: 17px;"></i></a>';
+    var pageHideMainNavTitle = true;
+    var pageTitle = '<?= $ebPageTitle ?>';
+    var pageBackButton = '<a href="<?= base_url('leads/list') ?>" class="topbar-icon-btn" data-toggle="tooltip" data-placement="top" title="Back" aria-label="Back"><i class="ri-arrow-left-s-line"></i></a>';
 </script>
 <script src="<?= base_url('public/assets/js/pages/leads_form_validation.js') ?>"></script>
 
@@ -160,6 +171,8 @@
 
                         <div class="card" id="collapseOne">
                             <div class="card-body">
+                                <h4 class="card-title mb-3">Opportunity Details</h4>
+                                <hr>
                                 <div class="form-row">
 
                                     <div class="form-group col-md-4">
@@ -203,18 +216,17 @@
                         <!-- client row -->
                         <div class="card" id="collapseOne">
                             <div class="card-body">
-                                <div class="form-row">
-
-                                    <div class="form-group offset-md-10 col-md-2 freshFields" style="float:right;">
-                                        <label class="switch">
+                                <div class="d-flex justify-content-between align-items-center mb-3">
+                                    <h4 class="card-title mb-0">Client Information</h4>
+                                    <div class="form-group freshFields mb-0 d-flex align-items-center">
+                                        <label for="exixting_client" class="mb-0 mr-2">Existing Client</label>
+                                        <label class="switch mb-0">
                                             <input id="exixting_client" type="checkbox" name="exixting_client">
                                             <span class="slider round" style="height: 27px;"></span>
                                         </label>
-
-                                        <label for="exixting_client" style="position: relative;top: 2px;">Existing Client</label>
                                     </div>
-
                                 </div>
+                                <hr>
                                 <div class="form-row">
 
                                     <div class="form-group col-md-4 renewalFields" style="display: none;">
@@ -307,6 +319,8 @@
                         <!-- branch row-->
                         <div class="card" id="collapseOne">
                             <div class="card-body">
+                                <h4 class="card-title mb-3">Branch Information</h4>
+                                <hr>
                                 <div class="form-row">
 
                                     <div class="form-group col-md-4">
@@ -363,6 +377,8 @@
                         <!-- policy row -->
                         <div class="card" id="collapseOne">
                             <div class="card-body">
+                                <h4 class="card-title mb-3">Policy Details</h4>
+                                <hr>
                                 <div id="dynamic-form-container"></div>
                             </div>
                         </div>
@@ -371,17 +387,17 @@
                         <!-- other row -->
                         <div class="card" id="collapseOne">
                             <div class="card-body">
-                                <div class="form-row">
-
-                                    <div class="form-group offset-md-9 col-md-3" style="float:right;">
-                                        <label class="switch">
+                                <div class="d-flex justify-content-between align-items-center mb-3">
+                                    <h4 class="card-title mb-0">Sales & Assignment</h4>
+                                    <div class="form-group mb-0 d-flex align-items-center">
+                                        <label for="is_insurer_auto_mail" class="mb-0 mr-2">Insurer Auto Mail</label>
+                                        <label class="switch mb-0">
                                             <input id="is_insurer_auto_mail" type="checkbox" name="is_insurer_auto_mail">
                                             <span class="slider round" style="height: 27px;"></span>
                                         </label>
-                                        <label for="is_insurer_auto_mail" style="position: relative;top: 2px;">Insurer Auto Mail</label>
                                     </div>
-
                                 </div>
+                                <hr>
                                 <div class="form-row">
 
                                     <div class="form-group col-md-4">
@@ -798,8 +814,11 @@
 
                     hide_list_show_add();
 
-                    pageSubTitle = 'Edit Opportunities - (EB)';
-                    pageBackButton = '<a href="<?= base_url('leads/list') ?>" data-toggle="tooltip" data-placement="top" title="Back"><i class="mdi mdi-arrow-left" style="font-size: 17px;"></i></a>';
+                    pageTitle = 'Edit Opportunities - (EB)';
+                    pageBackButton = '<a href="<?= base_url('leads/list') ?>" class="topbar-icon-btn" data-toggle="tooltip" data-placement="top" title="Back" aria-label="Back"><i class="ri-arrow-left-s-line"></i></a>';
+                    if (typeof window.applyTopNavbarTitle === 'function') {
+                        window.applyTopNavbarTitle();
+                    }
 
                     $('#leads_primarykey').val(res.data.id);
                     $('#actual_lead_id').val(res.data.actual_lead_id || 0);
diff --git a/app/Views/leads_form_handler.php b/app/Views/leads_form_handler.php
index fc01d94e..65160ea1 100644
--- a/app/Views/leads_form_handler.php
+++ b/app/Views/leads_form_handler.php
@@ -617,7 +617,7 @@ if (isset($selected_lead_type)) {
         let isFirstField = container.childElementCount === 0; // Check if it's the first field
         let placeholder = isFirstField ? 'First file must be Demography.' : '';
         let accept = isFirstField ? '.xls,.xlsx' : '.xls,.xlsx,.pdf,.jpg,.jpeg,.png';
-        let accept_text = isFirstField ? 'First file: Excel only (.xls, .xlsx)' : 'Files: PDF, Excel (.xlsx, .xls), Images (.png, .jpg, .jpeg)';
+        let accept_text = isFirstField ? 'Allowed: XLS, XLSX.' : 'Allowed: PDF, XLSX, XLS, PNG, JPG, JPEG.';
 
         
         if(selected_lead_form_type != 1){
@@ -658,8 +658,8 @@ if (isset($selected_lead_type)) {
                     <div class="input-icon">
                         <input type="file" class="form-control" id="file_name_${fileIndex}" name="file_name_${increment}[]" accept="${accept}" style="background: #F5FFFF !important;">
                         <i class="mdi mdi-upload additional-icon"></i>
-                        <small style="margin-left: 10px;font-size: 10px;"><span class="text-danger">${accept_text}</span></small>
                     </div>
+                    <small style="margin-left: 10px;font-size: 10px;"><span class="text-danger">${accept_text}</span></small>
                 </div>
 
                 <div class="col-auto">
diff --git a/app/Views/leads_non_eb.php b/app/Views/leads_non_eb.php
index d5c539b2..c5fdee8e 100644
--- a/app/Views/leads_non_eb.php
+++ b/app/Views/leads_non_eb.php
@@ -14,6 +14,19 @@
         color: #666;
     }
 
+    .input-icon {
+        position: relative;
+    }
+
+    .input-icon .additional-icon {
+        position: absolute;
+        top: 50%;
+        right: 12px;
+        transform: translateY(-50%);
+        pointer-events: none;
+        color: #495057;
+    }
+
     hr.solid {
         border-top: 3px solid #bbb;
     }
@@ -49,11 +62,12 @@
 </style>
 <?php
     $isLeadEditNonEb = isset($lead_edit_data) && ! empty($lead_edit_data);
-    $nonEbSubtitle   = $isLeadEditNonEb ? 'Edit Opportunities - (Non EB)' : 'Add Opportunities - (Non EB)';
+    $nonEbPageTitle   = $isLeadEditNonEb ? 'Edit Opportunities - (Non EB)' : 'Add Opportunities - (Non EB)';
 ?>
 <script>
-var pageSubTitle = '<?= $nonEbSubtitle ?>';
-var pageBackButton = '<a href="<?= base_url('leads/list') ?>" data-toggle="tooltip" data-placement="top" title="Back"><i class="mdi mdi-arrow-left" style="font-size: 17px;"></i></a>';
+var pageHideMainNavTitle = true;
+var pageTitle = '<?= $nonEbPageTitle ?>';
+var pageBackButton = '<a href="<?= base_url('leads/list') ?>" class="topbar-icon-btn" data-toggle="tooltip" data-placement="top" title="Back" aria-label="Back"><i class="ri-arrow-left-s-line"></i></a>';
 </script>
 
 <div class="row" id="leads_non_eb_form">
@@ -85,6 +99,8 @@ var pageBackButton = '<a href="<?= base_url('leads/list') ?>" data-toggle="toolt
 
                     <div class="card" id="collapseOne">
                      <div class="card-body">
+                        <h4 class="card-title mb-3">Opportunity Details</h4>
+                        <hr>
                         <div class="form-row">
 
                             <div class="form-group col-md-4">
@@ -128,18 +144,17 @@ var pageBackButton = '<a href="<?= base_url('leads/list') ?>" data-toggle="toolt
                     <!-- client row -->
                     <div class="card" id="collapseOne">
                         <div class="card-body">
-                            <div class="form-row">
-
-                                <div class="form-group offset-md-10 col-md-2 freshFields" style="float:right;">
-                                    <label class="switch">
+                            <div class="d-flex justify-content-between align-items-center mb-3">
+                                <h4 class="card-title mb-0">Client Information</h4>
+                                <div class="form-group freshFields mb-0 d-flex align-items-center">
+                                    <label for="exixting_client" class="mb-0 mr-2">Existing Client</label>
+                                    <label class="switch mb-0">
                                         <input id="exixting_client" type="checkbox" name="exixting_client">
                                         <span class="slider round" style="height: 27px;"></span>
                                     </label>
-
-                                    <label for="exixting_client" style="position: relative;top: 2px;">Existing Client</label>
                                 </div>
-
                             </div>
+                            <hr>
                             <div class="form-row">
 
                                 <div class="form-group col-md-4 renewalFields" style="display: none;">
@@ -221,6 +236,8 @@ var pageBackButton = '<a href="<?= base_url('leads/list') ?>" data-toggle="toolt
                     <!-- branch row-->
                     <div class="card" id="collapseOne">
                     <div class="card-body">
+                    <h4 class="card-title mb-3">Branch Information</h4>
+                    <hr>
                     <div class="form-row">
 
                         <div class="form-group col-md-4">
@@ -280,6 +297,8 @@ var pageBackButton = '<a href="<?= base_url('leads/list') ?>" data-toggle="toolt
                     <!-- policy row -->
                     <div class="card" id="collapseOne">
                     <div class="card-body">
+                    <h4 class="card-title mb-3">Policy Details</h4>
+                    <hr>
                     <div class="form-row" id="dynamic-form-container">
 
                         <div class="form-group col-md-4">
@@ -375,6 +394,8 @@ var pageBackButton = '<a href="<?= base_url('leads/list') ?>" data-toggle="toolt
                     <!-- other row -->
                     <div class="card" id="collapseOne">
                         <div class="card-body">
+                            <h4 class="card-title mb-3">Sales & Assignment</h4>
+                            <hr>
                             <div class="form-row">
                                 <?php
                                     $savedViewers = [];
diff --git a/app/Views/non_eb_claim_edit.php b/app/Views/non_eb_claim_edit.php
index 02211574..2e338e30 100644
--- a/app/Views/non_eb_claim_edit.php
+++ b/app/Views/non_eb_claim_edit.php
@@ -15,8 +15,9 @@
 
 <script>
     var base_url = '<?= base_url() ?>';
-    var pageSubTitle = 'Non-EB Claims';
-    var pageBackButton = '<a href="<?= base_url("non-eb-claim/list"); ?>" aria-label="Back to list"><i class="mdi mdi-arrow-left" style="font-size: 17px;"></i></a>';
+    var pageHideMainNavTitle = true;
+    var pageTitle = 'Non-EB Claims';
+    var pageBackButton = '<a href="<?= base_url("non-eb-claim/list") ?>" class="topbar-icon-btn" data-toggle="tooltip" data-placement="top" title="Back" aria-label="Back to list"><i class="ri-arrow-left-s-line"></i></a>';
 </script>
 
 <?php
diff --git a/app/Views/non_eb_claim_form.php b/app/Views/non_eb_claim_form.php
index 3a23eac9..5430cd2b 100644
--- a/app/Views/non_eb_claim_form.php
+++ b/app/Views/non_eb_claim_form.php
@@ -31,8 +31,9 @@
 
 <script>
     var base_url = '<?= base_url() ?>';
-    var pageSubTitle = 'New Non-EB Claim';
-    var pageBackButton = '<a href="'+base_url+'non-eb-claim/list"><i class="mdi mdi-arrow-left" style="font-size:17px;"></i></a>';
+    var pageHideMainNavTitle = true;
+    var pageTitle = 'New Non-EB Claim';
+    var pageBackButton = '<a href="<?= base_url('non-eb-claim/list') ?>" class="topbar-icon-btn" data-toggle="tooltip" data-placement="top" title="Back" aria-label="Back"><i class="ri-arrow-left-s-line"></i></a>';
 </script>
 
 <?php $sections = $visible_sections ?? []; ?>
diff --git a/app/Views/non_eb_claim_mail_template.php b/app/Views/non_eb_claim_mail_template.php
index ae0709ed..b393e555 100644
--- a/app/Views/non_eb_claim_mail_template.php
+++ b/app/Views/non_eb_claim_mail_template.php
@@ -8,7 +8,8 @@
 </style>
 
 <script>
-    var pageSubTitle = 'Non-EB Mail Templates';
+    var pageHideMainNavTitle = true;
+    var pageTitle = 'Non-EB Mail Templates';
 </script>
 
 <div class="col-12">
diff --git a/app/Views/non_eb_claim_reports.php b/app/Views/non_eb_claim_reports.php
index 80b07664..ae14000d 100644
--- a/app/Views/non_eb_claim_reports.php
+++ b/app/Views/non_eb_claim_reports.php
@@ -7,7 +7,8 @@
 </style>
 
 <script>
-    var pageSubTitle = 'Non-EB Claim Reports';
+    var pageHideMainNavTitle = true;
+    var pageTitle = 'Non-EB Claim Reports';
 </script>
 
 <div class="col-12">
diff --git a/app/Views/non_eb_claim_search.php b/app/Views/non_eb_claim_search.php
index 16a5bbf8..add447ae 100644
--- a/app/Views/non_eb_claim_search.php
+++ b/app/Views/non_eb_claim_search.php
@@ -123,7 +123,8 @@
 </div> -->
 
 <script>
-    var pageSubTitle = 'Non-EB Claims';
+    var pageHideMainNavTitle = true;
+    var pageTitle = 'Non-EB Claims';
 
     // function goToNewClaim() {
     //     var pt = $('#new_claim_policy_type').val();
diff --git a/app/Views/policy_transaction_endorsement_list.php b/app/Views/policy_transaction_endorsement_list.php
index d767633b..e3e138f2 100644
--- a/app/Views/policy_transaction_endorsement_list.php
+++ b/app/Views/policy_transaction_endorsement_list.php
@@ -1007,6 +1007,7 @@
             <div class="form-group col-md-5">
                 <label for="file">Upload File<span class="text-danger">${required_star}</span></label>
                 <input type="file" class="form-control" id="file_name" name="file[]" ${required} accept=".pdf,.jpg,.jpeg,.png">
+                <small class="text-muted d-block">Allowed: PDF, XLSX, XLS, PNG, JPG, JPEG. <= Default</small>
             </div>
             <div class="form-group col-md-2" style="position: relative;top: 28px;">
                 <a class="btn btn-danger waves-effect waves-light" onclick="removeHTMLInput(this, '${container_id}')">x</a>
diff --git a/app/Views/policy_transaction_inception_form.php b/app/Views/policy_transaction_inception_form.php
index 73495b43..f289a988 100644
--- a/app/Views/policy_transaction_inception_form.php
+++ b/app/Views/policy_transaction_inception_form.php
@@ -309,8 +309,7 @@
     }
 </style>
 <script>
-                        var pageSubTitle = undefined;
-                        var pageBackButton = undefined;
+    var pageHideMainNavTitle = true;
 </script>
 <script src="<?= base_url('public/assets/js/pages/policy_transaction_inception_form_validation.js') ?>"></script>
 <div class="tab-pane fade active show" id="form">
@@ -2275,8 +2274,11 @@
                         ' - ' + [res.data.client_short_name, res.data.policy_type, res.data.policy_no]
                         .filter(Boolean).join('-') : '');
                     var backUrl = '<?= base_url("policy_tranction/inception/list"); ?>';
-                    var backButton = `<a href="${backUrl}" aria-label="Back to list"><i class="mdi mdi-arrow-left" style="font-size: 17px;"></i></a>`;
-                    updateNavTitle(page_title, backButton);
+                    pageTitle = page_title;
+                    pageBackButton = '<a href="' + backUrl + '" class="topbar-icon-btn" data-toggle="tooltip" data-placement="top" title="Back" aria-label="Back"><i class="ri-arrow-left-s-line"></i></a>';
+                    if (typeof window.applyTopNavbarTitle === 'function') {
+                        window.applyTopNavbarTitle();
+                    }
                     $('#client_id_kyc').val(res.data.client_id);
                     $('#policy_tranction_primarykey_for_file_upload').val(res.data.id);
                     $('#client_id_for_vehicle_file_upload').val(res.data.client_id);
diff --git a/app/Views/policy_transaction_inception_list.php b/app/Views/policy_transaction_inception_list.php
index ebb98751..bf427c97 100644
--- a/app/Views/policy_transaction_inception_list.php
+++ b/app/Views/policy_transaction_inception_list.php
@@ -663,8 +663,11 @@ function getAddPage(){
         runInceptionAddFlowFromList();
         setTimeout(() => {
             var backUrl = '<?= base_url("policy_tranction/inception/list"); ?>';
-            var backButton = `<a href="${backUrl}" aria-label="Back to list"><i class="mdi mdi-arrow-left" style="font-size: 17px;"></i></a>`;
-            updateNavTitle('Add Policy', backButton);
+            pageTitle = 'Add Policy';
+            pageBackButton = '<a href="' + backUrl + '" class="topbar-icon-btn" data-toggle="tooltip" data-placement="top" title="Back" aria-label="Back"><i class="ri-arrow-left-s-line"></i></a>';
+            if (typeof window.applyTopNavbarTitle === 'function') {
+                window.applyTopNavbarTitle();
+            }
         }, 500);
      }
 }
@@ -822,39 +825,16 @@ $(document).ready(function(){
 })
 
 //--------------------------------------------------------------------------------------------------------
-var pageName = "<?= esc($page_name ?? '') ?>";
-var userName = "<?= esc(get_session_userdata()->first_name ?? 'NOT SET') ?>";
-
-function updateNavTitle(subTitle, backButton) {
-    var titleHtml = "";
-    var $titleEl  = $(".top-navbar-title");
-    var $navDiv   = $(".top-navbar-div");
-
-    if (pageName && backButton && subTitle) {
-        titleHtml  = `<h3 style="margin-right:5px !important;">${pageName}</h3>`;
-        titleHtml += `<h6>${backButton}&nbsp;${subTitle}</h6>`;
-        $titleEl.css({ display: "block", bottom: "12px" });
-        $navDiv.css({ marginTop: "0px" });
-    } else if (pageName && subTitle) {
-        titleHtml  = `<h3 style="margin-right:5px !important;">${pageName}</h3>`;
-        titleHtml += `<h6>${subTitle}</h6>`;
-        $titleEl.css({ display: "block", bottom: "12px" });
-        $navDiv.css({ marginTop: "0px" });
-    } else {
-        titleHtml = `<h3 style="margin-right:5px !important;">${pageName}</h3>`;
-        $titleEl.css({ display: "flex", bottom: "0px" });
-        $navDiv.css({ marginTop: "20px" });
-    }
-
-    $titleEl.html(titleHtml);
-}
 
 function hide_list_show_add() 
 {       
     // $('#page_title').text('Add Policy')
     var backUrl = '<?= base_url("policy_tranction/inception/list"); ?>';
-    var backButton = `<a href="${backUrl}" aria-label="Back to list"><i class="mdi mdi-arrow-left" style="font-size: 17px;"></i></a>`;
-    updateNavTitle('Add Policy', backButton);
+    pageTitle = 'Add Policy';
+    pageBackButton = '<a href="' + backUrl + '" class="topbar-icon-btn" data-toggle="tooltip" data-placement="top" title="Back" aria-label="Back"><i class="ri-arrow-left-s-line"></i></a>';
+    if (typeof window.applyTopNavbarTitle === 'function') {
+        window.applyTopNavbarTitle();
+    }
     $('#inception_form_id')[0].reset();
     $('#client_id').val('').change().prop('disabled', false);
     $('#tpa').val('').change().prop('disabled', false);
@@ -885,9 +865,11 @@ function hide_list_show_add()
 
 function show_list_hide_add() 
 {
-    pageSubTitle = undefined;
+    pageTitle = undefined;
     pageBackButton = undefined;
-    updateNavTitle(false, false);
+    if (typeof window.applyTopNavbarTitle === 'function') {
+        window.applyTopNavbarTitle();
+    }
     $('#pt_onboarding').hide()
     $('#inception_list').show()
     $('#inception_filter').show();
@@ -1190,6 +1172,7 @@ function addHTMLInput(data = null, container_id = 'dynamic-form-container')
         <div class="form-group col-md-5">
             <label for="file">Upload File<span class="text-danger">${required_star}</span></label>
             <input type="file" class="form-control" id="file_name" name="file[]" ${required} accept=".pdf,.jpg,.jpeg,.png">
+            <small class="text-muted d-block">Allowed: PDF, XLSX, XLS, PNG, JPG, JPEG. <= Default</small>
         </div>
         <div class="form-group col-md-2" style="position: relative;top: 28px;">
             <a class="btn btn-danger waves-effect waves-light" onclick="removeHTMLInput(this, '${container_id}')">x</a>
diff --git a/app/Views/policy_transaction_inception_list_2.php b/app/Views/policy_transaction_inception_list_2.php
index 9a47ffa9..de774fde 100644
--- a/app/Views/policy_transaction_inception_list_2.php
+++ b/app/Views/policy_transaction_inception_list_2.php
@@ -1014,6 +1014,7 @@ function addHTMLInput(data = null)
         <div class="form-group col-md-5">
             <label for="file">Upload File<span class="text-danger">*</span></label>
             <input type="file" class="form-control" id="file_name" name="file[]" accept=".pdf,.jpg,.jpeg,.png" required>
+            <small class="text-muted d-block">Allowed: PDF, XLSX, XLS, PNG, JPG, JPEG. <= Default</small>
         </div>
         <div class="form-group col-md-2" style="position: relative;top: 28px;">
             <a class="btn btn-danger waves-effect waves-light" onclick="removeHTMLInput(this)">x</a>
diff --git a/app/Views/policy_type_onboarding.php b/app/Views/policy_type_onboarding.php
index ae95e402..8820706e 100755
--- a/app/Views/policy_type_onboarding.php
+++ b/app/Views/policy_type_onboarding.php
@@ -29,8 +29,9 @@
     }
 </style>
 <script>
-    var pageSubTitle = 'Policy Type';
-    var pageBackButton = '<a href="#" onclick="history.back(); return false;" data-toggle="tooltip" data-placement="top" title="Back"><i class="mdi mdi-arrow-left" style="font-size: 17px;"></i></a>';
+    var pageHideMainNavTitle = true;
+    var pageTitle = 'Policy Type';
+    var pageBackButton = '<a href="<?= base_url('master/policy/list') ?>" class="topbar-icon-btn" data-toggle="tooltip" data-placement="top" title="Back" aria-label="Back"><i class="ri-arrow-left-s-line"></i></a>';
 </script>
 <div id="policy_add">
     <div class="col-12">
@@ -91,23 +92,32 @@
 <script>
     function policy_type_branch_contact() {
         var check_policy_type_id = $('#policytype_General_PrimaryKey');
+        var branchBackBtn = $('#btnBranchBack');
+        var branchAddBtn = $('#btnBranchAdd');
 
 
-        if (check_policy_type_id[0].value == '' || check_policy_type_id[0].value == null || check_policy_type_id[0].value == 0) {
-            $('#btnBranchAdd').hide();
+        if (!check_policy_type_id.length || check_policy_type_id[0].value == '' || check_policy_type_id[0].value == null || check_policy_type_id[0].value == 0) {
+            if (branchAddBtn.length) {
+                branchAddBtn.hide();
+            }
             toastr.warning('First Add the Policy Type!', 'Warning', {
                 timeOut: 2000
             });
         } else {
-            if ($('#btnBranchBack')[0].style.display == 'none') {
-                $('#btnBranchAdd').show();
+            if (!branchBackBtn.length || branchBackBtn[0].style.display == 'none') {
+                if (branchAddBtn.length) {
+                    branchAddBtn.show();
+                }
             }
         }
 
     }
 
-    document.getElementById("policy_id_type").addEventListener("click", function(event) {
-        event.preventDefault();
-        policy_type_branch_contact();
-    });
+    var policyTypeTab = document.getElementById("policy_id_type");
+    if (policyTypeTab) {
+        policyTypeTab.addEventListener("click", function(event) {
+            event.preventDefault();
+            policy_type_branch_contact();
+        });
+    }
 </script>
\ No newline at end of file
diff --git a/app/Views/pos_list.php b/app/Views/pos_list.php
index 98ff78ca..58345781 100644
--- a/app/Views/pos_list.php
+++ b/app/Views/pos_list.php
@@ -173,6 +173,7 @@
                                     <input type="file" class="form-control" name="aadhar_file_name" id="aadhar_file_name" accept=".pdf,.jpg,.jpeg,.png" data-parsley-file-validation>
                                     <i class="mdi mdi-upload additional-icon"></i>
                                 </div>
+                                <small class="text-muted d-block">Allowed: PDF, XLSX, XLS, PNG, JPG, JPEG. <= Default</small>
                             </div>
                             <div class="form-group col-md-4">
                                 <label for="pan_file_name">PAN</label>
@@ -180,6 +181,7 @@
                                     <input type="file" class="form-control" name="pan_file_name" id="pan_file_name" accept=".pdf,.jpg,.jpeg,.png" data-parsley-file-validation>
                                     <i class="mdi mdi-upload additional-icon"></i>
                                 </div>
+                                <small class="text-muted d-block">Allowed: PDF, XLSX, XLS, PNG, JPG, JPEG. <= Default</small>
                             </div>
                             <div class="form-group col-md-4">
                                 <label for="certificate_file_name">Certificate</label>
@@ -187,6 +189,7 @@
                                     <input type="file" class="form-control" name="certificate_file_name" id="certificate_file_name" accept=".pdf,.jpg,.jpeg,.png" data-parsley-file-validation>
                                     <i class="mdi mdi-upload additional-icon"></i>
                                 </div>
+                                <small class="text-muted d-block">Allowed: PDF, XLSX, XLS, PNG, JPG, JPEG. <= Default</small>
                             </div>                            
                         </div>    
                         <div class="form-row">                  
diff --git a/app/Views/rfq/multi_files.php b/app/Views/rfq/multi_files.php
index 94f62f2e..a82a4cf5 100644
--- a/app/Views/rfq/multi_files.php
+++ b/app/Views/rfq/multi_files.php
@@ -8,7 +8,7 @@ $increment = 1;
         $isFirstField = ($index === 0);
         $placeholder = $isFirstField ? 'First file must be Demography.' : '';
         $accept = $isFirstField ? '.xls,.xlsx' : '.xls,.xlsx,.pdf,.jpg,.jpeg,.png';
-        $accept_text = $isFirstField ? 'First file: Excel only (.xls, .xlsx)' : 'Files: PDF, Excel (.xlsx, .xls), Images (.png, .jpg, .jpeg)';
+        $accept_text = $isFirstField ? 'Allowed: XLS, XLSX.' : 'Allowed: PDF, XLSX, XLS, PNG, JPG, JPEG.';
 
         $displayIndex = $index + 1;
 ?>
@@ -70,7 +70,7 @@ $increment = 1;
                             <input type="file" class="form-control" id="file_name_1" 
                                 name="file_name_1[]" accept=".xls,.xlsx" onchange="showFileName(this, 1)" style="background: #F5FFFF !important;">
                             <i class="mdi mdi-upload additional-icon"></i>
-                            <small style="margin-left: 10px;font-size: 10px;"><span class="text-danger">First file: Excel only (.xls, .xlsx)</span></small>                
+                            <small style="margin-left: 10px;font-size: 10px;"><span class="text-danger">Allowed: XLS, XLSX.</span></small>                
                         </div>
                     </div>
                     <div class="col-auto">
diff --git a/app/Views/test_members_list.php b/app/Views/test_members_list.php
index 7b85bd28..5659a303 100644
--- a/app/Views/test_members_list.php
+++ b/app/Views/test_members_list.php
@@ -327,7 +327,7 @@ th:first-child, td:first-child {
 <!-- end modal -->
 <!-- Edit modal content -->
 
-<div id="emp_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
+<div id="emp_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
@@ -438,6 +438,11 @@ th:first-child, td:first-child {
 
     })
 
+    $('#emp_modal').on('hidden.bs.modal', function () {
+        $('body').removeClass('modal-open');
+        $('.modal-backdrop').remove();
+    });
+
     $(document).ready(function() {
         var ticketsTable = $('#tickets-table');
 
@@ -552,8 +557,6 @@ th:first-child, td:first-child {
                     $('#relationship').val(data.relationship);
 
                     $('#emp_modal').modal('show');
-                    var myModal = new bootstrap.Modal(document.getElementById('emp_modal'));
-                    myModal.show();
 
                 }else{
                     $('#employee_primary_id').val('');
@@ -613,7 +616,7 @@ th:first-child, td:first-child {
                 if(response.status == true){
                     toastr.success(response.message, 'Success');
                     
-                    $('.close').click();
+                    $('#emp_modal').modal('hide');
 
                     $('#employee_primary_id').val('');
                     $('#emp_code_for_edit').val('');
diff --git a/app/Views/thz_notes.php b/app/Views/thz_notes.php
index c7418d86..32bb1e0a 100644
--- a/app/Views/thz_notes.php
+++ b/app/Views/thz_notes.php
@@ -134,8 +134,9 @@ hr{
 }
 </style>
 <script>
-    var pageSubTitle = 'Ticket ID - <?= $master[0]["thz_id"]; ?>';
-    var pageBackButton = '<a href="#" onclick="history.back(); return false;" data-toggle="tooltip" data-placement="top" title="Back"><i class="mdi mdi-arrow-left" style="font-size: 17px;"></i></a>';
+    var pageHideMainNavTitle = true;
+    var pageTitle = 'Ticket ID - <?= $master[0]["thz_id"]; ?>';
+    var pageBackButton = '<a href="<?= base_url('ticket/list') ?>" class="topbar-icon-btn" data-toggle="tooltip" data-placement="top" title="Back" aria-label="Back"><i class="ri-arrow-left-s-line"></i></a>';
 </script>
 <div class="row" id="notespage">
 
diff --git a/app/Views/ticket_edit_onbording.php b/app/Views/ticket_edit_onbording.php
index 93af8061..493735b3 100644
--- a/app/Views/ticket_edit_onbording.php
+++ b/app/Views/ticket_edit_onbording.php
@@ -40,8 +40,9 @@
             <div class="card-body">
                 
                 <script>
-                    var pageSubTitle = 'Claims<?php if(isset($ticket_data["tpa_claim_push_reference_no"]) && !empty($ticket_data["tpa_claim_push_reference_no"])) { echo " <a href=\"#\" class=\"btn btn-success mr-2\" onclick=\"fetchTpaClaimStatus()\">Fetch Claim Status</a>"; } ?>';
-                    var pageBackButton = '<a href="<?= base_url("ticket/list"); ?>" aria-label="Back to list"><i class="mdi mdi-arrow-left" style="font-size: 17px;"></i></a>';
+                    var pageHideMainNavTitle = true;
+                    var pageTitle = 'Claims<?php if(isset($ticket_data["tpa_claim_push_reference_no"]) && !empty($ticket_data["tpa_claim_push_reference_no"])) { echo " <a href=\"#\" class=\"btn btn-success mr-2\" onclick=\"fetchTpaClaimStatus()\">Fetch Claim Status</a>"; } ?>';
+                    var pageBackButton = '<a href="<?= base_url("ticket/list"); ?>" class="topbar-icon-btn" data-toggle="tooltip" data-placement="top" title="Back" aria-label="Back to list"><i class="ri-arrow-left-s-line"></i></a>';
                 </script>
                 <!-- Header Section -->
                 <!-- <div class="row mb-3 align-items-center justify-content-between">
diff --git a/app/Views/ticket_history.php b/app/Views/ticket_history.php
index fe1fc222..83f94087 100644
--- a/app/Views/ticket_history.php
+++ b/app/Views/ticket_history.php
@@ -1,7 +1,7 @@
 <div class="row">
     <div class="col-12">
         <div class="card-body">
-            <div class="table-responsive">
+            <div class="table-responsive ticket-history-table-wrap">
                 <table data-custom-table-css="table" id="scroll-horizontal-datatable" class="table w-100">
                     <thead class="bg-light">
                         <tr>
@@ -33,6 +33,12 @@
     </div>
 </div> <!-- end col-->
 
+<style>
+    .ticket-history-table-wrap {
+        overflow: hidden;
+    }
+</style>
+
 <script>
    $(document).ready(function() {
 
@@ -59,10 +65,17 @@ if (ticketsTable.length) {
         //     }
 
         // ],
-        dom: "<'row'<'col-sm-6'f><'col-sm-6 text-right'>>" + // Filter left, buttons right
-                "<'row'<'col-sm-12'tr>>" +
-                "<'row align-items-center'<'col-5 text-start'i><'col-7 d-flex justify-content-end align-items-center'<'me-2'l>p>>",
-        lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
+        dom: "<'row'<'col-sm-6'f><'col-sm-6 text-right'>>" +
+                "<'row'<'col-sm-12'tr>>",
+        autoWidth: false,
+        scrollY: "320px",
+        scrollCollapse: true,
+        columns: [
+            { width: "13%" },
+            { width: "47.5%" },
+            { width: "17.5%" },
+            { width: "22%" }
+        ],
         language: {
                     search: `
                     <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
@@ -75,11 +88,13 @@ if (ticketsTable.length) {
                     searchPlaceholder: "Search",
                     emptyTable: '<div class="text-center text-muted">No Data found</div>'
         },
-        paging: true, // Enable pagination
-        pageLength: 10, // Set default number of rows per page (optional)
+        paging: false,
+        info: false,
         ordering: false,
     });
-        $('.dataTables_length label').css('height', '21px');
+        ticketsTable.DataTable().columns.adjust();
+        ticketsTable.closest('.dataTables_wrapper').find('.dataTables_scrollHeadInner').css('width', '');
+        ticketsTable.closest('.dataTables_wrapper').find('.dataTables_scrollHead').css('overflow', 'hidden');
 } else {
     console.error("Table atet found.");
 }
diff --git a/app/Views/tpa_basic_info.php b/app/Views/tpa_basic_info.php
index 0b0f92f8..6922acfd 100755
--- a/app/Views/tpa_basic_info.php
+++ b/app/Views/tpa_basic_info.php
@@ -15,6 +15,12 @@
     width: 50px;
     height: 50px;
     object-fit: contain;
+    transition: transform 0.2s ease-in-out;
+}
+
+.image-preview:hover img {
+    transform: scale(1.2);
+    cursor: zoom-in;
 }
 
 .upload-btn {
@@ -275,10 +281,38 @@
     </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
 
+<!-- Image Preview Modal -->
+<div class="modal fade" id="imagePreviewModal" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content" style="background: transparent; border: 0;">
+            <div class="modal-body text-center p-0">
+                <img src="" id="modalImage" class="img-fluid rounded" alt="Full-size preview" style="max-height: 90vh; cursor: zoom-out;">
+            </div>
+        </div>
+    </div>
+</div>
+<!-- /.modal -->
+                               
+
 
 <script>
     $(document).ready(function() {
 
+        // Handle image preview click to open modal
+        $('.image-preview').on('click', function() {
+            const imgSrc = $(this).find('img').attr('src');
+            // Don't open modal for the placeholder image
+            if (imgSrc && !imgSrc.includes('avatar_2x.png')) {
+                $('#modalImage').attr('src', imgSrc);
+                $('#imagePreviewModal').modal('show');
+            }
+        });
+
+        // Close modal on click (either on image or backdrop)
+        $('#imagePreviewModal').on('click', function() {
+            $(this).modal('hide');
+        });
+
         // Custom Parsley validator for file size
         window.Parsley.addValidator('maxFileSize', {
             validateString: function(value, maxSize, parsleyInstance) {
diff --git a/app/Views/tpa_branch.php b/app/Views/tpa_branch.php
index 5422afed..22c8f2c7 100755
--- a/app/Views/tpa_branch.php
+++ b/app/Views/tpa_branch.php
@@ -29,6 +29,21 @@
     max-height: 80vh;
 }
 
+#tpaBranchModal {
+    padding-right: 0 !important;
+    z-index: 1060;
+}
+
+#tpaBranchModal.show {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-backdrop {
+    z-index: 1050;
+}
+
 #tpa-branch-datatable{
     width: 100% !important;
 }
@@ -47,6 +62,11 @@
     right: 11px !important;
 }
 
+/* Unset position on datatables filter to fix alignment issues */
+#tpa-branch-datatable_wrapper div.dataTables_filter {
+  position: unset !important;
+}
+
 /* Fix DataTables scroll header and body alignment */
 #tpa-branch-datatable_wrapper .dataTables_scrollHeadInner{
     box-sizing: content-box !important;
@@ -203,7 +223,7 @@
       <div class="modal-header flex-column">
         <div class="d-flex w-100 justify-content-between align-items-center">
           <h4 class="modal-title mb-0" id="modalLabel">New Branch</h4>
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+          <button type="button" class="close js-tpa-branch-close" data-dismiss="modal" data-bs-dismiss="modal" aria-hidden="true" onclick="hideTPABranchModal()">×</button>
         </div>
       </div>
       
@@ -219,69 +239,61 @@
               <!-- Branch Name & Code -->
               <div class="form-row">
                 <div class="form-group col-md-6">
-                  <label for="branch_name">Branch Name <span class="text-danger">*</span></label>
-                  <input type="text" class="form-control" id="branch_name"
-                                    placeholder="Enter Branch Name" name="branch_name" required>
+                    <label for="branch_name">Branch Name <span class="text-danger">*</span></label>
+                    <input type="text" class="form-control" id="branch_name" placeholder="Enter Branch Name" name="branch_name" required maxlength="255" data-parsley-maxlength="255">
                 </div>
                 <div class="form-group col-md-6">
-                  <label for="branch_code">Branch Code <span class="text-danger">*</span></label>
-                  <input type="text" class="form-control" id="branch_code"
-                                    placeholder="Enter Branch Code" name="branch_code" required>
+                    <label for="branch_code">Branch Code <span class="text-danger">*</span></label>
+                    <input type="text" class="form-control" id="branch_code" placeholder="Enter Branch Code" name="branch_code" required maxlength="100" data-parsley-maxlength="100">
                 </div>
               </div>
 
               <!-- Address Lines -->
               <div class="form-row">
                 <div class="form-group col-md-6">
-                  <label for="address1">Address Line 1 <span class="text-danger">*</span></label>
-                  <input type="text" class="form-control" id="address1" name="address1" placeholder="Enter Address 1" required>
+                    <label for="address1">Address Line 1 <span class="text-danger">*</span></label>
+                    <input type="text" class="form-control" id="address1" name="address1" placeholder="Enter Address 1" required maxlength="255" data-parsley-maxlength="255">
                 </div>
                 <div class="form-group col-md-6">
-                  <label for="address2">Address Line 2</label>
-                  <input type="text" class="form-control" id="address2" placeholder="Enter Address 2"  name="address2">
+                    <label for="address2">Address Line 2</label>
+                    <input type="text" class="form-control" id="address2" placeholder="Enter Address 2"  name="address2" maxlength="255" data-parsley-maxlength="255">
                 </div>
               </div>
 
               <!-- State & District -->
               <div class="form-row">
                 <div class="form-group col-md-6">
-                  <label for="state">State <span class="text-danger">*</span></label>
-                  <select class="form-control" id="state" name="state" required>
+                    <label for="state">State <span class="text-danger">*</span></label>
+                    <select class="form-control" id="state" name="state" required>
                                     <option value="">Select State</option>
                                     <?php if ($state) {
                                          foreach($state as $value) { ?>
                                             <option value="<?= $value['id'] ?>"><?= $value['state'] ?></option>
                                         <?php } }?>
-                  </select>
+                    </select>
                 </div>
                 <div class="form-group col-md-6">
-                  <label for="district">District <span class="text-danger">*</span></label>
-                  <input type="text" class="form-control" id="district"
-                                    placeholder="Enter District" name="district" required>
+                    <label for="district">District <span class="text-danger">*</span></label>
+                    <input type="text" class="form-control" id="district" placeholder="Enter District" name="district" required maxlength="100" data-parsley-maxlength="100">
                 </div>
               </div>
 
               <!-- City & Pincode -->
               <div class="form-row">
                 <div class="form-group col-md-6">
-                  <label for="branch_city">City <span class="text-danger">*</span></label>
-                  <input type="text" class="form-control" id="branch_city"
-                                    placeholder="Enter City" name="city" required>
+                    <label for="branch_city">City <span class="text-danger">*</span></label>
+                    <input type="text" class="form-control" id="branch_city" placeholder="Enter City" name="city" required maxlength="100" data-parsley-maxlength="100">
                 </div>
                 <div class="form-group col-md-6">
-                  <label for="pincode">Pincode <span class="text-danger">*</span></label>
-                  <input type="text" class="form-control" id="pincode" placeholder="Enter Pincode" name="pincode" required>
+                    <label for="pincode">Pincode <span class="text-danger">*</span></label>
+                    <input type="text" class="form-control" id="pincode" placeholder="Enter Pincode" name="pincode" required data-parsley-type="digits" data-parsley-length="[6,6]" maxlength="6">
                 </div>
               </div>
 
               <!-- Submit / Cancel -->
-                <div class="form-row">
-                  <!-- <div class="form-group col-md-12 mt-2"> -->
-                  <div style="margin-top: 85px;">
-                    <button type="submit" class="btn app-btn-secondary   mr-2" id="btnSubmit">Submit</button>
-                    <button type="button" class="btn app-btn-outline-secondary  btnBack" id="btnBack" data-dismiss="modal" aria-hidden="true">Cancel</button>
-                  </div>
-                <!-- </div> -->
+                <div class="form-group d-flex justify-content-end m-b-0 mt-4" id="hide_smbt_btn">
+                    <button type="button" class="btn app-btn-outline-secondary mr-2 js-tpa-branch-cancel" data-dismiss="modal" data-bs-dismiss="modal" aria-hidden="true" onclick="hideTPABranchModal()">Cancel</button>
+                    <button type="submit" class="btn app-btn-secondary waves-effect waves-light" id="btnSubmit">Submit</button>
                 </div>
             </div>
 
@@ -301,13 +313,13 @@
                 <div class="form-row">
                 <div class="form-group col-md-12">
                   <label for="name">Name <span class="text-danger">*</span></label>
-                  <input value="" type="text" class="form-control" placeholder="Enter Contact Name" name="name[]" id="name" required>
+                  <input value="" type="text" class="form-control" placeholder="Enter Contact Name" name="name[]" id="name" required maxlength="100" data-parsley-maxlength="100">
                 </div>
                 </div>
                 <div class="form-row">
                 <div class="form-group col-md-12">
                   <label for="designation">Designation <span class="text-danger">*</span></label>
-                  <input value="" type="text" class="form-control" placeholder="Enter Designation Name" name="designation[]" id="designation" required>
+                  <input value="" type="text" class="form-control" placeholder="Enter Designation Name" name="designation[]" id="designation" required maxlength="100" data-parsley-maxlength="100">
                 </div>
                 </div>
                 <div class="form-row">
@@ -344,6 +356,7 @@
 <script>
 
 var contactCount = 1;
+var tpaBranchDebugPrefix = '[TPABranch]';
 
 function resetTPABranchFormState() {
     var $form = $('#tpa_branch_form');
@@ -398,26 +411,175 @@ $(document).ready(function () {
 
     var tpa_Branch_PrimaryKey = $('#tpa_id_branch').val();
     var tpa_branch_form_action = '';
-    var myModal = new bootstrap.Modal(document.getElementById('tpaBranchModal'));
-        myModal.hide();
+
+    window.forceHideTPABranchModal = function () {
+        console.log(tpaBranchDebugPrefix + ' forceHideTPABranchModal() called.');
+        var modalEl = document.getElementById('tpaBranchModal');
+        if (modalEl) {
+            console.log(tpaBranchDebugPrefix + ' Modal element found. Hiding it.');
+            modalEl.classList.remove('show');
+            modalEl.style.display = 'none';
+            modalEl.setAttribute('aria-hidden', 'true');
+            modalEl.removeAttribute('aria-modal');
+        }
+        console.log(tpaBranchDebugPrefix + ' Removing modal-open class from body.');
+        document.body.classList.remove('modal-open');
+        console.log(tpaBranchDebugPrefix + ' Removing body padding-right style.');
+        document.body.style.removeProperty('padding-right');
+        console.log(tpaBranchDebugPrefix + ' Removing modal-backdrop.');
+        $('.modal-backdrop').remove();
+        console.log(tpaBranchDebugPrefix + ' forceHideTPABranchModal() finished.');
+    };
+
+    window.forceShowTPABranchModal = function () {
+        console.log(tpaBranchDebugPrefix + ' forceShowTPABranchModal() called.');
+        var modalEl = document.getElementById('tpaBranchModal');
+        if (!modalEl) {
+            console.log(tpaBranchDebugPrefix + ' Modal element not found. Aborting.');
+            return;
+        }
+
+        console.log(tpaBranchDebugPrefix + ' Displaying modal element.');
+        modalEl.style.display = 'block';
+        modalEl.classList.add('show');
+        modalEl.removeAttribute('aria-hidden');
+        modalEl.setAttribute('aria-modal', 'true');
+        document.body.classList.add('modal-open');
+
+        if (!document.querySelector('.modal-backdrop')) {
+            console.log(tpaBranchDebugPrefix + ' Creating and appending modal-backdrop.');
+            var backdrop = document.createElement('div');
+            backdrop.className = 'modal-backdrop fade show';
+            document.body.appendChild(backdrop);
+        } else {
+            console.log(tpaBranchDebugPrefix + ' Modal-backdrop already exists.');
+        }
+        console.log(tpaBranchDebugPrefix + ' forceShowTPABranchModal() finished.');
+    };
+
+    window.showTPABranchModal = function () {
+        console.log(tpaBranchDebugPrefix + ' showTPABranchModal() called.');
+        var $modal = $('#tpaBranchModal');
+        var modalEl = document.getElementById('tpaBranchModal');
+        try {
+            console.log(tpaBranchDebugPrefix + ' Trying to show modal using jQuery/Bootstrap.');
+            if (typeof jQuery !== 'undefined' && jQuery.fn && typeof jQuery.fn.modal === 'function') {
+                console.log(tpaBranchDebugPrefix + ' Using jQuery modal("show").');
+                $modal.modal('show');
+                console.log(tpaBranchDebugPrefix + ' Setting timeout to check if modal is visible.');
+                setTimeout(function () {
+                    console.log(tpaBranchDebugPrefix + ' Timeout check: Modal has "show" class:', $modal.hasClass('show'), 'Is visible:', $modal.is(':visible'));
+                    if (!$modal.hasClass('show') || !$modal.is(':visible')) {
+                        console.log(tpaBranchDebugPrefix + ' Modal not visible after timeout, forcing show.');
+                        window.forceShowTPABranchModal();
+                    }
+                }, 120);
+                console.log(tpaBranchDebugPrefix + ' showTPABranchModal() finished via jQuery path.');
+                return;
+            }
+            console.log(tpaBranchDebugPrefix + ' jQuery modal not available. Checking for Bootstrap 5 API.');
+            if (window.bootstrap && bootstrap.Modal && modalEl) {
+                if (typeof bootstrap.Modal.getOrCreateInstance === 'function') {
+                    console.log(tpaBranchDebugPrefix + ' Using bootstrap.Modal.getOrCreateInstance().show().');
+                    bootstrap.Modal.getOrCreateInstance(modalEl).show();
+                    console.log(tpaBranchDebugPrefix + ' showTPABranchModal() finished via BS5 getOrCreateInstance.');
+                    return;
+                }
+                if (typeof bootstrap.Modal.getInstance === 'function') {
+                    console.log(tpaBranchDebugPrefix + ' Using bootstrap.Modal.getInstance().');
+                    var existing = bootstrap.Modal.getInstance(modalEl);
+                    if (existing) {
+                        console.log(tpaBranchDebugPrefix + ' Existing BS5 instance found, calling show().');
+                        existing.show();
+                        console.log(tpaBranchDebugPrefix + ' showTPABranchModal() finished via existing BS5 instance.');
+                        return;
+                    }
+                }
+                console.log(tpaBranchDebugPrefix + ' Using new bootstrap.Modal().show().');
+                (new bootstrap.Modal(modalEl)).show();
+                console.log(tpaBranchDebugPrefix + ' showTPABranchModal() finished via new BS5 instance.');
+                return;
+            }
+        } catch (e) {
+            console.error(tpaBranchDebugPrefix + ' failed to show modal:', e);
+            console.log(tpaBranchDebugPrefix + ' Falling back to forceShowTPABranchModal().');
+            window.forceShowTPABranchModal();
+            return;
+        }
+        console.log(tpaBranchDebugPrefix + ' No standard modal methods found, falling back to forceShowTPABranchModal().');
+        window.forceShowTPABranchModal();
+    };
+
+    window.hideTPABranchModal = function () {
+        console.log(tpaBranchDebugPrefix + ' hideTPABranchModal() called.');
+        var $modal = $('#tpaBranchModal');
+        var modalEl = document.getElementById('tpaBranchModal');
+        if (!modalEl) {
+            console.log(tpaBranchDebugPrefix + ' Modal element not found. Aborting.');
+            return;
+        }
+
+        var closed = false;
+        try {
+            console.log(tpaBranchDebugPrefix + ' Trying to hide modal using jQuery/Bootstrap.');
+            if (typeof jQuery !== 'undefined' && jQuery.fn && typeof jQuery.fn.modal === 'function') {
+                console.log(tpaBranchDebugPrefix + ' Using jQuery modal("hide").');
+                $modal.modal('hide');
+                closed = true;
+            }
+            if (!closed && window.bootstrap && bootstrap.Modal && modalEl) {
+                console.log(tpaBranchDebugPrefix + ' jQuery modal not available/failed. Checking for Bootstrap 5 API.');
+                if (typeof bootstrap.Modal.getOrCreateInstance === 'function') {
+                    console.log(tpaBranchDebugPrefix + ' Using bootstrap.Modal.getOrCreateInstance().hide().');
+                    bootstrap.Modal.getOrCreateInstance(modalEl).hide();
+                    closed = true;
+                }
+                if (!closed && typeof bootstrap.Modal.getInstance === 'function') {
+                    console.log(tpaBranchDebugPrefix + ' Using bootstrap.Modal.getInstance().');
+                    var existing = bootstrap.Modal.getInstance(modalEl);
+                    if (existing) {
+                        console.log(tpaBranchDebugPrefix + ' Existing BS5 instance found, calling hide().');
+                        existing.hide();
+                        closed = true;
+                    }
+                }
+                if (!closed) {
+                    console.log(tpaBranchDebugPrefix + ' Using new bootstrap.Modal().hide().');
+                    (new bootstrap.Modal(modalEl)).hide();
+                    closed = true;
+                }
+            }
+        } catch (e) {
+            console.error('[TPABranch] Failed to hide modal, using fallback:', e);
+        }
+        if (!closed || modalEl.classList.contains('show')) {
+            console.log(tpaBranchDebugPrefix + ' Modal not closed or still has "show" class, using fallback.');
+            window.forceHideTPABranchModal();
+        }
+        console.log(tpaBranchDebugPrefix + ' hideTPABranchModal() finished.');
+    };
     // $('#add_branch').hide();
     // $('.btnBack').hide();
     
     loadBranchList();
 
     $('#btnBranchAdd').click(function(e){
+        console.log(tpaBranchDebugPrefix + ' #btnBranchAdd clicked.');
         if (e && typeof e.preventDefault === 'function') {
+            console.log(tpaBranchDebugPrefix + ' Preventing default click action.');
             e.preventDefault();
         }
 
+        console.log(tpaBranchDebugPrefix + ' Setting form action for create.');
         tpa_branch_form_action = '<?= base_url("master/tpa/branch/create"); ?>';
-        var myModal = new bootstrap.Modal(document.getElementById('tpaBranchModal'));
-        myModal.show();
+        console.log(tpaBranchDebugPrefix + ' Calling showTPABranchModal().');
+        window.showTPABranchModal();
         // $('#add_branch').show();
         // $('#branch_table').hide();
         // $('.btnBack').show();
         // $('#btnBranchAdd').hide();
 
+        console.log(tpaBranchDebugPrefix + ' Resetting form fields.');
         $('#branch_name').val('');
         $('#branch_code').val('');
         $('#state').val('');
@@ -429,43 +591,44 @@ $(document).ready(function () {
         $('#mobile').val('');
         $('#designation').val('');
 
+        console.log(tpaBranchDebugPrefix + ' Resetting "Add Contact" button visibility.');
         var addButton = document.getElementById('add');
         if (addButton.style.display === 'none') {
             addButton.style.display = 'block';
         }
 
+        console.log(tpaBranchDebugPrefix + ' Resetting contactCount to 1.');
         contactCount = 1
         
 
+        console.log(tpaBranchDebugPrefix + ' Clearing dynamically added contacts from localStorage and DOM.');
         var buttonIds = JSON.parse(localStorage.getItem('buttonIds')) || [];
+        console.log(tpaBranchDebugPrefix + ' Found buttonIds in localStorage:', buttonIds);
         for (var i = 0; i < buttonIds.length; i++) {
             var firstElement = buttonIds[i].split('_')[0];
-            console.log(firstElement);
+            console.log(tpaBranchDebugPrefix + ' Processing buttonId:', buttonIds[i], '-> element to remove ID:', firstElement);
 
             // Find the element by its ID
             var elementToRemove = document.getElementById(firstElement);
-            console.log(elementToRemove);
+            console.log(tpaBranchDebugPrefix + ' Found element to remove:', elementToRemove);
 
             if (elementToRemove) {
-                console.log(elementToRemove);
+                console.log(tpaBranchDebugPrefix + ' Removing element:', elementToRemove);
                 elementToRemove.parentNode.removeChild(elementToRemove);
             }
-            localStorage.removeItem('buttonIds')
         }
-    });
-
-    $('.btnBack').click(function(e){
-        if (e && typeof e.preventDefault === 'function') {
-            e.preventDefault();
-        }
-
-        var myModal = new bootstrap.Modal(document.getElementById('tpaBranchModal'));
-        myModal.hide();
+        localStorage.removeItem('buttonIds');
+        console.log(tpaBranchDebugPrefix + ' #btnBranchAdd click handler finished.');
     });
 
     $('#tpaBranchModal').on('hidden.bs.modal', function () {
         resetTPABranchFormState();
     });
+
+    $(document).on('click', '.js-tpa-branch-close, .js-tpa-branch-cancel', function (e) {
+        e.preventDefault();
+        window.hideTPABranchModal();
+    });
  
 
     if(tpa_Branch_PrimaryKey !== ''){
@@ -532,7 +695,7 @@ $(document).ready(function () {
                     }
                     $('#tpa_branch_list').append(tpaBranchTableInsert); 
                     $('#container').empty(); $('#contact_1_wrapper input').val('');
-                    $('#tpaBranchModal .close').trigger('click');
+                    window.hideTPABranchModal();
                     // $('#add_branch').hide();
                     // $('#branch_table').show();
                     // $('.btnBack').hide();
@@ -575,7 +738,7 @@ $(document).ready(function () {
                         $('.loader').fadeOut();
                         $('.loader-mask').delay(350).fadeOut('slow');
                     }, 1000);
-                    $('#tpaBranchModal .close').trigger('click');
+                    window.hideTPABranchModal();
                 }
             });
         }
@@ -599,8 +762,7 @@ $(document).ready(function () {
                 }, 1000);
                 console.log("tpa.............");
                 console.log(res)
-                var myModal = new bootstrap.Modal(document.getElementById('tpaBranchModal'));
-                    myModal.show();
+                window.showTPABranchModal();
                 // $('#add_branch').show();
                 // $('#branch_table').hide();
                 $('.btnBack').show();
@@ -788,13 +950,13 @@ function renumberContacts() {
             
             <div class="form-group col-md-12">
                 <label>Name<span class="text-danger">*</span></label>
-                <input value="${contact ? contact.name : ''}" type="text" class="form-control" placeholder="Enter Contact Name" name="name[]" required>
+                <input value="${contact ? contact.name : ''}" type="text" class="form-control" placeholder="Enter Contact Name" name="name[]" required maxlength="100" data-parsley-maxlength="100">
             </div>
         </div>
         <div class="form-row">
             <div class="form-group col-md-12">
                 <label>Designation<span class="text-danger">*</span></label>
-                <input value="${contact ? contact.designation : ''}" type="text" class="form-control" placeholder="Enter Designation Name" name="designation[]" required>
+                <input value="${contact ? contact.designation : ''}" type="text" class="form-control" placeholder="Enter Designation Name" name="designation[]" required maxlength="100" data-parsley-maxlength="100">
             </div>
         </div>
         <div class="form-row">
diff --git a/app/Views/tpa_onboarding.php b/app/Views/tpa_onboarding.php
index 5b02c209..dfa07812 100755
--- a/app/Views/tpa_onboarding.php
+++ b/app/Views/tpa_onboarding.php
@@ -29,8 +29,9 @@
     }
 </style>
 <script>
-    var pageSubTitle = 'TPA';
-    var pageBackButton = '<a href="#" onclick="history.back(); return false;" data-toggle="tooltip" data-placement="top" title="Back"><i class="mdi mdi-arrow-left" style="font-size: 17px;"></i></a>';
+    var pageHideMainNavTitle = true;
+    var pageTitle = 'TPA';
+    var pageBackButton = '<a href="<?= base_url('master/tpa/list') ?>" class="topbar-icon-btn" data-toggle="tooltip" data-placement="top" title="Back" aria-label="Back"><i class="ri-arrow-left-s-line"></i></a>';
 </script>
 
 <div class="row" id="tpa_add">
diff --git a/app/Views/vehicle_master_list.php b/app/Views/vehicle_master_list.php
index ddd2873e..b3066d8a 100644
--- a/app/Views/vehicle_master_list.php
+++ b/app/Views/vehicle_master_list.php
@@ -184,8 +184,8 @@
                         </div>
 
                     </div>
-                    <div class="form-group text-right m-b-0" id="hide_smbt_btn">
-                        <button class="btn app-btn-outline-secondary  mr-2 close" type="button" data-dismiss="modal" aria-hidden="true">Cancel</button>
+                    <div class="form-group d-flex justify-content-end m-b-0" id="hide_smbt_btn">
+                        <button class="btn app-btn-outline-secondary mr-2" type="button" data-dismiss="modal" aria-hidden="true">Cancel</button>
                         <button type="submit" id="btnSubmit" class="btn app-btn-secondary  waves-effect waves-light" id="cd_master_btn_Submit">Submit</button>
                     </div>
                 </form>
diff --git a/app/Views/view_deposit.php b/app/Views/view_deposit.php
index 3a290002..d5ac90df 100755
--- a/app/Views/view_deposit.php
+++ b/app/Views/view_deposit.php
@@ -1,61 +1,104 @@
 
 <style>
+    .table th,
+    .table td {
+        padding: 8px;
+    }
+    table.dataTable tbody td {
+        padding: 4px 4px !important;
+    }
+    .deposit-header {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-wrap: wrap;
+    }
+    .deposit-summary-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+    }
     .metrics{
-        border:1px solid lightgrey;border-radius:10px;box-shadow: 0px 4px 4px 0px #00000040;
-        min-width: none;
-        max-width: 350px;
+        border:1px solid lightgrey;
+        border-radius:10px;
+        box-shadow: 0px 4px 4px 0px #00000040;
+        width: 100%;
+        max-width: 100%;
+        padding: 12px;
+        min-height: 64px;
     }
     .dataTables_length label {height: 21px !important;}
+    #scroll-horizontal-datatable tbody tr:hover { background-color: #e0e0e0; }
+    @media (max-width: 767.98px) {
+        .deposit-title {
+            font-size: 22px;
+        }
+        .deposit-account-title,
+        .deposit-summary-title {
+            font-size: 18px;
+            margin-bottom: 0;
+        }
+    }
 </style>
+<?php
+    $depositNavTitle = 'Transaction Details - ' . (isset($insurerName->name) ? $insurerName->name : '');
+    $depositBackUrl  = base_url('client/deposit/' . (isset($clientData->id) ? $clientData->id : ''));
+?>
+<script>
+    var pageHideMainNavTitle = true;
+    var pageTitle = <?= json_encode($depositNavTitle, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE) ?>;
+    var pageBackButton = '<a href="<?= esc($depositBackUrl, 'attr') ?>" class="topbar-icon-btn" data-toggle="tooltip" data-placement="top" title="Back" aria-label="Back"><i class="ri-arrow-left-s-line"></i></a>';
+</script>
 
 <div class="row">
     <div class="col-12">
         <div class="card">
             <div class="card-body">
 
-                <div style="display: flex; align-items: center;">
-                    <a href="<?= base_url("client/deposit/$clientData->id"); ?>" style="color:black; font-size: 40px; margin-right: 10px;">
-                        <i class="mdi mdi-chevron-left"></i>
-                    </a>
-                    <h3 style="margin: 0;">Transaction Details - <?php echo $insurerName->name; ?></h3>
-                </div>
-
-                <br>
-
-                <div class="d-flex justify-content-between">
-                    <div><h4>CD Account No :  <?php echo isset($insurerName->cd_master_account_no) && !empty($insurerName->cd_master_account_no) ? $insurerName->cd_master_account_no : 'N/A' ?></h4></div>
-                    <div> <h4>Deposit Summary Of <?php echo $clientData->short_name?></h4></div>
+                <div class="deposit-summary-row">
+                    <div><h4 class="deposit-account-title">CD Account No :  <?php echo isset($insurerName->cd_master_account_no) && !empty($insurerName->cd_master_account_no) ? $insurerName->cd_master_account_no : 'N/A' ?></h4></div>
+                    <div><h4 class="deposit-summary-title">Deposit Summary Of <?php echo $clientData->short_name?></h4></div>
                 </div>
                 <div>
                     <div class="row text-center">
 
-                        <div class="col-3 d-flex justify-content-between align-items-center metrics mr-2 mt-2">
+                        <div class="col-12 col-sm-6 col-lg-3 mt-2">
+                        <div class="d-flex justify-content-between align-items-center metrics">
                             <span class="text-muted font-15 mb-1 text-truncate">Deposits</span>
                             <h4 style="font-size: 18px;display:inline;"><i
                                     class="fe-arrow-up text-success mr-1" ></i>₹<?php echo $deposiamount->total_credit?>
                             </h4>
                         </div>
+                        </div>
 
-                        <div class="col-3 d-flex justify-content-between align-items-center metrics mr-2 mt-2">
+                        <div class="col-12 col-sm-6 col-lg-3 mt-2">
+                        <div class="d-flex justify-content-between align-items-center metrics">
                             <span class="text-muted font-15 mb-1 text-truncate">Consumed</span>
                             <h4 style="font-size: 20px;display:inline;"><i
                                     class="fe-arrow-down text-danger mr-1"></i>₹<?php echo $deposiamount->total_withdraw?>
                             </h4>
                         </div>
+                        </div>
 
-                        <div class="col-3 d-flex justify-content-between align-items-center metrics mr-2 mt-2">
+                        <div class="col-12 col-sm-6 col-lg-3 mt-2">
+                        <div class="d-flex justify-content-between align-items-center metrics">
                             <span class="text-muted font-15 mb-1 text-truncate">Refund</span>
                             <h4 style="font-size: 20px;display:inline;"><i
                                     class="fe-arrow-up text-success mr-1"></i>₹<?php echo $deposiamount->total_refund?>
                             </h4>
                         </div>
+                        </div>
 
-                        <div class="col-3 d-flex justify-content-between align-items-center metrics mr-2 mt-2">
+                        <div class="col-12 col-sm-6 col-lg-3 mt-2">
+                        <div class="d-flex justify-content-between align-items-center metrics">
                             <span class="text-muted font-15 mb-1 text-truncate">Current Balance</span>
                             <h4 style="font-size: 20px;display:inline;"><i
-                                    class="fe-credit-card text-sucess mr-1"></i>₹<?php echo $deposiamount->balance?>
+                                    class="fe-credit-card text-success mr-1"></i>₹<?php echo $deposiamount->balance?>
                             </h4>
                         </div>
+                        </div>
 
                     </div>
                 </div>
@@ -79,8 +122,8 @@
                     </div>
                 </div> -->
 
-                <table data-custom-table-css="table" class="table table-sm table-hover m-0 table-centered dt-responsive w-100" cellspacing="0"
-                    id="tickets-table">
+                <div class="table-responsive">
+                <table data-custom-table-css="table" class="table mb-0 nowrap w-100 table-centered" cellspacing="0" id="scroll-horizontal-datatable">
                     <thead class="bg-light">
                         <tr>
                             <th class="font-weight-medium">Date</th>
@@ -128,6 +171,7 @@
                     </tbody>
 
                 </table>
+                </div>
             </div>
         </div>
     </div>
@@ -255,7 +299,8 @@
             allowInput: false,
 
         });
-        $('#tickets-table').DataTable({
+        $('#scroll-horizontal-datatable').DataTable({
+                scrollX: true,
                 // dom: "<'row'<'col-sm-2'f><'col-sm-10 text-right'B>>" + 
                 //     "<'row'<'col-sm-12'tr>>" + 
                 //     "<'row'<'col-sm-5'i><'col-sm-7'p>>", 
@@ -300,7 +345,7 @@
                 //         }
                 //     }
                 // ],
-                dom: "<'row'<'col-12 d-flex justify-content-between'<'datatable-search dataTables_filter'f><'datatable-buttons dt-buttons'B>>>" +
+                dom: "<'row'<'col-sm-6'f><'col-sm-6 text-right'B>>" +
                 "<'row'<'col-sm-12'tr>>" +
                 "<'row align-items-center'<'col-5 text-start'i><'col-7 d-flex justify-content-end align-items-center'<'me-2'l>p>>",
                 lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
@@ -326,26 +371,12 @@
                                         className: 'app-btn-primary ',
                                     },
                                     {
-                                extend: 'pdf',
-                                text: 'PDF',
-                                text: '<i class="mdi mdi-file-pdf" ></i><span class="  btn-custom">  EXCEL </span>',
-                                title: 'TransactionDetails',
+                                extend: 'excel',
+                                text: '<i class="mdi mdi-file-excel " ></i><span class="  btn-custom">  EXCEL </span>',
+                                title: 'CD TransactionDetails',
+                                sheetName: 'CD TransactionDetails',
                                 exportOptions: {
-                                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
-                                    format: {
-                                        body: function (data, row, column, node) {
-                                            return data.replace(/<.*?>/g, '');
-                                        }
-                                    }
-                                },
-                                customize: function (doc) {
-                                    doc.pageOrientation = 'landscape';
-                                    doc.styles.tableHeader.alignment = 'left';
-                                    doc.defaultStyle.alignment = 'left';
-                                    doc.content[1].table.widths = [
-                                        '9%', '9%', '8%', '9%', '10%',
-                                        '9%', '9%', '9%', '9%', '11%', '8%'
-                                    ];
+                                    orthogonal: 'sort'
                                 }
                             }
                         ]
diff --git a/public/assets/css/custom.css b/public/assets/css/custom.css
index 99eb4b5a..160dea96 100644
--- a/public/assets/css/custom.css
+++ b/public/assets/css/custom.css
@@ -646,14 +646,14 @@ table[data-custom-table-css="second-table"].app-table-card tbody.app-table-body
 }
 
 /* Reduce header/body padding globally for listing tables */
-table[data-custom-table-css="table"].dataTable thead th,
+/* table[data-custom-table-css="table"].dataTable thead th,
 table[data-custom-table-css="second-table"].dataTable thead th {
   padding-top: 10px !important;
-  padding-bottom: 10px !important;
+  padding-bottom: 10px !important; */
   /* Match body cell horizontal inset so header labels line up with td text */
-  padding-left: 0.75rem !important;
+  /* padding-left: 0.75rem !important;
   padding-right: 0.75rem !important;
-}
+} */
 
 table[data-custom-table-css="table"] tbody td,
 table[data-custom-table-css="second-table"] tbody td {
diff --git a/public/assets/images/403_page.jpg b/public/assets/images/403_page.jpg
new file mode 100644
index 00000000..029d6b85
Binary files /dev/null and b/public/assets/images/403_page.jpg differ
diff --git a/public/assets/images/404.png b/public/assets/images/404.png
new file mode 100644
index 00000000..a7115daf
Binary files /dev/null and b/public/assets/images/404.png differ
diff --git a/public/assets/images/404_page.jpg b/public/assets/images/404_page.jpg
new file mode 100644
index 00000000..3daecd73
Binary files /dev/null and b/public/assets/images/404_page.jpg differ
diff --git a/public/assets/images/errors/403 page design.jpg b/public/assets/images/errors/403 page design.jpg
new file mode 100644
index 00000000..029d6b85
Binary files /dev/null and b/public/assets/images/errors/403 page design.jpg differ
diff --git a/public/assets/images/errors/403_illustration.jpeg b/public/assets/images/errors/403_illustration.jpeg
new file mode 100644
index 00000000..a3b8c7cf
Binary files /dev/null and b/public/assets/images/errors/403_illustration.jpeg differ
diff --git a/public/assets/images/errors/404 page design.jpg b/public/assets/images/errors/404 page design.jpg
new file mode 100644
index 00000000..3daecd73
Binary files /dev/null and b/public/assets/images/errors/404 page design.jpg differ
diff --git a/public/assets/images/errors/404_illustration.jpg b/public/assets/images/errors/404_illustration.jpg
new file mode 100644
index 00000000..e69197a6
Binary files /dev/null and b/public/assets/images/errors/404_illustration.jpg differ