diff --git a/html/webpage/assets/css/bss-overrides.css b/html/webpage/assets/css/bss-overrides.css
new file mode 100644
index 0000000..d06cc3c
--- /dev/null
+++ b/html/webpage/assets/css/bss-overrides.css
@@ -0,0 +1,39 @@
+:root, [data-bs-theme=light] {
+  --bs-primary: #0d6efd;
+  --bs-primary-rgb: 13,110,253;
+  --bs-primary-text-emphasis: #052C65;
+  --bs-primary-bg-subtle: #CFE2FF;
+  --bs-primary-border-subtle: #9EC5FE;
+}
+
+.btn-primary {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #0d6efd;
+  --bs-btn-border-color: #0d6efd;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #0B5ED7;
+  --bs-btn-hover-border-color: #0A58CA;
+  --bs-btn-focus-shadow-rgb: 219,233,255;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #0A58CA;
+  --bs-btn-active-border-color: #0A53BE;
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #0d6efd;
+  --bs-btn-disabled-border-color: #0d6efd;
+}
+
+.btn-outline-primary {
+  --bs-btn-color: #0d6efd;
+  --bs-btn-border-color: #0d6efd;
+  --bs-btn-focus-shadow-rgb: 13,110,253;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #0d6efd;
+  --bs-btn-hover-border-color: #0d6efd;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #0d6efd;
+  --bs-btn-active-border-color: #0d6efd;
+  --bs-btn-disabled-color: #0d6efd;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #0d6efd;
+}
+
diff --git a/html/webpage/assets/css/styles.css b/html/webpage/assets/css/styles.css
index 06d32fc..0c12988 100644
--- a/html/webpage/assets/css/styles.css
+++ b/html/webpage/assets/css/styles.css
@@ -62,9 +62,9 @@ body {
 
 .btn-round-basic:focus {
   background-color: #f5f5f5;
-  border-radius: 20px;
+  border-radius: 8px;
   box-shadow: inset 4px 4px 10px #88a5bf7b, inset -4px -4px 10px #ffffff;
-  color: #4d4d4d;
+  /*color: #4d4d4d;*/
   cursor: pointer;
   font-size: 16px;
   transition: all 0.2s ease-in-out;
@@ -72,7 +72,7 @@ body {
 }
 
 .btn-round-basic {
-  border-radius: 20px;
+  border-radius: 08px;
   box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
   --bs-btn-hover-bg: #ffffff;
 }
@@ -82,24 +82,24 @@ body {
   box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;
 }
 
-.color-import {
+.color-import, .color-import:hover, .color-import:focus {
   color: var(--bs-teal);
 }
 
-.color-remove {
+.color-remove, .color-remove:hover, .color-remove:focus {
   color: var(--bs-danger);
 }
 
-.color-edit {
+.color-edit, .color-edit:hover, .color-edit:focus {
   color: var(--bs-primary-text-emphasis);
 }
 
-.color-add {
+.color-add, .color-add:hover, .color-add:focus {
   color: var(--bs-primary);
 }
 
 .input-login {
-  border-radius: 50px;
+  border-radius: 8px;
   box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
 }
 
@@ -227,25 +227,23 @@ nav-item:focus {
 }
 
 .accordion-item.active {
-  /*background: rgba(45, 53, 120, 0.15);*/
-  /*box-shadow: inset 4px 4px 10px rgba(45, 53, 120, 0.25), inset -4px -4px 10px rgba(255, 255, 255, 0.8);*/
+  background: rgba(45, 53, 120, 0.15);
+  box-shadow: inset 4px 4px 10px rgba(45, 53, 120, 0.25), inset -4px -4px 10px rgba(255, 255, 255, 0.8);
 }
 
 .bg-accordion {
   border: white 2px;
-  /*border-radius: 10px;*/
+  border-radius: 8px;
   background: #f8f9fd;
 }
 
 .card-channel {
-  border-radius: 12px;
+  border-radius: 8px;
   background: #ffffff;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   border: #ffffff solid 2px !important;
-  /*padding-left: 2px;*/
-  /*padding-right: 5px;*/
   padding-top: 12px;
   padding-bottom: 12px;
 }
@@ -255,3 +253,27 @@ nav-item:focus {
   border: white solid 3px;
 }
 
+.progress-bar {
+  background-color: #172066;
+}
+
+table {
+  border-radius: 8px;
+}
+
+.bg-modal-body {
+  background-color: #f8f9fd;
+}
+
+.bg-header-modal {
+  background-color: #f0f2ff;
+}
+
+.pad-row-btn {
+  margin: 0.5rem;
+}
+
+.pad-2 {
+  border-radius: 0 !important;
+}
+
diff --git a/html/webpage/assets/js/broadcastzones.js b/html/webpage/assets/js/broadcastzones.js
index 5a2c07f..adb4a0f 100644
--- a/html/webpage/assets/js/broadcastzones.js
+++ b/html/webpage/assets/js/broadcastzones.js
@@ -1,4 +1,17 @@
+/**
+ * @typedef {Object} BroadcastZone
+ * @property {number} index
+ * @property {string} description
+ * @property {String} SoundChannel
+ * @property {String} Box
+ * @property {String} Relay
+ */
 
+/**
+ * List of broadcast zones available
+ * @type {BroadcastZone[]}
+ */
+window.BroadcastZoneList ??= [];
 
 /**
  * Currently selected broadcast zone row in the table
@@ -6,6 +19,12 @@
  */
 window.selectedBroadcastZoneRow = null;
 
+/**
+ * List of sound channels available
+ * @type {String[]}
+ */
+window.SoundChannelList = []
+
 /**
  * Fill broadcast zone table body with values
  * @param {BroadcastZone[]} vv values to fill
@@ -23,7 +42,7 @@ function fill_broadcastzonetablebody(vv) {
         </tr>`;
         $('#broadcastzonetablebody').append(row);
         let $addedrow = $('#broadcastzonetablebody tr:last');
-        $addedrow.click(function () {
+        $addedrow.off('click').on('click', function () {
             if (window.selectedBroadcastZoneRow) {
                 window.selectedBroadcastZoneRow.find('td').css('background-color', '');
                 if (window.selectedBroadcastZoneRow.is($(this))) {
@@ -42,7 +61,34 @@ function fill_broadcastzonetablebody(vv) {
     $('#tablesize').text("Table Size: " + vv.length);
 }
 
+/**
+ * Reload broadcast zones from server
+ * @param {String} APIURL API URL endpoint (default "BroadcastZones/")
+ */
+function reloadBroadcastZones(APIURL = "BroadcastZones/") {
+    window.BroadcastZoneList = [];
+    fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
+        if (Array.isArray(okdata)) {
+            //console.log("reloadBroadcastZones : ", okdata)
+            window.BroadcastZoneList.push(...okdata);
+            fill_broadcastzonetablebody(window.BroadcastZoneList);
+        } else console.log("reloadBroadcastZones: okdata is not array");
+    }, (errdata) => {
+        alert("Error loading broadcast zones : " + errdata.message);
+    });
+}
 
+function fetchSoundChannels(APIURL = "SoundChannel/") {
+    window.SoundChannelList = [];
+    fetchAPI(APIURL + "SoundChannelDescriptions", "GET", {}, null, (okdata) => {
+        if (Array.isArray(okdata)) {
+            //console.log("fetchSoundChannels : ", okdata)
+            window.SoundChannelList.push(...okdata);
+        } else console.log("fetchSoundChannels: okdata is not array");
+    }, (errdata) => {
+        alert("Error loading sound channels : " + errdata.message);
+    });
+}
 
 $(document).ready(function () {
     console.log("broadcastzones.js loaded successfully");
@@ -67,7 +113,7 @@ $(document).ready(function () {
     
 
     let $findzone = $('#findzone');
-    $findzone.on('input', function () {
+    $findzone.off('input').on('input', function () {
         let searchTerm = $findzone.val().trim().toLowerCase();
         if (searchTerm.length > 0) {
             window.selectedBroadcastZoneRow = null;
@@ -97,36 +143,35 @@ $(document).ready(function () {
         $broadcastzonedescription.val('');
         // fill broadcastzonesoundchannel from SoundChannelList
         $broadcastzonesoundchannel.empty();
-        if (Array.isArray(SoundChannelList) && SoundChannelList.length > 0) {
+        console.log("SoundChannelList:", window.SoundChannelList);
+        if (Array.isArray(window.SoundChannelList) && window.SoundChannelList.length > 0) {
             // SoundChannelList ada isinya
-            SoundChannelList.forEach(ch => {
-                if (ch.channel && ch.channel.length > 0){
-                    // hanya yang punya channel saja
-                    $broadcastzonesoundchannel.append($('<option>').val(ch.channel).text(ch.channel));
+            window.SoundChannelList.forEach(ch => {
+                if (ch && ch.length>0){
+                    $broadcastzonesoundchannel.append($('<option>').val(ch).text(ch));
                 }
+            
             });
         }
-        $broadcastzonebox.val('');
+        $broadcastzonebox.val('1').prop('disabled', true);
         for (let i = 1; i <= 32; i++) {
             cbRelay(i).prop('checked', false);
         }
     }
 
-    reloadBroadcastZones(APIURL_BroadcastZone, () => {
-        fill_broadcastzonetablebody(window.BroadcastZoneList);
-    });
+    fetchSoundChannels();
+    reloadBroadcastZones(APIURL_BroadcastZone);
 
-    $btnClear.click(() => {
+    $btnClear.off('click').on('click', () => {
         DoClear(APIURL_BroadcastZone, "BroadcastZones", (okdata) => {
             reloadBroadcastZones(APIURL_BroadcastZone);
-            fill_broadcastzonetablebody(window.BroadcastZoneList);
             alert("Success clear broadcast zones: " + okdata.message);
         }, (errdata) => {
             alert("Error clear broadcast zones: " + errdata.message);
         });
     });
 
-    $btnAdd.click(() => {
+    $btnAdd.off('click').on('click', () => {
         $broadcastzonemodal.modal('show');
         clearBroadcastZoneModal();
 
@@ -165,10 +210,8 @@ $(document).ready(function () {
                 Relay: relay
             };
             fetchAPI(APIURL_BroadcastZone + "Add", "POST", {}, bz, (okdata) => {
-                reloadBroadcastZones(APIURL_BroadcastZone, () => {
-                    fill_broadcastzonetablebody(window.BroadcastZoneList);
-                    alert("Success add new broadcast zone: " + okdata.message);
-                });
+                reloadBroadcastZones(APIURL_BroadcastZone);
+                alert("Success add new broadcast zone: " + okdata.message);
             }, (errdata) => {
                 alert("Error add new broadcast zone: " + errdata.message);
             });
@@ -180,7 +223,7 @@ $(document).ready(function () {
         });
     });
 
-    $btnRemove.click(() => {
+    $btnRemove.off('click').on('click', () => {
         if (window.selectedBroadcastZoneRow) {
             let cells = window.selectedBroadcastZoneRow.find('td');
             /** @type {BroadcastZone} */
@@ -193,10 +236,8 @@ $(document).ready(function () {
             };
             if (confirm(`Are you sure to delete broadcast zone [${bz.index}] Description=${bz.description}?`)) {
                 fetchAPI(APIURL_BroadcastZone + "DeleteByIndex/" + bz.index, "DELETE", {}, null, (okdata) => {
-                    reloadBroadcastZones(APIURL_BroadcastZone, () => {
-                        fill_broadcastzonetablebody(window.BroadcastZoneList);
-                        alert("Success delete broadcast zone: " + okdata.message);
-                    });
+                    reloadBroadcastZones(APIURL_BroadcastZone);
+                    alert("Success delete broadcast zone: " + okdata.message);
                 }, (errdata) => {
                     alert("Error delete broadcast zone: " + errdata.message);
                 });
@@ -204,7 +245,7 @@ $(document).ready(function () {
         }
     });
 
-    $btnEdit.click(() => {
+    $btnEdit.off('click').on('click', () => {
         if (window.selectedBroadcastZoneRow) {
             let cells = window.selectedBroadcastZoneRow.find('td');
             /** @type {BroadcastZone} */
@@ -221,12 +262,12 @@ $(document).ready(function () {
                 $broadcastzoneindex.val(bz.index);
                 $broadcastzonedescription.val(bz.description);
                 $broadcastzonesoundchannel.val(bz.SoundChannel);
-                $broadcastzonebox.val(bz.id);
-                if (bz.bp) {
-                    bz.bp.split(';').forEach(relayId => {
-                        let id = parseInt(relayId, 10);
-                        cbRelay(id).prop('checked', true);
+                $broadcastzonebox.val(bz.Box);
+                if (bz.Relay && bz.Relay.length > 0) {
+                    bz.Relay.split(';').map(Number).filter(n => !isNaN(n) && n>=1 && n<=8).forEach(relayId => {
+                        cbRelay(relayId).prop('checked', true);
                     });
+                    
                 }
                 $broadcastzonemodal.off('click.broadcastzonesave').on('click.broadcastzonesave', '#broadcastzonesave', function () {
                     let description = $broadcastzonedescription.val().trim();
@@ -262,10 +303,8 @@ $(document).ready(function () {
                         Relay: relay
                     };
                     fetchAPI(APIURL_BroadcastZone + "UpdateByIndex/" + bz.index, "PATCH", {}, bzUpdate, (okdata) => {
-                        reloadBroadcastZones(APIURL_BroadcastZone, () => {
-                            fill_broadcastzonetablebody(window.BroadcastZoneList);
-                            alert("Success edit broadcast zone: " + okdata.message);
-                        });
+                        reloadBroadcastZones(APIURL_BroadcastZone);
+                        alert("Success edit broadcast zone: " + okdata.message);
                     }, (errdata) => {
                         alert("Error edit broadcast zone: " + errdata.message);
                     });
@@ -278,16 +317,14 @@ $(document).ready(function () {
         }
     });
 
-    $btnExport.click(() => {
+    $btnExport.off('click').on('click', () => {
         DoExport(APIURL_BroadcastZone, "broadcastzones.xlsx", {});
     });
 
-    $btnImport.click(() => {
+    $btnImport.off('click').on('click', () => {
         DoImport(APIURL_BroadcastZone, (okdata) => {
-            reloadBroadcastZones(APIURL_BroadcastZone, () => {
-                fill_broadcastzonetablebody(window.BroadcastZoneList);
-                alert("Success import broadcast zones: " + okdata.message);
-            });
+            reloadBroadcastZones(APIURL_BroadcastZone);
+            alert("Success import broadcast zones: " + okdata.message);
         }, (errdata) => {
             alert("Error importing broadcast zones from XLSX: " + errdata.message);
         });
diff --git a/html/webpage/assets/js/bs-init.js b/html/webpage/assets/js/bs-init.js
new file mode 100644
index 0000000..3c1498d
--- /dev/null
+++ b/html/webpage/assets/js/bs-init.js
@@ -0,0 +1,7 @@
+document.addEventListener('DOMContentLoaded', function() {
+
+	var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bss-tooltip]'));
+	var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+	  return new bootstrap.Tooltip(tooltipTriggerEl);
+	})
+}, false);
\ No newline at end of file
diff --git a/html/webpage/assets/js/languagelink.js b/html/webpage/assets/js/languagelink.js
index 8bdd05d..d48b31c 100644
--- a/html/webpage/assets/js/languagelink.js
+++ b/html/webpage/assets/js/languagelink.js
@@ -1,4 +1,15 @@
+/**
+ * @typedef {Object} LanguageBank
+ * @property {number} index
+ * @property {string} tag
+ * @property {string} language
+ * 
+ */
 
+/** List of Languagebank data loaded from server
+ * @type {LanguageBank[]}
+ */
+window.languagebankdata = [];
 /**
  * Currently selected languagebank row in the table
  * @type {JQuery<HTMLElement>|null}
@@ -39,7 +50,22 @@ function fill_languagebanktablebody(vv) {
     $('#tablesize').text("Table Size: " + vv.length);
 }
 
-
+/**
+ * Reload language bank from server
+ * @param {string} APIURL API URL endpoint, default "LanguageLink/"
+ */
+function reloadLanguageBank(APIURL = "LanguageLink/") {
+    window.languagebankdata = [];
+    fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
+        if (Array.isArray(okdata)) {
+            window.languagebankdata.push(...okdata);
+            window.selectedlanguagerow = null;
+            fill_languagebanktablebody(window.languagebankdata);
+        }
+    }, (errdata) => {
+        alert("Error loading languagebank : " + errdata.message);
+    });
+}
 
 $(document).ready(function () {
     console.log('languagebank.js loaded');
@@ -89,15 +115,11 @@ $(document).ready(function () {
         }
     });
 
-    reloadLanguageBank(APIURL, () => {
-        fill_languagebanktablebody(window.languagebankdata);
-    });
+    reloadLanguageBank(APIURL);
     $btnClear.click(() => {
         DoClear(APIURL, "LanguageLink", (okdata) => {
-            reloadLanguageBank(APIURL, () => {
-                fill_languagebanktablebody(window.languagebankdata);
-                alert("Success clear languageLink : " + okdata.message);
-            });
+            reloadLanguageBank(APIURL);
+            alert("Success clear languageLink : " + okdata.message);
         }, (errdata) => {
             alert("Error clear languageLink : " + errdata.message);
         });
@@ -134,10 +156,8 @@ $(document).ready(function () {
                 language: langString
             }
             fetchAPI(APIURL + "Add", "POST", {}, ll, (okdata) => {
-                reloadLanguageBank(APIURL, () => {
-                    fill_languagebanktablebody(window.languagebankdata);
-                    alert("Success add language : " + okdata.message);
-                });
+                alert("Success add language : " + okdata.message);
+                reloadLanguageBank(APIURL);
             }, (errdata) => {
                 alert("Error add language : " + errdata.message);
             });
@@ -161,10 +181,8 @@ $(document).ready(function () {
             }
             if (confirm(`Are you sure to delete language [${ll.index}] Tag=${ll.tag} Language=${ll.language}?`)) {
                 fetchAPI(APIURL + "DeleteByIndex/" + ll.index, "DELETE", {}, null, (okdata) => {
-                    reloadLanguageBank(APIURL, () => {
-                        fill_languagebanktablebody(window.languagebankdata);
-                        alert("Success delete language : " + okdata.message);
-                    });
+                    reloadLanguageBank(APIURL);
+                    alert("Success delete language : " + okdata.message);
                 }, (errdata) => {
                     alert("Error delete language : " + errdata.message);
                 });
@@ -221,10 +239,8 @@ $(document).ready(function () {
                     ll.tag = tag;
                     ll.language = langString;
                     fetchAPI(APIURL + "UpdateByIndex/" + ll.index, "PATCH", {}, ll, (okdata) => {
-                        reloadLanguageBank(APIURL, () => {
-                            fill_languagebanktablebody(window.languagebankdata);
-                            alert("Success edit language : " + okdata.message);
-                        });
+                        reloadLanguageBank(APIURL);
+                        alert("Success edit language : " + okdata.message);
                     }, (errdata) => {
                         alert("Error edit language : " + errdata.message);
                     });
@@ -246,10 +262,8 @@ $(document).ready(function () {
     });
     $btnImport.click(() => {
         DoImport(APIURL, (okdata) => {
-            reloadLanguageBank(APIURL, () => {
-                fill_languagebanktablebody(window.languagebankdata);
-                alert("Success import languagebank : " + okdata.message);
-            });
+            reloadLanguageBank(APIURL);
+            alert("Success import languagebank : " + okdata.message);
         }, (errdata) => {
             alert("Error importing languagebank from XLSX : " + errdata.message);
         });
diff --git a/html/webpage/assets/js/messagebank.js b/html/webpage/assets/js/messagebank.js
index 4211edb..1acf321 100644
--- a/html/webpage/assets/js/messagebank.js
+++ b/html/webpage/assets/js/messagebank.js
@@ -1,4 +1,19 @@
+/**
+ * @typedef {Object} MessageBank
+ * @property {number} index
+ * @property {string} description
+ * @property {string} language
+ * @property {number} aNN_ID
+ * @property {string} voice_Type
+ * @property {string} message_Detail
+ * @property {string} message_TAGS
+ */
 
+/**
+ * List of Messagebank data loaded from server
+ * @type {MessageBank[]}
+ */
+window.messagebankdata ??= [];
 /**
  * Currently selected messagebank row in the table
  * @type {JQuery<HTMLElement>|null}
@@ -44,7 +59,22 @@ function fill_messagebanktablebody(vv) {
     $('#tablesize').text("Table Size: " + vv.length);
 }
 
-
+/**
+* Reload message bank from server
+* @param {string} APIURL API URL endpoint, default "MessageBank/"
+*/
+function reloadMessageBank(APIURL = "MessageBank/") {
+    window.messagebankdata ??= [];
+    fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
+        if (Array.isArray(okdata)) {
+            window.messagebankdata.push(...okdata);
+            window.selectedmessagerow = null;
+            fill_messagebanktablebody(window.messagebankdata);
+        }
+    }, (errdata) => {
+        alert("Error loading messagebank : " + errdata.message);
+    });
+}
 
 $(document).ready(function () {
     console.log("messagebank.js loaded");
@@ -178,15 +208,11 @@ $(document).ready(function () {
     });
 
 
-    reloadMessageBank(APIURL, () => {
-        fill_messagebanktablebody(window.messagebankdata);
-    });
+    reloadMessageBank(APIURL);
     $btnClear.click(() => {
         DoClear(APIURL, "Messagebank", (okdata) => {
-            reloadMessageBank(APIURL, () => {
-                fill_messagebanktablebody(window.messagebankdata);
-                alert("Success clear messagebank : " + okdata.message);
-            });
+            reloadMessageBank(APIURL);
+            alert("Success clear messagebank : " + okdata.message);
         }, (errdata) => {
             alert("Error clear messagebank : " + errdata.message);
         });
@@ -261,10 +287,8 @@ $(document).ready(function () {
             };
             // send to server using fetchAPI
             fetchAPI(APIURL + "Add", "POST", mb, null, (okdata) => {
-                reloadMessageBank(APIURL, () => {
-                    fill_messagebanktablebody(window.messagebankdata);
-                    alert("Success add new messagebank : " + okdata.message);
-                });
+                reloadMessageBank(APIURL);
+                alert("Success add new messagebank : " + okdata.message);
             }, (errdata) => {
                 alert("Error add new messagebank : " + errdata.message);
             });
@@ -292,10 +316,8 @@ $(document).ready(function () {
 
             if (confirm(`Are you sure to delete messagebank [${mb.index}] Description=${mb.description}? ANN_ID=${mb.aNN_ID} Language=${mb.language} Voice_Type=${mb.voice_Type} `)) {
                 fetchAPI(APIURL + "DeleteByIndex/" + mb.index, "DELETE", {}, null, (okdata) => {
-                    reloadMessageBank(APIURL, () => {
-                        fill_messagebanktablebody(window.messagebankdata);
-                        alert("Success delete messagebank : " + okdata.message);
-                    });
+                    reloadMessageBank(APIURL);
+                    alert("Success delete messagebank : " + okdata.message);
                 }, (errdata) => {
                     alert("Error delete messagebank : " + errdata.message);
                 });
@@ -401,10 +423,8 @@ $(document).ready(function () {
                         Message_TAGS: messagetags
                     };
                     fetchAPI(APIURL + "UpdateByIndex/" + mb.index, "PATCH", mbUpdate, null, (okdata) => {
-                        reloadMessageBank(APIURL, () => {
-                            fill_messagebanktablebody(window.messagebankdata);
-                            alert("Success edit messagebank : " + okdata.message);
-                        });
+                        reloadMessageBank(APIURL);
+                        alert("Success edit messagebank : " + okdata.message);
                     }, (errdata) => {
                         alert("Error edit messagebank : " + errdata.message);
                     });
@@ -423,11 +443,8 @@ $(document).ready(function () {
     });
     $btnImport.click(() => {
         DoImport(APIURL, (okdata) => {
-            reloadMessageBank(APIURL, () => {
-                fill_messagebanktablebody(window.messagebankdata);
-                alert("Success import messagebank : " + okdata.message);
-            });
-            
+            reloadMessageBank(APIURL);
+            alert("Success import messagebank : " + okdata.message);
         }, (errdata) => {
             alert("Error importing messagebank from XLSX : " + errdata.message);
         });
diff --git a/html/webpage/assets/js/schedulebank.js b/html/webpage/assets/js/schedulebank.js
index 7a9bade..6c9e437 100644
--- a/html/webpage/assets/js/schedulebank.js
+++ b/html/webpage/assets/js/schedulebank.js
@@ -1,4 +1,20 @@
+/**
+ * @typedef {Object} ScheduleBank
+ * @property {number} index
+ * @property {string} description
+ * @property {string} day
+ * @property {string} time
+ * @property {string} soundpath
+ * @property {number} repeat
+ * @property {boolean} enable
+ * @property {string} broadcastZones
+ * @property {string} language
+ */
 
+/** List of Schedulebank data loaded from server
+ * @type {ScheduleBank[]}
+ */
+window.schedulebankdata = [];
 /**
  * Currently selected schedulebank row in the table
  * @type {JQuery<HTMLElement>|null}
@@ -45,7 +61,22 @@ function fill_schedulebanktablebody(vv) {
     $('#tablesize').text("Table Size: " + vv.length);
 }
 
-
+/**
+ * Reload timer bank from server
+ * @param {string} APIURL API URL endpoint, default "ScheduleBank/"
+ */
+function reloadTimerBank(APIURL = "ScheduleBank/") {
+    window.schedulebankdata = [];
+    fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
+        if (Array.isArray(okdata)) {
+            window.schedulebankdata.push(...okdata);
+            selectedschedulerow = null;
+            fill_schedulebanktablebody(window.schedulebankdata);
+        }
+    }, (errdata) => {
+        alert("Error loading schedulebank : " + errdata.message);
+    });
+}
 
 $(document).ready(function () {
     console.log("schedulebank.js loaded successfully");
@@ -70,7 +101,7 @@ $(document).ready(function () {
     let $schedulehour = $schedulemodal.find('#schedulehour');
     // number input 0-59
     let $scheduleminute = $schedulemodal.find('#scheduleminute');
-    // select for messagebank
+    // text input
     let $schedulesoundpath = $schedulemodal.find('#schedulesoundpath');
     // number input 0-5
     let $schedulerepeat = $schedulemodal.find('#schedulerepeat');
@@ -106,17 +137,8 @@ $(document).ready(function () {
         $scheduledescription.val('');
         $schedulehour.val('0');
         $scheduleminute.val('0');
-        
-        $schedulesoundpath.empty();
-        if (Array.isArray(window.messagebankdata) && window.messagebankdata.length > 0) {
-            window.messagebankdata.forEach(item => {
-                let str = item.description+" ["+item.aNN_ID+"]";
-                let option = `<option value="${str}">${str}</option>`;
-                if ($schedulesoundpath.find(`option[value="${str}"]`).length === 0) $schedulesoundpath.append(option); // check if $schedulesoundpath already has this option
-            })
-        }
-
-        $schedulerepeat.val('1');
+        $schedulesoundpath.val('');
+        $schedulerepeat.val('0');
         $scheduleenable.prop('checked', true);
         $scheduleeveryday.prop('checked', false);
         $schedulesunday.prop('checked', false);
@@ -149,15 +171,11 @@ $(document).ready(function () {
     });
 
 
-    reloadTimerBank(APIURL, () => {
-        fill_schedulebanktablebody(window.schedulebankdata);
-    });
+    reloadTimerBank(APIURL);
     $btnClear.click(() => {
         DoClear(APIURL, "Timerbank", (okdata) => {
-            reloadTimerBank(APIURL,() => {
-                fill_schedulebanktablebody(window.schedulebankdata);
-                alert("Success clear schedulebank : " + okdata.message);
-            });
+            reloadTimerBank(APIURL);
+            alert("Success clear schedulebank : " + okdata.message);
         }, (errdata) => {
             alert("Error clear schedulebank : " + errdata.message);
         });
@@ -218,10 +236,8 @@ $(document).ready(function () {
             };
 
             fetchAPI(APIURL + "Add", "POST", {}, scheduleObj, (okdata) => {
-                reloadTimerBank(APIURL, () => {
-                    fill_schedulebanktablebody(window.schedulebankdata);
-                    alert("Success add schedule: " + okdata.message);
-                });
+                alert("Success add schedule: " + okdata.message);
+                reloadTimerBank(APIURL);
             }, (errdata) => {
                 alert("Error add schedule: " + errdata.message);
             });
@@ -246,10 +262,8 @@ $(document).ready(function () {
             }
             if (confirm(`Are you sure to delete schedule [${sr.index}] Description=${sr.description}?`)) {
                 fetchAPI(APIURL + "DeleteByIndex/" + sr.index, "DELETE", {}, null, (okdata) => {
-                    reloadTimerBank(APIURL, () => {
-                        fill_schedulebanktablebody(window.schedulebankdata);
-                        alert("Success delete schedule : " + okdata.message);
-                    });
+                    reloadTimerBank(APIURL);
+                    alert("Success delete schedule : " + okdata.message);
                 }, (errdata) => {
                     alert("Error delete schedule : " + errdata.message);
                 });
@@ -366,10 +380,8 @@ $(document).ready(function () {
                     };
 
                     fetchAPI(APIURL + "UpdateByIndex/" + sr.index, "PATCH", {}, scheduleObj, (okdata) => {
-                        reloadTimerBank(APIURL, () => {
-                            fill_schedulebanktablebody(window.schedulebankdata);
-                            alert("Success edit schedule: " + okdata.message);
-                        });
+                        alert("Success edit schedule: " + okdata.message);
+                        reloadTimerBank(APIURL);
                     }, (errdata) => {
                         alert("Error edit schedule: " + errdata.message);
                     });
@@ -384,10 +396,8 @@ $(document).ready(function () {
     });
     $btnImport.click(() => {
         DoImport(APIURL, (okdata) => {
-            reloadTimerBank(APIURL, () => {
-                fill_schedulebanktablebody(window.schedulebankdata);
-                alert("Success import schedulebank from XLSX : " + okdata.message);
-            });
+            reloadTimerBank(APIURL);
+            alert("Success import schedulebank from XLSX : " + okdata.message);
         }, (errdata) => {
             alert("Error importing schedulebank from XLSX : " + errdata.message);
         });
diff --git a/html/webpage/assets/js/script.js b/html/webpage/assets/js/script.js
index d73218b..7f0b14a 100644
--- a/html/webpage/assets/js/script.js
+++ b/html/webpage/assets/js/script.js
@@ -20,263 +20,6 @@ window.languages = [];
  */
 window.scheduledays = []
 
-/**
- * @typedef {Object} MessageBank
- * @property {number} index
- * @property {string} description
- * @property {string} language
- * @property {number} aNN_ID
- * @property {string} voice_Type
- * @property {string} message_Detail
- * @property {string} message_TAGS
- */
-
-/**
- * List of Messagebank data loaded from server
- * taruh di sini karena dipakai di banyak tempat
- * @type {MessageBank[]}
- */
-window.messagebankdata ??= [];
-
-/**
-* Reload message bank from server
-* @param {string} APIURL API URL endpoint, default "MessageBank/"
-* @param {Function|null} callback Optional callback function to execute after loading
-*/
-function reloadMessageBank(APIURL = "MessageBank/", callback=null) {
-    window.messagebankdata ??= [];
-    fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
-        if (Array.isArray(okdata)) {
-            window.messagebankdata.push(...okdata);
-            console.log("Loaded " + window.messagebankdata.length + " message bank items");
-            window.selectedmessagerow = null;
-            if (callback && typeof callback === 'function')  callback();
-        }
-    }, (errdata) => {
-        alert("Error loading messagebank : " + errdata.message);
-    });
-}
-
-/**
- * @typedef {Object} ScheduleBank
- * @property {number} index
- * @property {string} description
- * @property {string} day
- * @property {string} time
- * @property {string} soundpath
- * @property {number} repeat
- * @property {boolean} enable
- * @property {string} broadcastZones
- * @property {string} language
- */
-
-/** List of Schedulebank data loaded from server
- * @type {ScheduleBank[]}
- */
-window.schedulebankdata = [];
-
-/**
- * Reload timer bank from server
- * taruh di sini karena dipakai di banyak tempat
- * @param {string} APIURL API URL endpoint, default "ScheduleBank/"
- * @param {Function|null} callback Optional callback function to execute after loading
- */
-function reloadTimerBank(APIURL = "ScheduleBank/", callback=null) {
-    window.schedulebankdata = [];
-    fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
-        if (Array.isArray(okdata)) {
-            window.schedulebankdata.push(...okdata);
-            selectedschedulerow = null;
-            console.log("Loaded " + window.schedulebankdata.length + " schedule bank items");
-            if (callback && typeof callback === 'function')  callback();
-        }
-    }, (errdata) => {
-        alert("Error loading schedulebank : " + errdata.message);
-    });
-}
-
-/**
- * @typedef {Object} BroadcastZone
- * @property {number} index
- * @property {string} description
- * @property {String} SoundChannel
- * @property {String} Box
- * @property {String} Relay
- */
-
-/**
- * List of broadcast zones available
- * @type {BroadcastZone[]}
- */
-window.BroadcastZoneList ??= [];
-
-/**
- * Reload broadcast zones from server
- * taruh di sini karena dipakai di banyak tempat
- * @param {String} APIURL API URL endpoint (default "BroadcastZones/")
- * @param {Function|null} callback Optional callback function to execute after loading
- */
-function reloadBroadcastZones(APIURL = "BroadcastZones/", callback=null) {
-    window.BroadcastZoneList = [];
-    fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
-        if (Array.isArray(okdata)) {
-            //console.log("reloadBroadcastZones : ", okdata)
-            window.BroadcastZoneList.push(...okdata);
-            console.log("Loaded " + window.BroadcastZoneList.length + " broadcast zone items");
-            window.selectedbroadcastzonerow = null;
-            if (callback && typeof callback === 'function')  callback();
-        } else console.log("reloadBroadcastZones: okdata is not array");
-    }, (errdata) => {
-        alert("Error loading broadcast zones : " + errdata.message);
-    });
-}
-
-/**
- * @typedef {Object} SoundBank
- * @property {number} index
- * @property {string} description
- * @property {string} tag
- * @property {string} category
- * @property {string} language
- * @property {string} voiceType
- * @property {string} path
- */
-
-/**
- * @typedef {Object} Select2item
- * @property {number} id
- * @property {string} text
- */
-
-/**
- * List of Soundbank data loaded from server
- * taruh di sini karena dipakai di banyak tempat
- * @type {SoundBank[]}
- */
-window.soundbankdata = [];
-
-/**
- * List of sound files in the soundbank directory, that ends with .wav or .mp3
- * taruh di sini karena dipakai di banyak tempat
- * @type {string[]}
- */
-window.soundbankfiles = [];
-
-/**
- * Select2 data source
- * See https://select2.org/data-sources/formats
- * @type {Select2item[]}
- */
-window.select2data = [];
-
-
-
-/**
- * Reload sound bank from server
- * @param {String} APIURL API URL endpoint, default "SoundBank/"
- * @param {Function|null} callback Optional callback function to execute after loading
- */
-function reloadSoundBank(APIURL = "SoundBank/", callback=null) {
-    window.soundbankdata = [];
-    fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
-
-        if (Array.isArray(okdata)) {
-            window.soundbankdata.push(...okdata);
-            window.selectedsoundrow = null;
-            console.log("Loaded " + window.soundbankdata.length + " sound bank items");
-            if (callback && typeof callback === 'function')  callback();
-        }
-    }, (errdata) => {
-        alert("Error loading soundbank : " + errdata.message);
-    });
-}
-
-/**
- * Reload soundbank files from server
- * @param {String} APIURL API URL endpoint (default "SoundBank/")
- * @param {Function|null} callback Optional callback function to execute after loading
- */
-function reloadSoundbankFiles(APIURL = "SoundBank/",callback=null) {
-    window.soundbankfiles = [];
-    fetchAPI(APIURL + "ListFiles", "GET", {}, null, (okdata) => {
-        // okdata is a string contains elements separated by semicolon ;
-        if (Array.isArray(okdata)) {
-            window.soundbankfiles = okdata.filter(item => item.trim().length > 0);
-            // refill select2data
-            window.select2data = window.soundbankfiles.map((item, index) => ({ id: index + 1, text: item }));
-            console.log("Loaded " + window.soundbankfiles.length + " sound bank files");
-            if (callback && typeof callback === 'function')  callback();
-        } else console.log("reloadSoundbankFiles: okdata is not array");
-    }, (errdata) => {
-        alert("Error loading soundbank files : " + errdata.message);
-    });
-}
-
-/**
- * @typedef {Object} SoundChannel
- * @property {number} index - The index of the sound channel.
- * @property {string} channel - The name of the sound channel.
- * @property {string} ip - The IP address associated with the sound channel.
- */
-
-/**
- * @type {SoundChannel[]}
- */
-window.soundChannels = [];
-
-/**
- * Reload sound channels from server
- * @param {String} APIURL API URL endpoint (default "SoundChannel/")
- * @param {Function|null} callback Optional callback function to execute after loading
- */
-function reloadSoundChannel(APIURL = "SoundChannel/", callback=null) {
-    window.soundChannels = [];
-    fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
-        if (Array.isArray(okdata)) {
-            //console.log("reloadSoundChannel : ", okdata)
-            window.soundChannels.push(...okdata);
-            window.selectedsoundchannelrow = null;
-            console.log("Loaded " + window.soundChannels.length + " sound channel items");
-            if (callback && typeof callback === 'function')  callback();
-        } else console.log("reloadSoundChannel: okdata is not array");
-    }, (errdata) => {
-        alert("Error loading sound channels : " + errdata.message);
-    });
-}
-
-/**
- * @typedef {Object} LanguageBank
- * @property {number} index
- * @property {string} tag
- * @property {string} language
- * 
- */
-
-/** List of Languagebank data loaded from server
- * @type {LanguageBank[]}
- */
-window.languagebankdata = [];
-
-/**
- * Reload language bank from server
- * @param {string} APIURL API URL endpoint, default "LanguageLink/"
- * @param {Function|null} callback Optional callback function to execute after loading
- */
-function reloadLanguageBank(APIURL = "LanguageLink/", callback=null) {
-    window.languagebankdata = [];
-    fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
-        if (Array.isArray(okdata)) {
-            window.languagebankdata.push(...okdata);
-            window.selectedlanguagerow = null;
-            console.log("Loaded " + window.languagebankdata.length + " language bank items");
-            if (callback && typeof callback === 'function')  callback();
-        }
-    }, (errdata) => {
-        alert("Error loading languagebank : " + errdata.message);
-    });
-}
-
-
 /**
  * Create a list item element
  * @param {String} text Text Content for the list item 
@@ -568,13 +311,7 @@ $(document).ready(function () {
     getCategories();
     getLanguages();
     getScheduledDays();
-    reloadMessageBank();
-    reloadTimerBank();
-    reloadBroadcastZones();
-    reloadSoundBank();
-    reloadSoundbankFiles();
-    reloadSoundChannel();
-    reloadLanguageBank();
+    
 
      // Initialize WebSocket connection
         window.ws = new WebSocket(wsURL);
diff --git a/html/webpage/assets/js/soundbank.js b/html/webpage/assets/js/soundbank.js
index 855c951..59ecfb7 100644
--- a/html/webpage/assets/js/soundbank.js
+++ b/html/webpage/assets/js/soundbank.js
@@ -1,11 +1,61 @@
+/**
+ * @typedef {Object} SoundBank
+ * @property {number} index
+ * @property {string} description
+ * @property {string} tag
+ * @property {string} category
+ * @property {string} language
+ * @property {string} voiceType
+ * @property {string} path
+ */
 
+/**
+ * @typedef {Object} Select2item
+ * @property {number} id
+ * @property {string} text
+ */
+
+/**
+ * List of Soundbank data loaded from server
+ * @type {SoundBank[]}
+ */
+window.soundbankdata = [];
 /**
  * Currently selected soundbank row in the table
  * @type {JQuery<HTMLElement>|null}
  */
 window.selectedsoundrow = null;
 
+/**
+ * List of sound files in the soundbank directory, that ends with .wav or .mp3
+ * @type {string[]}
+ */
+window.soundbankfiles = [];
 
+/**
+ * Select2 data source
+ * See https://select2.org/data-sources/formats
+ * @type {Select2item[]}
+ */
+window.select2data = [];
+
+/**
+ * Reload sound bank from server
+ * @param {String} APIURL API URL endpoint, default "SoundBank/"
+ */
+function reloadSoundBank(APIURL = "SoundBank/") {
+    window.soundbankdata = [];
+    fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
+
+        if (Array.isArray(okdata)) {
+            window.soundbankdata.push(...okdata);
+            window.selectedsoundrow = null;
+            fill_soundbanktablebody(window.soundbankdata);
+        }
+    }, (errdata) => {
+        alert("Error loading soundbank : " + errdata.message);
+    });
+}
 
 /**
      * Fill soundbank table body with values
@@ -13,7 +63,6 @@ window.selectedsoundrow = null;
     */
 function fill_soundbanktablebody(vv) {
     $('#soundbanktablebody').empty();
-    console.log("Filling soundbank table with " + vv.length + " items");
     if (!Array.isArray(vv) || vv.length === 0) return;
     vv.forEach(item => {
         const row = `<tr>
@@ -49,7 +98,23 @@ function fill_soundbanktablebody(vv) {
 }
 
 
-
+/**
+ * Reload soundbank files from server
+ * @param {String} APIURL API URL endpoint (default "SoundBank/")
+ */
+function reloadSoundbankFiles(APIURL = "SoundBank/") {
+    window.soundbankfiles = [];
+    fetchAPI(APIURL + "ListFiles", "GET", {}, null, (okdata) => {
+        // okdata is a string contains elements separated by semicolon ;
+        if (Array.isArray(okdata)) {
+            window.soundbankfiles = okdata.filter(item => item.trim().length > 0);
+            // refill select2data
+            window.select2data = window.soundbankfiles.map((item, index) => ({ id: index + 1, text: item }));
+        } else console.log("reloadSoundbankFiles: okdata is not array");
+    }, (errdata) => {
+        alert("Error loading soundbank files : " + errdata.message);
+    });
+}
 
 $(document).ready(function () {
     console.log("soundbank.js loaded successfully");
@@ -107,10 +172,7 @@ $(document).ready(function () {
         })
     }
 
-    reloadSoundBank(APIURL, () => {
-        fill_soundbanktablebody(window.soundbankdata);
-    });
-
+    reloadSoundBank(APIURL);
     $('#findsoundbank').on('input', function () {
         let searchTerm = $(this).val().trim().toLowerCase();
         if (searchTerm.length > 0) {
@@ -124,10 +186,8 @@ $(document).ready(function () {
     });
     $btnClear.click(() => {
         DoClear(APIURL, "Soundbank", (okdata) => {
-            reloadSoundBank(APIURL, () => {
-                fill_soundbanktablebody(window.soundbankdata);
-                alert("Success clear soundbank : " + okdata.message);
-            });
+            reloadSoundBank(APIURL);
+            alert("Success clear soundbank : " + okdata.message);
         }, (errdata) => {
             alert("Error clear soundbank : " + errdata.message);
         });
@@ -162,10 +222,8 @@ $(document).ready(function () {
             }
             if (confirm(`Are you sure to delete soundbank [${sb.index}] Description=${sb.description} Tag=${sb.tag}?`)) {
                 fetchAPI(APIURL + "DeleteByIndex/" + sb.index, "DELETE", {}, null, (okdata) => {
-                    reloadSoundBank(APIURL, () => {
-                        fill_soundbanktablebody(window.soundbankdata);
-                        alert("Success delete soundbank : " + okdata.message);
-                    });
+                    reloadSoundBank(APIURL);
+                    alert("Success delete soundbank : " + okdata.message);
                 }, (errdata) => {
                     alert("Error delete soundbank : " + errdata.message);
                 });
@@ -207,10 +265,8 @@ $(document).ready(function () {
     });
     $btnImport.click(() => {
         DoImport(APIURL, (okdata) => {
-            reloadSoundBank(APIURL, () => {
-                fill_soundbanktablebody(window.soundbankdata);
-                alert("Success import soundbank : " + okdata.message);
-            });
+            reloadSoundBank(APIURL);
+            alert("Success import soundbank : " + okdata.message);
         }, (errdata) => {
             alert("Error importing soundbank from XLSX : " + errdata.message);
         });
diff --git a/html/webpage/assets/js/soundchannel.js b/html/webpage/assets/js/soundchannel.js
index a273349..b593dc1 100644
--- a/html/webpage/assets/js/soundchannel.js
+++ b/html/webpage/assets/js/soundchannel.js
@@ -1,4 +1,14 @@
+/**
+ * @typedef {Object} SoundChannel
+ * @property {number} index - The index of the sound channel.
+ * @property {string} channel - The name of the sound channel.
+ * @property {string} ip - The IP address associated with the sound channel.
+ */
 
+/**
+ * @type {SoundChannel[]}
+ */
+window.soundChannels = [];
 
 // Currently selected sound channel row in the table
 window.selectedSoundChannel = null;
@@ -8,10 +18,9 @@ window.selectedSoundChannel = null;
  * @param {SoundChannel[]} vv Sound channel data to populate the table.
  */
 function fill_soundchanneltablebody(vv) {
-    let $tbody = $('#soundchanneltablebody');
     let $btnEditSoundChannel = $('#btnEditSoundChannel');
     let $tablesizeSoundChannel = $('#tablesizeSoundChannel');
-    $tbody.empty();
+    $('#soundchanneltablebody').empty();
     
     $tablesizeSoundChannel.text('Table Length : N/A');
     if (!Array.isArray(vv) || vv.length === 0) return;
@@ -22,9 +31,9 @@ function fill_soundchanneltablebody(vv) {
             <td>${item.channel}</td>
             <td>${item.ip}</td>
         </tr>`;
-        $tbody.append(row);
+        $('#soundchanneltablebody').append(row);
         let $addedrow = $('#soundchanneltablebody tr:last');
-        $addedrow.click(function () {
+        $addedrow.off('click').on('click', function () {
             if (selectedSoundChannel) {
                 selectedSoundChannel.find('td').css('background-color', '');
                 if (selectedSoundChannel.is($(this))) {
@@ -41,7 +50,22 @@ function fill_soundchanneltablebody(vv) {
     $tablesizeSoundChannel.text("Table Size: " + vv.length);
 }
 
-
+/**
+ * Reload sound channels from server
+ * @param {String} APIURL API URL endpoint (default "SoundChannel/")
+ */
+function reloadSoundChannel(APIURL = "SoundChannel/") {
+    window.soundChannels = [];
+    fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
+        if (Array.isArray(okdata)) {
+            //console.log("reloadSoundChannel : ", okdata)
+            window.soundChannels.push(...okdata);
+            fill_soundchanneltablebody(window.soundChannels);
+        } else console.log("reloadSoundChannel: okdata is not array");
+    }, (errdata) => {
+        alert("Error loading sound channels : " + errdata.message);
+    });
+}
     
 $(document).ready(function () {
     console.log("soundchannel.js loaded successfully");
@@ -58,7 +82,7 @@ $(document).ready(function () {
     $btnEditSoundChannel.prop('disabled', true);
     let API_SoundChannel = "SoundChannel/";
 
-    $findsoundchannel.on('input', function () {
+    $findsoundchannel.off('input').on('input', function () {
         let searchTerm = $(this).val().toLowerCase();
         if (searchTerm.length==0){
             window.selectedSoundChannel = null;
@@ -83,20 +107,16 @@ $(document).ready(function () {
         $soundchannelip.val('');
     }
 
-    reloadSoundChannel(API_SoundChannel, () => {
-        fill_soundchanneltablebody(window.soundChannels);
-    });
-    $btnReinitializeSoundChannel.click(() => {
+    reloadSoundChannel(API_SoundChannel);
+    $btnReinitializeSoundChannel.off('click').on('click', () => {
         DoClear(API_SoundChannel, "SoundChannels", (okdata) => {
-            reloadSoundChannel(API_SoundChannel, () => {
-                fill_soundchanneltablebody(window.soundChannels);
-                alert("Success clear sound channels: " + okdata.message);
-            });
+            reloadSoundChannel(API_SoundChannel);
+            alert("Success clear sound channels: " + okdata.message);
         }, (errdata) => {
             alert("Error clear sound channels: " + errdata.message);
         });
     });
-    $btnEditSoundChannel.click(() => {
+    $btnEditSoundChannel.off('click').on('click', () => {
         if (selectedSoundChannel) {
             let cells = selectedSoundChannel.find('td');
             /** @type {SoundChannel} */
@@ -135,10 +155,8 @@ $(document).ready(function () {
                     
 
                     fetchAPI(API_SoundChannel + "UpdateByIndex/" + newsc.index, "PATCH", {}, newsc, (okdata) => {
-                        reloadSoundChannel(API_SoundChannel, () => {
-                            fill_soundchanneltablebody(window.soundChannels);
-                            alert("Success edit sound channel: " + okdata.message);
-                        });
+                        reloadSoundChannel(API_SoundChannel);
+                        alert("Success edit sound channel: " + okdata.message);
                     }, (errdata) => {
                         alert("Error edit sound channel: " + errdata.message);
                     });
@@ -152,16 +170,14 @@ $(document).ready(function () {
             }
         }
     });
-    $btnExportSoundChannel.click(() => {
+    $btnExportSoundChannel.off('click').on('click', () => {
         DoExport(API_SoundChannel, "soundchannels.xlsx", {});
     });
 
-    $btnImportSoundChannel.click(() => {
+    $btnImportSoundChannel.off('click').on('click', () => {
         DoImport(API_SoundChannel, (okdata) => {
-            reloadSoundChannel(API_SoundChannel, () => {
-                fill_soundchanneltablebody(window.soundChannels);
-                alert("Success import sound channels: " + okdata.message);
-            });
+            reloadSoundChannel(API_SoundChannel);
+            alert("Success import sound channels: " + okdata.message);
         }, (errdata) => {
             alert("Error importing sound channels from XLSX: " + errdata.message);
         });
diff --git a/html/webpage/assets/js/usermanagement.js b/html/webpage/assets/js/usermanagement.js
index 5dc01b3..19173a9 100644
--- a/html/webpage/assets/js/usermanagement.js
+++ b/html/webpage/assets/js/usermanagement.js
@@ -4,9 +4,10 @@
  * @property {string} username Username
  * @property {string} password Password (plain)
  * @property {string} location Location
- * @property {string} soundbank_tags Soundbank variable tags separated by semicolon ;
- * @property {string} messagebank_ann_id Messagebank announcement ID separated by semicolon ;
- * @property {string} broadcastzones Broadcast zones separated by semicolon ;
+ * @property {string} airline_tags Airline variable tags (string) separated by semicolon ;
+ * @property {string} city_tags City variable tags (string) separated by semicolon ;
+ * @property {string} messagebank_ann_id Messagebank announcement ID (number) separated by semicolon ;
+ * @property {string} broadcastzones Broadcast zones description (string) separated by semicolon ;
  */
 
 /** List of UserDB data loaded from server
@@ -20,13 +21,96 @@ window.userdb = [];
  */
 window.selecteduserrow = null;
 
+/**
+ * @typedef {Object} KeyValueMessage
+ * @property {string} key
+ * @property {string} value
+ */
+
+/**
+ * List of airline tags loaded from server
+ * @type {KeyValueMessage[]}
+ */
+window.airlinetags = [];
+/**
+ * List of city tags loaded from server
+ * @type {KeyValueMessage[]}
+ */
+window.citytags = [];
+/**
+ * List of message bank IDs loaded from server
+ * @type {KeyValueMessage[]}
+ */
+window.messagebankids = [];
+/**
+ * List of broadcast zones description loaded from server
+ * @type {string[]}
+ */
+window.broadcastzones = [];
+
+/**
+ * Get Messagebank ANN_IDs from server
+ */
+function get_messagebankids() {
+    window.messagebankids = [];
+    fetchAPI("MessageBank/" + "MessageIDs", "GET", {}, null, (okdata) => {
+        if (Array.isArray(okdata)) {
+            window.messagebankids.push(...okdata);
+        }
+    }, (errdata) => {
+        alert("Error loading message bank IDs : " + errdata.message);
+    });
+}
+
+/**
+ * Get Airline Tags from server
+ */
+function get_airlinetags() {
+    window.airlinetags = [];
+    fetchAPI("SoundBank/" + "AirlineTags", "GET", {}, null, (okdata) => {
+        if (Array.isArray(okdata)) {
+            window.airlinetags.push(...okdata);
+        }
+    }, (errdata) => {
+        alert("Error loading airline tags : " + errdata.message);
+    });
+}
+
+/**
+ * Get City Tags from server
+ */
+function get_citytags() {
+    window.citytags = [];
+    fetchAPI("SoundBank/" + "CityTags", "GET", {}, null, (okdata) => {
+        if (Array.isArray(okdata)) {
+            window.citytags.push(...okdata);
+        }
+    }, (errdata) => {
+        alert("Error loading city tags : " + errdata.message);
+    });
+}
+
+/**
+ * Get Broadcast Zones descriptions from server
+ */
+function get_broadcastzones_descriptions() {
+    window.broadcastzones = [];
+    fetchAPI("BroadcastZones/" + "BroadcastZoneDescriptions", "GET", {}, null, (okdata) => {
+        if (Array.isArray(okdata)) {
+            window.broadcastzones.push(...okdata);
+        }
+    }, (errdata) => {
+        alert("Error loading broadcast zones : " + errdata.message);
+    });
+}
+
 /**
  * Fill user table body with values
  * @param {UserDB[]} vv values to fill
  */
 function fill_usertablebody(vv) {
     $('#usertablebody').empty();
-    
+
     if (!Array.isArray(vv) || vv.length === 0) {
         $('#btnExport').prop('disabled', true);
         return;
@@ -34,14 +118,16 @@ function fill_usertablebody(vv) {
     vv.forEach(item => {
         const row = `<tr>
                      <td>${item.index}</td>
-                     <td>${item.datenya}</td>
-                     <td>${item.timenya}</td>
-                     <td>${item.machine}</td>
-                     <td>${item.description}</td>
+                     <td>${item.username}</td>
+                     <td>${item.location}</td>
+                     <td>${item.airline_tags}</td>
+                     <td>${item.city_tags}</td>
+                     <td>${item.messagebank_ann_id}</td>
+                     <td>${item.broadcastzones}</td>
                      </tr>`;
         $('#usertablebody').append(row);
         let $addedrow = $('#usertablebody tr:last');
-        $addedrow.on('click', function () {
+        $addedrow.off('click').on('click', function () {
             if (window.selecteduserrow) {
                 window.selecteduserrow.find('td').css('background-color', '');
                 if (window.selecteduserrow.is($(this))) {
@@ -63,9 +149,9 @@ function fill_usertablebody(vv) {
 
 /**
  * Reload UserDB from server with date and filter
- * @param {String} APIURL API URL endpoint , default "User/"
+ * @param {String} APIURL API URL endpoint , default "UserManagement/"
  */
-function reloaduserDB(APIURL = "User/") {
+function reloaduserDB(APIURL = "UserManagement/") {
     window.userdb = [];
     fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
         if (Array.isArray(okdata)) {
@@ -79,50 +165,395 @@ function reloaduserDB(APIURL = "User/") {
 
 $(document).ready(function () {
     console.log("usermanagement.js ready");
-    let $usertablebody = $('#usertablebody');
-    let $finduser = $('#finduser');
-    let $btnClear = $('#btnClear');
-    let $btnAdd = $('#btnAdd');
-    let $btnRemove = $('#btnRemove');
-    let $btnEdit = $('#btnEdit');
-    let $btnExport = $('#btnExport');
-    let $btnImport = $('#btnImport');
-    let APIURL = "User/";
+    get_airlinetags();
+    get_citytags();
+    get_messagebankids();
+    get_broadcastzones_descriptions();
+
+    let APIURL = "UserManagement/";
+
+    function clearAddModal() {
+        $('#modalindex').val("");
+        $('#modalusername').val("");
+        $('#modalpassword').val("");
+        $('#modalverifypassword').val("");
+        $('#modalairlinetags').val("");
+        $('#modalcitytags').val("");
+        $('#modalmessagebank').val("");
+        $('#modalbroadcastzones').val("");
+        $('#modallocation').val("");
+    }
+
+    function fill_citylist() {
+        $('#citylist').empty();
+        citytags.forEach(tag => {
+            let value = `${tag.value} [${tag.key}]`;
+            const row = `<div class="form-check">
+                         <input class="form-check-input citytagcheckbox" type="checkbox" value="${tag.key}" id="citytag_${tag.key}">
+                         <label class="form-check-label" for="citytag_${tag.key}">
+                           ${value}
+                         </label>
+                       </div>`;
+            $('#citylist').append(row);
+        });
+    }
+
+    function fill_airlinelist() {
+        $('#airlinelist').empty();
+        airlinetags.forEach(tag => {
+            let value = `${tag.value} [${tag.key}]`;
+            const row = `<div class="form-check">
+                         <input class="form-check-input airlinetagcheckbox" type="checkbox" value="${tag.key}" id="airlinetag_${tag.key}">
+                         <label class="form-check-label" for="airlinetag_${tag.key}">
+                           ${value}
+                         </label>
+                       </div>`;
+            $('#airlinelist').append(row);
+        });
+    }
 
-    // add / edit modal elements
-    let $addmodal = $('#addmodal');
-    let $modalindex = $('#modalindex');
-    let $modalusername = $('#modalusername');
-    let $modalpassword = $('#modalpassword');
-    let $modalverifypassword = $('#modalverifypassword');
-    let $modalsoundbank = $('#modalsoundbank');
-    let $modalmessagebank = $('#modalmessagebank');
-    let $modalbroadcastzones = $('#modalbroadcastzones');
-    let $btnShowSoundbankModal = $('#btnShowSoundbankModal');
-    let $btnShowMessagebankModal = $('#btnShowMessagebankModal');
-    let $btnShowBroaadcastZoneModal = $('#btnShowBroaadcastZoneModal');
-    let $usermanagementsave = $('#usermanagementsave');
-    let $usermanagementclose = $('#usermanagementclose');
-    
-    // soundbank selection modal elements
-    let $soundbankmodal = $('#soundbankmodal');
-    let $soundbankselection = $('#soundbankselection');
-    let $soundbankselectionsave = $('#soundbankselectionsave');
-    let $soundbankselectionclose = $('#soundbankselectionclose');
-    
     // broadcast zone selection modal elements
-    let $broadcastzonemodal = $('#broadcastzonemodal');
-    let $broadcastzoneselection = $('#broadcastzoneselection');
-    let $broadcastzoneselectionsave = $('#broadcastzoneselectionsave');
-    let $broadcastzoneselectionclose = $('#broadcastzoneselectionclose');
-    
-    // messagebank selection modal elements
-    let $messagebankmodal = $('#messagebankmodal');
-    let $messagebankselection = $('#messagebankselection');
-    let $messagebankselectionsave = $('#messagebankselectionsave');
-    let $messagebankselectionclose = $('#messagebankselectionclose');
 
-    $usertablebody.empty();
-    $finduser.on('input', function () {
+    function fill_broadcastzonelist() {
+        $('#broadcastzonelist').empty();
+        broadcastzones.forEach(desc => {
+            const row = `<div class="form-check">
+                         <input class="form-check-input broadcastzonecheckbox" type="checkbox" value="${desc}" id="broadcastzone_${desc}">
+                         <label class="form-check-label" for="broadcastzone_${desc}">
+                           ${desc}
+                         </label>
+                       </div>`;
+            $('#broadcastzonelist').append(row);
+        });
+    }
+
+
+    // messagebank selection modal elements
+
+    function fill_messagebanklist() {
+        $('#messagebanklist').empty();
+        messagebankids.forEach(id => {
+            let value = `${id.value} [${id.key}]`;
+            const row = `<div class="form-check">
+                         <input class="form-check-input messagebankidcheckbox" type="checkbox" value="${id.key}" id="messagebankid_${id.key}">
+                         <label class="form-check-label" for="messagebankid_${id.key}">
+                           ${value}
+                         </label>
+                       </div>`;
+            $('#messagebanklist').append(row);
+        });
+    }
+
+
+    $('#usertablebody').empty();
+    reloaduserDB();
+    $('#finduser').off('input').on('input', function () {
+        let searchTerm = $(this).val().toLowerCase();
+        if (searchTerm.length > 0) {
+            let filteredUsers = window.userdb.filter(user =>
+                user.username.toLowerCase().includes(searchTerm) ||
+                user.airline_tags.toLowerCase().includes(searchTerm) ||
+                user.city_tags.toLowerCase().includes(searchTerm)
+                //user.messagebank_ann_id.toLowerCase().includes(searchTerm) ||
+                //user.broadcastzones.toLowerCase().includes(searchTerm)
+            );
+            fill_usertablebody(filteredUsers);
+        } else {
+            fill_usertablebody(window.userdb);
+        }
+
+    });
+
+    /**
+     * Show modal dialog for soundbank, messagebank, broadcastzone selection
+     * @param {boolean} editmode if true, edit mode, else add mode
+     * @param {number} index index of user to edit, default 0
+     */
+    function modalshow(editmode = false, index=0) {
+        // event on click btnShowSoundbankModal
+        $('#btnShowSoundbankModal').off('click').on('click', function () {
+            $('#soundbankmodal').modal('show');
+            fill_citylist();
+            fill_airlinelist();
+
+            let airline = $('#modalairlinetags').val().trim();
+            let city = $('#modalcitytags').val().trim();
+            if (airline.length > 0) {
+                let airlinekeys = airline.split(";");
+                $('#airlinelist input[type=checkbox]').each(function () {
+                    let tag = $(this).val();
+                    if (airlinekeys.includes(tag)) {
+                        $(this).prop('checked', true);
+                    }
+                });
+            }
+            if (city.length > 0) {
+                let citykeys = city.split(";");
+                $('#citylist input[type=checkbox]').each(function () {
+                    let tag = $(this).val();
+                    if (citykeys.includes(tag)) {
+                        $(this).prop('checked', true);
+                    }
+                });
+            }
+
+            $('#soundbankmodal').off('click.soundbankselectionsave').on('click.soundbankselectionsave', '#soundbankselectionsave', function () {
+                let selected_airlinetags = [];
+                $('#airlinelist input[type=checkbox]:checked').each(function () {
+                    selected_airlinetags.push($(this).val());
+                });
+                let selected_citytags = [];
+                $('#citylist input[type=checkbox]:checked').each(function () {
+                    selected_citytags.push($(this).val());
+                });
+
+                //console.log("Selected airline tags: ", selected_airlinetags);
+                //console.log("Selected city tags: ", selected_citytags);
+
+                if (selected_airlinetags.length == 0 || selected_citytags.length == 0) {
+                    alert("Please select at least one airline tag and one city tag.");
+                    return;
+                }
+
+                let airlinevalue = selected_airlinetags.join(";");
+                let cityvalue = selected_citytags.join(";");
+                $('#modalairlinetags').val(airlinevalue);
+                $('#modalcitytags').val(cityvalue);
+
+
+                $('#soundbankmodal').modal('hide');
+            });
+            $('#soundbankmodal').off('click.soundbankselectionclose').on('click.soundbankselectionclose', '#soundbankselectionclose', function () {
+                $('#soundbankmodal').modal('hide');
+            });
+        });
+        // event on click btnShowMessagebankModal
+        $('#btnShowMessagebankModal').off('click').on('click', function () {
+            $('#messagebankmodal').modal('show');
+            fill_messagebanklist();
+            let messagebank = $('#modalmessagebank').val().trim();
+            if (messagebank.length > 0) {
+                let messagebankkeys = messagebank.split(";");
+                $('#messagebanklist input[type=checkbox]').each(function () {
+                    let id = $(this).val();
+                    if (messagebankkeys.includes(id)) {
+                        $(this).prop('checked', true);
+                    }
+                });
+            }
+
+            $('#messagebankmodal').off('click.messagebankselectionsave').on('click.messagebankselectionsave', '#messagebankselectionsave', function () {
+                let selected_messagebankids = [];
+                $('#messagebanklist input[type=checkbox]:checked').each(function () {
+                    selected_messagebankids.push($(this).val());
+                });
+                //console.log("Selected message bank IDs: ", selected_messagebankids);
+                if (selected_messagebankids.length == 0) {
+                    alert("Please select at least one message bank ID.");
+                    return;
+                }
+                let messagebankvalue = selected_messagebankids.join(";");
+                $('#modalmessagebank').val(messagebankvalue);
+
+                $('#messagebankmodal').modal('hide');
+            });
+            $('#messagebankmodal').off('click.messagebankselectionclose').on('click.messagebankselectionclose', '#messagebankselectionclose', function () {
+                $('#messagebankmodal').modal('hide');
+            });
+        });
+        // event on click btnShowBroaadcastZoneModal
+        $('#btnShowBroaadcastZoneModal').off('click').on('click', function () {
+            $('#broadcastzonemodal').modal('show');
+            fill_broadcastzonelist();
+            let broadcastzones = $('#modalbroadcastzones').val().trim();
+            if (broadcastzones.length > 0) {
+                let broadcastzonesvalues = broadcastzones.split(";");
+                $('#broadcastzonelist input[type=checkbox]').each(function () {
+                    let desc = $(this).val();
+                    if (broadcastzonesvalues.includes(desc)) {
+                        $(this).prop('checked', true);
+                    }
+                });
+            }
+            $('#broadcastzonemodal').off('click.broadcastzoneselectionsave').on('click.broadcastzoneselectionsave', '#broadcastzoneselectionsave', function () {
+                let selected_broadcastzones = [];
+                $('#broadcastzonelist input[type=checkbox]:checked').each(function () {
+                    selected_broadcastzones.push($(this).val());
+                });
+                //console.log("Selected broadcast zones: ", selected_broadcastzones);
+                if (selected_broadcastzones.length == 0) {
+                    alert("Please select at least one broadcast zone.");
+                    return;
+                }
+                let broadcastzonesvalue = selected_broadcastzones.join(";");
+                $('#modalbroadcastzones').val(broadcastzonesvalue);
+                $('#broadcastzonemodal').modal('hide');
+            });
+            $('#broadcastzonemodal').off('click.broadcastzoneselectionclose').on('click.broadcastzoneselectionclose', '#broadcastzoneselectionclose', function () {
+                $('#broadcastzonemodal').modal('hide');
+            });
+        });
+
+        // event on Click save button
+        $('#addmodal').off('click.usermanagementsave').on('click.usermanagementsave', '#usermanagementsave', function () {
+            let username = $('#modalusername').val().trim();
+            let password = $('#modalpassword').val();
+            let verifypassword = $('#modalverifypassword').val();
+            let location = $('#modallocation').val().trim();
+            let airline_tags = $('#modalairlinetags').val().trim();
+            let city_tags = $('#modalcitytags').val().trim();
+            let messagebank_ann_id = $('#modalmessagebank').val().trim();
+            let broadcastzones = $('#modalbroadcastzones').val().trim();
+
+            if (username.length === 0) {
+                alert("Username cannot be empty");
+                return;
+            }
+            if (password.length === 0 || verifypassword.length === 0) {
+                alert("Password cannot be empty");
+                return;
+            }
+            if (password !== verifypassword) {
+                alert("Password and Verify Password do not match");
+                return;
+            }
+            if (airline_tags.length === 0) {
+                alert("Airline tags cannot be empty");
+                return;
+            }
+            if (city_tags.length === 0) {
+                alert("City tags cannot be empty");
+                return;
+            }
+            if (messagebank_ann_id.length === 0) {
+                alert("Message bank ANN_ID cannot be empty");
+                return;
+            }
+            if (broadcastzones.length === 0) {
+                alert("Broadcast zones cannot be empty");
+                return;
+            }
+
+            /**
+             * @type {UserDB}
+             */
+            let ll = {
+                index: index,
+                username: username,
+                password: password,
+                location: location,
+                airline_tags: airline_tags,
+                city_tags: city_tags,
+                messagebank_ann_id: messagebank_ann_id,
+                broadcastzones: broadcastzones
+            }
+
+            if (editmode) {
+                fetchAPI(APIURL + "UpdateByIndex/" + index, "PATCH", {}, ll, (okdata) => {
+                    alert("Success update User : " + okdata.message);
+                    reloaduserDB();
+                }, (errdata) => {
+                    alert("Error update User : " + errdata.message);
+                });
+
+            } else {
+                fetchAPI(APIURL + "Add", "POST", {}, ll, (okdata) => {
+                    alert("Success add User : " + okdata.message);
+                    reloaduserDB();
+                }, (errdata) => {
+                    alert("Error add User : " + errdata.message);
+                });
+            }
+
+
+            $('#addmodal').modal('hide');
+        });
+        // event on Click close button
+        $('#addmodal').off('click.usermanagementclose').on('click.usermanagementclose', '#usermanagementclose', function () {
+            $('#addmodal').modal('hide');
+        });
+    }
+
+    $('#btnClear').off('click').on('click', function () {
+        DoClear(APIURL, "UserManagement", (okdata) => {
+            reloaduserDB();
+            alert("Success clear user management : " + okdata.message);
+        }, (errdata) => {
+            alert("Error clear user management : " + errdata.message);
+        });
+    });
+    $('#btnAdd').off('click').on('click', () => {
+        $('#addmodal').modal('show');
+        clearAddModal();
+        modalshow(false,0);
+    });
+    $('#btnRemove').off('click').on('click', () => {
+        if (window.selecteduserrow) {
+            let cells = window.selecteduserrow.find('td');
+            /** @type {UserDB} */
+            let user = {
+                index: parseInt(cells.eq(0).text()),
+                username: cells.eq(1).text(),
+                password: cells.eq(2).text(),
+                airline_tags: cells.eq(3).text(),
+                city_tags: cells.eq(4).text(),
+                messagebank_ann_id: cells.eq(5).text(),
+                broadcastzones: cells.eq(6).text()
+            }
+            if (confirm(`Are you sure to delete user [${user.index}] Username=${user.username} ?`)) {
+                fetchAPI(APIURL + "DeleteByIndex/" + user.index, "DELETE", {}, null, (okdata) => {
+                    reloaduserDB();
+                    alert("Success delete user : " + okdata.message);
+                }, (errdata) => {
+                    alert("Error delete user : " + errdata.message);
+                });
+            }
+        } else {
+            alert("No user selected");
+        }
+    });
+    $('#btnEdit').off('click').on('click', () => {
+        if (window.selecteduserrow) {
+            let cells = window.selecteduserrow.find('td');
+            let index = parseInt(cells.eq(0).text());
+            if (isNaN(index) || index <= 0) {
+                alert("Invalid user index");
+                return;
+            }
+            /** @type {UserDB} */
+            let user = window.userdb.find(u => u.index === index);
+            if (!user) {
+                alert("User not found");
+                return;
+            }
+            if (confirm(`Are you sure to edit user [${user.index}] Username=${user.username} ?`)) {
+                $('#addmodal').modal('show');
+                // fill modal with user data
+                $('#modalindex').val(user.index);
+                $('#modalusername').val(user.username);
+                $('#modalpassword').val(user.password);
+                $('#modalverifypassword').val(user.password);
+                $('#modallocation').val(user.location);
+                $('#modalairlinetags').val(user.airline_tags);
+                $('#modalcitytags').val(user.city_tags);
+                $('#modalmessagebank').val(user.messagebank_ann_id);
+                $('#modalbroadcastzones').val(user.broadcastzones);
+                modalshow(true, user.index);
+
+            }
+        } else {
+            alert("No user selected");
+        }
+    });
+    $('#btnExport').off('click').on('click', () => {
+        DoExport(APIURL, "user.xlsx", {});
+    });
+    $('#btnImport').off('click').on('click', () => {
+        DoImport(APIURL, (okdata) => {
+            reloaduserDB();
+            alert("Success import user : " + okdata.message);
+        }, (errdata) => {
+            alert("Error importing user from XLSX : " + errdata.message);
+        });
     });
 });
\ No newline at end of file
diff --git a/html/webpage/broadcastzones.html b/html/webpage/broadcastzones.html
index 70f0bd3..5a033f7 100644
--- a/html/webpage/broadcastzones.html
+++ b/html/webpage/broadcastzones.html
@@ -4,8 +4,9 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>AAS_NewGen_30Sept25</title>
+    <title>AAS_NewGen_08OKT25</title>
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/bss-overrides.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -19,15 +20,15 @@
     <div class="modal fade" role="dialog" tabindex="-1" id="broadcastzonemodal">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
-                <div class="modal-header">
+                <div class="modal-header bg-header-modal">
                     <h4 class="modal-title">Add / Edit Broadcast Zones</h4><button class="btn-close" type="button" aria-label="Close" data-bs-dismiss="modal"></button>
                 </div>
-                <div class="modal-body">
+                <div class="modal-body bg-modal-body">
                     <div class="row">
                         <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                             <p class="text-add">Index</p>
                         </div>
-                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8"><input class="w-25 form-control input-add" type="text" id="broadcastzoneindex" placeholder="index"></div>
+                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8"><input class="w-25 form-control input-add" type="text" id="broadcastzoneindex" placeholder="index" readonly=""></div>
                     </div>
                     <div class="row">
                         <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
@@ -79,7 +80,7 @@
                                         <div class="form-check"><input class="form-check-input" type="checkbox" id="R08"><label class="form-check-label" for="formCheck-8">08</label></div>
                                     </div>
                                 </div>
-                                <div class="col-3">
+                                <div class="col-3 invisible">
                                     <div class="row">
                                         <div class="form-check"><input class="form-check-input" type="checkbox" id="R09"><label class="form-check-label" for="formCheck-25">09</label></div>
                                     </div>
@@ -105,7 +106,7 @@
                                         <div class="form-check"><input class="form-check-input" type="checkbox" id="R16"><label class="form-check-label" for="formCheck-32">16</label></div>
                                     </div>
                                 </div>
-                                <div class="col-3">
+                                <div class="col-3 invisible">
                                     <div class="row">
                                         <div class="form-check"><input class="form-check-input" type="checkbox" id="R17"><label class="form-check-label" for="formCheck-17">17</label></div>
                                     </div>
@@ -131,7 +132,7 @@
                                         <div class="form-check"><input class="form-check-input" type="checkbox" id="R24"><label class="form-check-label" for="formCheck-24">24</label></div>
                                     </div>
                                 </div>
-                                <div class="col-3">
+                                <div class="col-3 invisible">
                                     <div class="row">
                                         <div class="form-check"><input class="form-check-input" type="checkbox" id="R25"><label class="form-check-label" for="formCheck-9">25</label></div>
                                     </div>
@@ -254,10 +255,10 @@
     <div class="modal fade" role="dialog" tabindex="-1" id="soundchannelmodal">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
-                <div class="modal-header">
+                <div class="modal-header bg-header-modal">
                     <h4 class="modal-title">Edit Sound Channel</h4><button class="btn-close" type="button" aria-label="Close" data-bs-dismiss="modal"></button>
                 </div>
-                <div class="modal-body">
+                <div class="modal-body bg-modal-body">
                     <div class="row">
                         <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                             <p class="text-add">Index</p>
@@ -268,13 +269,13 @@
                         <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                             <p class="text-add">Description</p>
                         </div>
-                        <div class="col-8 col-sm-8 col-md-8 col-xl-8 co-lg-8"><input class="w-100 form-control input-add" type="text" id="soundchanneldescription" placeholder="Description"></div>
+                        <div class="col-8 col-sm-8 col-md-8 col-xl-8 co-lg-8"><input class="w-100 form-control input-add" type="text" id="soundchanneldescription" placeholder="Description" readonly=""></div>
                     </div>
                     <div class="row">
                         <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                             <p class="text-add">IP Address</p>
                         </div>
-                        <div class="col-8 col-sm-8 col-md-8 col-xl-8 co-lg-8"><input class="w-100 form-control input-add" type="text" id="soundchannelip" placeholder="IP Address"></div>
+                        <div class="col-8 col-sm-8 col-md-8 col-xl-8 co-lg-8"><input class="w-100 form-control input-add" type="text" id="soundchannelip" placeholder="IP Address" required="" inputmode="numeric" pattern="^(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}$"></div>
                     </div>
                 </div>
                 <div class="modal-footer"><button class="btn btn-round-basic color-edit class25" id="soundchannelclose" type="button" data-bs-dismiss="modal">Close</button><button class="btn btn-round-basic color-add class25" id="soundchannelsave" type="button">Save</button></div>
@@ -282,6 +283,7 @@
         </div>
     </div>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/bs-init.js"></script>
     <script src="assets/js/soundchannel.js"></script>
     <script src="assets/js/broadcastzones.js"></script>
 </body>
diff --git a/html/webpage/home.html b/html/webpage/home.html
index b77beae..1f238c5 100644
--- a/html/webpage/home.html
+++ b/html/webpage/home.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <title>AAS NewGeneration 17092025</title>
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/bss-overrides.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -97,6 +98,7 @@
     </div>
     <div class="container w-100 pad-container" id="content"></div>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/bs-init.js"></script>
     <script src="assets/js/jquery-3.7.1.min.js"></script>
     <script src="assets/js/select2.js"></script>
     <script src="assets/js/script.js"></script>
diff --git a/html/webpage/language.html b/html/webpage/language.html
index a9ea020..c0e37d9 100644
--- a/html/webpage/language.html
+++ b/html/webpage/language.html
@@ -4,8 +4,9 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>AAS_NewGen_30Sept25</title>
+    <title>AAS_NewGen_08OKT25</title>
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/bss-overrides.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -53,10 +54,10 @@
     <div class="modal fade" role="dialog" tabindex="-1" id="languagemodal">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
-                <div class="modal-header">
+                <div class="modal-header bg-header-modal">
                     <h4 class="modal-title">Add / Edit Language</h4><button class="btn-close" type="button" aria-label="Close" data-bs-dismiss="modal"></button>
                 </div>
-                <div class="modal-body">
+                <div class="modal-body bg-modal-body">
                     <div class="row">
                         <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                             <p class="text-add">Index</p>
@@ -88,6 +89,7 @@
         </div>
     </div>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/bs-init.js"></script>
     <script src="assets/js/languagelink.js"></script>
 </body>
 
diff --git a/html/webpage/log.html b/html/webpage/log.html
index 5d05a09..d942a70 100644
--- a/html/webpage/log.html
+++ b/html/webpage/log.html
@@ -4,8 +4,9 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>AAS_NewGen_30Sept25</title>
+    <title>AAS_NewGen_08OKT25</title>
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/bss-overrides.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -50,6 +51,7 @@
         </div>
     </div>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/bs-init.js"></script>
     <script src="assets/js/log.js"></script>
 </body>
 
diff --git a/html/webpage/login.html b/html/webpage/login.html
index ed49a15..ba46872 100644
--- a/html/webpage/login.html
+++ b/html/webpage/login.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <title>AAS NewGeneration 17092025</title>
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/bss-overrides.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -37,6 +38,7 @@
         </div>
     </section>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/bs-init.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/html/webpage/messagebank.html b/html/webpage/messagebank.html
index b838503..e724853 100644
--- a/html/webpage/messagebank.html
+++ b/html/webpage/messagebank.html
@@ -4,8 +4,9 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>AAS_NewGen_30Sept25</title>
+    <title>AAS_NewGen_08OKT25</title>
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/bss-overrides.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -55,29 +56,29 @@
         </div>
     </div>
     <div class="modal fade" role="dialog" tabindex="-1" id="messagebankmodal">
-        <div class="modal-dialog" role="document">
+        <div class="modal-dialog modal-xl" role="document">
             <div class="modal-content">
-                <div class="modal-header">
+                <div class="modal-header bg-header-modal">
                     <h4 class="modal-title">Add / Edit Message</h4>
                 </div>
-                <div class="modal-body">
+                <div class="modal-body bg-modal-body">
                     <div class="row">
-                        <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
+                        <div class="col-4 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                             <p class="text-add">Index</p>
                         </div>
-                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8"><input class="w-25 input-add form-control" type="text" id="messageindex" placeholder="Index" readonly=""></div>
+                        <div class="col-8 col-sm-8 col-md-8 col-lg-9 col-xl-9"><input class="w-25 input-add form-control" type="text" id="messageindex" placeholder="Index" readonly=""></div>
                     </div>
                     <div class="row">
-                        <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
+                        <div class="col-4 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                             <p class="text-add">Description</p>
                         </div>
-                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8"><input type="text" id="messagedescription" class="input-add form-control" placeholder="Description"></div>
+                        <div class="col-8 col-sm-8 col-md-8 col-lg-9 col-xl-9"><input type="text" id="messagedescription" class="input-add form-control" placeholder="Description"></div>
                     </div>
                     <div class="row">
-                        <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
+                        <div class="col-4 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                             <p class="text-add">Language</p>
                         </div>
-                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8"><select id="messagelanguage" class="input-add form-control">
+                        <div class="col-8 col-sm-8 col-md-8 col-lg-9 col-xl-9"><select id="messagelanguage" class="input-add form-control">
                                 <option value="INDONESIA">Indonesia</option>
                                 <option value="LOCAL">Local</option>
                                 <option value="ENGLISH">English</option>
@@ -87,40 +88,40 @@
                             </select></div>
                     </div>
                     <div class="row">
-                        <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
+                        <div class="col-4 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                             <p class="text-add">ANN ID</p>
                         </div>
-                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8"><input type="number" id="messageannid" class="input-add form-control" min="1" max="100" value="1" step="1" placeholder="Announcement ID"></div>
+                        <div class="col-8 col-sm-8 col-md-8 col-lg-9 col-xl-9"><input type="number" id="messageannid" class="input-add form-control" min="1" max="100" value="1" step="1" placeholder="Announcement ID"></div>
                     </div>
                     <div class="row">
-                        <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
+                        <div class="col-4 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                             <p class="text-add">Voice Type</p>
                         </div>
-                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8"><select id="messagevoicetype" class="input-add form-control">
+                        <div class="col-8 col-sm-8 col-md-8 col-lg-9 col-xl-9"><select id="messagevoicetype" class="input-add form-control">
                                 <option value="VOICE_1">Voice 1</option>
                                 <option value="VOICE_2">Voice 2</option>
                                 <option value="VOICE_3">Voice 3</option>
                             </select></div>
                     </div>
                     <div class="row">
-                        <div class="col">
+                        <div class="col bg-light">
                             <ul class="list-unstyled w-100 h-100" id="messageavailablevariables"></ul>
                         </div>
-                        <div class="col-2">
-                            <div class="row"><button class="btn btn-danger" id="btnclearlist" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" style="font-size: 32;">
+                        <div class="col-3 col-sm-3 col-md-3 col-lg-2 col-xl-2">
+                            <div class="row pad-row-btn"><button class="btn btn-round-basic color-remove" data-bs-toggle="tooltip" data-bss-tooltip="" id="btnclearlist" type="button" title="Clear List"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" style="font-size: 32;">
                                         <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
                                         <path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"></path>
                                     </svg></button></div>
-                            <div class="row"><button class="btn btn-warning" id="btnremovefromlist" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" style="font-size: 32;">
+                            <div class="row pad-row-btn"><button class="btn btn-round-basic color-edit" data-bs-toggle="tooltip" data-bss-tooltip="" data-bs-placement="right" id="btnremovefromlist" type="button" title="Remove"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" style="font-size: 32;">
                                         <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
                                         <path d="M48 256a208 208 0 1 1 416 0A208 208 0 1 1 48 256zm464 0A256 256 0 1 0 0 256a256 256 0 1 0 512 0zM217.4 376.9c4.2 4.5 10.1 7.1 16.3 7.1c12.3 0 22.3-10 22.3-22.3V304h96c17.7 0 32-14.3 32-32V240c0-17.7-14.3-32-32-32H256V150.3c0-12.3-10-22.3-22.3-22.3c-6.2 0-12.1 2.6-16.3 7.1L117.5 242.2c-3.5 3.8-5.5 8.7-5.5 13.8s2 10.1 5.5 13.8l99.9 107.1z"></path>
                                     </svg></button></div>
-                            <div class="row"><button class="btn btn-success" id="btnaddtolist" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" style="font-size: 32;">
+                            <div class="row pad-row-btn"><button class="btn btn-round-basic color-import" data-bs-toggle="tooltip" data-bss-tooltip="" data-bs-placement="right" id="btnaddtolist" type="button" title="Add"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" style="font-size: 32;">
                                         <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
                                         <path d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM294.6 135.1c-4.2-4.5-10.1-7.1-16.3-7.1C266 128 256 138 256 150.3V208H160c-17.7 0-32 14.3-32 32v32c0 17.7 14.3 32 32 32h96v57.7c0 12.3 10 22.3 22.3 22.3c6.2 0 12.1-2.6 16.3-7.1l99.9-107.1c3.5-3.8 5.5-8.7 5.5-13.8s-2-10.1-5.5-13.8L294.6 135.1z"></path>
                                     </svg></button></div>
                         </div>
-                        <div class="col">
+                        <div class="col bg-light">
                             <ul class="list-unstyled w-100 h-100" id="messageselectedvariables"></ul>
                         </div>
                     </div>
@@ -130,6 +131,7 @@
         </div>
     </div>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/bs-init.js"></script>
     <script src="assets/js/messagebank.js"></script>
 </body>
 
diff --git a/html/webpage/overview.html b/html/webpage/overview.html
index 237c70c..ff8c347 100644
--- a/html/webpage/overview.html
+++ b/html/webpage/overview.html
@@ -4,8 +4,9 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>AAS_NewGen_30Sept25</title>
+    <title>AAS_NewGen_08OKT25</title>
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/bss-overrides.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -1272,9 +1273,9 @@
                 </div>
             </div>
         </div>
-        <div class="accordion-item pad-accordion">
+        <div class="accordion-item pad-accordion pad-2">
             <h2 class="accordion-header" role="tab"><button class="accordion-button collapsed bg-heading2" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-2" aria-expanded="false" aria-controls="accordion-1 .item-2">Paging Queue</button></h2>
-            <div class="accordion-collapse collapse item-2" role="tabpanel" data-bs-parent="#accordion-1">
+            <div class="accordion-collapse collapse item-2 pad-2" role="tabpanel" data-bs-parent="#accordion-1">
                 <div class="accordion-body">
                     <div class="row">
                         <div class="table-responsive">
@@ -1291,6 +1292,7 @@
                     </div>
                     <div class="row">
                         <div class="col"><button class="btn w-100 pad-button btn-round-basic color-add" id="clearpagingqueue" type="button">Clear Queue</button></div>
+                        <div class="col"><button class="btn w-100 pad-button btn-round-basic color-remove" id="removepagingqueue" type="button">Remove Queue</button></div>
                     </div>
                 </div>
             </div>
@@ -1314,12 +1316,14 @@
                     </div>
                     <div class="row">
                         <div class="col"><button class="btn w-100 pad-button btn-round-basic color-add" id="clearautomatictable" type="button">Clear Queue</button></div>
+                        <div class="col"><button class="btn w-100 pad-button btn-round-basic color-remove" id="removeautomatictable" type="button">Remove Queue</button></div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/bs-init.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/html/webpage/setting.html b/html/webpage/setting.html
index bb5a4c9..e17dcd0 100644
--- a/html/webpage/setting.html
+++ b/html/webpage/setting.html
@@ -4,8 +4,9 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>AAS_NewGen_30Sept25</title>
+    <title>AAS_NewGen_08OKT25</title>
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/bss-overrides.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -17,6 +18,7 @@
         </div>
     </div>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/bs-init.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/html/webpage/soundbank.html b/html/webpage/soundbank.html
index 8bf3ee1..fd5ca91 100644
--- a/html/webpage/soundbank.html
+++ b/html/webpage/soundbank.html
@@ -4,8 +4,9 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>AAS_NewGen_30Sept25</title>
+    <title>AAS_NewGen_08OKT25</title>
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/bss-overrides.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -57,10 +58,10 @@
     <div class="modal fade border-0" role="dialog" tabindex="-1" id="soundbankmodal">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
-                <div class="modal-header show">
+                <div class="modal-header show bg-header-modal">
                     <h4 class="modal-title align-content-center">Add / Edit Soundbank</h4>
                 </div>
-                <div class="modal-body">
+                <div class="modal-body bg-modal-body">
                     <div class="row">
                         <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                             <p class="text-add">Index</p>
@@ -97,7 +98,7 @@
                         </div>
                         <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8"><select id="modalvoicetype" class="input-add form-select"></select></div>
                     </div>
-                    <div class="row" style="height: 100px;">
+                    <div class="row">
                         <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                             <p class="text-add">Path</p>
                         </div>
@@ -109,6 +110,7 @@
         </div>
     </div>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/bs-init.js"></script>
     <script src="assets/js/soundbank.js"></script>
 </body>
 
diff --git a/html/webpage/streamerstatus.html b/html/webpage/streamerstatus.html
index 262ae6f..b251933 100644
--- a/html/webpage/streamerstatus.html
+++ b/html/webpage/streamerstatus.html
@@ -4,8 +4,9 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>AAS_NewGen_30Sept25</title>
+    <title>AAS_NewGen_08OKT25</title>
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/bss-overrides.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -29,6 +30,7 @@
         </div>
     </div>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/bs-init.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/html/webpage/timer.html b/html/webpage/timer.html
index 1d3e542..458b974 100644
--- a/html/webpage/timer.html
+++ b/html/webpage/timer.html
@@ -4,8 +4,9 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>AAS_NewGen_30Sept25</title>
+    <title>AAS_NewGen_08OKT25</title>
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/bss-overrides.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -58,10 +59,10 @@
     <div class="modal fade" role="dialog" tabindex="-1" id="schedulemodal">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
-                <div class="modal-header">
+                <div class="modal-header bg-header-modal">
                     <h4 class="modal-title">Add / Edit Schedule</h4>
                 </div>
-                <div class="modal-body">
+                <div class="modal-body bg-modal-body">
                     <div class="row">
                         <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                             <p class="text-add">Index</p>
@@ -148,7 +149,7 @@
                         <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                             <p class="text-add">Sound Path</p>
                         </div>
-                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8"><select id="schedulesoundpath" class="input-add form-control"></select></div>
+                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8"><input type="text" id="schedulesoundpath" class="input-add form-control"></div>
                     </div>
                     <div class="row">
                         <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
@@ -174,6 +175,7 @@
         </div>
     </div>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/bs-init.js"></script>
     <script src="assets/js/schedulebank.js"></script>
 </body>
 
diff --git a/html/webpage/usermanagement.html b/html/webpage/usermanagement.html
index 5631557..2599c2a 100644
--- a/html/webpage/usermanagement.html
+++ b/html/webpage/usermanagement.html
@@ -4,8 +4,9 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>AAS_NewGen_30Sept25</title>
+    <title>AAS_NewGen_08OKT25</title>
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/bss-overrides.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -44,9 +45,10 @@
                         <th class="col-sm-1">No</th>
                         <th class="col-sm-1">Username</th>
                         <th class="col-sm-1">Location</th>
-                        <th class="col">Soundbank</th>
+                        <th class="col-sm-2">Airline</th>
+                        <th class="col-sm-2">City</th>
                         <th class="col-sm-2">Messagebank</th>
-                        <th class="col-sm-2">Broadcast Zones</th>
+                        <th class="col">Broadcast Zones</th>
                     </tr>
                 </thead>
                 <tbody id="usertablebody"></tbody>
@@ -56,10 +58,10 @@
     <div class="modal fade border-0" role="dialog" tabindex="-1" id="addmodal">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
-                <div class="modal-header show">
-                    <h4 class="modal-title align-content-center">Add / Edit User</h4>
+                <div class="modal-header text-start show bg-header-modal">
+                    <h4 class="modal-title text-center align-content-center">Add / Edit User</h4>
                 </div>
-                <div class="modal-body">
+                <div class="modal-body bg-modal-body">
                     <div class="row">
                         <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                             <p class="text-add">Index</p>
@@ -86,21 +88,53 @@
                     </div>
                     <div class="row">
                         <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
-                            <p class="text-add">Sound Bank</p>
+                            <p class="text-add">Location</p>
+                        </div>
+                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8"><input type="text" id="modallocation" class="input-add form-control"></div>
+                    </div>
+                    <div class="row">
+                        <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
+                            <p class="text-add">Airline Tags</p>
+                        </div>
+                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
+                            <div class="row">
+                                <div class="col-8"><input type="text" id="modalairlinetags" class="form-control input-add"></div>
+                                <div class="col-4"><button class="btn w-100 btn-select btn-round-basic color-import" id="btnShowSoundbankModal" type="button">Select</button></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
+                            <p class="text-add">City Tags</p>
+                        </div>
+                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
+                            <div class="row">
+                                <div class="col-8"><input type="text" id="modalcitytags" class="form-control input-add"></div>
+                                <div class="col-4"></div>
+                            </div>
                         </div>
-                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8"><input type="text" id="modalsoundbank" class="input-add"><button class="btn btn-primary" id="btnShowSoundbankModal" type="button">Select</button></div>
                     </div>
                     <div class="row">
                         <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                             <p class="text-add">Message Bank</p>
                         </div>
-                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8"><input type="text" id="modalmessagebank" class="input-add"><button class="btn btn-primary" id="btnShowMessagebankModal" type="button">Select</button></div>
+                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
+                            <div class="row">
+                                <div class="col-8"><input type="text" id="modalmessagebank" class="form-control input-add"></div>
+                                <div class="col-4"><button class="btn w-100 btn-round-basic color-import" id="btnShowMessagebankModal" type="button">Select</button></div>
+                            </div>
+                        </div>
                     </div>
-                    <div class="row" style="height: 100px;">
+                    <div class="row">
                         <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                             <p class="text-add">Broadcast Zones</p>
                         </div>
-                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8"><input type="text" id="modalbroadcastzones" class="input-add" name="modalpath"><button class="btn btn-primary" id="btnShowBroaadcastZoneModal" type="button">Select</button></div>
+                        <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
+                            <div class="row">
+                                <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8"><input type="text" id="modalbroadcastzones" class="form-control input-add" name="modalpath"></div>
+                                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"><button class="btn w-100 btn-round-basic color-import" id="btnShowBroaadcastZoneModal" type="button">Select</button></div>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="modal-footer"><button class="btn btn-round-basic color-edit class25" id="usermanagementclose" type="button" data-bs-dismiss="modal">Close</button><button class="btn btn-round-basic color-add class25" id="usermanagementsave" type="button">Save</button></div>
@@ -110,43 +144,61 @@
     <div class="modal fade" role="dialog" tabindex="-1" id="soundbankmodal">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
-                <div class="modal-header">
+                <div class="modal-header form-control input-add">
                     <h4 class="modal-title">Sound Bank Selection</h4>
                 </div>
-                <div class="modal-body">
-                    <p>(mon, ganti list checkbox, dengan id=soundbankselection</p>
+                <div class="modal-body bg-modal-body">
+                    <div class="accordion" role="tablist" id="accordion-1">
+                        <div class="accordion-item pad-accordion">
+                            <h2 class="accordion-header" role="tab"><button class="accordion-button bg-heading1" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-1" aria-expanded="true" aria-controls="accordion-1 .item-1">Airline</button></h2>
+                            <div class="accordion-collapse collapse show item-1" role="tabpanel" data-bs-parent="#accordion-1">
+                                <div class="accordion-body">
+                                    <ul id="airlinelist"></ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="accordion-item pad-accordion">
+                            <h2 class="accordion-header" role="tab"><button class="accordion-button collapsed bg-heading2" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-2" aria-expanded="false" aria-controls="accordion-1 .item-2">City</button></h2>
+                            <div class="accordion-collapse collapse item-2" role="tabpanel" data-bs-parent="#accordion-1">
+                                <div class="accordion-body">
+                                    <ul id="citylist"></ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <div class="modal-footer"><button class="btn btn-light" id="soundbankselectionclose" type="button" data-bs-dismiss="modal">Close</button><button class="btn btn-primary" id="soundbankselectionsave" type="button">Save</button></div>
+                <div class="modal-footer"><button class="btn btn-round-basic color-edit class25" id="soundbankselectionclose" type="button" data-bs-dismiss="modal">Close</button><button class="btn btn-round-basic color-add class25" id="soundbankselectionsave" type="button">Save</button></div>
             </div>
         </div>
     </div>
     <div class="modal fade" role="dialog" tabindex="-1" id="broadcastzonemodal">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
-                <div class="modal-header">
+                <div class="modal-header form-control input-add">
                     <h4 class="modal-title">Broadcast Zones Selection</h4>
                 </div>
-                <div class="modal-body">
-                    <p>(mon, ganti list checkbox, dengan id=broadcastzoneselection</p>
+                <div class="modal-body bg-modal-body">
+                    <ul id="broadcastzonelist"></ul>
                 </div>
-                <div class="modal-footer"><button class="btn btn-light" id="broadcastzoneselectionclose" type="button" data-bs-dismiss="modal">Close</button><button class="btn btn-primary" id="broadcastzoneselectionsave" type="button">Save</button></div>
+                <div class="modal-footer"><button class="btn btn-round-basic color-edit class25" id="broadcastzoneselectionclose" type="button" data-bs-dismiss="modal">Close</button><button class="btn btn-round-basic color-add class25" id="broadcastzoneselectionsave" type="button">Save</button></div>
             </div>
         </div>
     </div>
     <div class="modal fade" role="dialog" tabindex="-1" id="messagebankmodal">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
-                <div class="modal-header">
+                <div class="modal-header form-control input-add">
                     <h4 class="modal-title">Message Bank Selection</h4>
                 </div>
-                <div class="modal-body">
-                    <p>(mon, ganti list checkbox, dengan id=messagebankselection</p>
+                <div class="modal-body bg-modal-body">
+                    <ul id="messagebanklist"></ul>
                 </div>
-                <div class="modal-footer"><button class="btn btn-light" id="messagebankselectionclose" type="button" data-bs-dismiss="modal">Close</button><button class="btn btn-primary" id="messagebankselectionsave" type="button">Save</button></div>
+                <div class="modal-footer"><button class="btn btn-round-basic color-edit class25" id="messagebankselectionclose" type="button" data-bs-dismiss="modal">Close</button><button class="btn btn-round-basic color-add class25" id="messagebankselectionsave" type="button">Save</button></div>
             </div>
         </div>
     </div>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/bs-init.js"></script>
     <script src="assets/js/usermanagement.js"></script>
 </body>
 
diff --git a/src/Main.kt b/src/Main.kt
index 9aa7c0f..3c2b126 100644
--- a/src/Main.kt
+++ b/src/Main.kt
@@ -7,6 +7,7 @@ import barix.TCP_Barix_Command_Server
 import codes.Somecodes
 import com.sun.jna.Platform
 import commandServer.TCP_Android_Command_Server
+import content.Category
 import content.Language
 import content.VoiceType
 import database.Log
@@ -21,6 +22,7 @@ import org.tinylog.provider.ProviderRegistry
 import oshi.util.GlobalConfig
 import web.WebApp
 import java.nio.file.Files
+import java.nio.file.Paths
 import kotlin.concurrent.fixedRateTimer
 import kotlin.io.path.absolutePathString
 
@@ -29,7 +31,7 @@ lateinit var audioPlayer: AudioPlayer
 val StreamerOutputs: MutableMap<String, BarixConnection> = HashMap()
 lateinit var udpreceiver: UDPReceiver
 lateinit var tcpreceiver: TCPReceiver
-const val version = "0.0.2 (23/09/2025)"
+const val version = "0.0.5 (09/10/2025)"
 // AAS 64 channels
 const val max_channel = 64
 
@@ -52,11 +54,17 @@ val contentCache = ContentCache()
  * Create necessary folders if not exist
  */
 fun folder_preparation(){
+    // sementara diset begini, nanti pake config file
+    Somecodes.Soundbank_directory = Paths.get("c:\\soundbank")
     Files.createDirectories(Somecodes.SoundbankResult_directory)
     Files.createDirectories(Somecodes.PagingResult_directory)
     Files.createDirectories(Somecodes.Soundbank_directory)
-    Somecodes.Soundbank_Languages_directory.forEach {
-        Files.createDirectories(it)
+    Language.entries.forEach { language ->
+        VoiceType.entries.forEach { voice ->
+            Category.entries.forEach { category ->
+                Files.createDirectories(Somecodes.SoundbankDirectory(language, voice, category) )
+            }
+        }
     }
 
 }
@@ -176,7 +184,7 @@ fun main() {
 
                 StreamerOutputs[cmd.ipaddress] = _bc
                 Logger.info { "Created new Streamer Output for channel ${_sc.channel} with IP ${cmd.ipaddress}" }
-            } else Logger.warn { "soundChannelDB doesn't have soundchannel with IP ${cmd.ipaddress}" }
+            }
 
         } else {
             // sudah ada, update data
diff --git a/src/codes/Somecodes.kt b/src/codes/Somecodes.kt
index b0bb1c8..595a02d 100644
--- a/src/codes/Somecodes.kt
+++ b/src/codes/Somecodes.kt
@@ -2,8 +2,10 @@ package codes
 
 import com.fasterxml.jackson.databind.JsonNode
 import com.fasterxml.jackson.module.kotlin.jacksonObjectMapper
+import content.Category
 import content.Language
 import content.ScheduleDay
+import content.VoiceType
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.delay
@@ -25,15 +27,8 @@ import kotlin.io.path.name
 class Somecodes {
     companion object {
         val current_directory : String = System.getProperty("user.dir")
-        val Soundbank_directory : Path = Path.of(current_directory,"Soundbank")
-        val Soundbank_Languages_directory : List<Path> = listOf(
-            Soundbank_directory.resolve(Language.INDONESIA.name),
-            Soundbank_directory.resolve(Language.LOCAL.name),
-            Soundbank_directory.resolve(Language.ENGLISH.name),
-            Soundbank_directory.resolve(Language.CHINESE.name),
-            Soundbank_directory.resolve(Language.JAPANESE.name),
-            Soundbank_directory.resolve(Language.ARABIC.name)
-        )
+        var Soundbank_directory : Path = Path.of(current_directory,"Soundbank")
+
         val SoundbankResult_directory : Path = Path.of(current_directory,"SoundbankResult")
         val PagingResult_directory : Path = Path.of(current_directory,"PagingResult")
 
@@ -56,6 +51,17 @@ class Somecodes {
         // regex for getting ann_id from Message, which is the number inside []
         private val ann_id_regex = Regex("\\[(\\d+)]")
 
+        /**
+         * Get the directory path for a specific language, voice type, and category.
+         * @param language The language.
+         * @param voice The voice type.
+         * @param category The category.
+         * @return The path to the directory.
+         */
+        fun SoundbankDirectory(language: Language, voice: VoiceType, category: Category) : Path{
+            return Soundbank_directory.resolve(language.name).resolve(voice.name).resolve(category.name)
+        }
+
         fun ExtractFilesFromClassPath(resourcePath: String, outputDir: Path)  {
             try {
                 val resource = Somecodes::class.java.getResource(resourcePath)
@@ -157,14 +163,13 @@ class Somecodes {
         /**
          * List all audio files (.mp3 and .wav) in the specified directory and its subdirectories.
          * Only files larger than 1KB are included.
-         * @param dir The directory to search in (default is the current working directory).
+         * @param p The directory Path to search in
          * @return A list of absolute paths to the audio files found.
          */
-        fun ListAudioFiles(dir: String = current_directory) : List<String>{
+        fun ListAudioFiles(p: Path) : List<String>{
             return try{
                 // find all files that ends with .mp3 or .wav
                 // and find them recursively
-                val p = Path.of(dir)
                 if (Files.exists(p) && Files.isDirectory(p)){
                     Files.walk(p)
                         // cari file regular saja
@@ -286,6 +291,23 @@ class Somecodes {
             return value is String && value.isNotBlank()
         }
 
+        /**
+         * Check if all strings in a list are valid non-blank strings.
+         * @param values The list of strings to check.
+         * @return True if all strings in the list are valid non-blank strings, false otherwise.
+         */
+        fun ValidStrings(values: List<String>) : Boolean{
+            if (values.isNotEmpty()){
+                for (v in values){
+                    if (!ValidString(v)){
+                        return false
+                    }
+                }
+                return true
+            }
+            return false
+        }
+
         /**
          * Check if a string is a valid file path and the file exists.
          * @param value The string to check.
diff --git a/src/database/MariaDB.kt b/src/database/MariaDB.kt
index 8c9d6b5..bbf8125 100644
--- a/src/database/MariaDB.kt
+++ b/src/database/MariaDB.kt
@@ -12,7 +12,6 @@ import org.tinylog.Logger
 import java.sql.Connection
 import java.sql.DriverManager
 import java.util.function.Consumer
-import kotlin.math.max
 
 /**
  * A class to manage a connection to a MariaDB database.
@@ -221,13 +220,15 @@ class MariaDB(
                 override fun Resort(): Boolean {
                     try {
                         val statement = connection.createStatement()
+                        val tempdb_name = "temp_${super.dbName}"
 
                         // use a temporary table to reorder the index
-                        statement?.executeUpdate("CREATE TABLE IF NOT EXISTS temp_${super.dbName} LIKE ${super.dbName}")
-                        statement?.executeUpdate("INSERT INTO temp_${super.dbName} (Description, TAG, Category, Language, VoiceType, Path) SELECT Description, TAG, Category, Language, VoiceType, Path FROM ${super.dbName} ORDER BY Description ")
+                        statement?.executeUpdate("CREATE TABLE IF NOT EXISTS $tempdb_name LIKE ${super.dbName}")
+                        statement?.executeUpdate("TRUNCATE TABLE $tempdb_name")
+                        statement?.executeUpdate("INSERT INTO $tempdb_name (Description, TAG, Category, Language, VoiceType, Path) SELECT Description, TAG, Category, Language, VoiceType, Path FROM ${super.dbName} ORDER BY Description ")
                         statement?.executeUpdate("TRUNCATE TABLE ${super.dbName}")
-                        statement?.executeUpdate("INSERT INTO ${super.dbName} (Description, TAG, Category, Language, VoiceType, Path) SELECT Description, TAG, Category, Language, VoiceType, Path FROM temp_${super.dbName}")
-                        statement?.executeUpdate("DROP TABLE temp_${super.dbName}")
+                        statement?.executeUpdate("INSERT INTO ${super.dbName} (Description, TAG, Category, Language, VoiceType, Path) SELECT Description, TAG, Category, Language, VoiceType, Path FROM $tempdb_name")
+                        statement?.executeUpdate("DROP TABLE $tempdb_name")
                         Logger.info("${super.dbName} table resorted by Description" as Any)
                         // reload the local list
                         Get()
@@ -421,12 +422,14 @@ class MariaDB(
                 override fun Resort(): Boolean {
                     try {
                         val statement = connection.createStatement()
+                        val tempdb_name = "temp_${super.dbName}"
                         // use a temporary table to reorder the index
-                        statement?.executeUpdate("CREATE TABLE IF NOT EXISTS temp_${super.dbName} LIKE ${super.dbName}")
-                        statement?.executeUpdate("INSERT INTO temp_${super.dbName} (Description, Language, ANN_ID, Voice_Type, Message_Detail, Message_TAGS) SELECT Description, Language, ANN_ID, Voice_Type, Message_Detail, Message_TAGS FROM ${super.dbName} ORDER BY ANN_ID ")
+                        statement?.executeUpdate("CREATE TABLE IF NOT EXISTS $tempdb_name LIKE ${super.dbName}")
+                        statement?.executeUpdate("TRUNCATE TABLE $tempdb_name")
+                        statement?.executeUpdate("INSERT INTO $tempdb_name (Description, Language, ANN_ID, Voice_Type, Message_Detail, Message_TAGS) SELECT Description, Language, ANN_ID, Voice_Type, Message_Detail, Message_TAGS FROM ${super.dbName} ORDER BY ANN_ID ")
                         statement?.executeUpdate("TRUNCATE TABLE ${super.dbName}")
-                        statement?.executeUpdate("INSERT INTO ${super.dbName} (Description, Language, ANN_ID, Voice_Type, Message_Detail, Message_TAGS) SELECT Description, Language, ANN_ID, Voice_Type, Message_Detail, Message_TAGS FROM temp_${super.dbName}")
-                        statement?.executeUpdate("DROP TABLE temp_${super.dbName}")
+                        statement?.executeUpdate("INSERT INTO ${super.dbName} (Description, Language, ANN_ID, Voice_Type, Message_Detail, Message_TAGS) SELECT Description, Language, ANN_ID, Voice_Type, Message_Detail, Message_TAGS FROM $tempdb_name")
+                        statement?.executeUpdate("DROP TABLE $tempdb_name")
                         Logger.info("${super.dbName} table resorted by Description" as Any)
                         // reload the local list
                         Get()
@@ -616,12 +619,14 @@ class MariaDB(
                 override fun Resort(): Boolean {
                     try {
                         val statement = connection.createStatement()
+                        val tempdb_name = "temp_${super.dbName}"
                         // use a temporary table to reorder the index
-                        statement?.executeUpdate("CREATE TABLE IF NOT EXISTS temp_${super.dbName} LIKE ${super.dbName}")
-                        statement?.executeUpdate("INSERT INTO temp_${super.dbName} (TAG, Language) SELECT TAG, Language FROM ${super.dbName} ORDER BY TAG")
+                        statement?.executeUpdate("CREATE TABLE IF NOT EXISTS $tempdb_name LIKE ${super.dbName}")
+                        statement?.executeUpdate("TRUNCATE TABLE $tempdb_name")
+                        statement?.executeUpdate("INSERT INTO $tempdb_name (TAG, Language) SELECT TAG, Language FROM ${super.dbName} ORDER BY TAG")
                         statement?.executeUpdate("TRUNCATE TABLE ${super.dbName}")
-                        statement?.executeUpdate("INSERT INTO ${super.dbName} (TAG, Language) SELECT TAG, Language FROM temp_${super.dbName}")
-                        statement?.executeUpdate("DROP TABLE temp_${super.dbName}")
+                        statement?.executeUpdate("INSERT INTO ${super.dbName} (TAG, Language) SELECT TAG, Language FROM $tempdb_name")
+                        statement?.executeUpdate("DROP TABLE $tempdb_name")
                         Logger.info("${super.dbName} table resorted by TAG" as Any)
                         // reload the local list
                         Get()
@@ -834,12 +839,14 @@ class MariaDB(
                 override fun Resort(): Boolean {
                     try {
                         val statement = connection.createStatement()
+                        val tempdb_name = "temp_${super.dbName}"
                         // use a temporary table to reorder the index
-                        statement?.executeUpdate("CREATE TABLE IF NOT EXISTS temp_${super.dbName} LIKE ${super.dbName}")
-                        statement?.executeUpdate("INSERT INTO temp_${super.dbName} (Description, Day, Time, Soundpath, Repeat, Enable, BroadcastZones, Language) SELECT Description, Day, Time, Soundpath, Repeat, Enable, BroadcastZones, Language FROM ${super.dbName} ORDER BY Day , Time ")
+                        statement?.executeUpdate("CREATE TABLE IF NOT EXISTS $tempdb_name LIKE ${super.dbName}")
+                        statement?.executeUpdate("TRUNCATE TABLE $tempdb_name")
+                        statement?.executeUpdate("INSERT INTO $tempdb_name (Description, Day, Time, Soundpath, Repeat, Enable, BroadcastZones, Language) SELECT Description, Day, Time, Soundpath, Repeat, Enable, BroadcastZones, Language FROM ${super.dbName} ORDER BY Day , Time ")
                         statement?.executeUpdate("TRUNCATE TABLE ${super.dbName}")
-                        statement?.executeUpdate("INSERT INTO ${super.dbName} (Description, Day, Time, Soundpath, Repeat, Enable, BroadcastZones, Language) SELECT Description, Day, Time, Soundpath, Repeat, Enable, BroadcastZones, Language FROM temp_${super.dbName}")
-                        statement?.executeUpdate("DROP TABLE temp_${super.dbName}")
+                        statement?.executeUpdate("INSERT INTO ${super.dbName} (Description, Day, Time, Soundpath, Repeat, Enable, BroadcastZones, Language) SELECT Description, Day, Time, Soundpath, Repeat, Enable, BroadcastZones, Language FROM $tempdb_name")
+                        statement?.executeUpdate("DROP TABLE $tempdb_name")
                         Logger.info("${super.dbName} table resorted by Day and Time" as Any)
                         // reload the local list
                         Get()
@@ -988,7 +995,7 @@ class MariaDB(
                 override fun Add(data: BroadcastZones): Boolean {
                     try {
                         val statement =
-                            connection.prepareStatement("INSERT INTO ${super.dbName} (description, SoundChannel, Box, Relay) VALUES (?, ?, ?, ?)")
+                            connection.prepareStatement("INSERT INTO ${super.dbName} (description, SoundChannel, id, bp) VALUES (?, ?, ?, ?)")
                         statement?.setString(1, data.description)
                         statement?.setString(2, data.SoundChannel)
                         statement?.setString(3, data.id)
@@ -1010,7 +1017,7 @@ class MariaDB(
                     try {
                         connection.autoCommit = false
                         val sql =
-                            "INSERT INTO ${super.dbName} (description, SoundChannel, Box, Relay) VALUES (?, ?, ?, ?)"
+                            "INSERT INTO ${super.dbName} (description, SoundChannel, id, bp) VALUES (?, ?, ?, ?)"
                         val statement = connection.prepareStatement(sql)
                         for (bz in data) {
                             statement.setString(1, bz.description)
@@ -1033,7 +1040,7 @@ class MariaDB(
                 override fun UpdateByIndex(index: Int, data: BroadcastZones): Boolean {
                     try {
                         val statement =
-                            connection.prepareStatement("UPDATE ${super.dbName} SET description = ?, SoundChannel = ?, Box = ?, Relay = ? WHERE `index` = ?")
+                            connection.prepareStatement("UPDATE ${super.dbName} SET description = ?, SoundChannel = ?, id = ?, bp = ? WHERE `index` = ?")
                         statement?.setString(1, data.description)
                         statement?.setString(2, data.SoundChannel)
                         statement?.setString(3, data.id)
@@ -1055,12 +1062,14 @@ class MariaDB(
                 override fun Resort(): Boolean {
                     try {
                         val statement = connection.createStatement()
+                        val tempdb_name = "temp_${super.dbName}"
                         // use a temporary table to reorder the index
-                        statement?.executeUpdate("CREATE TABLE IF NOT EXISTS temp_${super.dbName} LIKE ${super.dbName}")
-                        statement?.executeUpdate("INSERT INTO temp_${super.dbName} (description, SoundChannel, Box, Relay) SELECT description, SoundChannel, Box, Relay FROM ${super.dbName} ORDER BY description ")
+                        statement?.executeUpdate("CREATE TABLE IF NOT EXISTS $tempdb_name LIKE ${super.dbName}")
+                        statement?.executeUpdate("TRUNCATE TABLE $tempdb_name")
+                        statement?.executeUpdate("INSERT INTO $tempdb_name (description, SoundChannel, id, bp) SELECT description, SoundChannel, id, bp FROM ${super.dbName} ORDER BY description ")
                         statement?.executeUpdate("TRUNCATE TABLE ${super.dbName}")
-                        statement?.executeUpdate("INSERT INTO ${super.dbName} (description, SoundChannel, Box, Relay) SELECT description, SoundChannel, Box, Relay FROM temp_${super.dbName}")
-                        statement?.executeUpdate("DROP TABLE temp_${super.dbName}")
+                        statement?.executeUpdate("INSERT INTO ${super.dbName} (description, SoundChannel, id, bp) SELECT description, SoundChannel, id, bp FROM $tempdb_name")
+                        statement?.executeUpdate("DROP TABLE $tempdb_name")
                         Logger.info("${super.dbName} table resorted by description" as Any)
                         // reload the local list
                         Get()
@@ -1076,7 +1085,7 @@ class MariaDB(
                         val sheet = workbook.getSheet("BroadcastZones")
                             ?: throw Exception("No sheet named 'BroadcastZones' found")
                         val headerRow = sheet.getRow(0) ?: throw Exception("No header row found")
-                        val headers = arrayOf("Index", "description", "SoundChannel", "Box", "Relay")
+                        val headers = arrayOf("Index", "description", "SoundChannel", "id", "bp")
                         for ((colIndex, header) in headers.withIndex()) {
                             val cell = headerRow.getCell(colIndex) ?: throw Exception("Header '$header' not found")
                             if (cell.stringCellValue != header) throw Exception("Header '$header' not found")
@@ -1089,9 +1098,9 @@ class MariaDB(
                             val row = sheet.getRow(rowIndex) ?: continue
                             val description = row.getCell(1)?.stringCellValue ?: continue
                             val soundChannel = row.getCell(2)?.stringCellValue ?: continue
-                            val box = row.getCell(3)?.stringCellValue ?: continue
-                            val relay = row.getCell(4)?.stringCellValue ?: continue
-                            val broadcastZone = BroadcastZones(0u, description, soundChannel, box, relay)
+                            val id = row.getCell(3)?.stringCellValue ?: continue
+                            val bp = row.getCell(4)?.stringCellValue ?: continue
+                            val broadcastZone = BroadcastZones(0u, description, soundChannel, id, bp)
                             _broadcastZonesList.add(broadcastZone)
                         }
                         return AddAll(_broadcastZonesList)
@@ -1108,7 +1117,7 @@ class MariaDB(
                         val workbook = XSSFWorkbook()
                         val sheet = workbook.createSheet("BroadcastZones")
                         val headerRow = sheet.createRow(0)
-                        val headers = arrayOf("Index", "description", "SoundChannel", "Box", "Relay")
+                        val headers = arrayOf("Index", "description", "SoundChannel", "id", "bp")
                         for ((colIndex, header) in headers.withIndex()) {
                             val cell = headerRow.createCell(colIndex)
                             cell.setCellValue(header)
@@ -1119,8 +1128,8 @@ class MariaDB(
                             row.createCell(0).setCellValue(resultSet.getString("index"))
                             row.createCell(1).setCellValue(resultSet.getString("description"))
                             row.createCell(2).setCellValue(resultSet.getString("SoundChannel"))
-                            row.createCell(3).setCellValue(resultSet.getString("Box"))
-                            row.createCell(4).setCellValue(resultSet.getString("Relay"))
+                            row.createCell(3).setCellValue(resultSet.getString("id"))
+                            row.createCell(4).setCellValue(resultSet.getString("bp"))
                         }
                         for (i in headers.indices) {
                             sheet.autoSizeColumn(i)
@@ -1237,12 +1246,14 @@ class MariaDB(
                 override fun Resort(): Boolean {
                     try {
                         val statement = connection.createStatement()
+                        val tempdb_name = "temp_${super.dbName}"
                         // use a temporary table to reorder the index
-                        statement?.executeUpdate("CREATE TABLE IF NOT EXISTS temp_${super.dbName} LIKE ${super.dbName}")
-                        statement?.executeUpdate("INSERT INTO temp_${super.dbName} (Date_Time, Source, Type, Message, SB_TAGS, BroadcastZones, Repeat, Language) SELECT Date_Time, Source, Type, Message, SB_TAGS, BroadcastZones, Repeat, Language FROM ${super.dbName} ORDER BY `index` ")
+                        statement?.executeUpdate("CREATE TABLE IF NOT EXISTS $tempdb_name LIKE ${super.dbName}")
+                        statement?.executeUpdate("TRUNCATE TABLE $tempdb_name")
+                        statement?.executeUpdate("INSERT INTO $tempdb_name (Date_Time, Source, Type, Message, SB_TAGS, BroadcastZones, Repeat, Language) SELECT Date_Time, Source, Type, Message, SB_TAGS, BroadcastZones, Repeat, Language FROM ${super.dbName} ORDER BY `index` ")
                         statement?.executeUpdate("TRUNCATE TABLE ${super.dbName}")
-                        statement?.executeUpdate("INSERT INTO ${super.dbName} (Date_Time, Source, Type, Message, SB_TAGS, BroadcastZones, Repeat, Language) SELECT Date_Time, Source, Type, Message, SB_TAGS, BroadcastZones, Repeat, Language FROM temp_${super.dbName}")
-                        statement?.executeUpdate("DROP TABLE temp_${super.dbName}")
+                        statement?.executeUpdate("INSERT INTO ${super.dbName} (Date_Time, Source, Type, Message, SB_TAGS, BroadcastZones, Repeat, Language) SELECT Date_Time, Source, Type, Message, SB_TAGS, BroadcastZones, Repeat, Language FROM $tempdb_name")
+                        statement?.executeUpdate("DROP TABLE $tempdb_name")
                         Logger.info("${super.dbName} table resorted by index" as Any)
                         // reload the local list
                         Get()
@@ -1396,12 +1407,14 @@ class MariaDB(
                 override fun Resort(): Boolean {
                     try {
                         val statement = connection.createStatement()
+                        val tempdb_name = "temp_${super.dbName}"
                         // use a temporary table to reorder the index
-                        statement?.executeUpdate("CREATE TABLE IF NOT EXISTS temp_${super.dbName} LIKE ${super.dbName}")
-                        statement?.executeUpdate("INSERT INTO temp_${super.dbName} (Date_Time, Source, Type, Message, SB_TAGS) SELECT Date_Time, Source, Type, Message, SB_TAGS FROM ${super.dbName} ORDER BY `index` ")
+                        statement?.executeUpdate("CREATE TABLE IF NOT EXISTS $tempdb_name LIKE ${super.dbName}")
+                        statement?.executeUpdate("TRUNCATE TABLE $tempdb_name")
+                        statement?.executeUpdate("INSERT INTO $tempdb_name (Date_Time, Source, Type, Message, SB_TAGS) SELECT Date_Time, Source, Type, Message, SB_TAGS FROM ${super.dbName} ORDER BY `index` ")
                         statement?.executeUpdate("TRUNCATE TABLE ${super.dbName}")
-                        statement?.executeUpdate("INSERT INTO ${super.dbName} (Date_Time, Source, Type, Message, SB_TAGS) SELECT Date_Time, Source, Type, Message, SB_TAGS FROM temp_${super.dbName}")
-                        statement?.executeUpdate("DROP TABLE temp_${super.dbName}")
+                        statement?.executeUpdate("INSERT INTO ${super.dbName} (Date_Time, Source, Type, Message, SB_TAGS) SELECT Date_Time, Source, Type, Message, SB_TAGS FROM $tempdb_name")
+                        statement?.executeUpdate("DROP TABLE $tempdb_name")
                         Logger.info("${super.dbName} table resorted by index" as Any)
                         // reload the local list
                         Get()
@@ -1557,12 +1570,14 @@ class MariaDB(
                 override fun Resort(): Boolean {
                     try {
                         val statement = connection.createStatement()
+                        val tempdb_name = "temp_${super.dbName}"
                         // use a temporary table to reorder the index
-                        statement?.executeUpdate("CREATE TABLE IF NOT EXISTS temp_${super.dbName} LIKE ${super.dbName}")
-                        statement?.executeUpdate("INSERT INTO temp_${super.dbName} (channel, ip) SELECT channel, ip FROM ${super.dbName} ORDER BY `index` ")
+                        statement?.executeUpdate("CREATE TABLE IF NOT EXISTS $tempdb_name LIKE ${super.dbName}")
+                        statement?.executeUpdate("TRUNCATE TABLE $tempdb_name")
+                        statement?.executeUpdate("INSERT INTO $tempdb_name (channel, ip) SELECT channel, ip FROM ${super.dbName} ORDER BY `index` ")
                         statement?.executeUpdate("TRUNCATE TABLE ${super.dbName}")
-                        statement?.executeUpdate("INSERT INTO ${super.dbName} (channel, ip) SELECT channel, ip FROM temp_${super.dbName}")
-                        statement?.executeUpdate("DROP TABLE temp_${super.dbName}")
+                        statement?.executeUpdate("INSERT INTO ${super.dbName} (channel, ip) SELECT channel, ip FROM $tempdb_name")
+                        statement?.executeUpdate("DROP TABLE $tempdb_name")
                         Logger.info("${super.dbName} table resorted by index" as Any)
                         // reload the local list
                         Get()
@@ -1770,19 +1785,21 @@ class MariaDB(
                 override fun Resort(): Boolean {
                     try {
                             val statement = connection.createStatement()
+                            val tempdb_name = "temp_${super.dbName}"
                             // use a temporary table to reorder the index
-                            statement?.executeUpdate("CREATE TABLE IF NOT EXISTS temp_${super.dbName} LIKE ${super.dbName}")
+                            statement?.executeUpdate("CREATE TABLE IF NOT EXISTS $tempdb_name LIKE ${super.dbName}")
+                            statement?.executeUpdate("TRUNCATE TABLE $tempdb_name")
                             statement?.executeUpdate(
-                                "INSERT INTO temp_${super.dbName} (datenya, timenya, machine, description) " +
+                                "INSERT INTO $tempdb_name (datenya, timenya, machine, description) " +
                                 "SELECT datenya, timenya, machine, description FROM ${super.dbName} " +
                                 "ORDER BY datenya , timenya , machine "
                             )
                             statement?.executeUpdate("TRUNCATE TABLE ${super.dbName}")
                             statement?.executeUpdate(
                                 "INSERT INTO ${super.dbName} (datenya, timenya, machine, description) " +
-                                "SELECT datenya, timenya, machine, description FROM temp_${super.dbName}"
+                                "SELECT datenya, timenya, machine, description FROM $tempdb_name"
                             )
-                            statement?.executeUpdate("DROP TABLE temp_${super.dbName}")
+                            statement?.executeUpdate("DROP TABLE $tempdb_name")
                             Logger.info("${super.dbName} table resorted by datenya, timenya, machine" as Any)
                             // reload the local list
                             Get()
@@ -1947,12 +1964,14 @@ class MariaDB(
                 override fun Resort(): Boolean {
                     try {
                         val statement = connection.createStatement()
+                        val tempdb_name = "temp_${super.dbName}"
                         // use a temporary table to reorder the index
-                        statement?.executeUpdate("CREATE TABLE IF NOT EXISTS temp_${super.dbName} LIKE ${super.dbName}")
-                        statement?.executeUpdate("INSERT INTO temp_${super.dbName} (username, password, location, soundbank_tags, messagebank_ann_id, broadcastzones) SELECT username, password, location, soundbank_tags, messagebank_ann_id, broadcastzones FROM ${super.dbName} ORDER BY username ")
+                        statement?.executeUpdate("CREATE TABLE IF NOT EXISTS $tempdb_name LIKE ${super.dbName}")
+                        statement?.executeUpdate("TRUNCATE TABLE $tempdb_name")
+                        statement?.executeUpdate("INSERT INTO $tempdb_name (username, password, location, airline_tags, city_tags, messagebank_ann_id, broadcastzones) SELECT username, password, location, airline_tags, city_tags, messagebank_ann_id, broadcastzones FROM ${super.dbName} ORDER BY username ")
                         statement?.executeUpdate("TRUNCATE TABLE ${super.dbName}")
-                        statement?.executeUpdate("INSERT INTO ${super.dbName} (username, password, location, soundbank_tags, messagebank_ann_id, broadcastzones) SELECT username, password, location, soundbank_tags, messagebank_ann_id, broadcastzones FROM temp_${super.dbName}")
-                        statement?.executeUpdate("DROP TABLE temp_${super.dbName}")
+                        statement?.executeUpdate("INSERT INTO ${super.dbName} (username, password, location, airline_tags, city_tags, messagebank_ann_id, broadcastzones) SELECT username, password, location, airline_tags, city_tags, messagebank_ann_id, broadcastzones FROM $tempdb_name")
+                        statement?.executeUpdate("DROP TABLE $tempdb_name")
                         Logger.info("${super.dbName} table resorted by index" as Any)
                         // reload the local list
                         Get()
@@ -2254,24 +2273,21 @@ class MariaDB(
      * @return a list of Soundbank with Category City and matching tag
      */
     fun Find_Soundbank_City(tag: String) : List<Soundbank>{
-        val lowerTag = tag.lowercase()
         return soundDB.List
             .filter{ it.Category== Category.City.name }
-            .filter { it.TAG.lowercase()==lowerTag}
+            .filter { it.TAG.equals(tag,true)}
     }
 
     fun Find_Soundbank_AirplaneName(tag: String) : List<Soundbank>{
-        val lowerTag = tag.lowercase()
         return soundDB.List
             .filter{ it.Category== Category.Airplane_Name.name }
-            .filter { it.TAG.lowercase()==lowerTag}
+            .filter { it.TAG.equals(tag,true)}
     }
 
     fun Find_Soundbank_Places(tag: String) : List<Soundbank>{
-        val lowerTag = tag.lowercase()
         return soundDB.List
             .filter{ it.Category== Category.Places.name }
-            .filter { it.TAG.lowercase()==lowerTag}
+            .filter { it.TAG.equals(tag,true)}
     }
 
     fun Find_Soundbank_Shalat(tag: String) : List<Soundbank>{
@@ -2282,25 +2298,85 @@ class MariaDB(
     }
 
     fun Find_Soundbank_Sequence(tag: String) : List<Soundbank>{
-        val lowerTag = tag.lowercase()
-
         return soundDB.List
             .filter{ it.Category== Category.Sequence.name }
-            .filter { it.TAG.lowercase()==lowerTag}
+            .filter { it.TAG.equals(tag,true)}
     }
 
     fun Find_Soundbank_Reason(tag: String) : List<Soundbank>{
-        val lowerTag = tag.lowercase()
         return soundDB.List
             .filter{ it.Category== Category.Reason.name }
-            .filter { it.TAG.lowercase()==lowerTag}
+            .filter { it.TAG.equals(tag,true)}
     }
 
     fun Find_Soundbank_Procedure(tag: String) : List<Soundbank> {
-        val lowerTag = tag.lowercase()
         return soundDB.List
             .filter { it.Category == Category.Procedure.name }
-            .filter { it.TAG.lowercase() == lowerTag }
+            .filter { it.TAG.equals(tag,true) }
+    }
+
+    /**
+     * Get all distinct airline code tags from soundbank
+     * @return a list of distinct airline code tags sorted alphabetically
+     */
+    fun Get_AirlineCode_Tags(): List<String> {
+        return soundDB.List
+            .filter { it.Category == Category.Airline_Code.name }
+            .map { it.TAG }
+            .distinct()
+            .sorted()
+    }
+
+    /**
+     * Get all distinct city tags from soundbank
+     * @return a list of distinct city tags sorted alphabetically
+     */
+    fun Get_City_Tags(): List<String> {
+        return soundDB.List
+            .filter { it.Category == Category.City.name }
+            .map { it.TAG }
+            .distinct()
+            .sorted()
+    }
+
+    /**
+     * Get all distinct message ID from messagebank
+     * @return a list of distinct ANN_ID sorted numerically
+     */
+    fun Get_MessageID_List(): List<UInt> {
+        return messageDB.List
+            .distinctBy { it.ANN_ID }
+            .map { it.ANN_ID }
+            .sorted()
+    }
+
+    /**
+     * Get all distinct broadcast zone descriptions from broadcastDB
+     * @return a list of distinct broadcast zone descriptions sorted alphabetically
+     */
+    fun Get_BroadcastZone_List(): List<String> {
+        return broadcastDB.List
+            .distinctBy { it.description }
+            .map { it.description }
+            .sorted()
+    }
+
+    /**
+     * Get all distinct sound channel from soundchannelDB
+     * @return a list of distinct sound channel sorted alphabetically
+     */
+    fun Get_SoundChannel_List(): List<String> {
+        return soundchannelDB.List
+            .distinctBy { it.channel }
+            .map { it.channel }
+            .sorted()
+    }
+
+    /**
+     * Check if a username already exists in the userDB (case-insensitive)
+     */
+    fun Username_exists(username: String): Boolean {
+        return userDB.List.any { it.username.equals(username, ignoreCase = true) }
     }
 
 
diff --git a/src/database/UserDB.kt b/src/database/UserDB.kt
index bf02d86..991ac35 100644
--- a/src/database/UserDB.kt
+++ b/src/database/UserDB.kt
@@ -5,6 +5,22 @@ data class UserDB(var index: UInt, var username: String, var password: String, v
     override fun toString(): String {
         return "UserDB(index=$index, username='$username', location='$location', airline_tags='$airline_tags', city_tags='$city_tags', messagebank_ann_id='$messagebank_ann_id', broadcastzones='$broadcastzones')"
     }
+
+    /**
+     * Compares this UserDB object with another UserDB object for equality.
+     * Two UserDB objects are considered equal if all their properties are equal, except for the index property.
+     */
+    fun isEqual(other: UserDB?): Boolean {
+        if (other == null) return false
+        return this.username == other.username &&
+                this.password == other.password &&
+                this.location == other.location &&
+                this.airline_tags == other.airline_tags &&
+                this.city_tags == other.city_tags &&
+                this.messagebank_ann_id == other.messagebank_ann_id &&
+                this.broadcastzones == other.broadcastzones
+
+    }
 }
 
 
diff --git a/src/web/KeyValueMessage.kt b/src/web/KeyValueMessage.kt
new file mode 100644
index 0000000..d7e07d1
--- /dev/null
+++ b/src/web/KeyValueMessage.kt
@@ -0,0 +1,4 @@
+package web
+
+class KeyValueMessage(val key: String, val value: String) {
+}
\ No newline at end of file
diff --git a/src/web/WebApp.kt b/src/web/WebApp.kt
index 6bc6e0e..6cedfde 100644
--- a/src/web/WebApp.kt
+++ b/src/web/WebApp.kt
@@ -15,7 +15,12 @@ import content.Category
 import content.Language
 import content.ScheduleDay
 import content.VoiceType
-import database.*
+import database.BroadcastZones
+import database.LanguageLink
+import database.MariaDB
+import database.Messagebank
+import database.SoundChannel
+import database.Soundbank
 import db
 import io.javalin.Javalin
 import io.javalin.apibuilder.ApiBuilder.before
@@ -639,7 +644,6 @@ class WebApp(val listenPort: Int, val userlist: List<Pair<String, String>>) {
                             // get timer list
                             it.result(MariaDB.ArrayListtoString(db.scheduleDB.List))
                         }
-
                         delete("List") {
                             // truncate timer table
                             if (db.scheduleDB.Clear()) {
@@ -651,38 +655,6 @@ class WebApp(val listenPort: Int, val userlist: List<Pair<String, String>>) {
                         }
                         post("Add"){
                             // TODO add new schedule
-                            // recheck lagi tambahan steph
-                            val json: JsonNode = objectmapper.readTree(it.body())
-                            val description = json.get("Description")?.asText("") ?: ""
-                            val day = json.get("Day")?.asText("") ?: ""
-                            val time = json.get("Time")?.asText("") ?: ""
-                            val soundpath = json.get("Soundpath")?.asText("") ?: ""
-                            val repeat = json.get("Repeat")?.asInt()?.toUByte() ?: 0u
-                            val enable = json.get("Enable")?.asBoolean() ?: false
-                            val broadcast_zones = json.get("BroadcastZones")?.asText("") ?: ""
-                            val language = json.get("Language")?.asText("") ?: ""
-                            if (ValidString(description)){
-                                if (ValidString(day) && ValidScheduleDay(day)){
-                                    if (ValidString(time) && ValidScheduleTime(time)){
-                                        if (ValidString(soundpath) && ValidFile(soundpath)){
-                                            if (repeat in 0u..127u){
-                                                if (ValidString(broadcast_zones)){
-                                                    val zones = broadcast_zones.split(";")
-                                                    if (zones.all { zz -> db.broadcastDB.List.any { xx -> xx.description.equals(zz,true) } }){
-                                                        if (ValidString(language) && Language.entries.any{ lang -> lang.name == language }){
-                                                            val newvalue = ScheduleBank(0u, description, day, time, soundpath, repeat, enable, broadcast_zones, language)
-                                                            if (db.scheduleDB.Add(newvalue)){
-                                                                db.scheduleDB.Resort()
-                                                                it.result(objectmapper.writeValueAsString(resultMessage("OK")))
-                                                            } else it.status(500).result(objectmapper.writeValueAsString(resultMessage("Failed to add schedule to database")))
-                                                        } else it.status(400).result(objectmapper.writeValueAsString(resultMessage("Invalid Language")))
-                                                    } else it.status(400).result(objectmapper.writeValueAsString(resultMessage("Contains unsupported BroadcastZones")))
-                                                } else it.status(400).result(objectmapper.writeValueAsString(resultMessage("Invalid BroadcastZones")))
-                                            } else it.status(400).result(objectmapper.writeValueAsString(resultMessage("Invalid Repeat, must be between 0-127")))
-                                        } else it.status(400).result(objectmapper.writeValueAsString(resultMessage("Invalid Soundpath")))
-                                    } else it.status(400).result(objectmapper.writeValueAsString(resultMessage("Invalid Time format, must be HH:mm")))
-                                } else it.status(400).result(objectmapper.writeValueAsString(resultMessage("Invalid Day format")))
-                            } else it.status(400).result(objectmapper.writeValueAsString(resultMessage("Invalid Description")))
                         }
                         delete("DeleteByIndex/{index}") {
                             // delete by index
@@ -813,17 +785,6 @@ class WebApp(val listenPort: Int, val userlist: List<Pair<String, String>>) {
                                 it.status(400).result(objectmapper.writeValueAsString(resultMessage("Invalid XLSX file")))
                             }
                         }
-
-                        //TODO kirim list message dan broadcast zones untuk ADD/Edit schedule
-                        get("GetMessageAndBroadcastZones") {
-                            val result = object {
-                                //TODO filter message without input variable
-                                val messages = db.messageDB.List
-
-                                val broadcastzones = db.broadcastDB.List
-                            }
-                            it.result(objectmapper.writeValueAsString(result))
-                        }
                     }
                     path("Log") {
                         get("List") { get1 ->
@@ -1123,68 +1084,6 @@ class WebApp(val listenPort: Int, val userlist: List<Pair<String, String>>) {
                             }
                         }
                     }
-
-                    // Steph : coba tambah untuk QueuePaging Table. Belum ada di JS file(?)
-                    path("QueuePaging"){
-                        get("List"){
-                            it.result(MariaDB.ArrayListtoString(db.queuepagingDB.List))
-                        }
-                        delete("List"){
-                            // truncate queue paging table
-                            if (db.queuepagingDB.Clear()) {
-                                db.queuepagingDB.Get()
-                                it.result(objectmapper.writeValueAsString(resultMessage("OK")))
-                            } else {
-                                it.status(500).result(objectmapper.writeValueAsString(resultMessage("Failed to truncate queue paging table")))
-                            }
-                        }
-                        delete("DeleteByIndex/{index}") {
-                            // delete by index
-                            val index = it.pathParam("index").toUIntOrNull()
-                            if (index == null) {
-                                it.status(400).result(objectmapper.writeValueAsString(resultMessage("Invalid index")))
-                            } else {
-                                if (db.queuepagingDB.DeleteByIndex(index.toInt())) {
-                                    db.queuepagingDB.Resort()
-                                    it.result(objectmapper.writeValueAsString(resultMessage("OK")))
-                                } else {
-                                    it.status(500).result(objectmapper.writeValueAsString(resultMessage("Failed to delete queue paging with index $index")))
-                                }
-                            }
-                        }
-
-                    }
-
-                    // Steph : coba tambah untuk QueueTable Table. Belum ada di JS file(?)
-                    path("QueueTable"){
-                        get("List"){
-                            it.result(MariaDB.ArrayListtoString(db.queuetableDB.List))
-                        }
-                        delete("List"){
-                            // truncate queue table
-                            if (db.queuetableDB.Clear()) {
-                                db.queuetableDB.Get()
-                                it.result(objectmapper.writeValueAsString(resultMessage("OK")))
-                            } else {
-                                it.status(500).result(objectmapper.writeValueAsString(resultMessage("Failed to truncate queue sound table")))
-                            }
-                        }
-                        delete("DeleteByIndex/{index}") {
-                            // delete by index
-                            val index = it.pathParam("index").toUIntOrNull()
-                            if (index == null) {
-                                it.status(400).result(objectmapper.writeValueAsString(resultMessage("Invalid index")))
-                            } else {
-                                if (db.queuetableDB.DeleteByIndex(index.toInt())) {
-                                    db.queuetableDB.Resort()
-                                    it.result(objectmapper.writeValueAsString(resultMessage("OK")))
-                                } else {
-                                    it.status(500).result(objectmapper.writeValueAsString(resultMessage("Failed to delete queue sound with index $index")))
-                                }
-                            }
-                        }
-                    }
-
                 }
             }
         }.start(listenPort)