diff --git a/Gruntfile.js b/Gruntfile.js
index 1493cb1a..fce2d4c2 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,8 +1,10 @@
+'use strict';
+
 module.exports = function(grunt) {
 
   var bower = grunt.file.readJSON('bower.json');
   var components = [];
-  for (i in bower.concat.app) {
+  for (var i in bower.concat.app) {
     components.push('components/' + bower.concat.app[i] + '/**/*.js');
   }
 
diff --git a/bower.json b/bower.json
index 7d11cd87..de74b23b 100644
--- a/bower.json
+++ b/bower.json
@@ -11,24 +11,52 @@
     "protobuf": "~3.8.0",
     "bootstrap": "~3.3.0",
     "mustache": "~0.8.2",
-    "qrcode": "git://github.com/davidshimjs/qrcodejs.git"
+    "qrcode": "git://github.com/davidshimjs/qrcodejs.git",
+    "bootstrap-tagsinput": "~0.4.2"
   },
   "devDependencies": {
     "mocha": "~2.0.1",
     "chai": "~1.9.2"
   },
   "preen": {
-    "jquery"     : [ "dist/jquery.js"         ],
-    "long"       : [ "dist/Long.js"           ],
-    "bytebuffer" : [ "dist/ByteBufferAB.js"   ],
-    "protobuf"   : [ "dist/ProtoBuf.js"       ],
-    "mustache"   : [ "mustache.js"            ],
-    "underscore" : [ "underscore.js"          ],
-    "backbone"   : [ "backbone.js"            ],
-    "qrcode"     : [ "qrcode.js"              ],
-    "mocha"      : [ "mocha.js", "mocha.css"  ],
-    "chai"       : [ "chai.js"                ],
-    "bootstrap"  : [ "dist/css/bootstrap.css" ]
+    "jquery": [
+      "dist/jquery.js"
+    ],
+    "long": [
+      "dist/Long.js"
+    ],
+    "bytebuffer": [
+      "dist/ByteBufferAB.js"
+    ],
+    "protobuf": [
+      "dist/ProtoBuf.js"
+    ],
+    "mustache": [
+      "mustache.js"
+    ],
+    "underscore": [
+      "underscore.js"
+    ],
+    "backbone": [
+      "backbone.js"
+    ],
+    "qrcode": [
+      "qrcode.js"
+    ],
+    "mocha": [
+      "mocha.js",
+      "mocha.css"
+    ],
+    "chai": [
+      "chai.js"
+    ],
+    "bootstrap": [
+      "dist/css/bootstrap.css"
+    ],
+    "bootstrap-tagsinput": [
+      "dist/bootstrap-tagsinput.js",
+      "dist/bootstrap-tagsinput.css"
+    ]
   },
   "concat": {
     "app": [
diff --git a/stylesheets/bootstrap-tagsinput.css b/components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css
similarity index 89%
rename from stylesheets/bootstrap-tagsinput.css
rename to components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css
index 05f19a1f..55f7c09d 100644
--- a/stylesheets/bootstrap-tagsinput.css
+++ b/components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css
@@ -29,12 +29,6 @@
 .bootstrap-tagsinput .tag {
   margin-right: 2px;
   color: white;
-  background-color: #00badd;
-  padding: 2px 5px;
-  border-radius: 2px;
-}
-.bootstrap-tagsinput .tag.error {
-  background-color: #ccc;
 }
 .bootstrap-tagsinput .tag [data-role="remove"] {
   margin-left: 8px;
diff --git a/js-deps/bootstrap-tagsinput.js b/components/bootstrap-tagsinput/dist/bootstrap-tagsinput.js
similarity index 99%
rename from js-deps/bootstrap-tagsinput.js
rename to components/bootstrap-tagsinput/dist/bootstrap-tagsinput.js
index 7199a46e..515ac37f 100644
--- a/js-deps/bootstrap-tagsinput.js
+++ b/components/bootstrap-tagsinput/dist/bootstrap-tagsinput.js
@@ -95,14 +95,6 @@
         }
       }
 
-      // raise beforeItemAdd arg
-      var beforeItemAddEvent = $.Event('beforeItemAdd', { item: item, cancel: false });
-      self.$element.trigger(beforeItemAddEvent);
-      if (beforeItemAddEvent.cancel)
-        return;
-
-      item = beforeItemAddEvent.item
-
       var itemValue = self.options.itemValue(item),
           itemText = self.options.itemText(item),
           tagClass = self.options.tagClass(item);
@@ -122,6 +114,12 @@
       if (self.items().toString().length + item.length + 1 > self.options.maxInputLength)
         return;
 
+      // raise beforeItemAdd arg
+      var beforeItemAddEvent = $.Event('beforeItemAdd', { item: item, cancel: false });
+      self.$element.trigger(beforeItemAddEvent);
+      if (beforeItemAddEvent.cancel)
+        return;
+
       // register item in internal array and map
       self.itemsArray.push(item);
 
diff --git a/index.html b/index.html
index ceb214cb..d3778270 100644
--- a/index.html
+++ b/index.html
@@ -12,8 +12,8 @@
         <link href='/favicon.ico' rel='shortcut icon'>
         <link href="/stylesheets/normalize.css" rel="stylesheet" type="text/css" />
         <link href="/stylesheets/manifest.css" rel="stylesheet" type="text/css" />
+        <link href="/components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet" type="text/css" />
         <link href="/stylesheets/index.css" rel="stylesheet" type="text/css" />
-        <link href="/stylesheets/bootstrap-tagsinput.css" rel="stylesheet" type="text/css" />
     </head>
     <body class='signal index' data-name="curve25519" data-tools="pnacl" data-configs="Debug Release" data-path="nacl/pnacl/{config}">
         <div class='title-bar' id='header'>
@@ -128,7 +128,7 @@
         <script type="text/javascript" src="js/components.js"></script>
         <script type="text/javascript" src="js-deps/backbone.localStorage.js"></script>
         <script type="text/javascript" src="js-deps/libphonenumber_api-compiled.js"></script>
-        <script type="text/javascript" src="js-deps/bootstrap-tagsinput.js"></script>
+        <script type="text/javascript" src="components/bootstrap-tagsinput/dist/bootstrap-tagsinput.js"></script>
 
         <script type="text/javascript" src="js/protobufs.js"></script>
         <script type="text/javascript" src="js/helpers.js"></script>
diff --git a/stylesheets/index.css b/stylesheets/index.css
index 8327a2bd..c0ac7fe7 100644
--- a/stylesheets/index.css
+++ b/stylesheets/index.css
@@ -70,3 +70,9 @@ li.entry img {
   width: 30px;
   height: 30px;
 }
+
+.bootstrap-tagsinput .tag {
+  background-color: #00badd;
+  padding: 5px;
+  border-radius: 3px;
+}