diff --git a/.codeclimate.yml b/.codeclimate.yml
index ee3a5fdacb7..99e66913cb2 100644
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@@ -4,6 +4,8 @@ engines:
     config:
       languages:
       - javascript
+    exclude_paths:
+    - "samples/samples.js"
   eslint:
     enabled: true
     channel: "eslint-3"
diff --git a/samples/data_labelling.html b/samples/advanced/data-labelling.html
similarity index 98%
rename from samples/data_labelling.html
rename to samples/advanced/data-labelling.html
index 8c64bcf0920..17fc47c8f99 100644
--- a/samples/data_labelling.html
+++ b/samples/advanced/data-labelling.html
@@ -4,8 +4,8 @@
 
 <head>
     <title>Labelling Data Points</title>
-    <script src="../dist/Chart.bundle.js"></script>
-    <script src="utils.js"></script>
+    <script src="../../dist/Chart.bundle.js"></script>
+    <script src="../utils.js"></script>
     <style>
     canvas {
         -moz-user-select: none;
diff --git a/samples/animation/progress-bar.html b/samples/advanced/progress-bar.html
similarity index 100%
rename from samples/animation/progress-bar.html
rename to samples/advanced/progress-bar.html
diff --git a/samples/area/analyser.js b/samples/charts/area/analyser.js
similarity index 100%
rename from samples/area/analyser.js
rename to samples/charts/area/analyser.js
diff --git a/samples/area/line-boundaries.html b/samples/charts/area/line-boundaries.html
similarity index 94%
rename from samples/area/line-boundaries.html
rename to samples/charts/area/line-boundaries.html
index ca0aab3a79e..6f1f927a920 100644
--- a/samples/area/line-boundaries.html
+++ b/samples/charts/area/line-boundaries.html
@@ -5,9 +5,9 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>area > boundaries | Chart.js sample</title>
-	<link rel="stylesheet" type="text/css" href="../style.css">
-	<script src="../../dist/Chart.bundle.js"></script>
-	<script src="../utils.js"></script>
+	<link rel="stylesheet" type="text/css" href="../../style.css">
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
 	<script src="analyser.js"></script>
 </head>
 <body>
diff --git a/samples/area/line-datasets.html b/samples/charts/area/line-datasets.html
similarity index 95%
rename from samples/area/line-datasets.html
rename to samples/charts/area/line-datasets.html
index 37719df26b3..7bc54e3138a 100644
--- a/samples/area/line-datasets.html
+++ b/samples/charts/area/line-datasets.html
@@ -5,9 +5,9 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>area > datasets | Chart.js sample</title>
-	<link rel="stylesheet" type="text/css" href="../style.css">
-	<script src="../../dist/Chart.bundle.js"></script>
-	<script src="../utils.js"></script>
+	<link rel="stylesheet" type="text/css" href="../../style.css">
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
 	<script src="analyser.js"></script>
 </head>
 <body>
diff --git a/samples/line/line-stacked-area.html b/samples/charts/area/line-stacked.html
similarity index 76%
rename from samples/line/line-stacked-area.html
rename to samples/charts/area/line-stacked.html
index 041c9a84b72..26ee6b18f8f 100644
--- a/samples/line/line-stacked-area.html
+++ b/samples/charts/area/line-stacked.html
@@ -3,8 +3,8 @@
 
 <head>
 	<title>Line Chart</title>
-	<script src="../../dist/Chart.bundle.js"></script>
-	<script src="../utils.js"></script>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
 	<style>
 		canvas {
 				-moz-user-select: none;
@@ -36,12 +36,12 @@
 					borderColor: window.chartColors.red,
 					backgroundColor: window.chartColors.red,
 					data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
                         randomScalingFactor()
                     ],
 				}, {
@@ -49,12 +49,12 @@
 					borderColor: window.chartColors.blue,
 					backgroundColor: window.chartColors.blue,
 					data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
                         randomScalingFactor()
                     ],
 				}, {
@@ -62,12 +62,12 @@
 					borderColor: window.chartColors.green,
 					backgroundColor: window.chartColors.green,
 					data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
                         randomScalingFactor()
                     ],
 				}, {
@@ -75,12 +75,12 @@
 					borderColor: window.chartColors.yellow,
 					backgroundColor: window.chartColors.yellow,
 					data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
                         randomScalingFactor()
                     ],
 				}]
diff --git a/samples/area/radar.html b/samples/charts/area/radar.html
similarity index 95%
rename from samples/area/radar.html
rename to samples/charts/area/radar.html
index 23f2bdd3627..1c5a0df9ecd 100644
--- a/samples/area/radar.html
+++ b/samples/charts/area/radar.html
@@ -5,9 +5,9 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>area > radar | Chart.js sample</title>
-	<link rel="stylesheet" type="text/css" href="../style.css">
-	<script src="../../dist/Chart.bundle.js"></script>
-	<script src="../utils.js"></script>
+	<link rel="stylesheet" type="text/css" href="../../style.css">
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
 	<script src="analyser.js"></script>
 </head>
 <body>
