diff --git a/src/components/loadable.jsx b/src/components/loadable.jsx
index 9cb5d4a7..0491a91d 100644
--- a/src/components/loadable.jsx
+++ b/src/components/loadable.jsx
@@ -1,5 +1,6 @@
 import {Component} from 'react';
 import {SyncIcon} from 'react-octicons';
+import * as BS from 'react-bootstrap';
 
 const STATUS = {
   INITIAL: 'initial',
@@ -9,18 +10,31 @@ const STATUS = {
 
 class Loadable extends Component {
   static defaultProps = {
-    renderError: (err) => {
+    renderError: (err, show, close) => {
       console.error(err);
-      // If it is a permissions error then it might be a rate limi
+      // If it is a permissions error then it might be a rate limit
       if (err.status === 403) {
         return (
-          <div>
-            <h2>Insufficient Permissions (or rate limit exceeded)</h2>
-            <p>
-              It looks like either you do not have permission to see this repository or the rate limit for requests to GitHub has been exceeded. This usually happens when you are not logged in to gh-board. Try signing in to continue.
-            </p>
-            <code>{err.message}</code>
-          </div>
+          <BS.Modal show={show}>
+            <BS.Modal.Header>
+              <BS.Modal.Title><h2>Insufficient Permissions </h2>(or rate limit exceeded)</BS.Modal.Title>
+            </BS.Modal.Header>
+            <BS.Modal.Body >
+              <div>
+                <p>
+                  It looks like either you do not have permission to see this repository or the rate limit for requests to GitHub has been exceeded. This usually happens when you are not logged in to gh-board. Try signing in to continue.
+                </p>
+                <code>
+                  {JSON.parse(err.message).message}
+                  <br />
+                  <a href={JSON.parse(err.message).documentation_url}>Documentation URL</a>
+                </code>
+                <br />
+                <br />
+                <BS.Button onClick={close}>OK</BS.Button>
+              </div>
+            </BS.Modal.Body>
+          </BS.Modal>
         );
       } else if (err.name === 'InvalidStateError') {
         return (
@@ -28,17 +42,31 @@ class Loadable extends Component {
         );
       } else {
         return (
-          <span>
-            Problem loading. Is it a valid repo? And have you exceeded your number of requests? Usually happens when not logged in because GitHub limits anonymous use of their API.
-            {err.message}
-            {JSON.stringify(err)}
-          </span>
+          <BS.Modal show={show}>
+            <BS.Modal.Header>
+            </BS.Modal.Header>
+            <BS.Modal.Body >
+              <div>
+                <p>
+                  Problem loading. Is it a valid repo? And have you exceeded your number of requests? Usually happens when not logged in because GitHub limits anonymous use of their API.
+                </p>
+                <code>
+                  {JSON.parse(err.message).message}
+                  <br />
+                  <a href={JSON.parse(err.message).documentation_url}>Documentation URL</a>
+                </code>
+                <br />
+                <br />
+                <BS.Button onClick={close}>OK</BS.Button>
+              </div>
+            </BS.Modal.Body>
+          </BS.Modal>
         );
       }
     }
   };
 
-  state = {status: STATUS.INITIAL, value: null};
+  state = {status: STATUS.INITIAL, value: null, show: false};
 
   componentDidMount() {
     const {promise} = this.props;
@@ -54,13 +82,13 @@ class Loadable extends Component {
 
   onResolve = (value) => {
     // TODO: Find out why this is being called multiple times
-    this.setState({status: STATUS.RESOLVED, value});
+    this.setState({status: STATUS.RESOLVED, value: value});
   };
 
   onError = (value) => {
     // TODO: Find out why this is being called multiple times
     if (this.state.status !== STATUS.ERROR) {
-      this.setState({status: STATUS.ERROR, value});
+      this.setState({status: STATUS.ERROR, value: value, show: true});
     }
   };
 
@@ -74,6 +102,11 @@ class Loadable extends Component {
     );
   };
 
+  close = () => {
+    console.log("its herer");
+    this.setState({show: false});
+  }
+
   render() {
     const {status, value} = this.state;
     let {renderLoading, renderLoaded, renderError} = this.props;
@@ -85,7 +118,7 @@ class Loadable extends Component {
     } else if (status === STATUS.RESOLVED) {
       return renderLoaded(value);
     } else {
-      return renderError(value);
+      return renderError(value, this.state.show, this.close);
     }
   }
 }