diff --git a/app/Views/thz_list.php b/app/Views/thz_list.php
index fd9008db..7df537c2 100644
--- a/app/Views/thz_list.php
+++ b/app/Views/thz_list.php
@@ -1,23 +1,38 @@
 <style>
+.table th,
+.table td {
+    padding: 8px;
+}
+
+table.dataTable tbody td {
+    padding: 4px 4px !important;
+}
 
 .col-12 {
-
     max-width: 98% !important;
 }
 
-
-.right-align-input {
-    text-align: right;
+.dataTables_filter {
+    position: absolute;
 }
 
-.text-custom {
-    font-weight: 400;            
-    font-style: normal;          
-    font-size: 11px;
-    line-height: 1.44;           
-    letter-spacing: -0.02em;     
+.highlight {
+    border: 2px solid red; 
+    background-color: #ffe6e6; 
 }
 
+.column-header {
+    margin-right: 10px;
+}
+
+
+.btn {
+    font-size: 0.9rem;
+    padding: 0.5rem 1rem;
+}
+
+/* Modeal class */
+
 </style>
 
 <style>
@@ -27,53 +42,46 @@
   color: #6c757d !important; 
 }
 
-table.dataTable td.wrap {
-    white-space: normal !important; 
-    word-break: break-word; 
-}
-
 </style>
 
 
-<div class="col-12">
-    <div class="card">
-        <div class="card-body maincard">
-            <div class="row">
-                <div class="col-6" style="align-self: center;">
-                    <p class="title-text  font-color-black" style="position: relative;">Tickets </p>
-                </div>
-            </div>
-            <div>
-                <table data-custom-table-css="table" id="scroll-horizontal-datatable" class="table w-100 nowrap text-custom-black text-custom  app-datatable">
-                    <thead class="bg-light">
-                        <tr>
-                            <th>Ticket ID</th>
-                            <th class="text-left">Name</th>
-                            <th>Policy Number</th>
-                            <th>Ticket Type</th>
-                            <th>Subject</th>
-                            <th>Status</th>
-                            <th class="text-left">Assign To</th>
-                            <th>Created At</th>
-                            <th>Updated At</th>
-                        </tr>
-                    </thead>
-                    <tbody class="app-table-body">
-                        <?php if (isset($ticket_data)) { ?>
-                            <?php foreach($ticket_data as $index => $row){ ?>
 
-                                    <tr data-id="<?= $row['thz_id']; ?>" style="cursor: pointer;">
-                                    <td class="text-right"><?php echo $row['thz_id']; ?></td>
-                                    <td class="text-left">
-                                        <?php echo $row['name']; ?> 
-                                        <span class="text-custom-grey"><?php if (!empty($row['empcode'])): echo '('.$row['empcode'].')'; endif; ?></span><br>
-                                        <span class="text-custom-grey"><?php if (!empty($row['mobile'])): echo $row['mobile']; endif; ?></span>
-                                    </td>
-                                    <td class="text-center"><?php echo (!empty($row['policy_no']) && strtolower($row['policy_no']) !== 'null') 
+<div class="row" id="ticket_list">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body">
+                <div>
+                    <div class="table-responsive">
+                        <table data-custom-table-css="table" class="table mb-0 nowrap w-100 table-centered" cellspacing="0" id="tickets-table">
+
+                            <thead class="bg-light">
+                                <tr>
+                                    <th><div class="column-header">Ticket ID&nbsp;</div></th>
+                                    <th class="text-left"><div class="column-header">Name &nbsp;</div></th>
+                                    <th><div class="column-header">Policy Number &nbsp;</div></th>
+                                    <th><div class="column-header">Ticket Type &nbsp;</div></th>
+                                    <th><div class="column-header">Subject &nbsp;</div></th>
+                                    <th><div class="column-header">Status &nbsp;</div></th>
+                                    <th class="text-left"><div class="column-header">Assign To &nbsp;</div></th>
+                                    <th><div class="column-header">Created At &nbsp;</div></th>
+                                    <th><div class="column-header">Updated At &nbsp;</div></th>
+                                </tr>
+                            </thead>
+
+                            <tbody class="app-table-body">
+                                <?php if(isset($ticket_data)) { ?>
+                                    <?php foreach($ticket_data as $index => $row){ ?>
+                                      <tr data-id="<?= $row['thz_id']; ?>" style="cursor: pointer;">
+                                        <td class="text-center"><?php echo $row['thz_id']; ?></td>
+                                        <td class="text-left"><?php echo $row['name']; ?> 
+                                          <span class="text-custom-grey"><?php if (!empty($row['empcode'])): echo '('.$row['empcode'].')'; endif; ?></span><br>
+                                          <span class="text-custom-grey"><?php if (!empty($row['mobile'])): echo $row['mobile']; endif; ?></span>
+                                        </td>
+                                        <td class="text-center"><?php echo (!empty($row['policy_no']) && strtolower($row['policy_no']) !== 'null') 
                                               ? $row['policy_no'] 
                                               : 'N/A'; ?>
                                     </td>
-                                    <td class="text-center"><?php echo $row['ticket_type']  ? $row['ticket_type'] : '-'; ?></td>
+                                    <td class="text-center"><?php echo $row['ticket_type']  ? $row['ticket_type'] : 'N/A'; ?></td>
                                     <td class="text-center wrap" title="<?php echo htmlspecialchars($row['subject']); ?>">
                                       <?php 
                                           $subject = $row['subject'] ? $row['subject'] : 'N/A';
@@ -82,11 +90,11 @@ table.dataTable td.wrap {
                                               : htmlspecialchars($subject);
                                       ?>
                                     </td>
-                                    <td class="text-center"><?php echo $row['status'] ? $row['status'] : '-' ; ?></td>
-                                    <td class="text-left"><?php echo $row['assignee_name'] ? $row['assignee_name'] : '-'; ?></td>        
+                                    <td class="text-center"><?php echo $row['status'] ? $row['status'] : 'N/A' ; ?></td>
+                                    <td class="text-left"><?php echo $row['assignee_name'] ? $row['assignee_name'] : 'N/A'; ?></td>        
                                     <td class="text-left">
                                     <?php if (!empty($row['created_at'])):
-                                        $cd =  date("j F Y", strtotime($row['created_at']));
+                                        $cd =  date("j M Y", strtotime($row['created_at']));
                                         $ct =  date("h:i a", strtotime($row['created_at']));
                                         echo $cd . "<br><span class='time'> " . $ct . "</span>"; 
                                         endif;
@@ -94,23 +102,27 @@ table.dataTable td.wrap {
                                     </td>
                                     <td class="text-left">
                                     <?php if (!empty($row['updated_at'])):
-                                        $ud =  date("j F Y", strtotime($row['updated_at']));
+                                        $ud =  date("j M Y", strtotime($row['updated_at']));
                                         $ut =  date("h:i a", strtotime($row['updated_at']));
                                         echo $ud . "<br><span class='time'> " . $ut . "</span>"; 
                                         endif;
                                     ?>
                                     </td>
-                                </tr>
-                            <?php } ?>
-                        <?php } ?>
-                    </tbody>
-                </table>
-
-                <div>
+                                    </tr>
+                                    <?php } ?>
+                                <?php } else { ?>
+                                    <tr>
+                                        <td colspan="9" class="text-center">No data available</td>
+                                    </tr>
+                                <?php } ?>
+                            </tbody>
+                            
+                        </table>
+                    </div>
                 </div>
             </div>
-        </div><!-- end col -->
-    </div>
+        </div>
+    </div><!-- end col -->
 </div>
 
 <div class="modal fade " id="ticketModal" tabindex="-1" role="dialog" aria-hidden="true">
@@ -306,8 +318,80 @@ table.dataTable td.wrap {
 </div>
 
 
+
 <script>
 
+    // Datatable document ready
+    $(document).ready(function() {
+
+        var ticketsTable = $('#tickets-table');
+
+        if (ticketsTable.length) {
+            ticketsTable.DataTable({
+                scrollX: true,
+                dom: "<'row'<'col-sm-7'f><'col-sm-5 text-right'B>>" + // Filter left, buttons right
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'row'<'col-sm-5'i><'col-sm-7'p>>", // Pagination at the bottom, without page length selector
+                buttons: [            
+                   {
+                        text: '<i class="mdi mdi-plus" ></i><span class=" btn-custom">  Create New Ticket </span>',
+                        className: 'btn app-btn-primary  mr-2',
+                        action: function(e, dt, node, config) { 
+                            openTicket();
+                        }
+                    },
+                    {
+                        extend: 'collection',
+                        text: '<span class=" btn-custom"> Export </span><i class="mdi mdi-menu-down"></i>',
+                        className: 'btn app-btn-secondary ',
+                        buttons: [
+                                    {
+                                        extend: 'csv',
+                                        text: '<i class="mdi mdi-file-delimited " ></i><span class="  btn-custom">  CSV </span>',
+                                        className: 'app-btn-primary ',
+                                        title: 'Tickets',
+                                        exportOptions: {
+                                          format: {
+                                            body: function (data, row, column, node) {
+                                              // Replace <br> with a space
+                                              data = data.replace(/<br\s*\/?>/gi, " ");
+                                              // Remove any other HTML tags
+                                              data = data.replace(/<[^>]*>?/gm, "");
+                                              return data.trim();
+                                            }
+                                          }
+                                        }
+                                    },
+                                    {
+                                      extend: 'excel',
+                                      text: '<i class="mdi mdi-file-excel " ></i><span class="  btn-custom">  EXCEL </span>',
+                                      exportOptions: {
+                                          orthogonal: 'sort'
+                                      },
+                                      className: 'app-btn-primary ',
+                                      title: 'Tickets'
+                                    }
+                        ]
+                    }
+                ],
+                 language: {
+                  search: `
+                  <div class="datatable-search-wrapper">
+                      _INPUT_
+                      <i class="mdi mdi-magnify datatable-search-icon"></i>
+                  </div>`,
+                  searchPlaceholder: "Search"
+                },
+                paging: true,
+                pageLength: 25,
+                order: [[0, 'desc']]
+            });
+        } else {
+            console.error("Table not found.");
+        }
+    });
+
+
     function openTicket(){
         var form = document.getElementById('ticketForm');
         form.reset(); 
@@ -583,61 +667,6 @@ $(document).ready(function() {
     $("#modal_assignee").select2();
     hideandshowpolicy();
 
-    var ticketsTable = $('#scroll-horizontal-datatable');
-
-    if (ticketsTable.length) {
-
-      ticketsTable.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>>", 
-          buttons: [
-              {
-                  text: '<i class="mdi mdi-plus" ></i><span class=" btn-custom">  Create New Ticket </span>',
-                  className: 'btn app-btn-primary  mr-2',
-                  action: function(e, dt, node, config) { 
-                      openTicket();
-                  }
-              },
-              {
-                  extend: 'collection',
-                  text: '<span class=" btn-custom"> Export </span><i class="mdi mdi-menu-down"></i>',
-                  className: 'btn app-btn-secondary ',
-                  buttons: [
-                            {
-                                extend: 'csv',
-                                text: '<i class="mdi mdi-file-delimited " ></i><span class="  btn-custom">  CSV </span>',
-                                className: 'app-btn-primary ',
-                            },
-                            {
-                                extend: 'excel',
-                                text: '<i class="mdi mdi-file-excel " ></i><span class="  btn-custom">  EXCEL </span>',
-                                exportOptions: {
-                                    orthogonal: 'sort'
-                                },
-                                className: 'app-btn-primary ',
-                            }
-                  ]
-              }
-          ],
-          language: {
-            search: `
-            <div class="datatable-search-wrapper">
-                _INPUT_
-                <i class="mdi mdi-magnify datatable-search-icon"></i>
-            </div>`,
-            searchPlaceholder: "Search"
-          },
-          paging: true,
-          pageLength: 25,
-          order: [[0, 'desc']]
-      });
-
-    } else {
-        console.error("Table Not found.");
-    }
-
     const subjectInput = document.getElementById("subject");
     const subjectCounter = document.getElementById("subjectCounter");