diff --git a/samples/bar/bar-horizontal.html b/samples/charts/bar/horizontal.html
similarity index 88%
rename from samples/bar/bar-horizontal.html
rename to samples/charts/bar/horizontal.html
index affcc334927..0cfb78e84d0 100644
--- a/samples/bar/bar-horizontal.html
+++ b/samples/charts/bar/horizontal.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Horizontal Bar Chart</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
+    <script src="../../../dist/Chart.bundle.js"></script>
+    <script src="../../utils.js"></script>
     <style>
     canvas {
         -moz-user-select: none;
@@ -34,12 +34,12 @@
                 borderColor: window.chartColors.red,
                 borderWidth: 1,
                 data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
                     randomScalingFactor()
                 ]
             }, {
@@ -47,12 +47,12 @@
                 backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                 borderColor: window.chartColors.blue,
                 data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
                     randomScalingFactor()
                 ]
             }]
diff --git a/samples/bar/bar-multi-axis.html b/samples/charts/bar/multi-axis.html
similarity index 82%
rename from samples/bar/bar-multi-axis.html
rename to samples/charts/bar/multi-axis.html
index b35e89055ea..28755a701a5 100644
--- a/samples/bar/bar-multi-axis.html
+++ b/samples/charts/bar/multi-axis.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Bar Chart Multi Axis</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
+    <script src="../../../dist/Chart.bundle.js"></script>
+    <script src="../../utils.js"></script>
     <style>
     canvas {
         -moz-user-select: none;
@@ -35,12 +35,12 @@
             ],
             yAxisID: "y-axis-1",
             data: [
-                randomScalingFactor(), 
-                randomScalingFactor(), 
-                randomScalingFactor(), 
-                randomScalingFactor(), 
-                randomScalingFactor(), 
-                randomScalingFactor(), 
+                randomScalingFactor(),
+                randomScalingFactor(),
+                randomScalingFactor(),
+                randomScalingFactor(),
+                randomScalingFactor(),
+                randomScalingFactor(),
                 randomScalingFactor()
             ]
         }, {
@@ -48,12 +48,12 @@
             backgroundColor: window.chartColors.grey,
             yAxisID: "y-axis-2",
             data: [
-                randomScalingFactor(), 
-                randomScalingFactor(), 
-                randomScalingFactor(), 
-                randomScalingFactor(), 
-                randomScalingFactor(), 
-                randomScalingFactor(), 
+                randomScalingFactor(),
+                randomScalingFactor(),
+                randomScalingFactor(),
+                randomScalingFactor(),
+                randomScalingFactor(),
+                randomScalingFactor(),
                 randomScalingFactor()
             ]
         }]
@@ -63,7 +63,7 @@
         var ctx = document.getElementById("canvas").getContext("2d");
         window.myBar = new Chart(ctx, {
             type: 'bar',
-            data: barChartData, 
+            data: barChartData,
             options: {
                 responsive: true,
                 title:{
diff --git a/samples/bar/bar-stacked-group.html b/samples/charts/bar/stacked-group.html
similarity index 73%
rename from samples/bar/bar-stacked-group.html
rename to samples/charts/bar/stacked-group.html
index 074e3eac08c..624992cfb4a 100644
--- a/samples/bar/bar-stacked-group.html
+++ b/samples/charts/bar/stacked-group.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Stacked Bar Chart with Groups</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
+    <script src="../../../dist/Chart.bundle.js"></script>
+    <script src="../../utils.js"></script>
     <style>
     canvas {
         -moz-user-select: none;
@@ -27,12 +27,12 @@
                 backgroundColor: window.chartColors.red,
                 stack: 'Stack 0',
                 data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
                     randomScalingFactor()
                 ]
             }, {
@@ -40,12 +40,12 @@
                 backgroundColor: window.chartColors.blue,
                 stack: 'Stack 0',
                 data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
                     randomScalingFactor()
                 ]
             }, {
@@ -53,12 +53,12 @@
                 backgroundColor: window.chartColors.green,
                 stack: 'Stack 1',
                 data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
                     randomScalingFactor()
                 ]
             }]
diff --git a/samples/bar/bar-stacked.html b/samples/charts/bar/stacked.html
similarity index 72%
rename from samples/bar/bar-stacked.html
rename to samples/charts/bar/stacked.html
index f80b1b6ed90..46d1c4051f3 100644
--- a/samples/bar/bar-stacked.html
+++ b/samples/charts/bar/stacked.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Stacked Bar Chart</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
+    <script src="../../../dist/Chart.bundle.js"></script>
+    <script src="../../utils.js"></script>
     <style>
     canvas {
         -moz-user-select: none;
@@ -26,36 +26,36 @@
                 label: 'Dataset 1',
                 backgroundColor: window.chartColors.red,
                 data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
                     randomScalingFactor()
                 ]
             }, {
                 label: 'Dataset 2',
                 backgroundColor: window.chartColors.blue,
                 data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
                     randomScalingFactor()
                 ]
             }, {
                 label: 'Dataset 3',
                 backgroundColor: window.chartColors.green,
                 data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
                     randomScalingFactor()
                 ]
             }]
