diff --git a/index.html b/index.html
index 821b955..9775333 100644
--- a/index.html
+++ b/index.html
@@ -19,8 +19,7 @@
         color: inherit;
         background: transparent;
       }
-      /*pass window height (w/o scroll bars) down to react app, note can't use vh because that
-      includes scroll bars and mobile browser footer, etc so doesn't give viewable area*/
+      /*pass window height (w/o scroll bars) down to react app, note can't use vh because that includes scroll bars and mobile browser footer, etc so doesn't give viewable area*/
       html, body { height: 100%; }
       html { background-color:#494949; }
       #root { min-height: 100%; }
diff --git a/src/components/collection/Search.js b/src/components/collection/Search.js
index ce52b57..a9b7e53 100644
--- a/src/components/collection/Search.js
+++ b/src/components/collection/Search.js
@@ -3,6 +3,7 @@ import API from '../SpreadsheetData';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
 import loki from 'lokijs';
+import Collapsible from 'react-collapsible';
 
 @inject((stores, props, context) => props) @observer
 export default class SearchForm extends React.Component {
@@ -101,7 +102,6 @@ export default class SearchForm extends React.Component {
           <br />
           <label>Text: <input type="text" ref={(input) => this.stones.text = input} /></label>
           <br />
-          {card_types}
           <div>
             <label>Subtypes | Initiative:<br />
               <input type="text" ref={(input) => this.stones.subtypes = input} />
@@ -110,15 +110,7 @@ export default class SearchForm extends React.Component {
             <label><input type="checkbox" ref={(input) => this.stones.mirage = input}/>Mirage</label>
           </div>
           <br />
-          <div>{setsInput}</div>
-          <br />
-          {card_rarity}
-          <br />
-          <div>
-            <label><input type="checkbox" ref={(input) => this.stones.unique = input}/>Unique</label>&nbsp;
-            <label><input type="checkbox" ref={(input) => this.stones.loyal = input}/>Loyal</label>&nbsp;
-            <label><input type="checkbox" ref={(input) => this.stones.legendary = input}/>Legendary</label>
-          </div>
+          {card_types}
           <br />
           {card_tribes}
           <br />
@@ -127,29 +119,31 @@ export default class SearchForm extends React.Component {
           {card_disciplines}
           <br />
           <div>
-          <span>Energy</span>&nbsp;
+            <span>Energy</span><br />
             <label>Min: <input type="text" style={{width: '30px'}} ref={(input) => this.energy.min = input} /></label>&nbsp;
             <label>Max: <input type="text" style={{width: '30px'}} ref={(input) => this.energy.max = input} /></label>
           </div>
           <br />
           <div>
-            <span>Mugic Counters/Cost</span>&nbsp;
-            <label>Min: <input type="text" style={{width: '20px'}} ref={(input) => this.mc.min = input} /></label>&nbsp;
-            <label>Max: <input type="text" style={{width: '20px'}} ref={(input) => this.mc.max = input} /></label>
+            <span>Mugic Counters/Cost | Build Points</span><br />
+            <label>Min: <input type="text" style={{width: '30px'}} ref={(input) => this.mc.min = input} /></label>&nbsp;
+            <label>Max: <input type="text" style={{width: '30px'}} ref={(input) => this.mc.max = input} /></label>
           </div>
           <br />
           <div>
-            <span>Build Points</span>&nbsp;
-            <label>Min: <input type="text" style={{width: '20px'}} ref={(input) => this.bp.min = input} /></label>&nbsp;
-            <label>Max: <input type="text" style={{width: '20px'}} ref={(input) => this.bp.max = input} /></label>
+            <label><input type="checkbox" ref={(input) => this.stones.unique = input}/>Unique</label>&nbsp;
+            <label><input type="checkbox" ref={(input) => this.stones.loyal = input}/>Loyal</label>&nbsp;
+            <label><input type="checkbox" ref={(input) => this.stones.mixed = input}/>Mixed</label>&nbsp;
+            <label><input type="checkbox" ref={(input) => this.stones.legendary = input}/>Legendary</label>
           </div>
           <br />
-          <div>
-            <span>Gender (fan content):</span><br />
+          <Collapsible trigger="Rarity">{card_rarity}</Collapsible>
+          <Collapsible trigger="Sets">{setsInput}</Collapsible>
+          <Collapsible trigger="Gender (fan content)">
             <label><input type="checkbox" ref={(input) => this.gender.Ambiguous = input}/>Ambiguous</label>&nbsp;
             <label><input type="checkbox" ref={(input) => this.gender.Female = input}/>Female</label>&nbsp;
             <label><input type="checkbox" ref={(input) => this.gender.Male = input}/>Male</label>
-          </div>
+          </Collapsible>
           <br />
           <input type="submit" value="Search" />&nbsp;&nbsp;
           <input type="button" value="Reset" disabled onClick={this.reset()} />
@@ -329,16 +323,17 @@ export default class SearchForm extends React.Component {
     }
 
     if (this.mc.min.value !== "" && this.mc.min.value >= 0) {
+      attackResults = attackResults.find({'gsx$bp': {'$gte': this.mc.min.value}});
       creatureResults = creatureResults.find({'gsx$mugicability': {'$gte': this.mc.min.value}});
       mugicResults = mugicResults.find({'gsx$cost': {'$gte': this.mc.min.value}});
     }
     if (this.mc.max.value !== "" && this.mc.max.value >= 0 && this.mc.max.value >= this.mc.min.value) {
+      attackResults = attackResults.find({'gsx$bp': {'$lte': this.mc.max.value}});
       creatureResults = creatureResults.find({'gsx$mugicability': {'$lte': this.mc.max.value}});
       mugicResults = mugicResults.find({'gsx$cost': {'$lte': this.mc.max.value}});
     }
 
     if (this.mc.max.value !== "" || this.mc.min.value !== "") {
-      attackResults = attackResults.limit(0);
       battlegearResults = battlegearResults.limit(0);
       locationResults = locationResults.limit(0);
     }
@@ -370,21 +365,6 @@ export default class SearchForm extends React.Component {
       mugicResults = mugicResults.limit(0);
     }
 
-    if (this.bp.min.value !== "" && this.bp.min.value >= 0) {
-      attackResults = attackResults.find({'gsx$bp': {'$gte': this.bp.min.value}});
-    }
-    if (this.bp.max.value !== "" && this.bp.max.value >= 0 && this.bp.max.value >= this.bp.min.value) {
-      attackResults = attackResults.find({'gsx$bp': {'$lte': this.bp.max.value}});
-    }
-
-
-    if (this.bp.min.value !== "" || this.bp.max.value !== "") {
-      battlegearResults = battlegearResults.limit(0);
-      creatureResults = creatureResults.limit(0);
-      locationResults = locationResults.limit(0);
-      mugicResults = mugicResults.limit(0);
-    }
-
     if (this.stones.unique.checked) {
       attackResults = attackResults.find({'gsx$unique': {'$gt': 0}});
       battlegearResults = battlegearResults.find({'gsx$unique': {'$gt': 0}});
@@ -400,6 +380,10 @@ export default class SearchForm extends React.Component {
       mugicResults = mugicResults.find({'gsx$loyal': {'$gt': 0}});
     }
 
+    if (this.stones.mixed.checked) {
+      creatureResults = creatureResults.find({'gsx$loyal': {'$lte': 0}});
+    }
+
     if (this.stones.legendary.checked) {
       attackResults = attackResults.find({'gsx$legendary': {'$gt': 0}});
       battlegearResults = battlegearResults.find({'gsx$legendary': {'$gt': 0}});
diff --git a/src/css/collection.css b/src/css/collection.css
index 54f16bb..f17b6a0 100644
--- a/src/css/collection.css
+++ b/src/css/collection.css
@@ -111,3 +111,20 @@
     width: 100px;
     height: 98px;
 }
+
+.Collapsible {
+    margin-bottom: 10px;
+}
+
+.Collapsible__trigger {
+    background-color: #333;
+    width: 250px;
+    display: inline-block;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    text-indent: 5px;
+}
+
+.Collapsible__trigger:hover {
+    background-color: red;
+}