diff --git a/lib/public/index.html b/lib/public/index.html
index c039c9d..db59bf3 100644
--- a/lib/public/index.html
+++ b/lib/public/index.html
@@ -27,10 +27,13 @@
       <li class="js-peer-name">peer-name</li>
     </ul>
 
+    <h3>Zones:</h3>
+    <button type="button" class="js-zone-new">new</button>
     <ul class="js-zone-tpl">
       <li><button type="button" class="js-zone-name">zone-name</button></li>
     </ul>
 
+    <h3>Records:</h3>
     <ul class="js-record-tpl">
       <li class="js-record-soa">
         <input type="hidden" class="js-record-id" />
@@ -117,7 +120,7 @@
     <label>Select Type:</label>
     <select class="js-record-form-type">
       <option value="" selected disabled>Record Type</option>
-      <option value="SOA">SOA</option>
+      <option value="SOA" disabled>SOA</option>
       <option value="NS">NS</option>
       <option value="A">A</option>
       <option value="AAAA">AAAA</option>
@@ -130,6 +133,7 @@
       <option value="TXT">TXT</option>
       <option value="typeX">typeX</option>
     </select>
+    <button type="button" class="js-record-form-new">new</button>
 
     <div class="js-record-form-tpl">
       <form class="js-record-form-soa">
diff --git a/lib/public/js/app.js b/lib/public/js/app.js
index e78bb53..9efde37 100644
--- a/lib/public/js/app.js
+++ b/lib/public/js/app.js
@@ -225,6 +225,10 @@
     return fetchRecords(zone);/*.then(function () {
     });*/
   });
+  $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 }));
+  });
 
   $on('select.js-record-form-type', 'change', function (ev) {
     var type = ev.target.value;
@@ -250,6 +254,13 @@
     $qs('.js-record-type', $tpl).innerText = type;
     $qs('.js-record-zone', $tpl).innerText = myZone;
   });
+  $on('button.js-record-form-new', 'click', function (/*ev*/) {
+    var type = $qs('select.js-record-form-type').value;
+    if (!type) {
+      $qs('select.js-record-form-type').value = 'A';
+    }
+    $qs('select.js-record-form-type').dispatchEvent(new Event('change', { bubbles: true }));
+  });
 
   $on('button.js-record-edit', 'click', function (ev) {
     var id = ev.target.parentElement.querySelector('.js-record-id').value;