diff --git a/resources/views/client-auth/login.blade.php b/resources/views/client-auth/login.blade.php
index ee1f7f9..e53e4e3 100644
--- a/resources/views/client-auth/login.blade.php
+++ b/resources/views/client-auth/login.blade.php
@@ -1,4 +1,5 @@
 <!doctype html>
+<!--  -->
 <html lang="en">
 <head>
     <meta charset="utf-8">
@@ -80,7 +81,13 @@
                             @csrf
                             <div class="mb-3">
                                 <label for="companyEmail" class="form-label fw-semibold">Email</label>
-                                <input type="email" name="email" class="form-control" id="companyEmail" placeholder="client@click-mobile.com" value="" autocomplete="">
+                                <div class="input-group">
+                                    <span class="input-group-text bg-white border-end-0 rounded-start-4">
+                                        <i class="bi bi-envelope-at"></i>
+                                    </span>
+                                
+                                <input type="email" name="email" class="form-control" id="companyEmail" placeholder="" value="" autocomplete="">
+                                </div>
                             </div>
 
                             <div class="mb-3">
diff --git a/resources/views/client-traffic/index-test.blade.php b/resources/views/client-traffic/index-test.blade.php
index a7fd85c..2414987 100644
--- a/resources/views/client-traffic/index-test.blade.php
+++ b/resources/views/client-traffic/index-test.blade.php
@@ -9,7 +9,14 @@
 
 @endsection
 @section('content')
-
+<div id="loadingOverlay" 
+     style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; 
+            background:rgba(255,255,255,0.8); z-index:9999; 
+            align-items:center; justify-content:center;">
+  <div class="spinner-border text-primary" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+</div>
         <section class="traffic-hero mb-4">
             <div class="row g-4 align-items-end">
                 <div class="col-lg-8">
@@ -55,9 +62,9 @@
                         <div class="col-md-6">
                             <input id="endDate" name="end_date" type="text" class="form-control" placeholder="Select End Date">
                         </div>
-                        <div id="loadingSpinner" class="spinner-border text-primary" role="status" style="display:none;">
+                        <!-- <div id="loadingSpinner" class="spinner-border text-primary" role="status" style="display:none;">
                           <span class="visually-hidden">Loading...</span>
-                        </div>
+                        </div> -->
                     </div>
                     
                     <!-- <div class="h3 mb-2 pt-1" id="smsUnitsValue">SMS Units : {{ $sms_units_arr['smsUnits'] }}</div> -->
@@ -144,6 +151,7 @@
     <script type="text/javascript" src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script>
     <script src="{{ url('public/libs/tabulator-master/dist/js/autotable.min.js') }}"></script>
+    <script src=" https://cdn.jsdelivr.net/npm/luxon@3.7.2/build/global/luxon.min.js "></script>
     <script>
         console.log(base_url);
         const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
@@ -163,7 +171,8 @@
         });
         
         function sendDailySmsUnits() {
-             document.getElementById('loadingSpinner').style.display = 'inline-block';
+            // document.getElementById('loadingSpinner').style.display = 'inline-block';
+            document.getElementById('loadingOverlay').style.display = 'flex';
             const endpoint = "{{ route('client.dailysmsunits') }}";
             const startDate = startDateElement.value;
             const endDate = endDateElement.value;
@@ -174,9 +183,8 @@
                 })
                 .then(response => response.json())
                 .then(data => {
-                    console.log('Server response:', data);
-                    console.log(data.smsUnits);
-                    document.getElementById('loadingSpinner').style.display = 'none';
+                    // document.getElementById('loadingSpinner').style.display = 'none';
+                    document.getElementById('loadingOverlay').style.display = 'none';
                     const theReportRange = document.getElementById('reportRange');
                     const theSmsUnitsValue = document.getElementById('smsUnitsValue');
                     theReportRange.innerHTML = data.reportDate;
@@ -187,8 +195,8 @@
         }
 
 
-      //startDateElement.addEventListener('changeDate', sendDailySmsUnits);
-      endDateElement.addEventListener('changeDate', sendDailySmsUnits);
+        //startDateElement.addEventListener('changeDate', sendDailySmsUnits);
+        endDateElement.addEventListener('changeDate', sendDailySmsUnits);
 
 
         function statusDesign (cell, formatterParams){
@@ -231,20 +239,55 @@
         ajaxResponse: function(url, params, response) {
             return response.content;
         },
-        columns: [
+        // columns: [
 
-            {title: "Sender", field: "from", width:150,  headerFilter:"input"},
-            {title: "Msisdn", field: "to", width:150,  headerFilter:"input"},
-            // {title: "Message", field: "message"},
-            {title:"Message", field:"message", width:650,  formatter:"textarea", headerFilter:"input"},
-            // {title: "Status", field: "status"},
-            // {title: "Delivery Status", field: "deliveryStatus", width:100,  headerFilter:"input", formatter: statusDesign},
-            // {title: "Created At", field: "createdAt"},
-            {title:"Date Created ", field:"createdAt", width:200,  formatter:"datetime", headerFilter:"input", formatterParams:{
-                    inputFormat: "iso", 
-                    outputFormat: "dd-MM-yyyy HH:mm:ss", 
-                    invalidPlaceholder: "(invalid date)"
-            }}
+        //     {title: "Sender", field: "from", width:150,  headerFilter:"input"},
+        //     {title: "Msisdn", field: "to", width:150,  headerFilter:"input"},
+        //     {title:"Message", field:"message", width:650,  formatter:"textarea", headerFilter:"input"},           
+        //     {title:"Date Created ", field:"createdAt", width:200,  formatter:"datetime", headerFilter:"input", formatterParams:{
+        //             inputFormat: "iso", 
+        //             outputFormat: "dd-MM-yyyy HH:mm:ss", 
+        //             invalidPlaceholder: "(invalid date)"
+        //     }}
+        // ],
+
+        columns: [
+          {title: "Sender", field: "from", width:150, headerFilter:"input"},
+          {title: "Msisdn", field: "to", width:150, headerFilter:"input"},
+          {title:"Message", field:"message", width:650, formatter:"textarea", headerFilter:"input"},           
+          {
+            title:"Date Created",
+            field:"createdAt",
+            width:200,
+            formatter:"datetime",
+            formatterParams:{
+              inputFormat:"iso",
+              outputFormat:"yyyy-MM-dd",
+              invalidPlaceholder:"(invalid date)"
+            },
+            headerFilter:function(cell, onRendered, success, cancel){
+              // Create native date input
+              var input = document.createElement("input");
+              input.type = "date";
+
+              input.addEventListener("change", function(){
+                console.log(input.value);
+                success(input.value); // pass value to Tabulator filter
+              });
+
+              return input;
+            },
+            headerFilterFunc:function(headerValue, rowValue){
+              if(!headerValue){ return true; } // no filter
+              if(!rowValue){ return false; }
+
+              // Extract just the date portion from ISO timestamp
+              const rowDate = new Date(rowValue);
+              const formatted = rowDate.toISOString().split("T")[0]; // yyyy-MM-dd
+
+              return formatted === headerValue;
+            }
+          }
         ],
         });
 
