diff --git a/src/components/portal/Category/Attacks.js b/src/components/portal/Category/Attacks.js
deleted file mode 100644
index e83ede6..0000000
--- a/src/components/portal/Category/Attacks.js
+++ /dev/null
@@ -1,51 +0,0 @@
-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';
-import {Loading} from '../../Snippets';
-import Attack from '../Single/Attack';
-
-@inject((stores, props, context) => props) @observer
-export default class Attacks extends React.Component {
-  @observable loaded = false;
-
-  render() {
-    if (this.loaded == false) {
-      API.LoadDB([{'cards': 'attacks'}, {'portal': 'attacks'}])
-      .then(() => {
-        this.loaded = true;
-      });
-      return (<Loading />);
-    }
-
-    let path = this.props.location.pathname.split("/");
-    if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
-
-    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}>
-          <Interactive as={Link} {...s.link}
-            to={'/portal/Attacks/'+attack.gsx$name}
-          >
-            <span>{attack.gsx$name}</span><br />
-            <img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
-          </Interactive>
-        </div>
-      );
-    });
-
-    return (<div className="entry attacks">
-      <div className="left">
-        <div className="title">Attacks<hr /></div>
-        {output}
-      </div>
-      <div className="right">
-        <Route path={`${this.props.match.url}/:card`} component={Attack} />
-      </div>
-    </div>);
-  }
-}
diff --git a/src/components/portal/Category/Battlegear.js b/src/components/portal/Category/Battlegear.js
deleted file mode 100644
index 4722bb3..0000000
--- a/src/components/portal/Category/Battlegear.js
+++ /dev/null
@@ -1,53 +0,0 @@
-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';
-import {Loading} from '../../Snippets';
-import SingleBattlegear from '../Single/Battlegear';
-
-@inject((stores, props, context) => props) @observer
-export default class Battlegear extends React.Component {
-  @observable loaded = false;
-
-    render() {
-      if (this.loaded == false) {
-        API.LoadDB([{'cards': 'battlegear'}, {'portal': 'battlegear'}])
-        .then(() => {
-          this.loaded = true;
-        });
-        return (<Loading />);
-      }
-
-      let path = this.props.location.pathname.split("/");
-      if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
-
-      const battlegear = API.portal.battlegear.data;
-
-      const output = battlegear.map((single_battlegear, i) => {
-        const card_data = API.cards.battlegear.findOne({'gsx$name': single_battlegear.gsx$name});
-        return (
-          <div key={i}>
-            <Interactive as={Link} {...s.link}
-              to={'/portal/Battlegear/'+single_battlegear.gsx$name}
-            >
-              <span>{single_battlegear.gsx$name}</span><br />
-              <img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
-            </Interactive>
-          </div>
-        );
-      });
-
-      return (<div className="entry battlegear">
-        <div className="left">
-          <div className="title">Battlegear<hr /></div>
-          {output}
-        </div>
-        <div className="right">
-          <Route path={`${this.props.match.url}/:card`} component={SingleBattlegear} />
-        </div>
-      </div>);
-    }
-}
diff --git a/src/components/portal/Category/Locations.js b/src/components/portal/Category/Category.js
similarity index 50%
rename from src/components/portal/Category/Locations.js
rename to src/components/portal/Category/Category.js
index b48192b..a32c05f 100644
--- a/src/components/portal/Category/Locations.js
+++ b/src/components/portal/Category/Category.js
@@ -6,48 +6,49 @@ import {observer, inject} from 'mobx-react';
 import s from '../../../styles/app.style';
 import API from '../../SpreadsheetData';
 import {Loading} from '../../Snippets';
-import Location from '../Single/Location';
 
 @inject((stores, props, context) => props) @observer
