diff --git a/bundles.json b/bundles.json
index 6d13551..713a80d 100644
--- a/bundles.json
+++ b/bundles.json
@@ -4,258 +4,344 @@
       "id": 0,
       "name": "Wild Horseradish",
       "source": "Foraging during Spring.",
+      "seasons": ["spring"],
+      "skills": ["foraging"],
       "bundles": [0]
     },
     {
       "id": 1,
       "name": "Daffodil",
       "source": "Foraging during Spring. Buy from Pierre's Shop at the Flower Dance.",
+      "seasons": ["spring"],
+      "skills": ["foraging"],
       "bundles": [0]
     },
     {
       "id": 2,
       "name": "Leek",
       "source": "Foraging during Spring.",
+      "seasons": ["spring"],
+      "skills": ["foraging"],
       "bundles": [0]
     },
     {
       "id": 3,
       "name": "Dandelion",
       "source": "Foraging during Spring. Buy from Pierre's Shop at the Flower Dance.",
+      "seasons": ["spring"],
+      "skills": ["foraging"],
       "bundles": [0]
     },
     {
       "id": 4,
       "name": "Grape",
       "source": "Foraging during Summer.",
+      "seasons": ["summer", "fall"],
+      "skills": ["foraging", "farming"],
       "bundles": [1]
     },
     {
       "id": 5,
       "name": "Spice Berry",
       "source": "Foraging during Summer.",
+      "seasons": ["summer"],
+      "skills": ["foraging"],
       "bundles": [1]
     },
     {
       "id": 6,
       "name": "Sweet Pea",
       "source": "Foraging during Summer.",
+      "seasons": ["summer"],
+      "skills": ["foraging"],
       "bundles": [1]
     },
     {
       "id": 7,
       "name": "Common Mushroom",
       "source": "Foraging during Fall Or if you have the mushroom in your cave.",
+      "seasons": ["fall"],
+      "skills": ["foraging"],
       "bundles": [2]
     },
     {
       "id": 8,
       "name": "Wild Plum",
       "source": "Foraging during Fall.",
+      "seasons": ["fall"],
+      "skills": ["foraging"],
       "bundles": [2]
     },
     {
       "id": 9,
       "name": "Hazelnut",
       "source": "Foraging during Fall.",
+      "seasons": ["fall"],
+      "skills": ["foraging"],
       "bundles": [2]
     },
     {
       "id": 10,
       "name": "Blackberry",
       "source": "Foraging during Fall.",
+      "seasons": ["fall"],
+      "skills": ["foraging"],
       "bundles": [2]
     },
     {
       "id": 11,
       "name": "Winter Root",
       "source": "Foraging during Winter or dropped by slimes on 41-79 Mines levels.",
+      "seasons": ["winter", "spring", "summer", "fall"],
+      "skills": ["foraging", "combat"],
       "bundles": [3]
     },
     {
       "id": 12,
       "name": "Crystal Fruit",
       "source": "Foraging during Winter or dropped by coal sprites on 41-79 Mines levels.",
+      "seasons": ["winter", "spring", "summer", "fall"],
+      "skills": ["foraging", "combat"],
       "bundles": [3]
     },
     {
       "id": 13,
       "name": "Snow Yam",
       "source": "Foraging during Winter (Using a Hoe outside the farm).",
+      "seasons": ["winter"],
+      "skills": ["foraging"],
       "bundles": [3]
     },
     {
       "id": 14,
       "name": "Crocus",
       "source": "Foraging during Winter.",
+      "seasons": ["winter"],
+      "skills": ["foraging"],
       "bundles": [3]
     },
     {
       "id": 15,
       "name": "Wood (99)",
       "source": "Chopping trees or logs using an axe.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging"],
       "bundles": [4, 4]
     },
     {
       "id": 16,
       "name": "Stone (99)",
       "source": "Smashing stones with a pickaxe.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["mining"],
       "bundles": [4]
     },
     {
       "id": 17,
       "name": "Hardwood (10)",
       "source": "Chopping large stumps with an upgraded axe. Also in crates in the Mines",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging", "mining"],
       "bundles": [4]
     },
     {
       "id": 18,
       "name": "Coconut",
       "source": "Found in the desert.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging"],
       "bundles": [5]
     },
     {
       "id": 19,
       "name": "Cactus Fruit",
       "source": "Found in the desert.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging"],
       "bundles": [5]
     },
     {
       "id": 20,
       "name": "Cave Carrot",
       "source": "In boxes inside the mines or using the hoe on soil spots in the Mines.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["mining"],
       "bundles": [5]
     },
     {
       "id": 21,
       "name": "Red Mushroom",
       "source": "Can be found in the mines or in the farm cave if you selected the mushroom perk.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging", "mining"],
       "bundles": [5]
     },
     {
       "id": 22,
       "name": "Purple Mushroom",
       "source": "Can be found in the mines or in the farm cave if you selected the mushroom perk.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging", "mining"],
       "bundles": [5]
     },
     {
       "id": 23,
       "name": "Maple Syrup",
       "source": "Harvested from maple trees using a Tapper.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging"],
       "bundles": [5]
     },
     {
       "id": 24,
       "name": "Oak Resin",
       "source": "Harvested from oak trees using a Tapper.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging"],
       "bundles": [5]
     },
     {
       "id": 25,
       "name": "Pine Tar",
       "source": "Harvested from pine trees using a Tapper.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging"],
       "bundles": [5]
     },
     {
       "id": 26,
       "name": "Morel",
       "source": "In the farm cave if you selected the mushroom perk",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging"],
       "bundles": [5]
     },
     {
       "id": 26,
       "name": "Parsnip",
       "source": "Crops during Spring.",
+      "seasons": ["spring"],
+      "skills": ["farming"],
       "bundles": [6]
     },
     {
       "id": 28,
       "name": "Green Bean",
       "source": "Crops during Spring.",
+      "seasons": ["spring"],
+      "skills": ["farming"],
       "bundles": [6]
     },
     {
       "id": 29,
       "name": "Cauliflower",
       "source": "Crops during Spring.",
+      "seasons": ["spring"],
+      "skills": ["farming"],
       "bundles": [6]
     },
     {
       "id": 30,
       "name": "Potato",
       "source": "Crops during Spring.",
+      "seasons": ["spring"],
+      "skills": ["farming"],
       "bundles": [6]
     },
     {
       "id": 31,
       "name": "Tomato",
       "source": "Crops during Summer.",
+      "seasons": ["summer"],
+      "skills": ["farming"],
       "bundles": [7]
     },
     {
       "id": 32,
       "name": "Hot Pepper",
       "source": "Crops during Summer.",
+      "seasons": ["summer"],
+      "skills": ["farming"],
       "bundles": [7]
     },
     {
       "id": 33,
       "name": "Blueberry",
       "source": "Crops during Summer.",
+      "seasons": ["summer"],
+      "skills": ["farming"],
       "bundles": [7]
     },
     {
       "id": 34,
       "name": "Melon",
       "source": "Crops during Summer.",
+      "seasons": ["summer"],
+      "skills": ["farming"],
       "bundles": [7]
     },
     {
       "id": 35,
       "name": "Corn",
       "source": "Crops during Summer and Fall.",
+      "seasons": ["summer", "fall"],
+      "skills": ["farming"],
       "bundles": [8]
     },
     {
       "id": 36,
       "name": "Eggplant",
       "source": "Crops during Fall.",
+      "seasons": ["fall"],
+      "skills": ["farming"],
       "bundles": [8]
     },
     {
       "id": 37,
       "name": "Pumpkin",
       "source": "Crops during Fall.",
+      "seasons": ["fall"],
+      "skills": ["farming"],
       "bundles": [8]
     },
     {
       "id": 38,
       "name": "Yam",
       "source": "Crops during Fall.",
+      "seasons": ["fall"],
+      "skills": ["farming"],
       "bundles": [8]
     },
     {
       "id": 39,
       "name": "Parsnip (Gold Star) (5)",
       "source": "Crops during Spring.",
+      "seasons": ["spring"],
+      "skills": ["farming"],
       "bundles": [9]
     },
     {
       "id": 40,
       "name": "Melon (Gold Star) (5)",
       "source": "Crops during Summer.",
+      "seasons": ["summer"],
+      "skills": ["farming"],
       "bundles": [9]
     },
     {
       "id": 41,
       "name": "Pumpkin (Gold Star) (5)",
       "source": "Crops during Fall.",
+      "seasons": ["fall"],
+      "skills": ["farming"],
       "bundles": [9]
     },
     {
       "id": 42,
       "name": "Corn (Gold Star) (5)",
       "source": "Crops during Summer and Fall.",
+      "seasons": ["summer", "fall"],
+      "skills": ["farming"],
       "bundles": [9]
     }
   ],
