diff --git a/www/about.html b/www/about.html
index f72bb90..339ed77 100644
--- a/www/about.html
+++ b/www/about.html
@@ -58,7 +58,7 @@
 
       <div id="navMenu" class="navbar-menu">
         <div class="navbar-start ml-6">
-          <a class="navbar-item has-text-weight-bold" href="/"> Home </a>
+          <a class="navbar-item" href="/"> Home </a>
           <div class="navbar-item has-dropdown is-hoverable">
             <a class="navbar-link"> Cellular </a>
             <div class="navbar-dropdown is-boxed">
@@ -79,7 +79,7 @@
               <a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
             </div>
           </div>
-          <a class="navbar-item" href="/about.html"> About </a>
+          <a class="navbar-item has-text-weight-bold" href="/about.html"> About </a>
         </div>
 
         <div class="navbar-end">
diff --git a/www/advance-settings.html b/www/advance-settings.html
index a9e0a33..03c1105 100644
--- a/www/advance-settings.html
+++ b/www/advance-settings.html
@@ -59,7 +59,7 @@
 
       <div id="navMenu" class="navbar-menu">
         <div class="navbar-start ml-6">
-          <a class="navbar-item has-text-weight-bold" href="/"> Home </a>
+          <a class="navbar-item" href="/"> Home </a>
           <div class="navbar-item has-dropdown is-hoverable">
             <a class="navbar-link"> Cellular </a>
             <div class="navbar-dropdown is-boxed">
@@ -75,7 +75,7 @@
           <div class="navbar-item has-dropdown is-hoverable">
             <a class="navbar-link"> Advance </a>
             <div class="navbar-dropdown is-boxed">
-              <a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
+              <a class="navbar-item has-text-weight-bold" href="/advance-settings.html"> Advance Settings </a>
               <a class="navbar-item" href="#">Experimental Features</a>
               <a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
             </div>
diff --git a/www/bandlock.html b/www/bandlock.html
index cf416d2..cb226f8 100644
--- a/www/bandlock.html
+++ b/www/bandlock.html
@@ -1,333 +1,426 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-    <!-- Logo -->
-    <link rel="simpleadmin-logo" href="favicon.ico" />
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
-    <link rel="stylesheet" href="css/bulma/bulma.scss" />
-    <link rel="stylesheet" href="css/bulma/css/bulma.min.css" />
-    <link rel="stylesheet" href="css/bulma/css/bulma.css" />
-    <link rel="stylesheet" href="css/custom.css" />
+  <!-- Logo -->
+  <link rel="simpleadmin-logo" href="favicon.ico" />
 
-    <!-- Font awesome icons -->
-    <script
-      src="https://kit.fontawesome.com/b0caedfab3.js"
-      crossorigin="anonymous"
-    ></script>
+  <link rel="stylesheet" href="css/bulma/bulma.scss" />
+  <link rel="stylesheet" href="css/bulma/css/bulma.min.css" />
+  <link rel="stylesheet" href="css/bulma/css/bulma.css" />
+  <link rel="stylesheet" href="css/custom.css" />
 
-    <script src="js/styles/toggle-theme.js"></script>
-    <script src="/js/styles/nav-burger.js"></script>
-    <script src="/js/styles/modal-trigger.js"></script>
-    <script src="/js/utils/reboot.js"></script>
-    <script defer src="/js/auth/auth.js"></script>
+  <!-- Font awesome icons -->
+  <script src="https://kit.fontawesome.com/b0caedfab3.js" crossorigin="anonymous"></script>
 
