diff --git a/all-imports.html b/all-imports.html
new file mode 100644
index 0000000..e0ae3ff
--- /dev/null
+++ b/all-imports.html
@@ -0,0 +1,2 @@
+    <link rel="import" href="iron-auto-scroll-spy.html">
+    <link rel="import" href="iron-scroll-spy.html">
diff --git a/demo/auto-scroll-spy.html b/demo/auto-scroll-spy.html
index bc42258..3c13c4d 100644
--- a/demo/auto-scroll-spy.html
+++ b/demo/auto-scroll-spy.html
@@ -47,7 +47,7 @@
             <paper-tab>Section D</paper-tab>
           </paper-tabs>
         </paper-toolbar>
-        <iron-auto-scroll-spy selected="{{scrollSelected}}" id="autoScroll">
+        <iron-auto-scroll-spy selected="{{scrollSelected}}" fallback-selection="2" id="autoScroll">
           <div>
             <h1>Section A</h1>
             <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
diff --git a/demo/index.html b/demo/index.html
deleted file mode 100644
index 65c6f59..0000000
--- a/demo/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<!doctype html>
-<!--
-@license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-    <title>iron-scroll-spy Demo</title>
-    <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
-    <link rel="import" href="../iron-scroll-spy.html">
-    <link rel="import" href="../../paper-tabs/paper-tabs.html">
-    <link rel="import" href="../../paper-tabs/paper-tab.html">
-    <link rel="import" href="../../paper-header-panel/paper-header-panel.html">
-    <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
-  </head>
-    <style>
-      body {
-        margin: 0;
-        height: 100vh;
-      }
-      iron-scroll-spy div {
-        padding: 250px;
-        border-bottom: 1px solid grey;
-      }
-  </style>
-  <body unresolved>
-
-    <template is="dom-bind" id="scope">
-      <paper-header-panel class="flex" id="headerPanel">
-        <paper-toolbar>
-          <paper-tabs selected="{{scrollSelected}}">
-            <paper-tab>Section A</paper-tab>
-            <paper-tab>Section B</paper-tab>
-            <paper-tab>Section C</paper-tab>
-            <paper-tab>Section D</paper-tab>
-          </paper-tabs>
-        </paper-toolbar>
-        <iron-scroll-spy selected="{{scrollSelected}}" id="scrollSpy">
-          <div>
-            <h1>Section A</h1>
-            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
-          </div>
-          <div>
-            <h1>Section B</h1>
-            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
-          </div>
-          <div>
-            <h1>Section C</h1>
-            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
-          </div>
-          <div>
-            <h1>Section D</h1>
-            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, provident asperiores. Itaque quas architecto commodi, quam dicta beatae blanditiis obcaecati, voluptatibus, quisquam sint necessitatibus aliquid vero sunt dolor iusto quos!</span>
-          </div>
-        </iron-scroll-spy>
-      </paper-header-panel>
-      <script>
-        var scope = document.getElementById("scope");
-        scope.$.scrollSpy.scrollTarget = scope.$.headerPanel.scroller;
-      </script>
-    </template>
-
-  </body>
-</html>
diff --git a/demo/routing.html b/demo/routing.html
index a53c9d2..2827834 100644
--- a/demo/routing.html
+++ b/demo/routing.html
@@ -44,7 +44,7 @@
   <body unresolved>
 
     <template is="dom-bind" id="scope">
-      <app-location route="{{route}}" use-hash-as-path></app-location>
+      <app-location route="{{route}}" hash="#"></app-location>
       <app-route
           route="{{route}}"
           pattern="/:section"
diff --git a/demo/scroll-spy.html b/demo/scroll-spy.html
new file mode 100644
index 0000000..07cba59
--- /dev/null
+++ b/demo/scroll-spy.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>iron-scroll-spy Demo</title>
+    <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+    <link rel="import" href="../iron-scroll-spy.html">
+  </head>
+    <style>
+      body {
+        margin: 0;
+        height: 100vh;
+      }
+      iron-scroll-spy div {
+        padding: 180px;
+      }
+      iron-scroll-spy div.iron-selected {
+        background: lightgrey;
+      }
+  </style>
+  <body unresolved>
+
+    <template is="dom-bind" id="scope">
+      <iron-scroll-spy selected="{{scrollSelected}}" id="scrollSpy">
+        <div>
+          <h1>Section A</h1>
+        </div>
+        <div>
+          <h1>Section B</h1>
+        </div>
+        <div>
+          <h1>Section C</h1>
+        </div>
+        <div>
+          <h1>Section D</h1>
+        </div>
+      </iron-scroll-spy>
+    </template>
+
+  </body>
+</html>
diff --git a/index.html b/index.html
index be747ba..5f0286e 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@
        match the folder name, add a src="&lt;main-component&gt;.html" attribute,
        where &lt;main-component&gt;.html" is a file that imports all of the
        components you want documented. -->
-  <iron-component-page></iron-component-page>
+  <iron-component-page src="all-imports.html"></iron-component-page>
 
 </body>
 </html>
diff --git a/iron-auto-scroll-spy.html b/iron-auto-scroll-spy.html
index 782f3e3..1c19634 100644
--- a/iron-auto-scroll-spy.html
+++ b/iron-auto-scroll-spy.html
@@ -16,8 +16,7 @@
 Specify the scroll-target and it will select the current element in the viewport as the scroll change.
 Change the selected attribute will result in a smooth scroll to the associated element.
 
-@demo demo/index.html
-@demo demo/routing.html
+@demo demo/auto-scroll-spy.html
 @hero hero.svg
 -->
 
diff --git a/iron-scroll-spy.html b/iron-scroll-spy.html
index 79fe192..5984788 100644
--- a/iron-scroll-spy.html
+++ b/iron-scroll-spy.html
@@ -16,7 +16,7 @@
 Specify the scroll-target and it will select the current element in the viewport as the scroll change.
 Change the selected attribute will result in a smooth scroll to the associated element.
 
-@demo demo/index.html
+@demo demo/scroll-spy.html
 @demo demo/routing.html
 @hero hero.svg
 -->