diff --git a/index.html b/index.html
index 8105a31..c12351e 100644
--- a/index.html
+++ b/index.html
@@ -10,12 +10,11 @@
 <div class="container">
     <h1>Stardew Valley Community Center Checklist</h1>
     <ul class="nav nav-tabs" role="tablist">
-        <li role="presentation" class="active"><a href="#bundles" aria-controls="bundles" role="tab" data-toggle="tab">Bundles</a>
-        </li>
-        <li role="presentation"><a href="#ab-list" aria-controls="ab-list" role="tab" data-toggle="tab">Alphabetical
-            List</a></li>
+        <li role="presentation" class="active"><a href="#bundles" aria-controls="bundles" role="tab" data-toggle="tab">By Bundle</a></li>
+        <li role="presentation"><a href="#ab-list" aria-controls="ab-list" role="tab" data-toggle="tab">Alphabetical List</a></li>
+        <li role="presentation"><a href="#season-list" aria-controls="season-list" role="tab" data-toggle="tab">By Season</a></li>
+        <li role="presentation"><a href="#skill-list" aria-controls="skill-list" role="tab" data-toggle="tab">By Skill</a></li>
         <li role="presentation"><a href="#about" aria-controls="about" role="tab" data-toggle="tab">About</a></li>
-
     </ul>
     <div id="app">
         <div class="just-padding tab-content">