diff --git a/samples/bar/bar.html b/samples/charts/bar/vertical.html
similarity index 87%
rename from samples/bar/bar.html
rename to samples/charts/bar/vertical.html
index d2fc4acaced..906b4624c39 100644
--- a/samples/bar/bar.html
+++ b/samples/charts/bar/vertical.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Bar Chart</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
+    <script src="../../../dist/Chart.bundle.js"></script>
+    <script src="../../utils.js"></script>
     <style>
     canvas {
         -moz-user-select: none;
@@ -34,12 +34,12 @@
                 borderColor: window.chartColors.red,
                 borderWidth: 1,
                 data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
                     randomScalingFactor()
                 ]
             }, {
@@ -48,12 +48,12 @@
                 borderColor: window.chartColors.blue,
                 borderWidth: 1,
                 data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
                     randomScalingFactor()
                 ]
             }]
diff --git a/samples/bubble.html b/samples/charts/bubble.html
similarity index 98%
rename from samples/bubble.html
rename to samples/charts/bubble.html
index d62d6375970..0df09477f5c 100644
--- a/samples/bubble.html
+++ b/samples/charts/bubble.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Bubble Chart</title>
-    <script src="../dist/Chart.bundle.js"></script>
-    <script src="utils.js"></script>
+    <script src="../../dist/Chart.bundle.js"></script>
+    <script src="../utils.js"></script>
     <style type="text/css">
     canvas{
         -moz-user-select: none;
diff --git a/samples/combo-bar-line.html b/samples/charts/combo-bar-line.html
similarity index 72%
rename from samples/combo-bar-line.html
rename to samples/charts/combo-bar-line.html
index c8b5a08f865..0906029c41d 100644
--- a/samples/combo-bar-line.html
+++ b/samples/charts/combo-bar-line.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Combo Bar-Line Chart</title>
-    <script src="../dist/Chart.bundle.js"></script>
-    <script src="utils.js"></script>
+    <script src="../../dist/Chart.bundle.js"></script>
+    <script src="../utils.js"></script>
     <style>
     canvas {
         -moz-user-select: none;
@@ -29,12 +29,12 @@
                 borderWidth: 2,
                 fill: false,
                 data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
                     randomScalingFactor()
                 ]
             }, {
@@ -42,12 +42,12 @@
                 label: 'Dataset 2',
                 backgroundColor: window.chartColors.red,
                 data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
                     randomScalingFactor()
                 ],
                 borderColor: 'white',
@@ -57,12 +57,12 @@
                 label: 'Dataset 3',
                 backgroundColor: window.chartColors.green,
                 data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
                     randomScalingFactor()
                 ]
             }]
diff --git a/samples/doughnut.html b/samples/charts/doughnut.html
similarity index 97%
rename from samples/doughnut.html
rename to samples/charts/doughnut.html
index 51b98a82a4d..b288fe1293f 100644
--- a/samples/doughnut.html
+++ b/samples/charts/doughnut.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Doughnut Chart</title>
-    <script src="../dist/Chart.bundle.js"></script>
-    <script src="utils.js"></script>
+    <script src="../../dist/Chart.bundle.js"></script>
+    <script src="../utils.js"></script>
     <style>
     canvas {
         -moz-user-select: none;
diff --git a/samples/line/line.html b/samples/charts/line/basic.html
similarity index 87%
rename from samples/line/line.html
rename to samples/charts/line/basic.html
index 68ae7e5f60c..db01ccf743d 100644
--- a/samples/line/line.html
+++ b/samples/charts/line/basic.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Line Chart</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
+    <script src="../../../dist/Chart.bundle.js"></script>
+    <script src="../../utils.js"></script>
     <style>
     canvas{
         -moz-user-select: none;
@@ -36,12 +36,12 @@
                     backgroundColor: window.chartColors.red,
                     borderColor: window.chartColors.red,
                     data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
                         randomScalingFactor()
                     ],
                     fill: false,
@@ -51,12 +51,12 @@
                     backgroundColor: window.chartColors.blue,
                     borderColor: window.chartColors.blue,
                     data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
                         randomScalingFactor()
                     ],
                 }]
diff --git a/samples/line/interpolation-modes.html b/samples/charts/line/interpolation-modes.html
similarity index 96%
rename from samples/line/interpolation-modes.html
rename to samples/charts/line/interpolation-modes.html
index ff75210a602..374da49c083 100644
--- a/samples/line/interpolation-modes.html
+++ b/samples/charts/line/interpolation-modes.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Line Chart - Cubic interpolation mode</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
+    <script src="../../../dist/Chart.bundle.js"></script>
+    <script src="../../utils.js"></script>
     <style>
     canvas{
         -moz-user-select: none;
@@ -100,4 +100,4 @@
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/samples/line/line-styles.html b/samples/charts/line/line-styles.html
similarity index 73%
rename from samples/line/line-styles.html
rename to samples/charts/line/line-styles.html
index 0ac3aabdb4b..ed268e1fdb4 100644
--- a/samples/line/line-styles.html
+++ b/samples/charts/line/line-styles.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Line Styles</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
+    <script src="../../../dist/Chart.bundle.js"></script>
+    <script src="../../utils.js"></script>
     <style>
     canvas{
         -moz-user-select: none;
@@ -29,12 +29,12 @@
                     backgroundColor: window.chartColors.blue,
                     borderColor: window.chartColors.blue,
                     data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
                         randomScalingFactor()
                     ],
                 }, {
@@ -44,12 +44,12 @@
                     borderColor: window.chartColors.green,
                     borderDash: [5, 5],
                     data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
                         randomScalingFactor()
                     ],
                 }, {
@@ -57,12 +57,12 @@
                     backgroundColor: window.chartColors.red,
                     borderColor: window.chartColors.red,
                     data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
                         randomScalingFactor()
                     ],
                     fill: true,
