diff --git a/src/components/portal/Single/Attack.js b/src/components/portal/Single/Attack.js
index d5b1e44..d12598b 100644
--- a/src/components/portal/Single/Attack.js
+++ b/src/components/portal/Single/Attack.js
@@ -31,8 +31,8 @@ export default class SingleAttack extends React.Component {
 
     return (<Single 
         image={card_data.gsx$splash}
+        name={card_data.gsx$name}
         text={<div>
-          <div className="title">{attack.gsx$name}</div>
           <hr />
           <div>
             <strong>Attributes:</strong><br />
diff --git a/src/components/portal/Single/Battlegear.js b/src/components/portal/Single/Battlegear.js
index bfb53e8..e9657d3 100644
--- a/src/components/portal/Single/Battlegear.js
+++ b/src/components/portal/Single/Battlegear.js
@@ -31,6 +31,7 @@ export default class SingleBattlegear extends React.Component {
 
     return (<Single 
       image={card_data.gsx$splash}
+      name={card_data.gsx$name}
       text={<div>
         <hr />
         <div>
diff --git a/src/components/portal/Single/Creature.js b/src/components/portal/Single/Creature.js
index bdf0286..330840b 100644
--- a/src/components/portal/Single/Creature.js
+++ b/src/components/portal/Single/Creature.js
@@ -49,8 +49,8 @@ export default class SingleCreature extends React.Component {
 
     return (<Single
       image={card_data.gsx$splash}
+      name={card_data.gsx$name}
       text={<div>
-        <div className="title">{creature.gsx$name}</div>
         <hr />
         <div>
           <strong>Appearance:</strong><br />
diff --git a/src/components/portal/Single/Location.js b/src/components/portal/Single/Location.js
index 0a469a2..6cfe322 100644
--- a/src/components/portal/Single/Location.js
+++ b/src/components/portal/Single/Location.js
@@ -31,8 +31,8 @@ export default class SingleLocation extends React.Component {
 
     return (<Single
       image={card_data.gsx$splash}
+      name={card_data.gsx$name}
       text={<div>
-        <div className="title">{location.gsx$name}</div>
         <hr />
         <div>
           <strong>Local Features:</strong><br />
diff --git a/src/components/portal/Single/Mugic.js b/src/components/portal/Single/Mugic.js
index 23f7d30..470cc5a 100644
--- a/src/components/portal/Single/Mugic.js
+++ b/src/components/portal/Single/Mugic.js
@@ -49,8 +49,8 @@ export default class SingleMugic extends React.Component {
 
     return (<Single 
       image={card_data.gsx$splash}
+      name={card_data.gsx$name}
       text={<div>
-        <div className="title">{mugic.gsx$name}</div>
         <hr />
         <div>
           <strong>Background:</strong><br />
diff --git a/src/components/portal/Single/_base.js b/src/components/portal/Single/_base.js
index ea91e9f..de4684c 100644
--- a/src/components/portal/Single/_base.js
+++ b/src/components/portal/Single/_base.js
@@ -5,16 +5,32 @@ import API from '../../SpreadsheetData';
 
 @inject((stores, props, context) => props) @observer
 export default class Single extends React.Component {
+	@observable fullscreen = false;
+
+	expand(e) {
+		this.fullscreen = true;
+	}
+
+	close(e) {
+		this.fullscreen = false;
+	}
 
 	render() {
 		return (<div>
+			<div className={"modal" + (this.fullscreen?"":" hidden")}>
+			  <span className="close" onClick={this.close.bind(this)}>&times;</span>
+			  <img className="modal-content" src={API.base_image + this.props.image} />
+			</div>
 			<div className="splash">
 			{this.props.image &&
-			  <img src={API.base_image + this.props.image} />
+			  <img onClick={this.expand.bind(this)} src={API.base_image + this.props.image} />
 			}
 			</div>
 			<div className="entry_text">
-				{this.props.text}
+				<span className="title">{this.props.name}</span>
+				{this.props.text &&
+					this.props.text
+				}
 			</div>
 		</div>);
 	}
diff --git a/src/scss/portal.scss b/src/scss/portal.scss
index b8fb399..792a9f7 100644
--- a/src/scss/portal.scss
+++ b/src/scss/portal.scss
@@ -1,3 +1,5 @@
+.portal {
+/* portal css */
 .navbar h1 {
     font-size: 16px;
 }
@@ -67,31 +69,6 @@
     width: 18px;
 }
 
-.entry .title {
-    font-weight: bold;
-    font-size: 16px;
-}
-
-.entry .left {
-    float: left;
-    width: 100px;
-}
-
-.entry .right {
-    float: right;
-    width: 86%;
-}
-
-.entry .left .title {
-    text-align: left;
-    padding-bottom: 10px;
-}
-
-.entry .icon14, .entry .icon16,
-.entry .icon20, .entry .icon24 {
-    vertical-align: middle;
-}
-
 .search .results div {
     padding-bottom: 10px;
 }
@@ -101,75 +78,175 @@
     line-height: 20px;
 }
 
-.portal {
-  .entry {
-    font-size: 1.2em;
+.entry {
+  font-size: 1.2em;
 
-    .top_content {
-      min-height: 600px;
-      height: calc(100vh - 200px);
-      overflow-y: scroll;
-      width: 100%;
-      // position: absolute;
-      // width: 100%;
+  .title {
+      font-weight: bold;
+      font-size: 16px;
+  }
 
-      .splash {
-        padding-bottom: 4px;
-        img {
-          max-width: 100%;
-        }
-      //   position: relative;
-      //   z-index: -1;
-      }
+  .left {
+      float: left;
+      width: 100px;
+  }
 
-      .entry_text {
-        position: relative;
+  .right {
+      float: right;
+      width: 86%;
+  }
+
+  .left .title {
+      text-align: left;
+      padding-bottom: 10px;
+  }
+
+  .icon14, .icon16,
+  .icon20, .icon24 {
+      vertical-align: middle;
+  }
+
+  .top_content {
+    min-height: 600px;
+    height: calc(100vh - 200px);
+    overflow-y: scroll;
+    width: 100%;
+    // position: absolute;
+    // width: 100%;
+
+    .splash {
+      padding-bottom: 4px;
+      img {
         max-width: 100%;
       }
-
-      // /* 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;
-      // }
+    //   position: relative;
+    //   z-index: -1;
     }
 
-    .cat_title {
-       text-align: left;
-       background-color: #1a1a1a;
-       font-weight: bold;
-       font-size: 16px;
-       padding-top: 1px;
-       padding-left: 4px;
+    .entry_text {
+      position: relative;
+      max-width: 100%;
     }
 
-    /* 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;
-        }
+    // /* 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;
       }
     }
   }
-}
+
+  /* The Modal (background) */
+  .modal {
+    &.hidden {
+      display: none;
+    }
+    position: fixed; /* Stay in place */
+    z-index: 10; /* Sit on top */
+    padding-top: 50px;
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
+  }
+  
+  /* Modal Content (image) */
+  .modal-content {
+    margin: auto;
+    display: block;
+    // width: 80%;
+    max-height: calc(100vh - 100px);
+    max-width: 90vw;
+  }
+
+  /* Caption of Modal Image */
+  .caption {
+    margin: auto;
+    display: block;
+    width: 80%;
+    max-width: 700px;
+    text-align: center;
+    color: #ccc;
+    padding: 10px 0;
+    height: 150px;
+  }
+
+  /* Add Animation */
+  .modal-content, #caption {  
+    -webkit-animation-name: zoom;
+    -webkit-animation-duration: 0.6s;
+    animation-name: zoom;
+    animation-duration: 0.6s;
+  }
+
+  @-webkit-keyframes zoom {
+    from {-webkit-transform:scale(0)} 
+    to {-webkit-transform:scale(1)}
+  }
+
+  @keyframes zoom {
+    from {transform:scale(0)} 
+    to {transform:scale(1)}
+  }
+
+  /* The Close Button */
+  .close {
+    position: fixed;
+    top: 35px;
+    right: 35px;
+    color: #f1f1f1;
+    font-size: 40px;
+    font-weight: bold;
+    transition: 0.3s;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: #bbb;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+/*end entry*/}
+
+/*end portal css*/}