@@ -32,21 +31,56 @@
 
                             <template v-for="bundle in static.bundles | filterBy room.id in 'room'">
                                 <a href="#bundle-{{ bundle.id }}" class="list-group-item" data-toggle="collapse">
-                                    <div class="checkbox"><i class="glyphicon glyphicon-chevron-right"></i><label><input
-                                            type="checkbox"/>{{ bundle.name }}</label></div>
+                                    <div class="checkbox">
+                                        <i class="glyphicon glyphicon-chevron-right"></i>
+                                        <label>
+                                            <input type="checkbox"/>
+                                            {{ bundle.name }}
+                                        </label>
+                                    </div>
                                 </a>
                                 <div class="list-group collapse" id="bundle-{{ bundle.id }}">
-                                    <template v-for="item in static.items | filterBy bundle.id in 'bundles'">
-                                        <a class="list-group-item">
-                                            <div class="checkbox"><label>
-                                                <template v-for="bundle in item.bundles"><input type="checkbox"
-                                                                                                v-model="user_data"
-                                                                                                id="{{ item.id }}"
-                                                                                                value="{{ item.id }}"/>
-                                                </template>
-                                                {{ item.name }} — {{ item.source }}</label></div>
-                                        </a>
-                                    </template>
+                                    <div class="container-fluid">
+                                        <div class="row row-eq-height">
+                                            <template v-for="item in static.items | filterBy bundle.id in 'bundles'">
+                                                <div class="col-md-3">
+                                                    <div class="panel panel-default">
+                                                        <div class="panel-heading">
+                                                            <h3 class="panel-title">{{ item.name }}</h3>
+                                                        </div>
+                                                        <div class="panel-body">
+                                                            <p>{{ item.source }}</p>
+                                                            <div class="button-area">
+                                                                <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">
+                                                            <div class="panel-footer-area">
+                                                                <span class="glyphicon glyphicon-calendar"></span>
+                                                                <span class="footer-text-area">
+                                                                    <template v-for="season_id in item.seasons">
+                                                                        <template v-for="season in static.seasons | filterBy season_id in 'id'">
+                                                                            <span class="footer-text">{{ season.name }}</span>
+                                                                        </template>
+                                                                    </template>
+                                                                </span>
+                                                            </div>
+                                                            <div class="panel-footer-area">
+                                                                <span class="glyphicon glyphicon-grain"></span>
+                                                                <div class="footer-text-area">
+                                                                    <template v-for="skill_id in item.skills">
+                                                                        <template v-for="skill in static.skills | filterBy skill_id in 'id'">
+                                                                            <div class="footer-text">{{ skill.name }}</div>
+                                                                        </template>
+                                                                    </template>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </template>
+                                        </div>
+                                    </div>
                                 </div>
 
                             </template>
