diff --git a/index.html b/index.html
index 58f0abe..eb3f5b0 100644
--- a/index.html
+++ b/index.html
@@ -113,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">
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]);
         }
     }
 });