diff --git a/index.html b/index.html
index 263c145..4baf64f 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
         <div id="map">
             <hr/>
             <div data-bind="foreach: sections">
-                <a href="#" data-bind="text: name, click: $root.index.bind(null, $index()), css: { selected: $index() === $root.index() }"></a>
+                <a href="#" data-bind="text: displayName, click: $root.index.bind(null, $index()), css: { selected: $index() === $root.index() }"></a>
             </div>
         </div>
     </div>
diff --git a/js/app.js b/js/app.js
index 9afae89..abe5ce7 100644
--- a/js/app.js
+++ b/js/app.js
@@ -4,7 +4,7 @@
         var self = this;
 
         this.sections = ko.observableArray([
-            new Section("intro"),
+            new Section("intro",null, { forceLoad: true, displayName: 'Introduction' } ),
             new Section("points"),
             new Section("one", "sample"),
             new Section("two", "sample"),
diff --git a/js/section.js b/js/section.js
index c2a82bc..45ec8a0 100644
--- a/js/section.js
+++ b/js/section.js
@@ -3,6 +3,7 @@ define(["knockout"], function(ko) {
         var self = this;
         this.name = name;
         this.template = template || name;
+        this.displayName = typeof style === "undefined" ? name : style.displayName || name
         this.data = ko.observable();
         this.style = style;
         this.loaded = false;