-    <script>
-      (function () {
-        const savedTheme = localStorage.getItem("theme") || "theme-dark";
-        document.documentElement.classList.add(savedTheme);
-      })();
-    </script>
-    <title>QuecManager</title>
-  </head>
-
-  <body class="body-margin">
-    <nav class="navbar is-transparent">
-      <div class="navbar-brand">
-        <a class="navbar-item" href="/">
-          <img src="/assets/logo.png" alt="Logo" />
-          <span class="title">QuecManager</span>
-        </a>
-        <a
-          role="button"
-          class="navbar-burger"
-          aria-label="menu"
-          aria-expanded="false"
-          data-target="navMenu"
-        >
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-        </a>
-      </div>
-
-      <div id="navMenu" class="navbar-menu">
-        <div class="navbar-start ml-6">
-          <a class="navbar-item has-text-weight-bold" href="/"> Home </a>
-          <div class="navbar-item has-dropdown is-hoverable">
-            <a class="navbar-link"> Cellular </a>
-            <div class="navbar-dropdown is-boxed">
-              <a class="navbar-item" href="/bandlock.html"> Band Locking </a>
-              <a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
-              <a class="navbar-item" href="/cell-scanner.html">Cell Scanner</a>
-              <a class="navbar-item" href="/cell-settings.html"
-                >Cell Settings</a
-              >
-              <a class="navbar-item" href="/cell-sms.html"> Cell SMS </a>
-            </div>
-          </div>
-          <div class="navbar-item has-dropdown is-hoverable">
-            <a class="navbar-link"> Advance </a>
-            <div class="navbar-dropdown is-boxed">
-              <a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
-              <a class="navbar-item" href="#">Experimental Features</a>
-              <a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
-            </div>
-          </div>
-          <a class="navbar-item" href="/about.html"> About </a>
-        </div>
-
-        <div class="navbar-end">
-          <div class="navbar-item">
-            <div class="buttons is-flex-direction-column-mobile">
-              <p class="control is-expanded-mobile">
-                <a
-                  href="#"
-                  class="button is-link is-outlined is-fullwidth-mobile"
-                >
-                  <span class="icon">
-                    <i class="fas fa-arrows-rotate"></i>
-                  </span>
-                  <span>Restart Connection</span>
-                </a>
-              </p>
-              <div class="is-flex is-mobile is-align-items-center">
-                <p class="control">
-                  <div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
-                    <span class="icon">
-                      <i class="fas fa-power-off"></i>
-                    </span>
-                  </div>
-                </p>
-                <p class="control ml-2 is-mobile">
-                  <a
-                    href="#"
-                    class="button is-warning is-outlined js-theme-toggle"
-                  >
-                    <span class="icon">
-                      <i class="fas fa-sun"></i>
-                    </span>
-                  </a>
-                </p>
-                <p class="control ml-2 is-mobile">
-                  <a
-                    href="#"
-                    class="button is-warning is-outlined js-theme-toggle"
-                    id="logoutButton"
-                  >
-                    <span class="icon">
-                      <i class="fas fa-right-from-bracket"></i>
-                    </span>
-                  </a>
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </nav>
-
-    <div class="column-margin">
-      <div class="fixed-grid has-2-cols has-1-cols-mobile">
-        <div class="grid is-gap-5">
-          <div class="cell is-col-span-2 is-col-span-1-mobile">
-            <div class="card">
-              <div class="card-header">
-                <div class="card-header-title">4G LTE Band Locking</div>
-              </div>
-              <div class="card-content">
-                <div class="fixed-grid has-5-cols has-3-cols-mobile">
-                  <div class="grid" id="lte_bands">
-                    <!-- write each lte band cell here -->
-                  </div>
-                </div>
-              </div>
-              <div class="card-footer">
-                <a
-                  href="#"
-                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
-                >
-                  Lock LTE Bands
-                </a>
-
-                <a
-                  href="#"
-                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
-                >
-                  Uncheck All
-                </a>
-
-                <a
-                  href="#"
-                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
-                >
-                  Reset
-                </a>
-              </div>
-            </div>
-          </div>
-
-          <div class="cell">
-            <div class="card">
-              <div class="card-header">
-                <div class="card-header-title">5G-NR NSA Band Locking</div>
-              </div>
-              <div class="card-content">
-                <div class="fixed-grid has-5-cols has-3-cols-mobile">
-                  <div class="grid" id="nsa_bands">
-                    <!-- write each nsa band cell here -->
-                  </div>
-                </div>
-              </div>
-              <div class="card-footer">
-                <a
-                  href="#"
-                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
-                >
-                  Lock NSA Bands
-                </a>
-
-                <a
-                  href="#"
-                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
-                >
-                  Uncheck All
-                </a>
-
-                <a
-                  href="#"
-                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
-                >
-                  Reset
-                </a>
-              </div>
-            </div>
-          </div>
-
-          <div class="cell">
-            <div class="card">
-              <div class="card-header">
-                <div class="card-header-title">5G-NR SA Band Locking</div>
-              </div>
-              <div class="card-content">
-                <div class="fixed-grid has-5-cols has-3-cols-mobile">
-                  <div class="grid" id="sa_bands">
-                    <!-- write each SA band cell here -->
-                  </div>
-                </div>
-              </div>
-              <div class="card-footer">
-                <a
-                  href="#"
-                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
-                >
-                  Lock SA Bands
-                </a>
-
-                <a
-                  href="#"
-                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
-                >
-                  Uncheck All
-                </a>
-
-                <a
-                  href="#"
-                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
-                >
-                  Reset
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <footer class="footer">
-      <div class="content">
-        <div class="fixed-grid has-2-cols has-1-cols-mobile">
-          <div class="grid">
-            <div class="cell">
-              <div class="icon-text">
-                <span class="icon has-text-info">
-                  <i class="fas fa-info-circle"></i>
-                </span>
-                <span>Information</span>
-              </div>
-
-              <p class="block has-text-weight-semibold">
-                If problem persists after locking bands, please reboot the
-                modem.
-              </p>
-            </div>
-
-            <div class="cell">
-              <div class="icon-text">
-                <span class="icon has-text-info">
-                  <i class="fas fa-info-circle"></i>
-                </span>
-                <span>Current Active Bands</span>
-              </div>
-
-              <p class="block has-text-weight-semibold">
-                Band 1 / Band 3 / NR Band 41
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </footer>
-    <div id="reboot-modal" class="modal">
-      <div class="modal-background"></div>
-      <div class="modal-card">
-        <section class="modal-card-body rounded-edge">
-          <p class="subtitle" id="modal-message">
-            Do you want to reboot the device?
-          </p>
-          <div id="loading-content" style="display: none">
-            <div class="custom-loader"></div>
-            <div class="countdown-text">
-              Rebooting... <span id="countdown">40</span>s
-            </div>
-          </div>
-          <div class="buttons" id="modal-buttons">
-            <button class="button is-warning" id="rebootModem">Reboot</button>
-            <button class="button cancel" aria-label="close">Cancel</button>
-          </div>
-        </section>
-      </div>
-    </div>
-  </body>
+  <script src="js/styles/toggle-theme.js"></script>
+  <script src="/js/styles/nav-burger.js"></script>
+  <script src="/js/styles/modal-trigger.js"></script>
+  <script src="/js/utils/reboot.js"></script>
+  <script defer src="/js/auth/auth.js"></script>
 
   <script>
