diff --git a/.jshintrc b/.jshintrc
index f4d30cf..acc3c51 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -20,6 +20,7 @@
     "before" : true,
     "beforeEach" : true,
     "after" : true,
-    "afterEach" : true
+    "afterEach" : true,
+    "jQuery" : true
   }
 }
\ No newline at end of file
diff --git a/Gruntfile.js b/Gruntfile.js
index d01bcd7..bc5efb1 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -6,7 +6,8 @@ module.exports = function(grunt) {
     jshint: {
       all: ['*.js', 'src/**/*.js', 'test/**/*.js'],
       options: {
-        jshintrc: '.jshintrc'
+        jshintrc: '.jshintrc',
+        ignores: ['src/static/js/*.min.js']
       }
     },
 
diff --git a/README.md b/README.md
index f2043ee..806705a 100644
--- a/README.md
+++ b/README.md
@@ -128,7 +128,7 @@ POST /api/v1/key
 * **primaryEmail (optional)**: The ascii armored block is parsed to check for user ids, so this parameter is purely optional. Normally a verification email is sent to every user id found in the pgp key. To prevent this behaviour, user agents can specify the user's primary email address to send out only one email.
 
 
-### Verify uploaded key
+### Verify uploaded key (via link in email)
 
 ```
 GET /api/v1/key?op=verify&keyId=b8e4105cc9dedc77&nonce=6a314915c09368224b11df0feedbc53c
@@ -140,7 +140,7 @@ GET /api/v1/key?op=verify&keyId=b8e4105cc9dedc77&nonce=6a314915c09368224b11df0fe
 DELETE /api/v1/key?keyId=b8e4105cc9dedc77 OR ?email=user@example.com
 ```
 
-### Verify key removal
+### Verify key removal (via link in email)
 
 ```
 GET /api/v1/key?op=verifyRemove&keyId=b8e4105cc9dedc77&nonce=6a314915c09368224b11df0feedbc53c
diff --git a/src/static/demo.html b/src/static/demo.html
index cda176e..3737075 100644
--- a/src/static/demo.html
+++ b/src/static/demo.html
@@ -20,7 +20,7 @@
         <nav>
           <ul class="nav nav-pills pull-right">
             <li role="presentation"><a href="/">Home</a></li>
-            <li role="presentation" class="active"><a href="/demo.html">Demo</a></li>
+            <li role="presentation" class="active"><a href="demo.html">Demo</a></li>
             <li role="presentation"><a href="https://github.com/mailvelope/keyserver" target="_blank">GitHub</a></li>
           </ul>
         </nav>
@@ -28,8 +28,17 @@
       </div>
 
       <div class="row marketing">
-        <div class="col-lg-12">
+        <div id="addKey" class="col-lg-12">
           <h2>OpenPGP key upload</h2>
+          <div class="alert alert-success hidden" role="alert">
+            <strong>Success!</strong> <span></span>
+          </div>
+          <div class="alert alert-danger hidden" role="alert">
+            <strong>Error!</strong> <span></span>
+          </div>
+          <div class="progress hidden">
+            <div class="progress-bar progress-bar-striped active" role="progressbar"></div>
+          </div>
           <form action="/pks/add" method="post">
             <p><textarea class="form-control" name="keytext" rows="5" spellcheck="false" placeholder="Paste PGP PUBLIC KEY BLOCK here ..." required></textarea></p>
             <input class="btn btn-primary btn-lg" type="submit" value="Upload">
@@ -51,10 +60,18 @@
           <hr>
         </div> <!-- /col-lg-12 -->
 
-        <div class="col-lg-12">
+        <div id="removeKey" class="col-lg-12">
           <h2>OpenPGP key removal</h2>
-          <form action="/api/v1/key" method="get">
-            <input class="hidden" type="radio" name="op" value="remove" checked="checked">
+          <div class="alert alert-success hidden" role="alert">
+            <strong>Success!</strong> <span></span>
+          </div>
+          <div class="alert alert-danger hidden" role="alert">
+            <strong>Error!</strong> <span></span>
+          </div>
+          <div class="progress hidden">
+            <div class="progress-bar progress-bar-striped active" role="progressbar"></div>
+          </div>
+          <form>
             <div class="input-group input-group-lg">
               <input class="form-control" name="email" type="email" spellcheck="false" placeholder="Email address" required>
               <span class="input-group-btn">
@@ -77,5 +94,8 @@
 
     </div> <!-- /container -->
 
+    <script src="js/jquery.min.js"></script>
+    <script src="js/demo.js"></script>
+
   </body>
 </html>
diff --git a/src/static/index.html b/src/static/index.html
index 70af4e8..9a57170 100644
--- a/src/static/index.html
+++ b/src/static/index.html
@@ -20,7 +20,7 @@
         <nav>
           <ul class="nav nav-pills pull-right">
             <li role="presentation" class="active"><a href="/">Home</a></li>
-            <li role="presentation"><a href="/demo.html">Demo</a></li>
+            <li role="presentation"><a href="demo.html">Demo</a></li>
             <li role="presentation"><a href="https://github.com/mailvelope/keyserver" target="_blank">GitHub</a></li>
           </ul>
         </nav>
diff --git a/src/static/js/demo.js b/src/static/js/demo.js
new file mode 100644
index 0000000..2e02a8a
--- /dev/null
+++ b/src/static/js/demo.js
@@ -0,0 +1,51 @@
+;(function($) {
+  'use strict';
+
+  $('.progress-bar').css('width', '100%');
+
+  // POST key form
+  $('#addKey form').submit(function(e) {
+    e.preventDefault();
+    $('#addKey .alert').addClass('hidden');
+    $('#addKey .progress').removeClass('hidden');
+    $.ajax({
+      method: 'POST',
+      url: '/api/v1/key',
+      data: JSON.stringify({ publicKeyArmored:$('#addKey textarea').val() }),
+      contentType: 'application/json',
+    }).done(function(data, textStatus, xhr) {
+      if (xhr.status === 304) {
+        alert('addKey', 'danger', 'Key already exists!');
+      } else {
+        alert('addKey', 'success', xhr.responseText);
+      }
+    })
+    .fail(function(xhr) {
+      alert('addKey', 'danger', xhr.responseText);
+    });
+  });
+
+  // DELETE key form
+  $('#removeKey form').submit(function(e) {
+    e.preventDefault();
+    $('#removeKey .alert').addClass('hidden');
+    $('#removeKey .progress').removeClass('hidden');
+    var email = $('#removeKey input[type="email"]').val();
+    $.ajax({
+      method: 'DELETE',
+      url: '/api/v1/key?email=' + encodeURIComponent(email)
+    }).done(function(data, textStatus, xhr) {
+      alert('removeKey', 'success', xhr.responseText);
+    })
+    .fail(function(xhr) {
+      alert('removeKey', 'danger', xhr.responseText);
+    });
+  });
+
+  function alert(region, outcome, text) {
+    $('#' + region + ' .progress').addClass('hidden');
+    $('#' + region + ' .alert-' + outcome + ' span').text(text);
+    $('#' + region + ' .alert-' + outcome).removeClass('hidden');
+  }
+
+}(jQuery));
\ No newline at end of file