diff --git a/samples/line/line-multi-axis.html b/samples/charts/line/multi-axis.html
similarity index 82%
rename from samples/line/line-multi-axis.html
rename to samples/charts/line/multi-axis.html
index debdf369f88..2ede74446ae 100644
--- a/samples/line/line-multi-axis.html
+++ b/samples/charts/line/multi-axis.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Line Chart Multiple Axes</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
+    <script src="../../../dist/Chart.bundle.js"></script>
+    <script src="../../utils.js"></script>
     <style>
     canvas {
         -moz-user-select: none;
@@ -28,12 +28,12 @@
             backgroundColor: window.chartColors.red,
             fill: false,
             data: [
-                randomScalingFactor(), 
-                randomScalingFactor(), 
-                randomScalingFactor(), 
-                randomScalingFactor(), 
-                randomScalingFactor(), 
-                randomScalingFactor(), 
+                randomScalingFactor(),
+                randomScalingFactor(),
+                randomScalingFactor(),
+                randomScalingFactor(),
+                randomScalingFactor(),
+                randomScalingFactor(),
                 randomScalingFactor()
             ],
             yAxisID: "y-axis-1",
@@ -43,12 +43,12 @@
             backgroundColor: window.chartColors.blue,
             fill: false,
             data: [
-                randomScalingFactor(), 
-                randomScalingFactor(), 
-                randomScalingFactor(), 
-                randomScalingFactor(), 
-                randomScalingFactor(), 
-                randomScalingFactor(), 
+                randomScalingFactor(),
+                randomScalingFactor(),
+                randomScalingFactor(),
+                randomScalingFactor(),
+                randomScalingFactor(),
+                randomScalingFactor(),
                 randomScalingFactor()
             ],
             yAxisID: "y-axis-2"
diff --git a/samples/line/different-point-sizes.html b/samples/charts/line/point-sizes.html
similarity index 73%
rename from samples/line/different-point-sizes.html
rename to samples/charts/line/point-sizes.html
index ed52cf0ae6d..823c6d3e41c 100644
--- a/samples/line/different-point-sizes.html
+++ b/samples/charts/line/point-sizes.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Different Point Sizes</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
+    <script src="../../../dist/Chart.bundle.js"></script>
+    <script src="../../utils.js"></script>
     <style>
         canvas {
             -moz-user-select: none;
@@ -27,12 +27,12 @@
                 datasets: [{
                     label: "dataset - big points",
                     data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
                         randomScalingFactor()
                     ],
                     backgroundColor: window.chartColors.red,
@@ -44,12 +44,12 @@
                 }, {
                     label: "dataset - individual point sizes",
                     data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
                         randomScalingFactor()
                     ],
                     backgroundColor: window.chartColors.blue,
@@ -60,12 +60,12 @@
                 }, {
                     label: "dataset - large pointHoverRadius",
                     data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
                         randomScalingFactor()
                     ],
                     backgroundColor: window.chartColors.green,
@@ -75,12 +75,12 @@
                 }, {
                     label: "dataset - large pointHitRadius",
                     data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
                         randomScalingFactor()
                     ],
                     backgroundColor: window.chartColors.yellow,
diff --git a/samples/line/point-styles.html b/samples/charts/line/point-styles.html
similarity index 96%
rename from samples/line/point-styles.html
rename to samples/charts/line/point-styles.html
index 0056e749976..1985d394d23 100644
--- a/samples/line/point-styles.html
+++ b/samples/charts/line/point-styles.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Line Chart</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
+    <script src="../../../dist/Chart.bundle.js"></script>
+    <script src="../../utils.js"></script>
     <style>
     canvas{
         -moz-user-select: none;
diff --git a/samples/line/line-skip-points.html b/samples/charts/line/skip-points.html
similarity index 77%
rename from samples/line/line-skip-points.html
rename to samples/charts/line/skip-points.html
index bb8c8c4c83f..00aa81fe045 100644
--- a/samples/line/line-skip-points.html
+++ b/samples/charts/line/skip-points.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Line Chart</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
+    <script src="../../../dist/Chart.bundle.js"></script>
+    <script src="../../utils.js"></script>
     <style>
     canvas {
         -moz-user-select: none;
@@ -29,12 +29,12 @@
                     fill: false,
                     // Skip a point in the middle
                     data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        NaN, 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        NaN,
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
                         randomScalingFactor()
                     ],
 
@@ -44,12 +44,12 @@
                     fill: false,
                     // Skip first and last points
                     data: [
-                        NaN, 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
+                        NaN,
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
                         NaN
                     ],
                 }]
