diff --git a/.gitignore b/.gitignore
index 7d9a7d2..46ba834 100644
--- a/.gitignore
+++ b/.gitignore
@@ -129,7 +129,7 @@ dist
 .yarn/install-state.gz
 .pnp.*
 
-sarlink.jpg
+sarlink*
 
 uploads/
 
diff --git a/README.md b/README.md
index 9b78de7..78947c6 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,10 @@
 # SAR Link Customer Registration form.
 
-
 ## Todo
-- [ ] Implement per device addons.
-- [ ] Add all devices and their corresponding addons.
+
+- [x] Implement per device addons.
+- [x] Add all devices and their corresponding addons.
 - [ ] Generate a connection request receipt including all information entered by the user.
-- [ ] Incorporate a step to ask for the customer's phone number.
+- [x] Incorporate a step to ask for the customer's phone number.
 - [ ] Create a link with instructions on how to connect, including how to disable MAC randomization and providing the network password.
 - [ ] Dhivehi support, Dhivehi to be the default language
diff --git a/server.js b/server.js
index 5d02e17..05cb7e8 100644
--- a/server.js
+++ b/server.js
@@ -21,6 +21,7 @@ function loadEnv() {
 			currency: process.env.PRICE_CURRENCY || "MVR",
 		}
 	}
+	console.log(`Registration is now ${registrationOpen ? "open" : "closed"}`)
 }
 loadEnv()
 
@@ -31,7 +32,6 @@ fs.watchFile(path.join(__dirname, ".env"), (curr, prev) => {
 	delete require.cache[require.resolve("dotenv")]
 	require("dotenv").config({ override: true })
 	loadEnv()
-	console.log(`Registration is now ${registrationOpen ? "open" : "closed"}`)
 })
 
 // initialize express
@@ -46,7 +46,7 @@ app.use(express.urlencoded({ extended: true }))
 // add multer
 const multer = require("multer")
 if (!fs.existsSync("uploads")) fs.mkdirSync("uploads", { recursive: true })