-    var lte_bands =
-      "1:2:3:4:5:7:8:12:13:14:18:19:20:25:26:28:29:30:32:34:38:39:40:41:42:43:46:48:66:71";
-    var nsa_bands = "1:2:3:5:7:8:12:20:25:28:38:40:41:48:66:71:77:78:79";
-    var sa_bands = "1:2:3:5:7:8:12:20:25:28:38:40:41:48:66:71:77:78:79";
+    (function () {
+      const savedTheme = localStorage.getItem("theme") || "theme-dark";
+      document.documentElement.classList.add(savedTheme);
+    })();
+  </script>
+  <title>QuecManager</title>
+</head>
 
+<body class="body-margin">
+  <nav class="navbar is-transparent">
+    <div class="navbar-brand">
+      <a class="navbar-item" href="/">
+        <img src="/assets/logo.png" alt="Logo" />
+        <span class="title">QuecManager</span>
+      </a>
+      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+
+    <div id="navMenu" class="navbar-menu">
+      <div class="navbar-start ml-6">
+        <a class="navbar-item" href="/"> Home </a>
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link has-text-weight-bold"> Cellular </a>
+          <div class="navbar-dropdown is-boxed">
+            <a class="navbar-item" href="/bandlock.html"> Band Locking </a>
+            <a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
+            <a class="navbar-item" href="/cell-scanner.html">Cell Scanner</a>
+            <a class="navbar-item" href="/cell-settings.html">Cell Settings</a>
+            <a class="navbar-item" href="/cell-sms.html"> Cell SMS </a>
+          </div>
+        </div>
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link"> Advance </a>
+          <div class="navbar-dropdown is-boxed">
+            <a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
+            <a class="navbar-item" href="#">Experimental Features</a>
+            <a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
+          </div>
+        </div>
+        <a class="navbar-item" href="/about.html"> About </a>
+      </div>
+
+      <div class="navbar-end">
+        <div class="navbar-item">
+          <div class="buttons is-flex-direction-column-mobile">
+            <p class="control is-expanded-mobile">
+              <a href="#" class="button is-link is-outlined is-fullwidth-mobile">
+                <span class="icon">
+                  <i class="fas fa-arrows-rotate"></i>
+                </span>
+                <span>Restart Connection</span>
+              </a>
+            </p>
+            <div class="is-flex is-mobile is-align-items-center">
+              <p class="control">
+              <div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal">
+                <span class="icon">
+                  <i class="fas fa-power-off"></i>
+                </span>
+              </div>
+              </p>
+              <p class="control ml-2 is-mobile">
+                <a href="#" class="button is-warning is-outlined js-theme-toggle">
+                  <span class="icon">
+                    <i class="fas fa-sun"></i>
+                  </span>
+                </a>
+              </p>
+              <p class="control ml-2 is-mobile">
+                <a href="#" class="button is-warning is-outlined js-theme-toggle" id="logoutButton">
+                  <span class="icon">
+                    <i class="fas fa-right-from-bracket"></i>
+                  </span>
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+
+  <div class="column-margin">
+    <div class="fixed-grid has-2-cols has-1-cols-mobile">
+      <div class="grid is-gap-5">
+        <div class="cell is-col-span-2 is-col-span-1-mobile">
+          <div class="card">
+            <div class="card-header">
+              <div class="card-header-title">4G LTE Band Locking</div>
+            </div>
+            <div class="card-content">
+              <div class="fixed-grid has-5-cols has-3-cols-mobile">
+                <div class="grid" id="lte_bands">
+                  <!-- LTE bands will be populated here -->
+                </div>
+              </div>
+            </div>
+            <div class="card-footer">
+              <div id="lockLte" class="button card-footer-item has-text-link has-text-weight-semibold has-text-white">
+                Lock LTE Bands
+              </div>
+              <div id="uncheckLte"
+                class="button card-footer-item has-text-link has-text-weight-semibold has-text-white">
+                Uncheck All
+              </div>
+              <div class="button card-footer-item has-text-link has-text-weight-semibold has-text-white">
+                Reset
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="cell">
+          <div class="card">
+            <div class="card-header">
+              <div class="card-header-title">5G-NR NSA Band Locking</div>
+            </div>
+            <div class="card-content">
+              <div class="fixed-grid has-5-cols has-3-cols-mobile">
+                <div class="grid" id="nsa_bands">
+                  <!-- NSA bands will be populated here -->
+                </div>
+              </div>
+            </div>
+            <div class="card-footer">
+              <div id="lockNsa" class="button card-footer-item has-text-link has-text-weight-semibold has-text-white">
+                Lock NSA Bands
+              </div>
+              <div id="uncheckNsa"
+                class="button card-footer-item has-text-link has-text-weight-semibold has-text-white">
+                Uncheck All
+              </div>
+              <div class="button card-footer-item has-text-link has-text-weight-semibold has-text-white">
+                Reset
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="cell">
+          <div class="card">
+            <div class="card-header">
+              <div class="card-header-title">5G-NR SA Band Locking</div>
+            </div>
+            <div class="card-content">
+              <div class="fixed-grid has-5-cols has-3-cols-mobile">
+                <div class="grid" id="sa_bands">
+                  <!-- SA bands will be populated here -->
+                </div>
+              </div>
+            </div>
+            <div class="card-footer">
+              <div id="lockSa" class="button card-footer-item has-text-link has-text-weight-semibold has-text-white">
+                Lock SA Bands
+              </div>
+              <div id="uncheckSa" class="button card-footer-item has-text-link has-text-weight-semibold has-text-white">
+                Uncheck All
+              </div>
+              <div class="button card-footer-item has-text-link has-text-weight-semibold has-text-white">
+                Reset
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <footer class="footer">
+    <div class="content">
+      <div class="fixed-grid has-2-cols has-1-cols-mobile">
+        <div class="grid">
+          <div class="cell">
+            <div class="icon-text">
+              <span class="icon has-text-info">
+                <i class="fas fa-info-circle"></i>
+              </span>
+              <span>Information</span>
+            </div>
+
+            <p class="block has-text-weight-semibold">
+              If problem persists after locking bands, please reboot the
+              modem.
+            </p>
+          </div>
+
+          <div class="cell">
+            <div class="icon-text">
+              <span class="icon has-text-info">
+                <i class="fas fa-info-circle"></i>
+              </span>
+              <span>Current Active Bands</span>
+            </div>
+
+            <p class="block has-text-weight-semibold">
+              Band 1 / Band 3 / NR Band 41
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
+  <div id="reboot-modal" class="modal">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+      <section class="modal-card-body rounded-edge">
+        <p class="subtitle" id="modal-message">
+          Do you want to reboot the device?
+        </p>
+        <div id="loading-content" style="display: none">
+          <div class="custom-loader"></div>
+          <div class="countdown-text">
+            Rebooting... <span id="countdown">40</span>s
+          </div>
+        </div>
+        <div class="buttons" id="modal-buttons">
+          <button class="button is-warning" id="rebootModem">Reboot</button>
+          <button class="button cancel" aria-label="close">Cancel</button>
+        </div>
+      </section>
+    </div>
+  </div>
+  <script>
+    // Function to fetch supported bands via AT command and populate the checkboxes
+    async function fetchSupportedBands() {
+      try {
+        const response = await fetch('/cgi-bin/atinout_handler.sh', {
+          method: 'POST',
+          body: 'command=' + encodeURIComponent('AT+QNWPREFCFG="policy_band"')
+        });
+        const data = await response.json();
+
+        const lteBandsMatch = data.output.match(/"lte_band",([0-9:]+)/);
+        const nsaBandsMatch = data.output.match(/"nsa_nr5g_band",([0-9:]+)/);
+        const saBandsMatch = data.output.match(/"nrdc_nr5g_band",([0-9:]+)/);;
+
+        if (lteBandsMatch) populateBands(lteBandsMatch[1], "#lte_bands");
+        if (nsaBandsMatch) populateBands(nsaBandsMatch[1], "#nsa_bands");
+        if (saBandsMatch) populateBands(saBandsMatch[1], "#sa_bands");
+
+        fetchActiveBands();
+      } catch (error) {
+        console.error('Error fetching supported bands:', error);
+      }
+    }
+
+    // Function to fetch currently active bands and mark the checkboxes accordingly
+    async function fetchActiveBands() {
+      try {
+        const response = await fetch('/cgi-bin/atinout_handler.sh', {
+          method: 'POST',
+          body: 'command=' + encodeURIComponent('AT+QNWPREFCFG="lte_band";+QNWPREFCFG="nsa_nr5g_band";+QNWPREFCFG="nrdc_nr5g_band"')
+        });
+        const data = await response.json();
+
+        // Remove the first line of the output
+        data.output = data.output.split('\n').slice(1).join('\n');
+
+        // Extract active bands
+        const activeLteBands = data.output.match(/"lte_band",([0-9:]+)/)[1].split(':');
+        const activeNsaBands = data.output.match(/"nsa_nr5g_band",([0-9:]+)/)[1].split(':');
+        const activeSaBands = data.output.match(/"nr5g_band",([0-9:]+)/)[1].split(':');
+
+        // // Mark checkboxes as checked for active bands
+        markActiveBands(activeLteBands, '#lte_bands');
+        markActiveBands(activeNsaBands, '#nsa_bands');
+        markActiveBands(activeSaBands, '#sa_bands');
+      } catch (error) {
+        console.error('Error fetching active bands:', error);
+      }
+    }
+
+    // Function to populate bands in the target element
     function populateBands(bandsString, targetId) {
-      var bandsArray = bandsString.split(":");
-      var html = "";
+      var bandsArray = bandsString.split(':');
+      var html = '';
 
       for (var i = 0; i < bandsArray.length; i++) {
-        html +=
-          '<div class="cell"><label class="checkbox"><input type="checkbox" /> B' +
-          bandsArray[i] +
-          "</label></div>";
+        html += `<div class="cell">
+          <label class="checkbox">
+            <input type="checkbox" value="${bandsArray[i]}" /> B${bandsArray[i]}
+          </label>
+        </div>`;
       }
 
-      // Inject the generated HTML into the target element
       document.querySelector(targetId).innerHTML = html;
     }
 
