diff --git a/configuration.html b/configuration.html
deleted file mode 100644
index 156da6f..0000000
--- a/configuration.html
+++ /dev/null
@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html>
-        <head>
-                <title>PebbleAuth</title>
-                <meta charset='utf-8'>
-                <meta name='viewport' content='width=device-width, initial-scale=1'>
-                <link rel='stylesheet' href='http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css' />
-                <script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
-                <script src='http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js'></script>
-                <style>
-                        .ui-header .ui-title { margin-left: 1em; margin-right: 1em; text-overflow: clip; }
-                </style>
-        </head>
-  <body>
-<div data-role="page" id="page1">
-    <div data-theme="a" data-role="header" data-position="fixed">
-        <h3>
-            PebbleAuth Configuration
-        </h3>
-    </div>
-    <div id="keys" data-role="content">
-		<div data-role="fieldcontain"><label for="keyname">Name</label>
-			<input name="keyname" id="keyname" placeholder="" value="" data-mini="true" type="text">
-		</div>
-		<div data-role="fieldcontain"><label for="keysecret">Secret</label>
-			<input name="keysecret" id="keysecret" placeholder="" value="" data-mini="true" type="text">
-		</div>
-					
-		<div class="ui-grid-a">
-			<div class="ui-block-a">
-				<input id="cancel" type="submit" data-theme="c" data-icon="delete" data-iconpos="left" value="Cancel">
-			</div>
-			<div class="ui-block-b">
-				<input id="save" type="submit" data-theme="b" data-icon="check" data-iconpos="right" value="Save">
-			</div>
-		</div>
-	</div>
-</div>
-    <script>
-      function saveOptions() {
-        var options = {
-          'label': $("#keyname").val(),
-		  'secret': $("#keysecret").val().replace(/\s/g, '')
-        }
-        return options;
-      }
-
-      $().ready(function() {
-        $("#cancel").click(function() {
-          console.log("Cancel");
-          document.location = "pebblejs://close";
-        });
-
-        $("#save").click(function() {
-          console.log("Submit");
-
-          var location = "pebblejs://close#" + encodeURIComponent(JSON.stringify(saveOptions()));
-          console.log("Warping to: " + location);
-          console.log(location);
-          document.location = location;
-        });
-
-      });
-    </script>
-  </body>
-</html>
diff --git a/html/configuration.html b/html/configuration.html
index ad2ae91..e05b498 100644
--- a/html/configuration.html
+++ b/html/configuration.html
@@ -20,7 +20,7 @@ <h3>
     </div>
     <div id="settings" data-role="content">
 		<div data-role="fieldcontain"><label for="keyname">Name</label>
-			<input name="keyname" id="keyname" placeholder="" value="" data-mini="true" type="text">
+			<input name="keyname" id="keyname" placeholder="" value="" maxlength=6 data-mini="true" type="text">
 		</div>
 		<div data-role="fieldcontain"><label for="keysecret">Secret</label>
 			<input name="keysecret" id="keysecret" placeholder="" value="" data-mini="true" type="text">
@@ -47,30 +47,129 @@ <h3>
 	</div>
 </div>
     <script>
-      function saveOptions() {
-        var options = {
-          'label': $("#keyname").val(),
-		  'secret': $("#keysecret").val().replace(/\s/g, ''),
-		  'theme': parseInt($("input[name=theme]:checked").val(), 10),
-        }
-        return options;
-      }
+		// Base32 decoder from https://github.com/agnoster/base32-js/blob/master/lib/base32.js by Isaac Wolkerstorfer
+		var alphabet = '0123456789abcdefghjkmnpqrtuvwxyz'
+		var alias = { o:0, i:1, l:1, s:5 }
+		
+		var lookup = function() {
+			var table = {}
+			// Invert 'alphabet'
+			for (var i = 0; i < alphabet.length; i++) {
+				table[alphabet[i]] = i
+			}
+			// Splice in 'alias'
+			for (var key in alias) {
+				if (!alias.hasOwnProperty(key)) continue
+				table[key] = table['' + alias[key]]
+			}
+			lookup = function() { return table }
+			return table
+		}
+		
+		function Decoder() {
+			var skip = 0 // how many bits we have from the previous character
+			var byte = 0 // current byte we're producing
+
+			this.output = ''
+
+			// Consume a character from the stream, store
+			// the output in this.output. As before, better
+			// to use update().
+			this.readChar = function(char) {
+				if (typeof char != 'string'){
+					if (typeof char == 'number') {
+						char = String.fromCharCode(char)
+					}
+				}
+				char = char.toLowerCase()
+				var val = lookup()[char]
+				if (typeof val == 'undefined') {
+					// character does not exist in our lookup table
+					return // skip silently. An alternative would be:
+					// throw Error('Could not find character "' + char + '" in lookup table.')
+				}
+				val <<= 3 // move to the high bits
+				byte |= val >>> skip
+				skip += 5
+				if (skip >= 8) {
+					// we have enough to preduce output
+					this.output += String.fromCharCode(byte)
+					skip -= 8
+					if (skip > 0) byte = (val << (5 - skip)) & 255
+					else byte = 0
+				}
+
+			}
+
+			this.finish = function(check) {
+				var output = this.output + (skip < 0 ? alphabet[bits >> 3] : '') + (check ? '$' : '')
+				this.output = ''
+				return output
+			}
+		}
+
+		Decoder.prototype.update = function(input, flush) {
+			for (var i = 0; i < input.length; i++) {
+				this.readChar(input[i])
+			}
+			var output = this.output
+			this.output = ''
+			if (flush) {
+			  output += this.finish()
+			}
+			return output
+		}
+		
+		// Base32-encoded string goes in, decoded data comes out.
+		function decode(input) {
+			var decoder = new Decoder()
+			var output = decoder.update(input, true)
+			return output
+		}
+		
+		function base32length(secret) {
+			return decode(secret).length;
+		}
+
+		function saveOptions() {
+
+			var options = {};
+			
+			options.theme = parseInt($("input[name=theme]:checked").val(), 10);
+			
+			if ($("#keysecret").val()) {
+				options.label =  $("#keyname").val().substring(0,6);
+				options.secret = $("#keysecret").val().replace(/\s/g, '');
+			}
+
+			return options;
+		}
 
-      $().ready(function() {
-        $("#cancel").click(function() {
-          console.log("Cancel");
-          document.location = "pebblejs://close";
-        });
+		$().ready(function() {
+			$("#cancel").click(function() {
+			  console.log("Cancel");
+			  document.location = "pebblejs://close";
+			});
 
-        $("#save").click(function() {
-          console.log("Submit");
+			$("#save").click(function() {
+				console.log("Submit");
 
-          var location = "pebblejs://close#" + encodeURIComponent(JSON.stringify(saveOptions()));
-          console.log("Warping to: " + location);
-          console.log(location);
-          document.location = location;
-        });
-      });
+				var options = saveOptions();
+					  
+				if (options.secret && base32length(options.secret) < 10) {
+					alert("Secret key value is too short");
+				}
+				else if (options.secret && options.label.length === 0) {
+					alert("Please enter a label");
+				}
+				else {
+					var location = "pebblejs://close#" + encodeURIComponent(JSON.stringify(options));
+					console.log("Warping to: " + location);
+					console.log(location);
+					document.location = location;
+				}
+			});
+		});
     </script>
   </body>
 </html>