-export default class Locations extends React.Component {
+export default class Category extends React.Component {
   @observable loaded = false;
 
+  constructor(props) {
+    super(props);
+
+    let path = props.location.pathname.split("/");
+    if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
+    this.path = path;
+    this.type = props.type;
+  }
+
   render() {
     if (this.loaded == false) {
-      API.buildCollection([{'cards': 'locations'}, {'portal': 'locations'}])
+      API.LoadDB([{'cards': this.type}, {'portal': this.type}])
       .then(() => {
         this.loaded = true;
       });
       return (<Loading />);
     }
 
-    let path = this.props.location.pathname.split("/");
-    if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
-
-    const locations = API.portal.locations.data;
-
-    const output = locations.map((location, i) => {
-      const card_data = API.cards.locations.findOne({'gsx$name': location.gsx$name});
+    const bottom_nav = API.portal[this.type].data.map((card, i) => {
+      let card_data = API.cards[this.type].findOne({'gsx$name': card.gsx$name});
       return (
         <div key={i}>
-          <Interactive as={Link} {...s.link}
-            to={'/portal/Locations/'+location.gsx$name}
+          <Interactive key={i} as={Link} {...s.link}
+            to={`/portal/${this.type.charAt(0).toUpperCase()+this.type.substr(1)}/${card.gsx$name}`}
           >
-            <span>{location.gsx$name}</span><br />
+            <span>{card.gsx$name}</span><br />
             <img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
           </Interactive>
         </div>
       );
     });
 
-    return (<div className="entry locations">
-      <div className="left">
-        <div className="title">Locations<hr /></div>
-        {output}
-      </div>
-      <div className="right">
-        <Route path={`${this.props.match.url}/:card`} component={Location} />
+    return (<div className={`entry ${this.type}`}>
+      <div className="top_content">
+        <Route path={`${this.props.match.url}/:card`} component={this.props.component} />
       </div>
+      <div className="cat_title">{this.type.charAt(0).toUpperCase()+this.type.substr(1)}</div>
+      <div className="bottom_nav">{bottom_nav}</div>
     </div>);
   }
 }
diff --git a/src/components/portal/Category/Tribes.js b/src/components/portal/Category/Tribes.js
index 18f2a97..c1af97f 100644
--- a/src/components/portal/Category/Tribes.js
+++ b/src/components/portal/Category/Tribes.js
@@ -25,7 +25,7 @@ export default class Tribes extends React.Component {
   // -> /{Tribe}/Mugic || /{Tribe}/Creatures
   render() {
     if (this.loaded == false) {
-      API.buildCollection([{'cards': 'creatures'}, {'portal': 'creatures'}, {'cards': 'mugic'}, {'portal': 'mugic'}])
+      API.LoadDB([{'cards': 'creatures'}, {'portal': 'creatures'}, {'cards': 'mugic'}, {'portal': 'mugic'}])
       .then(() => {
         this.loaded = true;
       });
@@ -37,7 +37,6 @@ export default class Tribes extends React.Component {
 
     let tribe = path[2];
 
-
     let filter = this.filter.addCollection('filter');
     var pview = filter.addDynamicView('filter');
     pview.applySimpleSort('gsx$name');
diff --git a/src/components/portal/Search.js b/src/components/portal/Search.js
index fa64019..4d2bc35 100644
--- a/src/components/portal/Search.js
+++ b/src/components/portal/Search.js
@@ -49,15 +49,10 @@ class DBSearch extends React.Component {
 
   render() {
     if (this.loaded == false) {
-      if (API.urls !== null &&
-        API.portal !== null &&
-        API.cards !== null
-      ) {
-        API.buildCollection([{'portal': 'attacks'}, {'portal': 'battlegear'}, {'portal': 'creatures'}, {'portal': 'locations'}, {'portal': 'mugic'}])
-        .then(() => {
-          this.loaded = true;
-        });
-      }
+      API.LoadDB([{'portal': 'attacks'}, {'portal': 'battlegear'}, {'portal': 'creatures'}, {'portal': 'locations'}, {'portal': 'mugic'}])
+      .then(() => {
+        this.loaded = true;
+      });
       return (<span>Loading...</span>);
     }
 
diff --git a/src/components/portal/index.js b/src/components/portal/index.js
index 391648f..52556c4 100644
--- a/src/components/portal/index.js
+++ b/src/components/portal/index.js
@@ -6,12 +6,13 @@ import {Link, Route} from 'react-router-dom';
 import API from '../SpreadsheetData';
 import Home from './Home';
 import Search from './Search';
-import Attacks from './Category/Attacks';
-import Battlegear from './Category/Battlegear';
+import Category from './Category/Category';
 import Creatures from './Category/Creatures';
-import Locations from './Category/Locations';
 import Mugic from './Category/Mugic';
 import Tribes from './Category/Tribes';
+import Attack from './Single/Attack';
+import Battlegear from './Single/Battlegear';
+import Location from './Single/Location';
 import {SearchButton} from '../Snippets';
 
 import '../../scss/portal.scss';
@@ -31,21 +32,20 @@ export default class Base extends React.Component {
 }
 
 function Routing(props) {
-  const match = props.match;
+  const url = props.match.url;
 
-  const tribes = API.tribes.map((tribe, i) => (
-    <Route key={i} path={`${match.url}/${tribe}`} component={Tribes} />
-  ));
   return (
     <div>
-      <Route exact path={match.url} component={Home} />
-      <Route path={`${match.url}/Attacks`} component={Attacks} />
-      <Route path={`${match.url}/Battlegear`} component={Battlegear} />
-      <Route path={`${match.url}/Creatures`} component={Creatures} />
-      <Route path={`${match.url}/Locations`} component={Locations} />
-      <Route path={`${match.url}/Mugic`} component={Mugic} />
-      {tribes}
-      <Route path={`${match.url}/Search`} component={Search} />
+      <Route exact path={url} component={Home} />
+      <Route path={`${url}/Attacks`} render={(props) => <Category {...props} type="attacks" component={Attack} />} />
+      <Route path={`${url}/Battlegear`} render={(props) => <Category {...props} type="battlegear" component={Battlegear} />} />
+      <Route path={`${url}/Creatures`} component={Creatures} />
+      <Route path={`${url}/Locations`} render={(props) => <Category {...props} type="locations" component={Location} />} />
+      <Route path={`${url}/Mugic`} component={Mugic} />
+      {API.tribes.map((tribe, i) => (
+      <Route key={i} path={`${url}/${tribe}`} component={Tribes} />
+      ))}
+      <Route path={`${url}/Search`} component={Search} />
     </div>
   );
 }
diff --git a/src/scss/portal.scss b/src/scss/portal.scss
index a2adab5..f357b09 100644
--- a/src/scss/portal.scss
+++ b/src/scss/portal.scss
@@ -72,10 +72,6 @@
     width: 18px;
 }
 
-.entry {
-    padding: 10px;
-}
-
 .entry .title {
     font-weight: bold;
     font-size: 16px;
@@ -109,3 +105,59 @@
     font-size: 16px;
     line-height: 20px;
 }
+
+.portal {
+  .entry {
+    font-size: 1.2em;
+
+    .top_content {
+      min-height: 600px;
+      height: calc(100vh - 200px);
+      overflow-y: scroll;
+
+      /* width */
+      ::-webkit-scrollbar {
+          width: 10px;
+      }
+
+      /* Track */
+      ::-webkit-scrollbar-track {
+          background: #f1f1f1;
+      }
+
+      /* Handle */
+      ::-webkit-scrollbar-thumb {
+          background: #888;
+      }
+
+      /* Handle on hover */
+      ::-webkit-scrollbar-thumb:hover {
+          background: #555;
+      }
+    }
+
+    .cat_title {
+       text-align: left;
+       background-color: #1a1a1a;
+       font-weight: bold;
+       font-size: 16px;
+       padding-top: 1px;
+       padding-left: 4px;
+    }
+
+    /* height is 118px */
+    .bottom_nav {
+      background-color: #1a1a1a;
+      overflow-x: scroll;
+      overflow-y: hidden;
+      white-space: nowrap;
+      > div {
+        display: inline-block;
+        img {
+          margin-right: 3px;
+          margin-left: 3px;
+        }
+      }
+    }
+  }
+}