diff --git a/Cargo.lock b/Cargo.lock
index ce7f24b..c02eade 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -4,9 +4,9 @@ version = 3
 
 [[package]]
 name = "anyhow"
-version = "1.0.65"
+version = "1.0.66"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "98161a4e3e2184da77bb14f02184cdd111e83bbbcc9979dfee3c44b9a85f5602"
+checksum = "216261ddc8289130e551ddcd5ce8a064710c0d064a4d2895c67151c92b5443f6"
 
 [[package]]
 name = "async-stream"
@@ -31,9 +31,9 @@ dependencies = [
 
 [[package]]
 name = "async-trait"
-version = "0.1.57"
+version = "0.1.58"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "76464446b8bc32758d7e88ee1a804d9914cd9b1cb264c029899680b0be29826f"
+checksum = "1e805d94e6b5001b651426cf4cd446b1ab5f319d27bab5c644f61de0a804360c"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -48,9 +48,9 @@ checksum = "d468802bab17cbc0cc575e9b053f41e72aa36bfa6b7f55e3529ffa43161b97fa"
 
 [[package]]
 name = "base64"
-version = "0.13.0"
+version = "0.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "904dfeac50f3cdaba28fc6f57fdcddb75f49ed61346676a78c4ffe55877802fd"
+checksum = "9e1b586273c5702936fe7b7d6896644d8be71e6314cfe09d3167c95f712589e8"
 
 [[package]]
 name = "base64-compat"
@@ -141,9 +141,9 @@ checksum = "bef38d45163c2f1dde094a7dfd33ccf595c92905c8f8f4fdc18d06fb1037718a"
 
 [[package]]
 name = "bumpalo"
-version = "3.11.0"
+version = "3.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c1ad822118d20d2c234f427000d5acc36eabe1e29a348c89b63dd60b13f28e5d"
+checksum = "572f695136211188308f16ad2ca5c851a712c464060ae6974944458eb83880ba"
 
 [[package]]
 name = "byteorder"
@@ -283,36 +283,36 @@ dependencies = [
 
 [[package]]
 name = "futures-channel"
-version = "0.3.24"
+version = "0.3.25"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "30bdd20c28fadd505d0fd6712cdfcb0d4b5648baf45faef7f852afb2399bb050"
+checksum = "52ba265a92256105f45b719605a571ffe2d1f0fea3807304b522c1d778f79eed"
 dependencies = [
  "futures-core",
 ]
 
 [[package]]
 name = "futures-core"
-version = "0.3.24"
+version = "0.3.25"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4e5aa3de05362c3fb88de6531e6296e85cde7739cccad4b9dfeeb7f6ebce56bf"
+checksum = "04909a7a7e4633ae6c4a9ab280aeb86da1236243a77b694a49eacd659a4bd3ac"
 
 [[package]]
 name = "futures-sink"
-version = "0.3.24"
+version = "0.3.25"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "21b20ba5a92e727ba30e72834706623d94ac93a725410b6a6b6fbc1b07f7ba56"
+checksum = "39c15cf1a4aa79df40f1bb462fb39676d0ad9e366c2a33b590d7c66f4f81fcf9"
 
 [[package]]
 name = "futures-task"
-version = "0.3.24"
+version = "0.3.25"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a6508c467c73851293f390476d4491cf4d227dbabcd4170f3bb6044959b294f1"
+checksum = "2ffb393ac5d9a6eaa9d3fdf37ae2776656b706e200c8e16b1bdb227f5198e6ea"
 
 [[package]]
 name = "futures-util"
-version = "0.3.24"
+version = "0.3.25"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "44fb6cb1be61cc1d2e43b262516aafcf63b241cffdb1d3fa115f91d9c7b09c90"
+checksum = "197676987abd2f9cadff84926f410af1c183608d36641465df73ae8211dc65d6"
 dependencies = [
  "futures-core",
  "futures-task",
@@ -322,9 +322,9 @@ dependencies = [
 
 [[package]]
 name = "getrandom"
-version = "0.2.7"
+version = "0.2.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4eb1a864a501629691edf6c15a593b7a51eebaa1e8468e9ddc623de7c9b58ec6"
+checksum = "c05aeb6a22b8f62540c194aac980f2115af067bfe15a0734d7277a768d396b31"
 dependencies = [
  "cfg-if",
  "libc",
@@ -333,9 +333,9 @@ dependencies = [
 
 [[package]]
 name = "h2"
-version = "0.3.14"
+version = "0.3.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5ca32592cf21ac7ccab1825cd87f6c9b3d9022c44d086172ed0966bec8af30be"
+checksum = "5f9f29bc9dda355256b2916cf526ab02ce0aeaaaf2bad60d65ef3f12f11dd0f4"
 dependencies = [
  "bytes",
  "fnv",
@@ -536,9 +536,9 @@ checksum = "e2abad23fbc42b3700f2f279844dc832adb2b2eb069b2df918f455c4e18cc646"
 
 [[package]]
 name = "libc"
-version = "0.2.135"
+version = "0.2.137"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "68783febc7782c6c5cb401fbda4de5a9898be1762314da0bb2c10ced61f18b0c"
+checksum = "fc7fcc620a3bff7cdd7a365be3376c97191aeaccc2a603e600951e452615bf89"
 
 [[package]]
 name = "ln-types"
@@ -576,14 +576,14 @@ checksum = "2dffe52ecf27772e601905b7522cb4ef790d2cc203488bbd0e2fe85fcb74566d"
 
 [[package]]
 name = "mio"
-version = "0.8.4"
+version = "0.8.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "57ee1c23c7c63b0c9250c339ffdc69255f110b298b901b9f6c82547b7b87caaf"
+checksum = "e5d732bc30207a6423068df043e3d02e0735b155ad7ce1a6f76fe2baa5b158de"
 dependencies = [
  "libc",
  "log",
  "wasi",
- "windows-sys",
+ "windows-sys 0.42.0",
 ]
 
 [[package]]
@@ -627,7 +627,7 @@ dependencies = [
  "rcgen",
  "serde",
  "serde_derive",
- "serde_json",
+ "serde_qs",
  "tempfile",
  "tokio",
  "tokio-native-tls",
@@ -695,9 +695,9 @@ checksum = "ff011a302c396a5197692431fc1948019154afc178baf7d8e37367442a4601cf"
 
 [[package]]
 name = "openssl-sys"
-version = "0.9.76"
+version = "0.9.77"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5230151e44c0f05157effb743e8d517472843121cf9243e8b81393edb5acd9ce"
+checksum = "b03b84c3b2d099b81f0953422b4d4ad58761589d0229b5506356afca05a3670a"
 dependencies = [
  "autocfg",
  "cc",
@@ -777,9 +777,9 @@ checksum = "8b870d8c151b6f2fb93e84a13146138f05d02ed11c7e7c54f8826aaaf7c9f184"
 
 [[package]]
 name = "pkg-config"
-version = "0.3.25"
+version = "0.3.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1df8c4ec4b0627e53bdf214615ad287367e482558cf84b109250b37464dc03ae"
+checksum = "6ac9a59f73473f1b8d852421e59e64809f025994837ef743615c6d0c5b305160"
 
 [[package]]
 name = "ppv-lite86"
@@ -789,9 +789,9 @@ checksum = "eb9f9e6e233e5c4a35559a617bf40a4ec447db2e84c20b55a6f83167b7e57872"
 
 [[package]]
 name = "proc-macro2"
-version = "1.0.46"
+version = "1.0.47"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "94e2ef8dbfc347b10c094890f778ee2e36ca9bb4262e86dc99cd217e35f3470b"
+checksum = "5ea3d908b0e36316caf9e9e2c4625cdde190a7e6f440d794667ed17a1855e725"
 dependencies = [
  "unicode-ident",
 ]
@@ -995,7 +995,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "88d6731146462ea25d9244b2ed5fd1d716d25c52e4d54aa4fb0f3c4e9854dbe2"
 dependencies = [
  "lazy_static",
- "windows-sys",
+ "windows-sys 0.36.1",
 ]
 
 [[package]]
@@ -1052,18 +1052,18 @@ dependencies = [
 
 [[package]]
 name = "serde"
-version = "1.0.145"
+version = "1.0.147"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "728eb6351430bccb993660dfffc5a72f91ccc1295abaa8ce19b27ebe4f75568b"
+checksum = "d193d69bae983fc11a79df82342761dfbf28a99fc8d203dca4c3c1b590948965"
 dependencies = [
  "serde_derive",
 ]
 
 [[package]]
 name = "serde_derive"
-version = "1.0.145"
+version = "1.0.147"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "81fa1584d3d1bcacd84c277a0dfe21f5b0f6accf4a23d04d4c6d61f1af522b4c"
+checksum = "4f1d362ca8fc9c3e3a7484440752472d68a6caa98f1ab81d99b5dfe517cec852"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -1072,15 +1072,26 @@ dependencies = [
 
 [[package]]
 name = "serde_json"
-version = "1.0.86"
+version = "1.0.87"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "41feea4228a6f1cd09ec7a3593a682276702cd67b5273544757dae23c096f074"
+checksum = "6ce777b7b150d76b9cf60d28b55f5847135a003f7d7350c6be7a773508ce7d45"
 dependencies = [
  "itoa",
  "ryu",
  "serde",
 ]
 
+[[package]]
+name = "serde_qs"
+version = "0.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8cac3f1e2ca2fe333923a1ae72caca910b98ed0630bb35ef6f8c8517d6e81afa"
+dependencies = [
+ "percent-encoding",
+ "serde",
+ "thiserror",
+]
+
 [[package]]
 name = "slab"
 version = "0.4.7"
@@ -1108,9 +1119,9 @@ checksum = "6e63cff320ae2c57904679ba7cb63280a3dc4613885beafb148ee7bf9aa9042d"
 
 [[package]]
 name = "syn"
-version = "1.0.102"
+version = "1.0.103"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3fcd952facd492f9be3ef0d0b7032a6e442ee9b361d4acc2b1d0c4aaa5f613a1"
+checksum = "a864042229133ada95abf3b54fdc62ef5ccabe9515b64717bcb9a1919e59445d"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -1131,16 +1142,44 @@ dependencies = [
  "winapi",
 ]
 
+[[package]]
+name = "thiserror"
+version = "1.0.37"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "10deb33631e3c9018b9baf9dcbbc4f737320d2b576bac10f6aefa048fa407e3e"
+dependencies = [
+ "thiserror-impl",
+]
+
+[[package]]
+name = "thiserror-impl"
+version = "1.0.37"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "982d17546b47146b28f7c22e3d08465f6b8903d0ea13c1660d9d84a6e7adcdbb"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
 [[package]]
 name = "time"
-version = "0.3.15"
+version = "0.3.16"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d634a985c4d4238ec39cacaed2e7ae552fbd3c476b552c1deac3021b7d7eaf0c"
+checksum = "0fab5c8b9980850e06d92ddbe3ab839c062c801f3927c0fb8abd6fc8e918fbca"
 dependencies = [
  "libc",
  "num_threads",
+ "serde",
+ "time-core",
 ]
 
+[[package]]
+name = "time-core"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2e153e1f1acaef8acc537e68b44906d2db6436e2b35ac2c6b42640fff91f00fd"
+
 [[package]]
 name = "tinyvec"
 version = "1.6.0"
@@ -1590,43 +1629,100 @@ version = "0.36.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ea04155a16a59f9eab786fe12a4a450e75cdb175f9e0d80da1e17db09f55b8d2"
 dependencies = [
- "windows_aarch64_msvc",
- "windows_i686_gnu",
- "windows_i686_msvc",
- "windows_x86_64_gnu",
- "windows_x86_64_msvc",
+ "windows_aarch64_msvc 0.36.1",
+ "windows_i686_gnu 0.36.1",
+ "windows_i686_msvc 0.36.1",
+ "windows_x86_64_gnu 0.36.1",
+ "windows_x86_64_msvc 0.36.1",
 ]
 
+[[package]]
+name = "windows-sys"
+version = "0.42.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5a3e1820f08b8513f676f7ab6c1f99ff312fb97b553d30ff4dd86f9f15728aa7"
+dependencies = [
+ "windows_aarch64_gnullvm",
+ "windows_aarch64_msvc 0.42.0",
+ "windows_i686_gnu 0.42.0",
+ "windows_i686_msvc 0.42.0",
+ "windows_x86_64_gnu 0.42.0",
+ "windows_x86_64_gnullvm",
+ "windows_x86_64_msvc 0.42.0",
+]
+
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.42.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "41d2aa71f6f0cbe00ae5167d90ef3cfe66527d6f613ca78ac8024c3ccab9a19e"
+
 [[package]]
 name = "windows_aarch64_msvc"
 version = "0.36.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9bb8c3fd39ade2d67e9874ac4f3db21f0d710bee00fe7cab16949ec184eeaa47"
 
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.42.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dd0f252f5a35cac83d6311b2e795981f5ee6e67eb1f9a7f64eb4500fbc4dcdb4"
+
 [[package]]
 name = "windows_i686_gnu"
 version = "0.36.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "180e6ccf01daf4c426b846dfc66db1fc518f074baa793aa7d9b9aaeffad6a3b6"
 
+[[package]]
+name = "windows_i686_gnu"
+version = "0.42.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fbeae19f6716841636c28d695375df17562ca208b2b7d0dc47635a50ae6c5de7"
+
 [[package]]
 name = "windows_i686_msvc"
 version = "0.36.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e2e7917148b2812d1eeafaeb22a97e4813dfa60a3f8f78ebe204bcc88f12f024"
 
+[[package]]
+name = "windows_i686_msvc"
+version = "0.42.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "84c12f65daa39dd2babe6e442988fc329d6243fdce47d7d2d155b8d874862246"
+
 [[package]]
 name = "windows_x86_64_gnu"
 version = "0.36.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4dcd171b8776c41b97521e5da127a2d86ad280114807d0b2ab1e462bc764d9e1"
 
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.42.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bf7b1b21b5362cbc318f686150e5bcea75ecedc74dd157d874d754a2ca44b0ed"
+
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.42.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "09d525d2ba30eeb3297665bd434a54297e4170c7f1a44cad4ef58095b4cd2028"
+
 [[package]]
 name = "windows_x86_64_msvc"
 version = "0.36.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c811ca4a8c853ef420abd8592ba53ddbbac90410fab6903b3e79972a631f7680"
 
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.42.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f40009d85759725a34da6d89a94e63d7bdc50a862acf0dbc7c8e488f1edcb6f5"
+
 [[package]]
 name = "yasna"
 version = "0.5.0"
diff --git a/Cargo.toml b/Cargo.toml
index 9b5b33d..5e7437b 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -21,7 +21,7 @@ tokio = { version = "1.7.1", features = ["rt-multi-thread"] }
 rand = "0.8.4"
 base64 = "0.13.0"
 serde = "1.0.126"
-serde_json = "1.0.64"
+serde_qs = "0.10.1"
 serde_derive = "1.0.126"
 ln-types = { version = "0.1.3", features = ["serde", "parse_arg"] }
 configure_me = "0.4.0"
diff --git a/src/http.rs b/src/http.rs
index 2c5dc3c..ff29e92 100644
--- a/src/http.rs
+++ b/src/http.rs
@@ -73,8 +73,9 @@ async fn handle_web_req(
 
         (&Method::POST, "/pj/schedule") => {
             let bytes = hyper::body::to_bytes(req.into_body()).await?;
-            let request =
-                serde_json::from_slice::<ScheduledPayJoin>(&bytes).expect("invalid request");
+            // deserialize x-www-form-urlencoded data with non-strict encoded "channel[arrayindex]"
+            let conf = serde_qs::Config::new(2, false);
+            let request: ScheduledPayJoin = conf.deserialize_bytes(&bytes).expect("invalid request");
 
             let address = scheduler.schedule_payjoin(&request).await.unwrap();
             let total_amount = request.total_amount();
diff --git a/src/scheduler.rs b/src/scheduler.rs
index b8ef937..8eb3da2 100644
--- a/src/scheduler.rs
+++ b/src/scheduler.rs
@@ -15,7 +15,7 @@ use tonic_lnd::rpc::OpenChannelRequest;
 use crate::args::ArgError;
 use crate::lnd::{LndClient, LndError};
 
-#[derive(Clone, serde_derive::Deserialize)]
+#[derive(Clone, serde_derive::Deserialize, Debug)]
 pub struct ScheduledChannel {
     pub(crate) node: P2PAddress,
     #[serde(with = "bitcoin::util::amount::serde::as_sat")]
@@ -37,7 +37,7 @@ impl ScheduledChannel {
     }
 }
 
-#[derive(Clone, serde_derive::Deserialize)]
+#[derive(Clone, serde_derive::Deserialize, Debug)]
 pub struct ScheduledPayJoin {
     #[serde(with = "bitcoin::util::amount::serde::as_sat")]
     wallet_amount: bitcoin::Amount,
diff --git a/static/index.html b/static/index.html
index 31b3b57..1e60e42 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1,74 +1,97 @@
 <html>
 	<head>
-		<title>Lightning PayJoin</title>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/selekkt-skelet@latest/css/skelet.min.css">
+		<title>NOLOOKING Lightning PayJoin</title>
 		<style>
 			.invisible {
 				display: none;
 			}
 		</style>
 	</head>
-	<body>
-		<h1><u>L</u>ightning PayJ<u>oin</u></h1>
-		<h2>Queue a batch of lightning channels to open with one <a href="https://github.com/bitcoin/bips/blob/master/bip-0078.mediawiki" target="blank">BIP 78</a> <a href="https://bitcoinmagazine.com/culture/blockchain-analysis-about-get-harder-p2ep-enters-testing-phase" target="blank">P2EP</a> PayJoin</h2>
-		<p style="color: orange">Halloween-quality pre-alpha software. A lil spooky!</p>
-		<div id="prepare">
-			<details>
-				<summary>
-					<label for="reserve" >Anchor Reserve Deposit (sats)</label>
-					<input type="text" name="wallet" id="wallet" value="10000">
-				</summary>
-				<p>New nodes need a reserve output of at least 10,000 sats. Set this to 10,000 fo a new node. 0 is fine thereafter.</p>
-			</details>
-			<div><label>Maximum fee rate (sats/vB)</label><input type="text" id="feerate" value="1"></div>
-			<div>
-				<table id="channels">
-					<tr><th>Destination Node</th><th>Desired Channel Capacity (sats)</th></tr>
-					<tr><td><input type="text"></td><td><input type="text"></td></tr>
-				</table>
-			</div>
-			<div id="queue">
-			<button onclick="add_channel()">Add channel</button>
-			<button onclick="submit()">Generate payment request URI</button>
-			</div>
-		</div>
-		<div id="queued" class="invisible">
-			<h2>PayJoin here to open these channels</h2>
-			<a href="" id="bip21"></a>
-		</div>
+	<body dark-mode>
+		<header class="center">
+			<h1><u>L</u>ightning PayJ<u>oin</u></h1>
+			<h2>Queue a batch of lightning channels to open with one <a href="https://github.com/bitcoin/bips/blob/master/bip-0078.mediawiki" target="blank">BIP 78</a> <a href="https://bitcoinmagazine.com/culture/blockchain-analysis-about-get-harder-p2ep-enters-testing-phase" target="blank">P2EP</a> PayJoin</h2>
+		</header>
+		<main lass="center-axyz">
+			<form action="/pj/schedule" method="post" enctype="application/x-www-form-urlencoded"
+				style="max-width: 750px; margin:0 auto; padding:2rem" x-flex direction="column">
+				<p style="color: orange">Halloween-quality pre-alpha software. A lil spooky!</p>
+				<div>
+					<label for="reserve">
+						<details>
+							<summary>
+								Anchor Reserve Deposit (sats)</label>
+							</summary>
+							New nodes need a reserve output of at least 10,000 sats. Set this to 10,000 fo a new node. 0 is fine thereafter.
+						</details>
+					</label>
+					<input type="number" name="wallet_amount" id="wallet" list="defaultReserveSats" min="0" step="1">
+					<datalist id="defaultReserveSats">
+						<option value="10000"></option>
+					</datalist>
+				</div>
+				<div>
+					<label for="fee_rate">Maximum fee rate (sats/vB)</label>
+					<input type="text" name="fee_rate" id="feerate" value="1">
+				</div>
+				<fieldset>
+					<legend>Channels to Open</legend>
+					<!-- channels -->
+					<x-grid columns=2 id="channels">
+						<label id="destinationLabel" span=1>Destination Node</label><label id="capacityLabel" span=1>Channel Capacity (sats)</label>
+						<input type="text" name="channels[0][node]" aria-labelledby="destinationLabel" span=1><input type="number" name="channels[0][amount]" min="20000" step="1" aria-labelledby="capacityLabel" span=1><!-- LND enforces minimum 20k sats channel -->
+						<button type="button" onclick="add_channel()" order=1>Add channel</button>
+					</x-grid>
+				</fieldset>
+				<div id="queue">
+					<button class="is-large" type="submit">Generate payment request URI</button>
+				</div>
+				<output id="queued" class="invisible">
+					<h2>PayJoin here to open these channels</h2>
+					<a href="" id="bip21"></a>
+				</output>
+			</form>
+
+		</main>
 		<script type="text/javascript">
+			var channels = 1;
 			function add_channel() {
 				var table = document.getElementById("channels");
-				table.innerHTML = table.innerHTML + "<tr><td><input type=\"text\"></td><td><input type=\"text\"></td></tr>";
+				table.innerHTML = table.innerHTML + `<input type="text" name="channels[${++channels}][node]" aria-labelledby="destinationLabel" span="1"><input type="number" name="channels[${channels}][amount]" min="20000" step="1" aria-labelledby="capacityLabel" span="1">`;
 			}
 
-			function submit() {
-				var wallet_amount = parseInt(document.getElementById("wallet").value);
-				var fee_rate = parseInt(document.getElementById("feerate").value);
-				var channels = [];
-				var table = document.getElementById("channels");
-				for(var i = 1; i < table.rows.length; i++) {
-					var row = table.rows[i];
-					var node_addr = row.cells[0].getElementsByTagName("input")[0].value;
-					var amount = parseInt(row.cells[1].getElementsByTagName("input")[0].value);
-					channels.push({ "node": node_addr, "amount": amount });
-				}
-				request = {
-					"wallet_amount": wallet_amount,
-					"channels": channels,
-					"fee_rate": fee_rate,
-				};
-				var xmlhttp = new XMLHttpRequest();
-				xmlhttp.open("POST", "/pj/schedule");
-				xmlhttp.setRequestHeader("Content-Type", "application/json");
-				xmlhttp.send(JSON.stringify(request));
-				xmlhttp.onload = function() {
-					var link = document.getElementById("bip21");
-					link.href = this.responseText;
-					link.innerHTML = this.responseText;
-					document.getElementById("queue").classList.add("invisible");
-					document.getElementById("queued").classList.remove("invisible");
+			document.querySelector("form").addEventListener("submit", async (event) => {
+				event.preventDefault();
+				let form = event.currentTarget;
+				let resource = form.action;
+				let options = {
+					method: form.method,
+					headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+					// encode FormData as x-www-form-urlencoded
+					body: new URLSearchParams(new FormData(form)).toString()
 				};
-			}
+
+				await fetch(resource, options)
+					.then(async (r) => {
+						if (!r.ok)
+							throw new Error('Something went wrong.');
+
+						let link = document.getElementById("bip21");
+						let bip21 = await r.text();
+						link.href = bip21;
+						link.innerHTML = bip21;
+						document.getElementById("queue").classList.add("invisible");
+						document.getElementById("queued").classList.remove("invisible");
+					})
+					.catch((err) => {
+						alert(err);
+					});
+				return false; // don't trigger form action attribute, we submitted through js
+			});
 		</script>
 	</body>
 </html>