diff --git a/app/Views/endorsement_list.php b/app/Views/endorsement_list.php
new file mode 100644
index 00000000..75e5509c
--- /dev/null
+++ b/app/Views/endorsement_list.php
@@ -0,0 +1,259 @@
+<style>
+    .table th,
+    .table td {
+        padding: 8px;
+    }
+
+    table.dataTable tbody td {
+        padding: 4px 4px !important;
+    }
+</style>
+
+<div class="row">
+    <div class="col-xl-6">
+        <div id="accordion" class="mb-3">
+            <div class="card mb-1">
+                <h5 class="m-1">
+                    <a id="toggleIcon" class="text-dark float-right" data-toggle="collapse" href="#collapseOne"
+                        aria-expanded="true">
+                        <i id="icon" class="mdi mdi-chevron-down mr-1 text-primary" style="font-size: 28px;"></i>
+                    </a>
+                </h5>
+                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
+                    <div class="card-body">
+                        <!-- <div class="text-center"> -->
+                        <div class="row">
+                            <div class="col-md-6 col-xl-3">
+                                <div class="form-group mb-3">
+                                    <label>Client</label> <br />
+                                    <select class="form-control" id="clients">
+                                        <option value="0">Select</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="col-md-6 col-xl-3">
+                                <div class="form-group mb-3">
+                                    <label>Policy</label> <br />
+                                    <select class="form-control" id="policies">
+                                        <option value="0">Select</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-12" style="text-align: right;">
+                                <a href="<?= base_url("employee/endorsement-list"); ?>"
+                                    class="btn btn-primary waves-effect waves-light" id="get-emp-list"
+                                    onclick="fetchEmpolyeeList(event);">Submit</a>
+                            </div>
+                        </div>
+                        <!-- </div> -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+<div class="row" id="client_list">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+                <div class="row" style="padding-bottom: 10px;">
+                    <div class="col-6" style="align-self: center;">
+                        <h4 class="header-title" style="position: relative;">Endorsement List</h4>
+                    </div>
+
+                </div>
+                <table class="table table-hover m-0 table-centered dt-responsive nowrap w-100" cellspacing="0"
+                    id="tickets-table">
+                    <thead class="bg-light">
+                        <tr>
+                            <th class="font-weight-medium">SNO</th>
+                            <th class="font-weight-medium">Name/code</th>
+                            <th class="font-weight-medium">Policy name</th>
+                            <th class="font-weight-medium">Insurar name</th>
+                            <th class="font-weight-medium">TPA ID</th>
+                            <th class="font-weight-medium">UHID ID</th>
+                            <th class="font-weight-medium">Policy status</th>
+                            <th class="font-weight-medium">Premium</th>
+                            <th class="font-weight-medium">Action</th>
+                        </tr>
+                    </thead>
+
+                    <tbody class="font-12">
+                        <?php 
+                        if(isset($employees))
+                        {
+                        foreach ($employees as $key => $employee) { ?>
+
+                        <tr>
+                            <td><b><?php echo ($key + 1)?></b></td>
+                            <!-- <td><?php echo $employee['emp_code']?></td> -->
+                            <td><?php echo $employee['name']?>( <?php echo $employee['emp_code']?> )</td>
+                            <td><?php echo $employee['policy_name']?></td>
+                            <td><?php echo $employee['insurer_short_name']?></td>
+                            <td><?php echo $employee['tpa_id']?></td>
+                            <td><?php echo $employee['uhid']?></td>
+                            <td><span class="badge badge-success">active</span></td>
+                            <td><?php echo $employee['premium']?></td>
+                            <td>
+                                <div class="btn-group dropdown">
+                                    <a href="javascript: void(0);"
+                                        class="dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown"
+                                        aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
+                                    <div class="dropdown-menu dropdown-menu-right">
+                                        <a class="dropdown-item" href="#"><i
+                                                class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>Edit
+                                            Ticket</a>
+                                        <a class="dropdown-item" href="#"><i
+                                                class="mdi mdi-check-all mr-2 text-muted font-18 vertical-middle"></i>Close</a>
+                                        <a class="dropdown-item" href="#"><i
+                                                class="mdi mdi-delete mr-2 text-muted font-18 vertical-middle"></i>Remove</a>
+                                        <a class="dropdown-item" href="#"><i
+                                                class="mdi mdi-star mr-2 font-18 text-muted vertical-middle"></i>Mark as
+                                            Unread</a>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                        <?php }}?>
+
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div><!-- end col -->
+</div>
+<!-- end row -->
+<div id="loader" class="loader" style="display:none;">SPINNER</div>
+
+<script>
+// Declare a global variable to store API response data
+var clientPolicies = [];
+
+$(document).ready(function() {
+    console.log("document loaded");
+    //fetchClientPolicies();
+
+});
+
+$(window).on("load", function() {
+    console.log("window loaded");
+    fetchClientPolicies();
+
+});
+
+
+function fetchClientPolicies() {
+    $('#loader').show();
+    var apiURL = '<?php echo base_url();?>' + 'util/clients-with-policies';
+    console.log('fetchClientPolicies');
+    console.log(apiURL);
+    $.ajax({
+        url: apiURL,
+        method: 'GET',
+        headers: {
+            "Content-Type": "application/json",
+            "X-Requested-With": "XMLHttpRequest"
+        },
+        success: function(response) {
+            // console.log(response.code);
+            // console.log(response.dataStatus);
+            // console.log(response.data);
+            if (response.code === 200 && response.dataStatus === true && response.data !== "") {
+                try {
+                    clientPolicies = (response.data);
+                    // console.log(clientPolicies);
+                    appendClients(clientPolicies);
+                } catch (error) {
+                    console.error('Error parsing API response data:', error);
+                }
+            } else if (response.code === 404 && response.dataStatus === false) {
+                console.error('no data found', response);
+            } else {
+                console.error('Something went wrong!');
+            }
+        },
+        error: function(xhr, status, error) {
+            console.error('Error fetching data from API:', error);
+        }
+    });
+
+    $('#loader').hide();
+}
+
+
+function appendClients(data) {
+    $.each(data, function(index, item) {
+        $('#clients').append($('<option>', {
+            value: item.id,
+            text: item.client_name
+        }));
+    });
+}
+
+function appendPolicies(data) {
+    $('#policies').empty();
+    $('#policies').append($('<option>', {
+        value: '0',
+        text: 'Select'
+    }));
+
+    $.each(data, function(index, item) {
+        $('#policies').append($('<option>', {
+            value: item.id,
+            text: item.name
+        }));
+    });
+}
+
+$('#clients').on('change', function() {
+    var selectedClient = $(this).val();
+    console.log(selectedClient);
+    // $('#selectedOptionInfo').text('Selected option: ' + selectedOption);
+
+    // Check if the selected option exists in apiData
+    var foundPolicies = clientPolicies.find(function(item) {
+        return item.id === selectedClient;
+    });
+    console.log(foundPolicies.policies);
+    appendPolicies(foundPolicies.policies);
+});
+
+// Function to convert object to query parameters
+function objectToQueryString(obj) {
+    return Object.keys(obj).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');
+}
+
+function fetchEmpolyeeList(event) {
+    event.preventDefault(); // Prevent default action
+
+    var client_id = $('#clients').val();
+    var policy_id = $('#policies').val();
+    console.log(client_id + '-' + policy_id);
+    if (client_id == '0' || policy_id == '0') {
+        alert('Please select values in both dropdowns.');
+        return;
+    }
+
+    var queryParams = {
+        client_id: client_id,
+        policy_id: policy_id
+    };
+
+    const queryString = objectToQueryString(queryParams);
+    const apiURL = $('#get-emp-list').attr('href') + "?" + queryString;
+    console.log(apiURL);
+    window.location.href = apiURL;
+
+}
+
+document.getElementById('toggleIcon').addEventListener('click', function() {
+    var icon = document.getElementById('icon');
+    icon.classList.toggle('mdi-chevron-down');
+    icon.classList.toggle('mdi-chevron-up');
+});
+</script>
\ No newline at end of file