diff --git a/src/default.htl b/src/default.htl
index e2a4397..2e7f956 100644
--- a/src/default.htl
+++ b/src/default.htl
@@ -12,19 +12,7 @@
         </div>
         <div class="main">
             <div class="nav">
-                <ul>
-                    <li>Getting Started
-                        <ul>
-                            <li>Release Notes</li>
-                            <li>Videos</li>
-                        </ul>
-                    </li>
-                    <li>Managing Resources</li>
-                    <li>Publishing</li>
-                    <li>Client-side Information</li>
-                    <li>Administration</li>
-                    <li>Extension Reference</li>
-                </ul>
+                <div data-sly-test="${it.nav}" data-sly-list="${it.nav}">${item}</div>
             </div>
             <div class="content">
                 <div class="content-body">
diff --git a/src/default.pre.js b/src/default.pre.js
index eba5441..275f3bb 100644
--- a/src/default.pre.js
+++ b/src/default.pre.js
@@ -1,5 +1,6 @@
 const moment = require('moment');
 const request = require('request-promise');
+const md2json = require('md2json');
 
 /**
  * Removes the first title from the resource children
@@ -17,7 +18,9 @@ function removeFirstTitle(ctx) {
 function collectMetadata(ctx) {
     const options = {
         uri:
-            ctx.strandConfig.content.api + 
+            ctx.strandConfig.urls.content.apiRoot + 
+            '/repos/' +
+            ctx.strandConfig.urls.content.repo +
             '/commits?path=' + 
             ctx.resourcePath +
             '.md',
@@ -34,6 +37,32 @@ function collectMetadata(ctx) {
     });
 };
 
+/**
+ * Collects the nav and append it to the resource
+ * @param {RequestContext} ctx Context
+ */
+function collectNav(ctx) {
+    const params = {
+        org: ctx.strandConfig.urls.content.owner,
+        repo: ctx.strandConfig.urls.content.name,
+        tree: ctx.strandConfig.urls.content.ref,
+        path: 'SUMMARY.md'
+    };
+
+    return md2json.main(params).then(info => {
+        let nav = info.body.children;
+        // remove first title
+        delete nav[0];
+
+        // link re-writing
+        // TODO: move into md2json + parameters
+        ctx.resource.nav = nav.map(element => {
+            return element.replace(new RegExp('href="', 'g'), 'href="/' + ctx.strand + '/');
+        });
+        return Promise.resolve(ctx);
+    });
+};
+
 /**
  * Extracts some committers data from the list of commits and appends the list to the resource
  * @param {RequestContext} ctx Context
@@ -80,6 +109,7 @@ module.exports.main = function (ctx) {
         .then(collectMetadata)
         .then(extractCommittersFromMetadata)
         .then(extractLastModifiedFromMetadata)
+        .then(collectNav)
         .catch(error => {
             console.error('Error while executing default.pre.js', error);
         });
diff --git a/src/dist/styles.css b/src/dist/styles.css
index 7babaa5..61f8d9a 100644
--- a/src/dist/styles.css
+++ b/src/dist/styles.css
@@ -57,19 +57,33 @@ h1 {
     color: #aaa;
 }
 
+.nav ul li ul a {
+    list-style: none;
+    color: #aaa;
+}
 
-.nav ul li.open {
+.nav a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.nav ul li.open, .nav ul li.open a {
     list-style-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="xMidYMid meet" height="1em" width="1em" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor" class="_13gjrqj"><g><polyline points="6 9 12 15 18 9"></polyline></g></svg>');
 }
 
-.nav ul li.selected {
+.nav ul li.selected, .nav ul li.selected a {
     color: #e00;
 }
 
-.nav ul li {
+.nav ul li, .nav ul li a {
     padding-top: 5px;
     padding-bottom: 5px;
-    
+}
+
+.nav ul li p {
+    font-size: 16px;
+    line-height: 1.5em;
+    margin: 0;
 }
 
 .content {