diff --git a/lib/httpd.js b/lib/httpd.js
index 9a4eeff..480d8b4 100644
--- a/lib/httpd.js
+++ b/lib/httpd.js
@@ -19,16 +19,7 @@ module.exports.create = function (cli, engine/*, dnsd*/) {
   if (!subparts[1]) {
     subparts = [ 'root', 'localhost' ];
     // TODO generate new random key and store it
-    jwk = {
-      //"kid": "thumbnail(pubkey)",
-      "kty": "EC",
-      "d": "GRIT-yJVlhAsgIChbNanxv41iCxbZszbHHgK8kbZovs",
-      "use": "sig",
-      "crv": "P-256",
-      "x": "ogbK2nP6SiEIIp4w8oXBn3dcs6kljFfTbgZYG591tUU",
-      "y": "sB0AekMYwpvbQfAoW-2LlEWdapNhxynfj1zBtWpE9lo",
-      "alg": "ES256"
-    };
+    jwk = cli.privkey || require('../samples/privkey.js');
     jwt = require('jsonwebtoken');
     privpem = require('jwk-to-pem')(jwk, { private: true });
     pubpem = require('jwk-to-pem')(jwk, { private: false });
diff --git a/lib/public/index.html b/lib/public/index.html
index d9806d0..147dbb5 100644
--- a/lib/public/index.html
+++ b/lib/public/index.html
@@ -27,11 +27,49 @@
       <li class="js-peer-name">peer-name</li>
     </ul>
 
+    <div>
     <h3>Zones:</h3>
-    <button type="button" class="js-zone-new">new</button>
+    <form class="js-zone-form-create">
+      <input type="text" class="js-zone-form-name" placeholder="ex: example.com" />
+      <button type="button" class="js-zone-new">Create Zone</button>
+    </form>
     <ul class="js-zone-tpl">
-      <li><button type="button" class="js-zone-name">zone-name</button></li>
+      <li class="js-zone">
+        <span class="js-zone-name">example.com</span>
+        <button type="button" class="js-zone-view">view</button>
+        <button type="button" class="js-zone-edit">edit</button>
+        <button type="button" class="js-zone-destroy">X</button>
+      </li>
     </ul>
+    <div class="js-zone-form-tpl">
+      <form class="js-zone-form-soa">
+        <input type="hidden" class="js-record-id" />
+        <span class="js-record-type">SOA</span>
+        <input type="text" class="js-record-name" placeholder="[zone name] example.com" disabled>
+        <input type="text" class="js-recordx-primary" placeholder="[primary] ns{{x}}.example.com" disabled>
+        <input type="text" class="js-record-admin" placeholder="[admin] admin.example.com">
+        <input type="text" class="js-record-expiration" placeholder="[expire] 2419200 (how long to rely on non-primary)">
+        <input type="text" class="js-record-minimum" placeholder="[minimum nxdomain] 5">
+        <input type="text" class="js-recordx-serial" placeholder="[serial] YYYYMMDDxx" disabled>
+        <input type="text" class="js-record-retry" placeholder="[retry] 1800 (how quickly to retry on failed update)">
+        <input type="text" class="js-record-refresh" placeholder="[retry] 7200 (how often to check for updates)">
+        <input type="text" class="js-record-ttl" placeholder="[default record ttl] 86400">
+      </form>
+      <div class="js-zone-form-vns-tpl">
+        <form class="js-zone-form-vns">
+          <input type="hidden" class="js-record-id" />
+          <span class="js-record-type">Vanity Nameservers</span>
+          <input type="text" class="js-record-host" placeholder="nsx">.<span class="js-record-zone">example.com</span>
+          <input type="text" class="js-record-address" placeholder="aname, ipv4, or ipv6 address">
+          <input type="text" class="js-record-ttl" placeholder="86400">
+          <!--
+          <button type="button" class="js-record-remove">-</button>
+          <button type="button" class="js-record-add">+</button>
+          -->
+        </form>
+      </div>
+      <button type="button" class="js-zone-save">Save Zone</button>
+    </div>
 
     <h3>Records:</h3>
     <ul class="js-record-tpl">
@@ -130,7 +168,7 @@
     <select class="js-record-form-type">
       <option value="" selected disabled>Record Type</option>
       <option value="SOA" disabled>SOA</option>
-      <option value="NS">NS</option>
+      <option value="NS">NS (delegation)</option>
       <option value="A">A</option>
       <option value="AAAA">AAAA</option>
       <option value="ANAME">ANAME</option>
@@ -142,14 +180,14 @@
       <option value="TXT">TXT</option>
       <option value="typeX">typeX</option>
     </select>
-    <button type="button" class="js-record-form-new">new</button>
+    <button type="button" class="js-record-form-new">Create Record</button>
 
     <div class="js-record-form-tpl">
       <form class="js-record-form-soa">
         <input type="hidden" class="js-record-id" />
         <span class="js-record-type">SOA</span>
         <input type="text" class="js-record-name">
-        <input type="text" class="js-record-primary">
+        <input type="text" class="js-recordx-primary" placeholder="ns{{rnd}}.example.com" disabled>
         <input type="text" class="js-record-admin">
         <input type="text" class="js-record-expiration">
         <input type="text" class="js-record-minimum">
diff --git a/lib/public/js/app.js b/lib/public/js/app.js
index 83d0417..562d923 100644
--- a/lib/public/js/app.js
+++ b/lib/public/js/app.js
@@ -86,7 +86,8 @@
         if (!tpls.peer) {
           tpls.peer = $qs('.js-peer-tpl').innerHTML;
         }
-        data.peers.forEach(function (peer) {
+        cache.peers = data.peers;
+        cache.peers.forEach(function (peer) {
           el = document.createElement('div');
           el.innerHTML = tpls.peer;
           console.log(el);
@@ -117,10 +118,10 @@
           el = document.createElement('div');
           el.innerHTML = tpls.zone;
           console.log(el);
-          console.log($qs('.js-zone-name', el));
+          console.log($qs('.js-zone', el));
           $qs('.js-zone-name', el).innerText = zone.name;
-          $qs('.js-zone-name', el).dataset.id = zone.id;
-          $qs('.js-zone-name', el).dataset.name = zone.name;
+          $qs('.js-zone', el).dataset.id = zone.id;
+          $qs('.js-zone', el).dataset.name = zone.name;
           console.log(el.innerHTML);
           tpl += el.innerHTML;
           console.log(tpl);
@@ -219,15 +220,80 @@
       $qs('a.js-name').dataset.href.replace(/:name/, ev.target.value || ':name');
   });
 
-  $on('button.js-zone-name', 'click', function (ev) {
-    var zone = ev.target.dataset.name;
+  $on('button.js-zone-view', 'click', function (ev) {
+    var zone = ev.target.parentElement.dataset.name;
     myZone = zone;
     return fetchRecords(zone);/*.then(function () {
     });*/
   });
+  function openZoneForm() {
+    var d = new Date();
+    myZone = $qs('.js-zone-form-name').value;
+    $qs('.js-zone-form-tpl').innerHTML = tpls.newZone;
+
+    cache.peers.forEach(function () {
+      $qs('.js-zone-form-vns-tpl').innerHTML += tpls.newNs;
+    });
+    cache.peers.forEach(function (p, i) {
+      var $vns = $qsa('.js-zone-form-tpl .js-zone-form-vns')[i];
+      $qs('.js-record-host', $vns).value = 'ns' + (i + 1);
+      //$qs('.js-record-name', $vns).value = 'ns' + (i + 1) + '.' + myZone;
+      $qs('.js-record-zone', $vns).value = myZone;
+      $qs('.js-record-ttl', $vns).value = 7200;
+    });
+
+    $qs('.js-zone-form-tpl .js-record-name').value = myZone;
+    $qs('.js-zone-form-tpl .js-recordx-primary').value = 'nsx.' + myZone;
+    $qs('.js-zone-form-tpl .js-record-admin').value = 'admin.' + myZone;
+    $qs('.js-zone-form-tpl .js-record-expiration').value = 2419200; // 4 weeks
+    $qs('.js-zone-form-tpl .js-record-minimum').value = 5;
+    $qs('.js-zone-form-tpl .js-recordx-serial').value = d.getFullYear()
+      + '' + (d.getMonth() + 1)
+      + '' + d.getDate()
+      + '' + (Math.round(Math.random() * 99))
+      ;
+    $qs('.js-zone-form-tpl .js-record-retry').value = 1800;
+    $qs('.js-zone-form-tpl .js-record-refresh').value = 7200;
+    $qs('.js-zone-form-tpl .js-record-ttl').value = 300;
+    console.log('val:', $qs('.js-zone-form-tpl .js-record-ttl').value);
+    console.log('x', $qs('.js-zone-form-tpl'));
+    console.log('val:', $qs('.js-zone-form-tpl .js-record-ttl').value);
+  }
+  $on('form.js-zone-form-create', 'submit', function (ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    console.log('form submit enter');
+    openZoneForm();
+  });
   $on('button.js-zone-new', 'click', function (/*ev*/) {
-    $qs('select.js-record-form-type').value = 'SOA';
-    $qs('select.js-record-form-type').dispatchEvent(new Event('change', { bubbles: true }));
+    //$qs('select.js-record-form-type').value = 'SOA';
+    //$qs('select.js-record-form-type').dispatchEvent(new Event('change', { bubbles: true }));
+    console.log('form submit click');
+    openZoneForm();
+  });
+  $on('button.js-zone-edit', 'click', function (/*ev*/) {
+    openZoneForm();
+  });
+  $on('button.js-zone-save', 'click', function (/*ev*/) {
+    var zone = {};
+    var nss = [];
+    [ 'id', 'name', 'admin', 'expiration', 'minimum', 'retry', 'refresh', 'ttl' ].forEach(function (key) {
+      zone[key] = $qs('.js-zone-form-tpl .js-record-' + key).value;
+    });
+    $qsa('.js-zone-form-tpl .js-zone-form-vns').forEach(function ($el) {
+      console.log('$el:');
+      console.log($el);
+      var ns = {};
+      [ 'id', 'host'/*, 'name'*/, 'ttl', 'address' ].forEach(function (key) {
+        ns[key] = $qs('.js-record-' + key, $el).value;
+      });
+      nss.push(ns);
+    });
+    console.log('zone:');
+    console.log(zone);
+    console.log('nss:');
+    console.log(nss);
+    $qs('.js-zone-form-tpl').innerHTML = '';
   });
 
   $on('select.js-record-form-type', 'change', function (ev) {
@@ -251,6 +317,10 @@
     }
     $tpl = $qs('.js-record-form-tpl');
     $tpl.innerHTML = tpls.formsMap[type] || '';
+    if (!tpls.formsMap[type]) {
+      console.warn("no tpl for type '" + type + "'");
+      return;
+    }
     $qs('.js-record-type', $tpl).innerText = type;
     $qs('.js-record-zone', $tpl).innerText = myZone;
   });
@@ -429,5 +499,9 @@
   $qs('select.js-record-form-type').value = '';
   // Create a new 'change' event and dispatch it.
   $qs('select.js-record-form-type').dispatchEvent(new Event('change', { bubbles: true }));
+  tpls.newNs = $qs('.js-zone-form-tpl .js-zone-form-vns-tpl').innerHTML;
+  $qs('.js-zone-form-tpl .js-zone-form-vns-tpl').innerHTML = '';
+  tpls.newZone = $qs('.js-zone-form-tpl').innerHTML;
+  $qs('.js-zone-form-tpl').innerHTML = '';
 
 }());