diff --git a/src/components/CollectionDB.js b/src/components/CollectionDB.js
new file mode 100644
index 0000000..8ab24be
--- /dev/null
+++ b/src/components/CollectionDB.js
@@ -0,0 +1,86 @@
+import loki from 'lokijs';
+import {observable, autorun} from "mobx";
+
+export default class CollectionDB {
+  @observable built = []; // Keeps track of what collections have been populated
+
+  constructor(API) {
+    this.api = API;
+    // ignoring persistence for now
+    // this.setupDB();
+    //autorun(() => console.log(this.creatures));
+    let db = new loki("chaotic_portal.db");
+    this.attacks = db.addCollection('attacks');
+    this.battlegear = db.addCollection('battlegear');
+    this.creatures = db.addCollection('creatures');
+    this.locations = db.addCollection('locations');
+    this.mugic = db.addCollection('mugic');
+    this.db = db;
+  }
+
+  // setupDB() {
+  //   var self = this;
+  //   let db = new loki("chaotic_portal.db", { autosave: true, autoload: true, autoloadCallback: databaseInitialize, autosaveInterval: 4000, persistenceMethod: 'localStorage' });
+  //   this.db = db;
+
+  //   let databaseInitialize = () => {
+  //     var entries;
+  //     if ((entries = db.getCollection("attacks")) === null)
+  //       entries = db.addCollection("attacks");
+  //     self.attacks = entries;
+
+  //     if ((entries = db.getCollection("battlegear")) === null)
+  //       entries = db.addCollection("battlegear");
+  //     self.battlegear = entries;
+
+  //     console.log(db.getCollection("creatures"));
+  //     if ((entries = db.getCollection("creatures")) === null)
+  //       entries = db.addCollection("creatures");
+  //     self.creatures = db.addCollection('creatures');
+
+  //     if ((entries = db.getCollection("locations")) === null)
+  //       entries = db.addCollection("locations");
+  //     self.locations = entries
+
+  //     if ((entries = db.getCollection("mugic")) === null)
+  //       entries = db.addCollection("mugic");
+  //     self.mugic = entries;
+  //   };
+  // }
+
+  setup(spreadsheet, callback) {
+    this.api.getSpreadsheet(spreadsheet, (data) => {
+      callback(data.map((item) => {
+        let temp = {};
+        delete item.content;
+        for (const key of Object.keys(item)) {
+          temp[key] = item[key].$t;
+        }
+        return temp;
+      }));
+    });
+  }
+
+  setupAttacks() {
+
+  }
+
+  setupBattleGear() {
+
+  }
+
+  setupCreatures(tribe="Generic") {
+    this.setup(this.api.urls.Creatures[tribe], (data) => {
+      this.creatures.insert(data);
+      this.built.push("creatures_"+tribe);
+    });
+  }
+
+  setupLocations() {
+
+  }
+
+  setupMugic(tribe) {
+
+  }
+}
diff --git a/src/components/SpreadsheetData.js b/src/components/SpreadsheetData.js
index 2eec047..eebf412 100644
--- a/src/components/SpreadsheetData.js
+++ b/src/components/SpreadsheetData.js
@@ -1,13 +1,12 @@
 import 'whatwg-fetch';
