diff --git a/index.html b/index.html
index 9cbe7a9..c12351e 100644
--- a/index.html
+++ b/index.html
@@ -51,7 +51,7 @@
                                                         <div class="panel-body">
                                                             <p>{{ item.source }}</p>
                                                             <div class="button-area">
-                                                                <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
+                                                                <button v-for="bundle_id in item.bundles" class="btn" v-bind:class="[user_data[item.id] ? btnChecked : btnUnchecked]" v-on:click="completeItem(item.id)"><span class="glyphicon" v-bind:class="[user_data[item.id] ? boxChecked : boxUnchecked]" ></span>{{ static.bundles[bundle_id].name }}</button>
                                                             </div>
                                                         </div>
                                                         <div class="panel-footer">
@@ -93,8 +93,18 @@
 
             <div role="tabpanel" class="tab-pane" id="ab-list">
                 <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <form class="form-inline">
+                                <div class="form-group">
+                                    <label for="search">Filter</label>
+                                    <input type="text" class="form-control" id="search" v-model="search_name" />
+                                </div>
+                            </form>
+                        </div>
+                    </div>
                     <div class="row row-eq-height">
-                        <template v-for="item in static.items | orderBy 'name'">
+                        <template v-for="item in static.items | orderBy 'name' | filterBy search_name in 'name'">
                             <div class="col-md-3">
                                 <div class="panel panel-default">
                                     <div class="panel-heading">
@@ -103,7 +113,7 @@
                                     <div class="panel-body">
                                         <p>{{ item.source }}</p>
                                         <div class="button-area">
-                                            <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
+                                            <button v-for="bundle_id in item.bundles" class="btn" v-bind:class="[user_data[item.id] ? btnChecked : btnUnchecked]" v-on:click="completeItem(item.id)"><span class="glyphicon" v-bind:class="[user_data[item.id] ? boxChecked : boxUnchecked]" ></span>{{ static.bundles[bundle_id].name }}</button>
                                         </div>
                                     </div>
                                     <div class="panel-footer">
@@ -157,7 +167,7 @@
                                                 <div class="panel-body">
                                                     <p>{{ item.source }}</p>
                                                     <div class="button-area">
-                                                        <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
+                                                        <button v-for="bundle_id in item.bundles" class="btn" v-bind:class="[user_data[item.id] ? btnChecked : btnUnchecked]" v-on:click="completeItem(item.id)"><span class="glyphicon" v-bind:class="[user_data[item.id] ? boxChecked : boxUnchecked]" ></span>{{ static.bundles[bundle_id].name }}</button>
                                                     </div>
                                                 </div>
                                                 <div class="panel-footer">
@@ -215,7 +225,7 @@
                                                 <div class="panel-body">
                                                     <p>{{ item.source }}</p>
                                                     <div class="button-area">
-                                                        <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
+                                                        <button v-for="bundle_id in item.bundles" class="btn" v-bind:class="[user_data[item.id] ? btnChecked : btnUnchecked]" v-on:click="completeItem(item.id)"><span class="glyphicon" v-bind:class="[user_data[item.id] ? boxChecked : boxUnchecked]" ></span>{{ static.bundles[bundle_id].name }}</button>
                                                     </div>
                                                 </div>
                                                 <div class="panel-footer">
diff --git a/main.css b/main.css
index b40e8c2..25add83 100644
--- a/main.css
+++ b/main.css
@@ -95,3 +95,7 @@
 .footer-text{
     flex-grow: 1;
 }
+
+form{
+    margin-bottom: 1rem;
+}
diff --git a/main.js b/main.js
index 53287e1..d7ef1f6 100644
--- a/main.js
+++ b/main.js
@@ -3,10 +3,16 @@ var v = new Vue({
     data:{
         debug: true,
         static: null,
-        user_data: []
+        user_data: [],
+        btnChecked: 'btn-success',
+        btnUnchecked: 'btn-warning',
+        boxChecked: 'glyphicon-check',
+        boxUnchecked: 'glyphicon-unchecked'
+    },
+    created: function(){
+        this.fetchData();
     },
     ready: function(){
-        this.fetchData();
         $('.list-group-item').on('click', function() {
             $('.glyphicon', this)
             .toggleClass('glyphicon-chevron-right')
@@ -18,8 +24,14 @@ var v = new Vue({
             this.$http.get('bundles.json', function(data, status, response){
                 if(status == 200){
                     this.static = data;
+                    for(var i = 0; i < this.static.items.length; i++){
+                        this.user_data.push(false);
+                    }
                 }
             });
+        },
+        completeItem: function(itemId){
+            this.user_data.$set(itemId, !this.user_data[itemId]);
         }
     }
 });