@@ -58,14 +92,172 @@
             </div>
 
             <div role="tabpanel" class="tab-pane" id="ab-list">
-                <div class="list-group">
-                    <template v-for="item in static.items | orderBy 'name'">
-                        <a class="list-group-item">
-                            <div class="checkbox"><label><input type="checkbox" v-model="user_data" id="{{ item.id }}"
-                                                                value="{{ item.id }}"/>{{ item.name }} — {{ item.source
-                                }}</label></div>
+                <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' | filterBy search_name in 'name'">
+                            <div class="col-md-3">
+                                <div class="panel panel-default">
+                                    <div class="panel-heading">
+                                        <h3 class="panel-title">{{ item.name }}</h3>
+                                    </div>
+                                    <div class="panel-body">
+                                        <p>{{ item.source }}</p>
+                                        <div class="button-area">
+                                            <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">
+                                        <div class="panel-footer-area">
+                                            <span class="glyphicon glyphicon-calendar"></span>
+                                                                <span class="footer-text-area">
+                                                                    <template v-for="season_id in item.seasons">
+                                                                        <template v-for="season in static.seasons | filterBy season_id in 'id'">
+                                                                            <span class="footer-text">{{ season.name }}</span>
+                                                                        </template>
+                                                                    </template>
+                                                                </span>
+                                        </div>
+                                        <div class="panel-footer-area">
+                                            <span class="glyphicon glyphicon-grain"></span>
+                                            <div class="footer-text-area">
+                                                <template v-for="skill_id in item.skills">
+                                                    <template v-for="skill in static.skills | filterBy skill_id in 'id'">
+                                                        <div class="footer-text">{{ skill.name }}</div>
+                                                    </template>
+                                                </template>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+
+            <div role="tabpanel" class="tab-pane" id="season-list">
+                <div class="list-group list-group-root well">
+
+                    <template v-for="season in static.seasons">
+                        <a href="#season-{{ season.id }}" class="list-group-item" data-toggle="collapse">
+                            <div class="checkbox">
+                                <i class="glyphicon glyphicon-chevron-right"></i>
+                                <label><input type="checkbox"/>{{ season.name }}</label>
+                            </div>
                         </a>
+                        <div class="list-group collapse" id="season-{{ season.id }}">
+                            <div class="container-fluid">
+                                <div class="row row-eq-height">
+                                    <template v-for="item in static.items | filterBy season.id in 'seasons'">
+                                        <div class="col-md-3">
+                                            <div class="panel panel-default">
+                                                <div class="panel-heading">
+                                                    <h3 class="panel-title">{{ item.name }}</h3>
+                                                </div>
+                                                <div class="panel-body">
+                                                    <p>{{ item.source }}</p>
+                                                    <div class="button-area">
+                                                        <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">
+                                                    <div class="panel-footer-area">
+                                                        <span class="glyphicon glyphicon-calendar"></span>
+                                                                <span class="footer-text-area">
+                                                                    <template v-for="season_id in item.seasons">
+                                                                        <template v-for="season in static.seasons | filterBy season_id in 'id'">
+                                                                            <span class="footer-text">{{ season.name }}</span>
+                                                                        </template>
+                                                                    </template>
+                                                                </span>
+                                                    </div>
+                                                    <div class="panel-footer-area">
+                                                        <span class="glyphicon glyphicon-grain"></span>
+                                                        <div class="footer-text-area">
+                                                            <template v-for="skill_id in item.skills">
+                                                                <template v-for="skill in static.skills | filterBy skill_id in 'id'">
+                                                                    <div class="footer-text">{{ skill.name }}</div>
+                                                                </template>
+                                                            </template>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </template>
+                                </div>
+                            </div>
+                        </div>
                     </template>