-if (!fs.existsSync("registrations.csv")) fs.writeFileSync("registrations.csv", "Customer Name,MAC Address,Device Name,Roaming,Gaming,Wired,Receipt\n", { encoding: "utf-8" });
+if (!fs.existsSync("registrations.csv")) fs.writeFileSync("registrations.csv", "Customer Name,Phone Number,MAC Address,Device Name,Roaming,Gaming,Wired,Receipt\n", { encoding: "utf-8" });
 const upload = multer({
 	storage: multer.diskStorage({
 		destination: (req, file, cb) => {
@@ -70,21 +70,19 @@ app.post("/register", upload.single("transfer_receipt"), (req, res) => {
 		return;
 	}
 
-	let { customer_name, mac_address, device_name, is_roaming, is_gaming } = req.body
+	let { customer_name, phone_number, mac_address, device_name, is_roaming, is_gaming } = req.body
 	const receipt = req.file;
 
 	if (!is_roaming || is_roaming === "false") is_roaming = false
 	if (!is_gaming || is_gaming === "false") is_gaming = false
 
-	if (!customer_name || !mac_address || !device_name || !receipt) {
+	if (!customer_name || !phone_number || !mac_address || !device_name || !receipt) {
 		res.render("index", { branding, message: "Please fill all fields" })
 		return;
 	}
 
-	console.log(is_roaming, is_gaming)
-
 	// save info to csv file
-	const csv = `${customer_name},${mac_address},${device_name},${is_roaming ? "true" : "false"},${is_gaming ? "true" : "false"},false,${receipt.path}\n`
+	const csv = `${customer_name},${phone_number},${mac_address.replace(/,/g, " ")},${device_name.replace(/,/g, " ")},${is_roaming.replace(/,/g, " ")},${is_gaming.replace(/,/g, " ")},false,${receipt.path}\n`
 	fs.appendFile("registrations.csv", csv, (err) => {
 		if (err) {
 			console.error(err)
@@ -93,7 +91,7 @@ app.post("/register", upload.single("transfer_receipt"), (req, res) => {
 	});
 
 	// send receipt to telegram
-	sendInfo(receipt.path, { customer_name, mac_address, device_name, is_roaming, is_gaming })
+	sendInfo(receipt.path, { customer_name, phone_number, mac_address, device_name, is_roaming, is_gaming })
 		.then(() => {
 			res.render("success", { branding })
 		})
diff --git a/src/public/styles.css b/src/public/styles.css
index 08950ad..69e5bbf 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -1441,38 +1441,19 @@ html {
   align-items: center;
 }
 
-.select {
-  display: inline-flex;
+.radio {
+  flex-shrink: 0;
+  --chkbg: var(--bc);
+  height: 1.5rem;
+  width: 1.5rem;
   cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  height: 3rem;
-  min-height: 3rem;
-  padding-left: 1rem;
-  padding-right: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  line-height: 2;
-  border-radius: var(--rounded-btn, 0.5rem);
+  border-radius: 9999px;
   border-width: 1px;
-  border-color: transparent;
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
-  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
-    linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position: calc(100% - 20px) calc(1px + 50%),
-    calc(100% - 16.1px) calc(1px + 50%);
-  background-size: 4px 4px,
-    4px 4px;
-  background-repeat: no-repeat;
-}
-
-.select[multiple] {
-  height: auto;
+  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
+  --tw-border-opacity: 0.2;
 }
 
 .steps {
@@ -1503,15 +1484,6 @@ html {
   --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
 }
 
-.badge-secondary {
-  --tw-border-opacity: 1;
-  border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity)));
-  --tw-text-opacity: 1;
-  color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
-}
-
 .badge-error {
   border-color: transparent;
   --tw-bg-opacity: 1;
@@ -1520,11 +1492,6 @@ html {
   color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
 }
 
-.badge-outline.badge-secondary {
-  --tw-text-opacity: 1;
-  color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity)));
-}
-
 .badge-outline.badge-error {
   --tw-text-opacity: 1;
   color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
@@ -1587,6 +1554,14 @@ html {
     border-color: var(--btn-color, var(--fallback-b2));
   }
 
+  .btn-primary {
+    --btn-color: var(--fallback-p);
+  }
+
+  .btn-accent {
+    --btn-color: var(--fallback-a);
+  }
+
   .btn-info {
     --btn-color: var(--fallback-in);
   }
@@ -1643,7 +1618,21 @@ html {
   outline-offset: 2px;
 }
 
+.btn-primary {
+  --tw-text-opacity: 1;
+  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+  outline-color: var(--fallback-p,oklch(var(--p)/1));
+}
+
 @supports (color: oklch(0 0 0)) {
+  .btn-primary {
+    --btn-color: var(--p);
+  }
+
+  .btn-accent {
+    --btn-color: var(--a);
+  }
+
   .btn-info {
     --btn-color: var(--in);
   }
@@ -1657,6 +1646,12 @@ html {
   }
 }
 
+.btn-accent {
+  --tw-text-opacity: 1;
+  color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
+  outline-color: var(--fallback-a,oklch(var(--a)/1));
+}
+
 .btn-info {
   --tw-text-opacity: 1;
   color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
@@ -2268,6 +2263,32 @@ details.collapse summary::-webkit-details-marker {
   }
 }
 
+.radio:focus {
+  box-shadow: none;
+}
+
+.radio:focus-visible {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
+}
+
+.radio:checked,
+  .radio[aria-checked="true"] {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
+  background-image: none;
+  animation: radiomark var(--animation-input, 0.2s) ease-out;
+  box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset,
+      0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset;
+}
+
+.radio:disabled {
+  cursor: not-allowed;
+  opacity: 0.2;
+}
+
 @keyframes radiomark {
   0% {
     box-shadow: 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset,
@@ -2299,55 +2320,6 @@ details.collapse summary::-webkit-details-marker {
   }
 }
 
-.select-bordered {
-  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
-}
-
-.select:focus {
-  box-shadow: none;
-  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
-}
-
-.select-disabled,
-  .select:disabled,
-  .select[disabled] {
-  cursor: not-allowed;
-  --tw-border-opacity: 1;
-  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
-  --tw-text-opacity: 0.2;
-}
-
-.select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder {
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
-  --tw-placeholder-opacity: 0.2;
-}
-
-.select-disabled::placeholder,
-  .select:disabled::placeholder,
-  .select[disabled]::placeholder {
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
-  --tw-placeholder-opacity: 0.2;
-}
-
-.select-multiple,
-  .select[multiple],
-  .select[size].select:not([size="1"]) {
-  background-image: none;
-  padding-right: 1rem;
-}
-
-[dir="rtl"] .select {
-  background-position: calc(0% + 12px) calc(1px + 50%),
-    calc(0% + 16px) calc(1px + 50%);
-}
-
 @keyframes skeleton {
   from {
     background-position: 150%;
@@ -2653,6 +2625,10 @@ details.collapse summary::-webkit-details-marker {
   margin-right: auto;
 }
 
+.mt-4 {
+  margin-top: 1rem;
+}
+
 .mt-8 {
   margin-top: 2rem;
 }
@@ -2661,8 +2637,12 @@ details.collapse summary::-webkit-details-marker {
   margin-top: 0.25rem;
 }
 
-.mt-4 {
-  margin-top: 1rem;
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
 }
 
 .flex {
@@ -2681,8 +2661,8 @@ details.collapse summary::-webkit-details-marker {
   height: 100vh;
 }
 
-.w-10 {
-  width: 2.5rem;
+.w-12 {
+  width: 3rem;
 }
 
 .w-6 {
@@ -2741,6 +2721,15 @@ details.collapse summary::-webkit-details-marker {
   border-radius: 0.25rem;
 }
 
+.border {
+  border-width: 1px;
+}
+
+.border-base-300 {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
+}
+
 .bg-base-100 {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
@@ -2765,6 +2754,14 @@ details.collapse summary::-webkit-details-marker {
   stroke: currentColor;
 }
 
+.text-center {
+  text-align: center;
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
@@ -2816,4 +2813,36 @@ details.collapse summary::-webkit-details-marker {
 
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+@media (min-width: 1024px) {
+  .lg\:join-horizontal.join {
+    flex-direction: row;
+  }
+
+  .lg\:join-horizontal.join .join-item:first-child:not(:last-child),.lg\:join-horizontal
+  .join *:first-child:not(:last-child) .join-item {
+    border-end-end-radius: 0;
+    border-start-end-radius: 0;
+    border-end-start-radius: inherit;
+    border-start-start-radius: inherit;
+  }
+
+  .lg\:join-horizontal.join .join-item:last-child:not(:first-child),.lg\:join-horizontal
+  .join *:last-child:not(:first-child) .join-item {
+    border-end-start-radius: 0;
+    border-start-start-radius: 0;
+    border-end-end-radius: inherit;
+    border-start-end-radius: inherit;
+  }
+
+  .lg\:join-horizontal.join > :where(*:not(:first-child)) {
+    margin-top: 0px;
+    margin-bottom: 0px;
+    margin-inline-start: -1px;
+  }
+
+  .lg\:mb-0 {
+    margin-bottom: 0px;
+  }
 }
\ No newline at end of file
diff --git a/src/telegram.js b/src/telegram.js
index 344ff63..a54f832 100644
--- a/src/telegram.js
+++ b/src/telegram.js
@@ -9,7 +9,7 @@ function kebabToTitleCase(str) {
 async function sendInfo(filepath, details) {
 	// const caption = `Customer Name: \`${customer_name}\`\nMAC Address: \`${mac_address}\`\nDevice Name: \`${device_name}\`\nRoaming: **${roaming ? "Yes" : "No"}**\nGaming: **${gaming ? "Yes" : "No"}**`
 	let caption = "";
-	let manualHandles = ["mac_address", "device_name"];
+	let manualHandles = ["mac_address", "device_name", "is_roaming", "is_gaming"];
 	for (const key in details) {
 		if (manualHandles.includes(key)) continue;
 
@@ -24,7 +24,9 @@ async function sendInfo(filepath, details) {
 
 	let macAddresses = details["mac_address"].split(",");
 	let deviceNames = details["device_name"].split(",");
-	caption += "\n" + macAddresses.map((macAddress, index) => `- \`${macAddress}\` : \`${deviceNames[index]}\``).join("\n");
+	let isRoaming = details["is_roaming"].split(",");
+	let isGaming = details["is_gaming"].split(",");
+	caption += macAddresses.map((macAddress, index) => `\n\`${deviceNames[index]}\`\nMAC Address: \`${macAddress}\`\nIs Roaming: **${isRoaming[index] === "true" ? "Yes" : "No"}**\nIs Gaming: **${isGaming[index] === "true" ? "Yes" : "No"}**`).join("\n");
 
 	caption = caption.replace(/-/g, '\\-')
 
diff --git a/src/views/index.ejs b/src/views/index.ejs
index 52dbd85..5e2afe2 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -1,597 +1,551 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title><%- branding.title %> - KYC</title>
-    <link rel="shortcut icon" href="<%- branding.logo %>" type="image/x-icon" />
-    <link rel="stylesheet" href="/public/styles.css" />
-    <script>
-      const blacklistedChars = /\s,/g;
 
-      let macAddressElements = [];
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title><%- branding.title %> - KYC</title>
+  <link rel="shortcut icon" href="<%- branding.logo %>" type="image/x-icon" />
+  <link rel="stylesheet" href="/public/styles.css" />
+  <script>
+    const blacklistedChars = /\s,/g;
 
-      function saveMACAddresses() {
-        localStorage.setItem("mac_address", macAddressElements.map(macAddressElement => document.getElementById(macAddressElement).value).join(","));
-        document.getElementById("mac_address").value = localStorage.getItem("mac_address")
+    let macAddressElements = [];
+
+    function saveCustomerName() {
+      localStorage.setItem("customer_name", document.getElementById("customer_name").value);
+      document.getElementById("customer_name").value = localStorage.getItem("customer_name")
+    }
+
+    function savePhoneNumber() {
+      localStorage.setItem("phone_number", document.getElementById("phone_number").value);
+      document.getElementById("phone_number").value = localStorage.getItem("phone_number")
+    }
+
+    function saveMACAddresses() {
+      localStorage.setItem("mac_address", macAddressElements.map(macAddressElement => document.getElementById(macAddressElement).value).join(","));
+      document.getElementById("mac_address").value = localStorage.getItem("mac_address")
+    }
+
+    function saveDeviceNames() {
+      localStorage.setItem("device_name", macAddressElements.map(macAddressElement => document.getElementById(`${macAddressElement}_device`).value).join(","));
+      document.getElementById("device_name").value = localStorage.getItem("device_name")
+    }
+
+    function saveIsRoaming() {
+      localStorage.setItem("is_roaming", macAddressElements.map(macAddressElement => document.getElementById(`${macAddressElement}_roaming`).checked).join(","));
+      document.getElementById("is_roaming").value = localStorage.getItem("is_roaming")
+      setPricing()
+    }
+
+    function saveIsGaming() {
+      localStorage.setItem("is_gaming", macAddressElements.map(macAddressElement => document.getElementById(`${macAddressElement}_gaming`).checked).join(","));
+      document.getElementById("is_gaming").value = localStorage.getItem("is_gaming")
+      setPricing()
+    }
+
+    function addMACAddress(macAddress = "", deviceName = "", isRoaming = false, isGaming = false) {
+      let nextIndex = macAddressElements.length;
+      let nextMacAddressElement = `mac_address_${nextIndex}`;
+      while (macAddressElements.includes(nextMacAddressElement)) {
+        nextIndex += 1;
+        nextMacAddressElement = `mac_address_${nextIndex}`;
       }
-
-      function saveDeviceNames() {
-        localStorage.setItem("device_name", macAddressElements.map(macAddressElement => document.getElementById(`${macAddressElement}_device`).value).join(","));
-        document.getElementById("device_name").value = localStorage.getItem("device_name")
-      }
-
-      function addMACAddress(macAddress = "", deviceName = "") {
-        let nextIndex = macAddressElements.length;
-        let nextMacAddressElement = `mac_address_${nextIndex}`;
-        while (macAddressElements.includes(nextMacAddressElement)) {
-          nextIndex += 1;
-          nextMacAddressElement = `mac_address_${nextIndex}`;
-        }
-        const template = `
-        <div id="${nextMacAddressElement}_container" class="join w-full mt-4">
-          <div class="w-full flex flex-row justify-stretch">
-            <div class="flex-grow">
-              <input
-                id="${nextMacAddressElement}"
-                class="input input-bordered join-item w-full"
-                placeholder="00:00:00:00:00:00"
-                oninput="validateMACAddress('${nextMacAddressElement}')"
-                onchange="saveMACAddresses()"
-                value="${macAddress}"
-              />
-            </div>
-            <div class="flex-grow">
-              <input
-                id="${nextMacAddressElement}_device"
-                class="input input-bordered join-item w-full"
-                onchange="saveMACAddresses()"
-                placeholder="iphone-12"
-                onclick="fillDeviceName('${nextMacAddressElement}')"
-                oninput="saveDeviceNames()"
-                value="${deviceName}"
-              />
+      const template = `
+        <div id="${nextMacAddressElement}_container" class="w-full">
+          <div class="join w-full mt-4">
+            <div class="w-full flex flex-row justify-stretch">
+              <div class="flex-grow">
+                <input id="${nextMacAddressElement}" class="input input-bordered join-item w-full"
+                  value="${macAddress}"
+                  placeholder="00:00:00:00:00:00" oninput="validateMACAddress('${nextMacAddressElement}')"
+                  onchange="saveMACAddresses()" />
+              </div>
+              <div class="flex-grow">
+                <input id="${nextMacAddressElement}_device" class="input input-bordered join-item w-full"
+                  value="${deviceName}"
+                  onchange="saveMACAddresses()" placeholder="iphone-12"
+                  onclick="fillDeviceName('${nextMacAddressElement}')" />
+              </div>
             </div>
+            <button class="indicator" onclick="event.preventDefault();removeMACAddress('${nextMacAddressElement}')">
+              <span class="indicator-item badge badge-error">-</span>
+            </button>
           </div>
-          <button
-            class="indicator"
-            onclick="event.preventDefault();removeMACAddress('${nextMacAddressElement}')"
-          >
-            <span class="indicator-item badge badge-error">-</span>
-          </button>
-        </div>`
-        // document.getElementById("mac_addresses").innerHTML += template;
-        document.getElementById("mac_addresses").insertAdjacentHTML("beforeend", template)
-        macAddressElements.push(nextMacAddressElement)
+          <div class="join align-middle mt-2">
+            <button class="btn join-item btn-accent" onclick="event.preventDefault()">Add-ons</button>
+            <input class="join-item btn" type="checkbox" id="${nextMacAddressElement}_roaming" onchange="saveIsRoaming()"
+              ${isRoaming === "true" ? "checked" : ""} 
+              aria-label="Roaming" />
+            <input class="join-item btn" type="checkbox" id="${nextMacAddressElement}_gaming" onchange="saveIsGaming()"
+              ${isGaming === "true" ? "checked" : ""}
+              aria-label="Gaming" />
+          </div>
+        </div>`;
+      // document.getElementById("mac_addresses").innerHTML += template;
+      document.getElementById("mac_addresses").insertAdjacentHTML("beforeend", template)
+      macAddressElements.push(nextMacAddressElement)
+      setPricing()
+    }
+
+    function removeMACAddress(id) {
+      if (!macAddressElements.includes(id)) return;
+
+      macAddressElements = macAddressElements.filter((macAddressElement) => macAddressElement !== id);
+      document.getElementById(`${id}_container`).remove()
+
+      saveMACAddresses();
+      saveDeviceNames();
+      saveIsGaming();
+      saveIsRoaming();
+    }
+
+    function recoverForm() {
+      const customerName = document.getElementById("customer_name");
+      const phoneNumber = document.getElementById("phone_number");
+      // const macAddress = document.getElementById("mac_address");
+      // const deviceName = document.getElementById("device_name");
+      // const isRoaming = document.getElementById("is_roaming");
+      // const isGaming = document.getElementById("is_gaming");
+
+      customerName.value = localStorage.getItem("customer_name") || "";
+      phoneNumber.value = localStorage.getItem("phone_number") || "";
+      // macAddress.value = localStorage.getItem("mac_address") || "";
+      // deviceName.value = localStorage.getItem("device_name") || "";
+      // isRoaming.value = localStorage.getItem("is_roaming") === "true";
+      // isGaming.value = localStorage.getItem("is_gaming") === "true";
+
+      const macAddresses = (localStorage.getItem("mac_address") || "").split(",");
+      const deviceNames = (localStorage.getItem("device_name") || "").split(",");
+      const isRoaming = (localStorage.getItem("is_roaming") || "").split(",");
+      const isGaming = (localStorage.getItem("is_gaming") || "").split(",");
+      macAddresses.forEach((macAddress, index) => {
+        addMACAddress(macAddress, deviceNames[index], isRoaming[index], isGaming[index]);
+      });
+    }
+
+    function saveForm() {
+      saveCustomerName();
+      savePhoneNumber();
+      saveMACAddresses();
+      saveDeviceNames();
+      saveIsRoaming();
+      saveIsGaming();
+    }
+
+    function clearForm() {
+      if (!confirm("This will remove all the data that is currently filled out. Do you want to continue?")) return;
+
+      localStorage.removeItem("customer_name");
+      document.getElementById("customer_name").value = "";
+      for (const macAddressElement of macAddressElements) {
+        removeMACAddress(macAddressElement)
+      }
+    }
+
+    function setPricing() {
+      const normalPrice = <%= branding.price.normal %>;
+      const roamingPrice = <%= branding.price.roaming %>;
+      const gamingPrice = <%= branding.price.gaming %>;
+      const currency = "<%= branding.price.currency %>";
+
+      const amountLabel = document.getElementById("amount");
+
+      const amount = (normalPrice * macAddressElements.length) + (roamingPrice * document.querySelectorAll("input[id$='_roaming']:checked").length) + (gamingPrice * document.querySelectorAll("input[id$='_gaming']:checked").length);
+
+      amountLabel.textContent = `${amount} ${currency}`;
+    }
+
+    function fillDeviceName(id) {
+      let deviceType = "";
+      const macAddress = document.getElementById(id).value;
+      // now we find out which format it is
+      // 35:df:61 = customerfirstname-android
+      // 3A-DF-61 = customerfirstname-laptop
+      // 3A:DF:61 = customerfirstname-iphone
+      const macAddressRegex = new RegExp(
+        /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/
+      );
+      if (macAddress === macAddress.toLowerCase()) {
+        deviceType = "android";
+      } else if (macAddress === macAddress.replace(/:/g, "-")) {
+        deviceType = "laptop";
+      } else if (macAddress === macAddress.toUpperCase()) {
+        deviceType = "iphone";
+      } else {
+        deviceType = "phone";
       }
 
-      function removeMACAddress(id) {
-        if (!macAddressElements.includes(id)) return;
+      const fullName = document.getElementById("customer_name").value;
+      const firstName = fullName.split(" ")[0];
+      const deviceName = `${firstName}-${deviceType}`.toLowerCase();
 
-        macAddressElements = macAddressElements.filter((macAddressElement) => macAddressElement !== id);
-        document.getElementById(`${id}_container`).remove()
+      const deviceNameInput = document.getElementById(`${id}_device`);
+      if (!deviceNameInput.value) deviceNameInput.value = deviceName;
 
-        saveMACAddresses();
-        saveDeviceNames();
-      }
+      saveDeviceNames()
+    }
 
-      function recoverForm() {
-        const customerName = document.getElementById("customer_name");
-        // const macAddress = document.getElementById("mac_address");
-        // const deviceName = document.getElementById("device_name");
-        const isRoaming = document.getElementById("is_roaming");
-        const isGaming = document.getElementById("is_gaming");
-
-        customerName.value = localStorage.getItem("customer_name") || "";
-        // macAddress.value = localStorage.getItem("mac_address") || "";
-        // deviceName.value = localStorage.getItem("device_name") || "";
-        isRoaming.value = localStorage.getItem("is_roaming") === "true";
-        isGaming.value = localStorage.getItem("is_gaming") === "true";
-
-        const macAddresses = localStorage.getItem("mac_address") || "";
-        const deviceNames = localStorage.getItem("device_name") || "";
-        macAddresses.split(",").forEach((macAddress, index) => {
-          addMACAddress(macAddress, deviceNames[index]);;
-        });
-      }
-
-      function saveForm() {
-        const customerName = document.getElementById("customer_name");
-        // const macAddress = document.getElementById("mac_address");
-        // const deviceName = document.getElementById("device_name");
-        const isRoaming = document.getElementById("is_roaming");
-        const isGaming = document.getElementById("is_gaming");
-
-        localStorage.setItem("customer_name", customerName.value);
-        // localStorage.setItem("mac_address", macAddress.value);
-        // localStorage.setItem("device_name", deviceName.value);
-        localStorage.setItem("is_roaming", isRoaming.checked? "true": "false");
-        localStorage.setItem("is_gaming", isGaming.checked? "true": "false");
-
-        saveMACAddresses();
-        saveDeviceNames();
-      }
-
-      function clearForm() {
-        if (!confirm("This will remove all the data that is currently filled out. Do you want to continue?")) return;
-
-        localStorage.removeItem("customer_name");
-        document.getElementById("customer_name").value = "";
-        for (const macAddressElement of macAddressElements) {
-          removeMACAddress(macAddressElement)
-        }
-      }
-
-      function setPricing() {
-        const normalPrice = <%- branding.price.normal %>;
-        const roamingPrice = <%- branding.price.roaming %>;
-        const gamingPrice = <%- branding.price.gaming %>;
-        const currency = "<%- branding.price.currency %>";
-        const isRoaming = document.getElementById("is_roaming");
-        const isGaming = document.getElementById("is_gaming");
-        const amountLabel = document.getElementById("amount");
-        let amount = normalPrice;
-        if (isRoaming.checked) {
-          amount += roamingPrice;
-        }
-        if (isGaming.checked) {
-          amount += gamingPrice;
-        }
-        amountLabel.textContent = `Amount: ${amount} ${currency}`;
-        saveForm();
-      }
-
-      function fillDeviceName(id) {
-        let deviceType = "";
-        const macAddress = document.getElementById(id).value;
-        // now we find out which format it is
-        // 35:df:61 = customerfirstname-android
-        // 3A-DF-61 = customerfirstname-laptop
-        // 3A:DF:61 = customerfirstname-iphone
-        const macAddressRegex = new RegExp(
-          /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/
-        );
-        if (macAddress === macAddress.toLowerCase()) {
-          deviceType = "android";
-        } else if (macAddress === macAddress.replace(/:/g, "-")) {
-          deviceType = "laptop";
-        } else if (macAddress === macAddress.toUpperCase()) {
-          deviceType = "iphone";
-        } else {
-          deviceType = "phone";
-        }
-
-        const fullName = document.getElementById("customer_name").value;
-        const firstName = fullName.split(" ")[0];
-        const deviceName = `${firstName}-${deviceType}`.toLowerCase();
-
-        const deviceNameInput = document.getElementById(`${id}_device`);
-        if (!deviceNameInput.value) deviceNameInput.value = deviceName;
-
-        saveDeviceNames()
-      }
-
-      function validateMACAddress(id) {
-        console.log(id)
-        var macAddress = document.getElementById(id);
-        macAddress.value = macAddress.value.replace(blacklistedChars, ":");
-        var macAddressRegex = new RegExp(
-          /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/
-        );
-        const macAddressValue = macAddress.value;
-        macAddress.setCustomValidity("");
-        macAddress.classList.remove("input-error");
-        macAddress.classList.remove("input-success");
-        if (!macAddressRegex.test(macAddressValue)) {
-          macAddress.classList.add("input-error");
-          macAddress.setCustomValidity("Invalid MAC Address");
-          macAddress.reportValidity();
-          return false;
-        }
-        macAddress.classList.add("input-success");
+    function validateMACAddress(id) {
+      console.log(id)
+      var macAddress = document.getElementById(id);
+      macAddress.value = macAddress.value.replace(blacklistedChars, ":");
+      var macAddressRegex = new RegExp(
+        /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/
+      );
+      const macAddressValue = macAddress.value;
+      macAddress.setCustomValidity("");
+      macAddress.classList.remove("input-error");
+      macAddress.classList.remove("input-success");
+      if (!macAddressRegex.test(macAddressValue)) {
+        macAddress.classList.add("input-error");
+        macAddress.setCustomValidity("Invalid MAC Address");
         macAddress.reportValidity();
-        fillDeviceName(id);
-        return true;
+        return false;
+      }
+      macAddress.classList.add("input-success");
+      macAddress.reportValidity();
+      fillDeviceName(id);
+      return true;
+    }
+
+    function validateDeviceName(id) {
+      const deviceName = document.getElementById(`${id}_device`);
+      deviceName.value = deviceName.value.toLowerCase().replace(blacklistedChars, "-")
+      deviceName.setCustomValidity("");
+      deviceName.classList.remove("input-error");
+      deviceName.classList.remove("input-success");
+
+      // any custom validation
+
+      deviceName.classList.add("input-success");
+      return true;
+    }
+
+    function validateForm() {
+      const macAddressValid = macAddressElements.map(macAddressElement => validateMACAddress(macAddressElement)).every(r => r === true);
+      const customerName = document.getElementById("customer_name");
+      customerName.classList.remove("input-error");
+      // customerName.setCustomValidity("");
+      const deviceName = document.getElementById("device_name");
+      deviceName.classList.remove("input-error");
+      // deviceName.setCustomValidity("");
+      const transferReceipt = document.getElementById("transfer_receipt");
+      transferReceipt.classList.remove("input-error");
+      // transferReceipt.setCustomValidity("");
+
+      if (customerName.value === "") {
+        customerName.classList.add("input-error");
+        // customerName.setCustomValidity("Customer Name is required");
+        // customerName.reportValidity();
       }
 
-      function validateDeviceName(id) {
-        const deviceName = document.getElementById(`${id}_device`);
-        deviceName.value = deviceName.value.toLowerCase().replace(blacklistedChars, "-")
-        deviceName.setCustomValidity("");
-        deviceName.classList.remove("input-error");
-        deviceName.classList.remove("input-success");
-
-        // any custom validation
-
-        deviceName.classList.add("input-success");
-        return true;
+      if (deviceName.value === "") {
+        deviceName.classList.add("input-error");
+        // deviceName.setCustomValidity("Device Name is required");
+        // deviceName.reportValidity();
       }
 
-      function validateForm() {
-        const macAddressValid = macAddressElements.map(macAddressElement => validateMACAddress(macAddressElement)).every(r => r === true);
-        const customerName = document.getElementById("customer_name");
-        customerName.classList.remove("input-error");
-        // customerName.setCustomValidity("");
-        const deviceName = document.getElementById("device_name");
-        deviceName.classList.remove("input-error");
-        // deviceName.setCustomValidity("");
-        const transferReceipt = document.getElementById("transfer_receipt");
-        transferReceipt.classList.remove("input-error");
-        // transferReceipt.setCustomValidity("");
-
-        if (customerName.value === "") {
-          customerName.classList.add("input-error");
-          // customerName.setCustomValidity("Customer Name is required");
-          // customerName.reportValidity();
-        }
-
-        if (deviceName.value === "") {
-          deviceName.classList.add("input-error");
-          // deviceName.setCustomValidity("Device Name is required");
-          // deviceName.reportValidity();
-        }
-
-        if (transferReceipt.files.length === 0) {
-          transferReceipt.classList.add("input-error");
-          // transferReceipt.setCustomValidity("Transfer Receipt is required");
-          // transferReceipt.reportValidity();
-        }
-
-        saveForm();
-
-        return (
-          macAddressValid &&
-          customerName.value !== "" &&
-          deviceName.value !== "" &&
-          transferReceipt.files.length > 0
-        );
+      if (transferReceipt.files.length === 0) {
+        transferReceipt.classList.add("input-error");
+        // transferReceipt.setCustomValidity("Transfer Receipt is required");
+        // transferReceipt.reportValidity();
       }
-    </script>
-  </head>
-  <body>
-    <header>
-      <div class="navbar bg-base-300">
-        <button class="btn btn-ghost text-xl">
-          <img class="w-10 rounded" src="<%- branding.logo %>" />
-          <%- branding.title %>
-        </button>
-      </div>
-    </header>
-    <% if (message) { %>
-    <div
-      role="alert"
-      class="alert alert-error w-[80vw] mx-auto mt-8"
-      style="z-index: 1000"
-      onclick="this.style.display = 'none'"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="stroke-current shrink-0 h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-        />
+
+      saveForm();
+
+      return (
+        macAddressValid &&
+        customerName.value !== "" &&
+        deviceName.value !== "" &&
+        transferReceipt.files.length > 0
+      );
+    }
+  </script>
+</head>
+
+<body>
+  <header>
+    <div class="navbar bg-base-300">
+      <button class="btn btn-ghost text-xl">
+        <img class="w-12 rounded" src="<%- branding.logo %>" />
+        <%- branding.title %>
+      </button>
+    </div>
+  </header>
+  <% if (message) { %>
+    <div role="alert" class="alert alert-error w-[80vw] mx-auto mt-8" style="z-index: 1000"
+      onclick="this.style.display = 'none'">
+      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
       </svg>
-      <span><%= message %></span>
+      <span>
+        <%= message %>
+      </span>
     </div>
     <% } %>
-    <main>
-      <form
-        class="flex justify-center"
-        action="/register"
-        method="post"
-        enctype="multipart/form-data"
-      >
-        <div class="w-[80vw]">
-          <div class="join-horizontal mt-8">
-            <div class="join-vertical justify-center">
-              <h1 class="text-3xl font-bold">KYC</h1>
-              <p class="text-base">
-                Please fill in the form to complete your KYC
-              </p>
-            </div>
-            <br />
-            <button
-              class="btn btn-block btn-outline btn-error"
-              onclick="clearForm();event.preventDefault()"
-            >
-              Clear Form
-            </button>
-            <br />
-            <br />
-            <div class="join-vertical">
-              <div class="form-control">
-                <label class="label">
-                  <span class="label-text font-bold text-lg text-base-content"
-                    >Customer Name</span
-                  >
-                </label>
-                <input
-                  type="text"
-                  id="customer_name"
-                  name="customer_name"
-                  placeholder="John Doe"
-                  class="input input-bordered"
-                  onchange="validateForm()"
-                />
-              </div>
-            </div>
-            <br />
-            <div class="join-vertical">
-              <div class="form-control">
-                <label class="label">
-                  <span class="label-text font-bold text-lg text-base-content"
-                    >MAC Addresses</span
-                  >
-                </label>
-                <input type="hidden" name="mac_address" id="mac_address" />
-                <input type="hidden" name="device_name" id="device_name" />
-
-                <div id="mac_addresses">
-                  <!-- <div id="mac_address_1_container" class="join w-full mt-4">
-                    <div class="w-full flex flex-row justify-stretch">
-                      <div class="flex-grow">
-                        <input
-                          id="mac_address_1"
-                          class="input input-bordered join-item w-full"
-                          placeholder="00:00:00:00:00:00"
-                          oninput="validateMACAddress('mac_address_1')"
-                          onchange="saveMACAddresses()"
-                        />
-                      </div>
-                      <div class="flex-grow">
-                        <input
-                          id="mac_address_1_device"
-                          class="input input-bordered join-item w-full"
-                          onchange="saveMACAddresses()"
-                          placeholder="iphone-12"
-                          onclick="fillDeviceName('mac_address_1')"
-                        />
-                      </div>
-                    </div>
-                    <button
-                      class="indicator"
-                      onclick="event.preventDefault();removeMACAddress('mac_address_1')"
-                    >
-                      <span class="indicator-item badge badge-error">-</span>
-                    </button>
-                  </div> -->
-                </div>
-
-                <button
-                  class="btn btn-block btn-success mt-4"
-                  onclick="event.preventDefault();addMACAddress()"
-                >
-                  Add
-                </button>
-              </div>
-            </div>
-            <br />
-            <div class="collapse bg-base-200">
-              <input type="checkbox" />
-              <div class="collapse-title text-xl font-medium">
-                How do I find my MAC Address?
-              </div>
-              <div class="collapse-content overflow-x-auto">
-                <p>
-                  A MAC (Media Access Control) address is a unique identifier
-                  assigned to a device's network. It is used to identify the
-                  device on a network, helping to differentiate devices on a
-                  network.
+      <main>
+        <form class="flex justify-center" action="/register" method="post" enctype="multipart/form-data">
+          <div class="w-[80vw]">
+            <div class="join-horizontal mt-8">
+              <div class="join-vertical justify-center">
+                <h1 class="text-3xl font-bold">KYC</h1>
+                <p class="text-base">
+                  Please fill in the form to complete your KYC
                 </p>
-                <div class="collapse collapse-arrow bg-base-200">
-                  <input type="checkbox" checked="checked" />
-                  <div class="collapse-title text-xl font-medium">iPhone</div>
-                  <div class="collapse-content overflow-x-auto">
-                    <div class="overflow-x-auto text-sm breadcrumbs">
-                      <ul>
-                        <li>Settings</li>
-                        <li>General</li>
-                        <li>About</li>
-                        <li>Wi-Fi Address</li>
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-                <div class="collapse collapse-arrow bg-base-200">
-                  <input type="checkbox" />
-                  <div class="collapse-title text-xl font-medium">Redmi</div>
-                  <div class="collapse-content overflow-x-auto">
-                    <div class="overflow-x-auto text-sm breadcrumbs">
-                      <ul>
-                        <li>Settings</li>
-                        <li>About</li>
-                        <li>Wi-Fi MAC Address</li>
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-                <div class="collapse collapse-arrow bg-base-200">
-                  <input type="checkbox" />
-                  <div class="collapse-title text-xl font-medium">Samsung</div>
-                  <div class="collapse-content overflow-x-auto">
-                    <div class="overflow-x-auto text-sm breadcrumbs">
-                      <ul>
-                        <li>Settings</li>
-                        <li>About phone</li>
-                        <li>Status Information</li>
-                        <li>Wi-Fi MAC Address</li>
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-                <div class="collapse collapse-arrow bg-base-200">
-                  <input type="checkbox" />
-                  <div class="collapse-title text-xl font-medium">
-                    Windows Laptop
-                  </div>
-                  <div class="collapse-content overflow-x-auto">
-                    <div class="overflow-x-auto text-sm breadcrumbs">
-                      <ul>
-                        <li>Settings</li>
-                        <li>Network and Internet</li>
-                        <li>Wi-Fi</li>
-                        <li>Hardware Properties</li>
-                        <li>Physical address (MAC):</li>
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-                <div class="collapse collapse-arrow bg-base-200">
-                  <input type="checkbox" />
-                  <div class="collapse-title text-xl font-medium">
-                    Other Device
-                  </div>
-                  <div class="collapse-content overflow-x-auto">
-                    Please contact <%- branding.title %> for assistance.
-                  </div>
+              </div>
+              <br />
+              <div class="join-vertical">
+                <div class="form-control">
+                  <label class="label">
+                    <span class="label-text font-bold text-lg text-base-content">Customer Name</span>
+                  </label>
+                  <input type="text" id="customer_name" name="customer_name" placeholder="John Doe"
+                    class="input input-bordered" onchange="validateForm()" />
                 </div>
               </div>
-            </div>
-            <br />
-            <div class="join-vertical">
-              <div class="form-control">
-                <label class="label cursor-pointer">
-                  <span class="label-text">Is Device Roaming?</span>
-                  <input
-                    type="checkbox"
-                    id="is_roaming"
-                    name="is_roaming"
-                    checked="checked"
-                    class="checkbox"
-                    oninput="setPricing()"
-                  />
-                </label>
+              <br />
+              <div class="join-vertical">
+                <div class="form-control">
+                  <label class="label">
+                    <span class="label-text font-bold text-lg text-base-content">Phone Number</span>
+                  </label>
+                  <input type="tel" id="phone_number" name="phone_number" placeholder="9696969"
+                    class="input input-bordered" onchange="validateForm()" />
+                </div>
               </div>
-            </div>
-            <br />
-            <div class="join-vertical">
-              <div class="form-control">
-                <label class="label cursor-pointer">
-                  <span class="label-text"
-                    >Is device going to be used for gaming?</span
-                  >
-                  <input
-                    type="checkbox"
-                    id="is_gaming"
-                    name="is_gaming"
-                    class="checkbox"
-                    oninput="setPricing()"
-                  />
-                </label>
-              </div>
-            </div>
-            <br />
-            <br />
-            <div class="collapse bg-base-200">
-              <input type="checkbox" />
-              <div class="collapse-title text-xl font-medium">
-                Transfer Details
-              </div>
-              <div class="collapse-content overflow-x-auto">
-                <p>
-                  Please transfer the specified amount to the following account
-                  and upload the receipt below.
-                </p>
-                <br />
-                <div class="overflow-x-auto text-sm">
-                  <ul>
-                    <li>Bank: <%- branding.bankDetails.name %></li>
-                    <li>
-                      Account Number: <%- branding.bankDetails.accountNumber %>
-                    </li>
-                    <li>
-                      Account Name: <%- branding.bankDetails.accountName %>
-                    </li>
-                    <li id="amount">
-                      Amount: <%- branding.price.roaming %> <%-
-                      branding.price.currency %>
-                    </li>
-                  </ul>
-                  <br />
-                  <button
-                    type="button"
-                    class="btn btn-block btn-info"
-                    onclick="navigator.clipboard.writeText('<%- branding.bankDetails.accountNumber %>');event.target.textContent = 'Copied';setTimeout(() => { event.target.textContent = 'Copy Account Number'; }, 2000);"
-                  >
-                    Copy Account Number
+              <br />
+              <div class="join-vertical">
+                <div class="form-control">
+                  <label class="label">
+                    <span class="label-text font-bold text-lg text-base-content">MAC Addresses</span>
+                  </label>
+                  <input type="hidden" name="mac_address" id="mac_address" />
+                  <input type="hidden" name="device_name" id="device_name" />
+                  <input type="hidden" name="is_roaming" id="is_roaming" />
+                  <input type="hidden" name="is_gaming" id="is_gaming" />
+
+                  <div id="mac_addresses">
+                    <!-- <div id="mac_address_1_container" class="w-full">
+                      <div class="join w-full mt-4">
+                        <div class="w-full flex flex-row justify-stretch">
+                          <div class="flex-grow">
+                            <input id="mac_address_1" class="input input-bordered join-item w-full"
+                              placeholder="00:00:00:00:00:00" oninput="validateMACAddress('mac_address_1')"
+                              onchange="saveMACAddresses()" />
+                          </div>
+                          <div class="flex-grow">
+                            <input id="mac_address_1_device" class="input input-bordered join-item w-full"
+                              onchange="saveMACAddresses()" placeholder="iphone-12"
+                              onclick="fillDeviceName('mac_address_1')" />
+                          </div>
+                        </div>
+                        <button class="indicator" onclick="event.preventDefault();removeMACAddress('mac_address_1')">
+                          <span class="indicator-item badge badge-error">-</span>
+                        </button>
+                      </div>
+                      <div class="join align-middle mt-2">
+                        <button class="btn join-item btn-accent" onclick="event.preventDefault()">Add-ons</button>
+                        <input class="join-item btn" type="checkbox" id="mac_address_1_roaming" onchange="saveForm()"
+                          aria-label="Roaming?" />
+                        <input class="join-item btn" type="checkbox" id="mac_address_1_gaming" onchange="saveForm()"
+                          aria-label="Gaming?" />
+                      </div>
+                    </div> -->
+                  </div>
+
+                  <button class="btn btn-block btn-success mt-4" onclick="event.preventDefault();addMACAddress()">
+                    Add another device
                   </button>
                 </div>
               </div>
-            </div>
-            <br />
-            <div class="collapse bg-base-200">
-              <input type="checkbox" />
-              <div class="collapse-title text-xl font-medium">
-                How to transfer from BML to MIB?
-              </div>
-              <div class="collapse-content">
-                <p>
-                  You can transfer money from BML to MIB using the following
-                  steps:
-                </p>
-                <br />
-                <div class="text-sm">
-                  <ol>
-                    <li>Open BML Mobile App</li>
-                    <li>Tap on "Transfer"</li>
-                    <li>Tap on "Pay a new Contact"</li>
-                    <li>Tap on "Domestic"</li>
-
-                    <li>Enter Account Number</li>
-                    <li>Select MVR as currency</li>
-                    <li>Write the Account Name for "Payee Name"</li>
-                    <li>Leave Address lines blank</li>
-                    <li>Enter MIB as Bank Code</li>
-                    <li>Add an alias and click on continue</li>
-                    <li>
-                      Tap on "Send money" and continue to transfer like you
-                      would normally
-                    </li>
-                  </ol>
+              <br />
+              <div class="collapse bg-base-200">
+                <input type="checkbox" />
+                <div class="collapse-title text-xl font-medium">
+                  How do I find my MAC Address?
+                </div>
+                <div class="collapse-content overflow-x-auto">
+                  <p>
+                    A MAC (Media Access Control) address is a unique identifier
+                    assigned to a device's network. It is used to identify the
+                    device on a network, helping to differentiate devices on a
+                    network.
+                  </p>
+                  <div class="collapse collapse-arrow bg-base-200">
+                    <input type="checkbox" checked="checked" />
+                    <div class="collapse-title text-xl font-medium">iPhone</div>
+                    <div class="collapse-content overflow-x-auto">
+                      <div class="overflow-x-auto text-sm breadcrumbs">
+                        <ul>
+                          <li>Settings</li>
+                          <li>General</li>
+                          <li>About</li>
+                          <li>Wi-Fi Address</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="collapse collapse-arrow bg-base-200">
+                    <input type="checkbox" />
+                    <div class="collapse-title text-xl font-medium">Redmi</div>
+                    <div class="collapse-content overflow-x-auto">
+                      <div class="overflow-x-auto text-sm breadcrumbs">
+                        <ul>
+                          <li>Settings</li>
+                          <li>About</li>
+                          <li>Wi-Fi MAC Address</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="collapse collapse-arrow bg-base-200">
+                    <input type="checkbox" />
+                    <div class="collapse-title text-xl font-medium">Samsung</div>
+                    <div class="collapse-content overflow-x-auto">
+                      <div class="overflow-x-auto text-sm breadcrumbs">
+                        <ul>
+                          <li>Settings</li>
+                          <li>About phone</li>
+                          <li>Status Information</li>
+                          <li>Wi-Fi MAC Address</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="collapse collapse-arrow bg-base-200">
+                    <input type="checkbox" />
+                    <div class="collapse-title text-xl font-medium">
+                      Windows Laptop
+                    </div>
+                    <div class="collapse-content overflow-x-auto">
+                      <div class="overflow-x-auto text-sm breadcrumbs">
+                        <ul>
+                          <li>Settings</li>
+                          <li>Network and Internet</li>
+                          <li>Wi-Fi</li>
+                          <li>Hardware Properties</li>
+                          <li>Physical address (MAC):</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="collapse collapse-arrow bg-base-200">
+                    <input type="checkbox" />
+                    <div class="collapse-title text-xl font-medium">
+                      Other Device
+                    </div>
+                    <div class="collapse-content overflow-x-auto">
+                      Please contact <%- branding.title %> for assistance.
+                    </div>
+                  </div>
                 </div>
               </div>
-            </div>
-            <br />
-            <div class="join-vertical">
-              <div class="form-control">
-                <label class="label">
-                  <span class="label-text font-bold text-lg text-base-content"
-                    >Transfer Receipt</span
-                  >
-                </label>
-                <input
-                  type="file"
-                  id="transfer_receipt"
-                  name="transfer_receipt"
-                  class="file-input file-input-bordered max-w"
-                  accept="image/*"
-                  onchange="validateForm()"
-                />
+              <br>
+              <br>
+              <div tabindex="0" class="collapse collapse-open border border-base-300 bg-primary text-primary-content">
+                <div class="collapse-title text-xl font-medium">
+                  Amount: <label class="text-lg" id="amount"></label>
+                </div>
+              </div>
+              <br />
+              <div class="collapse bg-base-200">
+                <input type="checkbox" />
+                <div class="collapse-title text-xl font-medium">
+                  Transfer Details
+                </div>
+                <div class="collapse-content overflow-x-auto">
+                  <p>
+                    Please transfer the specified amount to the following account
+                    and upload the receipt below.
+                  </p>
+                  <br />
+                  <div class="overflow-x-auto text-sm">
+                    <ul>
+                      <li>Bank: <%- branding.bankDetails.name %></li>
+                      <li>
+                        Account Number: <%- branding.bankDetails.accountNumber %>
+                      </li>
+                      <li>
+                        Account Name: <%- branding.bankDetails.accountName %>
+                      </li>
+                      <!-- <li id="amount">
+                        Amount: <%- branding.price.roaming %> <%- branding.price.currency %>
+                      </li> -->
+                    </ul>
+                    <br />
+                    <button type="button" class="btn btn-block btn-info"
+                      onclick="navigator.clipboard.writeText('<%- branding.bankDetails.accountNumber %>');event.target.textContent = 'Copied';setTimeout(() => { event.target.textContent = 'Copy Account Number'; }, 2000);">
+                      Copy Account Number
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <br />
+              <div class="collapse bg-base-200">
+                <input type="checkbox" />
+                <div class="collapse-title text-xl font-medium">
+                  How to transfer from BML to MIB?
+                </div>
+                <div class="collapse-content">
+                  <p>
+                    You can transfer money from BML to MIB using the following
+                    steps:
+                  </p>
+                  <br />
+                  <div class="text-sm">
+                    <ol>
+                      <li>Open BML Mobile App</li>
+                      <li>Tap on "Transfer"</li>
+                      <li>Tap on "Pay a new Contact"</li>
+                      <li>Tap on "Domestic"</li>
+
+                      <li>Enter Account Number</li>
+                      <li>Select MVR as currency</li>
+                      <li>Write the Account Name for "Payee Name"</li>
+                      <li>Leave Address lines blank</li>
+                      <li>Enter MIB as Bank Code</li>
+                      <li>Add an alias and click on continue</li>
+                      <li>
+                        Tap on "Send money" and continue to transfer like you
+                        would normally
+                      </li>
+                    </ol>
+                  </div>
+                </div>
+              </div>
+              <br />
+              <div class="join-vertical">
+                <div class="form-control">
+                  <label class="label">
+                    <span class="label-text font-bold text-lg text-base-content">Transfer Receipt</span>
+                  </label>
+                  <input type="file" id="transfer_receipt" name="transfer_receipt"
+                    class="file-input file-input-bordered max-w" accept="image/*" onchange="validateForm()" />
+                </div>
+              </div>
+              <br />
+              <div class="join w-full join-vertical lg:join-horizontal">
+                <button class="btn join-item btn-outline btn-error flex-grow"
+                  onclick="event.preventDefault();clearForm()">
+                  Clear Form
+                </button>
+                <button class="btn join-item btn-info flex-grow" onclick="if (!validateForm()) event.preventDefault()">
+                  Submit
+                </button>
               </div>
             </div>
-            <br />
-            <button
-              class="btn btn-info btn-block"
-              onclick="if (!validateForm()) event.preventDefault()"
-            >
-              Submit
-            </button>
           </div>
-        </div>
-      </form>
-      <footer>
-        <div style="height: 10em"></div>
-      </footer>
-    </main>
-  </body>
-  <script>
-    recoverForm();
-    setPricing();
-  </script>
-</html>
+        </form>
+        <footer>
+          <div style="height: 10em"></div>
+        </footer>
+      </main>
+</body>
+<script>
+  recoverForm();
+  setPricing();
+</script>
+
+</html>
\ No newline at end of file