-    // Populate the bands in their respective grids
-    populateBands(lte_bands, "#lte_bands");
-    populateBands(nsa_bands, "#nsa_bands");
-    populateBands(sa_bands, "#sa_bands");
+    // Function to mark checkboxes as checked based on active bands
+    function markActiveBands(activeBands, targetId) {
+      const checkboxes = document.querySelectorAll(`${targetId} input[type="checkbox"]`);
+      checkboxes.forEach((checkbox) => {
+        if (activeBands.includes(checkbox.value)) {
+          checkbox.setAttribute('checked', 'checked');
+        }
+      });
+    }
+
+    // Function to uncheck all checkboxes in the target element
+    function uncheckAll(targetId) {
+      const checkboxes = document.querySelectorAll(`${targetId} input[type="checkbox"]`);
+      checkboxes.forEach((checkbox) => {
+        checkbox.removeAttribute('checked');
+        checkbox.checked = false; // Also update the state programmatically
+      });
+    }
+
+    // Event listeners for "Uncheck All" buttons
+    document.getElementById('uncheckLte').addEventListener('click', function (event) {
+      event.preventDefault();
+      uncheckAll('#lte_bands');
+    });
+
+    document.getElementById('uncheckNsa').addEventListener('click', function (event) {
+      event.preventDefault();
+      uncheckAll('#nsa_bands');
+    });
+
+    document.getElementById('uncheckSa').addEventListener('click', function (event) {
+      event.preventDefault();
+      uncheckAll('#sa_bands');
+    });
+
+    // Locking the Bands
+    // Function to get checked bands and generate AT command
+    function getCheckedBandsCommand(targetId, commandType) {
+      const checkboxes = document.querySelectorAll(`${targetId} input[type="checkbox"]:checked`);
+      const checkedBands = Array.from(checkboxes).map(cb => cb.value).sort((a, b) => a - b);
+
+      if (checkedBands.length === 0) {
+        return null; // Return null if no bands are selected
+      }
+
+      const bandString = checkedBands.join(':');
+      return `AT+QNWPREFCFG="${commandType}",${bandString}`;
+    }
+
+    // Function to send AT command via atinout
+    async function sendATCommand(command) {
+      try {
+        const response = await fetch('/cgi-bin/atinout_handler.sh', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+          },
+          body: `command=${encodeURIComponent(command)}`
+        });
+        const data = await response.json();
+        return data;
+
+        // refetch active bands after successful command
+        fetchActiveBands();
+      } catch (error) {
+        console.error('Error sending AT command:', error);
+        throw error;
+      }
+    }
+
+    // Function to handle band locking for a specific type
+    async function lockBands(targetId, commandType) {
+      const command = getCheckedBandsCommand(targetId, commandType);
+      if (!command) {
+        alert('Please select at least one band to lock.');
+        return;
+      }
+
+      try {
+        await sendATCommand(command);
+        alert(`Successfully locked ${commandType.split('_')[0].toUpperCase()} bands`);
+      } catch (error) {
+        alert(`Failed to lock bands: ${error.message}`);
+      }
+    }
+
+    // Event listeners for Lock buttons
+    document.getElementById('lockLte').addEventListener('click', () =>
+      lockBands('#lte_bands', 'lte_band')
+    );
+
+    document.getElementById('lockNsa').addEventListener('click', () =>
+      lockBands('#nsa_bands', 'nsa_nr5g_band')
+    );
+
+    document.getElementById('lockSa').addEventListener('click', () =>
+      lockBands('#sa_bands', 'nr5g_band')
+    );
+
+
+    // Initial call to fetch supported bands on page load
+    window.onload = fetchSupportedBands;
   </script>
