diff --git a/example/App.svelte b/example/App.svelte
index 1f3e238..065058b 100644
--- a/example/App.svelte
+++ b/example/App.svelte
@@ -32,12 +32,14 @@
 	import Tutorials from '../src/Tutorials.svelte';
 	let chapters = [
 		{
+      title: 'Entry',
 			content: 'Test',
       code: 'document.body.innerHTML = "Test";',
       solution: 'document.body.innerHTML = "Solution";',
       viewOnly: true
 		},
 		{
+      title: '1: Test',
 			content: 'Test 2',
       code: 'document.body.innerHTML = "Test 2";',
       solution: 'document.body.innerHTML = "Solution 2";console.log("Test")'
diff --git a/package-lock.json b/package-lock.json
index 17fe0d7..cb40fd9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
-  "name": "javascript-tutorials",
-  "version": "0.0.1",
+  "name": "svelte-javascript-tutorials",
+  "version": "0.1.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -282,6 +282,16 @@
         "unset-value": "^1.0.0"
       }
     },
+    "camel-case": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
+      "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=",
+      "dev": true,
+      "requires": {
+        "no-case": "^2.2.0",
+        "upper-case": "^1.1.1"
+      }
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -336,6 +346,28 @@
         }
       }
     },
+    "clean-css": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
+      "integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==",
+      "dev": true,
+      "requires": {
+        "source-map": "~0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "codemirror": {
+      "version": "5.48.2",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.48.2.tgz",
+      "integrity": "sha512-i9VsmC8AfA5ji6EDIZ+aoSe4vt9FcwPLdHB1k1ItFbVyuOFRrcfvnoKqwZlC7EVA2UmTRiNEypE4Uo7YvzVY8Q=="
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -706,7 +738,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -727,12 +760,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -747,17 +782,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -874,7 +912,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -886,6 +925,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -900,6 +940,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -907,12 +948,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -931,6 +974,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -1011,7 +1055,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -1023,6 +1068,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -1108,7 +1154,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -1144,6 +1191,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -1163,6 +1211,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -1206,12 +1255,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -1313,12 +1364,41 @@
         }
       }
     },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true
+    },
     "hosted-git-info": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz",
       "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==",
       "dev": true
     },
+    "html-minifier": {
+      "version": "3.5.21",
+      "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.21.tgz",
+      "integrity": "sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==",
+      "dev": true,
+      "requires": {
+        "camel-case": "3.0.x",
+        "clean-css": "4.2.x",
+        "commander": "2.17.x",
+        "he": "1.2.x",
+        "param-case": "2.1.x",
+        "relateurl": "0.2.x",
+        "uglify-js": "3.4.x"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.17.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
+          "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==",
+          "dev": true
+        }
+      }
+    },
     "inherits": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
@@ -1595,6 +1675,12 @@
       "integrity": "sha512-ykt2pgN0aqIy6KQC1CqdWTWkmUwNgaOS6dcpHVjyBJONA+Xi7AtSB1vuxC/U/0tjIP3wcRudwQk1YYzUvzk2bA==",
       "dev": true
     },
+    "lower-case": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
+      "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=",
+      "dev": true
+    },
     "magic-string": {
       "version": "0.25.2",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.2.tgz",
@@ -1735,6 +1821,15 @@
       "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
       "dev": true
     },
+    "no-case": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
+      "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==",
+      "dev": true,
+      "requires": {
+        "lower-case": "^1.1.1"
+      }
+    },
     "normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -1837,6 +1932,15 @@
       "integrity": "sha1-0YXAQlz9652h0YKQi2W1wCOP67M=",
       "dev": true
     },
+    "param-case": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
+      "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=",
+      "dev": true,
+      "requires": {
+        "no-case": "^2.2.0"
+      }
+    },
     "parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -1957,6 +2061,12 @@
         "safe-regex": "^1.1.0"
       }
     },
+    "relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
+      "dev": true
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -2025,6 +2135,34 @@
         "rollup-pluginutils": "^2.6.0"
       }
     },
