diff --git a/optmanagementprod/kol_databases.py b/optmanagementprod/kol_databases.py
index cfbc8bc..9aaa217 100644
--- a/optmanagementprod/kol_databases.py
+++ b/optmanagementprod/kol_databases.py
@@ -6,20 +6,20 @@ db_configs = [
     {
         'user': 'snehalatha',
         'password': 'paSsWord@#654',
-        'host': '35.153.190.180',
-        'database': 'kolm_lite_cardio_staging'
+        'host': 'konectar-readreplica-rds.konectar.io',
+        'database': 'kolm_lite_cardio'
     },
     {
        'user': 'snehalatha',
         'password': 'paSsWord@#654',
-        'host': '35.153.190.180',
-        'database': 'kolm_lite_veterinary_staging'
+        'host': 'konectar-readreplica-rds.konectar.io',
+        'database': 'kolm_lite_veterinary'
     },
      {
         'user': 'snehalatha',
         'password': 'paSsWord@#654',
-        'host': '35.153.190.180',
-        'database': 'kolm_lite_oralhealth_staging'
+        'host': 'konectar-readreplica-rds.konectar.io',
+        'database': 'kolm_lite_oralhealth'
     }
 ]
 
diff --git a/optmanagementprod/opt_management_production/doctype/optlistprod/optlistprod.json b/optmanagementprod/opt_management_production/doctype/optlistprod/optlistprod.json
index 32a93bc..ae415ac 100644
--- a/optmanagementprod/opt_management_production/doctype/optlistprod/optlistprod.json
+++ b/optmanagementprod/opt_management_production/doctype/optlistprod/optlistprod.json
@@ -82,7 +82,7 @@
  "index_web_pages_for_search": 1,
  "is_virtual": 1,
  "links": [],
- "modified": "2024-06-13 14:36:08.390315",
+ "modified": "2024-06-18 15:07:09.935741",
  "modified_by": "Administrator",
  "module": "Opt management production",
  "name": "optlistprod",
diff --git a/optmanagementprod/www/optanalystview.html b/optmanagementprod/www/optanalystview.html
index 8ad5855..246992b 100644
--- a/optmanagementprod/www/optanalystview.html
+++ b/optmanagementprod/www/optanalystview.html
@@ -1,4 +1,3 @@
-
 <!DOCTYPE html>
 <html>
 <head>
@@ -17,9 +16,26 @@
   margin: 4px 2px;
   cursor: pointer;
 }