-</html>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/www/cell-locking.html b/www/cell-locking.html
index 5d52f86..63c66d9 100644
--- a/www/cell-locking.html
+++ b/www/cell-locking.html
@@ -58,9 +58,9 @@
 
       <div id="navMenu" class="navbar-menu">
         <div class="navbar-start ml-6">
-          <a class="navbar-item has-text-weight-bold" href="/"> Home </a>
+          <a class="navbar-item" href="/"> Home </a>
           <div class="navbar-item has-dropdown is-hoverable">
-            <a class="navbar-link"> Cellular </a>
+            <a class="navbar-link has-text-weight-bold"> Cellular </a>
             <div class="navbar-dropdown is-boxed">
               <a class="navbar-item" href="/bandlock.html"> Band Locking </a>
               <a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
diff --git a/www/cell-scanner.html b/www/cell-scanner.html
index 239508e..c1599d0 100644
--- a/www/cell-scanner.html
+++ b/www/cell-scanner.html
@@ -59,8 +59,8 @@
       <div id="navMenu" class="navbar-menu">
         <div class="navbar-start ml-6">
           <a class="navbar-item has-text-weight-bold" href="/"> Home </a>
-          <div class="navbar-item has-dropdown is-hoverable">
-            <a class="navbar-link"> Cellular </a>
+          <div class="navbar-item">
+            <a class="navbar-link has-text-weight-bold"> Cellular </a>
             <div class="navbar-dropdown is-boxed">
               <a class="navbar-item" href="/bandlock.html"> Band Locking </a>
               <a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