+
+                </div>
+            </div>
+
+            <div role="tabpanel" class="tab-pane" id="skill-list">
+                <div class="list-group list-group-root well">
+
+                    <template v-for="skill in static.skills">
+                        <a href="#skill-{{ skill.id }}" class="list-group-item" data-toggle="collapse">
+                            <div class="checkbox">
+                                <i class="glyphicon glyphicon-chevron-right"></i>
+                                <label><input type="checkbox"/>{{ skill.name }}</label>
+                            </div>
+                        </a>
+                        <div class="list-group collapse" id="skill-{{ skill.id }}">
+                            <div class="container-fluid">
+                                <div class="row row-eq-height">
+                                    <template v-for="item in static.items | filterBy skill.id in 'skills'">
+                                        <div class="col-md-3">
+                                            <div class="panel panel-default">
+                                                <div class="panel-heading">
+                                                    <h3 class="panel-title">{{ item.name }}</h3>
+                                                </div>
+                                                <div class="panel-body">
+                                                    <p>{{ item.source }}</p>
+                                                    <div class="button-area">
+                                                        <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">
+                                                    <div class="panel-footer-area">
+                                                        <span class="glyphicon glyphicon-calendar"></span>
+                                                                <span class="footer-text-area">
+                                                                    <template v-for="season_id in item.seasons">
+                                                                        <template v-for="season in static.seasons | filterBy season_id in 'id'">
+                                                                            <span class="footer-text">{{ season.name }}</span>
+                                                                        </template>
+                                                                    </template>
+                                                                </span>
+                                                    </div>
+                                                    <div class="panel-footer-area">
+                                                        <span class="glyphicon glyphicon-grain"></span>
+                                                        <div class="footer-text-area">
+                                                            <template v-for="skill_id in item.skills">
+                                                                <template v-for="skill in static.skills | filterBy skill_id in 'id'">
+                                                                    <div class="footer-text">{{ skill.name }}</div>
+                                                                </template>
+                                                            </template>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </template>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+
                 </div>
             </div>
 
diff --git a/main.css b/main.css
index 00850cb..25add83 100644
--- a/main.css
+++ b/main.css
@@ -31,3 +31,71 @@
 .list-group-item .glyphicon {
     margin-right: 5px;
 }
+
+.row-eq-height, .row-eq-height > div[class*='col-']{
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    flex: 1 0 auto;
+    flex-wrap: wrap;
+}
+
+.panel {
+   display: flex;
+   flex-direction:column;
+   align-content:stretch;
+    flex-grow: 1;
+}
+
+.panel-body{
+    display:         flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.panel-body > p{
+    flex-grow: 1;
+}
+
+.panel-body > .button-area{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.button-area > .btn{
+    flex: 1 0 auto;
+    margin-top: 1rem;
+}
+
+.panel-footer{
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+}
+
+.panel-footer-area{
+    display: flex;
+    flex-direction: row;
+    flex: 1 0 auto;
+    justify-content: space-around;
+}
+
+.footer-text-area{
+    margin-left: 1rem;
+    flex: 1 0 auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.footer-text{
+    flex-grow: 1;
+}
+
+form{
+    margin-bottom: 1rem;
+}
diff --git a/main.js b/main.js
index 9012a46..d7ef1f6 100644
--- a/main.js
+++ b/main.js
@@ -3,28 +3,35 @@ 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')
+            .toggleClass('glyphicon-chevron-down');
+        });
     },
     methods: {
         fetchData: function(){
             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]);
         }
     }
 });
-
-$(function() {
-
-  $('.list-group-item').on('click', function() {
-    $('.glyphicon', this)
-      .toggleClass('glyphicon-chevron-right')
-      .toggleClass('glyphicon-chevron-down');
-  });
-
-});