diff --git a/.gitignore b/.gitignore
index 748aabf..e3d61b2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,3 +15,7 @@ Cargo.lock
 /target
 
 Brewfile.lock.json
+
+/etc/privkey
+/etc/pubkey
+/etc/wg0.conf
diff --git a/etc/wg0.example.conf b/etc/wg0.example.conf
new file mode 100644
index 0000000..e7c8634
--- /dev/null
+++ b/etc/wg0.example.conf
@@ -0,0 +1,5 @@
+[Interface]
+Address = 10.55.55.1/24
+ListenPort = 51820
+PrivateKey = xxxxxxx
+SaveConfig = true
diff --git a/src/helpers.rs b/src/helpers.rs
index f484197..5a93dbc 100644
--- a/src/helpers.rs
+++ b/src/helpers.rs
@@ -1,9 +1,9 @@
 use std::process::Command;
 
 
-pub fn wg_cmd(arg: String) -> String {
+pub fn wg_cmd(args: &'static [&'static str]) -> String {
     let output = Command::new("./bin/wg_cmd")
-        .arg(arg)
+        .args(args)
         .output()
         .expect("failed to execute process");
     let output_str = String::from_utf8(output.stdout)
@@ -12,7 +12,7 @@ pub fn wg_cmd(arg: String) -> String {
     output_str
 }
 
-pub fn sh_cmd(cmd: String) -> String {
+pub fn sh_cmd(cmd: &'static str) -> String {
     let output = Command::new("sh")
         .arg("-c")
         .arg(cmd)
diff --git a/src/main.rs b/src/main.rs
index 3fb059e..1c3e797 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -1,7 +1,7 @@
 #![feature(proc_macro_hygiene, decl_macro, plugin)]
 #[macro_use] extern crate rocket;
 #[macro_use] extern crate rocket_contrib;
-extern crate qrcode_generator;
+#[macro_use] extern crate serde_derive;
 mod routes;
 mod data;
 
@@ -21,7 +21,7 @@ fn main() {
     println!("{:#?}", wg_opts);
     rocket::ignite()
         .mount("/", routes![
-            routes::home, routes::add_peer
+            routes::home, routes::add_peer, routes::save_peer_config,
         ])
         .mount("/static", StaticFiles::from("./static"))
         .register(catchers![not_found])
diff --git a/src/routes.rs b/src/routes.rs
index 762798b..5f41cd7 100644
--- a/src/routes.rs
+++ b/src/routes.rs
@@ -3,20 +3,22 @@ mod data;
 #[path = "helpers.rs"]
 mod helpers;
 
-use data::WireGuardOptions;
+use data::{WireGuardOptions, PeerConfig};
 use helpers::{wg_cmd, sh_cmd};
 use rocket_contrib::templates::Template;
-use rocket_contrib::json::JsonValue;
-use qrcode_generator::QrCodeEcc;
+use rocket_contrib::json::{JsonValue, Json};
+use std::fs::File;
+use std::io::prelude::*;
+use std::fs;
 
 
 #[get("/")]
 pub fn home() -> Template {
-    let show_config = wg_cmd("show".to_string());
-    let whoami = sh_cmd("whoami".to_string());
-    let uptime = sh_cmd("uptime".to_string());
-    let hostname = sh_cmd("hostname".to_string());
-    let netstat_info = sh_cmd("netstat -tan | grep \"ESTABLISHED\\|CLOSE_WAIT\"".to_string());
+    let show_config = wg_cmd(&["show"]);
+    let whoami = sh_cmd("whoami");
+    let uptime = sh_cmd("uptime");
+    let hostname = sh_cmd("hostname");
+    let netstat_info = sh_cmd("netstat -tan | grep \"ESTABLISHED\\|CLOSE_WAIT\"");
     let shell_ps1 = format!(
         "{}@{} $",
         whoami.trim_end(),
@@ -34,33 +36,35 @@ pub fn home() -> Template {
 
 #[get("/add-peer")]
 pub fn add_peer() -> Template {
-    let new_key = wg_cmd("genkey".to_string());
+    let new_key = wg_cmd(&["genkey"]);
     let state = WireGuardOptions { ..Default::default() };
-    let peer_config = format!("[Interface]
-PrivateKey = {}
-Address = 10.66.66.2/32
-DNS = {}
-
-[Peer]
-PublicKey = {}
-AllowedIPs = {}
-Endpoint = {}:{}
-PersistentKeepalive = 21",
-        new_key.trim_end(),
-        state.dns,
-        state.pubkey,
-        state.route,
-        state.endpoint,
-        state.port
-    );
-    let qr_code: String = qrcode_generator::to_svg_to_string(
-        &peer_config, QrCodeEcc::Low, 256, None
-    ).unwrap();
-    let qr_code: String = base64::encode(qr_code);
     let context: JsonValue = json!({
-        "qr_code": qr_code,
-        "peer_config": peer_config
+        "privkey": new_key.trim_end(),
+        "state": state,
     });
 
     Template::render("add_peer", context)
 }
+
+#[post("/save-peer", data = "<peer_config>")]
+pub fn save_peer_config(peer_config: Json<PeerConfig>) -> JsonValue {
+    println!("{:#?}", peer_config);
+//     let peer_config = format!("[Peer]
+// # name = {}
+// PublicKey = {}
+// AllowedIPs = {}/32")
+//     let mut file = File::create("/tmp/wgas.conf").unwrap();
+//     let conf_str = serde_json::to_string(&input.into_inner()).unwrap();
+//     file.write_all().unwrap();
+//     let wg_set = wg_cmda(&["set", "wg0", "private-key", "/tmp/wgas.conf"]); // todo - randomize
+    // let file_removed = match fs::remove_file("/tmp/wgas.conf"){
+    //     Ok(_) => true,
+    //     Err(_) => false
+    // };
+    json!({
+        "eyo": "hello",
+        "config_data": "asd",
+        // "response": wg_set.trim_end(),
+        // "key_cleared": file_removed
+    })
+}
diff --git a/templates/add_peer.html.tera b/templates/add_peer.html.tera
index f7754b3..a983b9f 100644
--- a/templates/add_peer.html.tera
+++ b/templates/add_peer.html.tera
@@ -2,17 +2,70 @@
 
 {% block content %}
 
+<script src="/static/js/qrcode.min.js"></script>
+
 <section id="contact" class="">
   <div class="container">
     <header>
       <h2>Add A Peer</h2>
     </header>
-    <p>The following configuration has been generated by the server. Refresh for new keys.</br>The keys and peer info will not be configured on the interface until you confirm with the buttons below.</p>
-    <div class="code">{{ peer_config }}</div>
-    <img src="data:image/svg+xml;base64,{{ qr_code }}" width=200 class="center">
-    <hr>
-    <button type="submit">Configure (wip)</button>
+    <p>Use this form to add new peers to the WireGuard VPN. Input an IP address for this peer to use within the server's network CIDR range:</br><strong>{% if state.interface %}{{ state.interface }}{% else %}not defined{% endif %}</strong></p>
+    <form id="peer-form" action="/save-peer-config" method="post">
+      <input type="text" name="ipaddr" id="input-ipaddr" placeholder="Enter an IP address for the peer">
+      <!-- <input type="submit" value="Add Peer"> -->
+    </form>
+    <br>
+    <pre id="peer-config" class="code"></pre>
+    <div id="qrcode"></div>
   </div>
 </section>
 
+<script type="text/javascript">
+
+var input_ip_address = document.getElementById('input-ipaddr');
+var peer_config_element = document.getElementById('peer-config');
+var qr_code_element = document.getElementById('qrcode');
+var current_text = input_ip_address.value;
+// var qr_code = new QRCode(qr_code_element, get_templated(current_text));
+var qr_code = new QRCode(qr_code_element, {
+    text: get_templated(current_text),
+    colorDark : "#7d2220",
+    colorLight : "#ffffff",
+    correctLevel : QRCode.CorrectLevel.H
+});
+var timeout = null;
+
+function get_templated(ip_addr){
+  var peer_config = `[Interface]
+PrivateKey = {{ privkey }}
+Address = ${ip_addr}/32
+DNS = {{ state.dns }}
+
+[Peer]
+PublicKey = {{ state.pubkey }}
+AllowedIPs = 0.0.0.0/0
+Endpoint = {{ state.endpoint }}:{{ state.port }}
+PersistentKeepalive = 21`;
+  return peer_config;
+}
+
+function update_meta(){
+  var new_text = input_ip_address.value;
+  if (new_text==current_text) return; else current_text=new_text;
+  var peer_config = get_templated(current_text);
+  peer_config_element.innerHTML = peer_config;
+  qr_code.clear();
+  qr_code.makeCode(peer_config);
+}
+
+function eventHandler(){
+  if(timeout) clearTimeout(timeout);
+  timeout=setTimeout(update_meta, 50);
+}
+
+input_ip_address.onkeydown=input_ip_address.onkeyup=input_ip_address.onclick=eventHandler;
+input_ip_address.focus();
+peer_config_element.innerHTML = get_templated(current_text);
+</script>
+
 {% endblock content %}