diff --git a/www/cell-settings.html b/www/cell-settings.html
index c3158a3..a11a7ef 100644
--- a/www/cell-settings.html
+++ b/www/cell-settings.html
@@ -59,8 +59,8 @@
       <div id="navMenu" class="navbar-menu">
         <div class="navbar-start ml-6">
           <a class="navbar-item has-text-weight-bold" href="/"> Home </a>
-          <div class="navbar-item has-dropdown is-hoverable">
-            <a class="navbar-link"> Cellular </a>
+          <div class="navbar-item">
+            <a class="navbar-link has-text-weight-bold"> Cellular </a>
             <div class="navbar-dropdown is-boxed">
               <a class="navbar-item" href="/bandlock.html"> Band Locking </a>
               <a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
diff --git a/www/cell-sms.html b/www/cell-sms.html
index b680c76..7492b30 100644
--- a/www/cell-sms.html
+++ b/www/cell-sms.html
@@ -59,8 +59,8 @@
       <div id="navMenu" class="navbar-menu">
         <div class="navbar-start ml-6">
           <a class="navbar-item has-text-weight-bold" href="/"> Home </a>
-          <div class="navbar-item has-dropdown is-hoverable">
-            <a class="navbar-link"> Cellular </a>
+          <div class="navbar-item">
+            <a class="navbar-link has-text-weight-bold"> Cellular </a>
             <div class="navbar-dropdown is-boxed">
               <a class="navbar-item" href="/bandlock.html"> Band Locking </a>
               <a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
diff --git a/www/css/custom.css b/www/css/custom.css
index 413d12a..e9ab706 100644
--- a/www/css/custom.css
+++ b/www/css/custom.css
@@ -260,4 +260,32 @@ html.theme-light {
   .cell-carousel__dot--active {
     background: #3273dc;
   }
-}
\ No newline at end of file
+}
+
+/* Change checkbox checked color to this: #3273dc */
+/* Hide the default checkbox */
+/* input[type="checkbox"] {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 2px solid #ccc;
+  border-radius: 4px;
+  background-color: white;
+  cursor: pointer;
+} */
+
+/* Style when checkbox is checked */
+/* input[type="checkbox"]:checked {
+  background-color: blue;
+  border-color: blue;
+} */
+
+/* Style the checkmark */
+/* input[type="checkbox"]:checked::before {
+  content: "✔";
+  display: block;
+  color: white;
+  font-size: 12px;
+  text-align: center;
+  line-height: 14px;
+} */
diff --git a/www/index.html b/www/index.html
index a916cd3..32671e7 100644
--- a/www/index.html
+++ b/www/index.html
@@ -26,59 +26,65 @@
   </head>
 
   <body>
-    <div class="box container mt-6">
-      <div class="fixed-grid has-1-cols">
-        <div class="grid is-gap-5">
-          <div class="cell">
-            <div class="field is-grouped">
-              <div class="control">
-                <img
-                  src="/assets/logo.png"
-                  alt="Logo"
-                  class="image is-square image is-32x32"
-                />
+    <div class="container mt-6">
+      <div class="card">
+        <div class="card-content">
+          <div class="fixed-grid has-1-cols">
+            <div class="grid is-gap-5">
+              <div class="cell">
+                <div class="field is-grouped">
+                  <div class="control">
+                    <img
+                      src="/assets/logo.png"
+                      alt="Logo"
+                      class="image is-square image is-32x32"
+                    />
+                  </div>
+                  <div class="control">
+                    <h1 class="title">QuecManager Login</h1>
+                  </div>
+                </div>
               </div>
-              <div class="control">
-                <h1 class="title">QuecManager Login</h1>
+
+              <div class="cell">
+                <form id="loginForm">
+                  <div class="field">
+                    <label class="label">Username</label>
+                    <div class="control">
+                      <input
+                        class="input"
+                        id="username"
+                        type="text"
+                        required
+                        placeholder="Username"
+                      />
+                    </div>
+                  </div>
+
+                  <div class="field">
+                    <label class="label">Password</label>
+                    <div class="control">
+                      <input
+                        class="input"
+                        id="password"
+                        type="password"
+                        required
+                        placeholder="********"
+                      />
+                    </div>
+                  </div>
+
+                  <button class="button is-primary" type="submit">
+                    Sign in
+                  </button>
+                  <p
+                    id="error"
+                    class="has-text-danger has-text-weight-semibold mt-2"
+                  ></p>
+                </form>
               </div>
             </div>
           </div>
-
-          <div class="cell">
-            <form id="loginForm">
-              <div class="field">
-                <label class="label">Username</label>
-                <div class="control">
-                  <input
-                    class="input"
-                    id="username"
-                    type="text"
-                    required
-                    placeholder="Username"
-                  />
-                </div>
-              </div>
-
-              <div class="field">
-                <label class="label">Password</label>
-                <div class="control">
-                  <input
-                    class="input"
-                    id="password"
-                    type="password"
-                    required
-                    placeholder="********"
-                  />
-                </div>
-              </div>
-
-              <button class="button is-primary" type="submit">Sign in</button>
-              <p
-                id="error"
-                class="has-text-danger has-text-weight-semibold mt-2"
-              ></p>
-            </form>
-          </div>
         </div>
       </div>
     </div>