-.button1 {background-color: #04AA6D;} 
-.button2 {background-color: #008CBA;} 
-.button3 {background-color: #9bba00;} 
+.button1 {background-color: #04AA6D;}
+.button2 {background-color: #008CBA;}
+.button3 {background-color: #9bba00;}
+.loader {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border: 16px solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 16px solid #3498db;
+    width: 120px;
+    height: 120px;
+    animation: spin 2s linear infinite;
+    display: none;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
 /* .tabulator .tabulator-header .tabulator-col {background-color: #2b9af3;} */
  </style>
 </head>
@@ -35,14 +51,15 @@
 
 {% block title %}Pricing{% endblock %}
 {% block content %}
-<h4>Opt In Data</h4>
+<div id="loader" class="loader"></div>
+<p style="padding-left: 5px;"><strong>Opt In Data </strong> </p>
 
-<div>
+<div style="padding-left: 5px;">
     <button id="download-csv" class="button button1">Download CSV</button>
     <button id="download-xlsx" class="button button2">Download XLSX</button>
     <button id="download-pdf" class="button button3">Download PDF</button>
 </div>
-<div id="tabulator-table" class="tabulator-table"></div>
+<div style="padding-left: 5px; padding-bottom: 5px;" id="tabulator-table" class="tabulator-table"></div>
 
 {% endblock %}
 
@@ -56,7 +73,10 @@
 <script>
 
 document.addEventListener('DOMContentLoaded', function() {
+    const loader = document.getElementById('loader');
+    const content = document.getElementById('tabulator-table');
     var data = [];
+    var table;
     frappe.call({
     method: 'optmanagementprod.www.optanalystview.fetch_data',
     callback: function(r) {
@@ -65,39 +85,46 @@ document.addEventListener('DOMContentLoaded', function() {
             // Render data in the HTML
             console.log(data);
             // You can use the data to populate your table or any other HTML element
-       
 
+            function loadData() {
+                return new Promise((resolve) => {
+                    setTimeout(() => {
+                        resolve("Data loaded");
+                    }, 3000); // Simulate a 3-second loading time
+                });
+            }
     // Sample data for the table
     var tableData = [];
     for(var rec in data)
     {
-       tableData.push({
+        tableData.push({
         kol_id:rec.kol_id, kol_name:rec["kol_name"],project_name: rec["project_name"], client_name:rec["client_name"], client_poc:rec["client_poc"], cs_Assigned_poc:rec["cs_Assigned_poc"],optin_received_date:rec["optin_received_date"],optin_approved_date:rec["optin_approved_date"],status:rec["status"],optin_type:rec["optin_type"],data_processed_date:rec["data_processed_date"]
        });
     }
     console.log(tableData);
     // var tableData = [(
     //     {kol_id:1, kol_name:"Oli Bob",project_name: "", client_name:"12", client_poc:"red", cs_Assigned_poc:""} )
-       
+
     // ];
 
     // Create Tabulator table
 
-    var table = new Tabulator("#tabulator-table", {
+       table = new Tabulator("#tabulator-table", {
         data:data, // Assign data to table
-        // layout:"fitColumns", 
+        layout:"fitDataTable",
         // filterMode: "remote",
         pagination:true,
         paginationSize: 20,
+        placeholder:"Awaiting Data, Please wait",
         // layout:"fitDataStretch",
         ajaxLoaderLoading:"<span>Loading Data</span>",
         // paginationMode:"remote",
         paginationSizeSelector: [5, 10, 50, 100],
         paginationCounter: "rows",
         columns:[ // Define table columns
-            {title:"KOL ID", field:"kol_id",headerFilterPlaceholder: "Search", headerFilter: true,},
+            {title:"KOL ID", field:"kol_id",headerFilterPlaceholder: "Search",hozAlign:"center", headerFilter: true,width:2},
             {title:"KOL Name", field:"kol_name",headerFilterPlaceholder: "Search", headerFilter: true,},
-            {title:"Project Name", field:"project_name",headerFilterPlaceholder: "Search", headerFilter: true,},
+            {title:"Project Name", field:"project_name",headerFilterPlaceholder: "Search", headerFilter: true,width:250},
             {title:"Client Name", field:"client_name",headerFilterPlaceholder: "Search", headerFilter: true,},
             {title:"Client POC", field:"client_poc",headerFilterPlaceholder: "Search", headerFilter: true,},
             {title:"CS Assigned POC", field:"cs_assigned_poc",headerFilterPlaceholder: "Search", headerFilter: true,},
@@ -105,7 +132,7 @@ document.addEventListener('DOMContentLoaded', function() {
             {title:"Approved Date", field:"optin_approved_date",headerFilterPlaceholder: "Search", headerFilter: true,},
             {title:"Status", field:"status",headerFilterPlaceholder: "Search", headerFilter: true,},
             {title:"Opt-In Type", field:"optin_type",headerFilterPlaceholder: "Search", headerFilter: true,},
-            {title:"Data Processed Date", field:"data_processed_date",headerFilterPlaceholder: "Search", headerFilter: true,},
+            {title:"Data Processed Date", field:"data_processed_date",headerFilterPlaceholder: "Search", headerFilter: true}
         ],
     });
     document.getElementById("download-csv").addEventListener("click", function(){
@@ -114,6 +141,12 @@ document.addEventListener('DOMContentLoaded', function() {
 
 
 
+//trigger download of data.xlsx file
+document.getElementById("download-xlsx").addEventListener("click", function(){
+    table.download("xlsx", "optInData.xlsx", {sheetName:"Opt In Data"});
+});
+
+
 //trigger download of data.xlsx file
 document.getElementById("download-xlsx").addEventListener("click", function(){
     table.download("xlsx", "optInData.xlsx", {sheetName:"Opt In Data"});
@@ -130,11 +163,27 @@ document.getElementById("download-pdf").addEventListener("click", function(){
 
  }
     }
-    
-});
 
+});
+     async function init() {
+        // Show loader
+        loader.style.display = 'block';
+
+        // Load data
+        const data = await loadData();
+
+        // Hide loader
+        loader.style.display = 'none';
+
+        // Display content
+        content.innerHTML = table;
+        content.style.display = 'block';
+    }
+
+    // Initialize the loader and content
+    init();
 });
 </script>
 {% endblock %}
 </body>
-</html>
+</html>
\ No newline at end of file