diff --git a/samples/line/line-stepped.html b/samples/charts/line/stepped.html
similarity index 77%
rename from samples/line/line-stepped.html
rename to samples/charts/line/stepped.html
index ff1bf2a6e2d..8650f55da15 100644
--- a/samples/line/line-stepped.html
+++ b/samples/charts/line/stepped.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Stepped Line Chart</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
+    <script src="../../../dist/Chart.bundle.js"></script>
+    <script src="../../utils.js"></script>
     <style>
     canvas{
         -moz-user-select: none;
@@ -28,12 +28,12 @@
                     borderColor: window.chartColors.red,
                     backgroundColor: window.chartColors.red,
                     data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
                         randomScalingFactor()
                     ],
                     fill: false,
@@ -44,12 +44,12 @@
                     borderColor: window.chartColors.blue,
                     backgroundColor: window.chartColors.blue,
                     data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
+                        randomScalingFactor(),
                         randomScalingFactor()
                     ],
                     fill: false,
diff --git a/samples/pie.html b/samples/charts/pie.html
similarity index 96%
rename from samples/pie.html
rename to samples/charts/pie.html
index c299af96190..e931cee3fde 100644
--- a/samples/pie.html
+++ b/samples/charts/pie.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Pie Chart</title>
-    <script src="../dist/Chart.bundle.js"></script>
-    <script src="utils.js"></script>
+    <script src="../../dist/Chart.bundle.js"></script>
+    <script src="../utils.js"></script>
 </head>
 
 <body>
diff --git a/samples/polar-area.html b/samples/charts/polar-area.html
similarity index 97%
rename from samples/polar-area.html
rename to samples/charts/polar-area.html
index 48fe984afab..3981651de74 100644
--- a/samples/polar-area.html
+++ b/samples/charts/polar-area.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Polar Area Chart</title>
-    <script src="../dist/Chart.bundle.js"></script>
-    <script src="utils.js"></script>
+    <script src="../../dist/Chart.bundle.js"></script>
+    <script src="../utils.js"></script>
     <style>
     canvas {
         -moz-user-select: none;
diff --git a/samples/radar/radar-skip-points.html b/samples/charts/radar-skip-points.html
similarity index 100%
rename from samples/radar/radar-skip-points.html
rename to samples/charts/radar-skip-points.html
diff --git a/samples/radar/radar.html b/samples/charts/radar.html
similarity index 88%
rename from samples/radar/radar.html
rename to samples/charts/radar.html
index 586e2df7aec..fbbb9d972bc 100644
--- a/samples/radar/radar.html
+++ b/samples/charts/radar.html
@@ -39,12 +39,12 @@
                 borderColor: window.chartColors.red,
                 pointBackgroundColor: window.chartColors.red,
                 data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
                     randomScalingFactor()
                 ]
             }, {
@@ -53,12 +53,12 @@
                 borderColor: window.chartColors.blue,
                 pointBackgroundColor: window.chartColors.blue,
                 data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
                     randomScalingFactor()
                 ]
             },]
diff --git a/samples/scatter/scatter.html b/samples/charts/scatter/basic.html
similarity index 97%
rename from samples/scatter/scatter.html
rename to samples/charts/scatter/basic.html
index b8ac32b8f1e..c5e36e9d99c 100644
--- a/samples/scatter/scatter.html
+++ b/samples/charts/scatter/basic.html
@@ -3,8 +3,8 @@
 
 <head>
     <title>Scatter Chart</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