diff --git a/www/js/band-locking.js/fetch-bands.js b/www/js/band-locking.js/fetch-bands.js
new file mode 100644
index 0000000..e69de29
diff --git a/www/js/home/main.js b/www/js/home/main.js
index 7ff2879..496f538 100644
--- a/www/js/home/main.js
+++ b/www/js/home/main.js
@@ -1,12 +1,12 @@
 // Constants
 const ACCESS_TECH_MAP = {
   2: "UTRAN",
-  4: "UTRAN W/ HSDPA",
-  5: "UTRAN W/ HSUPA",
-  6: "UTRAN W/ HSDPA & HSUPA",
+  4: "UTRAN / HSDPA",
+  5: "UTRAN / HSUPA",
+  6: "UTRAN / HSDPA & HSUPA",
   7: "E-UTRAN",
-  10: "E-UTRAN connected to a 5GCN",
-  11: "NR connected to a 5GCN",
+  10: "E-UTRAN - 5GCN",
+  11: "NR - 5GCN",
   12: "NG-RAN",
   13: "E-UTRAN-NR dual",
 };
@@ -384,8 +384,12 @@ function processBandwidth(response, networkType) {
 
   if (networkType === "NR5G-NSA") {
     processNR5GBandwidth(sccLines, pccBWParsed);
-  } else {
+  } else if (networkType === "NR5G-SA") {
+    processNR5GBandwidth(sccLines, pccBWParsed);
+  } else if (networkType === "LTE") {
     processLTEBandwidth(sccLines, pccBWParsed);
+  } else {
+    setText("allBW", "Unknown");
   }
 }
 
