diff --git a/package.json b/package.json
index f28c365..dd7cf1d 100644
--- a/package.json
+++ b/package.json
@@ -49,8 +49,7 @@
     "node-sass": "^4.10.0",
     "sass-loader": "^7.0.x",
     "style-loader": "^0.23.1",
-    "webpack": "^3.11",
-    "webpack-cli": "^2.0.x",
-    "webpack-dev-server": "^2.11.1"
+    "webpack": "^3.12.0",
+    "webpack-dev-server": "^2.11.3"
   }
 }
diff --git a/src/components/portal/Category.js b/src/components/portal/Category.js
index 77c8e88..d61b800 100644
--- a/src/components/portal/Category.js
+++ b/src/components/portal/Category.js
@@ -73,7 +73,6 @@ export default class Category extends React.Component {
         :
         this.props.type
       );
-      console.log(this.props.match);
       top_content = ((tribe) ?
         (<Route path={`${this.props.match.url}/${tribe}/:card`} component={this.props.component} />)
         :
@@ -88,7 +87,6 @@ export default class Category extends React.Component {
       cat_title = this.props.type;
       top_content = (<Route path={`${this.props.match.url}/:card`} component={this.props.component} />);
     }
-    console.log(top_content);
 
     return (<div className={`entry ${this.type}`}>
       <div className="top_content">{top_content}</div>
diff --git a/src/components/portal/Single/Attack.js b/src/components/portal/Single/Attack.js
index cf875eb..d5b1e44 100644
--- a/src/components/portal/Single/Attack.js
+++ b/src/components/portal/Single/Attack.js
@@ -5,6 +5,7 @@ import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';
 import {PageNotFound} from '../../Snippets';
+import Single from './_base';
 
 @inject((stores, props, context) => props) @observer
 export default class SingleAttack extends React.Component {
@@ -28,41 +29,42 @@ export default class SingleAttack extends React.Component {
 
     const card_data = API.cards.attacks.findOne({'gsx$name': name});
 
-    return (
-      <div>
-        <img className="splash" src={API.base_image + card_data.gsx$splash} />
-        <div className="title">{attack.gsx$name}</div>
-        <hr />
-        <div>
-          <strong>Attributes:</strong><br />
-          {attack.gsx$attributes}
-        </div>
-        <hr />
-        <div>
-          <strong>Background:</strong><br />
-          {attack.gsx$background}
-        </div>
-        <hr />
-        <div>
-          <strong>Details:</strong><br />
-          {attack.gsx$details}
-        </div>
-        <hr />
-        <div>
-          <strong>Card ID: </strong>
-          {card_data.gsx$id}
-        </div>
-        <hr />
-        <div>
-          <strong>Set: </strong>
-          {card_data.gsx$set}
-        </div>
-        <hr />
-        <div>
-          <strong>Rarity: </strong>
-          {card_data.gsx$rarity}
-        </div>
-      </div>
+    return (<Single 
+        image={card_data.gsx$splash}
+        text={<div>
+          <div className="title">{attack.gsx$name}</div>
+          <hr />
+          <div>
+            <strong>Attributes:</strong><br />
+            {attack.gsx$attributes}
+          </div>
+          <hr />
+          <div>
+            <strong>Background:</strong><br />
+            {attack.gsx$background}
+          </div>
+          <hr />
+          <div>
+            <strong>Details:</strong><br />
+            {attack.gsx$details}
+          </div>
+          <hr />
+          <div>
+            <strong>Card ID: </strong>
+            {card_data.gsx$id}
+          </div>
+          <hr />
+          <div>
+            <strong>Set: </strong>
+            {card_data.gsx$set}
+          </div>
+          <hr />
+          <div>
+            <strong>Rarity: </strong>
+            {card_data.gsx$rarity}
+          </div>
+        </div>}
+      />
     );
   }
 }
diff --git a/src/components/portal/Single/Battlegear.js b/src/components/portal/Single/Battlegear.js
index 2384191..bfb53e8 100644
--- a/src/components/portal/Single/Battlegear.js
+++ b/src/components/portal/Single/Battlegear.js
@@ -29,10 +29,9 @@ export default class SingleBattlegear extends React.Component {
 
     const card_data = API.cards.battlegear.findOne({'gsx$name': name});
 
-    return (
-      <div>
-        <img className="splash" src={API.base_image + card_data.gsx$splash} />
-        <div className="title">{battlegear.gsx$name}</div>
+    return (<Single 
+      image={card_data.gsx$splash}
+      text={<div>
         <hr />
         <div>
           <strong>Attributes:</strong><br />
@@ -68,7 +67,7 @@ export default class SingleBattlegear extends React.Component {
           <strong>Ability:</strong><br />
           <Ability ability={card_data.gsx$ability} />
         </div>
-      </div>
-    );
+      </div>}
+    />);
   }
 }
diff --git a/src/components/portal/Single/Creature.js b/src/components/portal/Single/Creature.js
index 90d6698..bdf0286 100644
--- a/src/components/portal/Single/Creature.js
+++ b/src/components/portal/Single/Creature.js
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';
+import Single from './_base';
 import {PageNotFound, Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
@@ -46,11 +47,9 @@ export default class SingleCreature extends React.Component {
       mugic.push(<Mugic key={i} tribe={tribe} />);
     }
 
-    return (
-      <div>
-        {card_data.gsx$splash &&
-        <img className="splash" src={API.base_image + card_data.gsx$splash} />
-        }
+    return (<Single
+      image={card_data.gsx$splash}
+      text={<div>
         <div className="title">{creature.gsx$name}</div>
         <hr />
         <div>
@@ -166,7 +165,7 @@ export default class SingleCreature extends React.Component {
           <strong>Mugic Ability: </strong>
           {mugic}
         </div>
-      </div>
-    );
+      </div>}
+    />);
   }
 }
diff --git a/src/components/portal/Single/Location.js b/src/components/portal/Single/Location.js
index 8c91545..0a469a2 100644
--- a/src/components/portal/Single/Location.js
+++ b/src/components/portal/Single/Location.js
@@ -4,8 +4,8 @@ import { Link } from 'react-router-dom';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';
-import {PageNotFound} from '../../Snippets';
-import {Rarity, Unique, Name, Ability, Initiative} from '../../Snippets';
+import Single from './_base';
+import {PageNotFound, Rarity, Unique, Name, Ability, Initiative} from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class SingleLocation extends React.Component {
@@ -29,9 +29,9 @@ export default class SingleLocation extends React.Component {
 
     const card_data = API.cards.locations.findOne({'gsx$name': name});
 
-    return (
-      <div>
-        <img className="splash" src={API.base_image + card_data.gsx$splash} />
+    return (<Single
+      image={card_data.gsx$splash}
+      text={<div>
         <div className="title">{location.gsx$name}</div>
         <hr />
         <div>
@@ -78,7 +78,7 @@ export default class SingleLocation extends React.Component {
           <strong>Ability:</strong><br />
           <Ability ability={card_data.gsx$ability} />
         </div>
-      </div>
-    );
+      </div>}
+    />);
   }
 }
diff --git a/src/components/portal/Single/Mugic.js b/src/components/portal/Single/Mugic.js
index cb5b8ca..23f7d30 100644
--- a/src/components/portal/Single/Mugic.js
+++ b/src/components/portal/Single/Mugic.js
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';
+import Single from './_base';
 import {PageNotFound, Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
@@ -46,9 +47,9 @@ export default class SingleMugic extends React.Component {
       }
     }
 
-    return (
-      <div>
-        <img className="splash" src={API.base_image + card_data.gsx$splash} />
+    return (<Single 
+      image={card_data.gsx$splash}
+      text={<div>
         <div className="title">{mugic.gsx$name}</div>
         <hr />
         <div>
@@ -95,7 +96,7 @@ export default class SingleMugic extends React.Component {
           <strong>Flavortext:</strong><br />
           {card_data.gsx$flavortext}
         </div>
-      </div>
-    );
+      </div>}
+    />);
   }
 }
diff --git a/src/components/portal/Single/_base.js b/src/components/portal/Single/_base.js
new file mode 100644
index 0000000..ea91e9f
--- /dev/null
+++ b/src/components/portal/Single/_base.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import {observable} from "mobx";
+import {observer, inject} from 'mobx-react';
+import API from '../../SpreadsheetData';
+
+@inject((stores, props, context) => props) @observer
+export default class Single extends React.Component {
+
+	render() {
+		return (<div>
+			<div className="splash">
+			{this.props.image &&
+			  <img src={API.base_image + this.props.image} />
+			}
+			</div>
+			<div className="entry_text">
+				{this.props.text}
+			</div>
+		</div>);
+	}
+}
diff --git a/src/components/portal/Tribes.js b/src/components/portal/Tribes.js
index 3d4a414..2507ddf 100644
--- a/src/components/portal/Tribes.js
+++ b/src/components/portal/Tribes.js
@@ -54,7 +54,7 @@ export default class Tribes extends React.Component {
     let results = pview.data();
     this.filter.removeCollection('filter');
 
-    const output = results.map((card, i) => {
+    const bottom_nav = results.map((card, i) => {
       let card_data, url;
 
       if (card.gsx$type == "Mugic") {
@@ -75,15 +75,13 @@ export default class Tribes extends React.Component {
       </div>);
     });
 
-    return (<div className="entry creatures">
-      <div className="left">
-        <div className="title">{path[2]}<hr /></div>
-        {output}
-      </div>
-      <div className="right">
+    return (<div className="entry tribe">
+      <div className="top_content">
         <Route path={`${this.props.match.url}/Creatures/:card`} component={Creature} />
         <Route path={`${this.props.match.url}/Mugic/:card`} component={Mugic} />
       </div>
+      <div className="cat_title">{path[2]}</div>
+      <div className="bottom_nav">{bottom_nav}</div>
     </div>);
   }
 }
diff --git a/src/components/portal/index.js b/src/components/portal/index.js
index 38a6f03..b02cb23 100644
--- a/src/components/portal/index.js
+++ b/src/components/portal/index.js
@@ -26,7 +26,6 @@ export default class Base extends React.Component {
     return (
       <div className="portal">
         <Header />
-        <br />
         <Routing {...this.props} />
       </div>
     );
diff --git a/src/scss/portal.scss b/src/scss/portal.scss
index f357b09..b8fb399 100644
--- a/src/scss/portal.scss
+++ b/src/scss/portal.scss
@@ -1,8 +1,3 @@
-.splash {
-    max-width: 100%;
-    padding-bottom: 10px;
-}
-
 .navbar h1 {
     font-size: 16px;
 }
@@ -114,26 +109,43 @@
       min-height: 600px;
       height: calc(100vh - 200px);
       overflow-y: scroll;
+      width: 100%;
+      // position: absolute;
+      // width: 100%;
 
-      /* width */
-      ::-webkit-scrollbar {
-          width: 10px;
+      .splash {
+        padding-bottom: 4px;
+        img {
+          max-width: 100%;
+        }
+      //   position: relative;
+      //   z-index: -1;
       }
 
-      /* Track */
-      ::-webkit-scrollbar-track {
-          background: #f1f1f1;
+      .entry_text {
+        position: relative;
+        max-width: 100%;
       }
 
-      /* Handle */
-      ::-webkit-scrollbar-thumb {
-          background: #888;
-      }
+      // /* width */
+      // ::-webkit-scrollbar {
+      //     width: 10px;
+      // }
 
-      /* Handle on hover */
-      ::-webkit-scrollbar-thumb:hover {
-          background: #555;
-      }
+      // /* Track */
+      // ::-webkit-scrollbar-track {
+      //     background: #f1f1f1;
+      // }
+
+      // /* Handle */
+      // ::-webkit-scrollbar-thumb {
+      //     background: #888;
+      // }
+
+      // /* Handle on hover */
+      // ::-webkit-scrollbar-thumb:hover {
+      //     background: #555;
+      // }
     }
 
     .cat_title {