+    "rollup-plugin-html": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-html/-/rollup-plugin-html-0.2.1.tgz",
+      "integrity": "sha1-oYYuyoeuVLZ3aJ0NQTORHoImRj0=",
+      "dev": true,
+      "requires": {
+        "html-minifier": "^3.0.2",
+        "rollup-pluginutils": "^1.5.0"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.2.1.tgz",
+          "integrity": "sha1-va/oCVOD2EFNXcLs9MkXO225QS4=",
+          "dev": true
+        },
+        "rollup-pluginutils": {
+          "version": "1.5.2",
+          "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz",
+          "integrity": "sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg=",
+          "dev": true,
+          "requires": {
+            "estree-walker": "^0.2.1",
+            "minimatch": "^3.0.2"
+          }
+        }
+      }
+    },
     "rollup-plugin-livereload": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-1.0.1.tgz",
@@ -2035,15 +2173,27 @@
       }
     },
     "rollup-plugin-node-resolve": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-4.2.4.tgz",
-      "integrity": "sha512-t/64I6l7fZ9BxqD3XlX4ZeO6+5RLKyfpwE2CiPNUKa+GocPlQhf/C208ou8y3AwtNsc6bjSk/8/6y/YAyxCIvw==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz",
+      "integrity": "sha512-jUlyaDXts7TW2CqQ4GaO5VJ4PwwaV8VUGA7+km3n6k6xtOEacf61u0VXwN80phY/evMcaS+9eIeJ9MOyDxt5Zw==",
       "dev": true,
       "requires": {
         "@types/resolve": "0.0.8",
         "builtin-modules": "^3.1.0",
         "is-module": "^1.0.0",
-        "resolve": "^1.10.0"
+        "resolve": "^1.11.1",
+        "rollup-pluginutils": "^2.8.1"
+      },
+      "dependencies": {
+        "resolve": {
+          "version": "1.11.1",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.1.tgz",
+          "integrity": "sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==",
+          "dev": true,
+          "requires": {
+            "path-parse": "^1.0.6"
+          }
+        }
       }
     },
     "rollup-plugin-svelte": {
@@ -2515,6 +2665,30 @@
         "repeat-string": "^1.6.1"
       }
     },
+    "uglify-js": {
+      "version": "3.4.10",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
+      "integrity": "sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==",
+      "dev": true,
+      "requires": {
+        "commander": "~2.19.0",
+        "source-map": "~0.6.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.19.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz",
+          "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
     "ultron": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.0.2.tgz",
@@ -2602,6 +2776,12 @@
       "integrity": "sha512-kXpym8nmDmlCBr7nKdIx8P2jNBa+pBpIUFRnKJ4dr8htyYGJFokkr2ZvERRtUN+9SY+JqXouNgUPtv6JQva/2Q==",
       "dev": true
     },
+    "upper-case": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
+      "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=",
+      "dev": true
+    },
     "urix": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
diff --git a/package.json b/package.json
index a3e1623..dc7b1ac 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "svelte-javascript-tutorials",
   "svelte": "src/Tutorials.svelte",
   "module": "index.mjs",
-  "version": "0.0.10",
+  "version": "0.1.1",
   "description": "",
   "main": "index.js",
   "author": "Mila Frerichs <mila.frerichs@gmail.com>",
@@ -29,7 +29,7 @@
     "codemirror:css": "cp node_modules/codemirror/lib/codemirror.css example/public/codemirror.css ",
     "codemirror:highlight": "cp node_modules/codemirror/mode/javascript/javascript.js example/public/javascript.js",
     "copy": "npm run codemirror:js && npm run codemirror:css && npm run codemirror:highlight",
