diff --git a/index.html b/index.html
index ece7f9c..a1fd188 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Chaotic Backup</title>
     <meta name="description" content="Chaotic Backup">
+    <link rel="stylesheet" type="text/css" href="/src/css/legacy.css">
     <style>
       html, body, div, span, a, p, ul, li, h1, code, nav {
         margin: 0;
@@ -85,7 +86,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <!-- single page app in bundle.js -->
     <script src="/build/bundle.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
index 164e5a6..83ca878 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chaoticbackup",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Chaotic Backup",
   "scripts": {
     "start": "webpack-dev-server -d --inline --host 0.0.0.0 --history-api-fallback --progress",
@@ -32,6 +32,7 @@
     "babel-eslint": "^8.0.0",
     "babel-loader": "^6.2.10",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-1": "^6.16.0",
diff --git a/src/components/SpreadsheetData.js b/src/components/SpreadsheetData.js
index 7cc30bd..f97d8d3 100644
--- a/src/components/SpreadsheetData.js
+++ b/src/components/SpreadsheetData.js
@@ -60,8 +60,8 @@ class API {
 
   setupDB() {
     try {
-      this.portal = new CollectionDB(this);
-      this.cards = new CollectionDB(this);
+      this.portal = new CollectionDB(this, 'portal');
+      this.cards = new CollectionDB(this, 'cards');
     }
     catch (err) {
       console.log('setting up database failed', err);
@@ -91,20 +91,41 @@ class API {
     };
   }
 
+  // Input format
+  // [{cards: 'attacks'}, {portal: 'attacks'}]
+  async buildCollection(input) {
+    return await Promise.all(input.map((item) => {
+      return new Promise((resolve, reject) => {
+        if ('cards' in item) {
+          // console.log(this.cards[item.cards].data);
+          return this.cards.setupType(item.cards, resolve);
+        }
+        if ('portal' in item) {
+          // console.log(this.portal[item.portal].data);
+          return this.portal.setupType(item.portal, resolve);
+        }
+        console.log('cards or portal');
+        return reject();
+      });
+    }));
+  }
+
 }
 
 export default API.getInstance();
 
-// export default new API();
-
 class CollectionDB {
-  @observable built = []; // Keeps track of what collections have been populated
+  // Keeps track of what collections have been populated
+  @observable built = [];
+  building = [];
 
-  constructor(API) {
+  constructor(API, format) {
     this.api = API;
-    // ignoring persistence for now
-    // this.setupDB();
-    //autorun(() => console.log(this.creatures));
+    this.format = format;
+    this.setupDB();
+  }
+
+  setupDB() {
     let db = new loki("chaotic_portal.db");
     this.attacks = db.addCollection('attacks');
     this.battlegear = db.addCollection('battlegear');
@@ -112,9 +133,10 @@ class CollectionDB {
     this.locations = db.addCollection('locations');
     this.mugic = db.addCollection('mugic');
     this.db = db;
-  }
 
-  // setupDB() {
+    // ignoring persistence for now
+    //autorun(() => console.log(this.creatures));
+
   //   var self = this;
   //   let db = new loki("chaotic_portal.db", { autosave: true, autoload: true, autoloadCallback: databaseInitialize, autosaveInterval: 4000, persistenceMethod: 'localStorage' });
   //   this.db = db;
@@ -142,7 +164,7 @@ class CollectionDB {
   //       entries = db.addCollection("mugic");
   //     self.mugic = entries;
   //   };
-  // }
+  }
 
   setup(spreadsheet, type, callback) {
     this.api.getSpreadsheet(spreadsheet, (data) => {
@@ -158,6 +180,20 @@ class CollectionDB {
     });
   }
 
+  // example format
+  // this.setup(this.api.urls.Attacks["portal"], "Attack", (data) => {});
+  async setupType(type, resolve) {
+    let uc_type = type.charAt(0).toUpperCase() + type.slice(1);
+
+    console.log(type, uc_type, this.format);
+
+    // this.setup(this.api.urls[uc_type][this.format], uc_type, (data) => {
+    //   this[type].insert(data);
+    //   this.built.push(type);
+    // }
+    resolve();
+  }
+
   setupAttacks(type="portal") {
     this.setup(this.api.urls.Attacks[type], "Attack", (data) => {
       this.attacks.insert(data);
diff --git a/src/components/index.js b/src/components/index.js
index 620d779..eb0dde8 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Link, Route, withRouter } from 'react-router-dom';
 import {observer, inject} from 'mobx-react';
 import s from '../styles/app.style';
 
@@ -11,11 +11,11 @@ import Collection from './collection/index';
 import Portal from './portal/index';
 import Home from './Home';
 
+const BlockAvoider = withRouter(Base)
+
 render(
   <Router>
-    <div>
-      <Route path="*" component={Base}/>
-    </div>
+    <BlockAvoider />
   </Router>
   , document.getElementById('root'),
 );
@@ -42,7 +42,6 @@ function Base(props) {
 
   return (
     <div>
-      <link rel="stylesheet" type="text/css" href="/src/css/legacy.css" />
       <div className="fix-pgBkgrnd-repeat-x">
         <div className={"fix-img-bkgrnd fix-img-bkgrnd_"+bkgrnd}></div>
       </div>
diff --git a/src/components/portal/Category/Attacks.js b/src/components/portal/Category/Attacks.js
index 8c77f01..3eb10f7 100644
--- a/src/components/portal/Category/Attacks.js
+++ b/src/components/portal/Category/Attacks.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import Interactive from 'react-interactive';
 import { Link, Route } from 'react-router-dom';
+import {observable} from 'mobx';
 import {observer, inject} from 'mobx-react';
 import s from '../../../styles/app.style';
 import API from '../../SpreadsheetData';
@@ -8,6 +9,7 @@ import Attack from '../Single/Attack';
 
 @inject((stores, props, context) => props) @observer
 export default class Attacks extends React.Component {
+  @observable loaded = false;
 
   render() {
 
@@ -30,9 +32,15 @@ export default class Attacks extends React.Component {
       return (<span>Loading...</span>);
     }
 
-    const attacks = API.portal.attacks.data;
+    if (this.loaded == false) {
+      API.buildCollection([{'cards': 'attacks'}, {'portal': 'attacks'}])
+      .then(() => {
+        this.loaded = true;
+      });
+      return (<span>Loading...</span>);
+    }
 
-    const output = attacks.map((attack, i) => {
+    const output = API.portal.attacks.data.map((attack, i) => {
       const card_data = API.cards.attacks.findOne({'gsx$name': attack.gsx$name});
       return (
         <div key={i}>
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index 074783a..20f9beb 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -2,7 +2,7 @@ import webpack from 'webpack';
 import path from 'path';
 
 export default {
-  entry: `${__dirname}/src/components/index.js`,
+  entry: ['babel-polyfill', `${__dirname}/src/components/index.js`],
   output: {
     path: `${__dirname}/build`,
     publicPath: '/build/',
