diff --git a/css/style.css b/css/style.css
index 0cfcdfe341..ae488f5796 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,7 +1,7 @@
 /* ----------------------------------------------------------------------------
  * Fonts
  */
-@import url("http://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:300");
+
 /* ----------------------------------------------------------------------------
  * Base
  */
diff --git a/index.html b/index.html
index 9525f4ff2f..3dc88a3b94 100644
--- a/index.html
+++ b/index.html
@@ -48,35 +48,7 @@ mixpanel.init("132d42885e094171f34467fc54da6fab");
   </script>
   <!-- end google analytics -->  
     
-  <!-- Initializer -->
-  <script>
-    var GET_VARS = window.location.search.replace("?","").split("&");
-    if (GET_VARS.indexOf("p=web-sockets-api")>-1) {
-        var fdfile = "websocket_api.md";
-        $('.header-subnav').removeClass('active');
-        $('#subnav-websocket').addClass('active');
-        document.title = "Ripple Dev Portal: WebSocket and JSON-RPC APIs";
-    } else if (GET_VARS.indexOf("p=ripple-rest-api")>-1) {
-        var fdfile = "ripplerest_api.md";
-        $('.header-subnav').removeClass('active');
-        $('#subnav-rest').addClass('active');
-        document.title = "Ripple Dev Portal: Ripple-REST API";
-    } else if (GET_VARS.indexOf("p=gatewayd")>-1) {
-        var fdfile = "gatewayd.md";
-        $('.header-subnav').removeClass('active');
-        $('#subnav-gatewayd').addClass('active');
-        document.title = "Ripple Dev Portal: gatewayd";
-    } else {
-        var fdfile = "intro.md";
-        $('.header-subnav').removeClass('active');
-        $('#subnav-intro').addClass('active');
-        document.title = "Ripple Dev Portal: Introduction";
-    }
-    
-    Flatdoc.run({
-      fetcher: Flatdoc.file(fdfile)
-    });
-  </script>
+
   
   <!-- syntax selection js -->
   <script src='js/multicodetab.js'></script>
@@ -103,26 +75,45 @@ mixpanel.init("132d42885e094171f34467fc54da6fab");
     </div>
     <div class='right'>
       <!-- GitHub buttons: ghbtn.html -->
-      <iframe src="https://dev.ripple.com/vendor/ghbtn.html?user=ripple&repo=ripple-dev-portal&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
+      <iframe src="https://dev.ripple.com/vendor/ghbtn.html?user=ripple&amp;repo=ripple-dev-portal&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
     </div>
   </div>
   <div class="header-subnav-wrapper">
-  <div class='header-subnav'>
-    <ul>
-        <li><a href='?p=introduction' id='subnav-intro'>Introduction</a></li>
-        <li><a href='?p=ripple-rest-api' id='subnav-rest'>Ripple-REST API</a></li>
-        <li><a href='?p=web-sockets-api' id='subnav-websocket'>WebSocket &amp; JSON-RPC APIs</a></li>
-        <li><a href='?p=gatewayd' id='subnav-websocket'>gatewayd</a></li>
-    </ul>
-    <div class='clearer'>&nbsp;</div>
+      <div class="header-subnav">
+        <ul>
+
+        </ul>
+        <div class='clearer'>&nbsp;</div>
+      </div>
   </div>
-</div>
   <div class='content-root'>
     <div class='menubar'>
       <div class='menu section' role='flatdoc-menu'></div>
     </div>
     <div role='flatdoc-content' class='content'></div>
   </div>
+  
+  <!-- Initializer -->
+  <script src='js/toc.js' type='text/javascript'></script>
+  <script type='text/javascript'>
+    var GET_VARS = window.location.search.replace("?","").split("&");
+    var doc_to_load = toc[0]; // Default
+    for (i=0; i < toc.length; i+=1) {
+        //Create a link in the sub-nav. TEMPORARY UNTIL BREADCRUMBS
+        //Note: this doesn't work if this script is in the header, before the HTML it modifies
+        $(".header-subnav ul").append("<li><a href='?p="+toc[i].slug+"' id='subnav-"+toc[i].slug+"'>"+toc[i].title+"</a></li>");
 
+        if (GET_VARS.indexOf("p="+toc[i].slug)>-1) {
+            doc_to_load = toc[i];
+            $("#subnav-"+toc[i].slug).addClass("active");
+        }
+    }
+    //Now actually load it
+    document.title = doc_to_load.title + " - Ripple Dev Portal";
+    
+    Flatdoc.run({
+      fetcher: Flatdoc.file(doc_to_load.file)
+    });
+  </script>
 </body>
 </html>
diff --git a/js/toc.js b/js/toc.js
new file mode 100644
index 0000000000..24578983f6
--- /dev/null
+++ b/js/toc.js
@@ -0,0 +1,26 @@
+var toc = [
+    {
+        "file": "intro.md",
+        "title": "Introduction",
+        "slug": "intro",
+        "breadcrumbs": []
+    },
+    {
+        "file": "websocket_api.md",
+        "title": "WebSocket and JSON-RPC APIs",
+        "slug": "websocket",
+        "breadcrumbs": []
+    },
+    {
+        "file": "ripplerest_api.md",
+        "title": "Ripple-REST API",
+        "slug": "ripple-rest",
+        "breadcrumbs": []
+    },
+    {
+        "file": "gatewayd.md",
+        "title": "gatewayd",
+        "slug": "gatewayd",
+        "breadcrumbs": []
+    }
+];
diff --git a/vendor/flatdoc/v/0.8.0/theme-white/style.css b/vendor/flatdoc/v/0.8.0/theme-white/style.css
index fc4fdcbd5a..b859d28405 100644
--- a/vendor/flatdoc/v/0.8.0/theme-white/style.css
+++ b/vendor/flatdoc/v/0.8.0/theme-white/style.css
@@ -1,7 +1,7 @@
 /* ----------------------------------------------------------------------------
  * Fonts
  */
-@import url("https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:300");
+
 /* ----------------------------------------------------------------------------
  * Base
  */