+    <script src="../../../dist/Chart.bundle.js"></script>
+    <script src="../../utils.js"></script>
     <style>
     canvas {
         -moz-user-select: none;
diff --git a/samples/scatter/scatter-multi-axis.html b/samples/charts/scatter/multi-axis.html
similarity index 97%
rename from samples/scatter/scatter-multi-axis.html
rename to samples/charts/scatter/multi-axis.html
index aedcd3daa0b..cbf3bf73a8a 100644
--- a/samples/scatter/scatter-multi-axis.html
+++ b/samples/charts/scatter/multi-axis.html
@@ -3,8 +3,8 @@
 
 <head>
 	<title>Scatter Chart Multi Axis</title>
-	<script src="../../dist/Chart.bundle.js"></script>
-	<script src="../utils.js"></script>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
 	<style>
 	canvas {
 		-moz-user-select: none;
@@ -111,7 +111,7 @@
 						position: "right",
 						reverse: true,
 						id: "y-axis-2",
-				
+
 						// grid line settings
 						gridLines: {
 							drawOnChartArea: false, // only want the grid lines for one axis to show up
diff --git a/samples/favicon.ico b/samples/favicon.ico
new file mode 100644
index 00000000000..5192a328567
Binary files /dev/null and b/samples/favicon.ico differ
diff --git a/samples/index.html b/samples/index.html
new file mode 100644
index 00000000000..d7c67934301
--- /dev/null
+++ b/samples/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" type="text/css" href="style.css">
+	<link rel="icon" href="favicon.ico">
+	<script src="samples.js"></script>
+	<title>Chart.js samples</title>
+</head>
+<body>
+	<div class="content">
+		<div class="header">
+			<div class="chartjs-title">Samples</div>
+			<div class="chartjs-caption">Simple yet flexible JavaScript charting for designers &amp; developers</div>
+			<div class="chartjs-links">
+				<a class="btn btn-chartjs" href="http://www.chartjs.org">Website</a>
+				<a class="btn btn-docs" href="http://www.chartjs.org/docs">Documentation</a>
+				<a class="btn btn-gh" href="https://github.com/chartjs/Chart.js">GitHub</a>
+			</div>
+		</div>
+
+		<div id="categories" class="samples-categories"></div>
+	</div>
+
+	<script>
+		function createCategory(item) {
+			var el = document.createElement('div');
+			el.className = 'samples-category';
+			el.innerHTML =
+				'<div class="title">' + item.title + '</div>' +
+				'<div class="items"></div>';
+			return el;
+		}
+
+		function createEntry(item) {
+			var el = document.createElement('div');
+			el.className = 'samples-entry';
+			el.innerHTML = '<a class="title" href="' + item.path + '">' + item.title + '</a>';
+			return el;
+		}
+
+		var categories = document.getElementById('categories');
+		Samples.items.forEach(function(item) {
+			var category = createCategory(item);
+			var children = category.getElementsByClassName('items')[0];
+
+			(item.items || []).forEach(function(item) {
+				children.appendChild(createEntry(item));
+			});
+
+			categories.appendChild(category);
+		});
+	</script>
+</body>
+</html>
diff --git a/samples/legend/pointstyle.html b/samples/legend/point-style.html
similarity index 100%
rename from samples/legend/pointstyle.html
rename to samples/legend/point-style.html
diff --git a/samples/legend/positions.html b/samples/legend/positioning.html
similarity index 100%
rename from samples/legend/positions.html
rename to samples/legend/positioning.html
diff --git a/samples/logo.svg b/samples/logo.svg
new file mode 100644
index 00000000000..24f5a2bf0ed
--- /dev/null
+++ b/samples/logo.svg
@@ -0,0 +1 @@
+<svg width="160" height="160" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg"><title>Artboard 6</title><g fill="none" fill-rule="evenodd"><path d="M144.086 80.568c-21.978.43-17.402 14.346-32.89 17.866C95.46 102.01 92.975 60 77.243 60c-15.733 0-19.216 40.806-38.918 68.823l-.56.794L80 154l64.086-37V80.568z" fill="#36A2EB"/><path d="M144.086 79.3C136.726 69.856 131.736 59 121 59c-19 0-14 31-35 31s-23.207-33.346-47-2c-7.58 9.988-13.682 21.124-18.475 31.662L80 154l64.086-37V79.3z" fill="#FFCE56"/><path d="M15.914 92.143C23.124 72.173 26.237 56 40 56c21 0 26 59 44 53s16-38 44-38c5.33 0 10.772 3.263 16.086 8.546V117L80 154l-64.086-37V92.143z" fill-opacity=".8" fill="#FE6184"/><path stroke="#E7E9ED" stroke-width="8" d="M80 6l64.086 37v74L80 154l-64.086-37V43z"/></g></svg>
\ No newline at end of file
diff --git a/samples/samples.js b/samples/samples.js
new file mode 100644
index 00000000000..c3d489cdb5b
--- /dev/null
+++ b/samples/samples.js
@@ -0,0 +1,181 @@
+(function(global) {
+
+	var Samples = global.Samples || (global.Samples = {});
+
+	Samples.items = [{
+		title: 'Bar charts',
+		items: [{
+			title: 'Vertical',
+			path: 'charts/bar/vertical.html'
+		}, {
+			title: 'Horizontal',
+			path: 'charts/bar/horizontal.html'
+		}, {
+			title: 'Multi axis',
+			path: 'charts/bar/multi-axis.html'
+		}, {
+			title: 'Stacked',
+			path: 'charts/bar/stacked.html'
+		}, {
+			title: 'Stacked groups',
+			path: 'charts/bar/stacked-group.html'
+		}]
+	}, {
+		title: 'Line charts',
+		items: [{
+			title: 'Basic',
+			path: 'charts/line/basic.html'
+		}, {
+			title: 'Multi axis',
+			path: 'charts/line/multi-axis.html'
+		}, {
+			title: 'Stepped',
+			path: 'charts/line/stepped.html'
+		}, {
+			title: 'Interpolation',
+			path: 'charts/line/interpolation-modes.html'
+		}, {
+			title: 'Line styles',
+			path: 'charts/line/line-styles.html'
+		}, {
+			title: 'Point styles',
+			path: 'charts/line/point-styles.html'
+		}, {
+			title: 'Point sizes',
+			path: 'charts/line/point-sizes.html'
+		}]
+	}, {
+		title: 'Area charts',
+		items: [{
+			title: 'Boundaries (line)',
+			path: 'charts/area/line-boundaries.html'
+		}, {
+			title: 'Datasets (line)',
+			path: 'charts/area/line-datasets.html'
+		}, {
+			title: 'Stacked (line)',
+			path: 'charts/area/line-stacked.html'
+		}, {
+			title: 'Radar',
+			path: 'charts/area/radar.html'
+		}]
+	}, {
+		title: 'Other charts',
+		items: [{
+			title: 'Scatter',
+			path: 'charts/scatter/basic.html'
+		}, {
+			title: 'Scatter - Multi axis',
+			path: 'charts/scatter/multi-axis.html'
+		}, {
+			title: 'Doughnut',
+			path: 'charts/doughnut.html'
+		}, {
+			title: 'Pie',
+			path: 'charts/pie.html'
+		}, {
+			title: 'Polar area',
+			path: 'charts/polar-area.html'
+		}, {
+			title: 'Radar',
+			path: 'charts/radar.html'
+		}, {
+			title: 'Combo bar/line',
+			path: 'charts/combo-bar-line.html'
+		}]
+	}, {
+		title: 'Linear scale',
+		items: [{
+			title: 'Step size',
+			path: 'scales/linear/step-size.html'
+		}, {
+			title: 'Min & max',
+			path: 'scales/linear/min-max.html'
+		}, {
+			title: 'Min & max (suggested)',
+			path: 'scales/linear/min-max-suggested.html'
+		}]
+	}, {
+		title: 'Logarithmic scale',
+		items: [{
+			title: 'Line',
+			path: 'scales/logarithmic/line.html'
+		}, {
+			title: 'Scatter',
+			path: 'scales/logarithmic/scatter.html'
+		}]
+	}, {
+		title: 'Time scale',
+		items: [{
+			title: 'Line',
+			path: 'scales/time/line.html'
+		}, {
+			title: 'Line (point data)',
+			path: 'scales/time/line.html'
+		}, {
+			title: 'Combo',
+			path: 'scales/time/combo.html'
+		}]
+	}, {
+		title: 'Scale options',
+		items: [{
+			title: 'Grid lines display',
+			path: 'scales/gridlines-display.html'
+		}, {
+			title: 'Grid lines style',
+			path: 'scales/gridlines-style.html'
+		}, {
+			title: 'Multiline labels',
+			path: 'scales/multiline-labels.html'
+		}, {
+			title: 'Filtering Labels',
+			path: 'scales/filtering-labels.html'
+		}, {
+			title: 'Non numeric Y Axis',
+			path: 'scales/non-numeric-y.html'
+		}]
+	}, {
+		title: 'Legend',
+		items: [{
+			title: 'Positioning',
+			path: 'legend/positioning.html'
+		}, {
+			title: 'Point style',
+			path: 'legend/point-style.html'
+		}]
+	}, {
+		title: 'Tooltip',
+		items: [{
+			title: 'Positioning',
+			path: 'tooltips/positioning.html'
+		}, {
+			title: 'Interactions',
+			path: 'tooltips/interactions.html'
+		}, {
+			title: 'Callbacks',
+			path: 'tooltips/callbacks.html'
+		}, {
+			title: 'Border',
+			path: 'tooltips/border.html'
+		}, {
+			title: 'HTML tooltips (line)',
+			path: 'tooltips/custom-line.html'
+		}, {
+			title: 'HTML tooltips (pie)',
+			path: 'tooltips/custom-pie.html'
+		}, {
+			title: 'HTML tooltips (points)',
+			path: 'tooltips/custom-points.html'
+		}]
+	}, {
+		title: 'Advanced',
+		items: [{
+			title: 'Progress bar',
+			path: 'advanced/progress-bar.html'
+		}, {
+			title: 'Data labelling (plugin)',
+			path: 'advanced/data-labelling.html'
+		}]
+	}];
+
+}(this));
diff --git a/samples/scales/display-settings.html b/samples/scales/gridlines-display.html
similarity index 100%
rename from samples/scales/display-settings.html
rename to samples/scales/gridlines-display.html
diff --git a/samples/scales/gridlines.html b/samples/scales/gridlines-style.html
similarity index 100%
rename from samples/scales/gridlines.html
rename to samples/scales/gridlines-style.html
diff --git a/samples/scales/linear/suggested-min-max-settings.html b/samples/scales/linear/min-max-suggested.html
similarity index 100%
rename from samples/scales/linear/suggested-min-max-settings.html
rename to samples/scales/linear/min-max-suggested.html
diff --git a/samples/scales/linear/min-max-settings.html b/samples/scales/linear/min-max.html
similarity index 100%
rename from samples/scales/linear/min-max-settings.html
rename to samples/scales/linear/min-max.html
diff --git a/samples/scales/logarithmic/line-logarithmic.html b/samples/scales/logarithmic/line.html
similarity index 100%
rename from samples/scales/logarithmic/line-logarithmic.html
rename to samples/scales/logarithmic/line.html
diff --git a/samples/scales/logarithmic/scatter-logX.html b/samples/scales/logarithmic/scatter.html
similarity index 100%
rename from samples/scales/logarithmic/scatter-logX.html
rename to samples/scales/logarithmic/scatter.html
diff --git a/samples/scales/line-non-numeric-y.html b/samples/scales/non-numeric-y.html
similarity index 100%
rename from samples/scales/line-non-numeric-y.html
rename to samples/scales/non-numeric-y.html
diff --git a/samples/scales/time/combo-time-scale.html b/samples/scales/time/combo.html
similarity index 100%
rename from samples/scales/time/combo-time-scale.html
rename to samples/scales/time/combo.html
diff --git a/samples/scales/time/line-time-point-data.html b/samples/scales/time/line-point-data.html
similarity index 100%
rename from samples/scales/time/line-time-point-data.html
rename to samples/scales/time/line-point-data.html
diff --git a/samples/scales/time/line-time-scale.html b/samples/scales/time/line.html
similarity index 100%
rename from samples/scales/time/line-time-scale.html
rename to samples/scales/time/line.html
diff --git a/samples/style.css b/samples/style.css
index 5b586506418..8224e2c3fdb 100644
--- a/samples/style.css
+++ b/samples/style.css
@@ -1,13 +1,33 @@
+@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
+@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');
+
 body, html {
-	font-family: sans-serif;
+	color: #333538;
+	font-family: 'Lato', sans-serif;
+	line-height: 1.6;
 	padding: 0;
 	margin: 0;
 }
 
+a {
+	color: #f27173;
+	text-decoration: none;
+}
+
+a:hover {
+	color: #e25f5f;
+	text-decoration: underline;
+}
+
 .content {
 	max-width: 800px;
 	margin: auto;
-	padding: 16px;
+	padding: 16px 32px;
+}
+
+.header {
+	text-align: center;
+	padding: 32px 0;
 }
 
 .wrapper {
@@ -42,10 +62,118 @@ body, html {
 	margin: 0 8px 0 0;
 }
 
+.btn {
+	background-color: #aaa;
+	border-radius: 4px;
+	color: white;
+	padding: 0.25rem 0.75rem;
+}
+
+.btn .fa {
+	font-size: 1rem;
+}
+
+.btn:hover {
+	background-color: #888;
+	color: white;
+	text-decoration: none;
+}
+
+.btn-chartjs { background-color: #f27173; }
+.btn-chartjs:hover { background-color: #e25f5f; }
+.btn-docs:hover { background-color: #2793db; }
+.btn-docs { background-color: #36A2EB; }
+.btn-docs:hover { background-color: #2793db; }
+.btn-gh { background-color: #444; }
+.btn-gh:hover { background-color: #333; }
+
 .btn-on {
 	border-style: inset;
 }
 
+.chartjs-title {
+	font-size: 2rem;
+	font-weight: 600;
+	white-space: nowrap;
+}
+
+.chartjs-title::before {
+	background-image: url(logo.svg);
+	background-position: left center;
+	background-repeat: no-repeat;
+	background-size: 40px;
+	content: 'Chart.js | ';
+	color: #f27173;
+	font-weight: 600;
+	padding-left: 48px;
+}
+
+.chartjs-caption {
+	font-size: 1.2rem;
+}
+
+.chartjs-links {
+	display: flex;
+	justify-content: center;
+	padding: 8px 0;
+}
+
+.chartjs-links a {
+	align-items: center;
+	display: flex;
+	font-size: 0.9rem;
+	margin: 0.2rem;
+}
+
+.chartjs-links .fa:before {
+	margin-right: 0.5em;
+}
+
+.samples-category {
+	display: inline-block;
+	margin-bottom: 32px;
+	vertical-align: top;
+	width: 25%;
+}
+
+.samples-category > .title {
+	color: #aaa;
+	font-weight: 300;
+	font-size: 1.5rem;
+}
+
+.samples-category:hover > .title {
+	color: black;
+}
+
+.samples-category > .items {
+	padding: 8px 0;
+}
+
+.samples-entry {
+	padding: 0 0 4px 0;
+}
+
+.samples-entry > .title {
+	font-weight: 700;
+}
+
+@media (max-width: 640px) {
+	.samples-category { width: 33%; }
+}
+
+@media (max-width: 512px) {
+	.samples-category { width: 50%; }
+}
+
+@media (max-width: 420px) {
+	.chartjs-caption { font-size: 1.05rem; }
+	.chartjs-title::before { content: ''; }
+	.chartjs-links a { flex-direction: column; }
+	.chartjs-links .fa { margin: 0 }
+	.samples-category { width: 100%; }
+}
+
 .analyser table {
 	color: #333;
 	font-size: 0.9rem;
diff --git a/samples/tooltips/tooltip-border.html b/samples/tooltips/border.html
similarity index 100%
rename from samples/tooltips/tooltip-border.html
rename to samples/tooltips/border.html
diff --git a/samples/tooltips/tooltip-callbacks.html b/samples/tooltips/callbacks.html
similarity index 100%
rename from samples/tooltips/tooltip-callbacks.html
rename to samples/tooltips/callbacks.html
diff --git a/samples/tooltips/line-customTooltips.html b/samples/tooltips/custom-line.html
similarity index 100%
rename from samples/tooltips/line-customTooltips.html
rename to samples/tooltips/custom-line.html
diff --git a/samples/tooltips/pie-customTooltips.html b/samples/tooltips/custom-pie.html
similarity index 100%
rename from samples/tooltips/pie-customTooltips.html
rename to samples/tooltips/custom-pie.html
diff --git a/samples/tooltips/dataPoints-customTooltips.html b/samples/tooltips/custom-points.html
similarity index 100%
rename from samples/tooltips/dataPoints-customTooltips.html
rename to samples/tooltips/custom-points.html
diff --git a/samples/tooltips/interaction-modes.html b/samples/tooltips/interactions.html
similarity index 100%
rename from samples/tooltips/interaction-modes.html
rename to samples/tooltips/interactions.html
diff --git a/samples/tooltips/position-modes.html b/samples/tooltips/positioning.html
similarity index 100%
rename from samples/tooltips/position-modes.html
rename to samples/tooltips/positioning.html