-    "local": "run-p start:dev autobuild",
+    "start": "run-p copy start:dev autobuild",
     "now-build": "npm run copy && npm run srcdoc && rollup -c example/rollup.config.js"
   },
   "dependencies": {
diff --git a/src/Tutorials.svelte b/src/Tutorials.svelte
index 277eb0d..c3caaa4 100644
--- a/src/Tutorials.svelte
+++ b/src/Tutorials.svelte
@@ -9,15 +9,29 @@
   let completed = false;
   let currentChapter = 0;
   let manualUpdates = false;
+  let toggleText = '';
   let tab = 'viewer';
+  let contentVisible = true;
   export let chapters = [];
   export let cssStyles = {
     container: 'container',
     content: 'content',
     contentContainer: 'content-actions-container',
     resultContainer: 'result-container',
+    progressContainer: 'progress-container',
     viewerContainer: 'viewer-container',
     viewerConsoleContainer: 'viewer-console-container',
+    toggleContentContainer: 'toggle-content-container',
+    chaptersContainer: 'chapters-container',
+    chapters: {
+      current: 'current-chapter',
+      chapters: 'chapters',
+      chapter: 'chapters-chapter'
+    },
+    progress: {
+      container: 'progress',
+      chapter: 'progress-chapter'
+    },
     viewerActions: {
       container: '',
       tabItem: '',
@@ -29,7 +43,8 @@
     button: {
       show: 'show',
       next: 'next',
-      prev: 'prev'
+      prev: 'prev',
+      toggle: 'toggle'
     }
   };
 
@@ -69,16 +84,49 @@
   function showResult() {
     tab = 'viewer';
   }
+  function toggleContent() {
+    contentVisible = !contentVisible;
+  }
 </script>
 
 <style>
   .hidden {
     visibility: hidden;
   }
+  .content-container {
+    transition-property: all;
+    transition-duration: .5s;
+    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+  }
+  .hide-content .content-container{
+    max-width: 0;
+    overflow-x: hidden;
+  }
+  .hide-content .result-container {
+    width: 95%;
+  }
 </style>
 
-<div class="{cssStyles.container}">
-  <div class="{cssStyles.contentContainer}">
+<div class="{cssStyles.container}" class:hide-content="{!contentVisible}">
+  <div class="{cssStyles.chaptersContainer}">
+    <div class="{cssStyles.chapters.current}">{chapter.title}</div>
+    <div class="{cssStyles.chapters.chapters}">
+      {#if currentChapter > 0 }
+        <button class="{cssStyles.button.default} {cssStyles.button.prev}" on:click="{() => prev()}">
+          Previous
+        </button>
+      {/if}
+      {#each chapters as c, i}
+        <div class="{cssStyles.chapters.chapter}" on:click="{() => currentChapter = i}"class:active="{i == currentChapter}">{c.title}</div>
+      {/each}
+      {#if currentChapter < (chapters.length-1) }
+        <button class="{cssStyles.button.default} {cssStyles.button.next}" on:click="{() => next()}">
+          Next
+        </button>
+      {/if}
+    </div>
+  </div>
+  <div class="content-container {cssStyles.contentContainer}">
     <div class="{cssStyles.content}">
       {@html chapter.content}
     </div>
@@ -100,7 +148,10 @@
       {/if}
     </div>
   </div>
-  <div class="{cssStyles.resultContainer}">
+  <div class="{cssStyles.toggleContentContainer}">
+    <button class="{cssStyles.button.default} {cssStyles.button.toggle}" on:click="{() => toggleContent()}">{toggleText}</button>
+  </div>
+  <div class="result-container {cssStyles.resultContainer}">
     {#if !chapter.viewOnly }
       <div class:hidden="{chapter.viewOnly}" class="{cssStyles.editor}">
         <Editor bind:this={editor} on:change={changeCode}/>
@@ -125,4 +176,11 @@
       </div>
     </div>
   </div>
+  <div class="{cssStyles.progressContainer}">
+    <div class="{cssStyles.progress.container}">
+      {#each chapters as c, i}
+        <div class="{cssStyles.progress.chapter}" class:active="{i == currentChapter}"></div>
+      {/each}
+    </div>
+  </div>
 </div>