-import CardsDB from './database/cards';
-import PortalDB from './database/portal';
+import CollectionDB from './CollectionDB';
 import {observable} from "mobx";
 
 class API {
   @observable portal = null;
   @observable cards = null;
   @observable urls = null;
-  @observable instance = null;
+  instance = null;
 
   static base_url = "https://spreadsheets.google.com/feeds/list/";
   static data_format = "/od6/public/values?alt=json";
@@ -54,8 +53,8 @@ class API {
 
   setupDB() {
     try {
-      this.portal = new PortalDB(this);
-      this.cards = new CardsDB(this);
+      this.portal = new CollectionDB(this, "portal");
+      this.cards = new CollectionDB(this, "cards");
     }
     catch (err) {
       console.log('setting up database failed', err);
diff --git a/src/components/database/cards.js b/src/components/database/cards.js
deleted file mode 100644
index 42425ae..0000000
--- a/src/components/database/cards.js
+++ /dev/null
@@ -1,35 +0,0 @@
-export default class CardsDB {
-    constructor(API) {
-        // this.api = API;
-        // this.attacks = db.addCollection('attacks');
-        // this.battlegear = db.addCollection('battlegear');
-        // this.creatures = db.addCollection('creatures');
-        // this.locations = db.addCollection('locations');
-        // this.mugic = db.addCollection('mugic');
-        // this.db = db;
-    }
-
-    setupCreatures(spreadsheet) {
-      this.getSpreadsheet(spreadsheet, function(json) {
-
-      });
-    }
-
-    setupMugic(spreadsheet) {
-      this.getSpreadsheet(spreadsheet, function(json) {
-
-      });
-    }
-
-    setupBattleGear(spreadsheet) {
-      this.getSpreadsheet(spreadsheet, function(json) {
-
-      });
-    }
-
-    setupLocations(spreadsheet) {
-      this.getSpreadsheet(spreadsheet, function(json) {
-
-      });
-    }
-}
diff --git a/src/components/database/portal.js b/src/components/database/portal.js
deleted file mode 100644
index 5ec5142..0000000
--- a/src/components/database/portal.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import loki from 'lokijs';
-import {observable, autorun} from "mobx";
-
-export default class PortalDB {
-  @observable built = []; // Keeps track of what collections have been populated
-
-  constructor(API) {
-    this.api = API;
-    // ignoring persistence for now
-    // this.setupDB();
-    //autorun(() => console.log(this.creatures));
-    let db = new loki("chaotic_portal.db");
-    this.attacks = db.addCollection('attacks');
-    this.battlegear = db.addCollection('battlegear');
-    this.creatures = db.addCollection('creatures');
-    this.locations = db.addCollection('locations');
-    this.mugic = db.addCollection('mugic');
-    this.db = db;
-  }
-
-  setupDB() {
-    var self = this;
-    let db = new loki("chaotic_portal.db", { autosave: true, autoload: true, autoloadCallback: databaseInitialize, autosaveInterval: 4000, persistenceMethod: 'localStorage' });
-    this.db = db;
-
-    let databaseInitialize = () => {
-      var entries;
-      if ((entries = db.getCollection("attacks")) === null)
-        entries = db.addCollection("attacks");
-      self.attacks = entries;
-
-      if ((entries = db.getCollection("battlegear")) === null)
-        entries = db.addCollection("battlegear");
-      self.battlegear = entries;
-
-      console.log(db.getCollection("creatures"));
-      if ((entries = db.getCollection("creatures")) === null)
-        entries = db.addCollection("creatures");
-      self.creatures = db.addCollection('creatures');
-
-      if ((entries = db.getCollection("locations")) === null)
-        entries = db.addCollection("locations");
-      self.locations = entries
-
-      if ((entries = db.getCollection("mugic")) === null)
-        entries = db.addCollection("mugic");
-      self.mugic = entries;
-    };
-  }
-
-  setup(spreadsheet, callback) {
-    this.api.getSpreadsheet(spreadsheet, (data) => {
-      callback(data.map((item) => {
-        let temp = {};
-        delete item.content;
-        for (const key of Object.keys(item)) {
-          temp[key] = item[key].$t;
-        }
-        return temp;
-      }));
-    });
-  }
-
-  setupAttacks() {
-
-  }
-
-  setupBattleGear() {
-
-  }
-
-  setupCreatures(tribe) {
-    this.setup(this.api.urls.Creatures[tribe], (data) => {
-      this.creatures.insert(data);
-      this.built.push("creatures_"+tribe);
-    });
-  }
-
-  setupLocations() {
-
-  }
-
-  setupMugic(tribe) {
-
-  }
-}
diff --git a/src/components/portal/Category/Creatures.js b/src/components/portal/Category/Creatures.js
index f51e104..b7ea23e 100644
--- a/src/components/portal/Category/Creatures.js
+++ b/src/components/portal/Category/Creatures.js
@@ -4,54 +4,20 @@ import { Link } from 'react-router';
 import PageNotFound from '../../PageNotFound';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
+import UnderConstruction from '../../UnderConstruction';
 
 export default class Creatures extends React.Component {
 
-  constructor(props) {
-    super (props);
-    this.state = {tribe: '', creatures: {}};
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.getData(nextProps);
-  }
-
-  componentDidMount() {
-    this.getData(this.props);
-  }
-
-  // ** Process the tribe ** //
-  // /portal/Creatures/
-  // /portal/{Tribe}/Creatures/
-  // The first / gets counted
-  getData(props) {
-    if (props.children) return this.props = props;
-    let path = props.location.pathname.split("/");
-    if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
-
-    // Set tribe
-    let tribe = (path.length === 4) ? path[2] : "All";
-    this.setState({tribe: tribe});
-
-    // For each tribe, get its spreadsheet, set the state
-    var self = this;
-    let urls = (tribe == "All") ? API.Creatures : {[tribe]: API.Creatures[tribe]};
-    Object.keys(urls).map((tribe) => {
-      API.getSpreadsheet(urls[tribe], (data) => {
-        self.setState({creatures:
-          Object.assign(self.state.creatures, {[tribe]: data})
-        });
-      });
-    });
-    // self.setState({creatures: this.state.creatures.concat([data])});
-  }
-
-  hacks(event) {
-    console.log(event);
-    this.setState({click: true});
-  }
-
   render() {
+    if (this.props.children) {
+      return (<div>{this.props.children}</div>);
+    }
+    return (
+      <UnderConstruction location={this.props.location}/>
+    );
+  }
+
+  fakerender() {
     if (this.props.children) {
       return (<div>{this.props.children}</div>);
     }
diff --git a/src/components/portal/Category/Mugic.js b/src/components/portal/Category/Mugic.js
index e043748..3585e9b 100644
--- a/src/components/portal/Category/Mugic.js
+++ b/src/components/portal/Category/Mugic.js
@@ -8,25 +8,16 @@ import s from '../../../styles/app.style';
 
 export default class Mugic extends React.Component {
 
-  constructor(props) {
-    super (props);
-    this.tribe = '';
-    this.state = {mugic: {}};
-  }
-
-  componentDidMount() {
-    if (this.props.children) return;
-    var self = this;
-    let urls = (this.tribe == "All") ? API.Mugic : {[this.tribe]: API.Mugic[this.tribe]};
-    // For each tribe, get its spreadsheet, set the state
-    Object.keys(urls).map((tribe) => {
-      API.getSpreadsheet(urls[tribe], function(data) {
-        self.setState({mugic: Object.assign(self.state.mugic, {[tribe]: data})});
-      });
-    });
-  }
-
   render() {
+    if (this.props.children) {
+      return (<div>{this.props.children}</div>);
+    }
+    return (
+      <UnderConstruction location={this.props.location}/>
+    );
+  }
+
+  fakerender() {
     if (this.props.children) {
       return (<div>{this.props.children}</div>);
     }
diff --git a/src/components/portal/Single/Creature.js b/src/components/portal/Single/Creature.js
index 39972b6..5172fac 100644
--- a/src/components/portal/Single/Creature.js
+++ b/src/components/portal/Single/Creature.js
@@ -1,9 +1,7 @@
 import React from 'react';
 import Interactive from 'react-interactive';
 import { Link } from 'react-router';
-// import {browserHistory} from 'react-router';
 import PageNotFound from '../../PageNotFound';
-import UnderConstruction from '../../UnderConstruction';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';
@@ -15,37 +13,6 @@ export default class SingleCreature extends React.Component {
   // /portal/Creatures/{Tribe}/{Name}
   // /portal/{Tribe}/Creatures/{Name}
   // The first / gets counted
-  getData(props) {
-
-
-    var name = decodeURIComponent(path[4]);
-
-    var self = this;
-    var creature = API.portal.creatures.findOne(name);
-    if (creature) self.setState({"creature": creature});
-    else self.setState({creature: "n/a"});
-    console.log(creature);
-    API.getSpreadsheet(API.Creatures[tribe], (data) => {
-      data.map((item, i) => {
-        if (item.title.$t == name)
-          self.setState({creature: item });
-      });
-      // If no creature set as false
-      if (!self.state.creature) {
-        self.setState({creature: "n/a"});
-      }
-    });
-    API.getSpreadsheet(API.Creatures_Card_Data, (data) => {
-      data.map((item, i) => {
-        if (item.title.$t == name) self.setState({card_data: item });
-      });
-      // If no card_data set as false
-      if (!self.state.card_data) {
-        self.setState({card_data: "n/a"});
-      }
-    });
-  }
-
   render() {
     const store = API;
 
@@ -74,14 +41,18 @@ export default class SingleCreature extends React.Component {
     //   return (<span>Invalid Tribe: {tribe}</span>);
     // }
 
+    if (!store.cards.built.includes("creatures_Cards")) {
+      store.cards.setupCreatures("Cards");
+      return (<span>Loading...</span>);
+    }
+
     if (!store.portal.built.includes("creatures_"+tribe)) {
       store.portal.setupCreatures(tribe);
       return (<span>Loading...</span>);
     }
-    // TODO load card data
 
     const creature = store.portal.creatures.findOne({'gsx$name': path[4]});
-    console.log(creature);
+    const card_data = store.cards.creatures.findOne({'gsx$name': path[4]});
     if (!creature) {
       return(<PageNotFound location={this.props.location}/>);
     }
@@ -94,9 +65,12 @@ export default class SingleCreature extends React.Component {
       return <p key={i}><Interactive as={Link} {...s.link} to={"/portal/Battlegear/"+item}><span>{item}</span></Interactive></p>;
     });
 
+    const elements = card_data.gsx$elements.split(/[ ,]+/).map((item, i) => {
+      return <img className="icon" src={"/src/img/icons/elements/"+item.toLowerCase()+".png"} alt={item} key={i}></img>;
+    });
+
     return (
       <div className={"creature " + tribe.toLowerCase()}>
-        <UnderConstruction location={this.props.location}/>
         <h1>{creature.gsx$name}</h1>
         <img className="splash" src={store.base_image + creature.gsx$splash}></img>
         <hr />
@@ -139,113 +113,60 @@ export default class SingleCreature extends React.Component {
           <strong>Weight (lb):</strong><br />
           {creature.gsx$weight}
         </div>
-      </div>
-    );
-  }
-
-  fakerender() {
-    var self = this;
-
-    const elements = card_data.gsx$elements.$t.split(/[ ,]+/).map((item, i) => {
-      return <img className="icon" src={"/src/img/icons/elements/"+item.toLowerCase()+".png"} alt={item} key={i}></img>;
-    });
-
-    const locations = creature.gsx$location.$t.split(/[,]+\s*/).map((item, i) => {
-      return <p key={i}><Interactive as={Link} {...s.link} to={"/portal/Locations/"+item}><span>{item}</span></Interactive></p>;
-    });
-
-    const battlegear = creature.gsx$battlegear.$t.split(/[,]+\s*/).map((item, i) => {
-      return <p key={i}><Interactive as={Link} {...s.link} to={"/portal/Battlegear/"+item}><span>{item}</span></Interactive></p>;
-    });
-
-    return(
-      <div className={"creature " + this.state.tribe.toLowerCase()}>
-        <h1>{creature.gsx$name.$t}</h1>
-        <img className="splash" src={API.base_image + creature.gsx$splash.$t}></img>
-        <hr />
-        <div>
-          <strong>Appearance:</strong><br />
-          {creature.gsx$appearance.$t}
-        </div>
-        <hr />
-        <div>
-          <strong>Background:</strong><br />
-          {creature.gsx$background.$t}
-        </div>
-        <hr />
-        <div>
-          <strong>Details:</strong><br />
-          {creature.gsx$details.$t}
-        </div>
-        <hr />
-        <div>
-          <strong>Favorite Battlegear(s):</strong><br />
-          {battlegear}
-        </div>
-        <hr />
-        <div>
-          <strong>Favorite Location(s):</strong><br />
-          {locations}
-        </div>
-        <hr />
-        <div>
-          <strong>Height (ft):</strong><br />
-          {creature.gsx$height.$t}
-        </div>
         <hr />
         <div>
           <strong>Special Abilities:</strong><br />
-          {creature.gsx$specialabilities.$t}
+          {creature.gsx$specialabilities}
         </div>
         <hr />
         <div>
           <strong>Weight (lb):</strong><br />
-          {creature.gsx$weight.$t}
+          {creature.gsx$weight}
         </div>
         <hr />
         <div>
           <strong>Card ID: </strong>
-          {card_data.gsx$cardid.$t}
+          {card_data.gsx$cardid}
         </div>
         <hr />
         <div>
           <strong>Set: </strong>
-          {card_data.gsx$set.$t}
+          {card_data.gsx$set}
         </div>
         <hr />
         <div>
           <strong>Rarity: </strong>
-          {card_data.gsx$rarity.$t}
+          {card_data.gsx$rarity}
         </div>
         <hr />
         <div>
-          <strong>Tribe: </strong>{this.state.tribe}
-          <img className="icon" src={"/src/img/icons/tribes/"+this.state.tribe.toLowerCase()+".png"}></img>
+          <strong>Tribe: </strong>{tribe}
+          <img className="icon" src={"/src/img/icons/tribes/"+tribe.toLowerCase()+".png"}></img>
         </div>
         <hr />
         <div>
           <strong>Ability:</strong><br />
-          {card_data.gsx$ability.$t}
+          {card_data.gsx$ability}
         </div>
         <hr />
         <div>
           <strong>Courage: </strong>
-          {card_data.gsx$courage.$t}
+          {card_data.gsx$courage}
         </div>
         <hr />
         <div>
           <strong>Power: </strong>
-          {card_data.gsx$power.$t}
+          {card_data.gsx$power}
         </div>
         <hr />
         <div>
           <strong>Speed: </strong>
-          {card_data.gsx$speed.$t}
+          {card_data.gsx$speed}
         </div>
         <hr />
         <div>
           <strong>Wisdom: </strong>
-          {card_data.gsx$wisdom.$t}
+          {card_data.gsx$wisdom}
         </div>
         <hr />
         <div>
@@ -254,17 +175,17 @@ export default class SingleCreature extends React.Component {
         <hr />
         <div>
           <strong>Energy: </strong>
-          {card_data.gsx$energy.$t}
+          {card_data.gsx$energy}
         </div>
         <hr />
         <div>
           <strong>Flavortext:</strong><br />
-          {card_data.gsx$flavortext.$t}
+          {card_data.gsx$flavortext}
         </div>
         <hr />
         <div>
           <strong>Mugic Ability: </strong>
-          {card_data.gsx$mugicability.$t}
+          {card_data.gsx$mugicability}
         </div>
       </div>
     );