@@ -397,19 +401,38 @@ function extractSCCData(response) {
 }
 
 function processNR5GBandwidth(sccLines, pccBWParsed) {
-  const nrBW = sccLines[sccLines.length - 1].split(":")[1].split(",")[2].trim();
-  const nrBWParsed = NR_BANDWIDTH_MAP[nrBW] || "Unknown";
+  const networkType = determineNetworkType(jsonData[10].response);
 
-  const lteBW = sccLines.slice(0, sccLines.length - 1).map((line) => {
-    const bw = line.split(":")[1].split(",")[2].trim();
-    return BANDWIDTH_MAP[bw] || "Unknown";
-  });
+  if (networkType === "NR5G-SA") {
+    const nrBW = sccLines.slice(0, sccLines.length - 1).map((line) => {
+      const bw = line.split(":")[1].split(",")[2].trim();
+      return NR_BANDWIDTH_MAP[bw] || "Unknown";
+    });
 
-  if (lteBW.length === 0) {
-    setText("allBW", `${pccBWParsed} + NR${nrBWParsed}`);
-    return;
+    if (nrBW.length === 0) {
+      setText("allBW", `${pccBWParsed}`);
+      return;
+    }
+
+    setText("allBW", `${pccBWParsed} + ${nrBW.join(" / ")}`);
+  } else {
+    const nrBW = sccLines[sccLines.length - 1]
+      .split(":")[1]
+      .split(",")[2]
+      .trim();
+    const nrBWParsed = NR_BANDWIDTH_MAP[nrBW] || "Unknown";
+
+    const lteBW = sccLines.slice(0, sccLines.length - 1).map((line) => {
+      const bw = line.split(":")[1].split(",")[2].trim();
+      return BANDWIDTH_MAP[bw] || "Unknown";
+    });
+
+    if (lteBW.length === 0) {
+      setText("allBW", `${pccBWParsed} + NR${nrBWParsed}`);
+      return;
+    }
+    setText("allBW", `${pccBWParsed} + ${lteBW.join(" / ")} + NR${nrBWParsed}`);
   }
-  setText("allBW", `${pccBWParsed} + ${lteBW.join(" + ")} + NR${nrBWParsed}`);
 }
 
 function processLTEBandwidth(sccLines, pccBWParsed) {
@@ -773,6 +796,8 @@ function processBandsTable(jsonData) {
     const sccRow = createBandTableRow(sccBand, networkType, servingCellJSON);
     tableBody.appendChild(sccRow);
   });
+
+  initMobileCarousel();
 }
 
 function processCellInfo(jsonData) {
@@ -1086,9 +1111,8 @@ document.addEventListener("DOMContentLoaded", () => {
   setupEventListeners();
 });
 
-// Mobile carousel functions
-let touchStartX = 0;
-let touchEndX = 0;
+let carouselInitialized = false;
+let currentSlide = 0;
 
 function initMobileCarousel() {
   const table = document.getElementById("bandTable");
@@ -1096,65 +1120,95 @@ function initMobileCarousel() {
   const rows = tbody.querySelectorAll("tr");
 
   if (window.innerWidth <= 768) {
-    // Create carousel structure
-    const carouselWrapper = document.createElement("div");
-    carouselWrapper.className = "cell-carousel";
+    let carouselWrapper = document.querySelector(".cell-carousel");
 
-    const carouselContainer = document.createElement("div");
-    carouselContainer.className = "cell-carousel__container";
+    if (!carouselInitialized) {
+      // Create carousel structure only if it doesn't exist
+      carouselWrapper = document.createElement("div");
+      carouselWrapper.className = "cell-carousel";
 
-    // Move content to carousel
-    rows.forEach((row) => {
-      carouselContainer.insertAdjacentHTML(
-        "beforeend",
-        row.getAttribute("data-mobile")
-      );
-    });
+      const carouselContainer = document.createElement("div");
+      carouselContainer.className = "cell-carousel__container";
 
-    carouselWrapper.appendChild(carouselContainer);
+      carouselWrapper.appendChild(carouselContainer);
 
-    // Add only indicators
-    const indicatorsHTML = `
-      <div class="cell-carousel__indicators">
-        ${Array.from(
-          { length: rows.length },
-          (_, i) =>
-            `<span class="cell-carousel__dot ${
-              i === 0 ? "cell-carousel__dot--active" : ""
-            }" 
-                 onclick="goToSlide(${i})"></span>`
-        ).join("")}
-      </div>
-    `;
+      // Add touch event listeners only once
+      carouselContainer.addEventListener("touchstart", handleTouchStart, false);
+      carouselContainer.addEventListener("touchmove", handleTouchMove, false);
+      carouselContainer.addEventListener("touchend", handleTouchEnd, false);
 
-    // Replace table with carousel
-    table.style.display = "none";
-    table.parentNode.insertBefore(carouselWrapper, table);
-    carouselWrapper.insertAdjacentHTML("beforeend", indicatorsHTML);
+      // Insert carousel into DOM
+      table.style.display = "none";
+      table.parentNode.insertBefore(carouselWrapper, table);
 
-    // Add touch event listeners
-    carouselContainer.addEventListener("touchstart", handleTouchStart, false);
-    carouselContainer.addEventListener("touchmove", handleTouchMove, false);
-    carouselContainer.addEventListener("touchend", handleTouchEnd, false);
+      carouselInitialized = true;
+    }
+
+    // Update carousel content
+    updateCarouselContent(rows);
   } else {
-    // Restore desktop view if necessary
+    // Restore desktop view
     const carousel = document.querySelector(".cell-carousel");
     if (carousel) {
-      carousel.remove();
+      carousel.style.display = "none";
       table.style.display = "";
     }
+
     rows.forEach((row) => {
       row.innerHTML = row.getAttribute("data-desktop");
     });
   }
 }
 
+function updateCarouselContent(rows) {
+  const carouselContainer = document.querySelector(".cell-carousel__container");
+  const indicators = document.querySelector(".cell-carousel__indicators");
+
+  if (!carouselContainer) return;
+
+  // Clear existing content
+  carouselContainer.innerHTML = "";
+  if (indicators) indicators.remove();
+
+  // Add new slides
+  rows.forEach((row) => {
+    carouselContainer.insertAdjacentHTML(
+      "beforeend",
+      row.getAttribute("data-mobile")
+    );
+  });
+
+  // Update indicators
+  const indicatorsHTML = `
+    <div class="cell-carousel__indicators">
+      ${Array.from(
+        { length: rows.length },
+        (_, i) =>
+          `<span class="cell-carousel__dot ${
+            i === currentSlide ? "cell-carousel__dot--active" : ""
+          }"
+               onclick="goToSlide(${i})"></span>`
+      ).join("")}
+    </div>
+  `;
+
+  carouselContainer.parentNode.insertAdjacentHTML("beforeend", indicatorsHTML);
+
+  // Reset to first slide and update display
+  currentSlide = 0;
+  updateCarousel();
+}
+
+// Your existing touch handling functions remain the same
+let touchStartX = 0;
+let touchEndX = 0;
+
 function handleTouchStart(event) {
   touchStartX = event.touches[0].clientX;
 }
 
 function handleTouchMove(event) {
-  event.preventDefault(); // Prevent scrolling while swiping
+  event.preventDefault();
 }
 
 function handleTouchEnd(event) {
@@ -1163,18 +1217,15 @@ function handleTouchEnd(event) {
 }
 
 function handleSwipe() {
-  const swipeThreshold = 50; // Minimum distance for a swipe
+  const swipeThreshold = 50;
   const container = document.querySelector(".cell-carousel__container");
   const slides = container.querySelectorAll(".cell-carousel__slide");
-
   const diffX = touchStartX - touchEndX;
 
   if (Math.abs(diffX) > swipeThreshold) {
     if (diffX > 0 && currentSlide < slides.length - 1) {
-      // Swipe left, go to next slide
       currentSlide++;
     } else if (diffX < 0 && currentSlide > 0) {
-      // Swipe right, go to previous slide
       currentSlide--;
     }
     updateCarousel();
@@ -1188,15 +1239,16 @@ function goToSlide(index) {
 
 function updateCarousel() {
   const container = document.querySelector(".cell-carousel__container");
+  if (!container) return;
+
   container.style.transform = `translateX(-${currentSlide * 100}%)`;
 
-  // Update indicators
   const dots = document.querySelectorAll(".cell-carousel__dot");
   dots.forEach((dot, index) => {
     dot.classList.toggle("cell-carousel__dot--active", index === currentSlide);
   });
 }
 
-// Initialize carousel on load and resize
+// Update your event listeners
 window.addEventListener("load", initMobileCarousel);
 window.addEventListener("resize", initMobileCarousel);
